add toggle off for <pre> code sections

[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 4030c7c600ab6a1c87bb2103621972a2c01b3133..c47bb0a16ec5e159a34a9d48c271799a7af65b09 100644 (file)
--- a/chloro/phyll/static/js/chloro.js
+++ b/chloro/phyll/static/js/chloro.js
@@ -20,7 +20,10 @@ $(function() {
   });
   $('div[contenteditable]').on('keyup', function(event) {
     var sel = document.getSelection();
-    if (sel.anchorNode instanceof Element && sel.anchorOffset == 0 && sel.isCollapsed) {
+    if ((sel.anchorNode instanceof Element && (
+            (sel.anchorOffset == 0 && sel.isCollapsed) || // first line
+            (sel.anchorNode.tagName === 'PRE'))) ||
+        (sel.anchorNode.parentNode.tagName === 'PRE')) {
       // start of line
       show_block_style_popup();
     } else {
@@ -47,6 +50,10 @@ $(function() {
     if (action == 'code') {
       action = 'pre';
       class_name = 'screen';
+      if ($(this).hasClass('on')) {  // toggle off
+        action = 'p';
+        class_name = null;
+      }
     }
     document.execCommand('formatBlock', false, action);
     var sel = window.getSelection();
@@ -57,7 +64,6 @@ $(function() {
     range.setStart(sel.anchorNode, 0);
     sel.removeAllRanges();
     sel.addRange(range);
-    hide_block_style_popup();
   }
   function show_block_style_popup() {
     if (block_style_popup === null) {
@@ -71,7 +77,16 @@ $(function() {
     }
     block_style_popup.css('position', 'absolute');
     var sel = window.getSelection();
-    var pos = $(sel.anchorNode).offset();
+    var anchor = sel.anchorNode;
+    if (anchor instanceof Text) {
+      anchor = anchor.parentNode;
+    }
+    if (anchor.tagName === "PRE") {
+      block_style_popup.find('[data-action=code]').addClass('on');
+    } else {
+      block_style_popup.find('[data-action=code]').removeClass('on');
+    }
+    var pos = $(anchor).offset();
     block_style_popup.css('top', pos.top - 33);
     block_style_popup.css('left', pos.left);
     block_style_popup.show();