Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-07-14 13:34:28 -06:00
Code Issues Releases Wiki Activity

Adjust sideBySide with no fullscreen and maxHeight option

Browse Source
This commit is contained in:
Nick Denry 2020-06-01 15:44:57 +03:00
parent f85afc44e1
commit f3b1090e53
2 changed files with 99 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/css/easymde.css
View File

@ -1,3 +1,13 @@
.EasyMDEContainer {
display: block;
}
.EasyMDEContainer.sided--no-fullscreen {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.CodeMirror {
box-sizing: border-box;
height: auto;
@ -31,10 +41,10 @@
width: 50% !important;
}
.CodeMirror-sided--no-fullscreen {
.CodeMirror-sided.sided--no-fullscreen {
border-right: none!important;
position: relative;
float: left;
flex: 1 1 auto;
}
.CodeMirror-placeholder {
@ -122,6 +132,10 @@
padding: 0;
}
.editor-toolbar.sided--no-fullscreen {
width: 100%;
}
.editor-toolbar button, .editor-toolbar .easymde-dropdown {
background: transparent;
display: inline-block;
@ -202,7 +216,7 @@
}
.editor-statusbar.sided--no-fullscreen {
clear: both;
width: 100%;
}
.editor-statusbar span {
@ -253,10 +267,10 @@
display: block
}
.editor-preview-active-side--no-fullscreen {
.editor-preview-active-side.sided--no-fullscreen {
flex: 1 1 auto;
height: auto;
position: static;
float: right;
}
.editor-preview-active {

107
src/js/easymde.js
View File

@ -332,6 +332,29 @@ function toggleFullScreen(editor) {
}
// Hide side by side if needed
var sidebyside = cm.getWrapperElement().nextSibling;
if (/editor-preview-active-side/.test(sidebyside.className))
toggleSideBySide(editor);
if (editor.options.onToggleFullScreen) {
editor.options.onToggleFullScreen(cm.getOption('fullScreen') || false);
}
// Remove or set maxHeight
if (cm.getOption('fullScreen')) {
if (editor.options.maxHeight !== false) {
cm.getScrollerElement().style.removeProperty('height');
sidebyside.style.removeProperty('height');
}
} else {
if (editor.options.maxHeight !== false) {
cm.getScrollerElement().style.height = editor.options.maxHeight;
editor.setPreviewMaxHeight();
}
}
// Update toolbar class
if (!/fullscreen/.test(editor.toolbar_div.className)) {
editor.toolbar_div.className += ' fullscreen';
@ -350,16 +373,6 @@ function toggleFullScreen(editor) {
toolbarButton.className = toolbarButton.className.replace(/\s*active\s*/g, '');
}
}
// Hide side by side if needed
var sidebyside = cm.getWrapperElement().nextSibling;
if (/editor-preview-active-side/.test(sidebyside.className))
toggleSideBySide(editor);
if (editor.options.onToggleFullScreen) {
editor.options.onToggleFullScreen(cm.getOption('fullScreen') || false);
}
}
@ -857,18 +870,31 @@ function toggleSideBySide(editor) {
var preview = wrapper.nextSibling;
var toolbarButton = editor.toolbarElements && editor.toolbarElements['side-by-side'];
var useSideBySideListener = false;
var noFullscreenItems = [
wrapper.parentNode, // easyMDEContainer
editor.gui.toolbar,
wrapper,
preview,
editor.gui.statusbar,
];
function addNoFullscreenClass(el) {
el.className += ' sided--no-fullscreen';
}
function removeNoFullscreenClass(el) {
el.className = el.className.replace(
/\s*sided--no-fullscreen\s*/g, ''
);
}
if (/editor-preview-active-side/.test(preview.className)) {
if (cm.getOption('sideBySideFullscreen')) {
cm.setOption('sideBySideFullscreen', false);
wrapper.className = wrapper.className.replace(
/\s*CodeMirror-sided--no-fullscreen\s*/g, ''
);
preview.className = preview.className.replace(
/\s*editor-preview-active-side--no-fullscreen\s*/g, ''
);
editor.gui.statusbar.className = editor.gui.statusbar.className.replace(
/\s*sided--no-fullscreen\s*/g, ''
);
noFullscreenItems.forEach(function (el) {
removeNoFullscreenClass(el);
});
}
preview.className = preview.className.replace(
/\s*editor-preview-active-side\s*/g, ''
@ -883,9 +909,9 @@ function toggleSideBySide(editor) {
if (!cm.getOption('fullScreen')) {
if (editor.options.sideBySideFullscreen === false) {
cm.setOption('sideBySideFullscreen', true);
wrapper.className += ' CodeMirror-sided--no-fullscreen';
preview.className += ' editor-preview-active-side--no-fullscreen';
editor.gui.statusbar.className += ' sided--no-fullscreen';
noFullscreenItems.forEach(function(el) {
addNoFullscreenClass(el);
});
} else {
toggleFullScreen(editor);
}
@ -1692,6 +1718,7 @@ function EasyMDE(options) {
options.shortcuts = extend({}, shortcuts, options.shortcuts || {});
options.minHeight = options.minHeight || '300px';
options.maxHeight = options.maxHeight || false;
options.errorCallback = options.errorCallback || function (errorMessage) {
alert(errorMessage);
@ -1979,6 +2006,10 @@ EasyMDE.prototype.render = function (el) {
this.codemirror.getScrollerElement().style.minHeight = options.minHeight;
if (options.maxHeight !== false) {
this.codemirror.getScrollerElement().style.height = options.maxHeight;
}
if (options.forceSync === true) {
var cm = this.codemirror;
cm.on('change', function () {
@ -1988,6 +2019,14 @@ EasyMDE.prototype.render = function (el) {
this.gui = {};
// Wrap Codemirror with container before create toolbar, etc,
// to use with sideBySideFullscreen option.
var easyMDEContainer = document.createElement('div');
easyMDEContainer.classList.add('EasyMDEContainer');
var cmWrapper = this.codemirror.getWrapperElement();
cmWrapper.parentNode.insertBefore(easyMDEContainer, cmWrapper);
easyMDEContainer.appendChild(cmWrapper);
if (options.toolbar !== false) {
this.gui.toolbar = this.createToolbar();
}
@ -2249,6 +2288,21 @@ EasyMDE.prototype.uploadImageUsingCustomFunction = function(imageUploadFunction,
imageUploadFunction(file, onSuccess, onError);
};
EasyMDE.prototype.setPreviewMaxHeight = function() {
var cm = this.codemirror;
var wrapper = cm.getWrapperElement();
var preview = wrapper.nextSibling;
// Calc preview max height
var paddingTop = parseInt(window.getComputedStyle(wrapper).paddingTop);
var borderTopWidth = parseInt(window.getComputedStyle(wrapper).borderTopWidth);
var optionsMaxHeight = parseInt(this.options.maxHeight);
var wrapperMaxHeight = optionsMaxHeight + paddingTop * 2 + borderTopWidth * 2;
var previewMaxHeight = wrapperMaxHeight.toString() + 'px';
preview.style.height = previewMaxHeight;
};
EasyMDE.prototype.createSideBySide = function () {
var cm = this.codemirror;
var wrapper = cm.getWrapperElement();
@ -2257,11 +2311,10 @@ EasyMDE.prototype.createSideBySide = function () {
if (!preview || !/editor-preview-side/.test(preview.className)) {
preview = document.createElement('div');
preview.className = 'editor-preview-side';
var optionsMinHeight = parseInt(this.options.minHeight);
var paddingTop = parseInt(window.getComputedStyle(wrapper).paddingTop);
var borderTopWidth = parseInt(window.getComputedStyle(wrapper).borderTopWidth);
var minHeight = optionsMinHeight + paddingTop * 2 + borderTopWidth * 2;
preview.style.minHeight = minHeight.toString() + 'px';
if (this.options.maxHeight !== false) {
this.setPreviewMaxHeight();
}
if (this.options.previewClass) {