Standardize select image from media db/show preview process.

This used to be two seperate processes for the category icon and
images selected in plugin/theme config. It has now been simplified
to use just one process, which also uses the same markup and JS.

This adds to the consistency of the UI/UX, but it also saves some
CSS and a lot of JS, most of the latter of the expensive kind that
modifies the DOM.

templates/2k11/admin/category.inc.tpl

@@ -131,13 +131,15 @@
             <div id="category_preview" class="clearfix additional_info">
                 <div class="form_field">
                     <label for="category_icon">{$CONST.CATEGORY} {$CONST.IMAGE}</label>
-                    <input id="category_icon" name="serendipity[cat][icon]" type="text" value="{$this_cat.category_icon|default:""|escape}">
-                    <button id="insert_image" type="button" name="insImage" title="{$CONST.MEDIA_LIBRARY}"><span class="icon-picture"></span><span class="visuallyhidden"> {$CONST.MEDIA_LIBRARY}</span></button>
+
+                    <input id="category_icon" class="change_preview" name="serendipity[cat][icon]" type="text" data-configitem="category_icon" value="{$this_cat.category_icon|default:""|escape}">
+
+                    <button class="choose_media" type="button" name="insImage" title="{$CONST.MEDIA_LIBRARY}"><span class="icon-picture"></span><span class="visuallyhidden"> {$CONST.MEDIA_LIBRARY}</span></button>
                 </div>
 
-                <figure id="preview">
+                <figure id="category_icon_preview">
                     <figcaption>{$CONST.PREVIEW}</figcaption>
-                    <img id="imagepreview" src="{$this_cat.category_icon|default:""|escape}" alt="">
+                    <img src="{$this_cat.category_icon|default:""|escape}" alt="">
                 </figure>
             </div>
 

templates/2k11/admin/plugin_config_item.tpl

@@ -56,12 +56,17 @@
 {elseif $ctype == 'media'}
     <div class="clearfix form_field media_choose">
         <label for="serendipity[{$postKey}][{$config_item}]">{$cname}{if $cdesc != ''} <button class="toggle_info button_link" type="button" data-href="#{$postKey}_{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</label>
-        
-        <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 maybe be input[type=file] *}
 
-        <button class="icon_link choose_media" type="button" title="{$CONST.MEDIA_LIBRARY}"><span class="icon-picture"></span><span class="visuallyhidden">{$CONST.MEDIA_LIBRARY}</span></a>
+        <input id="serendipity[{$postKey}][{$config_item}]" class="change_preview" name="serendipity[{$postKey}][{$config_item}]" type="text" data-configitem="{$config_item}" value="{$value}">{* This should maybe be input[type=file] *}
+
+        <button class="choose_media" type="button" title="{$CONST.MEDIA_LIBRARY}"><span class="icon-picture"></span><span class="visuallyhidden">{$CONST.MEDIA_LIBRARY}</span></button>
 
         {if $cdesc != ''}<span id="{$postKey}_{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
+
+        <figure id="{$config_item}_preview">
+            <figcaption>{$CONST.PREVIEW}</figcaption>
+            <img src="{$value}" alt="">
+        </figure>
     </div>
 {elseif $ctype == 'sequence'}
     <fieldset>

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

@@ -150,14 +150,11 @@
     }
     /* end Better-Editor functions */
 
-    // Switches preview of image selected from media db by changing the
-    // container's background image
-    serendipity.change_preview = function(id) {
-        var text_box = document.getElementById('serendipity[template][' + id + ']');
-        var image_box = document.getElementById(id + '_preview');
-        var filename = text_box.value;
-
-        image_box.style.backgroundImage = 'url(' + filename + ')';
+    // Switches preview of image selected from media db
+    serendipity.change_preview = function(input, output) {
+        var filename = document.getElementById(input).value;
+        var $target = $('#' + output + '_preview > img');
+        $target.attr('src', filename);
     }
 
     // Opens media db image selection in new window
@@ -1080,28 +1077,10 @@ $(function() {
         $('.show_config_option_now').click();
     }
 
-    // Config option add media
-    if($('.media_choose').length > 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() {
-        serendipity.change_preview($(this).attr('data-configitem'));
+        console.log('ID: ' + $(this).attr('id'));
+        console.log('CI: ' + $(this).attr('data-configitem'));
+        serendipity.change_preview($(this).attr('id'), $(this).attr('data-configitem'));
     });
 
     $('.choose_media').click(function() {
@@ -1134,15 +1113,6 @@ $(function() {
         {/if}
     });
 
-    // Category icon preview
-    $('#insert_image').click(function(e) {
-        serendipity.choose_media('category_icon');
-    });
-
-    $('#category_icon').change(function() {
-        $('#imagepreview').attr('src', $('#category_icon').val());
-    });
-
     // Selection for multidelete
     $('.multidelete').click(function() {
         var $el = $(this);

templates/2k11/admin/style.css

@@ -964,6 +964,7 @@ input[type=checkbox],
 
 .importer_data dd,
 .form_buttons > input,
+.js .media_choose label,
 .quick_list ol > li {
     margin-bottom: .75em;
 }
@@ -976,7 +977,7 @@ input[type=checkbox],
 .serendipity_commentDirection,
 .entry_info,
 .pagination,
-.media_choose .preview,
+.media_choose figure,
 .media_file_metadata dt,
 #serendipity_comments_list details,
 .configure_plugin .cke {
@@ -1244,13 +1245,6 @@ summary {
     max-width: 75%;
 }
 
-.media_choose .preview {
-    background-repeat: no-repeat;
-    height: auto;
-    margin: .75em 0;
-    max-width: 100%;
-}
-
 .editor_toolbar button,
 .comment_data dt,
 #serendipityScaleForm .form_field label {
@@ -2140,8 +2134,8 @@ label .perm_name,
 .no-js .toggle_comment_full,
 .no-js #add_upload,
 .no-js .choose_media,
-.no-js #insert_image,
-.no-js #category_preview #preview,
+.no-js .media_choose figure,
+.no-js #category_preview figure,
 .no-js .media_show_info,
 .no-js .media_rename,
 .no-js .template_show_info,