149 lines
5.5 KiB
HTML
149 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Jody's Notes</title>
|
|
<meta http-equiv="cache-control" content="max-age=0" />
|
|
<meta http-equiv="cache-control" content="no-cache" />
|
|
<meta http-equiv="expires" content="0" />
|
|
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
|
|
<meta http-equiv="pragma" content="no-cache" />
|
|
<link rel="stylesheet" href="lib/codemirror.css">
|
|
<link rel="stylesheet" href="addon/dialog/dialog.css">
|
|
<script src="lib/codemirror.js"></script>
|
|
<script src="addon/edit/continuelist.js"></script>
|
|
<script src="addon/mode/overlay.js"></script>
|
|
<script src="mode/markdown/markdown.js"></script>
|
|
<script src="mode/gfm/gfm.js"></script>
|
|
<script src="addon/selection/active-line.js"></script>
|
|
<script src="addon/dialog/dialog.js"></script>
|
|
<script src="addon/search/searchcursor.js"></script>
|
|
<script src="addon/edit/matchbrackets.js"></script>
|
|
<script src="keymap/vim.js"></script>
|
|
<script src="2.1.1-socket.io.slim.js"></script>
|
|
<style type="text/css">
|
|
html, body { height: 100%; margin: 0; padding: 0; }
|
|
.wrap {
|
|
position: relative;
|
|
height: 100%;
|
|
background: #eee;
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
}
|
|
.border {
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
border-radius: 5px;
|
|
border: 1px solid #999;
|
|
position: relative;
|
|
height: 100%;
|
|
padding: 1px;
|
|
}
|
|
.CodeMirror {
|
|
height: 96%;
|
|
}
|
|
.cm-s-default .cm-emoji {color: #009688;}
|
|
</style>
|
|
<!-- favicon design by Rockicon of thenounproject.com -->
|
|
</head>
|
|
<body>
|
|
|
|
<div class=wrap>
|
|
<div class=border>
|
|
<textarea id="editor" name="editor"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
|
|
mode: {
|
|
name: "gfm",
|
|
tokenTypeOverrides: {
|
|
emoji: "emoji"
|
|
}
|
|
},
|
|
lineNumbers: "true",
|
|
keyMap: "vim",
|
|
matchBrackets: true,
|
|
showCursorWhenSelecting: true,
|
|
viewportMargin: Infinity,
|
|
indentUnit: 4,
|
|
styleActiveLine: true,
|
|
autofocus: true,
|
|
theme: "default",
|
|
extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
|
|
});
|
|
// Add my .vimrc stuff.
|
|
CodeMirror.Vim.map('jj', '<Esc>', 'insert');
|
|
CodeMirror.Vim.map(';', ':', 'normal');
|
|
// Note, ~/notes.kaplon.us/CodeMirror is symlinked it into /assets!
|
|
// These mappings don't work, there's no concept of <leader> in CodeMirror, but i was hoping to work-around it.
|
|
//CodeMirror.Vim.map(' c', '<Esc>o- [ ] ', 'normal')
|
|
//CodeMirror.Vim.map(' x', '<ESC>;s/\[\s\]/[x]/g<CR>;noh<CR>', 'normal')
|
|
//CodeMirror.Vim.map('xx', '<ESC>;s/\[\s\]/[x]/g<CR>;noh<CR>', 'normal')
|
|
//CodeMirror.Vim.map('xx', '<ESC>;s/\[\s\]/[x]/g<CR>;noh<CR>', 'insert')
|
|
|
|
// Add my .vimrc stuff.
|
|
const { Vim } = CodeMirror;
|
|
Vim.map('jj', '<Esc>', 'insert');
|
|
Vim.map(';', ':', 'normal');
|
|
Vim.unmap('<Space>');
|
|
Vim.map('<Space><Space>', 'l');
|
|
Vim.defineAction('ghMdCkBxAdd', (cm, args) => {
|
|
// Based on review of vim_test.js code, replaceRange() needed for insert mode.
|
|
// Note replaceRange() and getCursor() are methods on cm object, not Vim object (maybe clean this up later).
|
|
// doKeys() func in vim_test.js would also type into insert mode, but i don't understand it.
|
|
Vim.handleKey(cm, 'o');
|
|
Vim.handleKey(cm, '<Esc>');
|
|
cm.replaceRange('- [ ] ', cm.getCursor());
|
|
Vim.handleKey(cm, 'A');
|
|
});
|
|
Vim.mapCommand('<Space>c', 'action', 'ghMdCkBxAdd');
|
|
Vim.defineAction('ghMdCkBx', (cm, args) => {
|
|
// This substitution works using exec-cmd in editor, but not here (it subs the 's'-char)x..
|
|
Vim.handleEx(cm, 's/\[\s\]/[x]');
|
|
// Try switch to sub any single character, also works in editor, not here (gives a msg 'No matches for [.]').
|
|
//Vim.handleEx(cm, 's/\[\.\]/[x]');
|
|
Vim.handleEx(cm, 'noh');
|
|
Vim.handleKey(cm, 'h');
|
|
Vim.handleKey(cm, 'j');
|
|
Vim.handleKey(cm, 'j');
|
|
});
|
|
Vim.mapCommand('<Space>x', 'action', 'ghMdCkBx');
|
|
|
|
CodeMirror.commands.save = function(){
|
|
socket.emit('cm-save', 'codemirror save event');
|
|
}
|
|
|
|
var userKeypress = false;
|
|
var socket = io();
|
|
socket.on('download allNotes', function(msg){
|
|
userKeypress = false; // Set back to false to avoid infinite content update loop when server sends initial content or changes from another client.
|
|
var cursorPos = editor.getCursor();
|
|
var scrollTop = editor.getScrollerElement().scrollTop;
|
|
editor.getDoc().setValue(msg);
|
|
editor.setCursor(cursorPos);
|
|
editor.scrollTo(null, scrollTop);
|
|
});
|
|
|
|
document.onkeydown = function(){ userKeypress = true; };
|
|
var typingTimer;
|
|
editor.on("changes", function() {
|
|
if (!userKeypress) { return; }; // Do nothing if no keys hit yet, avoids infinite loop since 'changes' event fires after initial websocket content loading.
|
|
clearTimeout(typingTimer);
|
|
typingTimer = setTimeout(
|
|
function() {
|
|
userKeypress = false; // Set back to false to avoid infinite content update loop when server sends initial content or changes from another client.
|
|
socket.emit('upload allNotes', editor.getValue());
|
|
},
|
|
2000
|
|
);
|
|
});
|
|
|
|
socket.on('conflict', function(msg){ alert(msg) });
|
|
socket.on('redirect', function(destination) {
|
|
window.location.href = destination;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|