mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2024-11-21 17:26:29 -05:00
Support change keymap and indentation type with size in statusbar
This commit is contained in:
parent
acb9dac1b9
commit
5aad217d34
6 changed files with 301 additions and 22 deletions
|
@ -326,7 +326,6 @@ div[contenteditable]:empty:not(:focus):before{
|
|||
font-size: 11px;
|
||||
line-height: 25px;
|
||||
height: 26px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-bar .status-info {
|
||||
|
@ -351,14 +350,90 @@ div[contenteditable]:empty:not(:focus):before{
|
|||
background: #1c1c1e;
|
||||
color: #ccc;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
max-width: 30%;
|
||||
overflow: hidden;
|
||||
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 {
|
||||
body {
|
||||
padding-top: 0 !important;
|
||||
|
|
|
@ -18,7 +18,33 @@ var defaultExtraKeys = {
|
|||
"Ctrl-S": function () {
|
||||
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
|
||||
|
@ -250,20 +276,164 @@ var editor = CodeMirror.fromTextArea(textit, {
|
|||
var inlineAttach = inlineAttachment.editors.codemirror4.attach(editor);
|
||||
defaultTextHeight = parseInt($(".CodeMirror").css('line-height'));
|
||||
|
||||
var statusBarTemplate = null;
|
||||
var statusBar = null;
|
||||
var statusCursor = null;
|
||||
var statusFile = null;
|
||||
var statusIndicators = null;
|
||||
var statusLength = null;
|
||||
var statusKeymap = null;
|
||||
var statusIndent = null;
|
||||
|
||||
$.get('/views/statusbar.html', function (template) {
|
||||
statusBarTemplate = template;
|
||||
});
|
||||
|
||||
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 = $(element);
|
||||
statusBar = $(statusBarTemplate);
|
||||
statusCursor = statusBar.find('.status-cursor');
|
||||
statusFile = statusBar.find('.status-file');
|
||||
statusIndicators = statusBar.find('.status-indicators');
|
||||
statusIndent = statusBar.find('.status-indent');
|
||||
statusKeymap = statusBar.find('.status-keymap');
|
||||
statusLength = statusBar.find('.status-length');
|
||||
editor.addPanel(statusBar[0], {
|
||||
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;
|
||||
|
@ -294,7 +464,7 @@ function updateStatusBar() {
|
|||
statusCursor.text(cursorText);
|
||||
var fileText = ' — ' + editor.lineCount() + ' Lines';
|
||||
statusFile.text(fileText);
|
||||
statusIndicators.text('Length ' + editor.getValue().length);
|
||||
statusLength.text('Length ' + editor.getValue().length);
|
||||
}
|
||||
|
||||
//ui vars
|
||||
|
|
30
public/vendor/codemirror/codemirror.min.js
vendored
30
public/vendor/codemirror/codemirror.min.js
vendored
File diff suppressed because one or more lines are too long
4
public/vendor/codemirror/compress.sh
vendored
4
public/vendor/codemirror/compress.sh
vendored
|
@ -53,4 +53,6 @@ mode/perl/perl.js \
|
|||
mode/sass/sass.js \
|
||||
mode/r/r.js \
|
||||
mode/dockerfile/dockerfile.js \
|
||||
keymap/sublime.js
|
||||
keymap/emacs.js \
|
||||
keymap/sublime.js \
|
||||
keymap/vim.js
|
4
public/vendor/codemirror/theme/one-dark.css
vendored
4
public/vendor/codemirror/theme/one-dark.css
vendored
|
@ -140,6 +140,10 @@ borrow some color from tomorrow-night-eighties
|
|||
.cm-s-one-dark .CodeMirror-cursor {
|
||||
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 {
|
||||
/* background-color: #282c34;*/
|
||||
background-color: #1e2126;
|
||||
|
|
24
public/views/statusbar.html
Normal file
24
public/views/statusbar.html
Normal 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>
|
Loading…
Reference in a new issue