shuffle quickedit code to get it reusable (a bit)

diff --git a/chloro/phyll/static/js/chloro.js b/chloro/phyll/static/js/chloro.js
index 4b0ffea80cc354a6f7df8a98ab155c2cb9445e2d..8daedea8d7db26a555c4776c588c542881fc64cf 100644 (file)
--- a/chloro/phyll/static/js/chloro.js
+++ b/chloro/phyll/static/js/chloro.js
@@ -1,26 +1,12 @@
-$(function() {
-  var BLOCKS = [
+(function(window, document, undefined) {
+  var Phylly = {
+    BLOCKS: [

           {name: 'code', tag: 'PRE', klass: 'screen'},
           {name: 'figure', tag: 'DIV', subtag: true, klass: 'figure'},
           {name: 'note', tag: 'DIV', subtag: true, klass: 'note'},
           {name: 'code', tag: 'PRE', klass: 'screen'},
           {name: 'figure', tag: 'DIV', subtag: true, klass: 'figure'},
           {name: 'note', tag: 'DIV', subtag: true, klass: 'note'},

-  ];
-  function get_contenteditable_subnode(node) {
-    if (node === null) return null;
-    if (node.parentNode.contentEditable === 'true') return node;
-    return get_contenteditable_subnode(node.parentNode);
-  }
-  function get_active_block(node) {
-    var main_node = get_contenteditable_subnode(node);
-    if (main_node === null) return null;
-    for (const block of BLOCKS) {
-      if (main_node.tagName === block.tag && main_node.classList.contains(block.klass))
-        return block;
-    }
-    return null;
-  }
-
-  $('div[contenteditable]').on('input', function(event) {
-    if (event.originalEvent.inputType == "insertParagraph") {
+    ],
+    input_event: function(event) {
+      if (event.originalEvent.inputType != "insertParagraph") return true;

       var sel = document.getSelection();
       var anchorNode = sel.anchorNode;
       var prev_p = sel.anchorNode.previousSibling;
       var sel = document.getSelection();
       var anchorNode = sel.anchorNode;
       var prev_p = sel.anchorNode.previousSibling;


@@ -35,21 +21,45 @@ $(function() {
         title.textContent = title.textContent.slice(4);
         prev_p.replaceWith(title);
       }
         title.textContent = title.textContent.slice(4);
         prev_p.replaceWith(title);
       }

-    }
-    return true;
-  });
-  $('div[contenteditable]').on('keyup click', update_block_style_popup);
+      return true;
+    },

 
 

-  $('#save').on('click', function() {
-    var text = $('div[contenteditable]')[0].innerHTML;
-    var csrf = $('[name=csrfmiddlewaretoken]').val();
-    $.post('api-save/',
-      { text: text, csrfmiddlewaretoken: csrf}
-    ).fail(function() {
-      $('#save').css('background', 'red');
-    });
-    return false;
-  });
+    init: function() {
+      $(document).on('selectionchange', function(event) {
+        if ($('input[name=link-target].shown').length) {
+          return;
+        }
+        var sel = window.getSelection();
+        if ($(sel.anchorNode).parents('div[contenteditable]').length && sel.toString()) {
+          show_style_popup(sel);
+        } else if (style_popup) {
+          $(style_popup).hide();
+        }
+      });
+    },
+
+    bind_events: function(elem) {
+      $(elem).on('input', Phylly.input_event);
+      $(elem).on('keyup click', update_block_style_popup);
+    },
+
+  }
+  window.Phylly = Phylly;
+
+  function get_contenteditable_subnode(node) {
+    if (node === null) return null;
+    if (node.parentNode.contentEditable === 'true') return node;
+    return get_contenteditable_subnode(node.parentNode);
+  }
+  function get_active_block(node) {
+    var main_node = get_contenteditable_subnode(node);
+    if (main_node === null) return null;
+    for (const block of Phylly.BLOCKS) {
+      if (main_node.tagName === block.tag && main_node.classList.contains(block.klass))
+        return block;
+    }
+    return null;
+  }

 
   var block_style_popup = null;
   function block_style() {
 
   var block_style_popup = null;
   function block_style() {


@@ -93,7 +103,7 @@ $(function() {
     }
     if (block_style_popup === null) {
       block_style_popup = $('<div class="block-style-popup"></div>');
     }
     if (block_style_popup === null) {
       block_style_popup = $('<div class="block-style-popup"></div>');

-      for (const block of BLOCKS) {
+      for (const block of Phylly.BLOCKS) {

         var button = document.createElement('button');
         button.action_block = block;
         button.dataset.action = block.name;
         var button = document.createElement('button');
         button.action_block = block;
         button.dataset.action = block.name;


@@ -192,15 +202,19 @@ $(function() {
     style_popup.css('left', pos.left + window.scrollX);
     style_popup.show();
   };
     style_popup.css('left', pos.left + window.scrollX);
     style_popup.show();
   };

-  $(document).on('selectionchange', function(event) {
-    if ($('input[name=link-target].shown').length) {
-      return;
-    }
-    var sel = window.getSelection();
-    if ($(sel.anchorNode).parents('div[contenteditable]').length && sel.toString()) {
-      show_style_popup(sel);
-    } else if (style_popup) {
-      $(style_popup).hide();
-    }
+}(window, document));
+
+$(function() {
+  Phylly.init(),
+  $('div[contenteditable]').each(function(i, elem) {Phylly.bind_events(elem)});
+  $('#save').on('click', function() {
+    var text = $('div[contenteditable]')[0].innerHTML;
+    var csrf = $('[name=csrfmiddlewaretoken]').val();
+    $.post('api-save/',
+      { text: text, csrfmiddlewaretoken: csrf}
+    ).fail(function() {
+      $('#save').css('background', 'red');
+    });
+    return false;

   });
 });
   });
 });