Иконки Awesome Font в меню [InstantCMS 2.4.0]

4741
Пост навеян данной темой на форуме.
В теме было высказано много вариантов реализации, попробовал сделать для сообщества ещё один.

""

""

""

Демо


Инструкция.

1) Распакуйте этот архив в корень сайта. Если у Вас стоит не дефолтный шаблон, перед заливкой переименуйте папку default в архиве на название своего шаблона.

2) Откройте файл \icons\system\controllers\admin\forms\form_menu_item.php, найдите строку 64, замените
Код PHP:
  1. 'type' => 'fieldset',
  2. 'title' => LANG_OPTIONS,
  3. 'childs' => array(
  4. new fieldString('options:class', array(
  5. 'title' => LANG_CSS_CLASS,
  6. ))
  7. )
  8. ),
на
Код PHP:
  1. 'type' => 'fieldset',
  2. 'title' => LANG_OPTIONS,
  3. 'childs' => array(
  4. new fieldString('options:class', array(
  5. 'title' => LANG_CSS_CLASS,
  6. )),
  7. new fieldString('options:icon', array(
  8. 'title' => LANG_CSS_ICON,
  9. ))
  10. )
  11. ),
3) Откройте файл \system\languages\ru\language.php, в каком-то месте (например, на 48 строке), добавьте
Код PHP:
  1. define('LANG_CSS_ICON', 'Иконка');
4) В head в \templates\(ваш шаблон)\main.tpl.php подключите стиль шрифта
Код PHP:
  1. <?php $this->addMainCSS("templates/{$this->name}/css/font-awesome.min.css"); ?>
5) Откройте \templates\(ваш шаблон)\assets\ui\menu.tpl.php, на ~24 строке добавьте
Код PHP:
  1. $menu_item_icon = isset($item['options']['icon']) ? '<i class="menu-icon '.$item['options']['icon'].'"></i> ' : '';
в этом же файле добавьте на ~44 строке (перед <span class="wrap">)
Код PHP:
  1. <?php echo $menu_item_icon; ?>
6) Откройте \templates\(ваш шаблон)\js\core.js, в самом конце добавьте
Код JAVASCRIPT:
  1.  
  2. $(window).on('load', function () {
  3. if ($('input#options_icon').length) {
  4. var input_option_icon = $('input#options_icon'),
  5. input_option_icon_choose_html,
  6. input_option_icon_preview,
  7. input_option_icon_html = function (icon) {
  8. return '<i class="' + icon + '"></i>';
  9. },
  10. check_input_option_icon_choose = function() {
  11. if (input_option_icon.val() != '') {
  12. return input_option_icon_choose_html = '<a href="javascript:void(0)" class="input_option_icon_preview"></a> <a href="javascript:void(0)" class="add">Изменить</a> или <a href="javascript:void(0)" class="remove">удалить</a>';
  13. } else {
  14. return input_option_icon_choose_html = '<a href="javascript:void(0)" class="add">Выбрать</a>';
  15. }
  16. };
  17. input_option_icon.hide();
  18. $('<div class="input_option_icon_choose">' + input_option_icon_choose_html + '</div>').insertAfter(input_option_icon);
  19. var input_option_icon_choose = $('.input_option_icon_choose');
  20. input_option_icon_choose.html(check_input_option_icon_choose());
  21. $('.input_option_icon_preview').html(input_option_icon_html(input_option_icon.val()));
  22. $(document).on('click', '.input_option_icon_choose .add', function(){
  23. $.nmManual('/templates/default/icons.html');
  24. input_option_icon.change();
  25. });
  26. $(document).on('click', '#icons section a', function() {
  27. input_option_icon.val($(this).children().attr('class'));
  28. input_option_icon.change();
  29. $.nmTop().close();
  30. });
  31. $(document).on('click', '.input_option_icon_choose .remove', function(){
  32. input_option_icon.val('');
  33. input_option_icon.change();
  34. });
  35. $(document).on('change', input_option_icon, function () {
  36. input_option_icon_choose.html(check_input_option_icon_choose());
  37. $('.input_option_icon_preview').html(input_option_icon_html(input_option_icon.val()));
  38. });
  39. }
  40. });
  41.  
  42.  
Обратите внимание на пункт 6, строку 23 - $.nmManual('/templates/default/icons.html');, если используете не дефолтный шаблон - не забудьте поменять в пути default на название своего шаблона.

На этом всё. Благодарю за внимание.
Как сделать аякс-подгрузку контента для InstantCMS 1.10.6 | Портальный шаблон MTheme
Комментарии (26)
Loadырь 25 февраля 2016 в 06:22 0
Круто. Спасибо.
Спойлер
Надо бы его "универсализировать" для подключения других шрифтовых иконок и вообще картинок или svg. Тогда можно и пулреквест смело выкладывать на гите.
Джехутимери 25 февраля 2016 в 14:07 0
Спасибо, пост поправил.
Для универсализации достаточно заменить содержимое icons.html и подключить другой шрифт.
Возможно, добавлю ещё шрифтовых иконок и разобью разные коллекции табами. Надо будет тут подумать.
Glaz 25 февраля 2016 в 07:52 0
При нажатии на "Выбрать" получаю в модальном окне An error occured. Залил на чистый сайт, шаблон дефолтный.
mic 25 февраля 2016 в 09:21 0
в релиз ее надо добавить)
Val 25 февраля 2016 в 22:36 0
Уже не раз повторял, но Баба яга против! =)
Def 25 февраля 2016 в 10:20 +2
Вот еще хорошая реализация http://exticms.com/ext/mega-menu

можно не только иконки добавлять, но и выводить виджеты в меню и фиксировать при прокрутке
Kreator 25 февраля 2016 в 10:54 +1
Очень это все хорошо. Только:
1. Окультурить все это в хук (или компонент), чтоб не было такой портянки с правками. Станется только 2 маленьких вставки
2. Добавить возможность отключить текст (заголовко) меню, чтоб можно было только иконку оставить
И очень хорошо.
Джехутимери 25 февраля 2016 в 14:09 0
Если объясните "на пальцах", как это сложить в хук, буду очень благодарен.
Kreator 25 февраля 2016 в 15:35 +3
Ну я обычно чтобы не трогать файлы движка а бывает и даже шаблона, создаю компонент.
В него все что нужно прописываю, цепляю на нужных страницах css и js хуками.
Ну и нужное содержимое все в папку этого компонента.

В вашем случает js и css код упаковать в свои файлы и вызвать эти файлы при загрузке шаблона.

То же касается файла - всплывающей странички с иконками.
Вызвать таки эту страницу штатно шаблоном из этого же компонента.

В итоге получается отдельный компонент со своим содержимым и потом при обнове icms намного меньше искать что и где нужно не забыть обновить.
Джехутимери 25 февраля 2016 в 17:25 +2
Спасибо, понял.
Буду пробовать.
Val 25 февраля 2016 в 22:35 0
Идея использовать дополнительное свойство очень интересна! Но вставлять иконки через JS выглядит довольно сомнительной. Как то нелогично делать все это на стороне клиента ))
Джехутимери 25 февраля 2016 в 22:49 0
Ну это только из бекенда для удобства, на фронтенде через php.
Val 25 февраля 2016 в 23:10 0
Не совсем понял что вы имели ввиду.
Я писал о том, что, на сколько я понял, добавление "html-кода иконки" происходит не на стороне сервера, когда генерируется страница, а уже в браузере при просмотре этой самой страницы. Что определенно скажется на скорости загрузки и работы страницы в целом (да, может быть не критично, но тем не менее)
Получается не совсем логично: страница формируется на сервере (но не совсем полностью), потом отсылается пользователю и у него в браузере уже окончательно доформировывается.
Джехутимери 25 февраля 2016 в 23:26 0
Val, немного по-другому laugh
Выбор иконки - инпут, куда нужно передать класс иконки (например, fa fa-user). Если значение есть, то выводиться html иконки ($menu_item_icon = isset($item['options']['icon']) ? '<i class="menu-icon '.$item['options']['icon'].'"></i> ' : '';).
Весь js нужен только только как внешний интерфейс, по факту клика на иконку в инпут всего лишь загоняется значение.
Val 26 февраля 2016 в 00:00 0
Тогда прошу прощения за свою невнимательность zst Надо мне было более детально изучить ваше предложение.
Игорь Lu 26 февраля 2016 в 18:02 +1
Подключил, но в админке иконки в модальном окне не отображаются. Оказывается стили
Код PHP:
  1. <?php $this->addMainCSS("templates/{$this->name}/css/font-awesome.min.css"); ?>
надо подключать и в файле \templates\(ваш шаблон)\admin.tpl.php

Не знаю, может это только у меня так, но, вот как-то так laugh

Ну, а за доработку + однозначно, хотя, как уже писали выше, компонентом было бы конечно удобней.
Bubble Gumoff 27 февраля 2016 в 23:43 +1
Однозначно нужный для оформления функционал!
Нико 28 февраля 2016 в 16:38 0
В шаблоне не выводятся значки все сделал как в описании
Джехутимери 28 февраля 2016 в 17:03 0
Перезалил архив, пост поправил.
Замените icons.html на новый из архива.
Dmitriy505 13 марта 2016 в 09:38 0
Хорошая штука...А на первую ветку если такое сделать?
Игорь Lu 19 апреля 2016 в 00:03 0
Под версию InstantCMS 2.5.0 дополнение не работает как надо. В админке нет кнопки выбора иконки и нет модального окна с иконками, есть только поле, куда можно вставить код иконки вручную с Официального сайта Font Awesome.
Планируется ли исправить эти недочёты под последнюю версию Инстант?
За раннее благодарен!
Kantona 27 апреля 2016 в 20:08 0
Установил на версию 2.5.1 абсолютно все работает! Спасиб за разработку
MaKo 17 мая 2016 в 00:19 0
Если Вас не затруднит, можно глянуть как поправили файлы ? У меня тоже в админке нет кнопки выбора иконки.
Sergon 30 января 2017 в 22:40 0
2.6.1 Работает отлично! Благодарю!
не забывайте кеш очистить))
Sergon 31 января 2017 в 07:21 0
Джехутимери, а как можно дополнить к примеру своими иконками?
Sergon 19 апреля 2017 в 17:16 0
обновился до 2.7.2, полёт нормальный! Необходимо пробежаться по пунктам, перепроверить и очистить кеш.