add link/unlink to quick edit

[chloro.git] / chloro / phyll / static / js / chloro.js

diff --git a/chloro/phyll/static/js/chloro.js b/chloro/phyll/static/js/chloro.js
index 9988be42a16aa8a95cf926979f2b5260465aa904..c997bc792f12b6da36a579b5380ffdebc6042eac 100644 (file)
--- a/chloro/phyll/static/js/chloro.js
+++ b/chloro/phyll/static/js/chloro.js
@@ -17,11 +17,98 @@ $(function() {
     }
     return true;
   });
+
   $('#save').on('click', function() {
     var text = $('div[contenteditable]')[0].innerHTML;
-    $.post('api-save/', {text: text}).fail(function() {
+    var csrf = $('[name=csrfmiddlewaretoken]').val();
+    $.post('api-save/',
+      { text: text, csrfmiddlewaretoken: csrf}
+    ).fail(function() {
       $('#save').css('background', 'red');
     });
     return false;
   });
+
+  var style_popup = null;
+  function update_style() {
+    var action = $(this).data('action');
+    var param = null;
+    if (action == 'code') {
+      action = 'insertHTML';
+      param = $('<code></code>', {text: window.getSelection().toString()})[0].outerHTML;
+    }
+    if (action == 'createLink') {
+      var sel = window.getSelection();
+      var $input = $('input[name=link-target]');
+      $input[0]._range = sel.getRangeAt(0);
+      if (sel.anchorNode instanceof Element) {
+        var elem = sel.anchorNode.childNodes[sel.anchorOffset];
+        if (elem.tagName == 'A') {
+          $input.val(elem.href);
+        }
+      }
+      $input.addClass('shown');
+      $input.focus();
+      return;
+    }
+    document.execCommand(action, false, param);
+  }
+  function validate_link(ev) {
+    var charCode = typeof ev.which == "number" ? ev.which : ev.keyCode;
+    if (ev.key == "Enter") {
+      var $input = $(this);
+      var range = this._range;
+      var url = $input.val();
+      $input.removeClass('shown');
+      var sel = window.getSelection();
+      sel.addRange(this._range);
+      if (url) {
+        document.execCommand('createLink', false, url);
+      } else {
+        document.execCommand('unlink', false, null);
+      }
+      sel.empty();
+      $input.val('');
+    }
+  }
+  function focusout_link(ev) {
+    var $input = $(this);
+    $input.removeClass('shown');
+    var range = this._range;
+    var sel = window.getSelection();
+    sel.addRange(this._range);
+  }
+
+  function show_style_popup(sel) {
+    if (style_popup === null) {
+      style_popup = $('<div id="style-popup">' +
+                      '<button data-action="italic"><i>i</i></button>' +
+                      '<button data-action="bold"><b>b</b></button>' +
+                      '<button data-action="code">#</button>' +
+                      '<button data-action="removeFormat">×</button>' +
+                      '<button data-action="createLink">a</button>' +
+                      '<input name="link-target"/>' +
+                      '</div>');
+      style_popup.hide();
+      style_popup.insertAfter($('.actions'));
+      style_popup.find('button').on('click', update_style);
+      style_popup.find('[name=link-target]').on('keypress', validate_link).on('focusout', focusout_link);
+    }
+    style_popup.css('position', 'absolute');
+    var pos = sel.getRangeAt(0).getClientRects()[0];
+    style_popup.css('top', pos.top + window.scrollY - 33);
+    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();
+    }
+  });
 });