ifhub/ifhub.club
1
0
Fork 0
mirror of https://github.com/Oreolek/ifhub.club.git synced 2024-07-05 07:54:24 +03:00
Code Issues Releases Wiki Activity

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

Browse source
This commit is contained in:
Denis Shakhov 2014-09-10 13:57:14 +07:00
parent 1519c4f7b1
commit 506b62fa67
6 changed files with 134 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
application/frontend/skin/developer/components/uploader/css/uploader.css
View file

@ -176,11 +176,25 @@
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.uploader-info-properties { .uploader-info-list-item {
padding: 20px;
background: #fafafa; 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 { .uploader-info-base {
padding: 20px 20px 20px 135px; padding: 20px 20px 20px 135px;
position: relative; position: relative;

6
application/frontend/skin/developer/components/uploader/js/uploader-file-list.js
View file

@ -48,6 +48,8 @@
'</div>' + '</div>' +
'</li>' '</li>'
}, },
file_options: {}
}, },
/** /**
@ -94,7 +96,7 @@
onLoad: function( respone ) { onLoad: function( respone ) {
this.element.removeClass( ls.options.classes.states.loading ).html( $.trim( respone.html ) ); this.element.removeClass( ls.options.classes.states.loading ).html( $.trim( respone.html ) );
this.option( 'uploader' ).lsUploader( 'checkEmpty' ); 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 ) { addFile: function( data ) {
data.context = $( this.option( 'html.file' ) ) data.context = $( this.option( 'html.file' ) )
.lsUploaderFile({ uploader: this.option( 'uploader' ) }) .lsUploaderFile( $.extend( {}, this.option( 'file_options' ), { uploader: this.option( 'uploader' ) } ) )
.lsUploaderFile( 'uploading' ); .lsUploaderFile( 'uploading' );
this.option( 'uploader' ).lsUploader( 'markAsNotEmpty' ); this.option( 'uploader' ).lsUploader( 'markAsNotEmpty' );

72
application/frontend/skin/developer/components/uploader/js/uploader-info.js
View file

@ -21,6 +21,8 @@
// Ссылки // Ссылки
urls: { urls: {
// Обновление св-ва
update_property: aRouter['ajax'] + 'media/save-data-file/'
}, },
// Селекторы // Селекторы
@ -31,7 +33,7 @@
property: '.js-uploader-info-property', property: '.js-uploader-info-property',
// Кнопка удаления // Кнопка удаления
remove: '.js-uploader-info-remove', remove: '.js-uploader-info-remove',
} },
}, },
/** /**
@ -41,6 +43,8 @@
* @private * @private
*/ */
_create: function () { _create: function () {
var _this = this;
this.elements = { this.elements = {
groups: this.element.find( this.option( 'selectors.group' ) ), groups: this.element.find( this.option( 'selectors.group' ) ),
info: this.element.find( this.option( 'selectors.info' ) ), info: this.element.find( this.option( 'selectors.info' ) ),
@ -56,13 +60,20 @@
this.file = $(); 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' ); this.file.lsUploaderFile( 'remove' );
}.bind( this )); }.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 ) { setFile: function( file ) {
var data = file.lsUploaderFile( 'getInfo' ), var data = file.lsUploaderFile( 'getInfo' ),
@ -83,10 +94,17 @@
this._getPropertiesByGroup( group ).each( function ( index, property ) { this._getPropertiesByGroup( group ).each( function ( index, property ) {
var property = $( property ); var property = $( property );
this._setProperty( property, data[ property.data( 'name' ) ] ); this._setProperty( property, this.getFile().lsUploaderFile( 'getProperty', property.data( 'name' ) ) );
}.bind( this )); }.bind( this ));
}, },
/**
* Получает текущий файл
*/
getFile: function() {
return this.file;
},
/** /**
* Помечает блок как пустой * Помечает блок как пустой
*/ */
@ -102,14 +120,11 @@
}, },
/** /**
* @private * Устанавливает значение св-ва
*/ *
_activateGroup: function( group ) { * @param {jQuery} element Св-во
this.elements.groups.hide(); * @param {String} value Значение
group.show(); *
},
/**
* @private * @private
*/ */
_setProperty: function( element, value ) { _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 * @private
*/ */

15
application/frontend/skin/developer/components/uploader/js/uploader.js
View file

@ -63,6 +63,10 @@
// Подгрузка файлов сразу после иниц-ии // Подгрузка файлов сразу после иниц-ии
autoload: true, autoload: true,
info_options: {},
list_options: {},
file_options: {}
}, },
/** /**
@ -91,9 +95,10 @@
} }
// Иниц-ия саб-компонентов // Иниц-ия саб-компонентов
this.elements.info.lsUploaderInfo({ uploader: this.element }); this.elements.info.lsUploaderInfo( $.extend( {}, this.option( 'info_options' ), { uploader: this.element } ) );
this.elements.list.lsUploaderFileList({ uploader: this.element }); this.elements.list.lsUploaderFileList( $.extend( {}, this.option( 'list_options' ), { uploader: this.element, file_options: this.option( 'file_options' ) } ) );
this.initUploader();
this.initFileUploader();
// Подгрузка списка файлов // Подгрузка списка файлов
this.option( 'autoload' ) && this.elements.list.lsUploaderFileList( 'load' ); this.option( 'autoload' ) && this.elements.list.lsUploaderFileList( 'load' );
@ -102,7 +107,7 @@
/** /**
* Иниц-ия загрузчика * Иниц-ия загрузчика
*/ */
initUploader: function() { initFileUploader: function() {
// Настройки загрузчика // Настройки загрузчика
$.extend( this.option( 'fileupload' ), { $.extend( this.option( 'fileupload' ), {
url: this.option( 'urls.upload' ), url: this.option( 'urls.upload' ),
@ -156,7 +161,7 @@
file.lsUploaderFile( 'destroy' ); file.lsUploaderFile( 'destroy' );
file.replaceWith( file.replaceWith(
$( $.trim( response.sTemplateFile ) ) $( $.trim( response.sTemplateFile ) )
.lsUploaderFile({ uploader: this.element }) .lsUploaderFile( $.extend( {}, this.option( 'file_options' ), { uploader: this.element } ) )
.lsUploaderFile( 'uploaded' ) .lsUploaderFile( 'uploaded' )
.lsUploaderFile( 'activate' ) .lsUploaderFile( 'activate' )
); );

36
application/frontend/skin/developer/components/uploader/uploader-block.info-group.tpl Normal file
View file

@ -0,0 +1,36 @@
{**
* Уникальные настройки определенного типа файла
*}
{$component_info = 'uploader-info'}
<div class="{$component_info}-group js-{$component_info}-group" data-type="{$smarty.local.type}">
{* Действия *}
<ul class="{$component_info}-actions">
<li><a href="#" class="link-dotted js-{$component_info}-remove">{lang name='uploader.actions.remove'}</a></li>
</ul>
{* Уникальные св-ва для каждого типа *}
<div class="{$component_info}-properties">
{* Св-ва *}
<ul class="{$component_info}-list">
{foreach $smarty.local.properties as $property}
<li class="{$component_info}-list-item">
<span class="{$component_info}-list-item-label">{$property['label']}:</span>
<span class="js-{$component_info}-property" data-name="{$property['name']}"></span>
</li>
{/foreach}
</ul>
{* Текстовые св-ва *}
<div class="{$component_info}-fields">
{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}
</div>
</div>
</div>

28
application/frontend/skin/developer/components/uploader/uploader-block.info.tpl
View file

@ -13,7 +13,6 @@
{* Информация о файле *} {* Информация о файле *}
<div class="{$component_info}-block"> <div class="{$component_info}-block">
{* Основная информация о файле *} {* Основная информация о файле *}
<div class="{$component_info}-base"> <div class="{$component_info}-base">
{* Превью *} {* Превью *}
@ -27,26 +26,13 @@
</ul> </ul>
</div> </div>
{* Информация о файле *} {* Информация о изображении *}
<div class="{$component_info}-group js-{$component_info}-group" data-type="1"> {include './uploader-block.info-group.tpl'
{* Действия *} type = '1'
<ul class="{$component_info}-actions"> properties = [[ 'name' => 'dimensions', 'label' => {lang name='uploader.info.types.image.dimensions'} ]]
<li><a href="#" class="link-dotted js-{$component_info}-remove">{lang name='uploader.actions.remove'}</a></li> propertiesFields = [[ 'name' => 'title', 'label' => {lang name='uploader.info.types.image.title'} ]]}
</ul>
{* Уникальные св-ва для каждого типа *} {* @hook Конец блока с информацией о файле *}
<div class="{$component_info}-properties"> {hook run='uploader_info_end'}
<div class="{$component_info}-type-info">
Разрешение: <span class="js-{$component_info}-property" data-name="dimensions"></span>
</div>
{* Описание *}
{include 'components/field/field.text.tpl'
sName = 'title'
sInputClasses = 'js-{$component_info}-property'
sInputAttributes = 'data-name="title"'
sLabel = $aLang.uploadimg_title}
</div>
</div>
</div> </div>
{/block} {/block}