Редактирование выделенных элементов

Продолжаю свои улучшалки. Прошлый мой эксперимент оказался тупиковым. На что-то серьезное времени нет, поэтому маюсь всякой всячиной. Сегодня вот придумалось мне сделать редактирование тегов чанков и сниппетов в ресурсах, шаблонах и других чанках по аналогии с phpStorm (насколько это возможно). Например, в ресурсе выделяем тег [[$chunk]] и нажимаем Ctrl+Enter. В результате открывается немного измененное окно быстрого редактирования этого чанка. То же и со сниппетами.

В случае, если чанка или сниппета с таким именем нет, то выводится окно с предложением его создания.

Чтобы перейти на страницу редактирования чанка или сниппета, нужно нажать Ctrl+Shift+Enter.

Принцип действия

Если первый символ в выделенном фрагменте — это знак доллара ($), то ищется чанк. В противном случае, ищется сниппет. Можно выделить любое слово или несколько слов и таким образом создать нужный элемент.
Работает и с Ace и без. Другие редакторы не пробовал.

Возможность создания новых элементов можно использовать, например, при создания шаблона. Т.е. создаем шаблон, формируем структуру с чанками и сниппетами. Например, так
<!DOCTYPE html>
<html lang="ru">
<head>
    [[$head]]
</head>    
<body>
    // Шапка страницы
    [[$header]]
    // Меню
    [[$main_menu]]
    // Галерея
    [[$gallery]]
    // Содержание ресурса 
    [[$content]]
    // Подвал страницы
    [[$footer]]
    </div> 
</body>
</html>
А затем быстро создаем каждый чанк прямо в окне этого шаблона.

Проект на Github.

Update. Версия 1.0.5.
В этой версии появилась возможность парсить чанки и сниппеты используя сочетание клавиш Alt+Enter. Результат парсинга сниппетов может быть непредсказуемым, потому что они могут грузить скрипты, которые негативно повлияют на админку. Поэтому рекомендую парсить только несложные сниппеты. Из-за такой опасности изначально эта возможность отключена. Чтобы ее включить, разкомментируйте блок parseElement в tagelementplugin.js скрипте.
Также добавлена проверка изменений формы элемента как в ресурсах. Если изменения были, то при переходе на другую страницу появится предупреждение. Отключается это системной настройкой confirm_navigation.

Продолжение.

Полная документация.
Сергей Шлоков
07 октября 2015, 17:15
modx.pro
5
3 805
+15
Поблагодарить автора Отправить деньги

Комментарии: 69

Воеводский Михаил
07 октября 2015, 21:25
+5
Велосипед совершенно точно нужен!
Сергей, это великолепная вещь и крайне полезная!!!
Пакет собирай обязательно.
Евгений Webinmd
07 октября 2015, 21:29
0
ДА!
    Николай
    07 октября 2015, 22:50
    +5
    Идея отличная, мне кажется стоит объединить с modx.pro/components/4058-moddevtools-version-1-0-0-pl-rights-and-resources/
    чтобы в целом более универсальный пакет для разработчика получился.

    Илья Уткин
    07 октября 2015, 23:40
    +4
      Василий Столейков
      08 октября 2015, 07:36
      +1
      Классная возможность! Сергей — ты изобретатель!
      Было бы действительно здорово добавить этот функционал в modDevTools modx.pro/components/4349-moddevtools-version-1-1-0-pl-virtual-chunks/, а то он похоже завис на этой версии (1.1.0-pl) и дальше не развивается.
        Сергей Шлоков
        08 октября 2015, 11:18
        0
        Спасибо! А по развитию modDevTools это к Виталию. А мой функционал пригодится для тех, у кого нет moddevtools.
          Василий Наумкин
          08 октября 2015, 11:21
          +2
          1. Сделать pull-request в modDevTools

          2. Если реакции нет, то можно поступить наоборот — закоммитить modDevTools к себе. Выпустить новый пакет, развивать и поддерживать.

          Например, вторым способом у нас появились современные BannerY и MinifyX.
            Сергей Шлоков
            08 октября 2015, 11:28
            0
            Честно говоря, у меня нет желания развивать и поддерживать чужой продукт. Мне бы найти время со своими разобраться. Планов туча. Не представляю, как у тебя на все хватает времени.
              Василий Наумкин
              08 октября 2015, 11:36
              +2
              В первом случае никаких проблем, а во втором это и становится твоим продуктом — форк с изменениями.

              Оригинальная версия остаётся там где есть, а ты пилишь свою. Конечная цель в том, что пользователям не нужно будет ставить одновременно два похожих дополнения.

              Не представляю, как у тебя на все хватает времени.
              Да как-то не задумывался даже, само так получается.
        Владимир
        08 октября 2015, 09:10
        0
        Да, очень интересно было бы, если описанное решение объединить с modDevTools.
        modDevTools же похожим образом создает чанки, и проверяет на их наличие. Расширить функционал не помешало бы.
          Сергей Шлоков
          08 октября 2015, 11:23
          +3
          Раз решили, что пригодится, то собираю пакет и выложу проект на Гитхаб.
          Сделал диалоги чуть привычнее.

          Подключил Ace. Но не получилось заставить подсвечивать php код. С html получилось.
            Сергей Шлоков
            09 октября 2015, 14:40
            0
            Теперь и php светится и femon. Правда только в следующей версии.
            Сергей Шлоков
            09 октября 2015, 07:19
            0
            Добавил переадресацию на страницу редактирования элемента при Ctrl+Shift+Enter.
            П.С. Modx.com почему-то не принимает такое название editSelectedElement. Буду экспериментировать с другими. Так что пока удаляю с Гита.
              Василий Наумкин
              09 октября 2015, 14:52
              0
              Там вчера баг был, вообще ничего не загружалось.

              Пробуй сейчас, у меня всё заработало.
                Сергей Шлоков
                09 октября 2015, 14:55
                0
                Уже. Понять не мог, почему он писал, чтобы я придумал другое имя. Даже Джону написал, что за робот у них там такой привередливый. :)
              Сергей Шлоков
              09 октября 2015, 15:16
              0
              Уже и в modx.com и в modstore.pro. Оперативно.
                Igor Ivanov
                09 октября 2015, 17:24
                0
                Что-то не работает, какая жалость! MODX 2.4.0 Выделяю чанк в шаблоне, без скобок, нажимаю контрол-энтер, но ничего не происходит.
                  Сергей Шлоков
                  09 октября 2015, 17:41
                  0
                  Давайте разбираться. Должны быть ошибки. Что с логах? Что в консоли браузера?
                  У меня работает и на 2.3.6 и на 2.4.0 и на 2.4.2.
                    Igor Ivanov
                    09 октября 2015, 17:59
                    0
                    В логах чисто. В консоли при загрузке шаблона появляется следующее:

                    GET salonria.ru/assets/components/tagElementPlugin/js/mgr/dialogs.js
                    salonria.ru/:150 GET salonria.ru/assets/components/tagElementPlugin/js/mgr/tagelementplugin.js
                    tag_assistant.js:115 GET salonria.ru/assets/components/tagElementPlugin/js/mgr/tagelementplugin.js 404 (Not Found)fg @ tag_assistant.js:115(anonymous function) @ tag_assistant.js:116Array.forEach.d @ tag_assistant.js:8ag.Ja @ tag_assistant.js:116yl @ tag_assistant.js:314target.(anonymous function) @ extensions::SafeBuiltins:19EventImpl.dispatchToListener @ extensions::event_bindings:387target.(anonymous function) @ extensions::SafeBuiltins:19$Array.forEach.publicClass.(anonymous function) @ extensions::utils:94EventImpl.dispatch_ @ extensions::event_bindings:371EventImpl.dispatch @ extensions::event_bindings:393target.(anonymous function) @ extensions::SafeBuiltins:19$Array.forEach.publicClass.(anonymous function) @ extensions::utils:94messageListener @ extensions::messaging:179target.(anonymous function) @ extensions::SafeBuiltins:19EventImpl.dispatchToListener @ extensions::event_bindings:387target.(anonymous function) @ extensions::SafeBuiltins:19$Array.forEach.publicClass.(anonymous function) @ extensions::utils:94EventImpl.dispatch_ @ extensions::event_bindings:371EventImpl.dispatch @ extensions::event_bindings:393target.(anonymous function) @ extensions::SafeBuiltins:19$Array.forEach.publicClass.(anonymous function) @ extensions::utils:94dispatchOnMessage @ extensions::messaging:310
                    tag_assistant.js:115 GET salonria.ru/assets/components/tagElementPlugin/js/mgr/dialogs.js 404 (Not Found)
                      Сергей Шлоков
                      09 октября 2015, 18:01
                      0
                      Ace установлен?
                        Igor Ivanov
                        09 октября 2015, 18:02
                        0
                        Да
                          Сергей Шлоков
                          09 октября 2015, 18:03
                          0
                          При нажатии Ctrl+Enter запрос на сервер уходит? Какой ответ?
                            Igor Ivanov
                            09 октября 2015, 18:05
                            0
                            Нет, при нажатии Ctrl-Enter в консоли ничего нет.
                              Сергей Шлоков
                              09 октября 2015, 18:07
                              0
                              А плагин включен? В исходном коде страницы есть подключение скрипта tagelementplugin.js?
                Igor Ivanov
                09 октября 2015, 18:15
                0
                Плагин включен. В исходном коде подключение скрипта есть

                <script src="/assets/components/tagElementPlugin/js/mgr/tagelementplugin.js" type="text/javascript"></script>
                При этом, что интересно, клик на путь для подключения скрипта не показывает его содержимого, т.е. открывается обычная страница сайта, как при запросе несуществующей страницы (стр. 404 еще не создана). А при клике на путь любого другого скрипта как обычно загружается его содержимое.
                  Сергей Шлоков
                  09 октября 2015, 18:19
                  0
                  Это значит, что он не подключился. Он должен лежать по указанному пути в /assets/… Он там есть?
                  Igor Ivanov
                  09 октября 2015, 18:19
                  0
                  Попробовал еще на двух сайтах, на одном, с MODX 2.2.15 работает как положено, на другом, с MODX 2.2.14, тоже не работает.
                    Igor Ivanov
                    09 октября 2015, 18:21
                    0
                    Да, есть.
                      Сергей Шлоков
                      09 октября 2015, 18:24
                      0
                      Даже не знаю тогда в чем причина. Может с правами чего?
                        Igor Ivanov
                        09 октября 2015, 18:25
                        0
                        Может. Сайты, на которых не хочет работать, на хостинге, правда на разных. а тот, на котором заработало, на локальной машинке.
                      Igor Ivanov
                      09 октября 2015, 18:24
                      0
                      Ну да, в консоли так и пишет, что не нашел файл по указанному пути, почему-то… На двух разных сайтах.
                        Сергей Шлоков
                        09 октября 2015, 18:36
                        0
                        Виталий нашел причину. Пропустил этот момент. В плагине нужно исправить пути в двух местах.
                        Igor Ivanov
                        09 октября 2015, 18:39
                        0
                        Ну да, точно! Спасибо Вам и Виталию!
                        Павел Гвоздь
                        09 октября 2015, 22:56
                        +2
                        Спасибо большое, Сергей! Очень интересный хук! Есть вопрос и просьба.

                        Вопрос: Планируется ли научить его понимать Феномовский синтаксис? Чанки: {include 'chunk'}, {insert 'chunk'}, getChunk('chunk'), и сниппеты: runSnippet('snippet')?

                        Просьба: Если будете совмещать это с modDevTools, то очень прошу сделать возможность в настройках отключить встроенное в modDevTools автосоздание чанков. Это жутко напрягало при разработке, также насколько я помню, он помимо названий чанков из параметров tpl и т.п. дёргал и названия из параметров sort и т.п., то бишь автоматом создавались чанки вроде DESC, ASC и т.д. Это ещё больше напрягало, чем первое, приходилось удалять компонент из-за этого.
                          Сергей Шлоков
                          10 октября 2015, 07:51
                          +1
                          Вопрос: Планируется ли научить его понимать Феномовский синтаксис? Чанки: {include 'chunk'}, {insert 'chunk'}, getChunk('chunk'), и сниппеты: runSnippet('snippet')?
                          Это же не парсер. Для того, чтобы открыть сниппет, выделите слово snippet в вашем выражении runSnippet('snippet') и нажмите Ctrl+Enter. Чтобы открыть чанк, нужно добавить знак доллара в перед именем chunk в {include 'chunk'}. Главное, потом не забыть его убрать.
                          Если будете совмещать это с modDevTools
                          Почему все просят об этом меня. У меня нет ни времени ни желания разбираться с modDevTools. Я им не пользуюсь. Просите автора. Или сами попробуйте совместить, все исходники открыты.
                            Павел Гвоздь
                            10 октября 2015, 09:07
                            +2
                            Почему все просят об этом меня. У меня нет ни времени ни желания разбираться с modDevTools. Я им не пользуюсь. Просите автора. Или сами попробуйте совместить, все исходники открыты.
                            Возможно покажусь сумашедшим, но я бы попросил вообще не совмещать его с modDevTools, т.к. хоть убейте меня, но я не смог по достоинству оценить его возможности. Из недостатков я уже назвал 2 причины, почему мне пришлось безжалостно избавиться от него на всех своих (и не своих) сайтах. Но ведь моя просьба, я подумал, ничего бы не значила, раз столько желающих собралось. Поэтому высказал просьбу несколько иного характера. :)
                          Семён Кудрявцев
                          11 октября 2015, 10:24
                          0
                          Предложение: Удобная штука, но хотелось бы что бы она при создании нового чанка или сниппета, в качестве имени брала текст из выделения, на данный момент так — написал в шаблоне, например чанк [[$my_new_chunk_for_new_headersiteTpl]], выделил всё, нажал волшебное сочетание клавиш, а в появившемся всплывающем окне пустая карточка чанка, было бы логичнее если поле имя нового чанка уже было заполнено текстом из выделения, иначе дважды приходится писать имя. И второй момент, при полном переходе к созданию нового чанка или сниппета, если забыл сохранить шаблон в котором работал, все изменения умрут, было бы логичнее сначала сохранять объект из которого будет осуществлён переход.
                            Сергей Шлоков
                            11 октября 2015, 11:49
                            0
                            хотелось бы что бы она при создании нового чанка или сниппета, в качестве имени брала текст из выделения
                            Так и было в первой версии. Поломалось в процессе. Исправлю в следующей версии. Причем сейчас можно выделить даже сложный тег целиком, например такой [[!mySnippet? &param=`1`]]. В новом окне имя сниппета будет указано правильное (mySnippet).
                            Была мысль создавать сниппет сразу с уже указанными параметрами, но я не знаю как это сделать без глобальных доработок. Оставил на будущее.
                            И второй момент, при полном переходе к созданию нового чанка или сниппета, если забыл сохранить шаблон в котором работал, все изменения умрут, было бы логичнее сначала сохранять объект из которого будет осуществлён переход.
                            Ну так работает стандартный механизм MODX. Попробуйте при создании любого элемента кликнуть на ресурс или другой элемент. Перейдет не предупреждая, без сохранения.
                            В принципе, можно подумать о хуке предупреждения, но тут есть сложности — вы можете наоткрывать кучу окон с чанками и сниппетами. Тогда при переходе их тоже нужно сохранять.
                              Сергей Шлоков
                              11 октября 2015, 16:15
                              0
                              По вопросу сохранения изменений…
                              Не знаю почему, но авторы MODX сделали проверку изменений только у ресурсов, за которую отвечает системный параметр confirm_navigation (Подтверждать переход с несохраненными изменениями). А у элементов почему-то решили не делать. Я добавил такую проверку и также завязал ее на настройку confirm_navigation. Все это в новой версии.
                              Сергей Шлоков
                              14 октября 2015, 10:10
                              +1
                              В новой версии 1.0.5 — добавил возможность парсить сниппеты и чанки (не редактировать, а именно парсить). Это может быть немного опасно, так как сниппеты могут грузить скрипты, которые могут поломать админку. Поэтому изначально эта возможность закомментирована. Но если сниппеты несложные — просто вывод информации, то почему бы и не посмотреть, что он выводит с разными параметрами. Такой маленький тест.
                              С чанками опасности поломать админку нет (если в них нет вызова сниппетов), но обычно они завязаны на css, которого в админке нет, поэтому отображение может быть кривым. Но опять же, почему бы и нет.
                              Для этого действия есть свое сочетание клавиш Alt+Enter.
                                Артем
                                16 октября 2015, 17:31
                                0
                                не работает, хром пишет ошибку
                                Uncaught TypeError: Cannot read property 'id' of undefined
                                index.php?f=/assets/components/tagelementplugin/js/mgr/tagelementplugin.js,/assets/components/tagelementplugin/js/mgr/dialogs.js
                                  Василий Столейков
                                  07 июля 2016, 12:24
                                  0
                                  А можно добавить вызов быстрого редактирования элементов и в коде сниппета?
                                  Например если в коде прописываешь tpl-ку, и нужно её быстро отредактировать.
                                  Или в коде вызываешь другой сниппет и нужно быстро заглянуть в него.
                                    Сергей Шлоков
                                    08 июля 2016, 06:50
                                    0
                                    Как ты себе это представляешь?
                                      Василий Столейков
                                      08 июля 2016, 08:18
                                      0
                                      Точно так же как это делается в чанках, через Ctrl+Enter.
                                      Обычно на феноме я добавляю $ перед названием чанка и он тоже открывается. По такому же принципу я вижу это и в сниппетах.
                                      И в ресурсах было бы неплохо, там где код, а не визуальный редактор.
                                      Если это конечно не слишком сложно…
                                        Василий Столейков
                                        08 июля 2016, 08:19
                                        0
                                        Если я правильно понял твой вопрос…
                                          Сергей Шлоков
                                          08 июля 2016, 09:04
                                          +1
                                          Ну если не нужно автоматически определять объект, а просто сделать, чтобы tagElementPlugin вызывался и в сниппетах, то это не сложно. Просто нужно добавить в плагин еще один case
                                          case 'OnSnipFormPrerender':
                                                  $field = 'modx-snippet-snippet';
                                                  $panel = 'modx-snippet-panel';
                                          	break;
                                          А про ресурсы не совсем понял. Вчера целый день за рулём. Спал всего 3 часа. Соображаю туго )
                                            Василий Столейков
                                            08 июля 2016, 10:01
                                            0
                                            Отлично, то что нужно!
                                            Сможешь добавить это в следующую версию компонента? Вроде не будет мешать это никому, и мне не хочется на всех своих сайтах лазить в плагин для добавления вышеприведённого кода…
                                            А про ресурсы я был не прав, сейчас проверил и всё работает, извини. Вчера тоже был в разъездах и спал всего 4 часа. Соображаю туго )))
                                    Roman
                                    11 июня 2017, 18:53
                                    0
                                    Привет всем. Подскажите, что я делаю не так? Установил MODX Revolution 2.5.7-pl, поставил плагин tagElementPlugin.
                                    Ни одно из сочетаний клавиш не выполняется. Например, выделяю название чанка с символом $, жму Ctrl+Enter, тишина. Так же и с остальными сочетаниями клавиш.
                                    Ошибок при установке не было, в системных настройках все значения сочетаний прописаны.
                                    Возможно ли, что проблема совместимости с версией MODX? Устанавливал последнюю версию с офф. сайта.
                                    Переустанавливать плагин пробовал, ничего не изменилось.
                                      Александр
                                      04 июля 2017, 17:07
                                      0
                                      компонент супер. очень сильно упрощает поиск и редактирование. спасибо за него.

                                      было бы еще круто, если бы по сочетанию клавиш открывались шаблоны которые прописаны в снипетах, еще бы было бы удобней работать.
                                        Сергей Шлоков
                                        04 июля 2017, 21:51
                                        0
                                        Рад что пригодилось.

                                        было бы еще круто, если бы по сочетанию клавиш открывались шаблоны которые прописаны в снипетах, еще бы было бы удобней работать.
                                        А поподробнее.
                                        Константин
                                        03 февраля 2018, 23:03
                                        0
                                        Появляется такое сообщение при уходе со страницы редактирования шаблона, чанка, либо при обновлении страницы.



                                        Причем до этого документ был сохранен.
                                          Сергей Шлоков
                                          04 февраля 2018, 09:39
                                          +1
                                          Fixed
                                            Константин
                                            04 февраля 2018, 13:04
                                            0
                                            Не помогло. Обновлял, переустанавливал. Ноль результата. Даже просто заходишь на страничку редактирования, к примеру, шаблона, жмешь сохранить, ничего не редактируя, пытаешься перейти куда-нибудь и видишь это сообщение.
                                              Константин
                                              04 февраля 2018, 15:19
                                              0
                                              Увидел новое обновление. Обновился, вроде все ок! Спасибо!
                                            Евгений Корчмарек
                                            17 июля 2018, 14:12
                                            0
                                            Добрый день, интересный функционал — а можно ли для Mac OS добавить другое сочетание клавиш, например CMD-Enter?

                                            Спасибо.
                                              Сергей Шлоков
                                              18 июля 2018, 06:59
                                              0
                                              Я не знаком с Mac OS. А что, код клавиши CMD отличается от кода клавиши Control?
                                                Евгений Корчмарек
                                                18 июля 2018, 10:05
                                                0
                                                На маке тоже есть Control — но Control-Enter — перехватывается системой. Хоткеи приняты с CMD — и лучше с буковой.
                                                CMD — это как кнопка Windows — тот же код.
                                                  Сергей Шлоков
                                                  18 июля 2018, 15:17
                                                  0
                                                  Поэкспериментируйте с системными настройками, отвечающими за сочетание клавиш. Документация в помощь. Как видите, там нет клавиши CMD.
                                              Александр
                                              20 декабря 2018, 22:02
                                              +1
                                              Привет.
                                              было бы удобно если бы можно было бы допилить плагин, если бы он еще открывал вот такие вот конструкции prntscr.com/luhm3i программист делает все на файлах (работает с гит хабом) и искать их не очень удобно и было бы круто, если бы можно было открывать это дело в новом. окне, где подгружается редактор ace
                                                Сергей Шлоков
                                                21 декабря 2018, 07:31
                                                0
                                                Всем ли нужна такая фича проверить очень легко. Насобираете 2000 руб., сей диковине быть.

                                                П.С. Лично я ставить бы на это не стал.
                                                  Александр
                                                  21 декабря 2018, 10:37
                                                  0
                                                  Всем или нет, не знаю.
                                                  Это предложение по улучшению, еще одно могу предложить.
                                                  не удобно искать tpl в снипетах, было бы тоже удобно, чтобы выделил название tpl и нажал комбинацию клавиш, открылся чанк. Пример: prntscr.com/lxsgmw

                                                  А делать или нет, решать вам)
                                                    Сергей Шлоков
                                                    21 декабря 2018, 20:11
                                                    +2
                                                    Предложение по улучшению, которое больше никому не нужно.
                                                    Я много дополнений сделал для разработчиков. Надеюсь, заслужил их благодарность. Сейчас я делаю доработки, которые нужны мне, и критичные исправления. Ну иногда ещё спонсируют.
                                                    Исходники моих дополнений открыты. Так что все желающие добавить новый функционал могут это сделать беспрепятственно и бесплатно.
                                                    А что касается второго предложения — читаем документацию или гуглим.
                                                Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                                                69