Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use classList.add and classList.remove #467

Merged
merged 2 commits into from
Jun 16, 2022
Merged

Use classList.add and classList.remove #467

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
23f241b
Use classList.add and classList.remove
vanillajonathan May 23, 2022
7338ddb
Replace remaining className usages
Ionaru May 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Replace remaining className usages
  • Loading branch information
@Ionaru
Ionaru committed May 24, 2022
commit 7338ddb6e31e30a017c8007a7bdd4db3fa555310
115 changes: 32 additions & 83 deletions src/js/easymde.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -245,7 +201,7 @@ function createToolbarButton(options, enableActions, enableTooltips, shortcuts,
if (options.text) {
el.innerText = options.text;
}

// Properly handle custom shortcuts
if (options.name && options.name in shortcuts) {
bindings[options.name] = options.action;
Expand All @@ -263,7 +219,7 @@ function createToolbarButton(options, enableActions, enableTooltips, shortcuts,
if (options.title) {
el.setAttribute('aria-label', options.title);
}

if (options.noDisable) {
el.classList.add('no-disable');
}
Expand Down Expand Up @@ -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);
Expand All @@ -443,24 +399,13 @@ function toggleFullScreen(editor) {
}
}


// Update toolbar class
if (!/fullscreen/.test(editor.toolbar_div.className)) {
editor.toolbar_div.classList.add('fullscreen');
} else {
editor.toolbar_div.classList.remove('fullscreen');
}

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.classList.add('active');
} else {
toolbarButton.classList.remove('active');
}
toolbarButton.classList.toggle('active');
}
}

Expand Down Expand Up @@ -1001,10 +946,10 @@ 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.classList.remove('editor-preview-active-side');
if (toolbarButton) toolbarButton.classList.remove('active');
Expand All @@ -1017,7 +962,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
addClass(easyMDEContainer, 'sided--no-fullscreen');
easyMDEContainer.classList.add('sided--no-fullscreen');
} else {
toggleFullScreen(editor);
}
Expand All @@ -1031,7 +976,7 @@ function toggleSideBySide(editor) {

// Hide normal preview if active
var previewNormal = wrapper.lastChild;
if (/editor-preview-active/.test(previewNormal.className)) {
if (previewNormal.classList.contains('editor-preview-active')) {
previewNormal.classList.remove('editor-preview-active');
var toolbar = editor.toolbarElements.preview;
var toolbar_div = editor.toolbar_div;
Expand Down Expand Up @@ -1067,6 +1012,7 @@ function toggleSideBySide(editor) {

/**
* Preview action.
* @param editor {EasyMDE}
*/
function togglePreview(editor) {
var cm = editor.codemirror;
Expand All @@ -1077,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';
Expand All @@ -1089,18 +1035,18 @@ 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)) {
if (preview.classList.contains('editor-preview-active')) {
preview.classList.remove('editor-preview-active');
if (toolbar) {
toolbar.classList.remove('active');
Expand All @@ -1123,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;
Expand Down Expand Up @@ -1160,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');
Expand Down Expand Up @@ -1230,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+)/;
Expand Down Expand Up @@ -1308,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;
Expand Down Expand Up @@ -1378,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');
Expand Down Expand Up @@ -2541,19 +2490,19 @@ 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';

if (this.options.previewClass) {

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);
}
}

Expand Down Expand Up @@ -2687,7 +2636,7 @@ 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.classList.remove('active');
}
Expand Down Expand Up @@ -2967,15 +2916,15 @@ 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 () {
var cm = this.codemirror;
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 () {
Expand Down