SummerFloors

SummerFloors - редактируемые планы помещений
Автор дополнения
touol
Пакетов
12
Закачек
972
Обычно отвечает в течение суток
Автор дополнения
Пакетов
12
Закачек
972
Обычно отвечает в течение суток
Версия 1.0.9-beta
Дата выпуска 28.03.2022
Загрузки 2
Просмотры 1 287
Внимание, этот компонент требует версию PHP 7.0 или выше! Если ваш сайт использует PHP ниже требуемого, установка этого дополнения может его сломать.
Внимание, этот компонент требует версию MODX не ниже 2.7 !
Понадобилось сделать svg карту склада. Директор оплатил создание компонента с визуальным редактором полигонов. К счастью, нашел компонент https://github.com/summerstyle/summer, который идеально подошел в качестве основы редактора.

Спасибо автору компонента.
Вывод карты этажей делал опираясь на статью Как сделать интерактивную схему на SVG + jQuery
Получилось вот так.

При наведении область выделяется. При клике появляется модалка с информацией. Причем с какой информацией зависит только от вашей фантазии. По умолчанию, подгружаю pagetite и description ресурса, id которого забито в поле комната (Двойной клик по объекту в редакторе).

Cтандартная вёрстка предполагает наличие скриптов и стилей от Bootstrap v3 + требуется jQuery.
Установка
1) Поставить компонент. При этом установиться еще и getTables и pdoTools.
2) Создать 3 страницы:
а) Таблица редактора. На нее код:
{'!getTabs' | snippet : ['config'=>'summerfloors_editor_front']}
Запретить доступ к ней не админам.
б) Редактор карты:
{'!SummerFloorsEditor' | snippet : []}
Запретить доступ к ней не админам. ID страницы вбить в системную настройку «summerfloors_editor_page».
в) Карта здания для посетителей сайта.
{'!SummerFloors' | snippet : [
    'cart_id'=>2,
    'pdoTools'=>[
        'class'=>'modResource',
        'where'=>[
            'modResource.id'=>'room',
        ],
        'return'=>'data',
    ],
]}
Сниппет можно вывести где угодно в коде страниц.
Параметры сниппета:
cart_id — id карты. по умолчанию 1.
tpl — чанк карты. по умолчанию SummerFloors.
loadmodal — При клике подгружать модалку. по умолчанию 1.
modal — чанк модалки. по умолчанию SummerFloorsModal.
pdoTools — запрос к базе в формате pdoTools. Результат запроса доступен в модалке в переменной pdoData. по умолчанию ''.
3) Добавить группе редакторов политику «SummerFloorsEditor».

Использование
1) Редактирование. Зайти на страницу «Таблица редактора». Создать карту и этажи к ней. В таблице «Этажы» жмем ссылку на Редактор карты этажа.
В Редактор карты, жмем new_image и указываем подложку этажа по url. Затем кнопками «rectangle», «circle», «polygon» создаем объекты на карте этажа. Временами жмем «Save», чтобы все сохранилось. Затем жмем «edit» и редактируем объекты. По двоймому клику по оъекту выскакивает окно атрибутов объекта:


Демо
Карта здания для посетителей сайта
Таблица редактора

1.0.9-beta

  • Правка координат.

1.0.8-beta

  • Еще правки.

1.0.7-beta

  • Правки перед выпуском.

1.0.4-beta

  • Исправлена ошибка с правами.

1.0.3-beta

  • Частичный перевод.

1.0.0-beta

  • New build script.

Последние обсуждения в сообществе MODX.pro