From 506b62fa67aa61637009cb7dc8d2b574a3154fe3 Mon Sep 17 00:00:00 2001 From: Denis Shakhov Date: Wed, 10 Sep 2014 13:57:14 +0700 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?= =?UTF-8?q?=D0=BA=D0=B0=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=B0=20Uploader?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/uploader/css/uploader.css | 20 +++++- .../uploader/js/uploader-file-list.js | 6 +- .../components/uploader/js/uploader-info.js | 72 +++++++++++++++---- .../components/uploader/js/uploader.js | 15 ++-- .../uploader/uploader-block.info-group.tpl | 36 ++++++++++ .../uploader/uploader-block.info.tpl | 28 ++------ 6 files changed, 134 insertions(+), 43 deletions(-) create mode 100644 application/frontend/skin/developer/components/uploader/uploader-block.info-group.tpl diff --git a/application/frontend/skin/developer/components/uploader/css/uploader.css b/application/frontend/skin/developer/components/uploader/css/uploader.css index 7d6ad807..59d61631 100644 --- a/application/frontend/skin/developer/components/uploader/css/uploader.css +++ b/application/frontend/skin/developer/components/uploader/css/uploader.css @@ -176,11 +176,25 @@ padding: 10px 20px; border-bottom: 1px solid #eee; } -.uploader-info-properties { - padding: 20px; +.uploader-info-list-item { background: #fafafa; + padding: 10px 20px; + line-height: 1em; + border-bottom: 1px solid #fff; +} +.uploader-info-list-item-label { + color: #aaa; +} +.uploader-info-list-item:nth-child(even) { + background: #F5F5F5; +} +.uploader-info-list-item:last-child { + border: none; +} +.uploader-info-fields { + border-top: 1px solid #eee; + padding: 20px 20px; } - .uploader-info-base { padding: 20px 20px 20px 135px; position: relative; diff --git a/application/frontend/skin/developer/components/uploader/js/uploader-file-list.js b/application/frontend/skin/developer/components/uploader/js/uploader-file-list.js index c0765961..0a8216b0 100644 --- a/application/frontend/skin/developer/components/uploader/js/uploader-file-list.js +++ b/application/frontend/skin/developer/components/uploader/js/uploader-file-list.js @@ -48,6 +48,8 @@ '' + '' }, + + file_options: {} }, /** @@ -94,7 +96,7 @@ onLoad: function( respone ) { this.element.removeClass( ls.options.classes.states.loading ).html( $.trim( respone.html ) ); this.option( 'uploader' ).lsUploader( 'checkEmpty' ); - this.getFiles().lsUploaderFile({ uploader: this.option( 'uploader' ) }); + this.getFiles().lsUploaderFile( $.extend( {}, this.option( 'file_options' ), { uploader: this.option( 'uploader' ) } ) ) }, /** @@ -102,7 +104,7 @@ */ addFile: function( data ) { data.context = $( this.option( 'html.file' ) ) - .lsUploaderFile({ uploader: this.option( 'uploader' ) }) + .lsUploaderFile( $.extend( {}, this.option( 'file_options' ), { uploader: this.option( 'uploader' ) } ) ) .lsUploaderFile( 'uploading' ); this.option( 'uploader' ).lsUploader( 'markAsNotEmpty' ); diff --git a/application/frontend/skin/developer/components/uploader/js/uploader-info.js b/application/frontend/skin/developer/components/uploader/js/uploader-info.js index 94babaae..c6fff618 100644 --- a/application/frontend/skin/developer/components/uploader/js/uploader-info.js +++ b/application/frontend/skin/developer/components/uploader/js/uploader-info.js @@ -21,6 +21,8 @@ // Ссылки urls: { + // Обновление св-ва + update_property: aRouter['ajax'] + 'media/save-data-file/' }, // Селекторы @@ -31,7 +33,7 @@ property: '.js-uploader-info-property', // Кнопка удаления remove: '.js-uploader-info-remove', - } + }, }, /** @@ -41,6 +43,8 @@ * @private */ _create: function () { + var _this = this; + this.elements = { groups: this.element.find( this.option( 'selectors.group' ) ), info: this.element.find( this.option( 'selectors.info' ) ), @@ -56,13 +60,20 @@ this.file = $(); // Удаление файла - this.element.on( 'click', this.option( 'selectors.remove' ), function () { + this.element.on( 'click' + this.eventNamespace, this.option( 'selectors.remove' ), function () { this.file.lsUploaderFile( 'remove' ); }.bind( this )); + + // Удаление файла + this.element.on( 'blur' + this.eventNamespace, '.js-uploader-info-property[type=text]', function () { + var input = $( this ); + + _this._updateProperty( input.attr( 'name' ), input.val() ); + }); }, /** - * Устанвливает файл + * Устанавливает файл */ setFile: function( file ) { var data = file.lsUploaderFile( 'getInfo' ), @@ -83,10 +94,17 @@ this._getPropertiesByGroup( group ).each( function ( index, property ) { var property = $( property ); - this._setProperty( property, data[ property.data( 'name' ) ] ); + this._setProperty( property, this.getFile().lsUploaderFile( 'getProperty', property.data( 'name' ) ) ); }.bind( this )); }, + /** + * Получает текущий файл + */ + getFile: function() { + return this.file; + }, + /** * Помечает блок как пустой */ @@ -102,14 +120,11 @@ }, /** - * @private - */ - _activateGroup: function( group ) { - this.elements.groups.hide(); - group.show(); - }, - - /** + * Устанавливает значение св-ва + * + * @param {jQuery} element Св-во + * @param {String} value Значение + * * @private */ _setProperty: function( element, value ) { @@ -126,6 +141,39 @@ } }, + /** + * Обновляет текстовое св-во + * + * @param {String} name Название св-ва + * @param {String} value Значение св-ва + * + * @private + */ + _updateProperty: function( name, value ) { + // Кэшируем файл, т.к. он может измениться к концу ajax запроса + var file = this.getFile(); + + ls.ajax.load( this.option( 'urls.update_property' ), { + name: name, + value: value, + id: file.lsUploaderFile( 'getProperty', 'id' ) + }, function( response ) { + if ( response.bStateError ) { + ls.msg.error( response.sMsgTitle, response.sMsg ); + } else { + file.lsUploaderFile( 'setProperty', name, value ); + } + }.bind( this )); + }, + + /** + * @private + */ + _activateGroup: function( group ) { + this.elements.groups.hide(); + group.show(); + }, + /** * @private */ diff --git a/application/frontend/skin/developer/components/uploader/js/uploader.js b/application/frontend/skin/developer/components/uploader/js/uploader.js index d582aedc..382843d0 100644 --- a/application/frontend/skin/developer/components/uploader/js/uploader.js +++ b/application/frontend/skin/developer/components/uploader/js/uploader.js @@ -63,6 +63,10 @@ // Подгрузка файлов сразу после иниц-ии autoload: true, + + info_options: {}, + list_options: {}, + file_options: {} }, /** @@ -91,9 +95,10 @@ } // Иниц-ия саб-компонентов - this.elements.info.lsUploaderInfo({ uploader: this.element }); - this.elements.list.lsUploaderFileList({ uploader: this.element }); - this.initUploader(); + this.elements.info.lsUploaderInfo( $.extend( {}, this.option( 'info_options' ), { uploader: this.element } ) ); + this.elements.list.lsUploaderFileList( $.extend( {}, this.option( 'list_options' ), { uploader: this.element, file_options: this.option( 'file_options' ) } ) ); + + this.initFileUploader(); // Подгрузка списка файлов this.option( 'autoload' ) && this.elements.list.lsUploaderFileList( 'load' ); @@ -102,7 +107,7 @@ /** * Иниц-ия загрузчика */ - initUploader: function() { + initFileUploader: function() { // Настройки загрузчика $.extend( this.option( 'fileupload' ), { url: this.option( 'urls.upload' ), @@ -156,7 +161,7 @@ file.lsUploaderFile( 'destroy' ); file.replaceWith( $( $.trim( response.sTemplateFile ) ) - .lsUploaderFile({ uploader: this.element }) + .lsUploaderFile( $.extend( {}, this.option( 'file_options' ), { uploader: this.element } ) ) .lsUploaderFile( 'uploaded' ) .lsUploaderFile( 'activate' ) ); diff --git a/application/frontend/skin/developer/components/uploader/uploader-block.info-group.tpl b/application/frontend/skin/developer/components/uploader/uploader-block.info-group.tpl new file mode 100644 index 00000000..5651ba58 --- /dev/null +++ b/application/frontend/skin/developer/components/uploader/uploader-block.info-group.tpl @@ -0,0 +1,36 @@ +{** + * Уникальные настройки определенного типа файла + *} + +{$component_info = 'uploader-info'} + +
+ {* Действия *} + + + {* Уникальные св-ва для каждого типа *} +
+ {* Св-ва *} +
    + {foreach $smarty.local.properties as $property} +
  • + {$property['label']}: + +
    • + {/foreach} +
+ + {* Текстовые св-ва *} +
+ {foreach $smarty.local.propertiesFields as $property} + {include 'components/field/field.text.tpl' + sName = $property['name'] + sInputClasses = "js-{$component_info}-property" + sInputAttributes = "data-name=\"{$property['name']}\"" + sLabel = $property['label']} + {/foreach} +
+
+
\ No newline at end of file diff --git a/application/frontend/skin/developer/components/uploader/uploader-block.info.tpl b/application/frontend/skin/developer/components/uploader/uploader-block.info.tpl index ec7d354c..0a140233 100644 --- a/application/frontend/skin/developer/components/uploader/uploader-block.info.tpl +++ b/application/frontend/skin/developer/components/uploader/uploader-block.info.tpl @@ -13,7 +13,6 @@ {* Информация о файле *}
- {* Основная информация о файле *}
{* Превью *} @@ -27,26 +26,13 @@
- {* Информация о файле *} -
- {* Действия *} - + {* Информация о изображении *} + {include './uploader-block.info-group.tpl' + type = '1' + properties = [[ 'name' => 'dimensions', 'label' => {lang name='uploader.info.types.image.dimensions'} ]] + propertiesFields = [[ 'name' => 'title', 'label' => {lang name='uploader.info.types.image.title'} ]]} - {* Уникальные св-ва для каждого типа *} -
-
- Разрешение: -
- - {* Описание *} - {include 'components/field/field.text.tpl' - sName = 'title' - sInputClasses = 'js-{$component_info}-property' - sInputAttributes = 'data-name="title"' - sLabel = $aLang.uploadimg_title} -
-
+ {* @hook Конец блока с информацией о файле *} + {hook run='uploader_info_end'}
{/block} \ No newline at end of file