Блочный редактор

Структура файлов

В Блочном редакторе используется следующая структура данных:

• /bitrix/components/sf.block.edit - расположение компонента (TEMPLATE_PATH - путь до компонента);
• TEMPLATE_PATH/templates/.default/ - расположение шаблона;
• TEMPLATE_PATH/template.php - файл шаблона;
• TEMPLATE_PATH/panel.php - основная панель управления;
• TEMPLATE_PATH/save.php - форма сохранения;
• TEMPLATE_PATH/add.row.php - кнопка добавления строки;
• /simai/admin/block - расположение дополнительных подключаемых файлов (SF_DIR_BE - путь до доп.файлов);
• SF_DIR_BE/position.php - файл временного сохранения параметров в сессию;
• SF_DIR_BE/addblock.php - панель всех блоков используется для вставки нового блока;
• SF_DIR_BE/block.config.php - редактирование параметров блока;
• SF_DIR_BE/col.config.php - редактирование параметров колонки;
• SF_DIR_BE/row.config.php - редактирование параметров строки;
• SF_DIR_BE/defaultParam - Шаблоны конфигов для пустых строк и колонок (SF_DIR_BE_CONFIG - путь до стандартных конфигов);
• SF_DIR_BE_CONFIG/row.php - Шаблон пустой строки;
• SF_DIR_BE_CONFIG/column.php - Шаблон пустой колонки;
• SF_DIR_BE/template - расположение файлов верстки повторяющихся элементов (SF_DIR_BE_HTML_TEMPLATE - путь до шаблонов);
• SF_DIR_BE_HTML_TEMPLATE/column.resize.list.php - верстка изменение ширины колонки из списка;
• SF_DIR_BE_HTML_TEMPLATE/column.resize.php - верстка изменение ширины колонки ползунок;
• SF_DIR_BE_HTML_TEMPLATE/component.panel.php - верстка мини панели управления (тулбар) блоком;
• SF_DIR_BE_HTML_TEMPLATE/column.panel.php - верстка мини панели управления (тулбар) колонкой;
• SF_DIR_BE_HTML_TEMPLATE/.row.panel.php - верстка мини панели управления (тулбар) строкой;
• SF_DIR_BE_HTML_TEMPLATE/add.block.php - кнопка добавления блока;
• SF_DIR_BE_HTML_TEMPLATE/row.title.php - верстка наименования строки и управления строкой;
• SF_DIR_BE_HTML_TEMPLATE/row.php - верстка строки используется для вставки новой строки;
• SF_DIR_BE_HTML_TEMPLATE/column.php - верстка колонки используется для вставки новой колонки;
• SF_DIR_BE_HTML_TEMPLATE/block.php - верстка блока используется для вставки нового блока;
• SF_DIR_BE_HTML_TEMPLATE/template.edit.view.on.php - верстка кнопок Desctop, Tablet, Mobile в режиме просмотра;
• /simai/asset/block-editor - ресурсы (SOURCE_BE - путь до ресурсов);
• SOURCE_BE/css/editor.css - стили
• SOURCE_BE/js/editor.js - скрипт управления функционалом;
• SOURCE_BE/js/editorMobile.js - скрипт управления режимами экрана (Desctop,Table,Mobile);
• SOURCE_BE/js/dragula.js - скприпт управления сортировкой строк, колонок и блоков.

События JS

• uploadStatusChangeEditor - обновление счетчика изменений на странице;
• updateBlockEditor - обновление HTML
• updateBlockEditorAjax - перезагрузка и обновление HTML;
• updateInHistoryBlockEditorAjax - перезагрузка и обновление HTML с сохранением истории;
• savePageBlockEditorAjax - сохранение изменений на странице и обновление HTML с очисткой истории;
• savePageBlockEditor - сохранение изменений в сессии;
• addNewBlockBlockEditor - добавление нового блока;
• saveHistoryBlockEditor - сохранение в историю изменений сделанных через настройки стороки, колонки и блока.

Режимы и функции

Главная панель

Главная панель разделяется на две части, на левую и правую. В левой части находится индикатор изменений на странице и кнопка сохранения. В правой части находятся следующие кнопки управления:

• - Показать общие настройки области
• - Включить режим просмотра области:
  • Desctop - десктопный режим - широкие экраны
  • Tablet - планшетный режим
  • Mobile - мобильный режим
• - Включить режим редактирования:
  • - с колонками;
  • - без колонок.
• Режимы управления историей:
  • - Вернуться назад
  • - Промотать вперед;
• - Закрыть редактор.

Панель управления строки

Находится над строкой. В левой части находится заголовок строки и кнопка редактирования заголовка.

В правой части находится следующие функции управления строкой:

• - удалить строку
• - переместить строку наверх
• - переместить строку вниз

Панель управления шириной колонки

Панель отображается в виде 12 индикатора с числом отрожающим ширину колонки и выпадающим списком имеющим восможную ширину колонки

Также для управления шириной колонки присутствует позунок между колонок или в конце каждой колонки.

Панель управления строками, колонками и блоками

Панели строк, колонок и блоков идентичны по фукнкционалу и составом кнопок

• - сортировка;
• - добавление новой строки, колонки или блока;
• - копировать строку, колонку или блок;
• - показать настройки
• - сохранить в пользовательскую библиотеку;
• - диактивировать - активировать;
• - удалить;

Параметры основного класса BlockEditor управления фукнционалом

• viewMode - режим просмотра
• animation - HTML анимация загрузки
• page - пути страниц для сохранения и редактирования:
  • save - путь к странице для временного сохранения в сессию;
  • saveAjax - путь к страниц для полного сохранения.
• template - пути к страницам шаблонов для вставки новых строк, столбцов и блоков:
  • row - шаблон строки
  • column - шаблон колонки
  • block - шаблон блока
  • addblock - шаблон кнопки добавления блока
• defaultParam - шаблоны конфигов строк и колонок:
  • row - конфиг строки
  • column - конфиг колонки
• message - системные сообщения:

  Используются для записи в историю и при системных уведомлениях

  • sort - сообщение сортировки.
  • panel - сообщения для панели:
    • editMode - для режима редактирования с колонками и без.
  • row - сообщения для строк
    • active - при активировании
    • deactive - при диактивировании
    • title - при редактировании заголовка
    • editParam - при редактировании параметров
    • add - при добавлении новой;
    • copy - при копировании;
    • remove - при удалении;
    • sort - при сортировке.
  • column - сообщения для колонок:
    • active - при активировании;
    • deactive - при диактивировании;
    • resize - при изменении ширины колонки;
    • editParam - при редактировании параметров;
    • add - при добавлении новой;
    • copy - при копировании;
    • remove - при удалении;
    • sort - при сортировке.
  • block - сообщения для блоков:
    • active - при активировании;
    • deactive - при диактивировании;
    • title - при редактировании заголовка;
    • editParam - при редактировании параметров;
    • add - при добавлении нового;
    • copy - при копировании;
    • remove - при удалении;
    • sort - при сортировке;
• icon - иконки:
  • toolbar - мини-панель управления (toolbar)
  • activeElement - активировать | диактивировать строку, колонку и блок
    • active - активировать;
    • diactive - диактивировать.

Пример параметров:

{
    viewMode : 'N',
    animation : '<div class="sf-block-editor--animation-status animation-none m-0 bw-0 bRadius--0 '
        + 'image-load--animation z-1 align-items-center '
        + 'justify-content-center bg-white absolute top-0 right-0'
        + 'ab-0 left-0 w-full h-full flex">'
        + '<svg style="max-width:150px;max-height:150px!important"'
        + 'class="loader--animation w-full h-full" viewBox="25 25 50 50">'
        + '<circle class="side-panel-default-loader-path" cx="50" cy="50"'
        + 'r="20" fill="none" stroke-miterlimit="10"></circle>'
        + '</svg></div>',
    animationRelative :
        '<div class="sf-block-editor--animation-status animation-none '
        + ' bRadius--0 image-load--animation z-1 align-items-center '
        + ' justify-content-center bg-white w-full p-4 flex m-0 bw-0">'
        + '<svg style="max-width:150px;max-height:150px!important"'
        + 'class="loader--animation w-full h-full" viewBox="25 25 50 50">'
        + '<circle class="side-panel-default-loader-path" cx="50" cy="50"'
        + 'r="20" fill="none" stroke-miterlimit="10"></circle>'
        + '</svg></div>',
    page :
    {
        save : '/simai/admin/block/position.php',
        ajax : '',
        saveAjax : '',
    },
    template :
    {
        row : '/simai/admin/block/template/row.php',
        column : '/simai/admin/block/template/column.php',
        block : '/simai/admin/block/template/block.php',
        addblock : '/simai/admin/block/template/add.block.php',
    },
    defaultParam :
    {
        row : '/simai/admin/block/defaultParam/row.php',
        column : '/simai/admin/block/defaultParam/column.php',
    },
    message :
    {
        sort : 'Сортировка',
        panel :
        {
            editMode : 'Режим редактирования с колонками | Без колонок',
        },
        row :
        {
            active : 'Активация строки',
            deactive : 'Диактивация строки',
            title : 'Редактирование заголовка строки',
            editParam : 'Редактирование параметров строки',
            add : 'Добавление новой строки',
            copy : 'Копирование строки',
            remove : 'Удаление строки',
            sort : 'Сортировка строки',
        },
        column :
        {
            active : 'Активация колонки',
            deactive : 'Диактивация колонки',
            resize : 'Изменение ширины колонки',
            editParam : 'Редактирование параметров колонки',
            add : 'Добавление новой колонки',
            copy : 'Копирование колонки',
            remove : 'Удаление колонки',
            sort : 'Сортировка колонки'
        },
        block :
        {
            active : 'Активация блока',
            deactive : 'Диактивация блока',
            title : 'Редактирование заголовка блока',
            editParam : 'Редактирование параметров блока',
            add : 'Добавление нового блока',
            copy : 'Копирование блока',
            remove : 'Удаление блока',
            sort : 'Сортировка блока'
        },
    },
    icon :
    {
        toolbar :
        {
            activeElement :
            {
                active : '<i class="fas fa-eye transition"></i>',
                diactive : '<i class="fas fa-eye-slash transition"></i>',
            },
        },
    }
}

Изменить статью