\ A minimalist writing zone, where you can block out all distractions and get to what\'s important. The writing! \
\\ To 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! \
\\ You can use bold, italics, both and urls just by highlighting the text and selecting them from the tiny options box that appears above it.\
\\ Quotes are easy to add too!\\
\ If you\'re using ZenPen, and want to contribute a few dollars, there\'s a small donate button on the bottom left.\
\Happy Typing! ~ Tim Holman (@twholman)
'; ================================================ FILE: js/editor.js ================================================ // editor ZenPen = window.ZenPen || {}; ZenPen.editor = (function() { // Editor elements var headerField, contentField, lastType, currentNodeList, lastSelection; // Editor Bubble elements var textOptions, optionsBox, boldButton, italicButton, quoteButton, urlButton, urlInput; var composing; function init() { composing = false; bindElements(); createEventBindings(); // Load state if storage is supported if ( ZenPen.util.supportsHtmlStorage() ) { loadState(); } else { loadDefault(); } // Set cursor position var range = document.createRange(); var selection = window.getSelection(); range.setStart(headerField, 1); selection.removeAllRanges(); selection.addRange(range); } function createEventBindings() { // Key up bindings if ( ZenPen.util.supportsHtmlStorage() ) { document.onkeyup = function( event ) { checkTextHighlighting( event ); saveState(); } } else { document.onkeyup = checkTextHighlighting; } // Mouse bindings document.onmousedown = checkTextHighlighting; document.onmouseup = function( event ) { setTimeout( function() { checkTextHighlighting( event ); }, 1); }; // Window bindings window.addEventListener( 'resize', function( event ) { updateBubblePosition(); }); document.body.addEventListener( 'scroll', function() { // TODO: Debounce update bubble position to stop excessive redraws updateBubblePosition(); }); // Composition bindings. We need them to distinguish // IME composition from text selection document.addEventListener( 'compositionstart', onCompositionStart ); document.addEventListener( 'compositionend', onCompositionEnd ); } function bindElements() { headerField = document.querySelector( '.header' ); contentField = document.querySelector( '.content' ); textOptions = document.querySelector( '.text-options' ); optionsBox = textOptions.querySelector( '.options' ); boldButton = textOptions.querySelector( '.bold' ); boldButton.onclick = onBoldClick; italicButton = textOptions.querySelector( '.italic' ); italicButton.onclick = onItalicClick; quoteButton = textOptions.querySelector( '.quote' ); quoteButton.onclick = onQuoteClick; urlButton = textOptions.querySelector( '.url' ); urlButton.onmousedown = onUrlClick; urlInput = textOptions.querySelector( '.url-input' ); urlInput.onblur = onUrlInputBlur; urlInput.onkeydown = onUrlInputKeyDown; } function checkTextHighlighting( event ) { var selection = window.getSelection(); if ( (event.target.className === "url-input" || event.target.classList.contains( "url" ) || event.target.parentNode.classList.contains( "ui-inputs" ) ) ) { currentNodeList = findNodes( selection.focusNode ); updateBubbleStates(); return; } // Check selections exist if ( selection.isCollapsed === true && lastType === false ) { onSelectorBlur(); } // Text is selected if ( selection.isCollapsed === false && composing === false ) { currentNodeList = findNodes( selection.focusNode ); // Find if highlighting is in the editable area if ( hasNode( currentNodeList, "ARTICLE") ) { updateBubbleStates(); updateBubblePosition(); // Show the ui bubble textOptions.className = "text-options active"; } } lastType = selection.isCollapsed; } function updateBubblePosition() { var selection = window.getSelection(); var range = selection.getRangeAt(0); var boundary = range.getBoundingClientRect(); textOptions.style.top = boundary.top - 5 + window.pageYOffset + "px"; textOptions.style.left = (boundary.left + boundary.right)/2 + "px"; } function updateBubbleStates() { // It would be possible to use classList here, but I feel that the // browser support isn't quite there, and this functionality doesn't // warrent a shim. if ( hasNode( currentNodeList, 'B') ) { boldButton.className = "bold active" } else { boldButton.className = "bold" } if ( hasNode( currentNodeList, 'I') ) { italicButton.className = "italic active" } else { italicButton.className = "italic" } if ( hasNode( currentNodeList, 'BLOCKQUOTE') ) { quoteButton.className = "quote active" } else { quoteButton.className = "quote" } if ( hasNode( currentNodeList, 'A') ) { urlButton.className = "url useicons active" } else { urlButton.className = "url useicons" } } function onSelectorBlur() { textOptions.className = "text-options fade"; setTimeout( function() { if (textOptions.className == "text-options fade") { textOptions.className = "text-options"; textOptions.style.top = '-999px'; textOptions.style.left = '-999px'; } }, 260 ) } function findNodes( element ) { var nodeNames = {}; // Internal node? var selection = window.getSelection(); // if( selection.containsNode( document.querySelector('b'), false ) ) { // nodeNames[ 'B' ] = true; // } while ( element.parentNode ) { nodeNames[element.nodeName] = true; element = element.parentNode; if ( element.nodeName === 'A' ) { nodeNames.url = element.href; } } return nodeNames; } function hasNode( nodeList, name ) { return !!nodeList[ name ]; } function saveState( event ) { localStorage[ 'header' ] = headerField.innerHTML; localStorage[ 'content' ] = contentField.innerHTML; } function loadState() { if ( localStorage[ 'header' ] ) { headerField.innerHTML = localStorage[ 'header' ]; } else { headerField.innerHTML = defaultTitle; // in default.js } if ( localStorage[ 'content' ] ) { contentField.innerHTML = localStorage[ 'content' ]; } else { loadDefaultContent() } } function loadDefault() { headerField.innerHTML = defaultTitle; // in default.js loadDefaultContent(); } function loadDefaultContent() { contentField.innerHTML = defaultContent; // in default.js } function onBoldClick() { document.execCommand( 'bold', false ); } function onItalicClick() { document.execCommand( 'italic', false ); } function onQuoteClick() { var nodeNames = findNodes( window.getSelection().focusNode ); if ( hasNode( nodeNames, 'BLOCKQUOTE' ) ) { document.execCommand( 'formatBlock', false, 'p' ); document.execCommand( 'outdent' ); } else { document.execCommand( 'formatBlock', false, 'blockquote' ); } } function onUrlClick() { if ( optionsBox.className == 'options' ) { optionsBox.className = 'options url-mode'; // Set timeout here to debounce the focus action setTimeout( function() { var nodeNames = findNodes( window.getSelection().focusNode ); if ( hasNode( nodeNames , "A" ) ) { urlInput.value = nodeNames.url; } else { // Symbolize text turning into a link, which is temporary, and will never be seen. document.execCommand( 'createLink', false, '/' ); } // Since typing in the input box kills the highlighted text we need // to save this selection, to add the url link if it is provided. lastSelection = window.getSelection().getRangeAt(0); lastType = false; urlInput.focus(); }, 100); } else { optionsBox.className = 'options'; } } function onUrlInputKeyDown( event ) { if ( event.keyCode === 13 ) { event.preventDefault(); applyURL( urlInput.value ); urlInput.blur(); } } function onUrlInputBlur( event ) { optionsBox.className = 'options'; applyURL( urlInput.value ); urlInput.value = ''; currentNodeList = findNodes( window.getSelection().focusNode ); updateBubbleStates(); } function applyURL( url ) { rehighlightLastSelection(); // Unlink any current links document.execCommand( 'unlink', false ); if (url !== "") { // Insert HTTP if it doesn't exist. if ( !url.match("^(http|https)://") ) { url = "http://" + url; } document.execCommand( 'createLink', false, url ); } } function rehighlightLastSelection() { var selection = window.getSelection(); if (selection.rangeCount > 0) { selection.removeAllRanges(); } selection.addRange( lastSelection ); } function getWordCount() { var text = ZenPen.util.getText( contentField ); if ( text === "" ) { return 0 } else { return text.split(/\s+/).length; } } function onCompositionStart ( event ) { composing = true; } function onCompositionEnd (event) { composing = false; } return { init: init, saveState: saveState, getWordCount: getWordCount } })(); ================================================ FILE: js/ui.js ================================================ // ui functions ZenPen = window.ZenPen || {}; ZenPen.ui = (function() { // Base elements var body, article, uiContainer, overlay, header; // Buttons var screenSizeElement, colorLayoutElement, targetElement, saveElement; // Word Counter var wordCountValue, wordCountBox, wordCountElement, wordCounter, wordCounterProgress; //save support var supportsSave, saveFormat, textToWrite; var expandScreenIcon = ''; var shrinkScreenIcon = ''; var darkLayout = false; function init() { supportsSave = !!new Blob()?true:false; bindElements(); wordCountActive = false; if ( ZenPen.util.supportsHtmlStorage() ) { loadState(); } console.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)." ); } function loadState() { // Activate word counter if ( localStorage['wordCount'] && localStorage['wordCount'] !== "0") { wordCountValue = parseInt(localStorage['wordCount']); wordCountElement.value = localStorage['wordCount']; wordCounter.className = "word-counter active"; updateWordCount(); } // Activate color switch if ( localStorage['darkLayout'] === 'true' ) { if ( darkLayout === false ) { document.body.className = 'yang'; } else { document.body.className = 'yin'; } darkLayout = !darkLayout; } } function saveState() { if ( ZenPen.util.supportsHtmlStorage() ) { localStorage[ 'darkLayout' ] = darkLayout; localStorage[ 'wordCount' ] = wordCountElement.value; } } function bindElements() { // Body element for light/dark styles body = document.body; uiContainer = document.querySelector( '.ui' ); // UI element for color flip colorLayoutElement = document.querySelector( '.color-flip' ); colorLayoutElement.onclick = onColorLayoutClick; // UI element for full screen screenSizeElement = document.querySelector( '.fullscreen' ); screenSizeElement.onclick = onScreenSizeClick; targetElement = document.querySelector( '.target '); targetElement.onclick = onTargetClick; //init event listeners only if browser can save if (supportsSave) { saveElement = document.querySelector( '.save' ); saveElement.onclick = onSaveClick; var formatSelectors = document.querySelectorAll( '.saveselection span' ); for( var i in formatSelectors ) { formatSelectors[i].onclick = selectFormat; } document.querySelector('.savebutton').onclick = saveText; } else { document.querySelector('.save.useicons').style.display = "none"; } // Overlay when modals are active overlay = document.querySelector( '.overlay' ); overlay.onclick = onOverlayClick; article = document.querySelector( '.content' ); article.onkeyup = onArticleKeyUp; wordCountBox = overlay.querySelector( '.wordcount' ); wordCountElement = wordCountBox.querySelector( 'input' ); wordCountElement.onchange = onWordCountChange; wordCountElement.onkeyup = onWordCountKeyUp; saveModal = overlay.querySelector('.saveoverlay'); wordCounter = document.querySelector( '.word-counter' ); wordCounterProgress = wordCounter.querySelector( '.progress' ); header = document.querySelector( '.header' ); header.onkeypress = onHeaderKeyPress; } function onScreenSizeClick( event ) { screenfull.toggle(); if ( screenfull.enabled ) { document.addEventListener( screenfull.raw.fullscreenchange, function () { if ( screenfull.isFullscreen ) { screenSizeElement.innerHTML = shrinkScreenIcon; } else { screenSizeElement.innerHTML = expandScreenIcon; } }); } }; function onColorLayoutClick( event ) { if ( darkLayout === false ) { document.body.className = 'yang'; } else { document.body.className = 'yin'; } darkLayout = !darkLayout; saveState(); } function onTargetClick( event ) { overlay.style.display = "block"; wordCountBox.style.display = "block"; wordCountElement.focus(); } function onSaveClick( event ) { overlay.style.display = "block"; saveModal.style.display = "block"; } function saveText( event ) { if (typeof saveFormat != 'undefined' && saveFormat != '') { var blob = new Blob([textToWrite], {type: "text/plain;charset=utf-8"}); /* remove tabs and line breaks from header */ var headerText = header.innerHTML.replace(/(\t|\n|\r)/gm,""); if (headerText === "") { headerText = "ZenPen"; } saveAs(blob, headerText + '.txt'); } else { document.querySelector('.saveoverlay h1').style.color = '#FC1E1E'; } } /* Allows the user to press enter to tab from the title */ function onHeaderKeyPress( event ) { if ( event.keyCode === 13 ) { event.preventDefault(); article.focus(); } } /* Allows the user to press enter to tab from the word count modal */ function onWordCountKeyUp( event ) { if ( event.keyCode === 13 ) { event.preventDefault(); setWordCount( parseInt(this.value) ); removeOverlay(); article.focus(); } } function onWordCountChange( event ) { setWordCount( parseInt(this.value) ); } function setWordCount( count ) { // Set wordcount ui to active if ( count > 0) { wordCountValue = count; wordCounter.className = "word-counter active"; updateWordCount(); } else { wordCountValue = 0; wordCounter.className = "word-counter"; } saveState(); } function onArticleKeyUp( event ) { if ( wordCountValue > 0 ) { updateWordCount(); } } function updateWordCount() { var wordCount = ZenPen.editor.getWordCount(); var percentageComplete = wordCount / wordCountValue; wordCounterProgress.style.height = percentageComplete * 100 + '%'; if ( percentageComplete >= 1 ) { wordCounterProgress.className = "progress complete"; } else { wordCounterProgress.className = "progress"; } } function selectFormat( e ) { if ( document.querySelectorAll('span.activesave').length > 0 ) { document.querySelector('span.activesave').className = ''; } document.querySelector('.saveoverlay h1').style.cssText = ''; var targ; if (!e) var e = window.event; if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement; // defeat Safari bug if (targ.nodeType == 3) { targ = targ.parentNode; } targ.className ='activesave'; saveFormat = targ.getAttribute('data-format'); var header = document.querySelector('header.header'); var headerText = header.innerHTML.replace(/(\r\n|\n|\r)/gm,"") + "\n"; var body = document.querySelector('article.content'); var bodyText = body.innerHTML; textToWrite = formatText(saveFormat,headerText,bodyText); var textArea = document.querySelector('.hiddentextbox'); textArea.value = textToWrite; textArea.focus(); textArea.select(); } function formatText( type, header, body ) { var text; switch( type ) { case 'html': header = "/g,"> ") .replace(/<\/blockquote>/g,"") .replace(/