\\\nA minimalist writing zone, where you can block out all distractions and get to what\\'s important. The writing! \\\n
\\\n\\\n\tTo get started, all you need to do is delete this text (seriously, just highlight it and hit delete), and fill the page with your own fantastic words. You can even change the title! \\\n
\\\n\\\n\tYou can use bold, italics, both and urls just by highlighting the text and selecting them from the tiny options box that appears above it.\\\n
\\\n\\\n\tQuotes are easy to add too!\\\n\\\n
\\\n\tIf you\\'re using ZenPen, and want to contribute a few dollars, there\\'s a small donate button on the bottom left.\\\n
\\\nHappy Typing! ~ Tim Holman (@twholman)
';\n" }, { "path": "js/editor.js", "content": "// editor\nZenPen = window.ZenPen || {};\nZenPen.editor = (function() {\n\n\t// Editor elements\n\tvar headerField, contentField, lastType, currentNodeList, lastSelection;\n\n\t// Editor Bubble elements\n\tvar textOptions, optionsBox, boldButton, italicButton, quoteButton, urlButton, urlInput;\n\n\tvar composing;\n\n\tfunction init() {\n\n\t\tcomposing = false;\n\t\tbindElements();\n\n\t\tcreateEventBindings();\n\n\t\t// Load state if storage is supported\n\t\tif ( ZenPen.util.supportsHtmlStorage() ) {\n\t\t\tloadState();\n\t\t} else {\n\t\t\tloadDefault();\n\t\t}\n\t\t// Set cursor position\n\t\tvar range = document.createRange();\n\t\tvar selection = window.getSelection();\n\t\trange.setStart(headerField, 1);\n\t\tselection.removeAllRanges();\n\t\tselection.addRange(range);\n\n\t}\n\n\tfunction createEventBindings() {\n\n\t\t// Key up bindings\n\t\tif ( ZenPen.util.supportsHtmlStorage() ) {\n\n\t\t\tdocument.onkeyup = function( event ) {\n\t\t\t\tcheckTextHighlighting( event );\n\t\t\t\tsaveState();\n\t\t\t}\n\n\t\t} else {\n\t\t\tdocument.onkeyup = checkTextHighlighting;\n\t\t}\n\n\t\t// Mouse bindings\n\t\tdocument.onmousedown = checkTextHighlighting;\n\t\tdocument.onmouseup = function( event ) {\n\n\t\t\tsetTimeout( function() {\n\t\t\t\tcheckTextHighlighting( event );\n\t\t\t}, 1);\n\t\t};\n\t\t\n\t\t// Window bindings\n\t\twindow.addEventListener( 'resize', function( event ) {\n\t\t\tupdateBubblePosition();\n\t\t});\n\n\n\t\tdocument.body.addEventListener( 'scroll', function() {\n\n\t\t\t// TODO: Debounce update bubble position to stop excessive redraws\n\t\t\tupdateBubblePosition();\n\t\t});\n\n\t\t// Composition bindings. We need them to distinguish\n\t\t// IME composition from text selection\n\t\tdocument.addEventListener( 'compositionstart', onCompositionStart );\n\t\tdocument.addEventListener( 'compositionend', onCompositionEnd );\n\t}\n\n\n\tfunction bindElements() {\n\n\t\theaderField = document.querySelector( '.header' );\n\t\tcontentField = document.querySelector( '.content' );\n\t\ttextOptions = document.querySelector( '.text-options' );\n\n\t\toptionsBox = textOptions.querySelector( '.options' );\n\n\t\tboldButton = textOptions.querySelector( '.bold' );\n\t\tboldButton.onclick = onBoldClick;\n\n\t\titalicButton = textOptions.querySelector( '.italic' );\n\t\titalicButton.onclick = onItalicClick;\n\n\t\tquoteButton = textOptions.querySelector( '.quote' );\n\t\tquoteButton.onclick = onQuoteClick;\n\n\t\turlButton = textOptions.querySelector( '.url' );\n\t\turlButton.onmousedown = onUrlClick;\n\n\t\turlInput = textOptions.querySelector( '.url-input' );\n\t\turlInput.onblur = onUrlInputBlur;\n\t\turlInput.onkeydown = onUrlInputKeyDown;\n\t}\n\n\tfunction checkTextHighlighting( event ) {\n\n\t\tvar selection = window.getSelection();\n\n\n\t\tif ( (event.target.className === \"url-input\" ||\n\t\t event.target.classList.contains( \"url\" ) ||\n\t\t event.target.parentNode.classList.contains( \"ui-inputs\" ) ) ) {\n\n\t\t\tcurrentNodeList = findNodes( selection.focusNode );\n\t\t\tupdateBubbleStates();\n\t\t\treturn;\n\t\t}\n\n\t\t// Check selections exist\n\t\tif ( selection.isCollapsed === true && lastType === false ) {\n\n\t\t\tonSelectorBlur();\n\t\t}\n\n\t\t// Text is selected\n\t\tif ( selection.isCollapsed === false && composing === false ) {\n\n\t\t\tcurrentNodeList = findNodes( selection.focusNode );\n\n\t\t\t// Find if highlighting is in the editable area\n\t\t\tif ( hasNode( currentNodeList, \"ARTICLE\") ) {\n\t\t\t\tupdateBubbleStates();\n\t\t\t\tupdateBubblePosition();\n\n\t\t\t\t// Show the ui bubble\n\t\t\t\ttextOptions.className = \"text-options active\";\n\t\t\t}\n\t\t}\n\n\t\tlastType = selection.isCollapsed;\n\t}\n\t\n\tfunction updateBubblePosition() {\n\t\tvar selection = window.getSelection();\n\t\tvar range = selection.getRangeAt(0);\n\t\tvar boundary = range.getBoundingClientRect();\n\t\t\n\t\ttextOptions.style.top = boundary.top - 5 + window.pageYOffset + \"px\";\n\t\ttextOptions.style.left = (boundary.left + boundary.right)/2 + \"px\";\n\t}\n\n\tfunction updateBubbleStates() {\n\n\t\t// It would be possible to use classList here, but I feel that the\n\t\t// browser support isn't quite there, and this functionality doesn't\n\t\t// warrent a shim.\n\n\t\tif ( hasNode( currentNodeList, 'B') ) {\n\t\t\tboldButton.className = \"bold active\"\n\t\t} else {\n\t\t\tboldButton.className = \"bold\"\n\t\t}\n\n\t\tif ( hasNode( currentNodeList, 'I') ) {\n\t\t\titalicButton.className = \"italic active\"\n\t\t} else {\n\t\t\titalicButton.className = \"italic\"\n\t\t}\n\n\t\tif ( hasNode( currentNodeList, 'BLOCKQUOTE') ) {\n\t\t\tquoteButton.className = \"quote active\"\n\t\t} else {\n\t\t\tquoteButton.className = \"quote\"\n\t\t}\n\n\t\tif ( hasNode( currentNodeList, 'A') ) {\n\t\t\turlButton.className = \"url useicons active\"\n\t\t} else {\n\t\t\turlButton.className = \"url useicons\"\n\t\t}\n\t}\n\n\tfunction onSelectorBlur() {\n\n\t\ttextOptions.className = \"text-options fade\";\n\t\tsetTimeout( function() {\n\n\t\t\tif (textOptions.className == \"text-options fade\") {\n\n\t\t\t\ttextOptions.className = \"text-options\";\n\t\t\t\ttextOptions.style.top = '-999px';\n\t\t\t\ttextOptions.style.left = '-999px';\n\t\t\t}\n\t\t}, 260 )\n\t}\n\n\tfunction findNodes( element ) {\n\n\t\tvar nodeNames = {};\n\n\t\t// Internal node?\n\t\tvar selection = window.getSelection();\n\n\t\t// if( selection.containsNode( document.querySelector('b'), false ) ) {\n\t\t// \tnodeNames[ 'B' ] = true;\n\t\t// }\n\n\t\twhile ( element.parentNode ) {\n\n\t\t\tnodeNames[element.nodeName] = true;\n\t\t\telement = element.parentNode;\n\n\t\t\tif ( element.nodeName === 'A' ) {\n\t\t\t\tnodeNames.url = element.href;\n\t\t\t}\n\t\t}\n\n\t\treturn nodeNames;\n\t}\n\n\tfunction hasNode( nodeList, name ) {\n\n\t\treturn !!nodeList[ name ];\n\t}\n\n\tfunction saveState( event ) {\n\t\t\n\t\tlocalStorage[ 'header' ] = headerField.innerHTML;\n\t\tlocalStorage[ 'content' ] = contentField.innerHTML;\n\t}\n\n\tfunction loadState() {\n\n\t\tif ( localStorage[ 'header' ] ) {\n\t\t\theaderField.innerHTML = localStorage[ 'header' ];\n\t\t} else {\n\t\t\theaderField.innerHTML = defaultTitle; // in default.js\n\t\t}\n\n\t\tif ( localStorage[ 'content' ] ) {\n\t\t\tcontentField.innerHTML = localStorage[ 'content' ];\n\t\t} else {\n\t\t\tloadDefaultContent()\n\t\t}\n\t}\n\n\tfunction loadDefault() {\n\t\theaderField.innerHTML = defaultTitle; // in default.js\n\t\tloadDefaultContent();\n\t}\n\n\tfunction loadDefaultContent() {\n\t\tcontentField.innerHTML = defaultContent; // in default.js\n\t}\n\n\tfunction onBoldClick() {\n\t\tdocument.execCommand( 'bold', false );\n\t}\n\n\tfunction onItalicClick() {\n\t\tdocument.execCommand( 'italic', false );\n\t}\n\n\tfunction onQuoteClick() {\n\n\t\tvar nodeNames = findNodes( window.getSelection().focusNode );\n\n\t\tif ( hasNode( nodeNames, 'BLOCKQUOTE' ) ) {\n\t\t\tdocument.execCommand( 'formatBlock', false, 'p' );\n\t\t\tdocument.execCommand( 'outdent' );\n\t\t} else {\n\t\t\tdocument.execCommand( 'formatBlock', false, 'blockquote' );\n\t\t}\n\t}\n\n\tfunction onUrlClick() {\n\n\t\tif ( optionsBox.className == 'options' ) {\n\n\t\t\toptionsBox.className = 'options url-mode';\n\n\t\t\t// Set timeout here to debounce the focus action\n\t\t\tsetTimeout( function() {\n\n\t\t\t\tvar nodeNames = findNodes( window.getSelection().focusNode );\n\n\t\t\t\tif ( hasNode( nodeNames , \"A\" ) ) {\n\t\t\t\t\turlInput.value = nodeNames.url;\n\t\t\t\t} else {\n\t\t\t\t\t// Symbolize text turning into a link, which is temporary, and will never be seen.\n\t\t\t\t\tdocument.execCommand( 'createLink', false, '/' );\n\t\t\t\t}\n\n\t\t\t\t// Since typing in the input box kills the highlighted text we need\n\t\t\t\t// to save this selection, to add the url link if it is provided.\n\t\t\t\tlastSelection = window.getSelection().getRangeAt(0);\n\t\t\t\tlastType = false;\n\n\t\t\t\turlInput.focus();\n\n\t\t\t}, 100);\n\n\t\t} else {\n\n\t\t\toptionsBox.className = 'options';\n\t\t}\n\t}\n\n\tfunction onUrlInputKeyDown( event ) {\n\n\t\tif ( event.keyCode === 13 ) {\n\t\t\tevent.preventDefault();\n\t\t\tapplyURL( urlInput.value );\n\t\t\turlInput.blur();\n\t\t}\n\t}\n\n\tfunction onUrlInputBlur( event ) {\n\n\t\toptionsBox.className = 'options';\n\t\tapplyURL( urlInput.value );\n\t\turlInput.value = '';\n\n\t\tcurrentNodeList = findNodes( window.getSelection().focusNode );\n\t\tupdateBubbleStates();\n\t}\n\n\tfunction applyURL( url ) {\n\n\t\trehighlightLastSelection();\n\n\t\t// Unlink any current links\n\t\tdocument.execCommand( 'unlink', false );\n\n\t\tif (url !== \"\") {\n\t\t\n\t\t\t// Insert HTTP if it doesn't exist.\n\t\t\tif ( !url.match(\"^(http|https)://\") ) {\n\n\t\t\t\turl = \"http://\" + url;\t\n\t\t\t} \n\n\t\t\tdocument.execCommand( 'createLink', false, url );\n\t\t}\n\t}\n\n\tfunction rehighlightLastSelection() {\n\t\tvar selection = window.getSelection();\n\t\tif (selection.rangeCount > 0) {\n\t\t\tselection.removeAllRanges();\n\t\t}\n\t\tselection.addRange( lastSelection );\n\t}\n\n\tfunction getWordCount() {\n\t\t\n\t\tvar text = ZenPen.util.getText( contentField );\n\n\t\tif ( text === \"\" ) {\n\t\t\treturn 0\n\t\t} else {\n\t\t\treturn text.split(/\\s+/).length;\n\t\t}\n\t}\n\n\tfunction onCompositionStart ( event ) {\n\t\tcomposing = true;\n\t}\n\n\tfunction onCompositionEnd (event) {\n\t\tcomposing = false;\n\t}\n\n\treturn {\n\t\tinit: init,\n\t\tsaveState: saveState,\n\t\tgetWordCount: getWordCount\n\t}\n\n})();\n" }, { "path": "js/ui.js", "content": "// ui functions\nZenPen = window.ZenPen || {};\nZenPen.ui = (function() {\n\n\t// Base elements\n\tvar body, article, uiContainer, overlay, header;\n\n\t// Buttons\n\tvar screenSizeElement, colorLayoutElement, targetElement, saveElement;\n\n\t// Word Counter\n\tvar wordCountValue, wordCountBox, wordCountElement, wordCounter, wordCounterProgress;\n\t\n\t//save support\n\tvar supportsSave, saveFormat, textToWrite;\n\t\n\tvar expandScreenIcon = '';\n\tvar shrinkScreenIcon = '';\n\n\tvar darkLayout = false;\n\n\tfunction init() {\n\t\t\n\t\tsupportsSave = !!new Blob()?true:false;\n\t\t\n\t\tbindElements();\n\n\t\twordCountActive = false;\n\n\t\tif ( ZenPen.util.supportsHtmlStorage() ) {\n\t\t\tloadState();\n\t\t}\n\t\t\n\t\tconsole.log( \"Checkin under the hood eh? We've probably got a lot in common. You should totally check out ZenPen on github! (https://github.com/tholman/zenpen).\" );\n\t}\n\n\tfunction loadState() {\n\n\t\t// Activate word counter\n\t\tif ( localStorage['wordCount'] && localStorage['wordCount'] !== \"0\") {\t\t\t\n\t\t\twordCountValue = parseInt(localStorage['wordCount']);\n\t\t\twordCountElement.value = localStorage['wordCount'];\n\t\t\twordCounter.className = \"word-counter active\";\n\t\t\tupdateWordCount();\n\t\t}\n\n\t\t// Activate color switch\n\t\tif ( localStorage['darkLayout'] === 'true' ) {\n\t\t\tif ( darkLayout === false ) {\n\t\t\t\tdocument.body.className = 'yang';\n\t\t\t} else {\n\t\t\t\tdocument.body.className = 'yin';\n\t\t\t}\n\t\t\tdarkLayout = !darkLayout;\n\t\t}\n\n\t}\n\n\tfunction saveState() {\n\n\t\tif ( ZenPen.util.supportsHtmlStorage() ) {\n\t\t\tlocalStorage[ 'darkLayout' ] = darkLayout;\n\t\t\tlocalStorage[ 'wordCount' ] = wordCountElement.value;\n\t\t}\n\t}\n\n\tfunction bindElements() {\n\n\t\t// Body element for light/dark styles\n\t\tbody = document.body;\n\n\t\tuiContainer = document.querySelector( '.ui' );\n\n\t\t// UI element for color flip\n\t\tcolorLayoutElement = document.querySelector( '.color-flip' );\n\t\tcolorLayoutElement.onclick = onColorLayoutClick;\n\n\t\t// UI element for full screen\t\t\n\t\tscreenSizeElement = document.querySelector( '.fullscreen' );\n\t\tscreenSizeElement.onclick = onScreenSizeClick;\n\n\t\ttargetElement = document.querySelector( '.target ');\n\t\ttargetElement.onclick = onTargetClick;\n\t\t\n\t\t//init event listeners only if browser can save\n\t\tif (supportsSave) {\n\n\t\t\tsaveElement = document.querySelector( '.save' );\n\t\t\tsaveElement.onclick = onSaveClick;\n\t\t\t\n\t\t\tvar formatSelectors = document.querySelectorAll( '.saveselection span' );\n\t\t\tfor( var i in formatSelectors ) {\n\t\t\t\tformatSelectors[i].onclick = selectFormat;\n\t\t\t}\n\t\t\t\n\t\t\tdocument.querySelector('.savebutton').onclick = saveText;\n\t\t} else {\n\t\t\tdocument.querySelector('.save.useicons').style.display = \"none\";\n\t\t}\n\n\t\t// Overlay when modals are active\n\t\toverlay = document.querySelector( '.overlay' );\n\t\toverlay.onclick = onOverlayClick;\n\n\t\tarticle = document.querySelector( '.content' );\n\t\tarticle.onkeyup = onArticleKeyUp;\n\n\t\twordCountBox = overlay.querySelector( '.wordcount' );\n\t\twordCountElement = wordCountBox.querySelector( 'input' );\n\t\twordCountElement.onchange = onWordCountChange;\n\t\twordCountElement.onkeyup = onWordCountKeyUp;\n\t\t\n\t\tsaveModal = overlay.querySelector('.saveoverlay');\n\n\t\twordCounter = document.querySelector( '.word-counter' );\n\t\twordCounterProgress = wordCounter.querySelector( '.progress' );\n\n\t\theader = document.querySelector( '.header' );\n\t\theader.onkeypress = onHeaderKeyPress;\n\t}\n\n\tfunction onScreenSizeClick( event ) {\n\n\t\tscreenfull.toggle();\n \t\tif ( screenfull.enabled ) {\n\t\t\tdocument.addEventListener( screenfull.raw.fullscreenchange, function () {\n\t\t\t\tif ( screenfull.isFullscreen ) {\n\t\t\t\t\tscreenSizeElement.innerHTML = shrinkScreenIcon;\n\t\t\t\t} else {\n\t\t\t\t\tscreenSizeElement.innerHTML = expandScreenIcon;\t\n\t\t\t\t}\n \t\t});\n \t}\n\t};\n\n\tfunction onColorLayoutClick( event ) {\n\t\tif ( darkLayout === false ) {\n\t\t\tdocument.body.className = 'yang';\n\t\t} else {\n\t\t\tdocument.body.className = 'yin';\n\t\t}\n\t\tdarkLayout = !darkLayout;\n\n\t\tsaveState();\n\t}\n\n\tfunction onTargetClick( event ) {\n\t\toverlay.style.display = \"block\";\n\t\twordCountBox.style.display = \"block\";\n\t\twordCountElement.focus();\n\t}\n\n\tfunction onSaveClick( event ) {\n\t\toverlay.style.display = \"block\";\n\t\tsaveModal.style.display = \"block\";\n\t}\n\n\tfunction saveText( event ) {\n\n\t\tif (typeof saveFormat != 'undefined' && saveFormat != '') {\n\t\t\tvar blob = new Blob([textToWrite], {type: \"text/plain;charset=utf-8\"});\n\t\t\t/* remove tabs and line breaks from header */\n\t\t\tvar headerText = header.innerHTML.replace(/(\\t|\\n|\\r)/gm,\"\");\n\t\t\tif (headerText === \"\") {\n\t\t\t headerText = \"ZenPen\";\n\t\t\t}\n\t\t\tsaveAs(blob, headerText + '.txt');\n\t\t} else {\n\t\t\tdocument.querySelector('.saveoverlay h1').style.color = '#FC1E1E';\n\t\t}\n\t}\n\t\n\t/* Allows the user to press enter to tab from the title */\n\tfunction onHeaderKeyPress( event ) {\n\n\t\tif ( event.keyCode === 13 ) {\n\t\t\tevent.preventDefault();\n\t\t\tarticle.focus();\n\t\t}\n\t}\n\n\t/* Allows the user to press enter to tab from the word count modal */\n\tfunction onWordCountKeyUp( event ) {\n\t\t\n\t\tif ( event.keyCode === 13 ) {\n\t\t\tevent.preventDefault();\n\t\t\t\n\t\t\tsetWordCount( parseInt(this.value) );\n\n\t\t\tremoveOverlay();\n\n\t\t\tarticle.focus();\n\t\t}\n\t}\n\n\tfunction onWordCountChange( event ) {\n\n\t\tsetWordCount( parseInt(this.value) );\n\t}\n\n\tfunction setWordCount( count ) {\n\n\t\t// Set wordcount ui to active\n\t\tif ( count > 0) {\n\n\t\t\twordCountValue = count;\n\t\t\twordCounter.className = \"word-counter active\";\n\t\t\tupdateWordCount();\n\n\t\t} else {\n\n\t\t\twordCountValue = 0;\n\t\t\twordCounter.className = \"word-counter\";\n\t\t}\n\t\t\n\t\tsaveState();\n\t}\n\n\tfunction onArticleKeyUp( event ) {\n\n\t\tif ( wordCountValue > 0 ) {\n\t\t\tupdateWordCount();\n\t\t}\n\t}\n\n\tfunction updateWordCount() {\n\n\t\tvar wordCount = ZenPen.editor.getWordCount();\n\t\tvar percentageComplete = wordCount / wordCountValue;\n\t\twordCounterProgress.style.height = percentageComplete * 100 + '%';\n\n\t\tif ( percentageComplete >= 1 ) {\n\t\t\twordCounterProgress.className = \"progress complete\";\n\t\t} else {\n\t\t\twordCounterProgress.className = \"progress\";\n\t\t}\n\t}\n\n\tfunction selectFormat( e ) {\n\t\t\n\t\tif ( document.querySelectorAll('span.activesave').length > 0 ) {\n\t\t\tdocument.querySelector('span.activesave').className = '';\n\t\t}\n\t\t\n\t\tdocument.querySelector('.saveoverlay h1').style.cssText = '';\n\t\t\n\t\tvar targ;\n\t\tif (!e) var e = window.event;\n\t\tif (e.target) targ = e.target;\n\t\telse if (e.srcElement) targ = e.srcElement;\n\t\t\n\t\t// defeat Safari bug\n\t\tif (targ.nodeType == 3) {\n\t\t\ttarg = targ.parentNode;\n\t\t}\n\t\t\t\n\t\ttarg.className ='activesave';\n\t\t\n\t\tsaveFormat = targ.getAttribute('data-format');\n\t\t\n\t\tvar header = document.querySelector('header.header');\n\t\tvar headerText = header.innerHTML.replace(/(\\r\\n|\\n|\\r)/gm,\"\") + \"\\n\";\n\t\t\n\t\tvar body = document.querySelector('article.content');\n\t\tvar bodyText = body.innerHTML;\n\t\t\t\n\t\ttextToWrite = formatText(saveFormat,headerText,bodyText);\n\t\t\n\t\tvar textArea = document.querySelector('.hiddentextbox');\n\t\ttextArea.value = textToWrite;\n\t\ttextArea.focus();\n\t\ttextArea.select();\n\n\t}\n\n\tfunction formatText( type, header, body ) {\n\t\t\n\t\tvar text;\n\t\tswitch( type ) {\n\n\t\t\tcase 'html':\n\t\t\t\theader = \"/g,\"> \")\n\t\t\t\t\t.replace(/<\\/blockquote>/g,\"\")\n\t\t\t\t\t.replace(/