Support change keymap and indentation type with size in statusbar

This commit is contained in:
Cheng-Han, Wu 2016-02-08 22:51:07 -06:00
parent acb9dac1b9
commit 5aad217d34
6 changed files with 301 additions and 22 deletions

View file

@ -326,7 +326,6 @@ div[contenteditable]:empty:not(:focus):before{
font-size: 11px; font-size: 11px;
line-height: 25px; line-height: 25px;
height: 26px; height: 26px;
overflow: hidden;
} }
.status-bar .status-info { .status-bar .status-info {
@ -351,14 +350,90 @@ div[contenteditable]:empty:not(:focus):before{
background: #1c1c1e; background: #1c1c1e;
color: #ccc; color: #ccc;
position: absolute; position: absolute;
right: 10px; right: 0;
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
max-width: 30%;
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.status-bar .status-indicators > div {
float: right;
padding: 0 10px;
border-left: 1px solid #343434;
}
.status-bar .status-indicators .status-keymap > a {
color: inherit;
text-decoration: none;
}
.status-bar .indent-type, .status-bar .indent-width-label {
cursor: pointer;
/* margin-right: 3px;*/
}
.status-bar .indent-width-input {
font-size: 12px;
font-weight: 500;
height: 18px;
line-height: 1;
vertical-align: middle;
color: #ccc;
margin: 0;
padding: 0 0 2px;
position: relative;
left: 0;
top: -1px;
width: 18px;
transition: .1s linear all;
background-color: #555;
border: 1px solid #202020;
color: #fff;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.06);
border-radius: 3px;
text-align: center;
}
.status-bar .indent-width-input:focus {
border: 1px solid #2893ef;
}
.status-bar .indent-width-input::-webkit-inner-spin-button,
.status-bar .indent-width-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.status-bar .status-indent > * {
display: inline-block;
}
.status-bar .status-indent > *.hidden {
display: none;
}
.status-bar .status-overwrite:hover, .status-bar .indent-type:hover, .status-bar .indent-width-label:hover {
text-decoration: underline;
}
.status-bar .dropdown-menu {
background-color: #000;
color: #fff;
border: 1px solid rgba(255,255,255,0.09) !important;
}
.status-bar .dropdown-menu .divider {
background-color: #343434;
}
.status-bar .dropdown-menu > li > a {
color: #ccc;
}
.status-bar .dropdown-menu > li > a:focus, .status-bar .dropdown-menu > li > a:hover {
background-color: #212121;
}
@media print { @media print {
body { body {
padding-top: 0 !important; padding-top: 0 !important;

View file

@ -18,7 +18,33 @@ var defaultExtraKeys = {
"Ctrl-S": function () { "Ctrl-S": function () {
return CodeMirror.PASS return CodeMirror.PASS
}, },
"Enter": "newlineAndIndentContinueMarkdownList" "Enter": "newlineAndIndentContinueMarkdownList",
"Tab": function(cm) {
var tab = '\t';
var spaces = Array(parseInt(cm.getOption("indentUnit")) + 1).join(" ");
//auto indent whole line when in list or blockquote
var cursor = cm.getCursor();
var line = cm.getLine(cursor.line);
var regex = /^(\s*)(>[> ]*|[*+-]\s|(\d+)([.)]))/;
var match;
if ((match = regex.exec(line)) !== null) {
var ch = match[1].length;
var pos = {
line: cursor.line,
ch: ch
};
if (editor.getOption('indentWithTabs'))
cm.replaceRange(tab, pos, pos, '+input');
else
cm.replaceRange(spaces, pos, pos, '+input');
} else {
if (editor.getOption('indentWithTabs'))
cm.execCommand('defaultTab');
else {
cm.replaceSelection(spaces);
}
}
}
}; };
var idleTime = 300000; //5 mins var idleTime = 300000; //5 mins
@ -250,20 +276,164 @@ var editor = CodeMirror.fromTextArea(textit, {
var inlineAttach = inlineAttachment.editors.codemirror4.attach(editor); var inlineAttach = inlineAttachment.editors.codemirror4.attach(editor);
defaultTextHeight = parseInt($(".CodeMirror").css('line-height')); defaultTextHeight = parseInt($(".CodeMirror").css('line-height'));
var statusBarTemplate = null;
var statusBar = null; var statusBar = null;
var statusCursor = null; var statusCursor = null;
var statusFile = null; var statusFile = null;
var statusIndicators = null; var statusIndicators = null;
var statusLength = null;
var statusKeymap = null;
var statusIndent = null;
$.get('/views/statusbar.html', function (template) {
statusBarTemplate = template;
});
function addStatusBar() { function addStatusBar() {
var element = '<div class="status-bar"><div class="status-info"><div class="status-cursor"></div><div class="status-file"></div></div><div class="status-indicators"></div></div>'; statusBar = $(statusBarTemplate);
statusBar = $(element);
statusCursor = statusBar.find('.status-cursor'); statusCursor = statusBar.find('.status-cursor');
statusFile = statusBar.find('.status-file'); statusFile = statusBar.find('.status-file');
statusIndicators = statusBar.find('.status-indicators'); statusIndicators = statusBar.find('.status-indicators');
statusIndent = statusBar.find('.status-indent');
statusKeymap = statusBar.find('.status-keymap');
statusLength = statusBar.find('.status-length');
editor.addPanel(statusBar[0], { editor.addPanel(statusBar[0], {
position: "bottom" position: "bottom"
}); });
setIndent();
setKeymap();
}
function setIndent() {
var cookieIndentType = Cookies.get('indent_type');
var cookieTabSize = parseInt(Cookies.get('tab_size'));
var cookieSpaceUnits = parseInt(Cookies.get('space_units'));
if (cookieIndentType) {
if (cookieIndentType == 'tab') {
editor.setOption('indentWithTabs', true);
if (cookieTabSize)
editor.setOption('indentUnit', cookieTabSize);
} else if (cookieIndentType == 'space') {
editor.setOption('indentWithTabs', false);
if (cookieSpaceUnits)
editor.setOption('indentUnit', cookieSpaceUnits);
}
}
if (cookieTabSize)
editor.setOption('tabSize', cookieTabSize);
var type = statusIndicators.find('.indent-type');
var widthLabel = statusIndicators.find('.indent-width-label');
var widthInput = statusIndicators.find('.indent-width-input');
function setType() {
if (editor.getOption('indentWithTabs')) {
Cookies.set('indent_type', 'tab', {
expires: 365
});
type.text('Tab Size:');
} else {
Cookies.set('indent_type', 'space', {
expires: 365
});
type.text('Spaces:');
}
}
setType();
function setUnit() {
var unit = editor.getOption('indentUnit');
if (editor.getOption('indentWithTabs')) {
Cookies.set('tab_size', unit, {
expires: 365
});
} else {
Cookies.set('space_units', unit, {
expires: 365
});
}
widthLabel.text(unit);
}
setUnit();
type.click(function() {
if (editor.getOption('indentWithTabs')) {
editor.setOption('indentWithTabs', false);
cookieSpaceUnits = parseInt(Cookies.get('space_units'));
if (cookieSpaceUnits)
editor.setOption('indentUnit', cookieSpaceUnits)
} else {
editor.setOption('indentWithTabs', true);
cookieTabSize = parseInt(Cookies.get('tab_size'));
if (cookieTabSize) {
editor.setOption('indentUnit', cookieTabSize);
editor.setOption('tabSize', cookieTabSize);
}
}
setType();
setUnit();
});
widthLabel.click(function() {
if (widthLabel.is(':visible')) {
widthLabel.addClass('hidden');
widthInput.removeClass('hidden');
widthInput.val(editor.getOption('indentUnit'));
widthInput.select();
} else {
widthLabel.removeClass('hidden');
widthInput.addClass('hidden');
}
});
widthInput.on('change', function() {
var val = widthInput.val();
if (!val) val = editor.getOption('indentUnit');
if (val < 1) val = 1;
else if (val > 10) val = 10;
if (editor.getOption('indentWithTabs')) {
editor.setOption('tabSize', val);
}
editor.setOption('indentUnit', val);
setUnit();
});
widthInput.on('blur', function() {
widthLabel.removeClass('hidden');
widthInput.addClass('hidden');
});
}
function setKeymap() {
var cookieKeymap = Cookies.get('keymap');
if (cookieKeymap)
editor.setOption('keyMap', cookieKeymap);
var label = statusIndicators.find('.ui-keymap-label');
var sublime = statusIndicators.find('.ui-keymap-sublime');
var emacs = statusIndicators.find('.ui-keymap-emacs');
var vim = statusIndicators.find('.ui-keymap-vim');
function setKeymapLabel() {
var keymap = editor.getOption('keyMap');
Cookies.set('keymap', keymap, {
expires: 365
});
label.text(keymap);
}
setKeymapLabel();
sublime.click(function() {
editor.setOption('keyMap', 'sublime');
setKeymapLabel();
});
emacs.click(function() {
editor.setOption('keyMap', 'emacs');
setKeymapLabel();
});
vim.click(function() {
editor.setOption('keyMap', 'vim');
setKeymapLabel();
});
} }
var selection = null; var selection = null;
@ -294,7 +464,7 @@ function updateStatusBar() {
statusCursor.text(cursorText); statusCursor.text(cursorText);
var fileText = ' — ' + editor.lineCount() + ' Lines'; var fileText = ' — ' + editor.lineCount() + ' Lines';
statusFile.text(fileText); statusFile.text(fileText);
statusIndicators.text('Length ' + editor.getValue().length); statusLength.text('Length ' + editor.getValue().length);
} }
//ui vars //ui vars

File diff suppressed because one or more lines are too long

View file

@ -53,4 +53,6 @@ mode/perl/perl.js \
mode/sass/sass.js \ mode/sass/sass.js \
mode/r/r.js \ mode/r/r.js \
mode/dockerfile/dockerfile.js \ mode/dockerfile/dockerfile.js \
keymap/sublime.js keymap/emacs.js \
keymap/sublime.js \
keymap/vim.js

View file

@ -140,6 +140,10 @@ borrow some color from tomorrow-night-eighties
.cm-s-one-dark .CodeMirror-cursor { .cm-s-one-dark .CodeMirror-cursor {
border-left: 2px solid #528bff !important; border-left: 2px solid #528bff !important;
} }
.cm-fat-cursor .CodeMirror-cursor {
border-left: 2px solid #3C5B9E !important;
background: #3C5B9E;
}
.cm-s-one-dark .CodeMirror-gutters { .cm-s-one-dark .CodeMirror-gutters {
/* background-color: #282c34;*/ /* background-color: #282c34;*/
background-color: #1e2126; background-color: #1e2126;

View file

@ -0,0 +1,24 @@
<div class="status-bar">
<div class="status-info">
<div class="status-cursor"></div>
<div class="status-file"></div>
</div>
<div class="status-indicators">
<div class="status-length"></div>
<div class="status-keymap dropup pull-right">
<a id="keymapLabel" class="ui-keymap-label text-uppercase" data-target="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Click to change keymap">
Sublime
</a>
<ul class="dropdown-menu" aria-labelledby="keymapLabel">
<li class="ui-keymap-sublime"><a>Sublime</a></li>
<li class="ui-keymap-emacs"><a>Emacs</a></li>
<li class="ui-keymap-vim"><a>Vim</a></li>
</ul>
</div>
<div class="status-indent">
<div class="indent-type" title="Click to switch indentation type">Spaces:</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">
</div>
</div>
</div>