Выбор стандартных иконок из темы в своём виджете

InstantCMS 2.X

#1 4 января 2025 в 12:31

Всех с наступившим НГ!.

Подскажите пожалуйста как сделать выбор стандартной иконки в своём виджете?

Делаю так, но путь не получаю.

                    new fieldString('icon_top_btn', array(
                        'title' => 'Иконка',
                        'prefix' => '<a href="#" class="icms-icon-select" data-href="'.href_to('admin', 'settings', ['theme', cmsConfig::get('template'), 'icon_list']).'"><span>'.(defined('LANG_CP_ICON_SELECT') ? LANG_CP_ICON_SELECT : '').'</span></a>',
 
                    )),

Выводит выбор иконки, но путь у неё /admin/widgets#

#2 4 января 2025 в 13:50

Посмотрите как реализовано в этом шаблоне instantcms.ru/addons/lte.html уже не помню, но долго заморачивался.

В виджете Статистика

Telegram канал https://t.me/my_instantcms

#3 4 января 2025 в 17:08

Посмотрите как реализовано в этом шаблоне instantcms.ru/addons/lte.html уже не помню, но долго заморачивался.
В виджете Статистика
My-InstantCMS.Ru

У Вас не много не то. Вы сделали отдельным вывод шаблона и как я понял только к одному элементу.

А я хочу сделать, например: Поле телефон и к нему иконка, другое поле почта и к нему иконка.

#4 4 января 2025 в 21:25

Посмотрите как реализовано в этом шаблоне instantcms.ru/addons/lte.html уже не помню, но долго заморачивался.
В виджете Статистика
My-InstantCMS.Ru
У Вас не много не то. Вы сделали отдельным вывод шаблона и как я понял только к одному элементу.
А я хочу сделать, например: Поле телефон и к нему иконка, другое поле почта и к нему иконка.
litemir

Проще через CSS

🤝

#5 4 января 2025 в 21:28

Делаю так, но путь не получаю.
litemir

Так и не получите — вы пытаетесь в одном модальном окне Bootstrap вызвать второе окно с иконками. Bootstrap увы так не умеет. А вот если выбор иконки делать просто вставкой в строковое поле, то сработает: {solid:map}

#6 18 декабря 2025 в 18:17

Кому интересно, нашёл решение как получить системные иконки в своём виджете.

Может кому то пригодится.

В форме после public function init() {

Добавляем

        $tpl = cmsTemplate::getInstance();
        $url = '/admin/settings/theme/' . cmsConfig::get('http_template') . '/icon_list';
 
        $tpl->addBottom(<<<HTML
        <script>
        (function(\$){
 
          var SPINNER =
            '<div style="display:flex; align-items:center; justify-content:center; height:220px;">' +
              '<div class="spinner-border" role="status" aria-hidden="true"></div>' +
            '</div>';
 
          function ov(){
            var \$ov = \$("#icmsIconOverlay");
            if (\$ov.length) return \$ov;
 
            \$ov = \$(
              '<div id="icmsIconOverlay" style="display:none; position:fixed; inset:0; z-index:99999;">' +
                '<div class="b" style="position:absolute; inset:0; background:rgba(0,0,0,.45)"></div>' +
                '<div class="w" style="position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1100px,94vw); height:min(720px,92vh); background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35)">' +
                  '<div style="display:flex; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #eee;">' +
                    '<div style="font-weight:600">Выбор иконки</div>' +
                    '<button type="button" class="x btn btn-sm btn-light">&times;</button>' +
                  '</div>' +
                  '<div class="c" style="height:calc(100% - 49px); overflow:auto; padding:12px;"></div>' +
                '</div>' +
              '</div>'
            );
 
            \$("body").append(\$ov);
            \$ov.on("click", ".b,.x", function(){ \$ov.hide().find(".c").empty(); });
 
            return \$ov;
          }
 
          function iconName(el){
            var \$el = \$(el);
            var d = \$el.data();
            if (d.icon)  return String(d.icon);
            if (d.name)  return String(d.name);
            if (d.value) return String(d.value);
 
            var oc = \$el.attr("onclick") || "";
            var m = oc.match(/["']([a-z]+:[a-z0-9\\-]+)["']/i);
            return m ? m[1] : "";
          }
 
          \$(document).on("click", "a.icms-icon-select", function(e){
            e.preventDefault();
 
            window.__icms_icon_target = \$(this)
              .closest(".field, .form-group, .icms-field, td, .row, .icms-form-field, form")
              .find("input[type=text], input[type=search]").first();
 
            var url = \$(this).data("href") || \$(this).attr("href");
            var \$ov = ov();
 
            \$ov.show().find(".c").html(SPINNER);
 
            \$.get(url, function(html){
              \$ov.find(".c").html(html).find("[onclick]").removeAttr("onclick");
            });
          });
 
          \$(document).on("click", "#icmsIconOverlay .c a, #icmsIconOverlay .c button, #icmsIconOverlay .c [role=button], #icmsIconOverlay .c i, #icmsIconOverlay .c svg", function(e){
            var icon = iconName(this);
            if (!icon) return;
 
            e.preventDefault();
            e.stopPropagation();
 
            window.__icms_icon_target.val(icon).trigger("change");
            \$("#icmsIconOverlay").hide().find(".c").empty();
          });
 
        })(window.jQuery);
        </script>
        HTML);

И само поле

new fieldString('icon', [
       'title'  => LANG_CP_MENU_ITEM_ICON,
       'suffix' => '<a href="' . $url . '" class="icms-icon-select" data-href="' . $url . '"><span>' . LANG_CP_ICON_SELECT . '</span></a>',
]),

Если кто знает решение иное, прошу сказать как.

Кастомные поля для виджетов

Стили для ТК

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

Выбор стандартных иконок из темы в своём виджете

Похожие темы

Смена стандартных иконок Инстант

[ЕСТЬ РЕШЕНИЕ] как получить id открытого профиля в своём хуке ?

[ЕСТЬ РЕШЕНИЕ] не сохраняется группа пользователя в своем коде

Привязать шаблон html к стандартному шаблону

Помогите написать условие для вывода иконок в виджете

[ЕСТЬ РЕШЕНИЕ] Виджет-фильтр контента - который может больше, чем стандартный - реально ли?

[ЕСТЬ РЕШЕНИЕ] Вывод формы с конструктора

[ЕСТЬ РЕШЕНИЕ] Нет иконок.

Похожее в блогах

Небольшая подборка бесплатных иконок для вашего проекта

Большой набор цветных иконок для использования на сайтах InstantCms

Закладки3

Дерево категорий InstantShop: у каждой категории - своя иконка

InstantCMS Team

О проекте

Поддержка

Дополнения