Табы для страницы настроек темы

DemoLLC

Актуально для разработчиков тем для разбиения настроек по вкладкам вида:


Принцип работы:
Скрипт добавляется в текстовый элемент, который будет всегда в теме. Поэтому при добавлении в другие теги, стоит учитывать что locale могут быть разные.
Настройки до первого заголовка остаются в первой вкладке, все остальные перемещаются во вкладку с именем заголовка блока.

Proof-of-concept доступен на github Улучшения можете отправлять туда же.
По этому же принципу можно делать и более сложные параметры интерфейса, например сохранение настроек в localstorage перед сбросом и их восстановление.

9 марта 2018
  • Genasyst 9 марта 2018 23:30

    Спасибо тебе незнакомец!

  • Евгений Леман 10 марта 2018 00:04

    Минусы:

    • В боевых условиях табов будет больше. И при горизонтальном их расположении будет перенос, что не есть красиво и правильно. Это и на скрине видно.
    • В тех же боевых условиях заголовки используются гораздо чаще. То есть в пределах одного таба заголовков может быть несколько. По крайней мере так должно быть по-хорошему, чтобы визуально сгруппировать несколько взаимосвязанных характеристик.

    У вас по сути всего 1 уровень вложенности. Практика показала, что этого не хватает. Например, захотите вы вывести в шапке телефон с текстом под ним. Дизайн требует разного форматирования и придется делать 2 поля - "номер телефона" и "описание к телефону"(бесплатно по РФ, отдел продаж, для оптовых покупателей, время работы...). Поместите вы это в таб "Шапка сайта", но там же много настроек. Визуально нужно разделить, а заголовок для этого использовать уже не получится :)

    По этому же принципу можно делать и более сложные параметры интерфейса, например сохранение настроек в localstorage перед сбросом и их восстановление.

    Вот если бы вы это выложили в общий доступ, то цены бы вам не было. Но это лучше делать в виде плагина, чтобы была возможность сохранения картинок после сброса. У меня вот до этого руки не дошли.

  • Евгений Леман 10 марта 2018 00:11

    https://pastebin.com/FgLb8bTn - реализация с вертикальными табами, которые хорошо смотрятся при любом их количестве. Разбитие на табы идет путем формирования "врапперов" для каждой секции. Для разных языков придется эту разметку дублировать. Для разработчика такой способ сложнее, но дает больше возможностей и удобства для конечного пользователя.

  • DemoLLC 10 марта 2018 00:28

    С вертикальным хорошо смотрится. Можно еще немного усложнить для создания подменю, но это видимо придётся уже писать отдельные плагин для генерации таких файлов.

    Сохранять настройки вроде не так сложно $('#theme-settings').serializeArray() все данные, добавить картинки в base64 и всё post-ом на сохранение. Не уверен что для этого нужен отдельный плагин.

  • Евгений Леман 10 марта 2018 00:38
    картинки в base64

    Попробую, как будет лишнее время.

  • info@ravencode.ru 10 марта 2018 05:24

    А в темах публикуемых в магазине можно использовать подобные js вставки?

  • info@ravencode.ru 10 марта 2018 05:35

    Если wa не против подобных фишек, то можно и подсветку синтаксиса к текстовым полям прикрутить.

    Кстати, раз уж пошла речь о темах дизайна, написал вот такой сборщик настроек\переводов, он конечно не идеален, но для моих задач вполне хватает. Запускаю его через приложение Разработка.

    // Прописываем свои данные
    $app = 'site';
    $theme = 'raven';
    
    $wa = wa($app, true);
    
    $settings = $locales = array();
    $theme = new waTheme($theme, $app);
    foreach(waFiles::listdir($theme->path) as $file) {
        if (pathinfo($file, PATHINFO_EXTENSION) == 'html') {
            $file = file_get_contents($theme->path.'/'.$file);
            preg_match_all('~\$theme_settings\.(\w+)~', $file, $matches);
            if ($matches[1]) {
                $settings = array_merge($settings, $matches[1]);
            }
            
            preg_match_all('~\[`([^`]+)`\]~', $file, $matches);
            if ($matches[1]) {
                $locales = array_merge($locales, $matches[1]);
            }
            preg_match_all('~_w\(["\']([^)]["\'])\)~', $file, $matches);
            if ($matches[1]) {
                $locales = array_merge($locales, $matches[1]);
            }
        }
    }
    $settings = array_unique($settings);
    foreach ($settings as &$val) {
        $str = str_replace('_', ' ', $val);
        $val = 
        '<setting var="' . $val . '" control_type="text">' . PHP_EOL .
        '    <value></value>' . PHP_EOL .
        '    <name locale="en_US">' . $str . '</name>' . PHP_EOL .
        '    <name locale="ru_RU">' . _w($str) . '</name>' . PHP_EOL .
        '</setting>';
    }
    file_put_contents($theme->path . '/settings.xml', implode(PHP_EOL, $settings));
    
    $locales = array_unique($locales);
    foreach ($locales as &$val) {
        $w = _w($val);
        if ($val == _w($val) && $val == _ws($val)) {
            $val = 
            '<locale>' . PHP_EOL .
            '    <msgid>' . str_replace('_', ' ', $val) . '</msgid>' . PHP_EOL .
            '    <msgstr locale="ru_RU"></msgstr>' . PHP_EOL .
            '</locale>';
        }
    }
    file_put_contents($theme->path . '/locales.xml', implode(PHP_EOL, $locales));
  • DemoLLC 10 марта 2018 11:35

    Тема выше Incart опубликована, поэтому пробем нет. Подсветку не знаю даже куда стоит, если только для textarea, но многие разработчики для больших текстов используют блоки Сайта, а она там итак есть.

    По локализации строк в Mylang мне пришлось переопределить waTheme и сохраняю значения текстовых полей сразу во всех установленных локалях. Строки перевода тем пока не трогаю - из ближайших задач, автовосстановление переводов после обновления приложений.



Чтобы добавить комментарий, зарегистрируйтесь или войдите