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



Демо
Инструкция.
1) Распакуйте этот архив в корень сайта. Если у Вас стоит не дефолтный шаблон, перед заливкой переименуйте папку default в архиве на название своего шаблона.
2) Откройте файл \icons\system\controllers\admin\forms\form_menu_item.php, найдите строку 64, замените
на
3) Откройте файл \system\languages\ru\language.php, в каком-то месте (например, на 48 строке), добавьте
4) В head в \templates\(ваш шаблон)\main.tpl.php подключите стиль шрифта
5) Откройте \templates\(ваш шаблон)\assets\ui\menu.tpl.php, на ~24 строке добавьте
в этом же файле добавьте на ~44 строке (перед <span class="wrap">)
6) Откройте \templates\(ваш шаблон)\js\core.js, в самом конце добавьте
Обратите внимание на пункт 6, строку 23 — $.nmManual('/templates/default/icons.html');, если используете не дефолтный шаблон — не забудьте поменять в пути default на название своего шаблона.
На этом всё. Благодарю за внимание.
В теме было высказано много вариантов реализации, попробовал сделать для сообщества ещё один.



Демо
Инструкция.
1) Распакуйте этот архив в корень сайта. Если у Вас стоит не дефолтный шаблон, перед заливкой переименуйте папку default в архиве на название своего шаблона.
2) Откройте файл \icons\system\controllers\admin\forms\form_menu_item.php, найдите строку 64, замените
'type' => 'fieldset', 'title' => LANG_OPTIONS, 'title' => LANG_CSS_CLASS, )) ) ),
'type' => 'fieldset', 'title' => LANG_OPTIONS, 'title' => LANG_CSS_CLASS, )), 'title' => LANG_CSS_ICON, )) ) ),
<?php $this->addMainCSS("templates/{$this->name}/css/font-awesome.min.css"); ?>
$menu_item_icon = isset($item['options']['icon']) ? '<i class="menu-icon '.$item['options']['icon'].'"></i> ' : '';
<?php echo $menu_item_icon; ?>
$(window).on('load', function () { if ($('input#options_icon').length) { var input_option_icon = $('input#options_icon'), input_option_icon_choose_html, input_option_icon_preview, input_option_icon_html = function (icon) { return '<i class="' + icon + '"></i>'; }, check_input_option_icon_choose = function() { if (input_option_icon.val() != '') { 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>'; } else { return input_option_icon_choose_html = '<a href="javascript:void(0)" class="add">Выбрать</a>'; } }; input_option_icon.hide(); $('<div class="input_option_icon_choose">' + input_option_icon_choose_html + '</div>').insertAfter(input_option_icon); var input_option_icon_choose = $('.input_option_icon_choose'); input_option_icon_choose.html(check_input_option_icon_choose()); $('.input_option_icon_preview').html(input_option_icon_html(input_option_icon.val())); $(document).on('click', '.input_option_icon_choose .add', function(){ $.nmManual('/templates/default/icons.html'); input_option_icon.change(); }); $(document).on('click', '#icons section a', function() { input_option_icon.val($(this).children().attr('class')); input_option_icon.change(); $.nmTop().close(); }); $(document).on('click', '.input_option_icon_choose .remove', function(){ input_option_icon.val(''); input_option_icon.change(); }); $(document).on('change', input_option_icon, function () { input_option_icon_choose.html(check_input_option_icon_choose()); $('.input_option_icon_preview').html(input_option_icon_html(input_option_icon.val())); }); } });
На этом всё. Благодарю за внимание.
Для универсализации достаточно заменить содержимое icons.html и подключить другой шрифт.
Возможно, добавлю ещё шрифтовых иконок и разобью разные коллекции табами. Надо будет тут подумать.
можно не только иконки добавлять, но и выводить виджеты в меню и фиксировать при прокрутке
1. Окультурить все это в хук (или компонент), чтоб не было такой портянки с правками. Станется только 2 маленьких вставки
2. Добавить возможность отключить текст (заголовко) меню, чтоб можно было только иконку оставить
И очень хорошо.
В него все что нужно прописываю, цепляю на нужных страницах css и js хуками.
Ну и нужное содержимое все в папку этого компонента.
В вашем случает js и css код упаковать в свои файлы и вызвать эти файлы при загрузке шаблона.
То же касается файла - всплывающей странички с иконками.
Вызвать таки эту страницу штатно шаблоном из этого же компонента.
В итоге получается отдельный компонент со своим содержимым и потом при обнове icms намного меньше искать что и где нужно не забыть обновить.
Буду пробовать.
Я писал о том, что, на сколько я понял, добавление "html-кода иконки" происходит не на стороне сервера, когда генерируется страница, а уже в браузере при просмотре этой самой страницы. Что определенно скажется на скорости загрузки и работы страницы в целом (да, может быть не критично, но тем не менее)
Получается не совсем логично: страница формируется на сервере (но не совсем полностью), потом отсылается пользователю и у него в браузере уже окончательно доформировывается.
Выбор иконки - инпут, куда нужно передать класс иконки (например, fa fa-user). Если значение есть, то выводиться html иконки ($menu_item_icon = isset($item['options']['icon']) ? '<i class="menu-icon '.$item['options']['icon'].'"></i> ' : '';).
Весь js нужен только только как внешний интерфейс, по факту клика на иконку в инпут всего лишь загоняется значение.
Не знаю, может это только у меня так, но, вот как-то так
Ну, а за доработку + однозначно, хотя, как уже писали выше, компонентом было бы конечно удобней.
Замените icons.html на новый из архива.
Планируется ли исправить эти недочёты под последнюю версию Инстант?
За раннее благодарен!
не забывайте кеш очистить))