kirsle/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add button to disable ACE Code Editor (for mobile)

Browse Source
This commit is contained in:
Noah 2019-05-16 18:46:02 -07:00
parent 86d5367d8e
commit 2fd5fccc5b
3 changed files with 52 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
root/admin/editor.gohtml
View File

@ -69,6 +69,10 @@
name="body" name="body"
class="form-control" class="form-control"
required>{{ .Data.Body }}</textarea> 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> </div>
<p> <p>
@ -77,10 +81,15 @@
</p> </p>
</form> </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 src="/js/ace-editor/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script> <script>
var ACE; var ACE;
(function() { (function() {
if (DISABLE_ACE_EDITOR) {
return;
}
var editor = ace.edit("ace-editor"); var editor = ace.edit("ace-editor");
ACE = editor; ACE = editor;
document.querySelector("#editor-box").style.display = "block"; document.querySelector("#editor-box").style.display = "block";

9
root/blog/edit.gohtml
View File

@ -97,6 +97,10 @@
name="body" name="body"
id="body" id="body"
placeholder="Post body goes here">{{ .Body }}</textarea> 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>
<div class="form-group"> <div class="form-group">
@ -174,10 +178,15 @@
</form> </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 src="/js/ace-editor/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script> <script>
var ACE; var ACE;
(function() { (function() {
if (DISABLE_ACE_EDITOR) {
return;
}
var editor = ace.edit("ace-editor"); var editor = ace.edit("ace-editor");
ACE = editor; ACE = editor;
document.querySelector("#editor-box").style.display = "block"; document.querySelector("#editor-box").style.display = "block";

34
root/js/ace-toggle.js Normal file
View File

@ -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();
});
})();