2013-12-25 14:19:33 +02:00
|
|
|
|
/**
|
2014-01-01 10:47:12 +02:00
|
|
|
|
* Работа с медиа файлами
|
2013-12-25 14:19:33 +02:00
|
|
|
|
*
|
|
|
|
|
* @module ls/media
|
|
|
|
|
*
|
|
|
|
|
* @license GNU General Public License, version 2
|
|
|
|
|
* @copyright 2013 OOO "ЛС-СОФТ" {@link http://livestreetcms.com}
|
|
|
|
|
* @author Denis Shakhov <denis.shakhov@gmail.com>
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
var ls = ls || {};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
ls.media = (function ($) {
|
|
|
|
|
/**
|
|
|
|
|
* Дефолтные опции
|
|
|
|
|
*
|
|
|
|
|
* @private
|
|
|
|
|
*/
|
2013-12-25 14:19:33 +02:00
|
|
|
|
var _defaults = {
|
|
|
|
|
target_type: '',
|
|
|
|
|
target_id: '',
|
|
|
|
|
target_tmp: '',
|
2014-01-01 10:47:12 +02:00
|
|
|
|
// Настройки загрузчика
|
|
|
|
|
fileupload: {
|
|
|
|
|
url: null,
|
|
|
|
|
sequentialUploads: false,
|
|
|
|
|
singleFileUploads: true,
|
|
|
|
|
limitConcurrentUploads: 3
|
|
|
|
|
},
|
|
|
|
|
// Селекторы
|
|
|
|
|
selectors: {
|
|
|
|
|
gallery: {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
self: '.js-media-gallery',
|
2014-01-01 10:47:12 +02:00
|
|
|
|
upload_area: '.js-media-upload-area',
|
|
|
|
|
upload_input: '.js-media-upload-file',
|
|
|
|
|
file_list: '.js-media-upload-gallery-list',
|
|
|
|
|
file: '.js-media-upload-gallery-item'
|
|
|
|
|
},
|
2014-01-06 16:52:49 +02:00
|
|
|
|
link: {
|
|
|
|
|
form: '.js-media-link-form',
|
|
|
|
|
url: 'input[name=url]',
|
|
|
|
|
title: 'input[name=title]',
|
|
|
|
|
align: 'select[name=align]',
|
|
|
|
|
insertButton: '.js-media-link-insert-button',
|
|
|
|
|
uploadButton: '.js-media-link-upload-button'
|
|
|
|
|
},
|
2014-01-06 10:12:13 +02:00
|
|
|
|
info: {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
self: '.js-media-item-info',
|
|
|
|
|
remove: '.js-media-item-info-remove',
|
|
|
|
|
sizes: 'select[name=size]',
|
|
|
|
|
empty: '.js-media-item-info-empty'
|
2014-01-06 10:12:13 +02:00
|
|
|
|
},
|
|
|
|
|
buttons_insert: '.js-media-insert-button',
|
|
|
|
|
button_insert: '.js-media-insert',
|
|
|
|
|
button_insert_photoset: '.js-media-insert-photoset',
|
|
|
|
|
modal: '#modal-image-upload'
|
2014-01-01 10:47:12 +02:00
|
|
|
|
},
|
|
|
|
|
// Классы
|
|
|
|
|
classes: {
|
2014-01-06 10:12:13 +02:00
|
|
|
|
selected: 'is-selected',
|
|
|
|
|
progress: {
|
|
|
|
|
value: 'js-progress-value',
|
|
|
|
|
info: 'js-progress-info'
|
|
|
|
|
}
|
2014-01-01 10:47:12 +02:00
|
|
|
|
},
|
|
|
|
|
// Роуты
|
|
|
|
|
routers: {
|
|
|
|
|
upload: aRouter['ajax'] + "media/upload/",
|
|
|
|
|
remove_file: aRouter['ajax'] + "media/remove-file/",
|
|
|
|
|
load_gallery: aRouter['ajax'] + "media/load-gallery/",
|
|
|
|
|
generate_target_tmp: aRouter['ajax'] + "media/generate-target-tmp/",
|
|
|
|
|
submit_insert: aRouter['ajax'] + "media/submit-insert/",
|
2014-01-01 11:00:27 +02:00
|
|
|
|
submit_photoset: aRouter['ajax'] + "media/submit-create-photoset/",
|
2014-01-06 16:52:49 +02:00
|
|
|
|
save_data_file: aRouter['ajax'] + "media/save-data-file/",
|
|
|
|
|
upload_link: aRouter['ajax'] + "media/upload-link/"
|
2014-01-01 10:47:12 +02:00
|
|
|
|
},
|
|
|
|
|
// HTML
|
|
|
|
|
html: {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
progress: '<div class="progress"><div class="progress-value js-progress-value"></div><span class="progress-info js-progress-info">0%</span></div>'
|
|
|
|
|
},
|
|
|
|
|
// Дефолтная высота списка файлов
|
|
|
|
|
file_list_max_height: 354
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-08 07:15:24 +02:00
|
|
|
|
var _countCheckLink = 0;
|
|
|
|
|
|
|
|
|
|
var _blockCheckLink = -1;
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
this.mode = 'insert';
|
2013-12-25 14:19:33 +02:00
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Инициализация
|
|
|
|
|
*/
|
|
|
|
|
this.init = function(options) {
|
2013-12-25 14:19:33 +02:00
|
|
|
|
this.options = $.extend(true, {}, _defaults, options);
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
this.elements = {
|
2014-01-06 10:12:13 +02:00
|
|
|
|
uploadArea: $(this.options.selectors.gallery.upload_area),
|
|
|
|
|
uploadInput: $(this.options.selectors.gallery.upload_input),
|
|
|
|
|
buttonsInsert: $(this.options.selectors.buttons_insert),
|
|
|
|
|
buttonInsert: $(this.options.selectors.button_insert),
|
2014-01-01 10:47:12 +02:00
|
|
|
|
buttonInsertPhotoset: $(this.options.selectors.button_insert_photoset),
|
2014-01-06 10:12:13 +02:00
|
|
|
|
modal: $(this.options.selectors.modal),
|
2014-01-01 10:47:12 +02:00
|
|
|
|
gallery: {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
self: $(this.options.selectors.gallery.self),
|
2014-01-01 10:47:12 +02:00
|
|
|
|
fileList: $(this.options.selectors.gallery.file_list)
|
2014-01-06 10:12:13 +02:00
|
|
|
|
},
|
2014-01-06 16:52:49 +02:00
|
|
|
|
link: {
|
|
|
|
|
url: $(this.options.selectors.link.form).find(this.options.selectors.link.url),
|
|
|
|
|
align: $(this.options.selectors.link.form).find(this.options.selectors.link.align),
|
|
|
|
|
title: $(this.options.selectors.link.form).find(this.options.selectors.link.title),
|
|
|
|
|
insertButton: $(this.options.selectors.link.insertButton),
|
|
|
|
|
uploadButton: $(this.options.selectors.link.uploadButton)
|
|
|
|
|
},
|
2014-01-06 10:12:13 +02:00
|
|
|
|
info: {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
self: $(this.options.selectors.info.self),
|
|
|
|
|
remove: $(this.options.selectors.info.remove),
|
|
|
|
|
sizes: $(this.options.selectors.info.sizes),
|
|
|
|
|
empty: $(this.options.selectors.info.empty)
|
2014-01-01 10:47:12 +02:00
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
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 ) {
|
2013-12-25 14:19:33 +02:00
|
|
|
|
ls.media.generateTargetTmp(this.options.target_type);
|
|
|
|
|
}
|
|
|
|
|
|
2014-01-06 10:12:13 +02:00
|
|
|
|
this.elements.buttonsInsert.prop('disabled', true);
|
2014-01-06 16:52:49 +02:00
|
|
|
|
this.elements.link.uploadButton.prop('disabled', true);
|
2014-01-06 10:12:13 +02:00
|
|
|
|
this.elements.info.empty.show();
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
// Настройки загрузчика
|
2014-01-06 10:12:13 +02:00
|
|
|
|
this.options.fileupload.url = this.options.fileupload.url || this.options.routers.upload;
|
2014-01-01 10:47:12 +02:00
|
|
|
|
this.options.fileupload.dropZone = this.options.fileupload.dropZone || this.elements.uploadArea;
|
|
|
|
|
this.options.fileupload.formData = $.extend({}, this.options.fileupload.formData || {}, {
|
2013-12-25 14:19:33 +02:00
|
|
|
|
security_ls_key: LIVESTREET_SECURITY_KEY,
|
2014-01-01 10:47:12 +02:00
|
|
|
|
target_type: this.options.target_type,
|
|
|
|
|
target_id: this.options.target_id,
|
|
|
|
|
target_tmp: this.options.target_tmp
|
2013-12-25 14:19:33 +02:00
|
|
|
|
});
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
$.each(this.options.fileupload.formData, function(k, v) {
|
|
|
|
|
if (v === null) this.options.fileupload.formData[k] = '';
|
2014-01-01 13:26:39 +02:00
|
|
|
|
}.bind(this));
|
2013-12-25 14:19:33 +02:00
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
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) {
|
2014-01-06 10:12:13 +02:00
|
|
|
|
var percent = parseInt(data.loaded / data.total * 100, 10);
|
|
|
|
|
|
|
|
|
|
data.context.find('.' + this.options.classes.progress.value).height( percent + '%' );
|
|
|
|
|
data.context.find('.' + this.options.classes.progress.info).text( percent + '%' );
|
2014-01-01 10:47:12 +02:00
|
|
|
|
}.bind(this)
|
2013-12-25 14:19:33 +02:00
|
|
|
|
});
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
|
|
|
|
// Ивенты вставки в редактор
|
|
|
|
|
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()
|
2013-12-25 14:19:33 +02:00
|
|
|
|
}
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
|
|
|
|
this.insert(this.options.routers.submit_insert, params);
|
|
|
|
|
}.bind(this));
|
|
|
|
|
|
|
|
|
|
this.elements.buttonInsertPhotoset.on('click', function () {
|
|
|
|
|
var params = {
|
2014-01-15 11:51:35 +02:00
|
|
|
|
use_thumbs: $('#media-settings-mode-create-photoset').find('input[name=use_thumbs]').is(':checked'),
|
|
|
|
|
show_caption: $('#media-settings-mode-create-photoset').find('input[name=show_caption]').is(':checked')
|
2014-01-01 10:47:12 +02:00
|
|
|
|
}
|
|
|
|
|
this.insert(this.options.routers.submit_photoset, params);
|
|
|
|
|
}.bind(this));
|
|
|
|
|
|
|
|
|
|
// Перемещение галереи из одного таба в другой
|
2014-01-08 07:15:24 +02:00
|
|
|
|
$('.js-tab-show-gallery').on('tabactivate', function(event, tab) {
|
2014-01-01 10:47:12 +02:00
|
|
|
|
$('#upload-gallery-image').appendTo($('#' + tab.options.target).find('.modal-content'));
|
|
|
|
|
ls.media.setMode($(event.target).data('mediaMode'));
|
2013-12-25 14:19:33 +02:00
|
|
|
|
});
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
// Сохранение настроек файла
|
|
|
|
|
$('.js-media-detail-area .js-input-title').on('blur', function(e) {
|
|
|
|
|
this.saveDataFile($(e.currentTarget).attr('name'),$(e.currentTarget).val());
|
|
|
|
|
}.bind(this));
|
|
|
|
|
|
2014-01-15 14:00:01 +02:00
|
|
|
|
// Инициализация фоторамы при предпросмотре топика
|
2014-01-05 15:28:53 +02:00
|
|
|
|
ls.hook.add('ls_topic_preview_after',function(){
|
|
|
|
|
$('.fotorama').fotorama();
|
|
|
|
|
});
|
|
|
|
|
|
2014-01-15 14:00:01 +02:00
|
|
|
|
// Инициализация фоторамы после обновления комментов
|
|
|
|
|
ls.hook.add('ls_comments_load_after',function(){
|
|
|
|
|
$('.fotorama').fotorama();
|
|
|
|
|
}.bind(this));
|
|
|
|
|
|
|
|
|
|
// После добавления комментария необходимо получить новый временный идентификатор и очистить галлерею
|
|
|
|
|
ls.hook.add('ls_comments_add_after',function(){
|
|
|
|
|
this.options.target_id='';
|
|
|
|
|
this.options.target_tmp='';
|
|
|
|
|
ls.media.generateTargetTmp(this.options.target_type);
|
|
|
|
|
this.clearSelected();
|
|
|
|
|
this.elements.gallery.fileList.empty();
|
|
|
|
|
this.markAsEmpty();
|
|
|
|
|
}.bind(this));
|
|
|
|
|
|
|
|
|
|
// Инициализация фоторамы при предпросмотре
|
|
|
|
|
ls.hook.inject([ls.utilities,'textPreview'], function() {
|
|
|
|
|
$('.fotorama').fotorama();
|
|
|
|
|
},'textPreviewDisplayAfter');
|
|
|
|
|
|
2014-01-06 16:52:49 +02:00
|
|
|
|
// Проверка корректности урла при вставке ссылки на медиа-объект
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.elements.link.url.on('input', function() {
|
2014-01-06 16:52:49 +02:00
|
|
|
|
this.checkLinkUrl(this.elements.link.url.val());
|
|
|
|
|
}.bind(this));
|
|
|
|
|
|
|
|
|
|
// Вставка медиа ссылки в текст
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.elements.link.insertButton.on('click', function() {
|
|
|
|
|
var sTitle = this.elements.link.title.val(),
|
|
|
|
|
sTextInsert;
|
2014-01-06 16:52:49 +02:00
|
|
|
|
|
|
|
|
|
if ($('.js-media-link-settings-image').is(':visible')) {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
var sAlign = this.elements.link.align.val();
|
2014-01-06 16:52:49 +02:00
|
|
|
|
sAlign = sAlign == 'center' ? 'class="image-center"' : 'align="' + sAlign + '"';
|
2014-01-08 07:15:24 +02:00
|
|
|
|
sTextInsert = '<img src="' + this.elements.link.url.val() + '" title="' + sTitle + '" ' + sAlign + ' />';
|
2014-01-06 16:52:49 +02:00
|
|
|
|
} else {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
sTextInsert = '<a href="'+this.elements.link.url.val() + '">' + sTitle + '</a>';
|
2014-01-06 16:52:49 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.insertTextToEditor(sTextInsert);
|
|
|
|
|
this.elements.modal.modal('hide');
|
|
|
|
|
}.bind(this));
|
|
|
|
|
|
|
|
|
|
// Загрузка медиа файлы по ссылке
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.elements.link.uploadButton.on('click', function() {
|
2014-01-06 16:52:49 +02:00
|
|
|
|
ls.ajax.submit(this.options.routers.upload_link, $('.js-media-link-form'), function (data){
|
|
|
|
|
if (data.bStateError) {
|
|
|
|
|
ls.msg.error(data.sMsgTitle,data.sMsg);
|
|
|
|
|
} else {
|
|
|
|
|
this.insertTextToEditor(data.sText);
|
|
|
|
|
this.elements.modal.modal('hide');
|
|
|
|
|
this.loadImageList(); // обновляем список файлов
|
|
|
|
|
}
|
|
|
|
|
}.bind(this), {
|
|
|
|
|
// TODO: Fix validation
|
|
|
|
|
validate: false,
|
|
|
|
|
submitButton: this.elements.link.uploadButton,
|
|
|
|
|
params: { target_type: this.options.target_type, target_id: this.options.target_id, target_tmp: this.options.target_tmp }
|
|
|
|
|
});
|
|
|
|
|
}.bind(this));
|
|
|
|
|
|
2014-01-08 07:15:24 +02:00
|
|
|
|
// Удаление файла
|
|
|
|
|
this.elements.info.remove.on('click', function(e) {
|
|
|
|
|
if (confirm('Удалить текущий файл?')) {
|
|
|
|
|
ls.media.removeActiveFile();
|
|
|
|
|
}
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
}.bind(this));
|
|
|
|
|
|
2014-02-10 13:12:21 +02:00
|
|
|
|
// После показа модального подгружаем контент
|
|
|
|
|
this.elements.modal.on('modalaftershow',function(){
|
|
|
|
|
this.loadImageList();
|
|
|
|
|
}.bind(this));
|
|
|
|
|
|
2013-12-25 14:19:33 +02:00
|
|
|
|
this.bindFileEvents();
|
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
2014-01-06 16:52:49 +02:00
|
|
|
|
* Проверка корректности ссылки на медиа
|
|
|
|
|
*
|
|
|
|
|
* @param url
|
|
|
|
|
*/
|
|
|
|
|
this.checkLinkUrl = function(url) {
|
|
|
|
|
// TODO: здесь нужно показывать спинер загрузки в инпуте
|
|
|
|
|
|
2014-01-08 07:15:24 +02:00
|
|
|
|
_countCheckLink++;
|
|
|
|
|
this.checkLinkUrlImage(url, function(src, result) {
|
|
|
|
|
if ( ! result) {
|
2014-01-06 16:52:49 +02:00
|
|
|
|
// если не изображение, то проверяем на другой тип, например, видео
|
|
|
|
|
|
|
|
|
|
// разрешаем скрытие настроек только след итерациям после успешной проверки
|
2014-01-08 07:15:24 +02:00
|
|
|
|
if (_blockCheckLink < _countCheckLink) {
|
2014-01-06 16:52:49 +02:00
|
|
|
|
this.hideSettingsLinkImage();
|
|
|
|
|
}
|
|
|
|
|
} else {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
_blockCheckLink = _countCheckLink;
|
2014-01-06 16:52:49 +02:00
|
|
|
|
this.showSettingsLinkImage(src);
|
|
|
|
|
}
|
|
|
|
|
}.bind(this));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Проверка на корректность ссылки на изображение
|
|
|
|
|
*
|
|
|
|
|
* @param url
|
|
|
|
|
* @param callback
|
|
|
|
|
*/
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.checkLinkUrlImage = function(url, callback) {
|
|
|
|
|
var _this = this;
|
|
|
|
|
|
|
|
|
|
$('<img>', {
|
2014-01-06 16:52:49 +02:00
|
|
|
|
src: url,
|
|
|
|
|
error: function() {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
callback.call(_this, this.src, false);
|
2014-01-06 16:52:49 +02:00
|
|
|
|
},
|
|
|
|
|
load: function() {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
callback.call(_this, this.src, true);
|
2014-01-06 16:52:49 +02:00
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2014-01-08 07:15:24 +02:00
|
|
|
|
/**
|
|
|
|
|
* Вставка по ссылке - Показывает настройки изображения
|
|
|
|
|
*
|
|
|
|
|
* @param src Ссылка на изображения
|
|
|
|
|
*/
|
2014-01-06 16:52:49 +02:00
|
|
|
|
this.showSettingsLinkImage = function(src) {
|
|
|
|
|
this.elements.link.uploadButton.prop('disabled', false);
|
2014-01-08 07:15:24 +02:00
|
|
|
|
$('.js-media-link-settings-image-preview').attr('src', src);
|
2014-01-06 16:52:49 +02:00
|
|
|
|
$('.js-media-link-settings-image').show();
|
|
|
|
|
};
|
|
|
|
|
|
2014-01-08 07:15:24 +02:00
|
|
|
|
/**
|
|
|
|
|
* Вставка по ссылке - Скрывает настройки изображения
|
|
|
|
|
*/
|
2014-01-06 16:52:49 +02:00
|
|
|
|
this.hideSettingsLinkImage = function() {
|
|
|
|
|
this.elements.link.uploadButton.prop('disabled', true);
|
|
|
|
|
$('.js-media-link-settings-image').hide();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Устанавливает текущий режим вставки медиа файлов
|
2014-01-01 10:47:12 +02:00
|
|
|
|
*/
|
|
|
|
|
this.setMode = function(mode) {
|
|
|
|
|
this.mode = mode;
|
|
|
|
|
this.showSettingsMode();
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.resizeFileList();
|
2014-01-01 10:47:12 +02:00
|
|
|
|
};
|
2013-12-25 14:19:33 +02:00
|
|
|
|
|
|
|
|
|
/**
|
2014-01-01 10:47:12 +02:00
|
|
|
|
* Показывает блок с информацией об активном файле
|
|
|
|
|
*
|
2014-01-06 10:12:13 +02:00
|
|
|
|
* @param {Object} item Выделенный файл
|
2013-12-25 14:19:33 +02:00
|
|
|
|
*/
|
2014-01-06 10:12:13 +02:00
|
|
|
|
this.showSettingsMode = function(item) {
|
|
|
|
|
this.hideSettingsMode();
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
|
|
|
|
/* Показываем только если есть выделенные элементы */
|
|
|
|
|
if (this.getSelected().length) {
|
|
|
|
|
$('#media-settings-mode-' + this.mode).show();
|
2014-01-08 07:15:24 +02:00
|
|
|
|
item = item || this.getActive();
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
|
|
|
|
/* Выставляем настройки по вставке медиа */
|
2014-01-06 10:12:13 +02:00
|
|
|
|
this.elements.info.sizes.find('option:not([value=original])').remove();
|
|
|
|
|
this.elements.info.sizes.append($.map(item.data('mediaImageSizes'), function (v, k) {
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/* Расчитываем пропорциональную высоту изображения */
|
2014-01-06 10:12:13 +02:00
|
|
|
|
var height = v.h || parseInt(v.w * item.data('mediaHeight') / item.data('mediaWidth'));
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
2014-02-17 09:13:47 +02:00
|
|
|
|
return '<option value="'+ v.w + 'x' + (v.h ? v.h : '') + (v.crop ? 'crop' : '') + '">' + v.w + ' × ' + height + '</option>';
|
2014-01-06 10:12:13 +02:00
|
|
|
|
}).join(''));
|
2014-01-01 10:47:12 +02:00
|
|
|
|
}
|
|
|
|
|
};
|
2013-12-25 14:19:33 +02:00
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
2014-01-06 16:52:49 +02:00
|
|
|
|
* Скрывает форму с настройками
|
2014-01-01 10:47:12 +02:00
|
|
|
|
*/
|
|
|
|
|
this.hideSettingsMode = function() {
|
|
|
|
|
$('.js-media-settings-mode').hide();
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Удаление активного файла
|
|
|
|
|
*/
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.removeActiveFile = function() {
|
|
|
|
|
var item = this.getActive();
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
2014-01-06 10:12:13 +02:00
|
|
|
|
return item.length ? this.removeFile(item.data('mediaId')) : false;
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Удаление файла
|
|
|
|
|
*
|
|
|
|
|
* @param {Number} id
|
|
|
|
|
*/
|
2013-12-25 14:19:33 +02:00
|
|
|
|
this.removeFile = function(id) {
|
2014-01-01 10:47:12 +02:00
|
|
|
|
var _this = this;
|
|
|
|
|
|
|
|
|
|
ls.ajax.load(this.options.routers.remove_file, { id: id }, function(result) {
|
2014-02-20 16:40:09 +02:00
|
|
|
|
if (result.bStateError) {
|
|
|
|
|
ls.msg.error(null, result.sMsg);
|
|
|
|
|
} else {
|
|
|
|
|
$(_this.options.selectors.gallery.file + '[data-media-id=' + id + ']').fadeOut(500, function() {
|
|
|
|
|
$(this).remove();
|
2013-12-25 14:19:33 +02:00
|
|
|
|
|
2014-02-20 16:40:09 +02:00
|
|
|
|
if (itemNext = _this.searchNextSelected()) {
|
|
|
|
|
_this.setActive(itemNext, true);
|
|
|
|
|
} else {
|
|
|
|
|
_this.hideDetail();
|
|
|
|
|
}
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
2014-02-20 16:40:09 +02:00
|
|
|
|
if ($(_this.options.selectors.gallery.file).length === 0) _this.markAsEmpty();
|
|
|
|
|
});
|
|
|
|
|
}
|
2013-12-25 14:19:33 +02:00
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Подгрузка списка файлов
|
|
|
|
|
*/
|
|
|
|
|
this.loadImageList = function() {
|
2014-01-15 14:00:01 +02:00
|
|
|
|
this.clearSelected();
|
2014-01-01 10:47:12 +02:00
|
|
|
|
this.elements.gallery.fileList.empty().addClass( ls.options.classes.states.loading );
|
|
|
|
|
|
2014-01-06 10:12:13 +02:00
|
|
|
|
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) {
|
2014-01-01 10:47:12 +02:00
|
|
|
|
this.elements.gallery.fileList.removeClass( ls.options.classes.states.loading ).html(result.sTemplate);
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this[result.sTemplate ? 'markAsNotEmpty' : 'markAsEmpty']();
|
2014-01-01 10:47:12 +02:00
|
|
|
|
}.bind(this));
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
*/
|
2013-12-25 14:19:33 +02:00
|
|
|
|
this.generateTargetTmp = function(type) {
|
2014-01-01 10:47:12 +02:00
|
|
|
|
ls.ajax.load(this.options.routers.generate_target_tmp, { type: type }, function(result) {
|
|
|
|
|
if (result.sTmpKey) this.options.target_tmp = result.sTmpKey;
|
2013-12-25 14:19:33 +02:00
|
|
|
|
}.bind(this));
|
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Индикация загрузки изображения
|
|
|
|
|
*/
|
2013-12-25 14:19:33 +02:00
|
|
|
|
this.addPreload = function(data) {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.markAsNotEmpty();
|
|
|
|
|
data.context = $('<li class="media-gallery-list-item">' + this.options.html.progress + '</li>');
|
2014-01-01 10:47:12 +02:00
|
|
|
|
this.elements.gallery.fileList.prepend(data.context);
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Выделение изображений
|
|
|
|
|
*/
|
2013-12-25 14:19:33 +02:00
|
|
|
|
this.bindFileEvents = function() {
|
2014-01-01 10:47:12 +02:00
|
|
|
|
this.elements.gallery.fileList.on('click', this.options.selectors.gallery.file, function(e){
|
2014-01-06 10:12:13 +02:00
|
|
|
|
var item = $(e.currentTarget);
|
2014-01-01 10:47:12 +02:00
|
|
|
|
var allowMany = (this.mode == 'create-photoset' || e.ctrlKey || e.metaKey);
|
|
|
|
|
|
2014-01-06 10:12:13 +02:00
|
|
|
|
if (item.hasClass(ls.options.classes.states.active)) {
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/* Снимаем выделение с текущего */
|
2014-01-06 10:12:13 +02:00
|
|
|
|
item.removeClass(ls.options.classes.states.active).removeClass(this.options.classes.selected);
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
|
|
|
|
/* Делаем активным другой выделенный элемент */
|
2014-01-06 10:12:13 +02:00
|
|
|
|
if (itemNext = this.searchNextSelected(item)) {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.setActive(itemNext,true);
|
2013-12-25 14:19:33 +02:00
|
|
|
|
} else {
|
|
|
|
|
this.hideDetail();
|
|
|
|
|
}
|
|
|
|
|
} else {
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/* Делаем текущим и показываем детальную информацию */
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.setActive(item,allowMany);
|
2013-12-25 14:19:33 +02:00
|
|
|
|
}
|
|
|
|
|
}.bind(this));
|
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
2014-01-08 07:15:24 +02:00
|
|
|
|
* Помечает галерею как пустую
|
2014-01-01 10:47:12 +02:00
|
|
|
|
*/
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.markAsEmpty = function() {
|
|
|
|
|
this.elements.gallery.self.addClass('is-empty');
|
2014-01-01 10:47:12 +02:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
2014-01-08 07:15:24 +02:00
|
|
|
|
* Помечает галерею как не пустую
|
2014-01-01 10:47:12 +02:00
|
|
|
|
*/
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.markAsNotEmpty = function() {
|
|
|
|
|
this.elements.gallery.self.removeClass('is-empty');
|
2014-01-01 10:47:12 +02:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Завершение загрузки файла
|
|
|
|
|
*/
|
|
|
|
|
this.onUploadDone = function(context, response) {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
var item = $($.trim(response.sTemplateFile));
|
2014-01-06 10:12:13 +02:00
|
|
|
|
|
|
|
|
|
context.replaceWith(item);
|
|
|
|
|
this.setSelected(item, true);
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Помечаем файл как ошибочный (глюк при загрузке)
|
|
|
|
|
*/
|
|
|
|
|
this.onUploadError = function(context, response) {
|
2014-01-06 10:12:13 +02:00
|
|
|
|
ls.msg.error(response.sMsgTitle, response.sMsg);
|
|
|
|
|
context.find('.' + this.options.classes.progress.value).height(0);
|
|
|
|
|
context.find('.' + this.options.classes.progress.info).text('ERROR');
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Ищет файл для выделения
|
|
|
|
|
*/
|
|
|
|
|
this.searchNextSelected = function() {
|
2014-01-06 10:12:13 +02:00
|
|
|
|
var item = $(this.options.selectors.gallery.file + '.' + this.options.classes.selected + ':first');
|
|
|
|
|
|
|
|
|
|
return item.length === 0 ? false : item;
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Помечает файл как активный
|
|
|
|
|
*
|
2014-01-06 10:12:13 +02:00
|
|
|
|
* @param {Object} item Помечаемый файл
|
2014-01-01 10:47:12 +02:00
|
|
|
|
* @param {Boolean} allowMany Выделение нескольких файлов
|
|
|
|
|
*/
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.setActive = function(item, allowMany) {
|
2014-01-01 10:47:12 +02:00
|
|
|
|
$(this.options.selectors.gallery.file + '.' + ls.options.classes.states.active).removeClass(ls.options.classes.states.active);
|
2014-01-06 10:12:13 +02:00
|
|
|
|
item.addClass(ls.options.classes.states.active);
|
|
|
|
|
this.setSelected(item, allowMany);
|
|
|
|
|
this.showDetail(item);
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.resizeFileList();
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Получает активный файл
|
|
|
|
|
*
|
|
|
|
|
* @return {Object} Активный файл
|
|
|
|
|
*/
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.getActive = function() {
|
2014-01-01 10:47:12 +02:00
|
|
|
|
return $(this.options.selectors.gallery.file + '.' + ls.options.classes.states.active);
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Выделяет файл
|
|
|
|
|
*
|
2014-01-06 10:12:13 +02:00
|
|
|
|
* @param {Object} item Выделяемый файл
|
2014-01-01 10:47:12 +02:00
|
|
|
|
* @param {Boolean} allowMany Выделение нескольких файлов
|
|
|
|
|
*/
|
2014-01-06 10:12:13 +02:00
|
|
|
|
this.setSelected = function(item, allowMany) {
|
2014-01-01 10:47:12 +02:00
|
|
|
|
if ( ! allowMany ) {
|
|
|
|
|
this.getSelected().removeClass(this.options.classes.selected);
|
2013-12-25 14:19:33 +02:00
|
|
|
|
}
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
2014-01-06 10:12:13 +02:00
|
|
|
|
item.addClass(this.options.classes.selected);
|
|
|
|
|
this.elements.buttonsInsert.prop('disabled', false);
|
|
|
|
|
this.elements.info.empty.hide();
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
|
|
|
|
/* Если нет еще нет активного элемента, то делаем активным текущий */
|
2014-01-08 07:15:24 +02:00
|
|
|
|
if (this.getActive().length === 0) {
|
|
|
|
|
this.setActive(item, allowMany);
|
2013-12-25 14:19:33 +02:00
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2014-01-15 14:00:01 +02:00
|
|
|
|
this.clearSelected = function() {
|
|
|
|
|
this.getSelected().removeClass(this.options.classes.selected);
|
|
|
|
|
this.getActive().removeClass(ls.options.classes.states.active);
|
|
|
|
|
this.hideDetail();
|
|
|
|
|
}
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Получает выделенные файлы
|
|
|
|
|
*
|
|
|
|
|
* @return {Array} Список выделенных файлов
|
|
|
|
|
*/
|
2013-12-25 14:19:33 +02:00
|
|
|
|
this.getSelected = function() {
|
2014-01-01 10:47:12 +02:00
|
|
|
|
return $(this.options.selectors.gallery.file + '.' + this.options.classes.selected);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
2014-01-06 10:12:13 +02:00
|
|
|
|
* Сохраняет настройки файла
|
|
|
|
|
*
|
|
|
|
|
* @param {String} name Имя переменной
|
|
|
|
|
* @param {String} value Значение переменной
|
2014-01-01 10:47:12 +02:00
|
|
|
|
*/
|
|
|
|
|
this.saveDataFile = function(name, value) {
|
2014-01-08 07:15:24 +02:00
|
|
|
|
var item = this.getActive();
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
2014-01-06 10:12:13 +02:00
|
|
|
|
if (item.length) {
|
|
|
|
|
var id = item.data('mediaId');
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
2014-01-01 11:00:27 +02:00
|
|
|
|
ls.ajax.load(this.options.routers.save_data_file, { name: name, value: value, id: id }, function(result) {
|
2014-02-21 08:41:37 +02:00
|
|
|
|
if (result.bStateError) {
|
|
|
|
|
ls.msg.error(result.sMsgTitle,result.sMsg);
|
|
|
|
|
} else {
|
|
|
|
|
$(this.options.selectors.gallery.file + '[data-media-id=' + id + ']').data('mediaData' + name.charAt(0).toUpperCase() + name.slice(1), value);
|
|
|
|
|
}
|
2014-01-01 11:00:27 +02:00
|
|
|
|
}.bind(this));
|
2014-01-01 10:47:12 +02:00
|
|
|
|
}
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
2014-01-08 07:15:24 +02:00
|
|
|
|
* Показывает общую информацию о файле
|
2014-01-01 10:47:12 +02:00
|
|
|
|
*/
|
2014-01-06 10:12:13 +02:00
|
|
|
|
this.showDetail = function(item) {
|
|
|
|
|
$('.js-media-detail-preview').attr('src', item.data('mediaPreview'));
|
|
|
|
|
$('.js-media-detail-name').html(item.data('mediaFileName'));
|
|
|
|
|
$('.js-media-detail-date').html(item.data('mediaDateAdd'));
|
|
|
|
|
$('.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-area .js-input-title').val(item.data('mediaDataTitle'));
|
2013-12-25 14:19:33 +02:00
|
|
|
|
$('.js-media-detail-area').show();
|
|
|
|
|
|
2014-01-06 10:12:13 +02:00
|
|
|
|
this.showSettingsMode(item);
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
*/
|
2013-12-25 14:19:33 +02:00
|
|
|
|
this.hideDetail = function() {
|
|
|
|
|
$('.js-media-detail-area').hide();
|
2014-01-06 10:12:13 +02:00
|
|
|
|
this.elements.buttonsInsert.prop('disabled', true);
|
|
|
|
|
this.elements.info.empty.show();
|
2013-12-25 14:19:33 +02:00
|
|
|
|
this.hideSettingsMode();
|
2014-01-08 07:15:24 +02:00
|
|
|
|
this.resizeFileList();
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 10:47:12 +02:00
|
|
|
|
/**
|
|
|
|
|
* Вставка файлов в редактор
|
|
|
|
|
*/
|
|
|
|
|
this.insert = function(url, params) {
|
2014-01-06 10:12:13 +02:00
|
|
|
|
var items = this.getSelected();
|
2013-12-25 14:19:33 +02:00
|
|
|
|
|
2014-01-06 10:12:13 +02:00
|
|
|
|
if ( ! items.length ) return false;
|
2014-01-01 10:47:12 +02:00
|
|
|
|
|
|
|
|
|
/* Формируем список ID элементов */
|
2014-01-06 10:12:13 +02:00
|
|
|
|
var aIds = $.map(items, function (value, index) {
|
|
|
|
|
return $(value).data('mediaId');
|
2013-12-25 14:19:33 +02:00
|
|
|
|
});
|
|
|
|
|
|
2014-01-06 10:12:13 +02:00
|
|
|
|
ls.ajax.load(url, $.extend(true, {}, { ids: aIds }, params), function(result) {
|
2013-12-25 14:19:33 +02:00
|
|
|
|
if (result.bStateError) {
|
|
|
|
|
ls.msg.error(result.sMsgTitle,result.sMsg);
|
|
|
|
|
} else {
|
2014-01-06 16:52:49 +02:00
|
|
|
|
this.insertTextToEditor(result.sTextResult);
|
2014-01-06 10:12:13 +02:00
|
|
|
|
this.elements.modal.modal('hide');
|
2013-12-25 14:19:33 +02:00
|
|
|
|
}
|
2014-01-06 10:12:13 +02:00
|
|
|
|
}.bind(this));
|
2013-12-25 14:19:33 +02:00
|
|
|
|
};
|
|
|
|
|
|
2014-01-08 07:15:24 +02:00
|
|
|
|
/**
|
|
|
|
|
* Вставляет текст в редактор
|
|
|
|
|
* @param {String} text Текст
|
|
|
|
|
*/
|
2014-01-06 16:52:49 +02:00
|
|
|
|
this.insertTextToEditor = function(text) {
|
|
|
|
|
$.markItUp({
|
|
|
|
|
replaceWith: text
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2014-01-08 07:15:24 +02:00
|
|
|
|
/**
|
|
|
|
|
* Ресайз списка файлов, чтобы его высота была не меньше блока с инфой
|
|
|
|
|
*/
|
|
|
|
|
this.resizeFileList = function() {
|
|
|
|
|
var fileListHeight = this.elements.gallery.fileList.outerHeight(),
|
|
|
|
|
infoHeight = this.elements.info.self.outerHeight();
|
|
|
|
|
|
|
|
|
|
this.elements.gallery.fileList.css({
|
|
|
|
|
'min-height' : fileListHeight <= infoHeight || ( fileListHeight > this.options.file_list_max_height && fileListHeight > infoHeight ) ? infoHeight : this.options.file_list_max_height
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2013-12-25 14:19:33 +02:00
|
|
|
|
return this;
|
|
|
|
|
}).call(ls.media || {},jQuery);
|