Show ML toolbar when inserting image (#281)

This commit has two parts: First, media_items was changed to show (parts) of the image toolbar also when being in the editor popup, if the option is enabled. Second, it modifies the rename and the delete button of that toolbar to use ajax, because they otherwise would return to the normal ML. TODO1: Ajaxify the rescale function as well, or make it redirect properly, so the button can be enabled. TODO2: See if the code in media_items can be simplified, it is a dumb translation of the existing approach
This commit is contained in:
onli 2015-03-14 22:02:49 +01:00
parent 73dc7a9225
commit 27cf643135
2 changed files with 93 additions and 79 deletions

View File

@ -1,107 +1,103 @@
{foreach from=$media.files item="file" name="mediafiles" key="mediakey"}
{if NOT $media.manage}
{* ML got called for inserting media *}
<article class="media_wrap_thumb {cycle values="odd,even"}">
<div class="media_file_thumb{if $media.enclose} equal_heights{/if}">
{if $file.is_image AND $file.full_thumb}
{if $media.textarea || $media.htmltarget}
<a href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=choose&amp;serendipity[fid]={$file.id}&amp;serendipity[textarea]={$media.textarea}&amp;serendipity[noBanner]=true&amp;serendipity[noSidebar]=true&amp;serendipity[noFooter]=true&serendipity[filename_only]={$media.filename_only}&serendipity[htmltarget]={$media.htmltarget}">
{$link="?serendipity[adminModule]=images&amp;serendipity[adminAction]=choose&amp;serendipity[fid]={$file.id}&amp;serendipity[textarea]={$media.textarea}&amp;serendipity[noBanner]=true&amp;serendipity[noSidebar]=true&amp;serendipity[noFooter]=true&serendipity[filename_only]={$media.filename_only}&serendipity[htmltarget]={$media.htmltarget}"}
{else}
{if $file.url}
<a href="{$file.url}&amp;serendipity[image]={$file.id}">
{$link="{$file.url}&amp;serendipity[image]={$file.id}"}
{/if}
{/if}
<img src="{$file.full_thumbHTTP}" title="{$file.path}{$file.name}" alt="{$file.realname}">
{$img_src="{$file.full_thumbHTTP}"}
{$img_title="{$file.path}{$file.name}"}
{$img_alt="{$file.realname}"}
{if $media.textarea || $file.url}
</a>
{/if}
{elseif $file.is_image AND $file.hotlink}
{if $media.textarea}
<a href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=choose&amp;serendipity[fid]={$file.id}&amp;serendipity[textarea]={$media.textarea}&amp;serendipity[noBanner]=true&amp;serendipity[noSidebar]=true&amp;serendipity[noFooter]=true&serendipity[filename_only]={$media.filename_only}&serendipity[htmltarget]={$media.htmltarget}">
{$link="?serendipity[adminModule]=images&amp;serendipity[adminAction]=choose&amp;serendipity[fid]={$file.id}&amp;serendipity[textarea]={$media.textarea}&amp;serendipity[noBanner]=true&amp;serendipity[noSidebar]=true&amp;serendipity[noFooter]=true&serendipity[filename_only]={$media.filename_only}&serendipity[htmltarget]={$media.htmltarget}"}
{else}
{if $file.url}
<a href="{$file.$url}&amp;serendipity[image]={$file.id}">
{$link="{$file.$url}&amp;serendipity[image]={$file.id}"}
{/if}
{/if}
<img src="{$file.path}" width="{$file.thumbWidth}" height="{$file.thumbHeight}" title="{$file.path}" alt="{$file.realname}">
{if $media.textarea || $file.url}
</a>
{/if}
{$img_src="{$file.path}"}
{$img_title="{$file.path}"}
{$img_alt="{$file.realname}"}
{else}
{if $media.textarea}
<a href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=choose&amp;serendipity[fid]={$file.id}&amp;serendipity[textarea]={$media.textarea}&amp;serendipity[noBanner]=true&amp;serendipity[noSidebar]=true&amp;serendipity[noFooter]=true&serendipity[filename_only]={$media.filename_only}&serendipity[htmltarget]={$media.htmltarget}">
{$link="?serendipity[adminModule]=images&amp;serendipity[adminAction]=choose&amp;serendipity[fid]={$file.id}&amp;serendipity[textarea]={$media.textarea}&amp;serendipity[noBanner]=true&amp;serendipity[noSidebar]=true&amp;serendipity[noFooter]=true&serendipity[filename_only]={$media.filename_only}&serendipity[htmltarget]={$media.htmltarget}"}
{else}
{if $file.url}
<a href="{$file.$url}&amp;serendipity[image]={$file.id}">
{$link="{$file.$url}&amp;serendipity[image]={$file.id}"}
{/if}
{/if}
<img src="{$file.mimeicon}" title="{$file.path}{$file.name}({$file.mime})" alt="{$file.mime}">
<span class="block_level">{if $file.hotlink}{$CONST.MEDIA_HOTLINKED}{else}{$file.mime}{/if}</span>
{$file.realname|truncate:30:"&hellip;"}{if $file.orderkey != ''}: {$file.orderkey|escape}{/if}
</a>
{$img_src="{$file.mimeicon}"}
{$img_title="{$file.path}{$file.name}({$file.mime})"}
{$img_alt="{$file.mime}"}
{/if}
{if $file.orderkey != ''}
<span>{$file.orderkey|escape}</span>
{/if}
</div>
</article>
{else}
<article id="media_{$file.id}" class="media_file {cycle values="odd,even"}">
<header class="clearfix">
<div class="form_check">
<input id="multidelete_image{$file.id}" class="multidelete" name="serendipity[multiDelete][]" type="checkbox" value="{$file.id}" data-multidelid="media_{$file.id}"><label for="multidelete_image{$file.id}" class="visuallyhidden">{$CONST.TOGGLE_SELECT}</label>
</div>
<h3 title="{$file.realname}">{$file.realname|truncate:30:"&hellip;"}{if $file.orderkey != ''}: {$file.orderkey|escape}{/if}</h3>
{if $file.authorid != 0}<span class="author block_level">{$file.authorname}</span>{/if}
</header>
<div class="clearfix equal_heights media_file_wrap">
<div class="media_file_preview">
{if $file.is_image AND $file.full_thumb}
<a class="media_fullsize" href="{if $file.hotlink}{$file.path}{else}{$file.full_file}{/if}" title="{$CONST.MEDIA_FULLSIZE}: {$file.realname}" data-pwidth="{$file.popupWidth}" data-pheight="{$file.popupHeight}">
<img src="{$file.show_thumb}" title="{$file.path}{$file.name}" alt="{$file.realname}">
</a>
{elseif $file.is_image AND $file.hotlink}
<a class="media_fullsize" href="{if $file.hotlink}{$file.path}{else}{$file.full_file}{/if}" title="{$CONST.MEDIA_FULLSIZE}: {$file.realname}" data-pwidth="{$file.popupWidth}" data-pheight="{$file.popupHeight}">
<img src="{$file.path}" width="{$file.thumbWidth}" height="{$file.thumbHeight}" title="{$file.path}" alt="{$file.realname}">
</a>
{else}
<a class="media_fullsize" href="{if $file.hotlink}{$file.path}{else}{$file.full_file}{/if}" title="{$CONST.MEDIA_FULLSIZE}: {$file.realname}" data-pwidth="{$file.popupWidth}" data-pheight="{$file.popupHeight}">
<img src="{$file.mimeicon}" title="{$file.path}{$file.name}({$file.mime})" alt="{$file.mime}">
</a>
{/if}
<footer id="media_file_meta_{$file.id}" class="media_file_meta additional_info">
<ul class="plainList">
{if $file.hotlink}
<li>{$file.nice_hotlink}</li>
<li>{$CONST.MEDIA_HOTLINKED}</li>
{else}
{if $file.realname != $file.diskname}
<li title="{$file.diskname}">{$file.diskname|truncate:30:"&hellip;"}</li>
{/if}
{if $file.mime}
<li><b>MIME-Type:</b> {$file.mime}</li>
{/if}
{if $file.is_image}
<li><b>{$CONST.ORIGINAL_SHORT}:</b> {$file.dimensions_width}x{$file.dimensions_height}</li>
<li><b>{$CONST.THUMBNAIL_SHORT}:</b> {$file.dim.0}x{$file.dim.1}</li>
{/if}
<li><b>{$CONST.IMAGE_SIZE}:</b> {$file.nice_size} KB</li>
{/if}
</ul>
</footer>
</div>
{if $file.is_image AND $file.full_thumb}
{$link="{if $file.hotlink}{$file.path}{else}{$file.full_file}{/if}"}
{$img_src="{$file.show_thumb}"}
{$img_title="{$file.path}{$file.name}"}
{$img_alt="{$file.realname}"}
{elseif $file.is_image AND $file.hotlink}
{$link="{if $file.hotlink}{$file.path}{else}{$file.full_file}{/if}"}
{$img_src="{$file.path}"}
{$img_title="{$file.path}"}
$img_alt="{$file.realname}"}
{else}
{$link="{if $file.hotlink}{$file.path}{else}{$file.full_file}{/if}"}
{$img_src="{$file.mimeicon}"}
{$img_title="{$file.path}{$file.name}({$file.mime})"}
{$img_alt="{$file.mime}"}
{/if}
{/if}
<article id="media_{$file.id}" class="media_file {cycle values="odd,even"}">
<header class="clearfix">
<div class="form_check">
<input id="multidelete_image{$file.id}" class="multidelete" name="serendipity[multiDelete][]" type="checkbox" value="{$file.id}" data-multidelid="media_{$file.id}"><label for="multidelete_image{$file.id}" class="visuallyhidden">{$CONST.TOGGLE_SELECT}</label>
</div>
<h3 title="{$file.realname}">{$file.realname|truncate:30:"&hellip;"}{if $file.orderkey != ''}: {$file.orderkey|escape}{/if}</h3>
{if $file.authorid != 0}<span class="author block_level">{$file.authorname}</span>{/if}
</header>
<div class="clearfix equal_heights media_file_wrap">
<div class="media_file_preview">
<a {if $media.manage}class="media_fullsize"{/if} href="{$link}" title="{$CONST.MEDIA_FULLSIZE}: {$file.realname}" data-pwidth="{$file.popupWidth}" data-pheight="{$file.popupHeight}">
<img src="{$img_src}" title="{$img_title}" alt="{$img_alt}">
</a>
<footer id="media_file_meta_{$file.id}" class="media_file_meta additional_info">
<ul class="plainList">
{if $file.hotlink}
<li>{$file.nice_hotlink}</li>
<li>{$CONST.MEDIA_HOTLINKED}</li>
{else}
{if $file.realname != $file.diskname}
<li title="{$file.diskname}">{$file.diskname|truncate:30:"&hellip;"}</li>
{/if}
{if $file.mime}
<li><b>MIME-Type:</b> {$file.mime}</li>
{/if}
{if $file.is_image}
<li><b>{$CONST.ORIGINAL_SHORT}:</b> {$file.dimensions_width}x{$file.dimensions_height}</li>
<li><b>{$CONST.THUMBNAIL_SHORT}:</b> {$file.dim.0}x{$file.dim.1}</li>
{/if}
<li><b>{$CONST.IMAGE_SIZE}:</b> {$file.nice_size} KB</li>
{/if}
</ul>
</footer>
</div>
</div>
{if $media.manage || {serendipity_getConfigVar key='showMediaToolbar'}}
<ul class="media_file_actions actions plainList clearfix">
<li><a class="media_show_info button_link" href="#media_file_meta_{$file.id}" title="{$CONST.SHOW_METADATA}"><span class="icon-info-circled"></span><span class="visuallyhidden"> {$CONST.SHOW_METADATA}</span></a></li>
{if $file.is_editable}
<li><button class="media_rename button_link" type="button" title="{$CONST.MEDIA_RENAME}" data-fileid="{$file.id}" data-filename="{$file.name|escape:javascript}"><span class="icon-edit"></span><span class="visuallyhidden"> {$CONST.MEDIA_RENAME}</span></button></li>
{if $file.is_image AND NOT $file.hotlink}
{if $file.is_image AND NOT $file.hotlink AND $media.manage}
<li><a class="media_resize button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=scaleSelect&amp;serendipity[fname]={$file.name|truncate:30:"&hellip;"}&amp;serendipity[fid]={$file.id}'" title="{$CONST.IMAGE_RESIZE}"><span class="icon-resize-full"></span><span class="visuallyhidden"> {$CONST.IMAGE_RESIZE}</span></a></li>
{/if}
{if $file.is_image AND NOT $file.hotlink}
@ -110,12 +106,14 @@
{if $file.is_image AND NOT $file.hotlink}
<li><a class="media_rotate_right button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=rotateCW&amp;serendipity[fid]={$file.id}" title="{$CONST.IMAGE_ROTATE_RIGHT}"><span class="icon-cw"></span><span class="visuallyhidden">{$CONST.IMAGE_ROTATE_RIGHT}</span></a></li>
{/if}
<li><a class="media_prop button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=properties&amp;serendipity[fid]={$file.id}" title="{$CONST.MEDIA_PROP}"><span class="icon-picture"></span><span class="visuallyhidden"> {$CONST.MEDIA_PROP}</span></a></li>
<li><a class="media_delete button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=delete&amp;serendipity[fid]={$file.id}" title="{$CONST.MEDIA_DELETE}"><span class="icon-trash"></span><span class="visuallyhidden"> {$CONST.MEDIA_DELETE}</span></a></li>
{if $media.manage}
<li><a class="media_prop button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=properties&amp;serendipity[fid]={$file.id}" title="{$CONST.MEDIA_PROP}"><span class="icon-picture"></span><span class="visuallyhidden"> {$CONST.MEDIA_PROP}</span></a></li>
{/if}
<li><a class="media_delete button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=delete&amp;serendipity[fid]={$file.id}" title="{$CONST.MEDIA_DELETE}" data-fileid="{$file.id}" data-filename="{$file.name|escape:javascript}"><span class="icon-trash"></span><span class="visuallyhidden"> {$CONST.MEDIA_DELETE}</span></a></li>
{/if}
</ul>
</article>
{/if}
{/if}
</article>
{if NOT $media.enclose}
<article class="media_file media_enclose_no">

View File

@ -491,9 +491,18 @@
serendipity.rename = function(id, fname) {
var newname;
var media_rename = '{$CONST.ENTER_NEW_NAME}';
var media_token_url = $('input[name*="serendipity[token]"]').val();
if (newname = prompt(media_rename + fname, fname)) {
location.href='?serendipity[adminModule]=images&serendipity[adminAction]=rename&serendipity[fid]='+ escape(id) + '&serendipity[newname]='+ escape(newname) +'&serendipity[token]='+ media_token_url;
var media_token_url = $('input[name*="serendipity[token]"]').val();
$.post('?serendipity[adminModule]=images&serendipity[adminAction]=rename&serendipity[fid]='+ escape(id) + '&serendipity[newname]='+ escape(newname) +'&serendipity[token]='+ media_token_url);
}
}
// Delete file from ML
serendipity.deleteFromML = function(id, fname) {
if (confirm('{$CONST.DELETE}')) {
var media_token_url = $('input[name*="serendipity[token]"]').val();
$.post('?serendipity[adminModule]=images&serendipity[adminAction]=doDelete&serendipity[fid]=' + escape(id) + '&serendipity[token]='+ media_token_url);
window.location.reload(false);
}
}
@ -1343,6 +1352,13 @@ $(function() {
serendipity.rename($el.attr('data-fileid'), $el.attr('data-filename'));
});
$('.media_delete').click(function(e) {
e.preventDefault();
var $el = $(this);
serendipity.deleteFromML($el.attr('data-fileid'), $el.attr('data-filename'));
});
$('#media_crop').click(function(e) {
window.open($(this).attr('href'), 'ImageCrop', 'width=800,height=600,toolbar=no,scrollbars=1,scrollbars,resize=1,resizable=1').focus();
e.preventDefault();