Add inline image insertion for page bodies, plus a headline-conflict badge

Custom TinyMCE toolbar button opens a picker scoped to a page's own
attached images. Selecting one and a placement (full width, left,
right) inserts <a class="glightbox" data-gallery="page-N">
wrapping an <img>, sharing the existing headline-image lightbox
gallery. No native TinyMCE image dialog or resize handles --
placement is fixed to the three options via CSS classes only.

extended_valid_elements defines a and img explicitly and
symmetrically; valid_classes allows the placement classes and
glightbox specifically. content_style renders placement inside the
editing iframe, since ccc.css doesn't load there.

A pre-save pass removes any a.glightbox left without an img,
covering in-editor deletion regardless of how it happened.

Alt text comes from the asset's name, escaped.

A badge marks whichever attached image sits at position 0, since
_headline_image.html.erb always renders that position as the
page's automatic headline. Shown in the sidebar Images list and in
the picker grid.

1 files changed, 19 insertions, 0 deletions

diff --git a/public/javascripts/related_assets.js b/public/javascripts/related_assets.js
index 2955cbf..803332f 100644
--- a/public/javascripts/related_assets.js
+++ b/public/javascripts/related_assets.js
@@ -5,6 +5,8 @@ related_assets = {
     var createUrl = container.data("create-url");
     var list = $("#related_asset_list");
 
+    related_assets.update_headline_badge(list);
+
     initSearchPicker({
       inputSelector: "#related_asset_search_term",
       resultsSelector: "#related_asset_search_results",
@@ -45,6 +47,7 @@ related_assets = {
           url: ui.item.data("url"),
           data: "position=" + newPosition
         });
+        related_assets.update_headline_badge(list);
       }
     });
 
@@ -55,11 +58,23 @@ related_assets = {
         url: item.data("url"),
         success: function() {
           item.remove();
+          related_assets.update_headline_badge(list);
         }
       });
     });
   },
 
+  update_headline_badge: function(list) {
+    list.find(".related_asset_headline_badge").remove();
+    var first = list.children("li").first();
+    if (first.length) {
+      $("<span>", {
+        "class": "related_asset_headline_badge",
+        "title": "Shown automatically as this page's headline image"
+      }).text("Headline").insertBefore(first.find(".related_asset_remove"));
+    }
+  },
+
   attach: function(assetId, createUrl, list) {
     $.ajax({
       type: "POST",
@@ -69,9 +84,13 @@ related_assets = {
       success: function(related) {
         var item = $($("#related_asset_template").html().trim());
         item.attr("data-url", related.url);
+        item.attr("data-large-url", related.large_url);
+        item.attr("data-original-url", related.original_url);
+        item.attr("data-name", related.name);
         item.find("img").attr("src", related.thumb_url);
         list.append(item);
         list.sortable("refresh");
+        related_assets.update_headline_badge(list);
         $("#related_asset_search_term").val("");
         $("#related_asset_search_results").slideUp().empty();
       }