mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-07-03 06:55:03 +03:00
Доработка вставки медиа файлов
This commit is contained in:
Denis Shakhov
parent
130ea4a401
commit
63cf2c8f69
|
|
@ -1,5 +1,5 @@
|
||||||
/**
|
/**
|
||||||
* Фотосет
|
* Работа с медиа файлами
|
||||||
*
|
*
|
||||||
* @module ls/media
|
* @module ls/media
|
||||||
*
|
*
|
||||||
|
|
@ -10,302 +10,427 @@
|
||||||
|
|
||||||
var ls = ls || {};
|
var ls = ls || {};
|
||||||
|
|
||||||
ls.media =( function ($) {
|
ls.media = (function ($) {
|
||||||
|
/**
|
||||||
var _defaultsFileupload = {
|
* Дефолтные опции
|
||||||
url: aRouter['ajax']+"media/upload/",
|
*
|
||||||
sequentialUploads: false,
|
* @private
|
||||||
singleFileUploads: true,
|
*/
|
||||||
limitConcurrentUploads: 3
|
|
||||||
};
|
|
||||||
|
|
||||||
var _defaults = {
|
var _defaults = {
|
||||||
target_type: '',
|
target_type: '',
|
||||||
target_id: '',
|
target_id: '',
|
||||||
target_tmp: '',
|
target_tmp: '',
|
||||||
fileupload: _defaultsFileupload
|
// Настройки загрузчика
|
||||||
};
|
fileupload: {
|
||||||
|
url: null,
|
||||||
this.mode='insert';
|
sequentialUploads: false,
|
||||||
|
singleFileUploads: true,
|
||||||
this.setMode = function(mode) {
|
limitConcurrentUploads: 3
|
||||||
this.mode=mode;
|
},
|
||||||
this.showSettingsMode();
|
// Селекторы
|
||||||
};
|
selectors: {
|
||||||
|
gallery: {
|
||||||
this.showSettingsMode = function($item) {
|
upload_area: '.js-media-upload-area',
|
||||||
$('.js-media-settings-mode').hide();
|
upload_input: '.js-media-upload-file',
|
||||||
/**
|
file_list: '.js-media-upload-gallery-list',
|
||||||
* Показываем только если есть выделенные элементы
|
file: '.js-media-upload-gallery-item'
|
||||||
*/
|
},
|
||||||
if (this.getSelected().length) {
|
button_insert: '.js-media-insert',
|
||||||
$('#media-settings-mode-'+this.mode).show();
|
button_insert_photoset: '.js-media-insert-photoset'
|
||||||
$item=$item || this.getCurrent();
|
},
|
||||||
/**
|
// Классы
|
||||||
* Выставляем настройки по вставке медиа
|
classes: {
|
||||||
*/
|
selected: 'is-selected'
|
||||||
var $select=$('select[name=size]').html('');
|
},
|
||||||
var sizes=$item.data('mediaImageSizes');
|
// Роуты
|
||||||
$.each(sizes,function(k,v){
|
routers: {
|
||||||
/**
|
upload: aRouter['ajax'] + "media/upload/",
|
||||||
* Расчитываем пропорциональную высоту изображения
|
remove_file: aRouter['ajax'] + "media/remove-file/",
|
||||||
*/
|
load_gallery: aRouter['ajax'] + "media/load-gallery/",
|
||||||
var height=v.h;
|
generate_target_tmp: aRouter['ajax'] + "media/generate-target-tmp/",
|
||||||
if (!v.h) {
|
submit_insert: aRouter['ajax'] + "media/submit-insert/",
|
||||||
height=parseInt(v.w*$item.data('mediaHeight')/$item.data('mediaWidth'));
|
submit_photoset: aRouter['ajax'] + "media/submit-create-photoset/"
|
||||||
}
|
},
|
||||||
$select.append('<option value="'+ v.w +(v.crop ? 'crop' : '')+'">'+v.w+' × '+height+'</option>');
|
// HTML
|
||||||
});
|
html: {
|
||||||
|
progress: '<div class="progress loading"></div>'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.hideSettingsMode = function() {
|
this.mode = 'insert';
|
||||||
$('.js-media-settings-mode').hide();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.initUpload = function(options) {
|
|
||||||
this.options = $.extend(true, {}, _defaults, options);
|
|
||||||
|
|
||||||
this.options.target_tmp=this.options.target_tmp ? this.options.target_tmp : $.cookie('media_target_tmp_'+this.options.target_type);
|
|
||||||
if (!this.options.target_id && !this.options.target_tmp) {
|
|
||||||
ls.media.generateTargetTmp(this.options.target_type);
|
|
||||||
}
|
|
||||||
|
|
||||||
var params=this.options.fileupload;
|
|
||||||
params.formData=$.extend({}, params.formData || {}, {
|
|
||||||
security_ls_key: LIVESTREET_SECURITY_KEY,
|
|
||||||
target_type: this.options.target_type,
|
|
||||||
target_id: this.options.target_id,
|
|
||||||
target_tmp: this.options.target_tmp
|
|
||||||
});
|
|
||||||
$.each(params.formData,function(k,v){
|
|
||||||
if (v==null) {
|
|
||||||
params.formData[k]='';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$('.js-media-upload-file').fileupload(params);
|
|
||||||
|
|
||||||
|
|
||||||
$('.js-media-upload-file').bind('fileuploadadd',function(e,data) {
|
|
||||||
ls.media.addPreload(data);
|
|
||||||
});
|
|
||||||
$('.js-media-upload-file').bind('fileuploaddone',function(e,data) {
|
|
||||||
if (data.result.bStateError) {
|
|
||||||
ls.media.addFileError(data.context,data.result);
|
|
||||||
} else {
|
|
||||||
ls.media.addFile(data.context,data.result);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$('.js-media-upload-file').bind('fileuploadprogress',function(e,data) {
|
|
||||||
data.context.html(parseInt(data.loaded / data.total * 100, 10)+'%');
|
|
||||||
});
|
|
||||||
|
|
||||||
this.loadGallery();
|
|
||||||
this.bindFileEvents();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Инициализация
|
* Инициализация
|
||||||
*/
|
*/
|
||||||
this.init = function() {
|
this.init = function(options) {
|
||||||
|
this.options = $.extend(true, {}, _defaults, options);
|
||||||
|
|
||||||
|
this.elements = {
|
||||||
|
uploadArea: $(this.options.selectors.gallery.upload_area),
|
||||||
|
uploadInput: $(this.options.selectors.gallery.upload_input),
|
||||||
|
buttonInsert: $(this.options.selectors.button_insert),
|
||||||
|
buttonInsertPhotoset: $(this.options.selectors.button_insert_photoset),
|
||||||
|
gallery: {
|
||||||
|
fileList: $(this.options.selectors.gallery.file_list)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.setMode('insert');
|
||||||
|
|
||||||
|
this.options.target_tmp = this.options.target_tmp ? this.options.target_tmp : $.cookie('media_target_tmp_' + this.options.target_type);
|
||||||
|
if ( ! this.options.target_id && ! this.options.target_tmp ) {
|
||||||
|
ls.media.generateTargetTmp(this.options.target_type);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Настройки загрузчика
|
||||||
|
this.options.fileupload.url = this.options.fileupload.url || this.options.routers.upload;
|
||||||
|
this.options.fileupload.dropZone = this.options.fileupload.dropZone || this.elements.uploadArea;
|
||||||
|
this.options.fileupload.formData = $.extend({}, this.options.fileupload.formData || {}, {
|
||||||
|
security_ls_key: LIVESTREET_SECURITY_KEY,
|
||||||
|
target_type: this.options.target_type,
|
||||||
|
target_id: this.options.target_id,
|
||||||
|
target_tmp: this.options.target_tmp
|
||||||
|
});
|
||||||
|
|
||||||
|
$.each(this.options.fileupload.formData, function(k, v) {
|
||||||
|
if (v === null) this.options.fileupload.formData[k] = '';
|
||||||
|
});
|
||||||
|
|
||||||
|
this.elements.uploadInput.fileupload(this.options.fileupload);
|
||||||
|
|
||||||
|
this.elements.uploadInput.bind({
|
||||||
|
fileuploadadd: function(e, data) {
|
||||||
|
ls.media.addPreload(data);
|
||||||
|
},
|
||||||
|
fileuploaddone: function(e, data) {
|
||||||
|
ls.media[data.result.bStateError ? 'onUploadError' : 'onUploadDone'](data.context, data.result);
|
||||||
|
},
|
||||||
|
fileuploadprogress: function(e, data) {
|
||||||
|
data.context.html(this.options.html.progress);
|
||||||
|
}.bind(this)
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ивенты вставки в редактор
|
||||||
|
this.elements.buttonInsert.on('click', function () {
|
||||||
|
var params = {
|
||||||
|
align: $('#media-settings-mode-insert').find('select[name=align]').val(),
|
||||||
|
size: $('#media-settings-mode-insert').find('select[name=size]').val()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.insert(this.options.routers.submit_insert, params);
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
this.elements.buttonInsertPhotoset.on('click', function () {
|
||||||
|
console.log('asdf')
|
||||||
|
var params = {
|
||||||
|
use_thumbs: $('#media-settings-mode-create-photoset').find('input[name=use_thumbs]').val(),
|
||||||
|
show_caption: $('#media-settings-mode-create-photoset').find('input[name=show_caption]').val()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.insert(this.options.routers.submit_photoset, params);
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
// Перемещение галереи из одного таба в другой
|
||||||
|
$('.js-tab-show-gallery').on('tabbeforeactivate',function(event,tab){
|
||||||
|
$('#upload-gallery-image').appendTo($('#' + tab.options.target).find('.modal-content'));
|
||||||
|
ls.media.setMode($(event.target).data('mediaMode'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Сохранение настроек файла
|
||||||
|
$('.js-media-detail-area .js-input-title').on('blur', function(e) {
|
||||||
|
this.saveDataFile($(e.currentTarget).attr('name'),$(e.currentTarget).val());
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
this.loadImageList();
|
||||||
|
this.bindFileEvents();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
this.setMode = function(mode) {
|
||||||
|
this.mode = mode;
|
||||||
|
this.showSettingsMode();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Показывает блок с информацией об активном файле
|
||||||
|
*
|
||||||
|
* @param {Object} $item Выделенный файл
|
||||||
|
*/
|
||||||
|
this.showSettingsMode = function($item) {
|
||||||
|
$('.js-media-settings-mode').hide();
|
||||||
|
|
||||||
|
/* Показываем только если есть выделенные элементы */
|
||||||
|
if (this.getSelected().length) {
|
||||||
|
$('#media-settings-mode-' + this.mode).show();
|
||||||
|
$item = $item || this.getCurrent();
|
||||||
|
|
||||||
|
/* Выставляем настройки по вставке медиа */
|
||||||
|
var $select = $('select[name=size]').html('');
|
||||||
|
var sizes = $item.data('mediaImageSizes');
|
||||||
|
|
||||||
|
$.each(sizes, function(k, v) {
|
||||||
|
/* Расчитываем пропорциональную высоту изображения */
|
||||||
|
var height = v.h;
|
||||||
|
|
||||||
|
if ( ! height ) {
|
||||||
|
height = parseInt(v.w * $item.data('mediaHeight') / $item.data('mediaWidth'));
|
||||||
|
}
|
||||||
|
|
||||||
|
$select.append('<option value="'+ v.w + (v.crop ? 'crop' : '') + '">' + v.w + ' × ' + height + '</option>');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
this.hideSettingsMode = function() {
|
||||||
|
$('.js-media-settings-mode').hide();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Удаление активного файла
|
||||||
|
*/
|
||||||
this.removeCurrentFile = function() {
|
this.removeCurrentFile = function() {
|
||||||
var $item=this.getCurrent();
|
var $item = this.getCurrent();
|
||||||
|
|
||||||
if ($item.length) {
|
if ($item.length) {
|
||||||
return this.removeFile($item.data('mediaId'));
|
return this.removeFile($item.data('mediaId'));
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Удаление файла
|
||||||
|
*
|
||||||
|
* @param {Number} id
|
||||||
|
*/
|
||||||
this.removeFile = function(id) {
|
this.removeFile = function(id) {
|
||||||
$this=this;
|
var _this = this;
|
||||||
ls.ajax.load(aRouter['ajax']+"media/remove-file/", { id: id }, function(result) {
|
|
||||||
$('.js-media-upload-gallery-item[data-media-id='+id+']').fadeOut(500,function(){
|
ls.ajax.load(this.options.routers.remove_file, { id: id }, function(result) {
|
||||||
|
$(_this.options.selectors.gallery.file + '[data-media-id=' + id + ']').fadeOut(500, function() {
|
||||||
$(this).remove();
|
$(this).remove();
|
||||||
|
|
||||||
if ($itemNext=$this.searchNextSelected()) {
|
if ($itemNext = _this.searchNextSelected()) {
|
||||||
$this.setCurrent($itemNext,true);
|
_this.setCurrent($itemNext, true);
|
||||||
} else {
|
} else {
|
||||||
$this.hideDetail();
|
_this.hideDetail();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if ($(_this.options.selectors.gallery.file).length === 0) _this.showEmptyAlert();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
this.loadGallery = function() {
|
/**
|
||||||
$('.js-media-upload-gallery-list').addClass('loader');
|
* Подгрузка списка файлов
|
||||||
ls.ajax.load(aRouter['ajax']+"media/load-gallery/", { target_type: this.options.target_type, target_id: this.options.target_id, target_tmp: this.options.target_tmp }, function(result) {
|
*/
|
||||||
$('.js-media-upload-gallery-list').removeClass('loader');
|
this.loadImageList = function() {
|
||||||
$('.js-media-upload-gallery-list').html(result.sTemplate);
|
this.elements.gallery.fileList.empty().addClass( ls.options.classes.states.loading );
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.generateTargetTmp = function(type) {
|
ls.ajax.load(this.options.routers.load_gallery, {target_type: this.options.target_type, target_id: this.options.target_id, target_tmp: this.options.target_tmp }, function(result) {
|
||||||
ls.ajax.load(aRouter['ajax']+"media/generate-target-tmp/", { type: type }, function(result) {
|
this.elements.gallery.fileList.removeClass( ls.options.classes.states.loading ).html(result.sTemplate);
|
||||||
if (result.sTmpKey) {
|
this[result.sTemplate ? 'hideEmptyAlert' : 'showEmptyAlert']();
|
||||||
this.options.target_tmp=result.sTmpKey;
|
|
||||||
}
|
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
};
|
};
|
||||||
|
|
||||||
this.addPreload = function(data) {
|
/**
|
||||||
data.context=$('<li class="modal-upload-image-gallery-list-item">' +
|
*
|
||||||
'loader...' +
|
*/
|
||||||
'</li>');
|
this.generateTargetTmp = function(type) {
|
||||||
$('.js-media-upload-gallery-list').prepend(data.context);
|
ls.ajax.load(this.options.routers.generate_target_tmp, { type: type }, function(result) {
|
||||||
|
if (result.sTmpKey) this.options.target_tmp = result.sTmpKey;
|
||||||
|
}.bind(this));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Индикация загрузки изображения
|
||||||
|
*/
|
||||||
|
this.addPreload = function(data) {
|
||||||
|
this.hideEmptyAlert();
|
||||||
|
data.context = $('<li class="modal-upload-image-gallery-list-item">' + this.options.html.progress + '</li>');
|
||||||
|
this.elements.gallery.fileList.prepend(data.context);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Выделение изображений
|
||||||
|
*/
|
||||||
this.bindFileEvents = function() {
|
this.bindFileEvents = function() {
|
||||||
$('.js-media-upload-gallery-list').on('click','.js-media-upload-gallery-item',function(e){
|
this.elements.gallery.fileList.on('click', this.options.selectors.gallery.file, function(e){
|
||||||
var $item=$(e.currentTarget);
|
var $item = $(e.currentTarget);
|
||||||
var allowMany=(this.mode=='create-photoset' || e.ctrlKey || e.metaKey);
|
var allowMany = (this.mode == 'create-photoset' || e.ctrlKey || e.metaKey);
|
||||||
if ($item.hasClass('active')) {
|
|
||||||
/**
|
if ($item.hasClass(ls.options.classes.states.active)) {
|
||||||
* Снимаем выделение с текущего
|
/* Снимаем выделение с текущего */
|
||||||
*/
|
$item.removeClass(ls.options.classes.states.active).removeClass(this.options.classes.selected);
|
||||||
$item.removeClass('active').removeClass('is-selected');
|
|
||||||
/**
|
/* Делаем активным другой выделенный элемент */
|
||||||
* Делаем активным другой выделенный элемент
|
if ($itemNext = this.searchNextSelected($item)) {
|
||||||
*/
|
|
||||||
if ($itemNext=this.searchNextSelected($item)) {
|
|
||||||
this.setCurrent($itemNext,true);
|
this.setCurrent($itemNext,true);
|
||||||
} else {
|
} else {
|
||||||
this.hideDetail();
|
this.hideDetail();
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
/**
|
/* Делаем текущим и показываем детальную информацию */
|
||||||
* Делаем текущим и показываем детальную информацию
|
|
||||||
*/
|
|
||||||
this.setCurrent($item,allowMany);
|
this.setCurrent($item,allowMany);
|
||||||
}
|
}
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
};
|
};
|
||||||
|
|
||||||
this.addFile = function(context,response) {
|
/**
|
||||||
/**
|
*
|
||||||
* Завершение загрузки файла
|
*/
|
||||||
*/
|
this.showEmptyAlert = function(data) {
|
||||||
var $item=$(response.sTemplateFile);
|
$('#media-empty').show();
|
||||||
context.replaceWith($item);
|
$('.js-media-item-info').hide();
|
||||||
this.setSelected($item,true);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.addFileError = function(context,response) {
|
/**
|
||||||
/**
|
*
|
||||||
* Помечаем файл как ошибочный (глюк при загрузке)
|
*/
|
||||||
*/
|
this.hideEmptyAlert = function(data) {
|
||||||
|
$('#media-empty').hide();
|
||||||
|
$('.js-media-item-info').show();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Завершение загрузки файла
|
||||||
|
*/
|
||||||
|
this.onUploadDone = function(context, response) {
|
||||||
|
var $item = $(response.sTemplateFile);
|
||||||
|
context.replaceWith($item);
|
||||||
|
this.setSelected($item, true);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Помечаем файл как ошибочный (глюк при загрузке)
|
||||||
|
*/
|
||||||
|
this.onUploadError = function(context, response) {
|
||||||
ls.msg.error(response.sMsgTitle,response.sMsg);
|
ls.msg.error(response.sMsgTitle,response.sMsg);
|
||||||
context.html('ERROR');
|
context.html('ERROR');
|
||||||
};
|
};
|
||||||
|
|
||||||
this.searchNextSelected = function($itemOld) {
|
/**
|
||||||
var $item=$('.js-media-upload-gallery-item.is-selected:first');
|
* Ищет файл для выделения
|
||||||
if ($item.length==0) {
|
*/
|
||||||
return false;
|
this.searchNextSelected = function() {
|
||||||
}
|
var $item = $(this.options.selectors.gallery.file + '.' + this.options.classes.selected + ':first');
|
||||||
|
if ($item.length === 0) return false;
|
||||||
return $item;
|
return $item;
|
||||||
};
|
};
|
||||||
|
|
||||||
this.setCurrent = function($item,allowMany) {
|
/**
|
||||||
$('.js-media-upload-gallery-item.active').removeClass('active');
|
* Помечает файл как активный
|
||||||
$item.addClass('active');
|
*
|
||||||
this.setSelected($item,allowMany);
|
* @param {Object} $item Помечаемый файл
|
||||||
/**
|
* @param {Boolean} allowMany Выделение нескольких файлов
|
||||||
* Показываем детальную информацию
|
*/
|
||||||
*/
|
this.setCurrent = function($item, allowMany) {
|
||||||
|
$(this.options.selectors.gallery.file + '.' + ls.options.classes.states.active).removeClass(ls.options.classes.states.active);
|
||||||
|
$item.addClass(ls.options.classes.states.active);
|
||||||
|
this.setSelected($item, allowMany);
|
||||||
this.showDetail($item);
|
this.showDetail($item);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Получает активный файл
|
||||||
|
*
|
||||||
|
* @return {Object} Активный файл
|
||||||
|
*/
|
||||||
this.getCurrent = function() {
|
this.getCurrent = function() {
|
||||||
return $('.js-media-upload-gallery-item.active');
|
return $(this.options.selectors.gallery.file + '.' + ls.options.classes.states.active);
|
||||||
};
|
};
|
||||||
|
|
||||||
this.setSelected = function($item,allowMany) {
|
/**
|
||||||
if (!allowMany) {
|
* Выделяет файл
|
||||||
this.getSelected().removeClass('is-selected');
|
*
|
||||||
|
* @param {Object} $item Выделяемый файл
|
||||||
|
* @param {Boolean} allowMany Выделение нескольких файлов
|
||||||
|
*/
|
||||||
|
this.setSelected = function($item, allowMany) {
|
||||||
|
if ( ! allowMany ) {
|
||||||
|
this.getSelected().removeClass(this.options.classes.selected);
|
||||||
}
|
}
|
||||||
$item.addClass('is-selected');
|
|
||||||
/**
|
$item.addClass(this.options.classes.selected);
|
||||||
* Если нет еще нет активного элемента, то делаем активным текущий
|
|
||||||
*/
|
/* Если нет еще нет активного элемента, то делаем активным текущий */
|
||||||
if (this.getCurrent().length==0) {
|
if (this.getCurrent().length === 0) {
|
||||||
this.setCurrent($item,allowMany);
|
this.setCurrent($item, allowMany);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Получает выделенные файлы
|
||||||
|
*
|
||||||
|
* @return {Array} Список выделенных файлов
|
||||||
|
*/
|
||||||
this.getSelected = function() {
|
this.getSelected = function() {
|
||||||
return $('.js-media-upload-gallery-item.is-selected');
|
return $(this.options.selectors.gallery.file + '.' + this.options.classes.selected);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
this.saveDataFile = function(name, value) {
|
||||||
|
var $item = this.getCurrent();
|
||||||
|
|
||||||
|
if ($item.length) {
|
||||||
|
var id = $item.data('mediaId');
|
||||||
|
|
||||||
|
ls.ajax.load(aRouter['ajax']+"media/save-data-file/", { name: name, value: value, id: id }, function(result) {
|
||||||
|
$(this.options.selectors.gallery.file + '[data-media-id=' + id + ']').data('mediaData' + name.charAt(0).toUpperCase() + name.slice(1), value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
this.showDetail = function($item) {
|
this.showDetail = function($item) {
|
||||||
$('.js-media-detail-preview').attr('src',$item.data('mediaPreview'));
|
$('.js-media-detail-preview').attr('src',$item.data('mediaPreview'));
|
||||||
$('.js-media-detail-name').html($item.data('mediaFileName'));
|
$('.js-media-detail-name').html($item.data('mediaFileName'));
|
||||||
$('.js-media-detail-date').html($item.data('mediaDateAdd'));
|
$('.js-media-detail-date').html($item.data('mediaDateAdd'));
|
||||||
$('.js-media-detail-dimensions').html($item.data('mediaWidth')+' × '+$item.data('mediaHeight'));
|
$('.js-media-detail-dimensions').html($item.data('mediaWidth')+' × '+$item.data('mediaHeight'));
|
||||||
$('.js-media-detail-file-size').html(parseInt($item.data('mediaFileSize')/1024)+'kB');
|
$('.js-media-detail-file-size').html(parseInt($item.data('mediaFileSize')/1024)+'kB');
|
||||||
|
$('.js-media-detail-area .js-input-title').val($item.data('mediaDataTitle'));
|
||||||
$('.js-media-detail-area').show();
|
$('.js-media-detail-area').show();
|
||||||
|
|
||||||
this.showSettingsMode($item);
|
this.showSettingsMode($item);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
this.hideDetail = function() {
|
this.hideDetail = function() {
|
||||||
$('.js-media-detail-area').hide();
|
$('.js-media-detail-area').hide();
|
||||||
this.hideSettingsMode();
|
this.hideSettingsMode();
|
||||||
};
|
};
|
||||||
|
|
||||||
this.submitInsert = function() {
|
/**
|
||||||
var $aItems=this.getSelected();
|
* Вставка файлов в редактор
|
||||||
if (!$aItems.length) {
|
*/
|
||||||
return false;
|
this.insert = function(url, params) {
|
||||||
}
|
var $aItems = this.getSelected();
|
||||||
/**
|
|
||||||
* Формируем список ID элементов
|
|
||||||
*/
|
|
||||||
var aIds=[];
|
|
||||||
$aItems.each(function(k,v){
|
|
||||||
var $item=$(v);
|
|
||||||
aIds.push($item.data('mediaId'));
|
|
||||||
});
|
|
||||||
var params={
|
|
||||||
ids: aIds,
|
|
||||||
align: $('#media-settings-mode-insert').find('select[name=align]').val(),
|
|
||||||
size: $('#media-settings-mode-insert').find('select[name=size]').val()
|
|
||||||
}
|
|
||||||
|
|
||||||
ls.ajax.load(aRouter['ajax']+"media/submit-insert/", params, function(result) {
|
if ( ! $aItems.length ) return false;
|
||||||
if (result.bStateError) {
|
|
||||||
ls.msg.error(result.sMsgTitle,result.sMsg);
|
|
||||||
} else {
|
|
||||||
$.markItUp({
|
|
||||||
replaceWith: result.sTextResult
|
|
||||||
});
|
|
||||||
$('#modal-image-upload').modal('hide');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.submitCreatePhotoset = function() {
|
var aIds = [];
|
||||||
var $aItems=this.getSelected();
|
var _params = {
|
||||||
if (!$aItems.length) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* Формируем список ID элементов
|
|
||||||
*/
|
|
||||||
var aIds=[];
|
|
||||||
$aItems.each(function(k,v){
|
|
||||||
var $item=$(v);
|
|
||||||
aIds.push($item.data('mediaId'));
|
|
||||||
});
|
|
||||||
var params={
|
|
||||||
ids: aIds
|
ids: aIds
|
||||||
}
|
};
|
||||||
|
|
||||||
ls.ajax.load(aRouter['ajax']+"media/submit-create-photoset/", params, function(result) {
|
/* Формируем список ID элементов */
|
||||||
|
$aItems.each(function(k, v) {
|
||||||
|
var $item = $(v);
|
||||||
|
aIds.push($item.data('mediaId'));
|
||||||
|
});
|
||||||
|
|
||||||
|
ls.ajax.load(url, $.extend(true, {}, _params, params), function(result) {
|
||||||
if (result.bStateError) {
|
if (result.bStateError) {
|
||||||
ls.msg.error(result.sMsgTitle,result.sMsg);
|
ls.msg.error(result.sMsgTitle,result.sMsg);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
|
|
@ -59,8 +59,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Manager */
|
/* Manager */
|
||||||
.modal-upload-image-gallery { overflow: hidden; }
|
.modal-upload-image-gallery { overflow: hidden; min-height: 150px; }
|
||||||
.modal-upload-image-gallery-list { overflow: auto; width: 68%; margin-right: 2%; max-height: 354px; float: left; }
|
.modal-upload-image-gallery-list { overflow: auto; width: 68%; min-height: 150px; margin-right: 2%; max-height: 354px; float: left; }
|
||||||
.modal-upload-image-gallery-list-item {
|
.modal-upload-image-gallery-list-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -72,16 +72,25 @@
|
||||||
.modal-upload-image-gallery-list-item img { vertical-align: top; width: 100px; height: 100px; }
|
.modal-upload-image-gallery-list-item img { vertical-align: top; width: 100px; height: 100px; }
|
||||||
.modal-upload-image-gallery-list-item:hover { border-color: #eee; }
|
.modal-upload-image-gallery-list-item:hover { border-color: #eee; }
|
||||||
|
|
||||||
|
/* Progress bar */
|
||||||
|
.modal-upload-image-gallery-list-item .progress {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
/* Selected */
|
/* Selected */
|
||||||
.modal-upload-image-gallery-list-item.is-selected { border-color: #D5CE3D; }
|
.modal-upload-image-gallery-list-item.is-selected { border-color: #D5CE3D; }
|
||||||
|
|
||||||
/* Active */
|
/* Active */
|
||||||
.modal-upload-image-gallery-list-item.is-selected.active { border-color: #7979FC; }
|
.modal-upload-image-gallery-list-item.is-selected.active { border-color: #7979FC; }
|
||||||
.modal-upload-image-gallery-list-item.is-selected.active .modal-upload-image-gallery-list-item-checkbox {background: #7979FC; }
|
.modal-upload-image-gallery-list-item.is-selected.active .modal-upload-image-gallery-list-item-checkbox { background: #7979FC; }
|
||||||
|
|
||||||
/* Checkbox */
|
/* Checkbox */
|
||||||
.modal-upload-image-gallery-list-item input { display: none; }
|
.modal-upload-image-gallery-list-item input { display: none; }
|
||||||
.modal-upload-image-gallery-list-item.is-selected .modal-upload-image-gallery-list-item-checkbox { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; background: #D5CE3D; cursor: pointer; }
|
.modal-upload-image-gallery-list-item.is-selected .modal-upload-image-gallery-list-item-checkbox { display: none; position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; background: #D5CE3D; cursor: pointer; }
|
||||||
.modal-upload-image-gallery-list-item.is-selected input:checked + .modal-upload-image-gallery-list-item-checkbox { background: #000; }
|
.modal-upload-image-gallery-list-item.is-selected input:checked + .modal-upload-image-gallery-list-item-checkbox { background: #000; }
|
||||||
|
|
||||||
/* Info */
|
/* Info */
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,6 @@
|
||||||
* Добавление медиа-файла / Список изображений / Блок с изображением
|
* Добавление медиа-файла / Список изображений / Блок с изображением
|
||||||
*
|
*
|
||||||
* @styles css/modals.css
|
* @styles css/modals.css
|
||||||
*
|
|
||||||
* TODO: Передавать сюда объект изображения вместо отдельных переменных
|
|
||||||
*}
|
*}
|
||||||
<li class="js-media-upload-gallery-item modal-upload-image-gallery-list-item {if $bIsSelected}is-selected{/if} {if $bIsActive}active{/if}"
|
<li class="js-media-upload-gallery-item modal-upload-image-gallery-list-item {if $bIsSelected}is-selected{/if} {if $bIsActive}active{/if}"
|
||||||
data-media-id="{$oMediaItem->getId()}"
|
data-media-id="{$oMediaItem->getId()}"
|
||||||
|
|
|
||||||
|
|
@ -1,68 +1,84 @@
|
||||||
{**
|
{**
|
||||||
* Добавление медиа-файла / Список изображений
|
* Добавление медиа-файла / Список файлов
|
||||||
*
|
*
|
||||||
* @styles css/modals.css
|
* @styles css/modals.css
|
||||||
*}
|
*}
|
||||||
|
|
||||||
<div id="upload-gallery-image">
|
<div id="upload-gallery-image">
|
||||||
|
{* Drag & drop зона *}
|
||||||
|
<label for="upload-file" class="form-input-file form-input-file-media js-media-upload-area">
|
||||||
|
<span>Перетащите сюда файлы или кликните по этому тексту</span>
|
||||||
|
<input type="file" name="filedata" class="js-media-upload-file" id="upload-file" multiple>
|
||||||
|
</label>
|
||||||
|
|
||||||
<label for="upload-file" class="form-input-file form-input-file-media js-media-upload-area">
|
{* Галерея *}
|
||||||
<span>Перетащите сюда файлы или кликните по этому тексту</span>
|
<div class="modal-upload-image-gallery">
|
||||||
<input type="file" name="filedata" class="js-media-upload-file" id="upload-file" multiple>
|
<div id="media-empty" class="alert alert-empty">Нет загруженных файлов</div>
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="modal-upload-image-gallery">
|
{* Список файлов *}
|
||||||
|
<ul class="modal-upload-image-gallery-list js-media-upload-gallery-list"></ul>
|
||||||
|
|
||||||
<ul class="modal-upload-image-gallery-list js-media-upload-gallery-list">
|
{* Информация о выделенном файле *}
|
||||||
|
<div class="modal-upload-image-gallery-info js-media-item-info">
|
||||||
|
<div class="js-media-detail-area" style="display: none;">
|
||||||
|
{* Превью *}
|
||||||
|
<img src="" alt="" class="js-media-detail-preview" width="100" height="100">
|
||||||
|
|
||||||
</ul>
|
{* Информация *}
|
||||||
|
<ul class="mb-20">
|
||||||
|
<li><strong class="js-media-detail-name"></strong></li>
|
||||||
|
<li class="js-media-detail-date"></li>
|
||||||
|
<li><span class="js-media-detail-dimensions"></span>, <span class="js-media-detail-file-size"></span></li>
|
||||||
|
<li><a href="#" onclick="if (confirm('Удалить текущий файл?')) { ls.media.removeCurrentFile(); }; return false;">Удалить файл</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<div class="modal-upload-image-gallery-info">
|
{* Описание *}
|
||||||
<div class="js-media-detail-area" style="display: none;">
|
{include file='forms/form.field.text.tpl'
|
||||||
<img src="" alt="" class="js-media-detail-preview">
|
sFieldName = 'title'
|
||||||
<ul class="mb-20">
|
sFieldLabel = $aLang.uploadimg_title}
|
||||||
<li><strong class="js-media-detail-name"></strong></li>
|
</div>
|
||||||
<li class="js-media-detail-date"></li>
|
|
||||||
<li><span class="js-media-detail-dimensions"></span>, <span class="js-media-detail-file-size"></span></li>
|
|
||||||
<li><a href="#" onclick="if (confirm('Удалить текущий файл?')) { ls.media.removeCurrentFile(); }; return false;">Удалить файл</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
{* Title *}
|
{* Основные опции *}
|
||||||
{include file='forms/form.field.text.tpl'
|
<div class="js-media-settings-mode" id="media-settings-mode-insert" style="display: none;">
|
||||||
sFieldName = 'title'
|
Опции вставки
|
||||||
sFieldLabel = $aLang.uploadimg_title}
|
{* Выравнивание *}
|
||||||
</div>
|
<p>
|
||||||
|
<label>{$aLang.uploadimg_align}:</label>
|
||||||
|
<select name="align" class="width-full">
|
||||||
|
<option value="">{$aLang.uploadimg_align_no}</option>
|
||||||
|
<option value="left">{$aLang.uploadimg_align_left}</option>
|
||||||
|
<option value="right">{$aLang.uploadimg_align_right}</option>
|
||||||
|
<option value="center" selected="selected">{$aLang.uploadimg_align_center}</option>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="js-media-settings-mode" id="media-settings-mode-insert" style="display: none;">
|
{* Размер *}
|
||||||
Опции вставки
|
<p>
|
||||||
{* Align *}
|
<label>Размер:</label>
|
||||||
<p>
|
<select name="size" class="width-full">
|
||||||
<label>{$aLang.uploadimg_align}:</label>
|
{$aImageSizes = Config::Get('module.media.image_sizes')}
|
||||||
<select name="align" class="width-full">
|
{foreach $aImageSizes as $aSize}
|
||||||
<option value="">{$aLang.uploadimg_align_no}</option>
|
<option value="{$aSize.w}{if $aSize.crop}crop{/if}">{$aSize.w} × {if $aSize.h}{$aSize.h}{else}*{/if}</option>
|
||||||
<option value="left">{$aLang.uploadimg_align_left}</option>
|
{/foreach}
|
||||||
<option value="right">{$aLang.uploadimg_align_right}</option>
|
<option value="original">Оригинал</option>
|
||||||
<option value="center" selected="selected">{$aLang.uploadimg_align_center}</option>
|
</select>
|
||||||
</select>
|
</p>
|
||||||
</p>
|
</div>
|
||||||
<p>
|
|
||||||
{$aImageSizes=Config::Get('module.media.image_sizes')}
|
{* Опции фотосета *}
|
||||||
<label>Размер:</label>
|
<div class="js-media-settings-mode" id="media-settings-mode-create-photoset" style="display: none;">
|
||||||
<select name="size" class="width-full">
|
Опции фотосета
|
||||||
{foreach $aImageSizes as $aSize}
|
<br><br>
|
||||||
<option value="{$aSize.w}{if $aSize.crop}crop{/if}">{$aSize.w} × {if $aSize.h}{$aSize.h}{else}*{/if}</option>
|
|
||||||
{/foreach}
|
{include file='forms/form.field.checkbox.tpl'
|
||||||
<option value="original">Оригинал</option>
|
sFieldName = 'use_thumbs'
|
||||||
</select>
|
bFieldChecked = true
|
||||||
</p>
|
sFieldLabel = 'Показывать ленту с превьюшками'}
|
||||||
|
|
||||||
|
{include file='forms/form.field.checkbox.tpl'
|
||||||
|
sFieldName = 'show_caption'
|
||||||
|
sFieldLabel = 'Показывать описания фотографий'}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="js-media-settings-mode" id="media-settings-mode-create-photoset" style="display: none;">
|
|
||||||
Опции фотосета
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -15,19 +15,10 @@
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
jQuery(function($){
|
jQuery(function($){
|
||||||
$('.js-tab-show-gallery').on('tabbeforeactivate',function(event,tab){
|
ls.media.init({
|
||||||
$('#upload-gallery-image').appendTo($('#'+tab.options.target).find('.modal-content'));
|
|
||||||
ls.media.setMode($(event.target).data('mediaMode'));
|
|
||||||
});
|
|
||||||
|
|
||||||
ls.media.setMode('insert');
|
|
||||||
ls.media.initUpload({
|
|
||||||
target_type: {json var=$sMediaTargetType},
|
target_type: {json var=$sMediaTargetType},
|
||||||
target_id: {json var=$sMediaTargetId},
|
target_id: {json var=$sMediaTargetId},
|
||||||
target_tmp: {json var=$sMediaTargetTmp},
|
target_tmp: {json var=$sMediaTargetTmp}
|
||||||
fileupload: {
|
|
||||||
dropZone: $('.js-media-upload-area')
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -51,7 +42,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="submit" class="button button-primary" onclick="ls.media.submitInsert();">Вставить</button>
|
<button type="submit" class="button button-primary js-media-insert">Вставить</button>
|
||||||
<button type="button" class="button" data-type="modal-close">{$aLang.uploadimg_cancel}</button>
|
<button type="button" class="button" data-type="modal-close">{$aLang.uploadimg_cancel}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -96,7 +87,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="submit" class="button button-primary" onclick="ls.media.submitCreatePhotoset();">Создать фотосет</button>
|
<button type="submit" class="button button-primary js-media-insert-photoset">Создать фотосет</button>
|
||||||
<button type="button" class="button" data-type="modal-close">{$aLang.uploadimg_cancel}</button>
|
<button type="button" class="button" data-type="modal-close">{$aLang.uploadimg_cancel}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue