From 2fd5fccc5bec307b1aa351671ad8b683659a66af Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Thu, 16 May 2019 18:46:02 -0700
Subject: [PATCH] Add button to disable ACE Code Editor (for mobile)

---
 root/admin/editor.gohtml |  9 +++++++++
 root/blog/edit.gohtml    |  9 +++++++++
 root/js/ace-toggle.js    | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 root/js/ace-toggle.js

diff --git a/root/admin/editor.gohtml b/root/admin/editor.gohtml
index 7ecd39c..495a62e 100644
--- a/root/admin/editor.gohtml
+++ b/root/admin/editor.gohtml
@@ -69,6 +69,10 @@
             name="body"
             class="form-control"
             required>{{ .Data.Body }}</textarea>
+
+        <button id="ace-toggle-button" type="button" class="mt-2 btn btn-sm btn-secondary">
+            Toggle Rich Code Editor
+        </button>
     </div>
 
     <p>
@@ -77,10 +81,15 @@
     </p>
 </form>
 
+<script src="/js/ace-toggle.js"></script>
 <script src="/js/ace-editor/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
 <script>
 var ACE;
 (function() {
+    if (DISABLE_ACE_EDITOR) {
+        return;
+    }
+
     var editor = ace.edit("ace-editor");
     ACE = editor;
     document.querySelector("#editor-box").style.display = "block";
diff --git a/root/blog/edit.gohtml b/root/blog/edit.gohtml
index 657a8db..920c54b 100644
--- a/root/blog/edit.gohtml
+++ b/root/blog/edit.gohtml
@@ -97,6 +97,10 @@
                 name="body"
                 id="body"
                 placeholder="Post body goes here">{{ .Body }}</textarea>
+
+            <button id="ace-toggle-button" type="button" class="mt-2 btn btn-sm btn-secondary">
+                Toggle Rich Code Editor
+            </button>
         </div>
 
         <div class="form-group">
@@ -174,10 +178,15 @@
 
 </form>
 
+<script src="/js/ace-toggle.js"></script>
 <script src="/js/ace-editor/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
 <script>
 var ACE;
 (function() {
+    if (DISABLE_ACE_EDITOR) {
+        return;
+    }
+
     var editor = ace.edit("ace-editor");
     ACE = editor;
     document.querySelector("#editor-box").style.display = "block";
diff --git a/root/js/ace-toggle.js b/root/js/ace-toggle.js
new file mode 100644
index 0000000..724b2c2
--- /dev/null
+++ b/root/js/ace-toggle.js
@@ -0,0 +1,34 @@
+/*
+Reusable script to disable the ACE Code Editor at the touch of a button, i.e.
+for mobile where the editor doesn't work very well.
+
+Include this script at the bottom of the .gohtml page and have a button with
+the ID "ace-toggle-button".
+
+It sets the global window variable DISABLE_ACE_EDITOR=true if disabled.
+*/
+(function() {
+	let key = "ace-toggle.disabled";
+	let disabled = localStorage[key] ? true : false;
+	window.DISABLE_ACE_EDITOR = disabled;
+
+	let $button = document.querySelector("#ace-toggle-button");
+	if (disabled) {
+		$button.innerText = "Enable Rich Code Editor";
+	} else {
+		$button.innerText = "Disable Rich Code Editor";
+	}
+
+	$button.addEventListener("click", function() {
+		if (!window.confirm("Toggling the code editor will reload the page. Are you sure?")) {
+			return false;
+		}
+
+		if (disabled) {
+			delete localStorage[key];
+		} else {
+			localStorage[key] = true;
+		}
+		window.location.reload();
+	});
+})();