Update to support toggle editor theme and spellcheck in status bar

Author: jackycute

public/css/index.css

@@ -394,11 +394,34 @@ div[contenteditable]:empty:not(:focus):before{
     border-left: 1px solid #343434;
 }
 
-.status-bar .status-indicators .status-keymap > a {
+.status-bar .status-indicators .status-keymap > a,
+.status-bar .status-indicators .status-theme > a,
+.status-bar .status-indicators .status-spellcheck > a {
     color: inherit;
     text-decoration: none;
 }
 
+.status-bar .status-indicators .status-theme,
+.status-bar .status-indicators .status-spellcheck {
+    padding: 0 4.3px;
+}
+
+.ui-theme-toggle,
+.ui-spellcheck-toggle {
+    opacity: 0.2;
+    cursor: pointer;
+}
+
+.ui-theme-toggle.active,
+.ui-spellcheck-toggle.active {
+    opacity: 1;
+}
+
+.ui-theme-toggle:hover,
+.ui-spellcheck-toggle:hover {
+    opacity: 0.8;
+}
+
 .status-bar .indent-type, .status-bar .indent-width-label {
     cursor: pointer;
 /*    margin-right: 3px;*/

public/js/index.js

@@ -307,6 +307,8 @@ var statusIndicators = null;
 var statusLength = null;
 var statusKeymap = null;
 var statusIndent = null;
+var statusTheme = null;
+var statusSpellcheck = null;
 
 function getStatusBarTemplate(callback) {
     $.get(serverurl + '/views/statusbar.html', function (template) {
@@ -328,12 +330,16 @@ function addStatusBar() {
     statusIndent = statusBar.find('.status-indent');
     statusKeymap = statusBar.find('.status-keymap');
     statusLength = statusBar.find('.status-length');
+    statusTheme = statusBar.find('.status-theme');
+    statusSpellcheck = statusBar.find('.status-spellcheck');
     statusPanel = editor.addPanel(statusBar[0], {
         position: "bottom"
     });
 
     setIndent();
     setKeymap();
+    setTheme();
+    setSpellcheck();
 }
 
 function setIndent() {
@@ -467,6 +473,89 @@ function setKeymap() {
     });
 }
 
+function setTheme() {
+    var cookieTheme = Cookies.get('theme');
+    if (cookieTheme) {
+        editor.setOption('theme', cookieTheme);
+    }
+
+    var themeToggle = statusTheme.find('.ui-theme-toggle');
+    themeToggle.click(function () {
+        var theme = editor.getOption('theme');
+        if (theme == "one-dark") {
+            theme = "default";
+        } else {
+            theme = "one-dark";
+        }
+        editor.setOption('theme', theme);
+        Cookies.set('theme', theme, {
+            expires: 365
+        });
+        checkTheme();
+    });
+    function checkTheme() {
+        var theme = editor.getOption('theme');
+        if (theme == "one-dark") {
+            themeToggle.removeClass('active');
+        } else {
+            themeToggle.addClass('active');
+        }
+    }
+    checkTheme();
+}
+
+function setSpellcheck() {
+    var cookieSpellcheck = Cookies.get('spellcheck');
+    if (cookieSpellcheck) {
+        var mode = null;
+        if (cookieSpellcheck === 'true') {
+            mode = 'spell-checker';
+        } else {
+            mode = 'gfm';
+        }
+        if (mode && mode !== editor.getOption('mode')) {
+            editor.setOption('mode', mode);
+        }
+    }
+
+    var spellcheckToggle = statusSpellcheck.find('.ui-spellcheck-toggle');
+    spellcheckToggle.click(function () {
+        var mode = editor.getOption('mode');
+        if (mode == "gfm") {
+            mode = "spell-checker";
+        } else {
+            mode = "gfm";
+        }
+        if (mode && mode !== editor.getOption('mode')) {
+            editor.setOption('mode', mode);
+        }
+        Cookies.set('spellcheck', (mode == "spell-checker"), {
+            expires: 365
+        });
+        checkSpellcheck();
+    });
+    function checkSpellcheck() {
+        var mode = editor.getOption('mode');
+        if (mode == "gfm") {
+            spellcheckToggle.removeClass('active');
+        } else {
+            spellcheckToggle.addClass('active');
+        }
+    }
+    checkSpellcheck();
+
+    //workaround spellcheck might not activate beacuse the ajax loading
+    if (num_loaded < 2) {
+        var spellcheckTimer = setInterval(function () {
+            if (num_loaded >= 2) {
+                if (editor.getOption('mode') == "spell-checker")
+                    editor.setOption('mode', "spell-checker");
+                clearInterval(spellcheckTimer);
+            }
+        }, 100);
+    }
+}
+
 var selection = null;
 
 function updateStatusBar() {

public/views/statusbar.html

@@ -20,5 +20,11 @@
             <div class="indent-width-label" title="Click to change indentation size">4</div>
             <input class="indent-width-input hidden" type="number" min="1" max="10" maxlength="2" size="2">
         </div>
+        <div class="status-theme">
+            <a class="ui-theme-toggle" data-target="#" title="Toggle editor theme"><i class="fa fa-sun-o fa-fw"></i></a>
+        </div>
+        <div class="status-spellcheck">
+            <a class="ui-spellcheck-toggle" data-target="#" title="Toggle spellcheck"><i class="fa fa-check fa-fw"></i></a>
+        </div>
     </div>
 </div>