Кнопки редактирования элементов инфоблока в режиме правки

В дополнение к статье Редактирование и удаление элементов и разделов из публичной части сайта Битрикс дополню реализацию следующего случая: как отобразить кнопки редактирования элементов инфоблока в режиме правки, если вывод этих элементов осуществляется простым GetList-ом

Собственно реализация:

CModule::IncludeModule("iblock");

//создаём экземпляр CBitrixComponent 
//для привязки к элементам инфоблока
//кнопок редактирования:
$app = new CBitrixComponent();

//какой-то гетлист...
$elems = CIBlockElement::GetList(array("SORT"=>"ASC"), 
                            array('IBLOCK_ID' => 2,
                                  'ACTIVE' => 'Y'
                                 ), 
                            false, 
                            false, 
                            array('ID',
                                  'IBLOCK_ID',
                                  'NAME'
                                 )
                            );
while ($elem = $elems->Fetch()){

 $arButtons = CIBlock::GetPanelButtons(
     $elem["IBLOCK_ID"],
     $elem["ID"],
     0,
     array("SECTION_BUTTONS"=>false, "SESSID"=>false)
 );

 $elem["ADD_LINK"] = $arButtons["edit"]["add_element"]["ACTION_URL"];
 $elem["EDIT_LINK"] = $arButtons["edit"]["edit_element"]["ACTION_URL"];
 $elem["DELETE_LINK"] = $arButtons["edit"]["delete_element"]["ACTION_URL"]; 

 $elem["ADD_LINK_TEXT"] = $arButtons["edit"]["add_element"]["TEXT"];
 $elem["EDIT_LINK_TEXT"] = $arButtons["edit"]["edit_element"]["TEXT"];
 $elem["DELETE_LINK_TEXT"] = $arButtons["edit"]["delete_element"]["TEXT"];

 $app->AddEditAction($elem['ID'], $elem['ADD_LINK'], $elem["ADD_LINK_TEXT"]);
 $app->AddEditAction($elem['ID'], $elem['EDIT_LINK'], $elem["EDIT_LINK_TEXT"]);
 $app->AddDeleteAction($elem['ID'], $elem['DELETE_LINK'], $elem["DELETE_LINK_TEXT"], array("CONFIRM" => 'Точно удалить?'));

 ?>
 <div id="<?=$app->GetEditAreaID($elem['ID'])?>">
    <!--какие-то данные элемента инфоблока-->
 </div>
 <?

})

Анимация AJAX загрузки. Эффект размытия.

Давно хотел сделать так, чтобы при загрузке информации в какой-либо блок (к примеру, AJAX-ом) помимо обычного прелоадера сам блок бы еще размывался.

Собственно пример можно посмотреть здесь: https://jsfiddle.net/va61mk5t/1/

Читать далее

Интересный способ выравнивания по центру экрана модального окна

Сразу предупреждаю: способ хорош в случае, если высота модального окна < высоты экрана. Если высота модального окна > высоты экрана и сам контент страницы порождает скроллинг, то может вылезти 2 скроллинга. Этот момент можно пофиксить выставив overflow-y: hidden; у body в момент отображения модального окна.

Взято с хабра из комментов

Принцип такой:

  • создаем заголовочный блок и ставим ему следующие стили:
.modal_overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    z-index: 9;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: auto;
}
  • в этом блоке будет находится оверлей и устанавливаются правила позиционирования дочерних элементов — в данном случае самого модального окна
Читать далее

Простой календарь выбора даты на JS

Для работы календаря требуется подключенный JQuery UI.

Собственно заходим на http://code.jquery.com/ui/ и выбираем версию, которая больше нравится.

Далее подключаем его:

<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' rel='stylesheet' type='text/css'>

Обратите внимание, что smoothness — это название темы (в зависимости от используемой темы будет по разному выглядеть календарь)

В вёрстку пихаем какой-нибудь инпут, под которым должен появляться календарь при клике:

Читать далее

Three js — заготовка класса для разработки 3d приложения

На коленке набросал небольшую заготовку класса для будущих разработок 3d приложений на Three JS. М.б. кому пригодится.
Поддерживается изменение размеров окна браузера (вьюшка резировая с динамическим перерисовыванием сцены)
В примере ниже рисуется кубик с осями ординат. Поддерживается изменение положения камеры с помощью мышки.

Читать далее