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

Merge pull request #467 from vanillajonathan/patch-1

Browse Source 
Use classList.add and classList.remove
This commit is contained in:
Jeroen Akkerman 2022-06-16 10:47:54 +02:00 committed by GitHub
commit 3d6d56edef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/js/easymde.js
View File

@ -147,56 +147,12 @@ function fixShortcut(name) {
return name;
}
/**
* Class handling utility methods.
*/
var CLASS_REGEX = {};
/**
* Convert a className string into a regex for matching (and cache).
* Note that the RegExp includes trailing spaces for replacement
* (to ensure that removing a class from the middle of the string will retain
* spacing between other classes.)
* @param {String} className Class name to convert to regex for matching.
* @returns {RegExp} Regular expression option that will match className.
*/
function getClassRegex(className) {
return CLASS_REGEX[className] || (CLASS_REGEX[className] = new RegExp('\\s*' + className + '(\\s*)', 'g'));
}
/**
* Add a class string to an element.
* @param {Element} el DOM element on which to add className.
* @param {String} className Class string to apply
* @returns {void}
*/
function addClass(el, className) {
if (!el || !className) return;
var classRegex = getClassRegex(className);
if (el.className.match(classRegex)) return; // already applied
el.className += ' ' + className;
}
/**
* Remove a class string from an element.
* @param {Element} el DOM element from which to remove className.
* @param {String} className Class string to remove
* @returns {void}
*/
function removeClass(el, className) {
if (!el || !className) return;
var classRegex = getClassRegex(className);
if (!el.className.match(classRegex)) return; // not available to remove
el.className = el.className.replace(classRegex, '$1');
}
/**
* Create dropdown block
*/
function createToolbarDropdown(options, enableTooltips, shortcuts, parent) {
var el = createToolbarButton(options, false, enableTooltips, shortcuts, 'button', parent);
el.className += ' easymde-dropdown';
el.classList.add('easymde-dropdown');
el.onclick = function () {
el.focus();
@ -414,14 +370,14 @@ function toggleFullScreen(editor) {
var wrapper = cm.getWrapperElement();
var sidebyside = wrapper.nextSibling;
if (/editor-preview-active-side/.test(sidebyside.className)) {
if (sidebyside.classList.contains('editor-preview-active-side')) {
if (editor.options.sideBySideFullscreen === false) {
// if side-by-side not-fullscreen ok, apply classes as needed
var easyMDEContainer = wrapper.parentNode;
if (cm.getOption('fullScreen')) {
removeClass(easyMDEContainer, 'sided--no-fullscreen');
easyMDEContainer.classList.remove('sided--no-fullscreen');
} else {
addClass(easyMDEContainer, 'sided--no-fullscreen');
easyMDEContainer.classList.add('sided--no-fullscreen');
}
} else {
toggleSideBySide(editor);
@ -443,24 +399,13 @@ function toggleFullScreen(editor) {
}
}
// Update toolbar class
if (!/fullscreen/.test(editor.toolbar_div.className)) {
editor.toolbar_div.className += ' fullscreen';
} else {
editor.toolbar_div.className = editor.toolbar_div.className.replace(/\s*fullscreen\b/, '');
}
editor.toolbar_div.classList.toggle('fullscreen');
// Update toolbar button
if (editor.toolbarElements && editor.toolbarElements.fullscreen) {
var toolbarButton = editor.toolbarElements.fullscreen;
if (!/active/.test(toolbarButton.className)) {
toolbarButton.className += ' active';
} else {
toolbarButton.className = toolbarButton.className.replace(/\s*active\s*/g, '');
}
toolbarButton.classList.toggle('active');
}
}
@ -1001,16 +946,14 @@ function toggleSideBySide(editor) {
var easyMDEContainer = wrapper.parentNode;
if (/editor-preview-active-side/.test(preview.className)) {
if (preview.classList.contains('editor-preview-active-side')) {
if (editor.options.sideBySideFullscreen === false) {
// if side-by-side not-fullscreen ok, remove classes when hiding side
removeClass(easyMDEContainer, 'sided--no-fullscreen');
easyMDEContainer.classList.remove('sided--no-fullscreen');
}
preview.className = preview.className.replace(
/\s*editor-preview-active-side\s*/g, ''
);
if (toolbarButton) toolbarButton.className = toolbarButton.className.replace(/\s*active\s*/g, '');
wrapper.className = wrapper.className.replace(/\s*CodeMirror-sided\s*/g, ' ');
preview.classList.remove('editor-preview-active-side');
if (toolbarButton) toolbarButton.classList.remove('active');
wrapper.classList.remove('CodeMirror-sided');
} 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,
@ -1019,28 +962,26 @@ function toggleSideBySide(editor) {
if (!cm.getOption('fullScreen')) {
if (editor.options.sideBySideFullscreen === false) {
// if side-by-side not-fullscreen ok, add classes when not fullscreen and showing side
addClass(easyMDEContainer, 'sided--no-fullscreen');
easyMDEContainer.classList.add('sided--no-fullscreen');
} else {
toggleFullScreen(editor);
}
}
preview.className += ' editor-preview-active-side';
preview.classList.add('editor-preview-active-side');
}, 1);
if (toolbarButton) toolbarButton.className += ' active';
wrapper.className += ' CodeMirror-sided';
if (toolbarButton) toolbarButton.classList.add('active');
wrapper.classList.add('CodeMirror-sided');
useSideBySideListener = true;
}
// Hide normal preview if active
var previewNormal = wrapper.lastChild;
if (/editor-preview-active/.test(previewNormal.className)) {
previewNormal.className = previewNormal.className.replace(
/\s*editor-preview-active\s*/g, ''
);
if (previewNormal.classList.contains('editor-preview-active')) {
previewNormal.classList.remove('editor-preview-active');
var toolbar = editor.toolbarElements.preview;
var toolbar_div = editor.toolbar_div;
toolbar.className = toolbar.className.replace(/\s*active\s*/g, '');
toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview*/g, '');
toolbar.classList.remove('active');
toolbar_div.classList.remove('disabled-for-preview');
}
var sideBySideRenderingFunction = function () {
@ -1071,6 +1012,7 @@ function toggleSideBySide(editor) {
/**
* Preview action.
* @param editor {EasyMDE}
*/
function togglePreview(editor) {
var cm = editor.codemirror;
@ -1081,10 +1023,10 @@ function togglePreview(editor) {
// Turn off side by side if needed
var sidebyside = cm.getWrapperElement().nextSibling;
if (/editor-preview-active-side/.test(sidebyside.className))
if (sidebyside.classList.contains('editor-preview-active-side'))
toggleSideBySide(editor);
if (!preview || !/editor-preview-full/.test(preview.className)) {
if (!preview || !preview.classList.contains('editor-preview-full')) {
preview = document.createElement('div');
preview.className = 'editor-preview-full';
@ -1093,35 +1035,33 @@ function togglePreview(editor) {
if (Array.isArray(editor.options.previewClass)) {
for (var i = 0; i < editor.options.previewClass.length; i++) {
preview.className += (' ' + editor.options.previewClass[i]);
preview.classList.add(editor.options.previewClass[i]);
}
} else if (typeof editor.options.previewClass === 'string') {
preview.className += (' ' + editor.options.previewClass);
preview.classList.add(editor.options.previewClass);
}
}
wrapper.appendChild(preview);
}
if (/editor-preview-active/.test(preview.className)) {
preview.className = preview.className.replace(
/\s*editor-preview-active\s*/g, ''
);
if (preview.classList.contains('editor-preview-active')) {
preview.classList.remove('editor-preview-active');
if (toolbar) {
toolbar.className = toolbar.className.replace(/\s*active\s*/g, '');
toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview*/g, '');
toolbar.classList.remove('active');
toolbar_div.classList.remove('disabled-for-preview');
}
} 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,
// instead of just appearing.
setTimeout(function () {
preview.className += ' editor-preview-active';
preview.classList.add('editor-preview-active');
}, 1);
if (toolbar) {
toolbar.className += ' active';
toolbar_div.className += ' disabled-for-preview';
toolbar.classList.add('active');
toolbar_div.classList.add('disabled-for-preview');
}
}
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
@ -1129,7 +1069,7 @@ function togglePreview(editor) {
}
function _replaceSelection(cm, active, startEnd, url) {
if (/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
if (cm.getWrapperElement().lastChild.classList.contains('editor-preview-active'))
return;
var text;
@ -1166,7 +1106,7 @@ function _replaceSelection(cm, active, startEnd, url) {
function _toggleHeading(cm, direction, size) {
if (/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
if (cm.getWrapperElement().lastChild.classList.contains('editor-preview-active'))
return;
var startPoint = cm.getCursor('start');
@ -1236,7 +1176,7 @@ function _toggleHeading(cm, direction, size) {
function _toggleLine(cm, name, liststyle) {
if (/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
if (cm.getWrapperElement().lastChild.classList.contains('editor-preview-active'))
return;
var listRegexp = /^(\s*)(\*|-|\+|\d*\.)(\s+)/;
@ -1314,8 +1254,11 @@ function _toggleLine(cm, name, liststyle) {
cm.focus();
}
/**
* @param {EasyMDE} editor
*/
function _toggleBlock(editor, type, start_chars, end_chars) {
if (/editor-preview-active/.test(editor.codemirror.getWrapperElement().lastChild.className))
if (editor.codemirror.getWrapperElement().lastChild.classList.contains('editor-preview-active'))
return;
end_chars = (typeof end_chars === 'undefined') ? start_chars : end_chars;
@ -1384,7 +1327,7 @@ function _toggleBlock(editor, type, start_chars, end_chars) {
}
function _cleanBlock(cm) {
if (/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
if (cm.getWrapperElement().lastChild.classList.contains('editor-preview-active'))
return;
var startPoint = cm.getCursor('start');
@ -2547,7 +2490,7 @@ EasyMDE.prototype.createSideBySide = function () {
var wrapper = cm.getWrapperElement();
var preview = wrapper.nextSibling;
if (!preview || !/editor-preview-side/.test(preview.className)) {
if (!preview || !preview.classList.contains('editor-preview-side')) {
preview = document.createElement('div');
preview.className = 'editor-preview-side';
@ -2555,11 +2498,11 @@ EasyMDE.prototype.createSideBySide = function () {
if (Array.isArray(this.options.previewClass)) {
for (var i = 0; i < this.options.previewClass.length; i++) {
preview.className += (' ' + this.options.previewClass[i]);
preview.classList.add(this.options.previewClass[i]);
}
} else if (typeof this.options.previewClass === 'string') {
preview.className += (' ' + this.options.previewClass);
preview.classList.add(this.options.previewClass);
}
}
@ -2693,9 +2636,9 @@ EasyMDE.prototype.createToolbar = function (items) {
(function (key) {
var el = toolbarData[key];
if (stat[key]) {
el.className += ' active';
el.classList.add('active');
} else if (key != 'fullscreen' && key != 'side-by-side') {
el.className = el.className.replace(/\s*active\s*/g, '');
el.classList.remove('active');
}
})(key);
}
@ -2973,7 +2916,7 @@ EasyMDE.prototype.isPreviewActive = function () {
var wrapper = cm.getWrapperElement();
var preview = wrapper.lastChild;
return /editor-preview-active/.test(preview.className);
return preview.classList.contains('editor-preview-active');
};
EasyMDE.prototype.isSideBySideActive = function () {
@ -2981,7 +2924,7 @@ EasyMDE.prototype.isSideBySideActive = function () {
var wrapper = cm.getWrapperElement();
var preview = wrapper.nextSibling;
return /editor-preview-active-side/.test(preview.className);
return preview.classList.contains('editor-preview-active-side');
};
EasyMDE.prototype.isFullscreenActive = function () {