editor.js in rich_cms-2.0.7

- old
+ new

@@ -1,9 +1,11 @@
 
 Rich.Cms.Editor = (function() {
-  var content_class = "rich_cms_content", mark_class = "marked", edit_panel = "#rich_cms_panel",
-      editable_content = {}, content_items = "";
+  var content_class        = "rich_cms_content", mark_class = "marked", edit_panel = "#rich_cms_panel",
+      editable_content     = {}, content_items = "",
+      cleditor_images_path = "/images/rich/cms/cleditor",
+      cleditor_css         = '<style>.cleditorMain {border:1px solid #999; padding:0 1px 1px; background-color:white} .cleditorMain iframe {border:none; margin:0; padding:0} .cleditorMain textarea {border:none; margin:0; padding:0; overflow-y:scroll; font:10pt Arial,Verdana; resize:none; outline:none /* webkit grip focus */} .cleditorToolbar {background: url("' + cleditor_images_path + '/toolbar.gif") repeat} .cleditorGroup {float:left; height:26px} .cleditorButton {float:left; width:24px; height:24px; margin:1px 0 1px 0; background: url("' + cleditor_images_path + '/buttons.gif")} .cleditorDisabled {opacity:0.3; filter:alpha(opacity=30)} .cleditorDivider {float:left; width:1px; height:23px; margin:1px 0 1px 0; background:#CCC} .cleditorPopup {border:solid 1px #999; background-color:white; position:absolute; font:10pt Arial,Verdana; cursor:default; z-index:10000} .cleditorList div {padding:2px 4px 2px 4px} .cleditorList p, .cleditorList h1, .cleditorList h2, .cleditorList h3, .cleditorList h4, .cleditorList h5, .cleditorList h6, .cleditorList font {padding:0; margin:0; background-color:Transparent} .cleditorColor {width:150px; padding:1px 0 0 1px} .cleditorColor div {float:left; width:14px; height:14px; margin:0 1px 1px 0} .cleditorPrompt {background-color:#F6F7F9; padding:4px; font-size:8.5pt} .cleditorPrompt input, .cleditorPrompt textarea {font:8.5pt Arial,Verdana;} .cleditorMsg {background-color:#FDFCEE; width:150px; padding:4px; font-size:8.5pt}</style>';
   
   var register = function(hash) {
     $.extend(editable_content, hash);
     content_items = $.keys(editable_content).join(",");
   };
@@ -12,22 +14,35 @@
     $("#rich_cms_panel .edit a.close").bind("click", function(event) {
       event.preventDefault();
       RaccoonTip.close();
     });
     
-    RaccoonTip.register("." + content_class + "." + mark_class, "#rich_cms_panel", {beforeShow: edit, afterHide : function(content) { content.hide(); }});
+    RaccoonTip.register("." + content_class + "." + mark_class, "#rich_cms_panel", {
+                          beforeShow: edit,
+                          canHide: function() { return !$("#cleditor_input").length },
+                          afterHide: function(content) { content.hide(); }
+                        });
+
     bindSeatHolders();
+    injectCleditorCss();
     
     $.registerAjaxFormHandler({
       "rich_cms_content": afterUpdate
     });
   };
   
   var bindSeatHolders = function() {
     RaccoonTip.register("." + content_class + "." + mark_class + ".sh_hint", "#rich_cms_panel", {event: "focus", beforeShow: edit, afterHide : function(content) { content.hide(); }});
   };
   
+  var injectCleditorCss = function() {
+    if (!$("head").length) {
+      $(document.body).before("<head></head>");
+    }
+    $(cleditor_css).prependTo("head");
+  };
+
   var mark = function(event) {
     event.preventDefault();
     
     $(content_items).addClass(content_class).toggleClass(mark_class);
     
@@ -42,54 +57,70 @@
       bindSeatHolders();
     } else {
       $(content_items + ".block").removeClass("block");
       $(edit_panel).hide();
     }
+
+    if (typeof(SeatHolder) != "undefined") {
+      SeatHolder.react(!markedContentItems.length);
+    }
   };
   
   var edit = function() {
     var content_item = $(this).closest(".rich_cms_content");
     var label        = $("#rich_cms_panel .edit form fieldset.inputs label");
     var inputs       = $("#rich_cms_panel .edit form fieldset.inputs");
                      
-    var text         = content_item.is("textarea") || content_item.hasClass("block");
     var attrs        = content_item.get(0).attributes;
-    
     var selector     = $.grep($.keys(editable_content), function(s) {
                          return content_item.is(s);
                        })[0];
     var specs        = editable_content[selector];
     
-    label.html($.map(specs.keys, function(key) { return content_item.attr(key); }).join(", "));
+    label.html("Editing:&nbsp; " + $.map(specs.keys, function(key) { return "<strong>" + content_item.attr(key) + "</strong>"; }).join(", "));
     
-    inputs.find(":input").remove();
+    inputs.find(":input,div.cleditorMain").remove();
     inputs.append("<input name='content_item[__selector__]' type='hidden' value='" + selector + "'/>");
     
     $.each(attrs, function(index, attribute) {
       var attr = attribute.name;
       
       if (attr.match(/^data-/)) {
         var name  = "content_item[" + attr.replace(/^data-/, "") + "]";
         var value =  content_item.attr(attr);
         
         if (attr == specs.value) {
-          if (text) {
-            inputs.append("<textarea name='" + name + "'>" + value + "</textarea>");
-          } else {
-            inputs.append("<input    name='" + name + "' type='text'   value='" + value + "'/>");
+          var editable_input_type = content_item.attr("data-editable_input_type") || (content_item.is("textarea") || content_item.hasClass("block") ? "text" : "string");
+
+          switch (editable_input_type) {
+            case "string":
+              inputs.append("<input name='" + name + "' type='text' value='" + value + "'/>"); break;
+            case "text":
+              inputs.append("<textarea name='" + name + "'>" + value + "</textarea>"); break;
+            case "html":
+              inputs.append("<textarea id='cleditor_input' name='" + name + "' style='width: 500px; height: 300px'>" + value + "</textarea>"); break;
           }
         } else {
-            inputs.append("<input    name='" + name + "' type='hidden' value='" + value + "'/>");
+            inputs.append("<input name='" + name + "' type='hidden' value='" + value + "'/>");
         }
       }
     });
     
     if (specs.beforeEdit) {
       var identifier = $.map(specs.keys, function(key) { return "[" + key + "=" + content_item.attr(key) + "]"; }).join("");
       specs.beforeEdit.apply(null, [inputs, selector, specs, identifier]);
     }
     
     $(edit_panel).show();
+
+    setTimeout(function() {
+      if ($("#cleditor_input").length) {
+        $("#cleditor_input").cleditor({
+          width : 500,
+          height: 300
+        })[0].focus();
+      }
+    }, 250);
   };
   
   var afterUpdate = function(form, response) {
     var selector   = response["__selector__"];
     var specs      = editable_content[selector];