Add button to disable ACE Code Editor (for mobile)
This commit is contained in:
parent
86d5367d8e
commit
2fd5fccc5b
|
@ -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";
|
||||
|
|
|
@ -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";
|
||||
|
|
34
root/js/ace-toggle.js
Normal file
34
root/js/ace-toggle.js
Normal 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();
|
||||
});
|
||||
})();
|
Loading…
Reference in New Issue
Block a user