2016-02-16 17:52:38 -05:00
<!DOCTYPE html>
< html lang = "en" >
< head >
2016-10-02 15:24:52 -04:00
< title > Jody's Notes< / title >
2016-10-05 13:09:43 -04:00
< 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" / >
2016-02-16 17:52:38 -05:00
< link rel = "stylesheet" href = "lib/codemirror.css" >
2016-05-27 13:39:49 -04:00
< link rel = "stylesheet" href = "addon/dialog/dialog.css" >
2016-02-16 17:52:38 -05:00
< script src = "lib/codemirror.js" > < / script >
2016-10-05 13:59:59 -04:00
< script src = "addon/selection/active-line.js" > < / script >
2016-05-27 13:39:49 -04:00
< script src = "addon/dialog/dialog.js" > < / script >
< script src = "addon/search/searchcursor.js" > < / script >
2016-02-16 17:52:38 -05:00
< script src = "mode/markdown/markdown.js" > < / script >
2016-09-28 19:24:47 -04:00
< script src = "addon/edit/matchbrackets.js" > < / script >
2016-02-16 17:52:38 -05:00
< script src = "keymap/vim.js" > < / script >
2016-11-09 11:14:32 -05:00
< script src = "https://cdn.socket.io/socket.io-1.4.5.js" > < / script >
2017-03-16 15:04:22 -04:00
< script src = "//cdn.jsdelivr.net/pouchdb/6.0.7/pouchdb.min.js" > < / script >
2016-02-16 17:52:38 -05:00
< style type = "text/css" >
2016-10-13 08:32:38 -04:00
html, body { height: 100%; margin: 0; padding: 0; }
.wrap {
position: relative;
2016-10-24 13:06:44 -04:00
height: 100%;
2016-10-13 08:32:38 -04:00
background: #eee;
2016-10-16 10:59:32 -04:00
padding: 15px;
2016-10-13 08:32:38 -04:00
box-sizing: border-box;
}
.border {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #999;
position: relative;
2016-10-24 13:06:44 -04:00
height: 100%;
2016-10-13 08:32:38 -04:00
padding: 1px;
}
2016-02-16 17:52:38 -05:00
.CodeMirror {
2016-10-24 13:06:44 -04:00
height: 96%;
2016-02-16 17:52:38 -05:00
}
< / style >
2016-10-17 14:28:29 -04:00
<!-- favicon design by Rockicon of thenounproject.com -->
2016-02-16 17:52:38 -05:00
< / head >
< body >
2016-10-13 08:32:38 -04:00
< div class = wrap >
< div class = border >
2016-11-21 12:54:29 -05:00
< textarea id = "editor" name = "editor" > < / textarea >
2016-10-13 08:32:38 -04:00
< / div >
< / div >
2016-02-16 17:52:38 -05:00
< script >
var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
mode: "markdown",
lineNumbers: "true",
keyMap: "vim",
2016-09-28 19:24:47 -04:00
matchBrackets: true,
2016-05-27 13:39:49 -04:00
showCursorWhenSelecting: true,
2016-10-01 13:03:06 -04:00
viewportMargin: Infinity,
2016-10-05 14:06:23 -04:00
indentUnit: 4,
2016-10-13 08:32:38 -04:00
styleActiveLine: true,
autofocus: true
2016-02-16 17:52:38 -05:00
});
2016-05-27 13:39:49 -04:00
// Add my .vimrc stuff.
2017-03-16 15:04:22 -04:00
CodeMirror.Vim.map('jj', '< Esc > ', 'insert');
CodeMirror.Vim.map(';', ':', 'normal');
2016-11-29 11:38:59 -05:00
// Note, ~/notes.kaplon.us/CodeMirror is symlinked it into /assets!
2016-12-08 12:30:19 -05:00
// These 2 mappings don't work, there's no concept of < leader > in CodeMirror, but i was hoping this would work-around it.
2016-07-09 09:23:51 -04:00
//CodeMirror.Vim.map(' c', '< Esc > o- [ ] ', 'normal')
//CodeMirror.Vim.map(' x', '< ESC > ;s/\[\s\]/[x]/g< CR > ;noh< CR > ', 'normal')
2016-11-09 11:14:32 -05:00
CodeMirror.commands.save = function(){
socket.emit('cm-save', 'codemirror save event');
}
2016-02-16 17:52:38 -05:00
2016-11-23 14:05:15 -05:00
var userKeypress = false;
2016-11-21 12:54:29 -05:00
var socket = io();
2016-11-22 11:22:22 -05:00
socket.on('download allNotes', function(msg){
2016-11-29 11:38:59 -05:00
userKeypress = false; // Set back to false to avoid infinite content update loop when server sends initial content or changes from another client.
2016-11-26 22:43:07 -05:00
var cursorPos = editor.getCursor();
var scrollTop = editor.getScrollerElement().scrollTop;
2016-11-21 12:54:29 -05:00
editor.getDoc().setValue(msg);
2016-11-26 22:43:07 -05:00
editor.setCursor(cursorPos);
editor.scrollTo(null, scrollTop);
2016-11-21 12:54:29 -05:00
});
document.onkeydown = function(){ userKeypress = true; };
2016-02-16 17:52:38 -05:00
var typingTimer;
editor.on("changes", function() {
2016-11-21 12:54:29 -05:00
if (!userKeypress) { return; }; // Do nothing if no keys hit yet, avoids infinite loop since 'changes' event fires after initial websocket content loading.
2016-02-16 17:52:38 -05:00
clearTimeout(typingTimer);
typingTimer = setTimeout(
function() {
2016-11-29 11:38:59 -05:00
userKeypress = false; // Set back to false to avoid infinite content update loop when server sends initial content or changes from another client.
2016-11-22 11:22:22 -05:00
socket.emit('upload allNotes', editor.getValue());
2016-02-16 17:52:38 -05:00
},
2000
);
});
2016-12-08 12:30:19 -05:00
2017-03-16 15:04:22 -04:00
socket.on('conflict', function(msg){ alert(msg) });
2017-04-21 10:55:30 -04:00
socket.on('redirect', function(destination) {
window.location.href = destination;
});
2016-02-16 17:52:38 -05:00
< / script >
< / body >
< / html >
