Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-10-31 00:32:16 -06:00
Code Issues Releases Wiki Activity

handle fullscreen toggle consistently by adusting toggleSideBySide

Browse Source
This commit is contained in:
Steve 2021-03-15 19:30:56 -07:00
parent abbec5bde1
commit 61e93a3d53
2 changed files with 96 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
example/index_sideBySideFullscreenFalse.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Example / Preview / sideBySideFullscreen : true</title>
<link rel="stylesheet" href="../dist/easymde.min.css">
<script src="../dist/easymde.min.js"></script>
</head>
<body>
<textarea></textarea>
<script>
var easyMDE = new EasyMDE({sideBySideFullscreen: false});
</script>
</body>
</html>

78
src/js/easymde.js
View File

@ -323,7 +323,6 @@ function toggleFullScreen(editor) {
var cm = editor.codemirror; var cm = editor.codemirror;
cm.setOption('fullScreen', !cm.getOption('fullScreen')); cm.setOption('fullScreen', !cm.getOption('fullScreen'));
// Prevent scrolling on body during fullscreen active // Prevent scrolling on body during fullscreen active
if (cm.getOption('fullScreen')) { if (cm.getOption('fullScreen')) {
saved_overflow = document.body.style.overflow; saved_overflow = document.body.style.overflow;
@ -334,11 +333,9 @@ function toggleFullScreen(editor) {
var sidebyside = cm.getWrapperElement().nextSibling; var sidebyside = cm.getWrapperElement().nextSibling;
// Hide side by side if needed, retain current state if sideBySideFullscreen is disabled // if (/editor-preview-active-side/.test(sidebyside.className)) {
if (editor.options.sideBySideFullscreen !== false) { toggleSideBySide(editor, true);
if (/editor-preview-active-side/.test(sidebyside.className)) // }
toggleSideBySide(editor);
}
if (editor.options.onToggleFullScreen) { if (editor.options.onToggleFullScreen) {
editor.options.onToggleFullScreen(cm.getOption('fullScreen') || false); editor.options.onToggleFullScreen(cm.getOption('fullScreen') || false);
@ -873,15 +870,22 @@ function redo(editor) {
/** /**
* Toggle side by side preview * Toggle side by side preview.
* Note: If triggered by fullscreen toggle and sideBySideFullscreen === false,
* `sideBySide` is not actually toggled, but classes are reapplied as needed.
* @param {EasyMDE} editor - The EasyMDE object
* @param {boolean} triggeredByFullscreenToggle If triggered by fullscreen toggle.
*/ */
function toggleSideBySide(editor) { function toggleSideBySide(editor, triggeredByFullscreenToggle) {
var cm = editor.codemirror; var cm = editor.codemirror;
var wrapper = cm.getWrapperElement(); var wrapper = cm.getWrapperElement();
var preview = wrapper.nextSibling; var preview = wrapper.nextSibling;
var toolbarButton = editor.toolbarElements && editor.toolbarElements['side-by-side']; var toolbarButton = editor.toolbarElements && editor.toolbarElements['side-by-side'];
var useSideBySideListener = false; var useSideBySideListener = false;
// if triggered by fullscreen toggle and sideBySideFullscreen === false, don't toggle
var dontToggle = editor.options.sideBySideFullscreen === false && triggeredByFullscreenToggle;
var noFullscreenItems = [ var noFullscreenItems = [
wrapper.parentNode, // easyMDEContainer wrapper.parentNode, // easyMDEContainer
editor.gui.toolbar, editor.gui.toolbar,
@ -891,42 +895,65 @@ function toggleSideBySide(editor) {
]; ];
function addNoFullscreenClass(el) { function addNoFullscreenClass(el) {
if (el != null) {
el.className += ' sided--no-fullscreen'; el.className += ' sided--no-fullscreen';
} }
}
function removeNoFullscreenClass(el) { function removeNoFullscreenClass(el) {
if (el != null) { if (el != null) {
el.className = el.className.replace( el.className = el.className.replace(
/\s*sided--no-fullscreen\s*/g, '' // retain spaces after the class
// in case there are subsequent classes
/\s*sided--no-fullscreen(\s*)/g, '$1'
); );
} }
} }
if (/editor-preview-active-side/.test(preview.className)) { // helper method to add/remove no-fullscreen classes as appropriate
if (cm.getOption('sideBySideNoFullscreen')) { function setupNoFullscreenClasses(previewActive) {
cm.setOption('sideBySideNoFullscreen', false); if (editor.options.sideBySideFullscreen === false) {
if (!cm.getOption('fullScreen') && previewActive) {
noFullscreenItems.forEach(function(el) {
addNoFullscreenClass(el);
});
} else {
noFullscreenItems.forEach(function (el) { noFullscreenItems.forEach(function (el) {
removeNoFullscreenClass(el); removeNoFullscreenClass(el);
}); });
} }
}
}
if (/editor-preview-active-side/.test(preview.className)) {
// If side-by-side active...
if (dontToggle) {
// if not toggling, cleanup noFullscreen classes as needed
setupNoFullscreenClasses(true);
} else {
// otherwise close side-by-side, and cleanup noFullscreen classes as needed
setupNoFullscreenClasses(false);
preview.className = preview.className.replace( preview.className = preview.className.replace(
/\s*editor-preview-active-side\s*/g, '' /\s*editor-preview-active-side\s*/g, ''
); );
if (toolbarButton) toolbarButton.className = toolbarButton.className.replace(/\s*active\s*/g, ''); if (toolbarButton) toolbarButton.className = toolbarButton.className.replace(/\s*active\s*/g, '');
wrapper.className = wrapper.className.replace(/\s*CodeMirror-sided\s*/g, ' '); wrapper.className = wrapper.className.replace(/\s*CodeMirror-sided\s*/g, ' ');
}
} else { } else {
// When the preview button is clicked for the first time, // If side-by-side not active...
// give some time for the transition from editor.css to fire and the view to slide from right to left, if (dontToggle) {
// instead of just appearing. // if not toggling, cleanup noFullscreen classes as needed
setupNoFullscreenClasses(false);
} else {
// otherwise open side-by-side, and setup noFullscreen classes as needed
setTimeout(function () { setTimeout(function () {
// 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,
// instead of just appearing.
if (!cm.getOption('fullScreen')) { if (!cm.getOption('fullScreen')) {
if (editor.options.sideBySideFullscreen === false) { if (editor.options.sideBySideFullscreen === false) {
cm.setOption('sideBySideNoFullscreen', true); setupNoFullscreenClasses(true);
noFullscreenItems.forEach(function(el) {
if (el != null) {
addNoFullscreenClass(el);
}
});
} else { } else {
toggleFullScreen(editor); toggleFullScreen(editor);
} }
@ -937,10 +964,12 @@ function toggleSideBySide(editor) {
wrapper.className += ' CodeMirror-sided'; wrapper.className += ' CodeMirror-sided';
useSideBySideListener = true; useSideBySideListener = true;
} }
}
// Hide normal preview if active
// Hide normal (full-pane) preview if active
var previewNormal = wrapper.lastChild; var previewNormal = wrapper.lastChild;
if (/editor-preview-active/.test(previewNormal.className)) { if (!dontToggle && /editor-preview-active/.test(previewNormal.className)) {
previewNormal.className = previewNormal.className.replace( previewNormal.className = previewNormal.className.replace(
/\s*editor-preview-active\s*/g, '' /\s*editor-preview-active\s*/g, ''
); );
@ -991,8 +1020,8 @@ function togglePreview(editor) {
if (/editor-preview-active-side/.test(sidebyside.className)) if (/editor-preview-active-side/.test(sidebyside.className))
toggleSideBySide(editor); toggleSideBySide(editor);
// Construct preview element if it doesn't exist
if (!preview || !/editor-preview-full/.test(preview.className)) { if (!preview || !/editor-preview-full/.test(preview.className)) {
preview = document.createElement('div'); preview = document.createElement('div');
preview.className = 'editor-preview-full'; preview.className = 'editor-preview-full';
@ -1011,6 +1040,7 @@ function togglePreview(editor) {
wrapper.appendChild(preview); wrapper.appendChild(preview);
} }
// Toggle display of preview depending on current state
if (/editor-preview-active/.test(preview.className)) { if (/editor-preview-active/.test(preview.className)) {
preview.className = preview.className.replace( preview.className = preview.className.replace(
/\s*editor-preview-active\s*/g, '' /\s*editor-preview-active\s*/g, ''