mirror of
https://github.com/sparksuite/simplemde-markdown-editor.git
synced 2024-06-15 20:25:17 +02:00
Support fullscreen (including new toolbar button)
This commit is contained in:
parent
1aad2dec4c
commit
fc6fd13025
|
@ -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
|
||||
|
||||
|
|
44
source files/codemirror/fullscreen.js
Normal file
44
source files/codemirror/fullscreen.js
Normal file
|
@ -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();
|
||||
}
|
||||
});
|
|
@ -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() {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue