<!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')
    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>