ifhub/ifhub.club
1
0
Fork 0
mirror of https://github.com/Oreolek/ifhub.club.git synced 2024-07-01 05:55:02 +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;
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;

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

@ -48,6 +48,8 @@
'</div>' +
'</li>'
},
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' );

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

@ -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
*/

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

@ -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' )
);

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}-base">
{* Превью *}
@ -27,26 +26,13 @@
</ul>
</div>
{* Информация о файле *}
<div class="{$component_info}-group js-{$component_info}-group" data-type="1">
{* Действия *}
<ul class="{$component_info}-actions">
<li><a href="#" class="link-dotted js-{$component_info}-remove">{lang name='uploader.actions.remove'}</a></li>
</ul>
{* Информация о изображении *}
{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'} ]]}
{* Уникальные св-ва для каждого типа *}
<div class="{$component_info}-properties">
<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>
{* @hook Конец блока с информацией о файле *}
{hook run='uploader_info_end'}
</div>
{/block}