Insert .media_choose preview dynamically; hide stuff on no-js.

This commit is contained in:
Matthias Mees 2013-06-21 13:49:26 +02:00
parent 64a9f4fef7
commit 748cf0b8b1
3 changed files with 26 additions and 6 deletions

View File

@ -62,11 +62,9 @@
{if $cdesc != ''}<span>{$cdesc}</span>{/if}
</label>
<input id="serendipity[{$postKey}][{$config_item}]" class="change_preview" name="serendipity[{$postKey}][{$config_item}]" type="text" data-configitem="{$config_item}" value="{$value}">{* This should be input[type=file] … *}
<input id="serendipity[{$postKey}][{$config_item}]" class="change_preview" name="serendipity[{$postKey}][{$config_item}]" type="text" data-configitem="{$config_item}" data-pmwidth="{$preview_width}" data-pmheight="{$preview_height}" value="{$value}">{* This should be input[type=file] … *}
<a class="button_link choose_media" href="#serendipity[{$postKey}][{$config_item}]" title="{$CONST.MEDIA_LIBRARY}"><span class="icon-picture"></span><span class="visuallyhidden"> {$CONST.MEDIA_LIBRARY}</span></a>
<div id="{$config_item}_preview" class="preview" style="background-image: url({$value}); min-width: {$preview_width}; min-height: {$preview_height};"></div>
</div>
{elseif $ctype == 'sequence'}
{if !$sequencejs_output}

View File

@ -758,6 +758,27 @@ function highlightComment(id, checkvalue) {
}
// Config option add media
var $hasChooseMedia = $('body').has('.media_choose');
if($hasChooseMedia.size() > 0) {
var $el = $('.media_choose');
var $item = $el.find('> input');
var configItem = $item.attr('data-configitem');
var mWidth = $item.attr('data-pmwidth');
var mHeight = $item.attr('data-pmheight');
if($item.val() != '') {
var bgImg = 'url(' + $item.val() + ')';
} else {
var bgImg = 'none';
}
$('<div id="'+configItem+'_preview" class="preview"/>').appendTo($el)
.css({
backgroundImage: bgImg,
minWidth: mWidth,
minHeight: mHeight
});
}
$('.change_preview').change(function(e) {
change_preview($(this).attr('data-configitem'));
});

View File

@ -1159,7 +1159,7 @@ main {
width: 100%;
}
.configuration_group .media_choose input {
.js .configuration_group .media_choose input {
width: 90%;
}
@ -1692,6 +1692,7 @@ form > .button_link:first-of-type {
.no-js .invert_selection,
.no-js .toggle_comment_full,
.no-js #add_upload,
.no-js .choose_media,
.no-js .media_show_info,
.no-js .media_rename,
.no-js .template_show_info,
@ -1868,7 +1869,7 @@ input[name="serendipity[filter][fileCategory]"] {
max-width: 48%;
}
.configuration_group .media_choose input {
.js .configuration_group .media_choose input {
margin-right: 1%;
max-width: 41.5%;
}
@ -2052,7 +2053,7 @@ input[name="serendipity[filter][fileCategory]"] {
/* LARGER SCREEN (e.g. laptops)
----------------------------------------------------------------- */
@media only screen and (min-width: 1280px) {
.configuration_group .media_choose input {
.js .configuration_group .media_choose input {
max-width: 42.5%;
}