Support fullscreen (including new toolbar button)

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
 

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();
+  }
+});

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();
+	var cm = editor.codemirror;
-
+	cm.setOption("fullScreen", !cm.getOption("fullScreen"));
-	// https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode
+	
-	var doc = document;
+	var toolbarButton = editor.toolbarElements.fullscreen;
-	var isFull = doc.fullScreen || doc.mozFullScreen || doc.webkitFullScreen;
+	
-	var request = function() {
+	if (!/active/.test(toolbarButton.className)) {
-		if (el.requestFullScreen) {
+		toolbarButton.className += " active";
-			el.requestFullScreen();
+	}
-		} else if (el.mozRequestFullScreen) {
+	else {
-			el.mozRequestFullScreen();
+		toolbarButton.className = toolbarButton.className.replace(/\s*active\s*/g, '');
-		} 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();
 	}
 }
 
@@ -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["Tab"] = "tabAndIndentContinueMarkdownList";
-	keyMaps['Shift-Tab'] = 'shiftTabAndIndentContinueMarkdownList';
+	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() {

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;