[ms2Gallery] Переработанная версия 1.2.0-rc

Наверное многие здесь знают наш компонент для управления галереей ресурса ms2Gallery.

Первоначально эта галерея появилась в miniShop2 и была очень тепло встречена пользователя. Сразу же пошли просьбы сделать возможность использовать эту галерею без MS2, с любыми ресурсами.

Спустя некоторое время Александр Рахимов сделал отдельный компонент, в котором был гораздо более удобный загрузчик Plupload, а сама панель с галереей регистрировалась через специальный тип ТВ.

Загрузчик переехал в версию MS2, а оттуда в ms2Gallery пришла возможность работы с разными типами файлов, а не только с картинками. В общем, плодотворное сотрудничество платной и бесплатной версии.

Ну а теперь, по разным причинам, ms2Gallery вернулась обратно ко мне на поддержку, и я предлагаю вам новую, существенно переработанную версию.

• 
• 
• 
• 

Подробности под катом

Регистрация панели

В новой версии панель с галерей регистрируется на странице при помощи плагина ms2Gallery.
Одноименный ТВ параметр больше не используется. Если вы обновляете компонент, то установщик пройдёт по всем значениям этого ТВ и сохранит id источника файлов каждого ресурса в поле properties.

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

• 
• 

Также при регистрации галереи учитывается, работает ли в системе AjaxManager. Если да, то дополнительный таб регистрируется с небольшой задержкой.
Если нет — то таб рисуется сразу при создании страницы и его позиция зпоминается.

То есть, если AjaxManager нет, то таб с галерей становится родным для табов ресурса, потому что регистрируется так:

Ext.ComponentMgr.onAvailable("modx-resource-tabs", function() {
	this.on("beforerender", function() {
		this.add({
			xtype: "ms2gallery-page",
			title: _("ms2gallery"),
			...,
		});
	});
});

А если включен AjaxManager, то приходится регистрировать так

Ext.onReady(function() {
	window.setTimeout(function() {
		var tabs = Ext.getCmp("modx-resource-tabs");
		if (tabs) {
			tabs.add({
				xtype: "ms2gallery-page",
				title: _("ms2gallery"),
				...,
			})
		}
	}, 10);
});

Иначе на странице получается несколько галерей, и все глючит.

Если кто-то придумает способ регистрации через Ext.ComponentMgr.onAvailable вместе с AjaxManager — он очень умный.

Заодно добавлена проверка на товары miniShop2. Теперь ms2Gallery не включается для товаров, ибо у них есть собственная встроенная галерея, и не нужно путать пользователей.

Улучшения интерфейса

Как видно по скриншотам, галерея значительно преобразилась.

Я решил, что занимать половину рабочей области картинкой активной превьюшки слишком жирно, и нужно убрать её во всплывающее окно. Это позволяет нам гораздо более гибко управлять большими галереями.
Окошко вызывается двойным кликом, или из контекстного меню.

Кстати говоря, из-за косяков PhpThumb в MODX 2.2, картинку в окошке пришлось обрезать (&zc=1), а в MODX 2.3 она показывается целиком. В любом случае, при клике на неё, откроется отдельное окно с изображением в полный рост.

По умолчанию теперь выводится 50 превьюшек на одной странице, а чтобы это не тормозило на слабых хостингах, был оптимизирован процессор getlist — он стал работать через PDO, без modX::getCollection().

Понятное дело, галерея работает и в MODX 2.2, и в MODX 2.3.

Заменил старые иконки-картинки от Bootstrap 2 на Font Awesome, который встроен в админку MODX 2.3 по умолчанию. Для MODX 2.2 шрифт загружается отдельно, плагином.

• 
• 

Если убрать дерево ресурсов слева, то галерея нормально растянется на весь экран:

• 
• 

Вообще, почти все ExtJS компоненты галереи были переписаны заново, так что там много мелких улучшений, не видных на первый взгляд, но влияющих на ваш комфорт.

Заключение

Еще были исправлены пара багов: неправильная сортировка при удалении первой превьюшки, и неправильная работа с источником файлов, отличным от стандартного.

Для всех тех, кто уже купил компонент ms2Gallery обновление бесплатное, как обычно. Для остальных цена осталось неизменной — всего 990 рублей.

В следующих обновлениях я планирую заменить сниппет ms2GalleryFirstImages на нормальный pdoTools сниппет для выборки всех изображений с превьюшками и фильтрацией по ресурсам.

Если у вас есть еще идеи и предложения — пишите, не стесняйтесь.

Ссылка на магазин.

[[!pdoResources?
    &loadModels=`ms2gallery`
    &parents=`0`
	&resource=`[[*id]]`
	&limit=``
    &depth=`1`
    
    &leftJoin=`{
                "300x200": {"class":"msResourceFile","alias":"300x200", "on": "300x200.resource_id = modResource.id AND 300x200.path LIKE '%/300x200/'"}
                ,"120x90": {"class":"msResourceFile","alias":"120x90", "on": "120x90.resource_id = modResource.id AND 120x90.path LIKE '%/120x90/'"}
                }`
                            
    &select=`{
                            	"modResource":"*"
                            	,"300x200":"300x200.url as 300x200"
                            	,"120x90":"120x90.url as 120x90"
                            }`
    
	&tplWrapper=`@INLINE 
                                        <div class="row">
                                            <div class="gallery-full view-full">
                                                <div class="">
                                                    <div class=" postContainer postContent masonry-container">
                                                        <div class="grid-sizer"></div>
                                                         [[+output]]
                                                    </div>
                                                </div>
                                            </div>
                                        </div>`
    &tpl=`@INLINE
                                    <div class="img-list masonry-item img-list-s">
                                        <a data-lightbox="k-gallery" rel="photostream" data-image="[[+url]]" alt="[[+name]]" title="[[+description]]" class="item work-archive-thumb-link fancybox" href="[[+url]]">
                                            <img width="" height="" class="work-masonry-thumb noshadow" src="[[+300x200]]" alt="[[+name]]" title="[[+description]]">
                                        </a>
                                    </div>`
    &tpl_n4`@INLINE
                                    <div class="img-list masonry-item img-list-s">
                                        <a data-lightbox="k-gallery" rel="photostream" data-image="[[+url]]" alt="" title="" class="item work-archive-thumb-link fancybox" href="[[+url]]">
                                            <img width="" height="" class="work-masonry-thumb noshadow" src="[[+120x90]]" alt="" title="">
                                        </a>
                                    </div>`
                                    
    
    &showLog=`1`
]]

[[AjaxSnippet? 
	        &snippet=`getTickets` &loadModels=`ms2gallery` &includeContent=`0` &limit=`16` &sortby=`id` &sortdir=`DESC` &parents=`3` &depth=`3` &tpl=`gallery.MiniItem` &wrapper=`ajaxWrapper` &as_mode=`onload`
	        &where=`{"parent:3","active":1}`
	        &leftJoin=`{
		        "210x130":{"class":"ms2_resource_files","alias":"210x130", "on":"210x130.parent=ms2_resource_files.id AND 210x130.path LIKE '%/210x130/'"}
        	}`
        	&select=`{
	        	"ms2_resource_files":"*"
	        	,"210x130":"210x130.url as 210x130"
        	}`
        	&showLog=`1`
	    ]]