Add a (JS only) category list to entry editor

This will emit (and update) a list of all categories assigned to an
entry based on the selection in the category selection popup.

References #77

templates/2k11/admin/entries.tpl

@@ -34,6 +34,12 @@
         <textarea id="serendipity[body]" name="serendipity[body]" rows="15">{$entry_vars.entry.body|@escape}</textarea>
     </div>
 
+    <div id="category_list" class="clearfix">
+        <h3>{$CONST.CATEGORIES}</h3>
+
+        <ul class="plainList"></ul>
+    </div>
+
     <div id="edit_entry_submit">
         <button id="reset_timestamp" class="button_link" type="button" href="#serendipityNewTimestamp" data-currtime="{$entry_vars.reset_timestamp|@formatTime:'o-m-d\TH:i':true:false:true}" title="{$CONST.RESET_DATE_DESC}"><span class="icon-clock"></span><span class="visuallyhidden"> {$CONST.RESET_DATE}</span></button>
         <a id="select_category" class="button_link icon_link" href="#edit_entry_category" title="Select category"><span class="icon-list-bullet"></span><span class="visuallyhidden">{$CONST.CATEGORIES}</span></a>

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

@@ -612,6 +612,23 @@
         $(img).attr('src', $(img).attr('src')+'?'+Math.random());
     }
 
+    serendipity.categoryList = function() {
+        var $source = $('#edit_entry_category');
+        var $target = $('#category_list > ul');
+        var $selected = $source.find('input:checkbox:checked');
+
+        $target.empty();
+
+        if ($selected.length > 0) {
+            $selected.each(function() {
+                var catText = $(this).next('label').text();
+                $('<li class="category_selected">'+ catText +'</li>').appendTo($target);
+            });
+        } else {
+            $('<li>{$CONST.NO_CATEGORIES}</li>').appendTo($target);
+        }
+    }
+
 }( window.serendipity = window.serendipity || {}, jQuery ));
 
 // Source: https://github.com/yatil/accessifyhtml5.js
@@ -841,6 +858,7 @@ var AccessifyHTML5 = function (defaults, more_fixes) {
 
     // Editor-area
     if($('body').has('#serendipityEntry').size() > 0) {
+        serendipity.categoryList();
         serendipity.toggle_category_selector('categoryselector');
         serendipity.toggle_extended();
     }
@@ -942,7 +960,12 @@ var AccessifyHTML5 = function (defaults, more_fixes) {
 
             $('#select_category').magnificPopup({
                 type: "inline",
-                closeMarkup: '<button title="%title%" class="mfp-close" type="button">'+ btnText +'</button>'
+                closeMarkup: '<button title="%title%" class="mfp-close" type="button">'+ btnText +'</button>',
+                callbacks: {
+                    afterClose: function() {
+                        serendipity.categoryList();
+                    }
+                }
             });
         }
     {/if}

templates/2k11/admin/style.css

@@ -1022,6 +1022,7 @@ h4,
 }
 
 .toggle_headline,
+#category_list h3,
 h5,
 h6 {
     font-size: 1em;
@@ -1630,6 +1631,22 @@ form > .button_link:first-of-type,
     padding-bottom: .583335em;
 }
 
+#category_list h3 {
+    float: left;
+    line-height: 1.5em;
+    margin: 0 2em .75em 0;
+}
+
+#category_list ul {
+    margin: 0 0 .75em;
+    line-height: 1.5em;
+}
+
+#category_list li {
+    display: inline-block;
+    margin: 0 1em 0 0;
+}
+
 #template_select article,
 .plugins_installable > li,
 .media_file {
@@ -2083,6 +2100,7 @@ label .perm_name,
 .no-js .customfieldMedia,
 .no-js .toggle_links,
 .no-js .toggle_info,
+.no-js #category_list,
 .js .additional_info,
 .installer .toggle_info,
 .hidden,