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

templates/2k11/admin/plugin_config_item.tpl

@@ -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}

templates/2k11/admin/serendipity_editor.js.tpl

@@ -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'));
     });

templates/2k11/admin/style.css

@@ -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%;
     }