Доработка компонента Media

* В процессе, многое не работает

application/config/config.php

@@ -552,6 +552,7 @@ $config['head']['default']['js'] = array(
 	"___path.skin.web___/components/uploader/js/uploader-file-list.js",
 	"___path.skin.web___/components/uploader/js/uploader-file.js",
 	"___path.skin.web___/components/uploader/js/uploader-info.js",
+	"___path.skin.web___/components/media/js/media.js",
 	"___path.application.web___/frontend/common/js/tags.js",
 	"___path.application.web___/frontend/common/js/content.js",
 	"___path.application.web___/frontend/common/js/user_list_add.js",

application/frontend/skin/developer/assets/js/init.js

@@ -345,7 +345,9 @@ jQuery(document).ready(function($){
 	/**
 	 * Медиа файлы
 	 */
-	ls.media.init();
+	$( '.js-media' ).lsMedia();
+
+
 	/**
 	 * Стена
 	 */

application/frontend/skin/developer/components/media/js/media.js

@@ -0,0 +1,141 @@
+/**
+ * Media
+ *
+ * @module ls/media
+ *
+ * @license   GNU General Public License, version 2
+ * @copyright 2013 OOO "ЛС-СОФТ" {@link http://livestreetcms.com}
+ * @author    Denis Shakhov <denis.shakhov@gmail.com>
+ */
+
+(function($) {
+	"use strict";
+
+	$.widget( "livestreet.lsMedia", {
+		/**
+		 * Дефолтные опции
+		 */
+		options: {
+			editor: null,
+
+			// Ссылки
+			urls: {
+				insert: aRouter.ajax + 'media/submit-insert/',
+				photoset: aRouter.ajax + 'media/submit-create-photoset'
+			},
+
+			// Селекторы
+			selectors: {
+				uploader: '.js-media-uploader',
+				block: '.js-media-info-block',
+				insert: {
+					submit: '.js-media-insert-submit'
+				},
+				photoset: {
+					submit: '.js-media-photoset-submit'
+				}
+			},
+
+			// Классы
+			classes : {
+			},
+
+			uploader_options: {}
+		},
+
+		/**
+		 * Конструктор
+		 *
+		 * @constructor
+		 * @private
+		 */
+		_create: function () {
+			var _this = this;
+
+			// FIXME: Временная заглушка
+			this.option( 'editor', $( '.js-editor' ).eq( 0 ) );
+
+			this.elements = {
+				uploader: this.element.find( this.option( 'selectors.uploader' ) ),
+				blocks: this.element.find( this.option( 'selectors.block' ) ),
+				insert: {
+					submit: this.element.find( this.option( 'selectors.insert.submit' ) )
+				},
+				photoset: {
+					submit: this.element.find( this.option( 'selectors.photoset.submit' ) )
+				}
+			};
+
+			this.activateInfoBlock( 'insert' );
+
+			// Иниц-ия загрузчика
+			this.elements.uploader.lsUploader( $.extend( {}, this.option( 'uploader_options' ), {
+				autoload: true,
+				params: {
+					security_ls_key: LIVESTREET_SECURITY_KEY
+				},
+				file_options: {
+					beforeactivate: function ( event, context ) {
+						//_this.updateInsertSettings( context.element );
+					}
+				}
+			}));
+
+			// Перемещение галереи из одного таба в другой
+			$( '.js-tab-show-gallery' ).on( 'tabactivate', function( event, tab ) {
+				this.elements.uploader.appendTo( _this.element.find( '#' + tab.options.target + ' .js-media-pane-content' ) );
+				this.elements.uploader.lsUploader( 'getElement', 'list' ).lsUploaderFileList( 'clearSelected' );
+				this.activateInfoBlock( $( event.target ).data( 'mediaMode' ) );
+			}.bind(this));
+
+			//
+			// INSERT
+			//
+
+			this.elements.insert.submit.on( 'click' + this.eventNamespace, function () {
+				var files = this.elements.uploader.lsUploader( 'getElement', 'list' ).lsUploaderFileList( 'getSelectedFiles' );
+
+				this.insertFiles( this.option( 'urls.insert' ), {}, files );
+			}.bind( this ));
+
+			//
+			// PHOTOSET
+			//
+
+			this.elements.photoset.submit.on( 'click' + this.eventNamespace, function () {
+				var files = this.elements.uploader.lsUploader( 'getElement', 'list' ).lsUploaderFileList( 'getSelectedFiles' );
+
+				this.insertFiles( this.option( 'urls.photoset' ), {}, files );
+			}.bind( this ));
+		},
+
+		/**
+		 * Вставляет выделенные файлы в редактор
+		 */
+		insertFiles: function( url, params, files ) {
+			if ( ! files.length ) return;
+
+			// Формируем список ID элементов
+			var ids = $.map( files, function ( file ) {
+				return $( file ).lsUploaderFile( 'getProperty', 'id' );
+			});
+
+			ls.ajax.load( url, $.extend( true, {}, { ids: ids }, params || {} ), function( response ) {
+				if ( response.bStateError ) {
+					ls.msg.error( response.sMsgTitle, response.sMsg );
+				} else {
+					this.option( 'editor' ).lsEditor( 'insert', response.sTextResult );
+					// this.elements.modal.modal( 'hide' );
+				}
+			}.bind( this ));
+		},
+
+		/**
+		 * Устанавливает текущий режим вставки медиа файлов
+		 */
+		activateInfoBlock: function( name ) {
+			this.elements.blocks.hide();
+			this.elements.blocks.filter( '[data-type=' + name + ']' ).show();
+		}
+	});
+})(jQuery);

application/frontend/skin/developer/components/media/media.tpl

@@ -8,7 +8,7 @@
 
 {$aTargetParams = $LS->Media_GetTargetTypeParams( $sMediaTargetType )}
 
-<div class="media clearfix">
+<div class="media clearfix {$smarty.local.classes}">
 	{* Боковое меню *}
 	{include 'components/nav/nav.tabs.tpl' sName='media' sClasses='media-nav' aItems=[
 		[ 'name' => 'insert',   'pane' => 'tab-media-insert',   'text' => {lang name='media.nav.insert'},   'classes' => 'js-tab-show-gallery active', 'attributes' => 'data-media-mode="insert"' ],

application/frontend/skin/developer/components/media/panes/pane.insert.tpl

@@ -7,7 +7,7 @@
 {block 'media_pane_content'}
 	{include './../uploader/uploader.tpl'
 		attributes   = 'id="media-uploader"'
-		classes      = 'js-media-gallery'
+		classes      = 'js-media-uploader'
 		targetParams = $aTargetParams
 		targetType   = $sMediaTargetType
 		targetId     = $sMediaTargetId
@@ -17,6 +17,6 @@
 {block 'media_pane_footer' prepend}
 	{include 'components/button/button.tpl'
 		sMods    = 'primary'
-		sClasses = 'js-media-insert-button js-media-insert'
+		sClasses = 'js-media-insert-submit'
 		sText    = {lang name='media.insert.submit'}}
 {/block}

application/frontend/skin/developer/components/media/panes/pane.photoset.tpl

@@ -7,6 +7,6 @@
 {block 'media_pane_footer' prepend}
 	{include 'components/button/button.tpl'
 		sMods    = 'primary'
-		sClasses = 'js-media-insert-button js-media-insert-photoset'
+		sClasses = 'js-media-photoset-submit'
 		sText    = {lang name='media.photoset.submit'}}
 {/block}

application/frontend/skin/developer/components/media/panes/pane.tpl

@@ -3,7 +3,7 @@
 {/block}
 
 <div id="{$id}" data-type="tab-pane" class="tab-pane media-pane" {if $smarty.local.isActive}style="display: block;"{/if}>
-	<div class="media-pane-content">
+	<div class="media-pane-content js-media-pane-content">
 		{block 'media_pane_content'}{/block}
 	</div>
 

application/frontend/skin/developer/modals/modal.upload_image.tpl

@@ -12,7 +12,7 @@
 {block 'modal_attributes'}data-modal-center="false"{/block}
 
 {block 'modal_content_after'}
-	{include 'components/media/media.tpl'}
+	{include 'components/media/media.tpl' classes='js-media'}
 {/block}
 
 {block 'modal_footer'}{/block}