diff --git a/README.md b/README.md index a44fa40..2443bca 100644 --- a/README.md +++ b/README.md @@ -100,6 +100,7 @@ numbered-list | toggleOrderedList | fa fa-list-ol | Numbered List (Ctrl+Alt+L) link | drawLink | fa fa-link | Create Link (Ctrl+K) image | drawImage | fa fa-picture-o | Insert Image (Ctrl+Alt+I) horizontal-rule | drawHorizontalRule | fa fa-minus | Insert Horizontal Line +fullscreen | toggleFullScreen | fa fa-arrows-alt | Toggle Fullscreen (F11) preview | togglePreview | fa fa-eye | Toggle Preview (Ctrl+P) guide | [This link](http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide) | fa fa-question-circle | Markdown Guide diff --git a/source files/codemirror/fullscreen.js b/source files/codemirror/fullscreen.js new file mode 100644 index 0000000..85508b7 --- /dev/null +++ b/source files/codemirror/fullscreen.js @@ -0,0 +1,44 @@ +// NOTE: This has been modified from the original version to add fullscreen class to the status bar too + + + +(function(mod) { + if (typeof exports == "object" && typeof module == "object") // CommonJS + mod(require("../../lib/codemirror")); + else if (typeof define == "function" && define.amd) // AMD + define(["../../lib/codemirror"], mod); + else // Plain browser env + mod(CodeMirror); +})(function(CodeMirror) { + "use strict"; + + CodeMirror.defineOption("fullScreen", false, function(cm, val, old) { + if (old == CodeMirror.Init) old = false; + if (!old == !val) return; + if (val) setFullscreen(cm); + else setNormal(cm); + }); + + function setFullscreen(cm) { + var wrap = cm.getWrapperElement(); + cm.state.fullScreenRestore = {scrollTop: window.pageYOffset, scrollLeft: window.pageXOffset, + width: wrap.style.width, height: wrap.style.height}; + wrap.style.width = ""; + wrap.style.height = "auto"; + wrap.className += " CodeMirror-fullscreen"; + document.documentElement.style.overflow = "hidden"; + document.getElementsByClassName("editor-toolbar")[0].className += " fullscreen"; + cm.refresh(); + } + + function setNormal(cm) { + var wrap = cm.getWrapperElement(); + wrap.className = wrap.className.replace(/\s*CodeMirror-fullscreen\b/, ""); + document.documentElement.style.overflow = ""; + var info = cm.state.fullScreenRestore; + wrap.style.width = info.width; wrap.style.height = info.height; + window.scrollTo(info.scrollLeft, info.scrollTop); + document.getElementsByClassName("editor-toolbar")[0].className = document.getElementsByClassName("editor-toolbar")[0].className.replace(/\s*fullscreen\b/, ""); + cm.refresh(); + } +}); \ No newline at end of file diff --git a/source files/simplemde.js b/source files/simplemde.js index d66f544..9c4df6d 100644 --- a/source files/simplemde.js +++ b/source files/simplemde.js @@ -94,33 +94,16 @@ function getState(cm, pos) { * Toggle full screen of the editor. */ function toggleFullScreen(editor) { - var el = editor.codemirror.getWrapperElement(); - - // https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode - var doc = document; - var isFull = doc.fullScreen || doc.mozFullScreen || doc.webkitFullScreen; - var request = function() { - if (el.requestFullScreen) { - el.requestFullScreen(); - } else if (el.mozRequestFullScreen) { - el.mozRequestFullScreen(); - } else if (el.webkitRequestFullScreen) { - el.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); - } - }; - var cancel = function() { - if (doc.cancelFullScreen) { - doc.cancelFullScreen(); - } else if (doc.mozCancelFullScreen) { - doc.mozCancelFullScreen(); - } else if (doc.webkitCancelFullScreen) { - doc.webkitCancelFullScreen(); - } - }; - if (!isFull) { - request(); - } else if (cancel) { - cancel(); + var cm = editor.codemirror; + cm.setOption("fullScreen", !cm.getOption("fullScreen")); + + var toolbarButton = editor.toolbarElements.fullscreen; + + if (!/active/.test(toolbarButton.className)) { + toolbarButton.className += " active"; + } + else { + toolbarButton.className = toolbarButton.className.replace(/\s*active\s*/g, ''); } } @@ -229,7 +212,7 @@ function redo(editor) { */ function togglePreview(editor) { var toolbar_div = document.getElementsByClassName('editor-toolbar')[0]; - var toolbar = editor.toolbar.preview; + var toolbar = editor.toolbarElements.preview; var parse = editor.constructor.markdown; var cm = editor.codemirror; var wrapper = cm.getWrapperElement(); @@ -244,7 +227,7 @@ function togglePreview(editor) { /\s*editor-preview-active\s*/g, '' ); toolbar.className = toolbar.className.replace(/\s*active\s*/g, ''); - toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview\s*/g, ''); + toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview*/g, ''); } else { /* When the preview button is clicked for the first time, * give some time for the transition from editor.css to fire and the view to slide from right to left, @@ -453,6 +436,12 @@ var toolbar = [{ className: "fa fa-eye", title: "Toggle Preview (Ctrl+P)", }, + { + name: "fullscreen", + action: toggleFullScreen, + className: "fa fa-arrows-alt", + title: "Toggle Fullscreen (F11)", + }, { name: "guide", action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide", @@ -527,8 +516,14 @@ SimpleMDE.prototype.render = function(el) { } keyMaps["Enter"] = "newlineAndIndentContinueMarkdownList"; - keyMaps['Tab'] = 'tabAndIndentContinueMarkdownList'; - keyMaps['Shift-Tab'] = 'shiftTabAndIndentContinueMarkdownList'; + keyMaps["Tab"] = "tabAndIndentContinueMarkdownList"; + keyMaps["Shift-Tab"] = "shiftTabAndIndentContinueMarkdownList"; + keyMaps["F11"] = function(cm) { + toggleFullScreen(cm); + }; + keyMaps["Esc"] = function(cm) { + if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); + }; var mode = "spell-checker"; var backdrop = "gfm"; @@ -657,6 +652,8 @@ SimpleMDE.prototype.createToolbar = function(items) { bar.appendChild(el); })(items[i]); } + + self.toolbarElements = toolbar_data; var cm = this.codemirror; cm.on('cursorActivity', function() { diff --git a/source files/theme.css b/source files/theme.css index de2331b..5bb8f45 100644 --- a/source files/theme.css +++ b/source files/theme.css @@ -11,6 +11,17 @@ min-height: 300px } +.CodeMirror-fullscreen { + background:#fff; + position: fixed !important; + top: 50px; + left: 0; + right: 0; + bottom: 0; + height: auto; + z-index: 9; +} + :-webkit-full-screen { background: #f9f9f5; padding: .5em 1em; @@ -74,6 +85,16 @@ opacity: .8 } +.editor-toolbar.fullscreen { + width: 100%; + background: #fff; + border: 0; + position: fixed; + top: 0; + left: 0; + opacity: 1; +} + .editor-toolbar a { display: inline-block; text-align: center; @@ -111,7 +132,7 @@ right: 10px; } -.editor-toolbar.disabled-for-preview a:not(.fa-eye) { +.editor-toolbar.disabled-for-preview a:not(.fa-eye):not(.fa-arrows-alt) { pointer-events: none; background: #fff; border: none;