add toggle off for <pre> code sections
authorFrédéric Péters <fpeters@0d.be>
Thu, 4 Jun 2020 21:09:09 +0000 (23:09 +0200)
committerFrédéric Péters <fpeters@0d.be>
Thu, 4 Jun 2020 21:09:09 +0000 (23:09 +0200)
chloro/phyll/static/css/style.scss
chloro/phyll/static/js/chloro.js

index 1a30678..24a69f0 100644 (file)
@@ -216,6 +216,10 @@ div[contenteditable=true]:focus-within {
                        color: blue;
                        text-decoration: underline;
                }
+               &.on {
+                       background: #444;
+                       color: white;
+               }
        }
        &.short button {
                width: 2em;
index 4030c7c..c47bb0a 100644 (file)
@@ -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();