From: Frédéric Péters <fpeters@0d.be>
Date: Thu, 4 Jun 2020 21:09:09 +0000 (+0200)
Subject: add toggle off for <pre> code sections
X-Git-Tag: v2022~28
X-Git-Url: https://git.0d.be/?p=chloro.git;a=commitdiff_plain;h=435138b7965b1dbf43ee67c7077e7f0096fcae91

add toggle off for <pre> code sections
---

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