SimpleGallery: расширение функционала, часть 2

В этой статье речь пойдет о том, как изменить интерфейс SimpleGallery под конкретную задачу. При этом файлы плагина останутся без изменений — а значит, работа не пропадет после обновления SimpleGallery. Дальше много текста и говнокода.

Задача была такая: cайт для производителя мебели, состоящий, по сути, из галерей с фотками мебели, которые были реализованы с помощью SimpleGallery. Когда сайт уже был готов, заказчик внезапно пожелал, чтобы с фотографией выводились:

• цена;
• размеры;
• материал.

Кроме этого, для некоторых фотографий нужно показывать значок «Наша работа». Ну и пусть поле «Описание» редактируется с помощью TinyMCE (: А чтобы было красиво, основные поля и дополнительные поля будут редактироваться в отдельных вкладках.

Для решения задачи нужно изменить форму редактирования картинки, добавив туда дополнительные поля, а также внести изменения в контроллер и класс, отвечающий за работу с базой данных (модель).

Так как выборки и сортировки по новым полям не нужны, было решено не создавать дополнительные поля в таблице, а воспользоваться полем sg_properties, в котором хранятся параметры картинки в формате json. А для флажка «Наша работа» пригодится существующее поле sg_add.

Расширение классов

Так как было решено не добавлять дополнительные поля в таблицу, то достаточно внести изменения в контроллер. А именно изменить метод edit. Для этого создадим файл custom.class.php в папке assets/plugins/simplegallery/lib/:

<?php
namespace SimpleGallery;

require_once(MODX_BASE_PATH . 'assets/plugins/simplegallery/lib/controller.class.php');

//расширяем класс sgController
class customController extends sgController
{
    public function edit()
    {
        $out = array();
        $id = isset($_REQUEST['sg_id']) ? (int)$_REQUEST['sg_id'] : 0;
        if ($id) {
            $fields = array(
                'sg_title' => $_REQUEST['sg_title'],
                'sg_description' => $_REQUEST['sg_description'],
                'sg_add' => $_REQUEST['sg_add']
            );
            $fields['sg_isactive'] = isset($_REQUEST['sg_isactive']) ? 1 : 0;
            $row = $this->data->edit($id);
            $_data = $row->toArray();
            //получили значения дополнительных полей
            $addProperties = array(
                'price' => $_REQUEST['price'],
                'msize' => $_REQUEST['msize'],
                'material' => $_REQUEST['material']
            );
            //добавили их в поле sg_properties
            $_data['sg_properties'] = array_merge($_data['sg_properties'], $addProperties);
            //отправили все поля на сохранение
            $_data = array_merge($_data, $fields);
            $out['success'] = $row->fromArray($_data)->save();
        } else {
            $out['success'] = false;
        }
        return $out;
    }
}

Теперь в настройки плагина SimpleGallery вписываем имя нашего класса (SimpleGallery\customController) и создаем еще один плагин на событие OnManagerPageInit, который этот класс загрузит:

$e = $modx->event;
if ($e->name == "OnManagerPageInit") {
    if (isset($invokedBy) && $invokedBy=="SimpleGallery") include_once(MODX_BASE_PATH.'assets/plugins/simplegallery/lib/custom.class.php');
}

На этом с серверной частью все.

Изменение интерфейса

Здесь возникает две подзадачи. Во-первых, нужно изменить форму редактирования, во-вторых, внести изменения в обработку этой формы.

Если посмотреть папку assets/plugins/simplegallery/js/tpl/, то можно обнаружить там файлы с расширением *.handlebars. Это шаблоны для js-шаблонизатора Handlebars, в которые вынесены формы SimpleGallery + шаблон для превьюшки.

Синтаксис Handlebars достаточно простой и работа с такими шаблонами не сильно отличается от работы с чанками. Однако простое изменение файла editForm.handlebars ничего не даст — шаблоны нужно компилировать. Этот аспект я рассматривать не буду, скажу лишь, что потребуется установить где-нибудь nodejs и прочитать небольшую инструкцию в файле readme.txt, который можно найти в папке с шаблонами.

Создадим файл editFormMebel.handlebars:

    
    

        

            

                

                    
                
                

                    

                        

                            
ID
                            
{ {data.sg_id}}
                        
                        

                            
{ {sgLang.file}}
                            
{ {data.sg_image}}
                        
                        

                            
{ {sgLang.size}}
                            
{ {data.sg_properties.width}}x{ {data.sg_properties.height}}, { {bytesToSize data.sg_properties.size}}
                        
                        

                            
{ {sgLang.createdon}}
                            
{ {data.sg_createdon}}
                        
                    
                
            
            

                

                    

                        { {sgLang.title}}
                        
                        { {sgLang.description}}
                        {{data.sg_description}}
                        Редактировать
                        { {sgLang.show}}
                        { {sgLang.yes}}
                    
                
            
            

                

                    

                        
                        { {sgLang.save}}
                    
                
                

                    

                        
                        { {sgLang.cancel}}
                    
                
            
        
    
    
    

        

            Наша работа
            { {sgLang.yes}}
            Цена
            
            Размеры
            
            Материалы
            
        
        

            

                

                    
                    { {sgLang.save}}
                
            
            

                

                    
                    { {sgLang.cancel}}
                
            
        
    

Разметка, конечно, не очень, но не важно. Компилируем:

handlebars editFormMebel.handlebars -f editFormMebel.js -m

Эта команда скомпилирует шаблон в файл editFormMebel.js и минифицирует его.

Теперь создадим еще одну форму, для редактирования описания с помощью TinyMCE. Эта форма будет показываться в окошке, если кликнуть по ссылке «Редактировать». Файл rteForm.handlebars:

    

        {{textarea}}
    
    

        

            

                
                {{sgLang.save}}
            
        
        

            

                
                {{sgLang.cancel}}
            
        
    

Компилируем:

handlebars rteForm.handlebars -f rteForm.js -m

Файлы editFormMebel.js и rteForm.js копируем в assets/plugins/simplegallery/js/tpl/

Теперь добавим методы для вызова окошка с формой редактирования описания, для инициализации TinyMCE, а также изменим метод sgHelper.edit(). Создаем в папке assets/plugins/simplegallery/js/plugin/ файл editForm.js:

(function ($) {
    sgHelper.rteForm = function (textarea) {
        //готовим данные для передачи в шаблон
        var context = {
            textarea: textarea.val(),
            modxTheme: sgConfig._modxTheme,
            modxSiteUrl: sgConfig._modxSiteUrl,
            sgLang: _sgLang
        };
        //получаем заполненный шаблон
        var rteForm = $(Handlebars.templates.rteForm(context));
        //создаем окошко
        rteForm.window({
            modal: true,
            title: "Редактирование",
            collapsible: false,
            minimizable: false,
            maximizable: false,
            resizable: false,
            onOpen: function () {
                //когда окошко создано, нужно назначить обработчики для кнопок в форме
                $('#rteCancel').click(function (e) {
                    rteForm.window('close', true);
                });
                $('#rteSave').click(function (e) {
                    //берем то, что наредактировали и сохраняем обратно в поле "Описание"
                    var content = tinyMCE.activeEditor.getContent();
                    textarea.val(content);
                    rteForm.window('close', true);
                });
                //цепляем редактор к полю в форме
                sgHelper.initRTE();
            },
            onClose: function () {
                //если окошко закрывается, то удаляем его вообще
                //после закрытия окна с редактором нужно восстановить оверлей
                var mask = $('.window-mask');
                sgHelper.destroyWindow(rteForm);
                $('body').append(mask);
            }
        })
    };
    sgHelper.edit = function (image) {
        var data = image.data('properties');
        var context = {
            data: data,
            modxTheme: sgConfig._modxTheme,
            modxSiteUrl: sgConfig._modxSiteUrl,
            sgLang: _sgLang
        };
        //получаем форму редактирования
        var editForm = $(Handlebars.templates.editFormMebel(context));
        editForm.window({
            modal: true,
            title: sgHelper.escape(this.stripText(data.sg_title, 80)),
            doSize: true,
            collapsible: false,
            minimizable: false,
            maximizable: false,
            resizable: false,
            onOpen: function () {
                //создаем вкладки
                $('#editTabs').tabs({
                    border: false,
                    onSelect: function (title, index) {
                        if (index) {
                            var tab = $('#editTabs').tabs('getTab', index);
                            $(tab).show();
                            editForm.window('resize');
                        }
                    }
                });
                //обработчики кнопок
                //показываем окошко с редактором
                $('.btn-rte').click(function (e) {
                    sgHelper.rteForm($('textarea', '#sgEdit'));
                });
                $('.sgEditCancel').click(function (e) {
                    editForm.window('close', true);
                });
                $('.sgEditSave').click(function (e) {
                    $.post(
                        sgConfig._xtAjaxUrl + '?mode=edit',
                        $('#sgForm,#sgAdd').serialize(),
                        function (data) {
                            data = sgHelper.getData(data);
                            if (data.success) {
                                editForm.window('close', true);
                                sgHelper.update();
                            } else {
                                $.messager.alert(_sgLang['error'], _sgLang['save_fail']);
                            }
                        })
                })
            },
            onClose: function () {
                sgHelper.destroyWindow(editForm);
            }
        });
    }
})(jQuery);

Инициализацию TinyMCE я вынес в отдельный файл, assets/plugins/simplegallery/js/plugin/tinymce.js:

(function ($) {
    sgHelper.initRTE = function () {
        tinyMCE.init({
            theme: 'advanced',
            skin: 'cirkuit',
            skin_variant: '',
            mode: 'exact',
            elements: 'rteField',
            width: '100%',
            height: '500',
            language: 'ru',
            element_format: 'xhtml',
            schema: 'html4',
            paste_text_use_dialog: true,
            document_base_url: sgConfig._modxSiteUrl,
            relative_urls: true,
            remove_script_host: true,
            convert_urls: true,
            force_br_newlines: false,
            force_p_newlines: true,
            forced_root_block: 'p',
            //valid_elements: mce_valid_elements,
            popup_css_add: '/assets/plugins/tinymce/style/popup_add.css',
            theme_advanced_source_editor_height: 400,
            accessibility_warnings: false,
            theme_advanced_toolbar_location: 'top',
            theme_advanced_statusbar_location: 'bottom',
            theme_advanced_toolbar_align: 'ltr',
            theme_advanced_font_sizes: '80%,90%,100%,120%,140%,160%,180%,220%,260%,320%,400%,500%,700%',
            content_css: '/assets/plugins/tinymce/style/content.css',
            formats: {
                alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'justifyleft'},
                alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'justifyright'},
                alignfull: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'justifyfull'}
            },
            apply_source_formatting: true,
            remove_linebreaks: false,
            convert_fonts_to_spans: true,
            plugins: 'visualblocks,autolink,inlinepopups,autosave,save,advlist,style,fullscreen,advimage,paste,advlink,media,contextmenu,table,youtubeIframe',
            theme_advanced_buttons1: 'undo,redo,|,bold,forecolor,backcolor,strikethrough,formatselect,fontsizeselect,pastetext,pasteword,code,|,fullscreen,help',
            theme_advanced_buttons2: 'image,media,youtubeIframe,link,unlink,anchor,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,blockquote,outdent,indent,|,table,hr,|,visualblocks,styleprops,removeformat',
            theme_advanced_buttons3: '',
            theme_advanced_buttons4: '',
            theme_advanced_resize_horizontal: false,
            external_link_list_url: '/assets/plugins/tinymce/js/tinymce.linklist.php',
            template_external_list_url: '/assets/plugins/tinymce/js/get_template.php',
            template_popup_width: 550,
            template_popup_height: 350,
            theme_advanced_blockformats: 'p,h1,h2,h3,h4,h5,h6,div,blockquote,code,pre',
            theme_advanced_styles: 'left=justifyleft;right=justifyright',
            theme_advanced_disable: '',
            theme_advanced_resizing: true,
            fullscreen_settings: {
                theme_advanced_buttons1_add_before: 'save'
            },
            plugin_insertdate_dateFormat: '%d-%m-%Y',
            plugin_insertdate_timeFormat: '%H:%M:%S',
            entity_encoding: 'named',
            file_browser_callback: 'mceOpenServerBrowser',
            paste_text_sticky: true,
            setup: function (ed) {
                ed.onPostProcess.add(function (ed, o) {
                    // State get is set when contents is extracted from editor
                    if (o.get) {
                        o.content = o.content.replace('<p>{' + '{', '{' + '{');
                        o.content = o.content.replace('}}</p>', '}}');
                        o.content = o.content.replace(/<p>\[([[!\~\^])/g, '[$1');
                        o.content = o.content.replace(/([\]\!\~\^])\]<\/p>/g, '$1]');
                    }
                });
            },
            onchange_callback: false,
            valid_elements: "*[*]"
        })
    }
})(jQuery);

Здесь я просто взял код инициализации TinyMCE из редактирования документа. Да, нужно учитывать, чтобы это все работало, на странице должен быть включен TinyMCE.

Теперь создаем в папке assets/plugins/simplegallery/js/ файл custom.json:

{
    "scripts": {
        "editFormMebelTemplate": {
            "version": "1.0.0",
            "src": "assets/plugins/simplegallery/js/tpl/editFormMebel.js"
        },
        "editForm": {
            "version": "1.0.0",
            "src": "assets/plugins/simplegallery/js/plugin/editForm.js"
        },
        "sgTinyMCE": {
            "version": "0.0.0",
            "src": "assets/plugins/simplegallery/js/plugin/tinymce.js"
        },
        "rteForm": {
            "version": "1.4.1",
            "src": "assets/plugins/simplegallery/js/tpl/rteForm.js"
        }
    }
}

Если есть файл custom.json, то SimpleGallery загружает из него скрипты дополнительно к скриптам, описанным в файле scripts.json. Аналогично загружаются и css-файлы.

На этом работа закончена. Итак, измененная форма:

Вкладка с дополнительными полями:

Редактор:

Редактор описания мне понадобился сегодня для другого сайта, поэтому я решил положить его в коробку (: Так что если кому-то вдруг нужно, но разбираться лень, то достаточно переименовать файл _custom.json.