From 69c8610dce41eabad58ba5c20f094554c78785fe Mon Sep 17 00:00:00 2001
From: Marijn Haverbeke <marijnh@gmail.com>
Date: Tue, 20 Aug 2013 16:40:08 +0200
Subject: [PATCH] [fullscreen addon] Add
---
addon/display/fullscreen.css | 6 +++++
addon/display/fullscreen.js | 26 ++++++++++++++++++++
demo/fullscreen.html | 46 ++++++++----------------------------
doc/compress.html | 1 +
doc/manual.html | 7 ++++++
5 files changed, 50 insertions(+), 36 deletions(-)
create mode 100644 addon/display/fullscreen.css
create mode 100644 addon/display/fullscreen.js
diff --git a/addon/display/fullscreen.css b/addon/display/fullscreen.css
new file mode 100644
index 000000000..00ad677ff
--- /dev/null
+++ b/addon/display/fullscreen.css
@@ -0,0 +1,6 @@
+.CodeMirror-fullscreen {
+ position: fixed;
+ top: 0; left: 0; right: 0; bottom: 0;
+ height: auto;
+ z-index: 9999;
+}
diff --git a/addon/display/fullscreen.js b/addon/display/fullscreen.js
new file mode 100644
index 000000000..1ceee327d
--- /dev/null
+++ b/addon/display/fullscreen.js
@@ -0,0 +1,26 @@
+(function() {
+ "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) {
+ cm.state.restoreScreenScrollPos = {top: window.pageYOffset, left: window.pageXOffset};
+ cm.getWrapperElement().className += " CodeMirror-fullscreen";
+ document.documentElement.style.overflow = "hidden";
+ cm.refresh();
+ }
+
+ function setNormal(cm) {
+ var wrap = cm.getWrapperElement();
+ wrap.className = wrap.className.replace(/\s*CodeMirror-fullscreen\b/, "");
+ document.documentElement.style.overflow = "";
+ var scroll = cm.state.restoreScreenScrollPos;
+ window.scrollTo(scroll.left, scroll.top);
+ cm.refresh();
+ }
+})();
diff --git a/demo/fullscreen.html b/demo/fullscreen.html
index 8cf8005bd..827d55d0c 100644
--- a/demo/fullscreen.html
+++ b/demo/fullscreen.html
@@ -5,18 +5,12 @@
<link rel=stylesheet href="../doc/docs.css">
<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../addon/display/fullscreen.css">
<link rel="stylesheet" href="../theme/night.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
-<style type="text/css">
- .CodeMirror-fullscreen {
- display: block;
- position: absolute;
- top: 0; left: 0;
- width: 100%;
- z-index: 9999;
- }
- </style>
+<script src="../addon/display/fullscreen.js"></script>
+
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
@@ -114,43 +108,23 @@
</textarea></form>
<script>
- function isFullScreen(cm) {
- return /\bCodeMirror-fullscreen\b/.test(cm.getWrapperElement().className);
- }
- function winHeight() {
- return window.innerHeight || (document.documentElement || document.body).clientHeight;
- }
- function setFullScreen(cm, full) {
- var wrap = cm.getWrapperElement();
- if (full) {
- wrap.className += " CodeMirror-fullscreen";
- wrap.style.height = winHeight() + "px";
- document.documentElement.style.overflow = "hidden";
- } else {
- wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
- wrap.style.height = "";
- document.documentElement.style.overflow = "";
- }
- cm.refresh();
- }
- CodeMirror.on(window, "resize", function() {
- var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
- if (!showing) return;
- showing.CodeMirror.getWrapperElement().style.height = winHeight() + "px";
- });
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
theme: "night",
extraKeys: {
"F11": function(cm) {
- setFullScreen(cm, !isFullScreen(cm));
+ cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
- if (isFullScreen(cm)) setFullScreen(cm, false);
+ if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
</script>
- <p>Press <strong>F11</strong> when cursor is in the editor to toggle full screen editing. <strong>Esc</strong> can also be used to <i>exit</i> full screen editing.</p>
+ <p>Demonstration of
+ the <a href="../doc/manual.html#addon_fullscreen">fullscreen</a>
+ addon. Press <strong>F11</strong> when cursor is in the editor to
+ toggle full screen editing. <strong>Esc</strong> can also be used
+ to <i>exit</i> full screen editing.</p>
</article>
diff --git a/doc/compress.html b/doc/compress.html
index fbb559e4c..f4d766b8c 100644
--- a/doc/compress.html
+++ b/doc/compress.html
@@ -157,6 +157,7 @@
<option value="http://codemirror.net/addon/edit/continuelist.js">continuelist.js</option>
<option value="http://codemirror.net/addon/dialog/dialog.js">dialog.js</option>
<option value="http://codemirror.net/addon/fold/foldcode.js">foldcode.js</option>
+ <option value="http://codemirror.net/addon/display/fullscreen.js">fullscreen.js</option>
<option value="http://codemirror.net/addon/hint/html-hint.js">html-hint.js</option>
<option value="http://codemirror.net/addon/fold/indent-fold.js">indent-fold.js</option>
<option value="http://codemirror.net/addon/hint/javascript-hint.js">javascript-hint.js</option>
diff --git a/doc/manual.html b/doc/manual.html
index c1cf9f9c6..0541c8937 100644
--- a/doc/manual.html
+++ b/doc/manual.html
@@ -2114,6 +2114,13 @@
whenever it doesn't contain any text.
See <a href="../demo/placeholder.html">the demo</a>.</dd>
+ <dt id="addon_fullscreen"><a href="../addon/display/fullscreen.js"><code>display/fullscreen.js</code></a></dt>
+ <dd>Defines an option <code>fullScreen</code> that, when set
+ to <code>true</code>, will make the editor full-screen (as in,
+ taking up the whole browser window). Depends
+ on <a href="../addon/display/fullscreen.css"><code>fullscreen.css</code></a>. <a href="../demo/fullscreen.html">Demo
+ here</a>.</dd>
+
<dt id="addon_merge"><a href="../addon/merge/merge.js"><code>merge/merge.js</code></a></dt>
<dd>Implements an interface for merging changes, using either a
2-way or a 3-way view. The <code>CodeMirror.MergeView</code>
--
GitLab