2
0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-07-05 09:04:28 -06:00

Add simple class handling utiltity to DRY adding/removing class names.

Note that this isn't necessary and can be rolled back, but could be used throughout the code to make class handling more clear and consistent.
This commit is contained in:
Steve 2021-03-17 11:17:14 -07:00
parent 82a8e4a8ce
commit b61fe7945a

View File

@ -138,6 +138,50 @@ 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
*/
@ -340,9 +384,9 @@ function toggleFullScreen(editor) {
// if side-by-side not-fullscreen ok, apply classes as needed
var easyMDEContainer = wrapper.parentNode;
if (cm.getOption('fullScreen')) {
easyMDEContainer.className = easyMDEContainer.className.replace(/\s*sided--no-fullscreen(\s*)/g, '$1');
removeClass(easyMDEContainer, 'sided--no-fullscreen');
} else {
easyMDEContainer.className += ' sided--no-fullscreen';
addClass(easyMDEContainer, 'sided--no-fullscreen');
}
} else {
toggleSideBySide(editor);
@ -896,7 +940,7 @@ function toggleSideBySide(editor) {
if (/editor-preview-active-side/.test(preview.className)) {
if (editor.options.sideBySideFullscreen === false) {
// if side-by-side not-fullscreen ok, remove classes when hiding side
easyMDEContainer.className = easyMDEContainer.className.replace(/\s*sided--no-fullscreen(\s*)/g, '$1');
removeClass(easyMDEContainer, 'sided--no-fullscreen');
}
preview.className = preview.className.replace(
/\s*editor-preview-active-side\s*/g, ''
@ -911,7 +955,7 @@ 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
easyMDEContainer.className += ' sided--no-fullscreen';
addClass(easyMDEContainer, 'sided--no-fullscreen');
} else {
toggleFullScreen(editor);
}