Доработка компонента Media

2024-07-01 05:55:02 +03:00 · 2014-09-10 13:57:50 +07:00 · 2014-09-10 13:57:50 +07:00 · 9518947519
parent 506b62fa67
commit 9518947519
12 changed files with 116 additions and 190 deletions
--- a/application/frontend/common/js/media.js
+++ b/application/frontend/common/js/media.js
@ -64,6 +64,8 @@ ls.media = (function ($) {
 	 * Инициализация
 	 */
 	this.init = function(options) {
+		var _this = this;
+
 		this.options = $.extend(true, {}, _defaults, options);

 		this.elements = {
@ -93,6 +95,11 @@ ls.media = (function ($) {
 			autoload: false,
 			params: {
 				security_ls_key: LIVESTREET_SECURITY_KEY
+			},
+			file_options: {
+				beforeactivate: function ( event, context ) {
+					_this.updateInsertSettings( context.element );
+				}
 			}
 		});

@ -123,11 +130,6 @@ ls.media = (function ($) {
 			this.activateInfoBlock( $( event.target ).data( 'mediaMode' ) );
 		}.bind(this));

-		// Инициализация фоторамы
-		$( '.fotorama' ).livequery(function() {
-			$( this ).fotorama();
-		});
-
 		// После добавления комментария необходимо получить новый временный идентификатор и очистить галлерею
 		ls.hook.add('ls_comments_add_after',function(){
 			this.elements.uploader.lsUploader( 'generateTargetTmp' ).lsUploader( 'markAsEmpty' );
@ -433,15 +435,13 @@ ls.media = (function ($) {
 	 *
 	 * @param  {Object} item Выделенный файл
 	 */
-	this.updateInsertSettings = function() {
-		var file = this._getActiveFile();
-
-		if ( file.length && file.lsUploaderFile( 'getProperty', 'type' ) === 1 ) {
+	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 ) {
+			this.elements.info.sizes.append($.map( file.data('mediaImageSizes'), function ( v, k ) {
 				// Расчитываем пропорциональную высоту изображения
-				var height = v.h || parseInt( v.w * file.data('mediaHeight') / file.data('mediaWidth') );
+				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(''));
--- a/application/frontend/i18n/ru.php
+++ b/application/frontend/i18n/ru.php
@ -1675,7 +1675,14 @@ return array(
 		),

 		'info' => array(
-			'empty' => 'Выберите файл'
+			'empty' => 'Выберите файл',
+
+			'types' => array(
+				'image' => array(
+					'dimensions' => 'Разрешение',
+					'title'      => 'Описание'
+				)
+			)
 		)
 	),

@ -1691,28 +1698,62 @@ return array(
 			'photoset' => 'Создать фотосет',
 			'url'      => 'Вставить по ссылке',
 			'preview'  => 'Превью',
-		)
-	),
+		),

-	'uploadimg' => 'Вставка изображения',
-	'uploadimg_from_pc' => 'С компьютера',
-	'uploadimg_from_link' => 'Из интернета',
-	'uploadimg_file' => 'Файл',
-	'uploadimg_file_error' => 'Невозможно обработать файл, проверьте тип и размер файла',
-	'uploadimg_url' => 'Ссылка на изображение',
-	'uploadimg_url_error_type' => 'Файл не является изображением',
-	'uploadimg_url_error_read' => 'Невозможно прочитать внешний файл',
-	'uploadimg_url_error_size' => 'Размер файла превышает максимальный в 500кБ',
-	'uploadimg_url_error' => 'Невозможно обработать внешний файл',
-	'uploadimg_align' => 'Выравнивание',
-	'uploadimg_align_no' => 'нет',
-	'uploadimg_align_left' => 'слева',
-	'uploadimg_align_right' => 'справа',
-	'uploadimg_align_center' => 'по центру',
-	'uploadimg_submit' => 'Загрузить',
-	'uploadimg_link_submit_load' => 'Загрузить',
-	'uploadimg_link_submit_paste' => 'Вставить как ссылку',
-	'uploadimg_title' => 'Описание',
+		'image_align' => array(
+			'title'  => 'Выравнивание',
+			'no'     => 'Нет',
+			'left'   => 'Слева',
+			'right'  => 'Справа',
+			'center' => 'По центру',
+		),
+
+		'insert' => array(
+			'submit'  => 'Вставить',
+
+			'settings' => array(
+				'title' => 'Опции вставки',
+
+				'fields' => array(
+					'size' => array(
+						'label'    => 'Размер',
+						'original' => 'Оригинал'
+					),
+				)
+			),
+		),
+
+		'photoset' => array(
+			'submit'  => 'Создать фотосет',
+
+			'settings' => array(
+				'title' => 'Опции фотосета',
+
+				'fields' => array(
+					'use_thumbs' => array(
+						'label' => 'Показывать ленту с превьюшками'
+					),
+					'show_caption' => array(
+						'label' => 'Показывать описания фотографий'
+					)
+				)
+			),
+		),
+
+		'url' => array(
+			'fields' => array(
+				'url' => array(
+					'label'  => 'Ссылка',
+				),
+				'title' => array(
+					'label'  => 'Описание',
+				),
+			),
+
+			'submit_insert' => 'Вставить как ссылку',
+			'submit_upload' => 'Загрузить и вставить'
+		),
+	),


 	/**
--- a/application/frontend/skin/developer/assets/js/init.js
+++ b/application/frontend/skin/developer/assets/js/init.js
@ -387,6 +387,14 @@ jQuery(document).ready(function($){
 	ls.search.init();


+	/**
+	 * Fotorama
+	 */
+	$( '.fotorama' ).livequery(function() {
+		$( this ).fotorama();
+	});
+
+
 	// Временный костыль для сабмита форм
 	// TODO: Перенести в плагин button
 	$(document).on('click', 'button[data-button-submit-form]', function () {
--- a/application/frontend/skin/developer/components/media/media.tpl
+++ b/application/frontend/skin/developer/components/media/media.tpl
@ -1,9 +1,9 @@
 {* Массив со значениями для селекта Выравнивание *}
-{$aSelectImageAlign = [
-	[ 'value' => '',       'text' => $aLang.uploadimg_align_no ],
-	[ 'value' => 'left',   'text' => $aLang.uploadimg_align_left ],
-	[ 'value' => 'right',  'text' => $aLang.uploadimg_align_right ],
-	[ 'value' => 'center', 'text' => $aLang.uploadimg_align_center ]
+{$imageAlign = [
+	[ 'value' => '',       'text' => {lang name='media.image_align.no'} ],
+	[ 'value' => 'left',   'text' => {lang name='media.image_align.left'} ],
+	[ 'value' => 'right',  'text' => {lang name='media.image_align.right'} ],
+	[ 'value' => 'center', 'text' => {lang name='media.image_align.center'} ]
 ]}

 {$aTargetParams = $LS->Media_GetTargetTypeParams( $sMediaTargetType )}
--- a/application/frontend/skin/developer/components/media/panes/pane.insert.tpl
+++ b/application/frontend/skin/developer/components/media/panes/pane.insert.tpl
@ -15,5 +15,8 @@
 {/block}

 {block 'media_pane_footer' prepend}
-	<button type="submit" class="button button--primary js-media-insert-button js-media-insert">Вставить</button>
+	{include 'components/button/button.tpl'
+		sMods    = 'primary'
+		sClasses = 'js-media-insert-button js-media-insert'
+		sText    = {lang name='media.insert.submit'}}
 {/block}
--- a/application/frontend/skin/developer/components/media/panes/pane.photoset.tpl
+++ b/application/frontend/skin/developer/components/media/panes/pane.photoset.tpl
@ -5,5 +5,8 @@
 {/block}

 {block 'media_pane_footer' prepend}
-	<button type="submit" class="button button--primary js-media-insert-button js-media-insert-photoset">Создать фотосет</button>
+	{include 'components/button/button.tpl'
+		sMods    = 'primary'
+		sClasses = 'js-media-insert-button js-media-insert-photoset'
+		sText    = {lang name='media.photoset.submit'}}
 {/block}
--- a/application/frontend/skin/developer/components/media/panes/pane.url.tpl
+++ b/application/frontend/skin/developer/components/media/panes/pane.url.tpl
@ -10,12 +10,12 @@
 		{include 'components/field/field.text.tpl'
 				 sName  = 'url'
 				 sValue = 'http://'
-				 sLabel = 'Ссылка'}
+				 sLabel = {lang name='media.url.fields.url.label'}}

 		{* Описание *}
 		{include 'components/field/field.text.tpl'
 				 sName  = 'title'
-				 sLabel = $aLang.uploadimg_title}
+				 sLabel = {lang name='media.url.fields.title.label'}}

 		<div style="display: none;" class="js-media-link-settings-image">
 			<p><img src="" width="200" class="js-media-link-settings-image-preview"></p>
@ -24,13 +24,20 @@
 			{include 'components/field/field.select.tpl'
 					 sName    = 'align'
 					 sClasses = 'width-200'
-					 sLabel   = $aLang.uploadimg_align
-					 aItems   = $aSelectImageAlign}
+					 sLabel   = {lang name='media.image_align.title'}
+					 aItems   = $imageAlign}
 		</div>
 	</form>
 {/block}

 {block 'media_pane_footer' prepend}
-	<button type="submit" class="button button--primary js-media-link-insert-button">Вставить как ссылку</button>
-	<button type="submit" class="button button--primary js-media-link-upload-button">Загрузить и вставить</button>
+	{include 'components/button/button.tpl'
+		sMods    = 'primary'
+		sClasses = 'js-media-link-insert-button'
+		sText    = {lang name='media.url.submit_insert'}}
+
+	{include 'components/button/button.tpl'
+		sMods    = 'primary'
+		sClasses = 'js-media-link-upload-button'
+		sText    = {lang name='media.url.submit_upload'}}
 {/block}
--- a/application/frontend/skin/developer/components/media/uploader/uploader-block.insert.tpl
+++ b/application/frontend/skin/developer/components/media/uploader/uploader-block.insert.tpl
@ -10,18 +10,18 @@
 {/block}

 {block 'block_title'}
-	Опции вставки
+	{lang name='media.insert.settings.title'}
 {/block}

 {block 'block_content'}
 	{* Выравнивание *}
 	{include 'components/field/field.select.tpl'
 			 sName  = 'align'
-			 sLabel = $aLang.uploadimg_align
-			 aItems = $aSelectImageAlign}
+			 sLabel = {lang name='media.image_align.title'}
+			 aItems = $imageAlign}

    {* Размер *}
-    {$selectImageSizes = [ [ 'value' => 'original', 'text' => 'Оригинал' ] ]}
+    {$selectImageSizes = [[ 'value' => 'original', 'text' => {lang name='media.insert.settings.fields.size.original'} ]]}

 	{foreach Config::Get('module.media.image.sizes') as $aSize}
 		{$selectImageSizes[] = [
@ -32,7 +32,7 @@

 	{include 'components/field/field.select.tpl'
 			 sName          = 'size'
-			 sLabel         = 'Размер'
+			 sLabel         = {lang name='media.insert.settings.fields.size.label'}
 			 sSelectedValue = $_aRequest.blog_category
 			 aItems         = $selectImageSizes}
 {/block}
--- a/application/frontend/skin/developer/components/media/uploader/uploader-block.photoset.tpl
+++ b/application/frontend/skin/developer/components/media/uploader/uploader-block.photoset.tpl
@ -10,7 +10,7 @@
 {/block}

 {block 'block_title'}
-	Опции фотосета
+	{lang name='media.photoset.settings.title'}
 {/block}

 {block 'block_content'}
@ -18,10 +18,10 @@
 	{include 'components/field/field.checkbox.tpl'
 			 sName    = 'use_thumbs'
 			 bChecked = true
-			 sLabel   = 'Показывать ленту с превьюшками'}
+			 sLabel   = {lang name='media.photoset.settings.fields.use_thumbs.label'}}

 	{* Показывать описания фотографий *}
 	{include 'components/field/field.checkbox.tpl'
 			 sName    = 'show_caption'
-			 sLabel   = 'Показывать описания фотографий'}
+			 sLabel   = {lang name='media.photoset.settings.fields.show_caption.label'}}
 {/block}
--- a/application/frontend/skin/developer/modals/modal.upload_image.gallery.item.tpl
+++ b/application/frontend/skin/developer/modals/modal.upload_image.gallery.item.tpl
@ -1,25 +0,0 @@
-{**
- * Добавление медиа-файла / Список изображений / Блок с изображением
- *
- * @styles css/modals.css
- *}
-
-{$oRelationTarget=$oMediaItem->getRelationTarget()}
-<li class="media-gallery-list-item {if $bIsSelected}is-selected{/if} {if $bIsActive}active{/if} js-media-upload-gallery-item"
-		data-media-id="{$oMediaItem->getId()}"
-		data-media-type="{$oMediaItem->getType()}"
-		data-media-date-add="{date_format date=$oMediaItem->getDateAdd() format='j F Y, H:i'}"
-		data-media-data-title="{$oMediaItem->getDataOne('title')|escape:'html'}"
-		data-media-file-name="{$oMediaItem->getFileName()|escape:'html'}"
-		data-media-file-size="{$oMediaItem->getFileSize()}"
-		data-media-width="{$oMediaItem->getWidth()}"
-		data-media-height="{$oMediaItem->getHeight()}"
-		data-media-preview="{$oMediaItem->getFileWebPath('100crop')}"
-		data-media-image-sizes={json var=$oMediaItem->getDataOne('image_sizes')}
-		data-media-relation-is-preview={json var=$oRelationTarget->getIsPreview()}
-		data-media-relation-is-preview3={json var=$oRelationTarget->getIsPreview()} >
-	<img src="{$oMediaItem->getFileWebPath('100crop')}" alt="Image">
-
-	<input id="checkbox_02" type="checkbox">
-	<label for="checkbox_02" class="media-gallery-list-item-checkbox" title="Убрать выделение"></label>
-</li>
--- a/application/frontend/skin/developer/modals/modal.upload_image.gallery.tpl
+++ b/application/frontend/skin/developer/modals/modal.upload_image.gallery.tpl
@ -1,96 +0,0 @@
-{**
- * Добавление медиа-файла / Список файлов
- *
- * @styles css/modals.css
- *}
-
-<div id="upload-gallery-image" class="media-gallery js-media-gallery">
-	{* 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>
-
-	{* Галерея *}
-	<div class="media-gallery-content">
-		{* Список файлов *}
-		<ul class="media-gallery-list js-media-upload-gallery-list"></ul>
-
-		{* Информация о выделенном файле *}
-		<div class="media-gallery-item-info js-media-item-info">
-			{* Блок отображаемый когда нет выделенных файлов *}
-			<div class="media-item-info-empty js-media-item-info-empty" style="display: none;">Выберите файл</div>
-
-			{* Основная информация о файле *}
-			<div class="js-media-detail-area" style="display: none;">
-				{* Превью *}
-				<img src="" alt="" class="media-gallery-item-info-image js-media-detail-preview" width="100" height="100">
-
-				{* Информация *}
-				<ul class="mb-20">
-					<li><strong class="word-wrap 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="#" class="link-dotted js-media-item-info-remove">{$aLang.common.remove}</a>
-						&nbsp;&nbsp;
-						{if $aTargetParams.allow_preview}
-							<a href="#" class="link-dotted js-media-item-info-create-preview">Создать превью</a>
-							<a href="#" class="link-dotted js-media-item-info-remove-preview">Удалить превью</a>
-						{/if}
-					</li>
-				</ul>
-
-				{* Описание *}
-				{include file='components/field/field.text.tpl'
-						 sName  = 'title'
-						 sInputClasses  = 'js-input-title'
-						 sLabel = $aLang.uploadimg_title}
-	        </div>
-
-			{* Основные настройки *}
-			<div class="js-media-settings-mode" id="media-settings-mode-insert" style="display: none;">
-				<h3>Опции вставки</h3>
-
-				{* Выравнивание *}
-				{include file='components/field/field.select.tpl'
-						 sName  = 'align'
-						 sLabel = $aLang.uploadimg_align
-						 aItems = $aSelectImageAlign}
-
-	            {* Размер *}
-	            {$aSelectImageSizes = [ [ 'value' => 'original', 'text' => 'Оригинал' ] ]}
-				{$aImageSizes = Config::Get('module.media.image.sizes')}
-
-				{foreach $aImageSizes as $aSize}
-					{$aSelectImageSizes[] = [
-						'value' => "{$aSize.w}x{$aSize.h}{if $aSize.crop}crop{/if}",
-						'text' => "{$aSize.w} × {if $aSize.h}{$aSize.h}{else}*{/if}"
-					]}
-				{/foreach}
-
-				{include file='components/field/field.select.tpl'
-						 sName          = 'size'
-						 sLabel         = 'Размер'
-						 sSelectedValue = $_aRequest.blog_category
-						 aItems         = $aSelectImageSizes}
-			</div>
-
-			{* Опции фотосета *}
-	        <div class="js-media-settings-mode" id="media-settings-mode-create-photoset" style="display: none;">
-				<h3>Опции фотосета</h3>
-
-				{* Показывать ленту с превьюшками *}
-				{include file='components/field/field.checkbox.tpl'
-						 sName    = 'use_thumbs'
-						 bChecked = true
-						 sLabel   = 'Показывать ленту с превьюшками'}
-
-				{* Показывать описания фотографий *}
-				{include file='components/field/field.checkbox.tpl'
-						 sName    = 'show_caption'
-						 sLabel   = 'Показывать описания фотографий'}
-	        </div>
-		</div>
-	</div>
-</div>
--- a/application/frontend/skin/developer/modals/modal.upload_image.preview.tpl
+++ b/application/frontend/skin/developer/modals/modal.upload_image.preview.tpl
@ -1,15 +0,0 @@
-{if $aTargetItems}
-	{foreach $aTargetItems as $oTarget}
-		<p class="mb-20">
-			<a href="#" class="button" onclick="ls.media.removePreviewFile({$oTarget->getMediaId()}); return false;">Удалить превью</a>
-		</p>
-
-		{$aPreview = $oTarget->getPreviewImageItemsWebPath()}
-
-		{foreach $aPreview as $sPreviewFile}
-			<img src="{$sPreviewFile}" alt=""><br>
-		{/foreach}
-	{/foreach}
-{else}
-	Превью можно <a href="#" onclick="jQuery('.js-tab-show-gallery').first().click(); return false;">выбрать из галереи</a>.
-{/if}