mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-07-01 05:55:02 +03:00
Доработка компонента Uploader
This commit is contained in:
Denis Shakhov
parent
5d72cfa9d7
commit
e544ada821
|
|
@ -2,45 +2,8 @@
|
|||
|
||||
{block 'uploader_aside' append}
|
||||
{* Основные настройки *}
|
||||
<div class="uploader-info-block js-media-info-block" data-type="insert" style="display: none;">
|
||||
<h3>Опции вставки</h3>
|
||||
|
||||
{* Выравнивание *}
|
||||
{include 'components/field/field.select.tpl'
|
||||
sName = 'align'
|
||||
sLabel = $aLang.uploadimg_align
|
||||
aItems = $aSelectImageAlign}
|
||||
|
||||
{* Размер *}
|
||||
{$selectImageSizes = [ [ 'value' => 'original', 'text' => 'Оригинал' ] ]}
|
||||
|
||||
{foreach Config::Get('module.media.image.sizes') as $aSize}
|
||||
{$selectImageSizes[] = [
|
||||
'value' => "{$aSize.w}x{$aSize.h}{if $aSize.crop}crop{/if}",
|
||||
'text' => "{$aSize.w} × {if $aSize.h}{$aSize.h}{else}*{/if}"
|
||||
]}
|
||||
{/foreach}
|
||||
|
||||
{include 'components/field/field.select.tpl'
|
||||
sName = 'size'
|
||||
sLabel = 'Размер'
|
||||
sSelectedValue = $_aRequest.blog_category
|
||||
aItems = $selectImageSizes}
|
||||
</div>
|
||||
{include './uploader-block.insert.tpl'}
|
||||
|
||||
{* Опции фотосета *}
|
||||
<div class="uploader-info-block js-media-info-block" data-type="photoset" style="display: none;">
|
||||
<h3>Опции фотосета</h3>
|
||||
|
||||
{* Показывать ленту с превьюшками *}
|
||||
{include 'components/field/field.checkbox.tpl'
|
||||
sName = 'use_thumbs'
|
||||
bChecked = true
|
||||
sLabel = 'Показывать ленту с превьюшками'}
|
||||
|
||||
{* Показывать описания фотографий *}
|
||||
{include 'components/field/field.checkbox.tpl'
|
||||
sName = 'show_caption'
|
||||
sLabel = 'Показывать описания фотографий'}
|
||||
</div>
|
||||
{include './uploader-block.photoset.tpl'}
|
||||
{/block}
|
||||
|
|
@ -7,15 +7,32 @@
|
|||
}
|
||||
.uploader-file-list {
|
||||
overflow: auto;
|
||||
width: 68%;
|
||||
margin-right: 2%;
|
||||
margin-right: 320px;
|
||||
min-height: 30px;
|
||||
max-height: 354px;
|
||||
float: left;
|
||||
}
|
||||
.uploader-aside {
|
||||
width: 30%;
|
||||
float: left;
|
||||
width: 300px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* TODO: Responsive */
|
||||
@media (max-width: 999px) {
|
||||
.uploader-file-list {
|
||||
margin: 15px 0 0;
|
||||
}
|
||||
.uploader-aside {
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Empty alert */
|
||||
.uploader .alert--empty {
|
||||
text-align: center;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -61,7 +78,10 @@
|
|||
|
||||
/* Selected */
|
||||
.uploader-file.is-selected {
|
||||
border-color: #D5CE3D;
|
||||
border-color: #B9C4FF;
|
||||
}
|
||||
.uploader-file.is-selected .uploader-file-image {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* Active */
|
||||
|
|
@ -97,29 +117,42 @@
|
|||
|
||||
|
||||
/**
|
||||
* Info
|
||||
* Block
|
||||
*/
|
||||
.uploader-info-block {
|
||||
.block.uploader-block {
|
||||
border: 1px solid #eee;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.block.uploader-block:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Empty alert */
|
||||
.uploader-info .alert--empty {
|
||||
text-align: center;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
/**
|
||||
* Info
|
||||
*/
|
||||
.block.uploader-block.uploader-info .block-content {
|
||||
padding: 0;
|
||||
}
|
||||
.uploader-info-actions {
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.uploader-info-properties {
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.uploader-info-base {
|
||||
padding-left: 115px;
|
||||
padding: 20px 20px 20px 135px;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.uploader-info-base-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
|
@ -29,14 +29,14 @@
|
|||
|
||||
// Селекторы
|
||||
selectors: {
|
||||
file: '.js-media-upload-gallery-item'
|
||||
file: '.js-uploader-file'
|
||||
},
|
||||
|
||||
// HTML
|
||||
// TODO: Move to template
|
||||
html: {
|
||||
file:
|
||||
'<li class="uploader-file js-media-upload-gallery-item">' +
|
||||
'<li class="uploader-file js-uploader-file">' +
|
||||
'<div class="progress">' +
|
||||
'<div class="progress-value js-uploader-file-progress-value"></div>' +
|
||||
'<span class="progress-info js-uploader-file-progress-label">0%</span>' +
|
||||
|
|
@ -90,7 +90,9 @@
|
|||
* Добавляет файл в список
|
||||
*/
|
||||
addFile: function( data ) {
|
||||
data.context = $( this.option( 'html.file' ) ).lsUploaderFile({ uploader: this.option( 'uploader' ) });
|
||||
data.context = $( this.option( 'html.file' ) )
|
||||
.lsUploaderFile({ uploader: this.option( 'uploader' ) })
|
||||
.lsUploaderFile( 'uploading' );
|
||||
|
||||
this.option( 'uploader' ).lsUploader( 'markAsNotEmpty' );
|
||||
this.element.prepend( data.context );
|
||||
|
|
@ -108,7 +110,7 @@
|
|||
*/
|
||||
getSelectedFiles: function() {
|
||||
return this.getFiles().filter(function () {
|
||||
return $( this ).lsUploaderFile( 'isSelected' );
|
||||
return $( this ).lsUploaderFile( 'getState', 'selected' );
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -16,10 +16,12 @@
|
|||
* Дефолтные опции
|
||||
*/
|
||||
options: {
|
||||
// Основной блок загрузчика
|
||||
uploader: $(),
|
||||
|
||||
// Ссылки
|
||||
urls: {
|
||||
// Удаление
|
||||
remove: aRouter['ajax'] + 'media/remove-file/'
|
||||
},
|
||||
|
||||
|
|
@ -33,7 +35,13 @@
|
|||
|
||||
// Классы
|
||||
classes : {
|
||||
// Файл активен
|
||||
active: 'active',
|
||||
// Произошла ошибка при загрузке
|
||||
error: 'is-error',
|
||||
// Файл загружается
|
||||
uploading: 'is-uploading',
|
||||
// Файл выделен
|
||||
selected: 'is-selected'
|
||||
}
|
||||
},
|
||||
|
|
@ -45,23 +53,25 @@
|
|||
* @private
|
||||
*/
|
||||
_create: function () {
|
||||
this.elements = {};
|
||||
|
||||
// Информация о файле
|
||||
this.info = this.getInfo();
|
||||
// Файл активен
|
||||
this.active = false;
|
||||
// Файл выделен
|
||||
this.selected = false;
|
||||
|
||||
// Состояния файла
|
||||
this.states = {
|
||||
active: false,
|
||||
selected: false,
|
||||
uploading: false,
|
||||
error: false
|
||||
};
|
||||
|
||||
this._on({ click: this.toggle.bind( this ) });
|
||||
},
|
||||
|
||||
/**
|
||||
* Method
|
||||
* Изменение состояния файла активен/не активен
|
||||
*/
|
||||
toggle: function() {
|
||||
this[ this.isActive() ? 'unselect' : 'activate' ]();
|
||||
this[ this.getState( 'active' ) ? 'unselect' : 'activate' ]();
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -111,6 +121,7 @@
|
|||
onRemove: function( response ) {
|
||||
this.destroy();
|
||||
this.element.remove();
|
||||
this.element = null;
|
||||
|
||||
if ( ! this._getComponent( 'list' ).lsUploaderFileList( 'getFiles' ).length ) {
|
||||
this.option( 'uploader' ).lsUploader( 'markAsEmpty' );
|
||||
|
|
@ -119,10 +130,11 @@
|
|||
|
||||
/**
|
||||
* Помечает файл как активный
|
||||
*
|
||||
* TODO: Activate ERROR file
|
||||
*/
|
||||
activate: function() {
|
||||
// Не активируем незагруженный файл
|
||||
if ( this.getState( 'error' ) || this.getState( 'uploading' ) ) return;
|
||||
|
||||
if ( ! this._getComponent( 'list' ).lsUploaderFileList( 'option', 'multiselect' ) ) {
|
||||
this._getComponent( 'list' ).lsUploaderFileList( 'clearSelected' );
|
||||
}
|
||||
|
|
@ -131,9 +143,10 @@
|
|||
|
||||
this._getComponent( 'list' ).lsUploaderFileList( 'getActiveFile' ).lsUploaderFile( 'deactivate' );
|
||||
|
||||
this.active = true;
|
||||
this.setState( 'active', true );
|
||||
this.element.addClass( this.option( 'classes.active' ) );
|
||||
|
||||
this.option( 'uploader' ).lsUploader( 'showBlocks' );
|
||||
this._getComponent( 'info' ).lsUploaderInfo( 'setFile', this.element );
|
||||
},
|
||||
|
||||
|
|
@ -141,9 +154,10 @@
|
|||
* Помечает файл как неактивный
|
||||
*/
|
||||
deactivate: function() {
|
||||
this.active = false;
|
||||
this.setState( 'active', false );
|
||||
this.element.removeClass( this.option( 'classes.active' ) );
|
||||
|
||||
this.option( 'uploader' ).lsUploader( 'hideBlocks' );
|
||||
this._getComponent( 'info' ).lsUploaderInfo( 'empty' );
|
||||
},
|
||||
|
||||
|
|
@ -151,7 +165,7 @@
|
|||
* Выделяет файл
|
||||
*/
|
||||
select: function() {
|
||||
this.selected = true;
|
||||
this.setState( 'selected', true );
|
||||
this.element.addClass( this.option( 'classes.selected' ) );
|
||||
},
|
||||
|
||||
|
|
@ -159,27 +173,62 @@
|
|||
* Убирает выделение с файла
|
||||
*/
|
||||
unselect: function() {
|
||||
this.selected = false;
|
||||
this.setState( 'selected', false );
|
||||
this.element.removeClass( this.option( 'classes.selected' ) );
|
||||
|
||||
if ( this.isActive() ) {
|
||||
if ( this.getState( 'active' ) ) {
|
||||
this.deactivate();
|
||||
this._getComponent( 'list' ).lsUploaderFileList( 'activateNextFile' );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Проверяет активен файл или нет
|
||||
* Помечает файл как незагруженный
|
||||
*/
|
||||
isActive: function() {
|
||||
return this.active;
|
||||
error: function() {
|
||||
this.setState( 'error', true );
|
||||
this.element.addClass( this.option( 'classes.error' ) );
|
||||
|
||||
this.element.find( this.option( 'selectors.progress.value' ) ).height( 0 );
|
||||
this.element.find( this.option( 'selectors.progress.label' ) ).text( 'ERROR' );
|
||||
},
|
||||
|
||||
/**
|
||||
* Проверяет выделен файл или нет
|
||||
* Помечает файл как незагруженный
|
||||
*/
|
||||
isSelected: function() {
|
||||
return this.selected;
|
||||
uploading: function() {
|
||||
this.setState( 'uploading', true );
|
||||
this.element.addClass( this.option( 'classes.uploading' ) );
|
||||
},
|
||||
|
||||
/**
|
||||
* Помечает файл как загруженный
|
||||
*/
|
||||
uploaded: function() {
|
||||
this.setState( 'uploading', false );
|
||||
this.element.removeClass( this.option( 'classes.uploading' ) );
|
||||
},
|
||||
|
||||
/**
|
||||
* Устанавливает процент загрузки
|
||||
*/
|
||||
setProgress: function( percent ) {
|
||||
this.element.find( this.option( 'selectors.progress.value' ) ).height( percent + '%' );
|
||||
this.element.find( this.option( 'selectors.progress.label' ) ).text( percent + '%' );
|
||||
},
|
||||
|
||||
/**
|
||||
* Получает состяние
|
||||
*/
|
||||
getState: function( state ) {
|
||||
return this.states[ state ];
|
||||
},
|
||||
|
||||
/**
|
||||
* Устанавливает состяние
|
||||
*/
|
||||
setState: function( state, value ) {
|
||||
this.states[ state ] = value;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
* Дефолтные опции
|
||||
*/
|
||||
options: {
|
||||
// Основной блок загрузчика
|
||||
uploader: $(),
|
||||
list: $(),
|
||||
|
||||
// Ссылки
|
||||
urls: {
|
||||
|
|
@ -25,14 +25,12 @@
|
|||
|
||||
// Селекторы
|
||||
selectors: {
|
||||
// Блок с информацией о файле
|
||||
info: '.js-media-properties',
|
||||
// Группа с информацией уникальной для каждого типа
|
||||
group: '.js-media-info-group',
|
||||
group: '.js-uploader-info-group',
|
||||
// Свойство
|
||||
property: '.js-media-info-property',
|
||||
// Сообщение об отсутствии выделенного файла
|
||||
empty: '.js-media-info-empty'
|
||||
property: '.js-uploader-info-property',
|
||||
// Кнопка удаления
|
||||
remove: '.js-uploader-info-remove',
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -45,8 +43,7 @@
|
|||
_create: function () {
|
||||
this.elements = {
|
||||
groups: this.element.find( this.option( 'selectors.group' ) ),
|
||||
empty: this.element.find( this.option( 'selectors.empty' ) ),
|
||||
info: this.element.find( this.option( 'selectors.info' ) ),
|
||||
info: this.element.find( this.option( 'selectors.info' ) ),
|
||||
properties: {
|
||||
image: this.element.find( this.option( 'selectors.property' ) + '[data-name=image]' ),
|
||||
name: this.element.find( this.option( 'selectors.property' ) + '[data-name=name]' ),
|
||||
|
|
@ -59,7 +56,7 @@
|
|||
this.file = $();
|
||||
|
||||
// Удаление файла
|
||||
this.element.on( 'click', '.js-media-item-info-remove', function () {
|
||||
this.element.on( 'click', this.option( 'selectors.remove' ), function () {
|
||||
this.file.lsUploaderFile( 'remove' );
|
||||
}.bind( this ));
|
||||
},
|
||||
|
|
@ -73,10 +70,6 @@
|
|||
|
||||
this.file = file;
|
||||
|
||||
// Показываем блок с информацией
|
||||
this.elements.empty.hide();
|
||||
this.elements.info.show();
|
||||
|
||||
// Устанавливаем общие для всех типов свойства
|
||||
this._setProperty( this.elements.properties.image, data['preview'] );
|
||||
this._setProperty( this.elements.properties.name, data['file-name'] );
|
||||
|
|
@ -96,14 +89,9 @@
|
|||
|
||||
/**
|
||||
* Помечает блок как пустой
|
||||
*
|
||||
* TODO: Перенести в lsUploader
|
||||
*/
|
||||
empty: function() {
|
||||
this.file = $();
|
||||
|
||||
this.elements.info.hide();
|
||||
this.elements.empty.show();
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -117,7 +105,6 @@
|
|||
* @private
|
||||
*/
|
||||
_activateGroup: function( group ) {
|
||||
this.elements.empty.hide();
|
||||
this.elements.groups.hide();
|
||||
group.show();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -18,16 +18,36 @@
|
|||
options: {
|
||||
// Ссылки
|
||||
urls: {
|
||||
// Загрузка файла
|
||||
upload: aRouter['ajax'] + 'media/upload/',
|
||||
// Генерация временного хэша
|
||||
generate_target_tmp: aRouter['ajax'] + 'media/generate-target-tmp/',
|
||||
},
|
||||
|
||||
// Селекторы
|
||||
selectors: {
|
||||
list: '.js-media-upload-gallery-list',
|
||||
info: '.js-media-info',
|
||||
upload_zone: '.js-media-upload-area',
|
||||
upload_input: '.js-media-upload-file',
|
||||
// Список файлов
|
||||
list: '.js-uploader-list',
|
||||
// Информация о файле
|
||||
info: '.js-uploader-info',
|
||||
|
||||
// Контейнер с элементами blocks и empty
|
||||
aside: '.js-uploader-aside',
|
||||
// Контейнер который отображается когда есть активный файл
|
||||
// и скрывается когда активного файла нет
|
||||
blocks: '.js-uploader-blocks',
|
||||
// Сообщение об отсутствии активного файла
|
||||
empty: '.js-uploader-aside-empty',
|
||||
|
||||
// Drag & drop зона
|
||||
upload_zone: '.js-uploader-area',
|
||||
// Инпут
|
||||
upload_input: '.js-uploader-file',
|
||||
},
|
||||
|
||||
// Классы
|
||||
classes: {
|
||||
empty: 'is-empty'
|
||||
},
|
||||
|
||||
// Настройки загрузчика
|
||||
|
|
@ -38,11 +58,12 @@
|
|||
limitConcurrentUploads: 3
|
||||
},
|
||||
|
||||
// Параметры
|
||||
target_type: null,
|
||||
target_id: null,
|
||||
target_tmp: null,
|
||||
|
||||
// Подгрузка списк сразу после иниц-ии
|
||||
// Подгрузка файлов сразу после иниц-ии
|
||||
autoload: true,
|
||||
},
|
||||
|
||||
|
|
@ -53,17 +74,18 @@
|
|||
* @private
|
||||
*/
|
||||
_create: function () {
|
||||
this.elements = {
|
||||
list: this.element.find( this.option( 'selectors.list' ) ),
|
||||
info: this.element.find( this.option( 'selectors.info' ) ),
|
||||
upload_zone: this.element.find( this.option( 'selectors.upload_zone' ) ),
|
||||
upload_input: this.element.find( this.option( 'selectors.upload_input' ) ),
|
||||
};
|
||||
// Получение элементов
|
||||
this.elements = {};
|
||||
|
||||
this.option( 'params', this.element.data( 'params' ) );
|
||||
$.each( this.option( 'selectors' ), function ( key, value ) {
|
||||
this.elements[ key ] = this.element.find( value );
|
||||
}.bind( this ));
|
||||
|
||||
// Получение параметров
|
||||
this.option( 'params', this.element.data( 'params' ) );
|
||||
this.option( 'target_type', this.element.data( 'type' ) );
|
||||
this.option( 'target_id', this.element.data( 'id' ) );
|
||||
this.option( 'target_tmp', this.element.data( 'tmp' ) || $.cookie( 'media_target_tmp_' + this.option( 'target_type' ) ) );
|
||||
this.option( 'target_id', this.element.data( 'id' ) );
|
||||
this.option( 'target_tmp', this.element.data( 'tmp' ) || $.cookie( 'media_target_tmp_' + this.option( 'target_type' ) ) );
|
||||
|
||||
// Генерация временного хэша для привязки
|
||||
if ( ! this.option( 'target_id' ) && ! this.option( 'target_tmp' ) ) {
|
||||
|
|
@ -83,7 +105,7 @@
|
|||
},
|
||||
|
||||
/**
|
||||
* Method
|
||||
* Иниц-ия загрузчика
|
||||
*/
|
||||
initUploader: function() {
|
||||
// Настройки загрузчика
|
||||
|
|
@ -117,8 +139,7 @@
|
|||
*
|
||||
*/
|
||||
onUploadProgress: function( file, percent ) {
|
||||
file.find( file.lsUploaderFile( 'option', 'selectors.progress.value' ) ).height( percent + '%' );
|
||||
file.find( file.lsUploaderFile( 'option', 'selectors.progress.label' ) ).text( percent + '%' );
|
||||
file.lsUploaderFile( 'setProgress', percent );
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -132,11 +153,14 @@
|
|||
*
|
||||
*/
|
||||
onUploadDone: function( file, response ) {
|
||||
file.lsUploaderFile( 'destroy' );
|
||||
file.replaceWith(
|
||||
$( $.trim( response.sTemplateFile ) )
|
||||
.lsUploaderFile({ uploader: this.element })
|
||||
.lsUploaderFile( 'uploaded' )
|
||||
.lsUploaderFile( 'activate' )
|
||||
);
|
||||
file = null;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -145,8 +169,7 @@
|
|||
onUploadError: function( file, response ) {
|
||||
ls.msg.error( response.sMsgTitle, response.sMsg );
|
||||
|
||||
file.find( file.lsUploaderFile( 'option', 'selectors.progress.value' ) ).height( 0 );
|
||||
file.find( file.lsUploaderFile( 'option', 'selectors.progress.label' ) ).text( 'ERROR' );
|
||||
file.lsUploaderFile( 'error' );
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -160,22 +183,38 @@
|
|||
}.bind(this));
|
||||
},
|
||||
|
||||
/**
|
||||
* Скрывает контейнер с блоками
|
||||
*/
|
||||
hideBlocks: function() {
|
||||
this.getElement( 'blocks' ).hide();
|
||||
this.getElement( 'empty' ).show();
|
||||
},
|
||||
|
||||
/**
|
||||
* Показывает контейнер с блоками
|
||||
*/
|
||||
showBlocks: function() {
|
||||
this.getElement( 'empty' ).hide();
|
||||
this.getElement( 'blocks' ).show();
|
||||
},
|
||||
|
||||
/**
|
||||
* Помечает загрузчик как пустой
|
||||
*/
|
||||
markAsEmpty: function() {
|
||||
this.element.addClass('is-empty');
|
||||
this.element.addClass( this.option( 'classes.empty' ) );
|
||||
},
|
||||
|
||||
/**
|
||||
* Помечает загрузчик как не пустой
|
||||
*/
|
||||
markAsNotEmpty: function() {
|
||||
this.element.removeClass('is-empty');
|
||||
this.element.removeClass( this.option( 'classes.empty' ) );
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* Получает элемент
|
||||
*/
|
||||
getElement: function( name ) {
|
||||
return this.elements[ name ];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
{**
|
||||
* Информация об активном файле
|
||||
*}
|
||||
|
||||
{extends './uploader-block.tpl'}
|
||||
|
||||
{block 'block_options' append}
|
||||
{$classes = "{$classes} uploader-info js-uploader-info"}
|
||||
{/block}
|
||||
|
||||
{block 'block_content'}
|
||||
{$component_info = 'uploader-info'}
|
||||
|
||||
{* Информация о файле *}
|
||||
<div class="{$component_info}-block">
|
||||
|
||||
{* Основная информация о файле *}
|
||||
<div class="{$component_info}-base">
|
||||
{* Превью *}
|
||||
<img src="" alt="" class="{$component_info}-base-image js-{$component_info}-property" data-name="image" width="100" height="100">
|
||||
|
||||
{* Информация *}
|
||||
<ul class="{$component_info}-base-properties">
|
||||
<li><strong class="word-wrap js-{$component_info}-property" data-name="name"></strong></li>
|
||||
<li class="js-{$component_info}-property" data-name="date"></li>
|
||||
<li><span class="js-{$component_info}-property" data-name="size"></span></li>
|
||||
</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>
|
||||
|
||||
{* Уникальные св-ва для каждого типа *}
|
||||
<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>
|
||||
</div>
|
||||
{/block}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{extends 'components/block/block.tpl'}
|
||||
|
||||
{block 'block_options' append}
|
||||
{$classes = "{$classes} uploader-block"}
|
||||
{/block}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
{$file = $oMediaItem}
|
||||
|
||||
<li class="{$component} {if $bIsSelected}is-selected{/if} {if $bIsActive}active{/if} js-media-upload-gallery-item"
|
||||
<li class="{$component} {if $bIsSelected}is-selected{/if} {if $bIsActive}active{/if} js-{$component}"
|
||||
data-media-id="{$file->getId()}"
|
||||
data-media-type="{$file->getType()}"
|
||||
data-media-date-add="{date_format date=$file->getDateAdd() format='j F Y, H:i'}"
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
{extends 'components/block/block.tpl'}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
{**
|
||||
* Информация об активном файле
|
||||
*}
|
||||
|
||||
{$component = 'uploader-info'}
|
||||
|
||||
{block 'uploader_info_options'}{/block}
|
||||
|
||||
{* Информация о выделенном файле *}
|
||||
<div class="{$component} js-media-info">
|
||||
{* Блок отображаемый когда нет выделенных файлов *}
|
||||
{include 'components/alert/alert.tpl' sMods='empty' mAlerts={lang name='uploader.info.empty'} sClasses='js-media-info-empty'}
|
||||
|
||||
{* Информация о файле *}
|
||||
<div class="{$component}-block js-media-properties" style="display: none;">
|
||||
|
||||
{* Основная информация о файле *}
|
||||
<div class="{$component}-base">
|
||||
{* Превью *}
|
||||
<img src="" alt="" class="{$component}-base-image js-media-info-property" data-name="image" width="100" height="100">
|
||||
|
||||
{* Информация *}
|
||||
<ul class="{$component}-base-properties">
|
||||
<li><strong class="word-wrap js-media-info-property" data-name="name"></strong></li>
|
||||
<li class="js-media-info-property" data-name="date"></li>
|
||||
<li><span class="js-media-info-property" data-name="size"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{* Информация о файле *}
|
||||
<div class="{$component}-type js-media-info-group" data-type="1" style="display: none;">
|
||||
<ul class="{$component}-actions">
|
||||
<li><a href="#" class="link-dotted js-media-item-info-remove">{lang name='uploader.actions.remove'}</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="{$component}-type-info">
|
||||
Разрешение: <span class="js-media-info-property" data-name="dimensions"></span>
|
||||
</div>
|
||||
|
||||
{* Описание *}
|
||||
{include 'components/field/field.text.tpl'
|
||||
sName = 'title'
|
||||
sInputClasses = 'js-media-info-property'
|
||||
sInputAttributes = 'data-name="title"'
|
||||
sLabel = $aLang.uploadimg_title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
{$component = 'uploader'}
|
||||
|
||||
{block 'block_options'}
|
||||
{block 'uploader_options'}
|
||||
{$mods = $smarty.local.mods}
|
||||
{$classes = $smarty.local.classes}
|
||||
{$attributes = $smarty.local.attributes}
|
||||
|
|
@ -17,24 +17,42 @@
|
|||
data-id={json var=$smarty.local.targetId}
|
||||
data-tmp={json var=$smarty.local.targetTmp}>
|
||||
|
||||
{* @hook Начало основного блока загрузчика *}
|
||||
{hook run='uploader_begin'}
|
||||
|
||||
{block 'uploader_content'}
|
||||
{* Drag & drop зона *}
|
||||
{include 'components/field/field.upload-area.tpl'
|
||||
classes = 'js-media-upload-area'
|
||||
inputClasses = 'js-media-upload-file'
|
||||
classes = 'js-uploader-area'
|
||||
inputClasses = 'js-uploader-file'
|
||||
inputName = 'filedata'}
|
||||
|
||||
{* Галерея *}
|
||||
<div class="{$component}-wrapper clearfix">
|
||||
{* Список файлов *}
|
||||
<ul class="{$component}-file-list js-media-upload-gallery-list"></ul>
|
||||
{* @hook Хук после зоны загрузки *}
|
||||
{hook run='uploader_area_after'}
|
||||
|
||||
{* Информация о выделенном файле *}
|
||||
<div class="{$component}-aside">
|
||||
{block 'uploader_aside'}
|
||||
{include './uploader-info.tpl'}
|
||||
{/block}
|
||||
{* Враппер *}
|
||||
<div class="{$component}-wrapper clearfix">
|
||||
{* Сайдбар *}
|
||||
<div class="{$component}-aside js-uploader-aside">
|
||||
{* Блок отображаемый когда нет активного файла *}
|
||||
{include 'components/alert/alert.tpl'
|
||||
sMods = 'empty'
|
||||
mAlerts = {lang name='uploader.info.empty'}
|
||||
sClasses = "js-{$component}-aside-empty"}
|
||||
|
||||
{* Блоки *}
|
||||
<div class="js-uploader-blocks" style="display: none">
|
||||
{block 'uploader_aside'}
|
||||
{include './uploader-block.info.tpl'}
|
||||
{/block}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{* Список файлов *}
|
||||
<ul class="{$component}-file-list js-uploader-list"></ul>
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{* @hook Конец основного блока загрузчика *}
|
||||
{hook run='uploader_end'}
|
||||
</div>
|
||||
Loading…
Reference in a new issue