mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-07-01 05:55:02 +03:00
459 lines
14 KiB
JavaScript
459 lines
14 KiB
JavaScript
/**
|
||
* Работа с медиа файлами
|
||
*
|
||
* @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 || {};
|
||
|
||
ls.media = (function ($) {
|
||
/**
|
||
* Дефолтные опции
|
||
*
|
||
* @private
|
||
*/
|
||
var _defaults = {
|
||
// Селекторы
|
||
selectors: {
|
||
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'
|
||
},
|
||
info: {
|
||
self: '.js-media-info',
|
||
remove: '.js-media-item-info-remove',
|
||
create_preview: '.js-media-item-info-create-preview',
|
||
remove_preview: '.js-media-item-info-remove-preview',
|
||
sizes: 'select[name=size]',
|
||
empty: '.js-media-info-empty'
|
||
},
|
||
buttons_insert: '.js-media-insert-button',
|
||
button_insert: '.js-media-insert',
|
||
button_insert_photoset: '.js-media-insert-photoset',
|
||
modal: '#modal-image-upload'
|
||
},
|
||
// Роуты
|
||
routers: {
|
||
upload: aRouter['ajax'] + "media/upload/",
|
||
remove_file: aRouter['ajax'] + "media/remove-file/",
|
||
create_preview_file: aRouter['ajax'] + "media/create-preview-file/",
|
||
remove_preview_file: aRouter['ajax'] + "media/remove-preview-file/",
|
||
load_preview_items: aRouter['ajax'] + "media/load-preview-items/",
|
||
load_gallery: aRouter['ajax'] + "media/load-gallery/",
|
||
generate_target_tmp: aRouter['ajax'] + "media/generate-target-tmp/",
|
||
submit_insert: aRouter['ajax'] + "media/submit-insert/",
|
||
submit_photoset: aRouter['ajax'] + "media/submit-create-photoset/",
|
||
save_data_file: aRouter['ajax'] + "media/save-data-file/",
|
||
upload_link: aRouter['ajax'] + "media/upload-link/"
|
||
}
|
||
};
|
||
|
||
var _countCheckLink = 0;
|
||
|
||
var _blockCheckLink = -1;
|
||
|
||
/**
|
||
* Инициализация
|
||
*/
|
||
this.init = function(options) {
|
||
var _this = this;
|
||
|
||
this.options = $.extend(true, {}, _defaults, options);
|
||
|
||
this.elements = {
|
||
uploader: $('#media-uploader'),
|
||
buttonsInsert: $(this.options.selectors.buttons_insert),
|
||
buttonInsert: $(this.options.selectors.button_insert),
|
||
buttonInsertPhotoset: $(this.options.selectors.button_insert_photoset),
|
||
modal: $(this.options.selectors.modal),
|
||
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)
|
||
},
|
||
info: {
|
||
self: $(this.options.selectors.info.self),
|
||
remove: $(this.options.selectors.info.remove),
|
||
create_preview: $(this.options.selectors.info.create_preview),
|
||
remove_preview: $(this.options.selectors.info.remove_preview),
|
||
sizes: $(this.options.selectors.info.sizes),
|
||
empty: $(this.options.selectors.info.empty)
|
||
}
|
||
};
|
||
|
||
this.elements.uploader.lsUploader({
|
||
autoload: false,
|
||
params: {
|
||
security_ls_key: LIVESTREET_SECURITY_KEY
|
||
},
|
||
file_options: {
|
||
beforeactivate: function ( event, context ) {
|
||
_this.updateInsertSettings( context.element );
|
||
}
|
||
}
|
||
});
|
||
|
||
this.activateInfoBlock( 'insert' );
|
||
|
||
// Ивенты вставки в редактор
|
||
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 () {
|
||
var params = {
|
||
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')
|
||
}
|
||
this.insert(this.options.routers.submit_photoset, params);
|
||
}.bind(this));
|
||
|
||
// Перемещение галереи из одного таба в другой
|
||
$('.js-tab-show-gallery').on('tabactivate', function(event, tab) {
|
||
this.elements.uploader.appendTo( $( '#' + tab.options.target ).find( '.modal-content' ) );
|
||
this.elements.uploader.lsUploader( 'getElement', 'list' ).lsUploaderFileList( 'clearSelected' );
|
||
this.activateInfoBlock( $( event.target ).data( 'mediaMode' ) );
|
||
}.bind(this));
|
||
|
||
// После добавления комментария необходимо получить новый временный идентификатор и очистить галлерею
|
||
ls.hook.add('ls_comments_add_after',function(){
|
||
this.elements.uploader.lsUploader( 'generateTargetTmp' ).lsUploader( 'markAsEmpty' );
|
||
this.elements.uploader.lsUploader( 'getElement', 'list' ).lsUploaderFileList( 'empty' );
|
||
}.bind(this));
|
||
|
||
// Проверка корректности урла при вставке ссылки на медиа-объект
|
||
this.elements.link.url.on('input', function() {
|
||
this.checkLinkUrl(this.elements.link.url.val());
|
||
}.bind(this));
|
||
|
||
// Вставка медиа ссылки в текст
|
||
this.elements.link.insertButton.on('click', function() {
|
||
var sTitle = ls.utils.escapeHtml( this.elements.link.title.val() ),
|
||
sTextInsert;
|
||
|
||
if ($('.js-media-link-settings-image').is(':visible')) {
|
||
var sAlign = this.elements.link.align.val();
|
||
sAlign = sAlign == 'center' ? 'class="image-center"' : 'align="' + sAlign + '"';
|
||
sTextInsert = '<img src="' + this.elements.link.url.val() + '" title="' + sTitle + '" ' + sAlign + ' />';
|
||
} else {
|
||
sTextInsert = '<a href="'+this.elements.link.url.val() + '">' + sTitle + '</a>';
|
||
}
|
||
|
||
this.insertTextToEditor(sTextInsert);
|
||
this.elements.modal.lsModal('hide');
|
||
}.bind(this));
|
||
|
||
// Загрузка медиа файлы по ссылке
|
||
this.elements.link.uploadButton.on('click', function() {
|
||
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.lsModal('hide');
|
||
this.elements.uploader.lsUploader( 'getElement', 'list' ).lsUploaderFileList( 'load' );
|
||
}
|
||
}.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));
|
||
|
||
// Создание превью из файла
|
||
this.elements.info.create_preview.on('click', function(e) {
|
||
ls.media.createPreviewActiveFile();
|
||
e.preventDefault();
|
||
}.bind(this));
|
||
|
||
// Удаление превью
|
||
this.elements.info.remove_preview.on('click', function(e) {
|
||
ls.media.removePreviewActiveFile();
|
||
e.preventDefault();
|
||
}.bind(this));
|
||
|
||
// После показа модального подгружаем контент
|
||
this.elements.modal.on('modalaftershow', function() {
|
||
this.elements.uploader.lsUploader( 'getElement', 'list' ).lsUploaderFileList( 'load' );
|
||
}.bind(this));
|
||
};
|
||
|
||
|
||
//
|
||
// Загрузка по ссылки
|
||
//
|
||
|
||
/**
|
||
* Проверка корректности ссылки на медиа
|
||
*
|
||
* @param url
|
||
*/
|
||
this.checkLinkUrl = function(url) {
|
||
// TODO: здесь нужно показывать спинер загрузки в инпуте
|
||
|
||
_countCheckLink++;
|
||
this.checkLinkUrlImage(url, function(src, result) {
|
||
if ( ! result) {
|
||
// если не изображение, то проверяем на другой тип, например, видео
|
||
|
||
// разрешаем скрытие настроек только след итерациям после успешной проверки
|
||
if (_blockCheckLink < _countCheckLink) {
|
||
this.hideSettingsLinkImage();
|
||
}
|
||
} else {
|
||
_blockCheckLink = _countCheckLink;
|
||
this.showSettingsLinkImage(src);
|
||
}
|
||
}.bind(this));
|
||
};
|
||
|
||
/**
|
||
* Проверка на корректность ссылки на изображение
|
||
*
|
||
* @param url
|
||
* @param callback
|
||
*/
|
||
this.checkLinkUrlImage = function(url, callback) {
|
||
var _this = this;
|
||
|
||
$('<img>', {
|
||
src: url,
|
||
error: function() {
|
||
callback.call(_this, this.src, false);
|
||
},
|
||
load: function() {
|
||
callback.call(_this, this.src, true);
|
||
}
|
||
});
|
||
};
|
||
|
||
/**
|
||
* Вставка по ссылке - Показывает настройки изображения
|
||
*
|
||
* @param src Ссылка на изображения
|
||
*/
|
||
this.showSettingsLinkImage = function(src) {
|
||
this.elements.link.uploadButton.prop('disabled', false);
|
||
$('.js-media-link-settings-image-preview').attr('src', src);
|
||
$('.js-media-link-settings-image').show();
|
||
};
|
||
|
||
/**
|
||
* Вставка по ссылке - Скрывает настройки изображения
|
||
*/
|
||
this.hideSettingsLinkImage = function() {
|
||
this.elements.link.uploadButton.prop('disabled', true);
|
||
$('.js-media-link-settings-image').hide();
|
||
};
|
||
|
||
|
||
|
||
//
|
||
// Превью
|
||
//
|
||
|
||
/**
|
||
* Создание превью из активного файла
|
||
*/
|
||
this.createPreviewActiveFile = function() {
|
||
var file = this._getActiveFile();
|
||
|
||
return file.length ? this.createPreviewFile( file.lsUploaderFile( 'getProperty', 'id' ) ) : false;
|
||
};
|
||
|
||
/**
|
||
* Удаление превью у активного файла
|
||
*/
|
||
this.removePreviewActiveFile = function() {
|
||
var file = this._getActiveFile();
|
||
|
||
return file.length ? this.removePreviewFile( file.lsUploaderFile( 'getProperty', 'id' ) ) : false;
|
||
};
|
||
|
||
/**
|
||
* Создание превью
|
||
*
|
||
* @param {Number} id
|
||
*/
|
||
this.createPreviewFile = function( id ) {
|
||
ls.ajax.load(
|
||
this.options.routers.create_preview_file,
|
||
{
|
||
id: id,
|
||
target_type: this.options.target_type,
|
||
target_id: this.options.target_id,
|
||
target_tmp: this.options.target_tmp
|
||
},
|
||
function( response ) {
|
||
if ( response.bStateError ) {
|
||
ls.msg.error( null, response.sMsg );
|
||
} else {
|
||
if ( response.bUnsetOther ) {
|
||
this.elements.uploader
|
||
.lsUploader( 'getElement', 'list' )
|
||
.lsUploaderFileList( 'getFiles' )
|
||
.lsUploaderFile( 'setProperty', 'media_relation_is_preview', false );
|
||
}
|
||
|
||
var file = this.elements.uploader.lsUploader( 'getElement', 'list' ).lsUploaderFileList( 'getFileById', id );
|
||
|
||
file.lsUploaderFileList( 'setProperty', 'media_relation_is_preview', true );
|
||
|
||
// Обновляем отображение информации
|
||
this.showDetail( file );
|
||
this.loadPreviewItems();
|
||
}
|
||
}.bind( this )
|
||
);
|
||
};
|
||
|
||
/**
|
||
* Удаление превью
|
||
*
|
||
* @param {Number} id
|
||
*/
|
||
this.removePreviewFile = function( id ) {
|
||
ls.ajax.load(
|
||
this.options.routers.remove_preview_file,
|
||
{
|
||
id: id,
|
||
target_type: this.options.target_type,
|
||
target_id: this.options.target_id,
|
||
target_tmp: this.options.target_tmp
|
||
},
|
||
function( response ) {
|
||
if ( response.bStateError ) {
|
||
ls.msg.error( null, response.sMsg );
|
||
} else {
|
||
var file = this.elements.uploader.lsUploader( 'getElement', 'list' ).lsUploaderFileList( 'getFileById', id );
|
||
|
||
file.lsUploaderFileList( 'setProperty', 'media_relation_is_preview', false );
|
||
|
||
// Обновляем отображение информации
|
||
this.showDetail( file );
|
||
this.loadPreviewItems();
|
||
}
|
||
}.bind( this ));
|
||
};
|
||
|
||
/**
|
||
* Подгрузка превьюшек
|
||
*/
|
||
this.loadPreviewItems = function() {
|
||
ls.ajax.load(
|
||
this.options.routers.load_preview_items,
|
||
{
|
||
target_type: this.options.target_type,
|
||
target_id: this.options.target_id,
|
||
target_tmp: this.options.target_tmp
|
||
},
|
||
function( response ) {
|
||
this.renderPreviewItems( response.sTemplatePreview );
|
||
}.bind( this )
|
||
);
|
||
};
|
||
|
||
/**
|
||
* Отображение превьюшек
|
||
*/
|
||
this.renderPreviewItems = function( html ) {
|
||
$( '#tab-media-preview' ).find( '.modal-content' ).html( html );
|
||
};
|
||
|
||
|
||
|
||
//
|
||
// Вставка
|
||
//
|
||
|
||
/**
|
||
* Вставка файлов в редактор
|
||
*/
|
||
this.insert = function( url, params ) {
|
||
var files = this.elements.uploader.lsUploader( 'getElement', 'list' ).lsUploaderFileList( 'getSelectedFiles' );
|
||
|
||
if ( ! files.length ) return false;
|
||
|
||
/* Формируем список ID элементов */
|
||
var ids = $.map(files, function (value, index) {
|
||
return $(value).data('mediaId');
|
||
});
|
||
|
||
ls.ajax.load( url, $.extend( true, {}, { ids: ids }, params ), function( response ) {
|
||
if ( response.bStateError ) {
|
||
ls.msg.error( response.sMsgTitle, response.sMsg );
|
||
} else {
|
||
this.insertTextToEditor( response.sTextResult );
|
||
this.elements.modal.lsModal( 'hide' );
|
||
}
|
||
}.bind( this ));
|
||
};
|
||
|
||
/**
|
||
* Вставляет текст в редактор
|
||
* @param {String} text Текст
|
||
*/
|
||
this.insertTextToEditor = function( text ) {
|
||
$.markItUp({
|
||
replaceWith: text
|
||
});
|
||
};
|
||
|
||
|
||
|
||
//
|
||
// Блоки
|
||
//
|
||
|
||
/**
|
||
* Устанавливает текущий режим вставки медиа файлов
|
||
*/
|
||
this.activateInfoBlock = function( name ) {
|
||
var blocks = $( '.js-media-info-block' ).hide();
|
||
|
||
blocks.filter( '[data-type=' + name + ']' ).show();
|
||
};
|
||
|
||
/**
|
||
* Показывает блок с информацией об активном файле
|
||
*
|
||
* @param {Object} item Выделенный файл
|
||
*/
|
||
this.updateInsertSettings = function( file ) {
|
||
if ( file.lsUploaderFile( 'getProperty', 'type' ) === '1' ) {
|
||
// Выставляем настройки по вставке медиа
|
||
this.elements.info.sizes.find( 'option:not([value=original])' ).remove();
|
||
this.elements.info.sizes.append($.map( file.data('mediaImageSizes'), function ( v, k ) {
|
||
// Расчитываем пропорциональную высоту изображения
|
||
var height = v.h || parseInt( v.w * file.lsUploaderFile( 'getProperty', 'height' ) / file.lsUploaderFile( 'getProperty', 'width' ) );
|
||
|
||
return '<option value="' + v.w + 'x' + (v.h ? v.h : '') + (v.crop ? 'crop' : '') + '">' + v.w + ' × ' + height + '</option>';
|
||
}).join(''));
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Получает активный файл
|
||
*/
|
||
this._getActiveFile = function() {
|
||
return this.elements.uploader.lsUploader( 'getElement', 'list' ).lsUploaderFileList( 'getActiveFile' );
|
||
};
|
||
|
||
return this;
|
||
}).call(ls.media || {},jQuery); |