Update to support toggle editor theme and spellcheck in status bar

This commit is contained in:
Cheng-Han, Wu 2016-06-21 21:45:45 +08:00
parent 6577313925
commit 09fb120967
3 changed files with 119 additions and 1 deletions

View file

@ -394,11 +394,34 @@ div[contenteditable]:empty:not(:focus):before{
border-left: 1px solid #343434; 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; color: inherit;
text-decoration: none; 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 { .status-bar .indent-type, .status-bar .indent-width-label {
cursor: pointer; cursor: pointer;
/* margin-right: 3px;*/ /* margin-right: 3px;*/

View file

@ -307,6 +307,8 @@ var statusIndicators = null;
var statusLength = null; var statusLength = null;
var statusKeymap = null; var statusKeymap = null;
var statusIndent = null; var statusIndent = null;
var statusTheme = null;
var statusSpellcheck = null;
function getStatusBarTemplate(callback) { function getStatusBarTemplate(callback) {
$.get(serverurl + '/views/statusbar.html', function (template) { $.get(serverurl + '/views/statusbar.html', function (template) {
@ -328,12 +330,16 @@ function addStatusBar() {
statusIndent = statusBar.find('.status-indent'); statusIndent = statusBar.find('.status-indent');
statusKeymap = statusBar.find('.status-keymap'); statusKeymap = statusBar.find('.status-keymap');
statusLength = statusBar.find('.status-length'); statusLength = statusBar.find('.status-length');
statusTheme = statusBar.find('.status-theme');
statusSpellcheck = statusBar.find('.status-spellcheck');
statusPanel = editor.addPanel(statusBar[0], { statusPanel = editor.addPanel(statusBar[0], {
position: "bottom" position: "bottom"
}); });
setIndent(); setIndent();
setKeymap(); setKeymap();
setTheme();
setSpellcheck();
} }
function setIndent() { 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; var selection = null;
function updateStatusBar() { function updateStatusBar() {

View file

@ -20,5 +20,11 @@
<div class="indent-width-label" title="Click to change indentation size">4</div> <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"> <input class="indent-width-input hidden" type="number" min="1" max="10" maxlength="2" size="2">
</div> </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>
</div> </div>