diff --git a/core/misc/active-link.js b/core/misc/active-link.js
index caa29f87da62e7cfdbd892159d8591eaf04a2c0f..2151d47124ad8d9a27d8016578f4d6313c04094a 100644
--- a/core/misc/active-link.js
+++ b/core/misc/active-link.js
@@ -7,41 +7,37 @@
(function (Drupal, drupalSettings) {
Drupal.behaviors.activeLinks = {
- attach: function attach(context) {
- var path = drupalSettings.path;
- var queryString = JSON.stringify(path.currentQuery);
- var querySelector = path.currentQuery ? "[data-drupal-link-query='".concat(queryString, "']") : ':not([data-drupal-link-query])';
- var originalSelectors = ["[data-drupal-link-system-path=\"".concat(path.currentPath, "\"]")];
- var selectors;
+ attach(context) {
+ const path = drupalSettings.path;
+ const queryString = JSON.stringify(path.currentQuery);
+ const querySelector = path.currentQuery ? `[data-drupal-link-query='${queryString}']` : ':not([data-drupal-link-query])';
+ const originalSelectors = [`[data-drupal-link-system-path="${path.currentPath}"]`];
+ let selectors;
if (path.isFront) {
originalSelectors.push('[data-drupal-link-system-path="<front>"]');
}
- selectors = [].concat(originalSelectors.map(function (selector) {
- return "".concat(selector, ":not([hreflang])");
- }), originalSelectors.map(function (selector) {
- return "".concat(selector, "[hreflang=\"").concat(path.currentLanguage, "\"]");
- }));
- selectors = selectors.map(function (current) {
- return current + querySelector;
- });
- var activeLinks = context.querySelectorAll(selectors.join(','));
- var il = activeLinks.length;
+ selectors = [].concat(originalSelectors.map(selector => `${selector}:not([hreflang])`), originalSelectors.map(selector => `${selector}[hreflang="${path.currentLanguage}"]`));
+ selectors = selectors.map(current => current + querySelector);
+ const activeLinks = context.querySelectorAll(selectors.join(','));
+ const il = activeLinks.length;
- for (var i = 0; i < il; i++) {
+ for (let i = 0; i < il; i++) {
activeLinks[i].classList.add('is-active');
}
},
- detach: function detach(context, settings, trigger) {
+
+ detach(context, settings, trigger) {
if (trigger === 'unload') {
- var activeLinks = context.querySelectorAll('[data-drupal-link-system-path].is-active');
- var il = activeLinks.length;
+ const activeLinks = context.querySelectorAll('[data-drupal-link-system-path].is-active');
+ const il = activeLinks.length;
- for (var i = 0; i < il; i++) {
+ for (let i = 0; i < il; i++) {
activeLinks[i].classList.remove('is-active');
}
}
}
+
};
})(Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/misc/ajax.js b/core/misc/ajax.js
index cbfd1a79a9cdc0b1495f99f9bb773d1d6e421129..043a892974c96dc153d328d2e7efd3bc843ebc2d 100644
--- a/core/misc/ajax.js
+++ b/core/misc/ajax.js
@@ -5,43 +5,30 @@
* @preserve
**/
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-(function ($, window, Drupal, drupalSettings, _ref) {
- var isFocusable = _ref.isFocusable,
- tabbable = _ref.tabbable;
+(function ($, window, Drupal, drupalSettings, {
+ isFocusable,
+ tabbable
+}) {
Drupal.behaviors.AJAX = {
- attach: function attach(context, settings) {
+ attach(context, settings) {
function loadAjaxBehavior(base) {
- var elementSettings = settings.ajax[base];
+ const elementSettings = settings.ajax[base];
if (typeof elementSettings.selector === 'undefined') {
- elementSettings.selector = "#".concat(base);
+ elementSettings.selector = `#${base}`;
}
- once('drupal-ajax', $(elementSettings.selector)).forEach(function (el) {
+ once('drupal-ajax', $(elementSettings.selector)).forEach(el => {
elementSettings.element = el;
elementSettings.base = base;
Drupal.ajax(elementSettings);
});
}
- Object.keys(settings.ajax || {}).forEach(function (base) {
- return loadAjaxBehavior(base);
- });
+ Object.keys(settings.ajax || {}).forEach(base => loadAjaxBehavior(base));
Drupal.ajax.bindAjaxLinks(document.body);
- once('ajax', '.use-ajax-submit').forEach(function (el) {
- var elementSettings = {};
+ once('ajax', '.use-ajax-submit').forEach(el => {
+ const elementSettings = {};
elementSettings.url = $(el.form).attr('action');
elementSettings.setClick = true;
elementSettings.event = 'click';
@@ -53,56 +40,58 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
Drupal.ajax(elementSettings);
});
},
- detach: function detach(context, settings, trigger) {
+
+ detach(context, settings, trigger) {
if (trigger === 'unload') {
- Drupal.ajax.expired().forEach(function (instance) {
+ Drupal.ajax.expired().forEach(instance => {
Drupal.ajax.instances[instance.instanceIndex] = null;
});
}
}
+
};
Drupal.AjaxError = function (xmlhttp, uri, customMessage) {
- var statusCode;
- var statusText;
- var responseText;
+ let statusCode;
+ let statusText;
+ let responseText;
if (xmlhttp.status) {
- statusCode = "\n".concat(Drupal.t('An AJAX HTTP error occurred.'), "\n").concat(Drupal.t('HTTP Result Code: !status', {
+ statusCode = `\n${Drupal.t('An AJAX HTTP error occurred.')}\n${Drupal.t('HTTP Result Code: !status', {
'!status': xmlhttp.status
- }));
+ })}`;
} else {
- statusCode = "\n".concat(Drupal.t('An AJAX HTTP request terminated abnormally.'));
+ statusCode = `\n${Drupal.t('An AJAX HTTP request terminated abnormally.')}`;
}
- statusCode += "\n".concat(Drupal.t('Debugging information follows.'));
- var pathText = "\n".concat(Drupal.t('Path: !uri', {
+ statusCode += `\n${Drupal.t('Debugging information follows.')}`;
+ const pathText = `\n${Drupal.t('Path: !uri', {
'!uri': uri
- }));
+ })}`;
statusText = '';
try {
- statusText = "\n".concat(Drupal.t('StatusText: !statusText', {
+ statusText = `\n${Drupal.t('StatusText: !statusText', {
'!statusText': xmlhttp.statusText.trim()
- }));
+ })}`;
} catch (e) {}
responseText = '';
try {
- responseText = "\n".concat(Drupal.t('ResponseText: !responseText', {
+ responseText = `\n${Drupal.t('ResponseText: !responseText', {
'!responseText': xmlhttp.responseText.trim()
- }));
+ })}`;
} catch (e) {}
responseText = responseText.replace(/<("[^"]*"|'[^']*'|[^'">])*>/gi, '');
responseText = responseText.replace(/[\n]+\s+/g, '\n');
- var readyStateText = xmlhttp.status === 0 ? "\n".concat(Drupal.t('ReadyState: !readyState', {
+ const readyStateText = xmlhttp.status === 0 ? `\n${Drupal.t('ReadyState: !readyState', {
'!readyState': xmlhttp.readyState
- })) : '';
- customMessage = customMessage ? "\n".concat(Drupal.t('CustomMessage: !customMessage', {
+ })}` : '';
+ customMessage = customMessage ? `\n${Drupal.t('CustomMessage: !customMessage', {
'!customMessage': customMessage
- })) : '';
+ })}` : '';
this.message = statusCode + pathText + statusText + customMessage + responseText + readyStateText;
this.name = 'AjaxError';
};
@@ -115,8 +104,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
throw new Error('Drupal.ajax() function must be called with one configuration object only');
}
- var base = settings.base || false;
- var element = settings.element || false;
+ const base = settings.base || false;
+ const element = settings.element || false;
delete settings.base;
delete settings.element;
@@ -124,7 +113,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
settings.progress = false;
}
- var ajax = new Drupal.Ajax(base, element, settings);
+ const ajax = new Drupal.Ajax(base, element, settings);
ajax.instanceIndex = Drupal.ajax.instances.length;
Drupal.ajax.instances.push(ajax);
return ajax;
@@ -133,15 +122,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
Drupal.ajax.instances = [];
Drupal.ajax.expired = function () {
- return Drupal.ajax.instances.filter(function (instance) {
- return instance && instance.element !== false && !document.body.contains(instance.element);
- });
+ return Drupal.ajax.instances.filter(instance => instance && instance.element !== false && !document.body.contains(instance.element));
};
- Drupal.ajax.bindAjaxLinks = function (element) {
- once('ajax', '.use-ajax', element).forEach(function (ajaxLink) {
- var $linkElement = $(ajaxLink);
- var elementSettings = {
+ Drupal.ajax.bindAjaxLinks = element => {
+ once('ajax', '.use-ajax', element).forEach(ajaxLink => {
+ const $linkElement = $(ajaxLink);
+ const elementSettings = {
progress: {
type: 'throbber'
},
@@ -151,7 +138,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
base: $linkElement.attr('id'),
element: ajaxLink
};
- var href = $linkElement.attr('href');
+ const href = $linkElement.attr('href');
if (href) {
elementSettings.url = href;
@@ -163,10 +150,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
};
Drupal.Ajax = function (base, element, elementSettings) {
- var defaults = {
+ const defaults = {
event: element ? 'mousedown' : null,
keypress: true,
- selector: base ? "#".concat(base) : null,
+ selector: base ? `#${base}` : null,
effect: 'none',
speed: 'none',
method: 'replaceWith',
@@ -183,7 +170,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
this.instanceIndex = false;
if (this.wrapper) {
- this.wrapper = "#".concat(this.wrapper);
+ this.wrapper = `#${this.wrapper}`;
}
this.element = element;
@@ -195,7 +182,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
}
if (!this.url) {
- var $element = $(this.element);
+ const $element = $(this.element);
if ($element.is('a')) {
this.url = $element.attr('href');
@@ -204,49 +191,55 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
}
}
- var originalUrl = this.url;
+ const originalUrl = this.url;
this.url = this.url.replace(/\/nojs(\/|$|\?|#)/, '/ajax$1');
if (drupalSettings.ajaxTrustedUrl[originalUrl]) {
drupalSettings.ajaxTrustedUrl[this.url] = true;
}
- var ajax = this;
+ const ajax = this;
ajax.options = {
url: ajax.url,
data: ajax.submit,
- beforeSerialize: function beforeSerialize(elementSettings, options) {
+
+ beforeSerialize(elementSettings, options) {
return ajax.beforeSerialize(elementSettings, options);
},
- beforeSubmit: function beforeSubmit(formValues, elementSettings, options) {
+
+ beforeSubmit(formValues, elementSettings, options) {
ajax.ajaxing = true;
return ajax.beforeSubmit(formValues, elementSettings, options);
},
- beforeSend: function beforeSend(xmlhttprequest, options) {
+
+ beforeSend(xmlhttprequest, options) {
ajax.ajaxing = true;
return ajax.beforeSend(xmlhttprequest, options);
},
- success: function success(response, status, xmlhttprequest) {
+
+ success(response, status, xmlhttprequest) {
if (typeof response === 'string') {
response = $.parseJSON(response);
}
if (response !== null && !drupalSettings.ajaxTrustedUrl[ajax.url]) {
if (xmlhttprequest.getResponseHeader('X-Drupal-Ajax-Token') !== '1') {
- var customMessage = Drupal.t('The response failed verification so will not be processed.');
+ const customMessage = Drupal.t('The response failed verification so will not be processed.');
return ajax.error(xmlhttprequest, ajax.url, customMessage);
}
}
return ajax.success(response, status);
},
- complete: function complete(xmlhttprequest, status) {
+
+ complete(xmlhttprequest, status) {
ajax.ajaxing = false;
if (status === 'error' || status === 'parsererror') {
return ajax.error(xmlhttprequest, ajax.url);
}
},
+
dataType: 'json',
jsonp: false,
type: 'POST'
@@ -262,13 +255,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
ajax.options.url += '&';
}
- var wrapper = "drupal_".concat(elementSettings.dialogType || 'ajax');
+ let wrapper = `drupal_${elementSettings.dialogType || 'ajax'}`;
if (elementSettings.dialogRenderer) {
- wrapper += ".".concat(elementSettings.dialogRenderer);
+ wrapper += `.${elementSettings.dialogRenderer}`;
}
- ajax.options.url += "".concat(Drupal.ajax.WRAPPER_FORMAT, "=").concat(wrapper);
+ ajax.options.url += `${Drupal.ajax.WRAPPER_FORMAT}=${wrapper}`;
$(ajax.element).on(elementSettings.event, function (event) {
if (!drupalSettings.ajaxTrustedUrl[ajax.url] && !Drupal.url.isLocal(ajax.url)) {
throw new Error(Drupal.t('The callback URL is not local and not trusted: !url', {
@@ -303,13 +296,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
return $.ajax(this.options);
} catch (e) {
this.ajaxing = false;
- window.alert("An error occurred while attempting to process ".concat(this.options.url, ": ").concat(e.message));
+ window.alert(`An error occurred while attempting to process ${this.options.url}: ${e.message}`);
return $.Deferred().reject();
}
};
Drupal.Ajax.prototype.keypressResponse = function (element, event) {
- var ajax = this;
+ const ajax = this;
if (event.which === 13 || event.which === 32 && element.type !== 'text' && element.type !== 'textarea' && element.type !== 'tel' && element.type !== 'number') {
event.preventDefault();
@@ -321,7 +314,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
Drupal.Ajax.prototype.eventResponse = function (element, event) {
event.preventDefault();
event.stopPropagation();
- var ajax = this;
+ const ajax = this;
if (ajax.ajaxing) {
return;
@@ -340,18 +333,18 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
}
} catch (e) {
ajax.ajaxing = false;
- window.alert("An error occurred while attempting to process ".concat(ajax.options.url, ": ").concat(e.message));
+ window.alert(`An error occurred while attempting to process ${ajax.options.url}: ${e.message}`);
}
};
Drupal.Ajax.prototype.beforeSerialize = function (element, options) {
if (this.$form && document.body.contains(this.$form.get(0))) {
- var settings = this.settings || drupalSettings;
+ const settings = this.settings || drupalSettings;
Drupal.detachBehaviors(this.$form.get(0), settings, 'serialize');
}
options.data[Drupal.Ajax.AJAX_REQUEST_PARAMETER] = 1;
- var pageState = drupalSettings.ajaxPageState;
+ const pageState = drupalSettings.ajaxPageState;
options.data['ajax_page_state[theme]'] = pageState.theme;
options.data['ajax_page_state[theme_token]'] = pageState.theme_token;
options.data['ajax_page_state[libraries]'] = pageState.libraries;
@@ -363,7 +356,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
if (this.$form) {
options.extraData = options.extraData || {};
options.extraData.ajax_iframe_upload = '1';
- var v = $.fieldValue(this.element);
+ const v = $.fieldValue(this.element);
if (v !== null) {
options.extraData[this.element.name] = v;
@@ -376,33 +369,27 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
return;
}
- var progressIndicatorMethod = "setProgressIndicator".concat(this.progress.type.slice(0, 1).toUpperCase()).concat(this.progress.type.slice(1).toLowerCase());
+ const progressIndicatorMethod = `setProgressIndicator${this.progress.type.slice(0, 1).toUpperCase()}${this.progress.type.slice(1).toLowerCase()}`;
if (progressIndicatorMethod in this && typeof this[progressIndicatorMethod] === 'function') {
this[progressIndicatorMethod].call(this);
}
};
- Drupal.theme.ajaxProgressThrobber = function (message) {
- var messageMarkup = typeof message === 'string' ? Drupal.theme('ajaxProgressMessage', message) : '';
- var throbber = '<div class="throbber"> </div>';
- return "<div class=\"ajax-progress ajax-progress-throbber\">".concat(throbber).concat(messageMarkup, "</div>");
+ Drupal.theme.ajaxProgressThrobber = message => {
+ const messageMarkup = typeof message === 'string' ? Drupal.theme('ajaxProgressMessage', message) : '';
+ const throbber = '<div class="throbber"> </div>';
+ return `<div class="ajax-progress ajax-progress-throbber">${throbber}${messageMarkup}</div>`;
};
- Drupal.theme.ajaxProgressIndicatorFullscreen = function () {
- return '<div class="ajax-progress ajax-progress-fullscreen"> </div>';
- };
+ Drupal.theme.ajaxProgressIndicatorFullscreen = () => '<div class="ajax-progress ajax-progress-fullscreen"> </div>';
- Drupal.theme.ajaxProgressMessage = function (message) {
- return "<div class=\"message\">".concat(message, "</div>");
- };
+ Drupal.theme.ajaxProgressMessage = message => `<div class="message">${message}</div>`;
- Drupal.theme.ajaxProgressBar = function ($element) {
- return $('<div class="ajax-progress ajax-progress-bar"></div>').append($element);
- };
+ Drupal.theme.ajaxProgressBar = $element => $('<div class="ajax-progress ajax-progress-bar"></div>').append($element);
Drupal.Ajax.prototype.setProgressIndicatorBar = function () {
- var progressBar = new Drupal.ProgressBar("ajax-progress-".concat(this.element.id), $.noop, this.progress.method, $.noop);
+ const progressBar = new Drupal.ProgressBar(`ajax-progress-${this.element.id}`, $.noop, this.progress.method, $.noop);
if (this.progress.message) {
progressBar.setProgress(-1, this.progress.message);
@@ -428,8 +415,6 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
};
Drupal.Ajax.prototype.success = function (response, status) {
- var _this = this;
-
if (this.progress.element) {
$(this.progress.element).remove();
}
@@ -439,11 +424,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
}
$(this.element).prop('disabled', false);
- var elementParents = $(this.element).parents('[data-drupal-selector]').addBack().toArray();
- var focusChanged = false;
- Object.keys(response || {}).forEach(function (i) {
- if (response[i].command && _this.commands[response[i].command]) {
- _this.commands[response[i].command](_this, response[i], status);
+ const elementParents = $(this.element).parents('[data-drupal-selector]').addBack().toArray();
+ let focusChanged = false;
+ Object.keys(response || {}).forEach(i => {
+ if (response[i].command && this.commands[response[i].command]) {
+ this.commands[response[i].command](this, response[i], status);
if (response[i].command === 'invoke' && response[i].method === 'focus' || response[i].command === 'focusFirst') {
focusChanged = true;
@@ -452,10 +437,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
});
if (!focusChanged && this.element && !$(this.element).data('disable-refocus')) {
- var target = false;
+ let target = false;
- for (var n = elementParents.length - 1; !target && n >= 0; n--) {
- target = document.querySelector("[data-drupal-selector=\"".concat(elementParents[n].getAttribute('data-drupal-selector'), "\"]"));
+ for (let n = elementParents.length - 1; !target && n >= 0; n--) {
+ target = document.querySelector(`[data-drupal-selector="${elementParents[n].getAttribute('data-drupal-selector')}"]`);
}
if (target) {
@@ -464,7 +449,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
}
if (this.$form && document.body.contains(this.$form.get(0))) {
- var settings = this.settings || drupalSettings;
+ const settings = this.settings || drupalSettings;
Drupal.attachBehaviors(this.$form.get(0), settings);
}
@@ -472,9 +457,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
};
Drupal.Ajax.prototype.getEffect = function (response) {
- var type = response.effect || this.effect;
- var speed = response.speed || this.speed;
- var effect = {};
+ const type = response.effect || this.effect;
+ const speed = response.speed || this.speed;
+ const effect = {};
if (type === 'none') {
effect.showEffect = 'show';
@@ -485,8 +470,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
effect.hideEffect = 'fadeOut';
effect.showSpeed = speed;
} else {
- effect.showEffect = "".concat(type, "Toggle");
- effect.hideEffect = "".concat(type, "Toggle");
+ effect.showEffect = `${type}Toggle`;
+ effect.hideEffect = `${type}Toggle`;
effect.showSpeed = speed;
}
@@ -506,32 +491,26 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
$(this.element).prop('disabled', false);
if (this.$form && document.body.contains(this.$form.get(0))) {
- var settings = this.settings || drupalSettings;
+ const settings = this.settings || drupalSettings;
Drupal.attachBehaviors(this.$form.get(0), settings);
}
throw new Drupal.AjaxError(xmlhttprequest, uri, customMessage);
};
- Drupal.theme.ajaxWrapperNewContent = function ($newContent, ajax, response) {
- return (response.effect || ajax.effect) !== 'none' && $newContent.filter(function (i) {
- return !($newContent[i].nodeName === '#comment' || $newContent[i].nodeName === '#text' && /^(\s|\n|\r)*$/.test($newContent[i].textContent));
- }).length > 1 ? Drupal.theme('ajaxWrapperMultipleRootElements', $newContent) : $newContent;
- };
+ Drupal.theme.ajaxWrapperNewContent = ($newContent, ajax, response) => (response.effect || ajax.effect) !== 'none' && $newContent.filter(i => !($newContent[i].nodeName === '#comment' || $newContent[i].nodeName === '#text' && /^(\s|\n|\r)*$/.test($newContent[i].textContent))).length > 1 ? Drupal.theme('ajaxWrapperMultipleRootElements', $newContent) : $newContent;
- Drupal.theme.ajaxWrapperMultipleRootElements = function ($elements) {
- return $('<div></div>').append($elements);
- };
+ Drupal.theme.ajaxWrapperMultipleRootElements = $elements => $('<div></div>').append($elements);
Drupal.AjaxCommands = function () {};
Drupal.AjaxCommands.prototype = {
- insert: function insert(ajax, response) {
- var $wrapper = response.selector ? $(response.selector) : $(ajax.wrapper);
- var method = response.method || ajax.method;
- var effect = ajax.getEffect(response);
- var settings = response.settings || ajax.settings || drupalSettings;
- var $newContent = $($.parseHTML(response.data, document, true));
+ insert(ajax, response) {
+ const $wrapper = response.selector ? $(response.selector) : $(ajax.wrapper);
+ const method = response.method || ajax.method;
+ const effect = ajax.getEffect(response);
+ const settings = response.settings || ajax.settings || drupalSettings;
+ let $newContent = $($.parseHTML(response.data, document, true));
$newContent = Drupal.theme('ajaxWrapperNewContent', $newContent, ajax, response);
switch (method) {
@@ -553,7 +532,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
$newContent.hide();
}
- var $ajaxNewContent = $newContent.find('.ajax-new-content');
+ const $ajaxNewContent = $newContent.find('.ajax-new-content');
if ($ajaxNewContent.length) {
$ajaxNewContent.hide();
@@ -564,53 +543,60 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
}
if ($newContent.parents('html').length) {
- $newContent.each(function (index, element) {
+ $newContent.each((index, element) => {
if (element.nodeType === Node.ELEMENT_NODE) {
Drupal.attachBehaviors(element, settings);
}
});
}
},
- remove: function remove(ajax, response, status) {
- var settings = response.settings || ajax.settings || drupalSettings;
+
+ remove(ajax, response, status) {
+ const settings = response.settings || ajax.settings || drupalSettings;
$(response.selector).each(function () {
Drupal.detachBehaviors(this, settings);
}).remove();
},
- changed: function changed(ajax, response, status) {
- var $element = $(response.selector);
+
+ changed(ajax, response, status) {
+ const $element = $(response.selector);
if (!$element.hasClass('ajax-changed')) {
$element.addClass('ajax-changed');
if (response.asterisk) {
- $element.find(response.asterisk).append(" <abbr class=\"ajax-changed\" title=\"".concat(Drupal.t('Changed'), "\">*</abbr> "));
+ $element.find(response.asterisk).append(` <abbr class="ajax-changed" title="${Drupal.t('Changed')}">*</abbr> `);
}
}
},
- alert: function alert(ajax, response, status) {
+
+ alert(ajax, response, status) {
window.alert(response.text);
},
- announce: function announce(ajax, response) {
+
+ announce(ajax, response) {
if (response.priority) {
Drupal.announce(response.text, response.priority);
} else {
Drupal.announce(response.text);
}
},
- redirect: function redirect(ajax, response, status) {
+
+ redirect(ajax, response, status) {
window.location = response.url;
},
- css: function css(ajax, response, status) {
+
+ css(ajax, response, status) {
$(response.selector).css(response.argument);
},
- settings: function settings(ajax, response, status) {
- var ajaxSettings = drupalSettings.ajax;
+
+ settings(ajax, response, status) {
+ const ajaxSettings = drupalSettings.ajax;
if (ajaxSettings) {
- Drupal.ajax.expired().forEach(function (instance) {
+ Drupal.ajax.expired().forEach(instance => {
if (instance.selector) {
- var selector = instance.selector.replace('#', '');
+ const selector = instance.selector.replace('#', '');
if (selector in ajaxSettings) {
delete ajaxSettings[selector];
@@ -625,15 +611,17 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
ajax.settings = response.settings;
}
},
- data: function data(ajax, response, status) {
+
+ data(ajax, response, status) {
$(response.selector).data(response.name, response.value);
},
- focusFirst: function focusFirst(ajax, response, status) {
- var focusChanged = false;
- var container = document.querySelector(response.selector);
+
+ focusFirst(ajax, response, status) {
+ let focusChanged = false;
+ const container = document.querySelector(response.selector);
if (container) {
- var tabbableElements = tabbable(container);
+ const tabbableElements = tabbable(container);
if (tabbableElements.length) {
tabbableElements[0].focus();
@@ -648,21 +636,26 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
ajax.element.focus();
}
},
- invoke: function invoke(ajax, response, status) {
- var $element = $(response.selector);
- $element[response.method].apply($element, _toConsumableArray(response.args));
+
+ invoke(ajax, response, status) {
+ const $element = $(response.selector);
+ $element[response.method](...response.args);
},
- restripe: function restripe(ajax, response, status) {
+
+ restripe(ajax, response, status) {
$(response.selector).find('> tbody > tr:visible, > tr:visible').removeClass('odd even').filter(':even').addClass('odd').end().filter(':odd').addClass('even');
},
- update_build_id: function update_build_id(ajax, response, status) {
- $("input[name=\"form_build_id\"][value=\"".concat(response.old, "\"]")).val(response.new);
+
+ update_build_id(ajax, response, status) {
+ $(`input[name="form_build_id"][value="${response.old}"]`).val(response.new);
},
- add_css: function add_css(ajax, response, status) {
+
+ add_css(ajax, response, status) {
$('head').prepend(response.data);
},
- message: function message(ajax, response) {
- var messages = new Drupal.Message(document.querySelector(response.messageWrapperQuerySelector));
+
+ message(ajax, response) {
+ const messages = new Drupal.Message(document.querySelector(response.messageWrapperQuerySelector));
if (response.clearPrevious) {
messages.clear();
@@ -670,5 +663,6 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
messages.add(response.message, response.messageOptions);
}
+
};
})(jQuery, window, Drupal, drupalSettings, window.tabbable);
\ No newline at end of file
diff --git a/core/misc/announce.js b/core/misc/announce.js
index eacf55b511eb9ed7cb9b8b3140f7b07232e1abab..859a8817036e1487bd0fe66ae68f5cb7f2df9e08 100644
--- a/core/misc/announce.js
+++ b/core/misc/announce.js
@@ -6,10 +6,10 @@
**/
(function (Drupal, debounce) {
- var liveElement;
- var announcements = [];
+ let liveElement;
+ const announcements = [];
Drupal.behaviors.drupalAnnounce = {
- attach: function attach(context) {
+ attach(context) {
if (!liveElement) {
liveElement = document.createElement('div');
liveElement.id = 'drupal-live-announce';
@@ -19,15 +19,16 @@
document.body.appendChild(liveElement);
}
}
+
};
function announce() {
- var text = [];
- var priority = 'polite';
- var announcement;
- var il = announcements.length;
+ const text = [];
+ let priority = 'polite';
+ let announcement;
+ const il = announcements.length;
- for (var i = 0; i < il; i++) {
+ for (let i = 0; i < il; i++) {
announcement = announcements.pop();
text.unshift(announcement.text);
@@ -47,8 +48,8 @@
Drupal.announce = function (text, priority) {
announcements.push({
- text: text,
- priority: priority
+ text,
+ priority
});
return debounce(announce, 200)();
};
diff --git a/core/misc/autocomplete.js b/core/misc/autocomplete.js
index 3b4a4a24251da0e1fa7d9b863ec5482b511ee5d9..131087f63eae4085cbbed881e58bcec9fd86ae07 100644
--- a/core/misc/autocomplete.js
+++ b/core/misc/autocomplete.js
@@ -6,16 +6,16 @@
**/
(function ($, Drupal) {
- var autocomplete;
+ let autocomplete;
function autocompleteSplitValues(value) {
- var result = [];
- var quote = false;
- var current = '';
- var valueLength = value.length;
- var character;
+ const result = [];
+ let quote = false;
+ let current = '';
+ const valueLength = value.length;
+ let character;
- for (var i = 0; i < valueLength; i++) {
+ for (let i = 0; i < valueLength; i++) {
character = value.charAt(i);
if (character === '"') {
@@ -41,13 +41,13 @@
}
function searchHandler(event) {
- var options = autocomplete.options;
+ const options = autocomplete.options;
if (options.isComposing) {
return false;
}
- var term = autocomplete.extractLastTerm(event.target.value);
+ const term = autocomplete.extractLastTerm(event.target.value);
if (term.length > 0 && options.firstCharacterBlacklist.indexOf(term[0]) !== -1) {
return false;
@@ -57,18 +57,18 @@
}
function sourceData(request, response) {
- var elementId = this.element.attr('id');
+ const elementId = this.element.attr('id');
if (!(elementId in autocomplete.cache)) {
autocomplete.cache[elementId] = {};
}
function showSuggestions(suggestions) {
- var tagged = autocomplete.splitValues(request.term);
- var il = tagged.length;
+ const tagged = autocomplete.splitValues(request.term);
+ const il = tagged.length;
- for (var i = 0; i < il; i++) {
- var index = suggestions.indexOf(tagged[i]);
+ for (let i = 0; i < il; i++) {
+ const index = suggestions.indexOf(tagged[i]);
if (index >= 0) {
suggestions.splice(index, 1);
@@ -78,7 +78,7 @@
response(suggestions);
}
- var term = autocomplete.extractLastTerm(request.term);
+ const term = autocomplete.extractLastTerm(request.term);
function sourceCallbackHandler(data) {
autocomplete.cache[elementId][term] = data;
@@ -88,7 +88,7 @@
if (autocomplete.cache[elementId].hasOwnProperty(term)) {
showSuggestions(autocomplete.cache[elementId][term]);
} else {
- var options = $.extend({
+ const options = $.extend({
success: sourceCallbackHandler,
data: {
q: term
@@ -103,7 +103,7 @@
}
function selectHandler(event, ui) {
- var terms = autocomplete.splitValues(event.target.value);
+ const terms = autocomplete.splitValues(event.target.value);
terms.pop();
terms.push(ui.item.value);
event.target.value = terms.join(', ');
@@ -115,41 +115,43 @@
}
Drupal.behaviors.autocomplete = {
- attach: function attach(context) {
- var $autocomplete = $(once('autocomplete', 'input.form-autocomplete', context));
+ attach(context) {
+ const $autocomplete = $(once('autocomplete', 'input.form-autocomplete', context));
if ($autocomplete.length) {
- var blacklist = $autocomplete.attr('data-autocomplete-first-character-blacklist');
+ const blacklist = $autocomplete.attr('data-autocomplete-first-character-blacklist');
$.extend(autocomplete.options, {
firstCharacterBlacklist: blacklist || ''
});
$autocomplete.autocomplete(autocomplete.options).each(function () {
$(this).data('ui-autocomplete')._renderItem = autocomplete.options.renderItem;
});
- $autocomplete.on('compositionstart.autocomplete', function () {
+ $autocomplete.on('compositionstart.autocomplete', () => {
autocomplete.options.isComposing = true;
});
- $autocomplete.on('compositionend.autocomplete', function () {
+ $autocomplete.on('compositionend.autocomplete', () => {
autocomplete.options.isComposing = false;
});
}
},
- detach: function detach(context, settings, trigger) {
+
+ detach(context, settings, trigger) {
if (trigger === 'unload') {
$(once.remove('autocomplete', 'input.form-autocomplete', context)).autocomplete('destroy');
}
}
+
};
autocomplete = {
cache: {},
splitValues: autocompleteSplitValues,
- extractLastTerm: extractLastTerm,
+ extractLastTerm,
options: {
source: sourceData,
focus: focusHandler,
search: searchHandler,
select: selectHandler,
- renderItem: renderItem,
+ renderItem,
minLength: 1,
firstCharacterBlacklist: '',
isComposing: false
diff --git a/core/misc/batch.js b/core/misc/batch.js
index 2511bdbb7565cfa959288d14b7f6d43e2d3d4852..1b4b7f2cb9711e858da065796a7de77979e923dd 100644
--- a/core/misc/batch.js
+++ b/core/misc/batch.js
@@ -7,15 +7,15 @@
(function ($, Drupal) {
Drupal.behaviors.batch = {
- attach: function attach(context, settings) {
- var batch = settings.batch;
- var $progress = $(once('batch', '[data-drupal-progress]'));
- var progressBar;
+ attach(context, settings) {
+ const batch = settings.batch;
+ const $progress = $(once('batch', '[data-drupal-progress]'));
+ let progressBar;
function updateCallback(progress, status, pb) {
if (progress === '100') {
pb.stopMonitoring();
- window.location = "".concat(batch.uri, "&op=finished");
+ window.location = `${batch.uri}&op=finished`;
}
}
@@ -27,10 +27,11 @@
if ($progress.length) {
progressBar = new Drupal.ProgressBar('updateprogress', updateCallback, 'POST', errorCallback);
progressBar.setProgress(-1, batch.initMessage);
- progressBar.startMonitoring("".concat(batch.uri, "&op=do"), 10);
+ progressBar.startMonitoring(`${batch.uri}&op=do`, 10);
$progress.empty();
$progress.append(progressBar.element);
}
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/checkbox.js b/core/misc/checkbox.js
index c27ca30dff1055bbdc1ee38e5da40590d10af86a..945c53728663401b8a06a987429509357651fa51 100644
--- a/core/misc/checkbox.js
+++ b/core/misc/checkbox.js
@@ -5,8 +5,6 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.checkbox = function () {
- return "<input type=\"checkbox\" class=\"form-checkbox\"/>";
- };
+(Drupal => {
+ Drupal.theme.checkbox = () => `<input type="checkbox" class="form-checkbox"/>`;
})(Drupal);
\ No newline at end of file
diff --git a/core/misc/collapse.js b/core/misc/collapse.js
index 60bd05a067fd3d8fae5e12ae850425af226bb12c..32193ea1730b19d53493e712595fcefdf464e805 100644
--- a/core/misc/collapse.js
+++ b/core/misc/collapse.js
@@ -9,9 +9,9 @@
function CollapsibleDetails(node) {
this.$node = $(node);
this.$node.data('details', this);
- var anchor = window.location.hash && window.location.hash !== '#' ? ", ".concat(window.location.hash) : '';
+ const anchor = window.location.hash && window.location.hash !== '#' ? `, ${window.location.hash}` : '';
- if (this.$node.find(".error".concat(anchor)).length) {
+ if (this.$node.find(`.error${anchor}`).length) {
this.$node.attr('open', true);
}
@@ -22,22 +22,22 @@
instances: []
});
$.extend(CollapsibleDetails.prototype, {
- setupSummaryPolyfill: function setupSummaryPolyfill() {
- var $summary = this.$node.find('> summary');
+ setupSummaryPolyfill() {
+ const $summary = this.$node.find('> summary');
$summary.attr('tabindex', '-1');
$('<span class="details-summary-prefix visually-hidden"></span>').append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show')).prependTo($summary).after(document.createTextNode(' '));
- $('<a class="details-title"></a>').attr('href', "#".concat(this.$node.attr('id'))).prepend($summary.contents()).appendTo($summary);
+ $('<a class="details-title"></a>').attr('href', `#${this.$node.attr('id')}`).prepend($summary.contents()).appendTo($summary);
$summary.append(this.$summary).on('click', $.proxy(this.onSummaryClick, this));
},
- onSummaryClick: function onSummaryClick(e) {
+
+ onSummaryClick(e) {
this.toggle();
e.preventDefault();
},
- toggle: function toggle() {
- var _this = this;
- var isOpen = !!this.$node.attr('open');
- var $summaryPrefix = this.$node.find('> summary span.details-summary-prefix');
+ toggle() {
+ const isOpen = !!this.$node.attr('open');
+ const $summaryPrefix = this.$node.find('> summary span.details-summary-prefix');
if (isOpen) {
$summaryPrefix.html(Drupal.t('Show'));
@@ -45,25 +45,27 @@
$summaryPrefix.html(Drupal.t('Hide'));
}
- setTimeout(function () {
- _this.$node.attr('open', !isOpen);
+ setTimeout(() => {
+ this.$node.attr('open', !isOpen);
}, 0);
}
+
});
Drupal.behaviors.collapse = {
- attach: function attach(context) {
+ attach(context) {
if (Modernizr.details) {
return;
}
- once('collapse', 'details', context).forEach(function (detail) {
+ once('collapse', 'details', context).forEach(detail => {
detail.classList.add('collapse-processed');
CollapsibleDetails.instances.push(new CollapsibleDetails(detail));
});
}
+
};
- var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) {
+ const handleFragmentLinkClickOrHashChange = (e, $target) => {
$target.parents('details').not('[open]').find('> summary').trigger('click');
};
diff --git a/core/misc/date.js b/core/misc/date.js
index 4ae1e561986c057b8ae380c683a324aab3bbeee7..354a319061ffea7d76c971d581d9d2e5605eaccf 100644
--- a/core/misc/date.js
+++ b/core/misc/date.js
@@ -5,90 +5,75 @@
* @preserve
**/
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
(function ($, Modernizr, Drupal, once) {
Drupal.behaviors.date = {
- attach: function attach(context, settings) {
+ attach(context, settings) {
if (Modernizr.inputtypes.date === false) {
- once('datepicker', '[data-drupal-field-elements="date-time"]').forEach(function (dateTime) {
- var dateInput = dateTime.querySelector('input[type="date"]');
- var timeInput = dateTime.querySelector('input[type="time"]');
- var help = Drupal.theme.dateTimeHelp({
- dateId: "".concat(dateInput.id, "--description"),
+ once('datepicker', '[data-drupal-field-elements="date-time"]').forEach(dateTime => {
+ const dateInput = dateTime.querySelector('input[type="date"]');
+ const timeInput = dateTime.querySelector('input[type="time"]');
+ const help = Drupal.theme.dateTimeHelp({
+ dateId: `${dateInput.id}--description`,
dateDesc: dateInput.dataset.help,
- timeId: "".concat(timeInput.id, "--description"),
+ timeId: `${timeInput.id}--description`,
timeDesc: timeInput.dataset.help
});
- [dateInput, timeInput].forEach(function (input) {
- input.setAttribute('aria-describedby', "".concat(input.id, "--description"));
+ [dateInput, timeInput].forEach(input => {
+ input.setAttribute('aria-describedby', `${input.id}--description`);
input.setAttribute('type', 'text');
});
Drupal.DatepickerPolyfill.attachDescription(dateTime, help);
});
- once('datepicker', '[data-drupal-field-elements="date"]').forEach(function (date) {
- var dateInput = date.querySelector('input[type="date"]');
- var help = Drupal.theme.dateHelp({
+ once('datepicker', '[data-drupal-field-elements="date"]').forEach(date => {
+ const dateInput = date.querySelector('input[type="date"]');
+ const help = Drupal.theme.dateHelp({
dateDesc: dateInput.dataset.help
});
- var id = "".concat(date.id, "--description");
+ const id = `${date.id}--description`;
dateInput.setAttribute('aria-describedby', id);
dateInput.setAttribute('type', 'text');
Drupal.DatepickerPolyfill.attachDescription(date, help, id);
});
}
}
- };
-
- Drupal.DatepickerPolyfill = function () {
- function _class() {
- _classCallCheck(this, _class);
- }
-
- _createClass(_class, null, [{
- key: "attachDescription",
- value: function attachDescription(element, help, id) {
- var description = element.nextElementSibling;
- if (!(description && description.getAttribute('data-drupal-field-elements') === 'description')) {
- description = Drupal.DatepickerPolyfill.descriptionWrapperElement(id);
- element.parentNode.insertBefore(description, element.nextSibling);
- }
+ };
+ Drupal.DatepickerPolyfill = class {
+ static attachDescription(element, help, id) {
+ let description = element.nextElementSibling;
- description.insertAdjacentHTML('beforeend', help);
+ if (!(description && description.getAttribute('data-drupal-field-elements') === 'description')) {
+ description = Drupal.DatepickerPolyfill.descriptionWrapperElement(id);
+ element.parentNode.insertBefore(description, element.nextSibling);
}
- }, {
- key: "descriptionWrapperElement",
- value: function descriptionWrapperElement(id) {
- var description = document.createElement('div');
- description.classList.add('description');
- description.setAttribute('data-drupal-field-elements', 'description');
- if (id) {
- description.setAttribute('id', id);
- }
+ description.insertAdjacentHTML('beforeend', help);
+ }
+
+ static descriptionWrapperElement(id) {
+ const description = document.createElement('div');
+ description.classList.add('description');
+ description.setAttribute('data-drupal-field-elements', 'description');
- return description;
+ if (id) {
+ description.setAttribute('id', id);
}
- }]);
- return _class;
- }();
+ return description;
+ }
- Drupal.theme.dateHelp = function (_ref) {
- var dateDesc = _ref.dateDesc;
- return "<div class=\"no-native-datepicker-help\">".concat(dateDesc, "</div>");
};
- Drupal.theme.dateTimeHelp = function (_ref2) {
- var dateId = _ref2.dateId,
- timeId = _ref2.timeId,
- dateDesc = _ref2.dateDesc,
- timeDesc = _ref2.timeDesc;
- return "<div class=\"no-native-datepicker-help\">\n <span id=\"".concat(dateId, "\">").concat(dateDesc, "</span> <span id=\"").concat(timeId, "\">").concat(timeDesc, "</span>\n </div>");
- };
+ Drupal.theme.dateHelp = ({
+ dateDesc
+ }) => `<div class="no-native-datepicker-help">${dateDesc}</div>`;
+
+ Drupal.theme.dateTimeHelp = ({
+ dateId,
+ timeId,
+ dateDesc,
+ timeDesc
+ }) => `<div class="no-native-datepicker-help">
+ <span id="${dateId}">${dateDesc}</span> <span id="${timeId}">${timeDesc}</span>
+ </div>`;
})(jQuery, Modernizr, Drupal, once);
\ No newline at end of file
diff --git a/core/misc/debounce.js b/core/misc/debounce.js
index e33575670c09f14d771906b3000dd4044a82d0b2..477dbf557c0e537abe386d34cc234fdc9d29b86b 100644
--- a/core/misc/debounce.js
+++ b/core/misc/debounce.js
@@ -6,16 +6,12 @@
**/
Drupal.debounce = function (func, wait, immediate) {
- var timeout;
- var result;
- return function () {
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
- var context = this;
+ let timeout;
+ let result;
+ return function (...args) {
+ const context = this;
- var later = function later() {
+ const later = function () {
timeout = null;
if (!immediate) {
@@ -23,7 +19,7 @@ Drupal.debounce = function (func, wait, immediate) {
}
};
- var callNow = immediate && !timeout;
+ const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
diff --git a/core/misc/details-aria.js b/core/misc/details-aria.js
index d80f3dcb64f179df1f6ff98f0bfc928dcbe35e8d..451f17e329198a58b142c91dd027bcc6ca38eaef 100644
--- a/core/misc/details-aria.js
+++ b/core/misc/details-aria.js
@@ -7,15 +7,16 @@
(function ($, Drupal) {
Drupal.behaviors.detailsAria = {
- attach: function attach() {
- $(once('detailsAria', 'body')).on('click.detailsAria', 'summary', function (event) {
- var $summary = $(event.currentTarget);
- var open = $(event.currentTarget.parentNode).attr('open') === 'open' ? 'false' : 'true';
+ attach() {
+ $(once('detailsAria', 'body')).on('click.detailsAria', 'summary', event => {
+ const $summary = $(event.currentTarget);
+ const open = $(event.currentTarget.parentNode).attr('open') === 'open' ? 'false' : 'true';
$summary.attr({
'aria-expanded': open,
'aria-pressed': open
});
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/details-summarized-content.js b/core/misc/details-summarized-content.js
index d1b2d8d694ce5f829a211477797363700f5a62fa..c0f022bbbf26ccb9e64fdf3808ce32b838a3507f 100644
--- a/core/misc/details-summarized-content.js
+++ b/core/misc/details-summarized-content.js
@@ -5,7 +5,7 @@
* @preserve
**/
-(function ($, Drupal) {
+(($, Drupal) => {
function DetailsSummarizedContent(node) {
this.$node = $(node);
this.setupSummary();
@@ -15,29 +15,26 @@
instances: []
});
$.extend(DetailsSummarizedContent.prototype, {
- setupSummary: function setupSummary() {
+ setupSummary() {
this.$detailsSummarizedContentWrapper = $(Drupal.theme('detailsSummarizedContentWrapper'));
this.$node.on('summaryUpdated', $.proxy(this.onSummaryUpdated, this)).trigger('summaryUpdated').find('> summary').append(this.$detailsSummarizedContentWrapper);
},
- onSummaryUpdated: function onSummaryUpdated() {
- var text = this.$node.drupalGetSummary();
+
+ onSummaryUpdated() {
+ const text = this.$node.drupalGetSummary();
this.$detailsSummarizedContentWrapper.html(Drupal.theme('detailsSummarizedContentText', text));
}
+
});
Drupal.behaviors.detailsSummary = {
- attach: function attach(context) {
- DetailsSummarizedContent.instances = DetailsSummarizedContent.instances.concat(once('details', 'details', context).map(function (details) {
- return new DetailsSummarizedContent(details);
- }));
+ attach(context) {
+ DetailsSummarizedContent.instances = DetailsSummarizedContent.instances.concat(once('details', 'details', context).map(details => new DetailsSummarizedContent(details)));
}
+
};
Drupal.DetailsSummarizedContent = DetailsSummarizedContent;
- Drupal.theme.detailsSummarizedContentWrapper = function () {
- return "<span class=\"summary\"></span>";
- };
+ Drupal.theme.detailsSummarizedContentWrapper = () => `<span class="summary"></span>`;
- Drupal.theme.detailsSummarizedContentText = function (text) {
- return text ? " (".concat(text, ")") : '';
- };
+ Drupal.theme.detailsSummarizedContentText = text => text ? ` (${text})` : '';
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/dialog/dialog.ajax.js b/core/misc/dialog/dialog.ajax.js
index c470491abff77261b1b71343f32f5bc4a6c789c1..ad48d2fa251fa7c0529b455f9823b7a8709a3b5c 100644
--- a/core/misc/dialog/dialog.ajax.js
+++ b/core/misc/dialog/dialog.ajax.js
@@ -7,14 +7,14 @@
(function ($, Drupal) {
Drupal.behaviors.dialog = {
- attach: function attach(context, settings) {
- var $context = $(context);
+ attach(context, settings) {
+ const $context = $(context);
if (!$('#drupal-modal').length) {
$('<div id="drupal-modal" class="ui-front"></div>').hide().appendTo('body');
}
- var $dialog = $context.closest('.ui-dialog-content');
+ const $dialog = $context.closest('.ui-dialog-content');
if ($dialog.length) {
if ($dialog.dialog('option', 'drupalAutoButtons')) {
@@ -24,28 +24,26 @@
$dialog.dialog('widget').trigger('focus');
}
- var originalClose = settings.dialog.close;
+ const originalClose = settings.dialog.close;
- settings.dialog.close = function (event) {
- for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
-
- originalClose.apply(settings.dialog, [event].concat(args));
+ settings.dialog.close = function (event, ...args) {
+ originalClose.apply(settings.dialog, [event, ...args]);
$(event.target).remove();
};
},
- prepareDialogButtons: function prepareDialogButtons($dialog) {
- var buttons = [];
- var $buttons = $dialog.find('.form-actions input[type=submit], .form-actions a.button');
+
+ prepareDialogButtons($dialog) {
+ const buttons = [];
+ const $buttons = $dialog.find('.form-actions input[type=submit], .form-actions a.button');
$buttons.each(function () {
- var $originalButton = $(this).css({
+ const $originalButton = $(this).css({
display: 'none'
});
buttons.push({
text: $originalButton.html() || $originalButton.attr('value'),
class: $originalButton.attr('class'),
- click: function click(e) {
+
+ click(e) {
if ($originalButton.is('a')) {
$originalButton[0].click();
} else {
@@ -53,10 +51,12 @@
e.preventDefault();
}
}
+
});
});
return buttons;
}
+
};
Drupal.AjaxCommands.prototype.openDialog = function (ajax, response, status) {
@@ -64,10 +64,10 @@
return false;
}
- var $dialog = $(response.selector);
+ let $dialog = $(response.selector);
if (!$dialog.length) {
- $dialog = $("<div id=\"".concat(response.selector.replace(/^#/, ''), "\" class=\"ui-front\"></div>")).appendTo('body');
+ $dialog = $(`<div id="${response.selector.replace(/^#/, '')}" class="ui-front"></div>`).appendTo('body');
}
if (!ajax.wrapper) {
@@ -83,12 +83,12 @@
response.dialogOptions.buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
}
- $dialog.on('dialogButtonsChange', function () {
- var buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
+ $dialog.on('dialogButtonsChange', () => {
+ const buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
$dialog.dialog('option', 'buttons', buttons);
});
response.dialogOptions = response.dialogOptions || {};
- var dialog = Drupal.dialog($dialog.get(0), response.dialogOptions);
+ const dialog = Drupal.dialog($dialog.get(0), response.dialogOptions);
if (response.dialogOptions.modal) {
dialog.showModal();
@@ -100,7 +100,7 @@
};
Drupal.AjaxCommands.prototype.closeDialog = function (ajax, response, status) {
- var $dialog = $(response.selector);
+ const $dialog = $(response.selector);
if ($dialog.length) {
Drupal.dialog($dialog.get(0)).close();
@@ -114,21 +114,21 @@
};
Drupal.AjaxCommands.prototype.setDialogOption = function (ajax, response, status) {
- var $dialog = $(response.selector);
+ const $dialog = $(response.selector);
if ($dialog.length) {
$dialog.dialog('option', response.optionName, response.optionValue);
}
};
- $(window).on('dialog:aftercreate', function (e, dialog, $element, settings) {
- $element.on('click.dialog', '.dialog-cancel', function (e) {
+ $(window).on('dialog:aftercreate', (e, dialog, $element, settings) => {
+ $element.on('click.dialog', '.dialog-cancel', e => {
dialog.close('cancel');
e.preventDefault();
e.stopPropagation();
});
});
- $(window).on('dialog:beforeclose', function (e, dialog, $element) {
+ $(window).on('dialog:beforeclose', (e, dialog, $element) => {
$element.off('.dialog');
});
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/dialog/dialog.jquery-ui.js b/core/misc/dialog/dialog.jquery-ui.js
index 86f9455d99817eeae6a79f2f0cbc5faf5d01edb0..382d5345c1d9ddba1970ca644ab73f0ec86a6b6a 100644
--- a/core/misc/dialog/dialog.jquery-ui.js
+++ b/core/misc/dialog/dialog.jquery-ui.js
@@ -5,19 +5,21 @@
* @preserve
**/
-(function ($, _ref) {
- var tabbable = _ref.tabbable,
- isTabbable = _ref.isTabbable;
+(function ($, {
+ tabbable,
+ isTabbable
+}) {
$.widget('ui.dialog', $.ui.dialog, {
options: {
buttonClass: 'button',
buttonPrimaryClass: 'button--primary'
},
- _createButtons: function _createButtons() {
- var opts = this.options;
- var primaryIndex;
- var index;
- var il = opts.buttons.length;
+
+ _createButtons() {
+ const opts = this.options;
+ let primaryIndex;
+ let index;
+ const il = opts.buttons.length;
for (index = 0; index < il; index++) {
if (opts.buttons[index].primary && opts.buttons[index].primary === true) {
@@ -29,27 +31,28 @@
this._super();
- var $buttons = this.uiButtonSet.children().addClass(opts.buttonClass);
+ const $buttons = this.uiButtonSet.children().addClass(opts.buttonClass);
if (typeof primaryIndex !== 'undefined') {
$buttons.eq(index).addClass(opts.buttonPrimaryClass);
}
},
- _focusTabbable: function _focusTabbable() {
- var hasFocus = this._focusedElement ? this._focusedElement.get(0) : null;
+
+ _focusTabbable() {
+ let hasFocus = this._focusedElement ? this._focusedElement.get(0) : null;
if (!hasFocus) {
hasFocus = this.element.find('[autofocus]').get(0);
}
if (!hasFocus) {
- var $elements = [this.element, this.uiDialogButtonPane];
+ const $elements = [this.element, this.uiDialogButtonPane];
- for (var i = 0; i < $elements.length; i++) {
- var element = $elements[i].get(0);
+ for (let i = 0; i < $elements.length; i++) {
+ const element = $elements[i].get(0);
if (element) {
- var elementTabbable = tabbable(element);
+ const elementTabbable = tabbable(element);
hasFocus = elementTabbable.length ? elementTabbable[0] : null;
}
@@ -60,7 +63,7 @@
}
if (!hasFocus) {
- var closeBtn = this.uiDialogTitlebarClose.get(0);
+ const closeBtn = this.uiDialogTitlebarClose.get(0);
hasFocus = closeBtn && isTabbable(closeBtn) ? closeBtn : null;
}
@@ -70,5 +73,6 @@
$(hasFocus).eq(0).trigger('focus');
}
+
});
})(jQuery, window.tabbable);
\ No newline at end of file
diff --git a/core/misc/dialog/dialog.js b/core/misc/dialog/dialog.js
index 979fdeff67de6dc82c2aa8c217a03bb311d91fbc..4062242a66ebdc8aa137ad5074f79068c4825a81 100644
--- a/core/misc/dialog/dialog.js
+++ b/core/misc/dialog/dialog.js
@@ -11,16 +11,18 @@
dialogClass: '',
buttonClass: 'button',
buttonPrimaryClass: 'button--primary',
- close: function close(event) {
+
+ close(event) {
Drupal.dialog(event.target).close();
Drupal.detachBehaviors(event.target, null, 'unload');
}
+
};
Drupal.dialog = function (element, options) {
- var undef;
- var $element = $(element);
- var dialog = {
+ let undef;
+ const $element = $(element);
+ const dialog = {
open: false,
returnValue: undef
};
@@ -41,13 +43,13 @@
$(window).trigger('dialog:afterclose', [dialog, $element]);
}
- dialog.show = function () {
+ dialog.show = () => {
openDialog({
modal: false
});
};
- dialog.showModal = function () {
+ dialog.showModal = () => {
openDialog({
modal: true
});
diff --git a/core/misc/dialog/dialog.position.js b/core/misc/dialog/dialog.position.js
index 552e1c596f9fdb6dc0ffcd1469df98f4c5bcf431..cbda0c294b792c39e302a8bca890b4a41e3ee719 100644
--- a/core/misc/dialog/dialog.position.js
+++ b/core/misc/dialog/dialog.position.js
@@ -12,27 +12,27 @@
}, drupalSettings.dialog);
function resetPosition(options) {
- var offsets = displace.offsets;
- var left = offsets.left - offsets.right;
- var top = offsets.top - offsets.bottom;
- var leftString = "".concat((left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2)), "px");
- var topString = "".concat((top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2)), "px");
+ const offsets = displace.offsets;
+ const left = offsets.left - offsets.right;
+ const top = offsets.top - offsets.bottom;
+ const leftString = `${(left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2))}px`;
+ const topString = `${(top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2))}px`;
options.position = {
- my: "center".concat(left !== 0 ? leftString : '', " center").concat(top !== 0 ? topString : ''),
+ my: `center${left !== 0 ? leftString : ''} center${top !== 0 ? topString : ''}`,
of: window
};
return options;
}
function resetSize(event) {
- var positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
- var adjustedOptions = {};
- var windowHeight = $(window).height();
- var option;
- var optionValue;
- var adjustedValue;
+ const positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
+ let adjustedOptions = {};
+ let windowHeight = $(window).height();
+ let option;
+ let optionValue;
+ let adjustedValue;
- for (var n = 0; n < positionOptions.length; n++) {
+ for (let n = 0; n < positionOptions.length; n++) {
option = positionOptions[n];
optionValue = event.data.settings[option];
@@ -58,11 +58,11 @@
}
$(window).on({
- 'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
- var autoResize = debounce(resetSize, 20);
- var eventData = {
- settings: settings,
- $element: $element
+ 'dialog:aftercreate': function (event, dialog, $element, settings) {
+ const autoResize = debounce(resetSize, 20);
+ const eventData = {
+ settings,
+ $element
};
if (settings.autoResize === true || settings.autoResize === 'true') {
@@ -74,7 +74,7 @@
$(document).on('drupalViewportOffsetChange.dialogResize', eventData, autoResize);
}
},
- 'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
+ 'dialog:beforeclose': function (event, dialog, $element) {
$(window).off('.dialogResize');
$(document).off('.dialogResize');
}
diff --git a/core/misc/dialog/off-canvas.js b/core/misc/dialog/off-canvas.js
index 96369f40dc55d1c23e132bf6fbdeca5cfeb2672d..552f9a2c94884313a887e734d71ca70db9d92dd2 100644
--- a/core/misc/dialog/off-canvas.js
+++ b/core/misc/dialog/off-canvas.js
@@ -5,178 +5,195 @@
* @preserve
**/
-(function ($, Drupal, debounce, displace) {
+(($, Drupal, debounce, displace) => {
Drupal.offCanvas = {
position: null,
minimumHeight: 30,
minDisplaceWidth: 768,
$mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
- isOffCanvas: function isOffCanvas($element) {
+
+ isOffCanvas($element) {
return $element.is('#drupal-off-canvas');
},
- removeOffCanvasEvents: function removeOffCanvasEvents($element) {
+
+ removeOffCanvasEvents($element) {
$element.off('.off-canvas');
$(document).off('.off-canvas');
$(window).off('.off-canvas');
},
- beforeCreate: function beforeCreate(_ref) {
- var settings = _ref.settings,
- $element = _ref.$element;
+
+ beforeCreate({
+ settings,
+ $element
+ }) {
Drupal.offCanvas.removeOffCanvasEvents($element);
$('body').addClass('js-off-canvas-dialog-open');
settings.position = {
my: 'left top',
- at: "".concat(Drupal.offCanvas.getEdge(), " top"),
+ at: `${Drupal.offCanvas.getEdge()} top`,
of: window
};
- var position = settings.drupalOffCanvasPosition;
- var height = position === 'side' ? $(window).height() : settings.height;
- var width = position === 'side' ? settings.width : '100%';
+ const position = settings.drupalOffCanvasPosition;
+ const height = position === 'side' ? $(window).height() : settings.height;
+ const width = position === 'side' ? settings.width : '100%';
settings.height = height;
settings.width = width;
},
- beforeClose: function beforeClose(_ref2) {
- var $element = _ref2.$element;
+
+ beforeClose({
+ $element
+ }) {
$('body').removeClass('js-off-canvas-dialog-open');
Drupal.offCanvas.removeOffCanvasEvents($element);
Drupal.offCanvas.resetPadding();
},
- afterCreate: function afterCreate(_ref3) {
- var $element = _ref3.$element,
- settings = _ref3.settings;
- var eventData = {
- settings: settings,
- $element: $element,
+
+ afterCreate({
+ $element,
+ settings
+ }) {
+ const eventData = {
+ settings,
+ $element,
offCanvasDialog: this
};
$element.on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize).on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.bodyPadding);
- Drupal.offCanvas.getContainer($element).attr("data-offset-".concat(Drupal.offCanvas.getEdge()), '');
+ Drupal.offCanvas.getContainer($element).attr(`data-offset-${Drupal.offCanvas.getEdge()}`, '');
$(window).on('resize.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100)).trigger('resize.off-canvas');
},
- render: function render(_ref4) {
- var settings = _ref4.settings;
+
+ render({
+ settings
+ }) {
$('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
},
- handleDialogResize: function handleDialogResize(event) {
- var $element = event.data.$element;
- var $container = Drupal.offCanvas.getContainer($element);
- var $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
- var offset = 0;
+
+ handleDialogResize(event) {
+ const $element = event.data.$element;
+ const $container = Drupal.offCanvas.getContainer($element);
+ const $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
+ let offset = 0;
$element.css({
height: 'auto'
});
- var modalHeight = $container.height();
- $offsets.each(function (i, e) {
+ const modalHeight = $container.height();
+ $offsets.each((i, e) => {
offset += $(e).outerHeight();
});
- var scrollOffset = $element.outerHeight() - $element.height();
+ const scrollOffset = $element.outerHeight() - $element.height();
$element.height(modalHeight - offset - scrollOffset);
},
- resetSize: function resetSize(event) {
- var $element = event.data.$element;
- var container = Drupal.offCanvas.getContainer($element);
- var position = event.data.settings.drupalOffCanvasPosition;
+
+ resetSize(event) {
+ const $element = event.data.$element;
+ const container = Drupal.offCanvas.getContainer($element);
+ const position = event.data.settings.drupalOffCanvasPosition;
if (Drupal.offCanvas.position && Drupal.offCanvas.position !== position) {
- container.removeAttr("data-offset-".concat(Drupal.offCanvas.position));
+ container.removeAttr(`data-offset-${Drupal.offCanvas.position}`);
}
if (position === 'top') {
- $element.css('min-height', "".concat(Drupal.offCanvas.minimumHeight, "px"));
+ $element.css('min-height', `${Drupal.offCanvas.minimumHeight}px`);
}
displace();
- var offsets = displace.offsets;
- var topPosition = position === 'side' && offsets.top !== 0 ? "+".concat(offsets.top) : '';
- var adjustedOptions = {
+ const offsets = displace.offsets;
+ const topPosition = position === 'side' && offsets.top !== 0 ? `+${offsets.top}` : '';
+ const adjustedOptions = {
position: {
- my: "".concat(Drupal.offCanvas.getEdge(), " top"),
- at: "".concat(Drupal.offCanvas.getEdge(), " top").concat(topPosition),
+ my: `${Drupal.offCanvas.getEdge()} top`,
+ at: `${Drupal.offCanvas.getEdge()} top${topPosition}`,
of: window
}
};
- var height = position === 'side' ? "".concat($(window).height() - (offsets.top + offsets.bottom), "px") : event.data.settings.height;
+ const height = position === 'side' ? `${$(window).height() - (offsets.top + offsets.bottom)}px` : event.data.settings.height;
container.css({
position: 'fixed',
- height: height
+ height
});
$element.dialog('option', adjustedOptions).trigger('dialogContentResize.off-canvas');
Drupal.offCanvas.position = position;
},
- bodyPadding: function bodyPadding(event) {
- var position = event.data.settings.drupalOffCanvasPosition;
+
+ bodyPadding(event) {
+ const position = event.data.settings.drupalOffCanvasPosition;
if (position === 'side' && $('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
return;
}
Drupal.offCanvas.resetPadding();
- var $element = event.data.$element;
- var $container = Drupal.offCanvas.getContainer($element);
- var $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
- var width = $container.outerWidth();
- var mainCanvasPadding = $mainCanvasWrapper.css("padding-".concat(Drupal.offCanvas.getEdge()));
+ const $element = event.data.$element;
+ const $container = Drupal.offCanvas.getContainer($element);
+ const $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
+ const width = $container.outerWidth();
+ const mainCanvasPadding = $mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`);
if (position === 'side' && width !== mainCanvasPadding) {
- $mainCanvasWrapper.css("padding-".concat(Drupal.offCanvas.getEdge()), "".concat(width, "px"));
- $container.attr("data-offset-".concat(Drupal.offCanvas.getEdge()), width);
+ $mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, `${width}px`);
+ $container.attr(`data-offset-${Drupal.offCanvas.getEdge()}`, width);
displace();
}
- var height = $container.outerHeight();
+ const height = $container.outerHeight();
if (position === 'top') {
- $mainCanvasWrapper.css('padding-top', "".concat(height, "px"));
+ $mainCanvasWrapper.css('padding-top', `${height}px`);
$container.attr('data-offset-top', height);
displace();
}
},
- getContainer: function getContainer($element) {
+
+ getContainer($element) {
return $element.dialog('widget');
},
- getEdge: function getEdge() {
+
+ getEdge() {
return document.documentElement.dir === 'rtl' ? 'left' : 'right';
},
- resetPadding: function resetPadding() {
- Drupal.offCanvas.$mainCanvasWrapper.css("padding-".concat(Drupal.offCanvas.getEdge()), 0);
+
+ resetPadding() {
+ Drupal.offCanvas.$mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, 0);
Drupal.offCanvas.$mainCanvasWrapper.css('padding-top', 0);
displace();
}
+
};
Drupal.behaviors.offCanvasEvents = {
- attach: function attach() {
+ attach: () => {
if (!once('off-canvas', 'html').length) {
return;
}
$(window).on({
- 'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
+ 'dialog:beforecreate': (event, dialog, $element, settings) => {
if (Drupal.offCanvas.isOffCanvas($element)) {
Drupal.offCanvas.beforeCreate({
- dialog: dialog,
- $element: $element,
- settings: settings
+ dialog,
+ $element,
+ settings
});
}
},
- 'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
+ 'dialog:aftercreate': (event, dialog, $element, settings) => {
if (Drupal.offCanvas.isOffCanvas($element)) {
Drupal.offCanvas.render({
- dialog: dialog,
- $element: $element,
- settings: settings
+ dialog,
+ $element,
+ settings
});
Drupal.offCanvas.afterCreate({
- $element: $element,
- settings: settings
+ $element,
+ settings
});
}
},
- 'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
+ 'dialog:beforeclose': (event, dialog, $element) => {
if (Drupal.offCanvas.isOffCanvas($element)) {
Drupal.offCanvas.beforeClose({
- dialog: dialog,
- $element: $element
+ dialog,
+ $element
});
}
}
diff --git a/core/misc/dialog/off-canvas.reset.css b/core/misc/dialog/off-canvas.reset.css
index 1c67de4c15ecef0aee1300edefe0f94df3ca20f9..099317d4fab41768feac2863e16c7cb642f64d1a 100644
--- a/core/misc/dialog/off-canvas.reset.css
+++ b/core/misc/dialog/off-canvas.reset.css
@@ -104,93 +104,6 @@
#drupal-off-canvas input,
#drupal-off-canvas select,
#drupal-off-canvas textarea {
- animation: none 0s ease 0s 1 normal none running;
- -webkit-backface-visibility: visible;
- backface-visibility: visible;
- background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
- border: medium none currentColor;
- border-collapse: separate;
- border-image: none;
- border-radius: 0;
- border-spacing: 0;
- bottom: auto;
- box-shadow: none;
- box-sizing: content-box;
- caption-side: top;
- clear: none;
- clip: auto;
- color: #000;
- columns: auto;
- column-count: auto;
- column-fill: balance;
- grid-column-gap: normal;
- column-rule: medium none currentColor;
- column-span: 1;
- column-width: auto;
- content: normal;
- counter-increment: none;
- counter-reset: none;
- cursor: auto;
- direction: ltr;
- display: inline;
- empty-cells: show;
- float: none;
- font-family: serif;
- font-size: medium;
- font-style: normal;
- font-feature-settings: normal;
- font-variant: normal;
- font-weight: normal;
- font-stretch: normal;
- line-height: normal;
- height: auto;
- -webkit-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
- left: auto;
- letter-spacing: normal;
- list-style: disc outside none;
- margin: 0;
- max-height: none;
- max-width: none;
- min-height: 0;
- min-width: 0;
- opacity: 1;
- orphans: 2;
- outline: medium none invert;
- overflow: visible;
- overflow-x: visible;
- overflow-y: visible;
- padding: 0;
- page-break-after: auto;
- page-break-before: auto;
- page-break-inside: auto;
- perspective: none;
- perspective-origin: 50% 50%;
- position: static;
- right: auto;
- -moz-tab-size: 8;
- tab-size: 8;
- table-layout: auto;
- text-align: left;
- text-align-last: auto;
- text-decoration: none;
- text-indent: 0;
- text-shadow: none;
- text-transform: none;
- top: auto;
- transform: none;
- transform-origin: 50% 50% 0;
- transform-style: flat;
- transition: none 0s ease 0s;
- unicode-bidi: normal;
- vertical-align: baseline;
- visibility: visible;
- white-space: normal;
- widows: 2;
- width: auto;
- word-spacing: normal;
- z-index: auto;
all: initial;
box-sizing: border-box;
text-shadow: none;
@@ -368,93 +281,6 @@
#drupal-off-canvas select:before,
#drupal-off-canvas textarea:after,
#drupal-off-canvas textarea:before {
- animation: none 0s ease 0s 1 normal none running;
- -webkit-backface-visibility: visible;
- backface-visibility: visible;
- background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
- border: medium none currentColor;
- border-collapse: separate;
- border-image: none;
- border-radius: 0;
- border-spacing: 0;
- bottom: auto;
- box-shadow: none;
- box-sizing: content-box;
- caption-side: top;
- clear: none;
- clip: auto;
- color: #000;
- columns: auto;
- column-count: auto;
- column-fill: balance;
- grid-column-gap: normal;
- column-rule: medium none currentColor;
- column-span: 1;
- column-width: auto;
- content: normal;
- counter-increment: none;
- counter-reset: none;
- cursor: auto;
- direction: ltr;
- display: inline;
- empty-cells: show;
- float: none;
- font-family: serif;
- font-size: medium;
- font-style: normal;
- font-feature-settings: normal;
- font-variant: normal;
- font-weight: normal;
- font-stretch: normal;
- line-height: normal;
- height: auto;
- -webkit-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
- left: auto;
- letter-spacing: normal;
- list-style: disc outside none;
- margin: 0;
- max-height: none;
- max-width: none;
- min-height: 0;
- min-width: 0;
- opacity: 1;
- orphans: 2;
- outline: medium none invert;
- overflow: visible;
- overflow-x: visible;
- overflow-y: visible;
- padding: 0;
- page-break-after: auto;
- page-break-before: auto;
- page-break-inside: auto;
- perspective: none;
- perspective-origin: 50% 50%;
- position: static;
- right: auto;
- -moz-tab-size: 8;
- tab-size: 8;
- table-layout: auto;
- text-align: left;
- text-align-last: auto;
- text-decoration: none;
- text-indent: 0;
- text-shadow: none;
- text-transform: none;
- top: auto;
- transform: none;
- transform-origin: 50% 50% 0;
- transform-style: flat;
- transition: none 0s ease 0s;
- unicode-bidi: normal;
- vertical-align: baseline;
- visibility: visible;
- white-space: normal;
- widows: 2;
- width: auto;
- word-spacing: normal;
- z-index: auto;
all: initial;
box-sizing: border-box;
text-shadow: none;
@@ -794,7 +620,6 @@
#drupal-off-canvas textarea[disabled] {
cursor: default;
-webkit-user-select: none;
- -ms-user-select: none;
user-select: none;
box-shadow: none;
}
diff --git a/core/misc/displace.js b/core/misc/displace.js
index e0cef041d81ebd916bfc2b083caf75990f1a5dff..d28056cb895734eccba90c72992c8821061108ab 100644
--- a/core/misc/displace.js
+++ b/core/misc/displace.js
@@ -6,7 +6,7 @@
**/
(function ($, Drupal, debounce) {
- var offsets = {
+ let offsets = {
top: 0,
right: 0,
bottom: 0,
@@ -14,12 +14,12 @@
};
function getRawOffset(el, edge) {
- var $el = $(el);
- var documentElement = document.documentElement;
- var displacement = 0;
- var horizontal = edge === 'left' || edge === 'right';
- var placement = $el.offset()[horizontal ? 'left' : 'top'];
- placement -= window["scroll".concat(horizontal ? 'X' : 'Y')] || document.documentElement["scroll".concat(horizontal ? 'Left' : 'Top')] || 0;
+ const $el = $(el);
+ const documentElement = document.documentElement;
+ let displacement = 0;
+ const horizontal = edge === 'left' || edge === 'right';
+ let placement = $el.offset()[horizontal ? 'left' : 'top'];
+ placement -= window[`scroll${horizontal ? 'X' : 'Y'}`] || document.documentElement[`scroll${horizontal ? 'Left' : 'Top'}`] || 0;
switch (edge) {
case 'top':
@@ -46,18 +46,18 @@
}
function calculateOffset(edge) {
- var edgeOffset = 0;
- var displacingElements = document.querySelectorAll("[data-offset-".concat(edge, "]"));
- var n = displacingElements.length;
+ let edgeOffset = 0;
+ const displacingElements = document.querySelectorAll(`[data-offset-${edge}]`);
+ const n = displacingElements.length;
- for (var i = 0; i < n; i++) {
- var el = displacingElements[i];
+ for (let i = 0; i < n; i++) {
+ const el = displacingElements[i];
if (el.style.display === 'none') {
continue;
}
- var displacement = parseInt(el.getAttribute("data-offset-".concat(edge)), 10);
+ let displacement = parseInt(el.getAttribute(`data-offset-${edge}`), 10);
if (isNaN(displacement)) {
displacement = getRawOffset(el, edge);
@@ -90,7 +90,7 @@
}
Drupal.behaviors.drupalDisplace = {
- attach: function attach() {
+ attach() {
if (this.displaceProcessed) {
return;
}
@@ -98,10 +98,11 @@
this.displaceProcessed = true;
$(window).on('resize.drupalDisplace', debounce(displace, 200));
}
+
};
Drupal.displace = displace;
$.extend(Drupal.displace, {
- offsets: offsets,
- calculateOffset: calculateOffset
+ offsets,
+ calculateOffset
});
})(jQuery, Drupal, Drupal.debounce);
\ No newline at end of file
diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js
index f7787d51cb60cd02bcaad1f3855b8ce5b81234ca..bf11cefef0031b190fbea5060d892324ea2627f3 100644
--- a/core/misc/dropbutton/dropbutton.js
+++ b/core/misc/dropbutton/dropbutton.js
@@ -7,17 +7,17 @@
(function ($, Drupal) {
function DropButton(dropbutton, settings) {
- var options = $.extend({
+ const options = $.extend({
title: Drupal.t('List additional actions')
}, settings);
- var $dropbutton = $(dropbutton);
+ const $dropbutton = $(dropbutton);
this.$dropbutton = $dropbutton;
this.$list = $dropbutton.find('.dropbutton');
this.$actions = this.$list.find('li').addClass('dropbutton-action');
if (this.$actions.length > 1) {
- var $primary = this.$actions.slice(0, 1);
- var $secondary = this.$actions.slice(1);
+ const $primary = this.$actions.slice(0, 1);
+ const $secondary = this.$actions.slice(1);
$secondary.addClass('secondary-action');
$primary.after(Drupal.theme('dropbuttonToggle', options));
this.$dropbutton.addClass('dropbutton-multiple').on({
@@ -37,56 +37,65 @@
}
Drupal.behaviors.dropButton = {
- attach: function attach(context, settings) {
- var dropbuttons = once('dropbutton', '.dropbutton-wrapper', context);
+ attach(context, settings) {
+ const dropbuttons = once('dropbutton', '.dropbutton-wrapper', context);
if (dropbuttons.length) {
- var body = once('dropbutton-click', 'body');
+ const body = once('dropbutton-click', 'body');
if (body.length) {
$(body).on('click', '.dropbutton-toggle', dropbuttonClickHandler);
}
- dropbuttons.forEach(function (dropbutton) {
+ dropbuttons.forEach(dropbutton => {
DropButton.dropbuttons.push(new DropButton(dropbutton, settings.dropbutton));
});
}
}
+
};
$.extend(DropButton, {
dropbuttons: []
});
$.extend(DropButton.prototype, {
- toggle: function toggle(show) {
- var isBool = typeof show === 'boolean';
+ toggle(show) {
+ const isBool = typeof show === 'boolean';
show = isBool ? show : !this.$dropbutton.hasClass('open');
this.$dropbutton.toggleClass('open', show);
},
- hoverIn: function hoverIn() {
+
+ hoverIn() {
if (this.timerID) {
window.clearTimeout(this.timerID);
}
},
- hoverOut: function hoverOut() {
+
+ hoverOut() {
this.timerID = window.setTimeout($.proxy(this, 'close'), 500);
},
- open: function open() {
+
+ open() {
this.toggle(true);
},
- close: function close() {
+
+ close() {
this.toggle(false);
},
- focusOut: function focusOut(e) {
+
+ focusOut(e) {
this.hoverOut.call(this, e);
},
- focusIn: function focusIn(e) {
+
+ focusIn(e) {
this.hoverIn.call(this, e);
}
+
});
$.extend(Drupal.theme, {
- dropbuttonToggle: function dropbuttonToggle(options) {
- return "<li class=\"dropbutton-toggle\"><button type=\"button\"><span class=\"dropbutton-arrow\"><span class=\"visually-hidden\">".concat(options.title, "</span></span></button></li>");
+ dropbuttonToggle(options) {
+ return `<li class="dropbutton-toggle"><button type="button"><span class="dropbutton-arrow"><span class="visually-hidden">${options.title}</span></span></button></li>`;
}
+
});
Drupal.DropButton = DropButton;
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/drupal.init.js b/core/misc/drupal.init.js
index 81eb78e0209d4df4c604dde4fc4ab4a47a646128..be0cae2fcdd5143dbe2e02abf0294b7878fba840 100644
--- a/core/misc/drupal.init.js
+++ b/core/misc/drupal.init.js
@@ -12,8 +12,8 @@ if (window.jQuery) {
document.documentElement.className += ' js';
(function (Drupal, drupalSettings) {
- var domReady = function domReady(callback) {
- var listener = function listener() {
+ const domReady = callback => {
+ const listener = () => {
callback();
document.removeEventListener('DOMContentLoaded', listener);
};
@@ -25,7 +25,7 @@ document.documentElement.className += ' js';
}
};
- domReady(function () {
+ domReady(() => {
Drupal.attachBehaviors(document, drupalSettings);
});
})(Drupal, window.drupalSettings);
\ No newline at end of file
diff --git a/core/misc/drupal.js b/core/misc/drupal.js
index a1debf251d9bba385975f02ca3dbeee84e753672..dc12784c23aae523e816e4af7469f30d58527565 100644
--- a/core/misc/drupal.js
+++ b/core/misc/drupal.js
@@ -12,7 +12,7 @@ window.Drupal = {
(function (Drupal, drupalSettings, drupalTranslations, console, Proxy, Reflect) {
Drupal.throwError = function (error) {
- setTimeout(function () {
+ setTimeout(() => {
throw error;
}, 0);
};
@@ -20,8 +20,8 @@ window.Drupal = {
Drupal.attachBehaviors = function (context, settings) {
context = context || document;
settings = settings || drupalSettings;
- var behaviors = Drupal.behaviors;
- Object.keys(behaviors || {}).forEach(function (i) {
+ const behaviors = Drupal.behaviors;
+ Object.keys(behaviors || {}).forEach(i => {
if (typeof behaviors[i].attach === 'function') {
try {
behaviors[i].attach(context, settings);
@@ -36,8 +36,8 @@ window.Drupal = {
context = context || document;
settings = settings || drupalSettings;
trigger = trigger || 'unload';
- var behaviors = Drupal.behaviors;
- Object.keys(behaviors || {}).forEach(function (i) {
+ const behaviors = Drupal.behaviors;
+ Object.keys(behaviors || {}).forEach(i => {
if (typeof behaviors[i].detach === 'function') {
try {
behaviors[i].detach(context, settings, trigger);
@@ -54,8 +54,8 @@ window.Drupal = {
};
Drupal.formatString = function (str, args) {
- var processedArgs = {};
- Object.keys(args || {}).forEach(function (key) {
+ const processedArgs = {};
+ Object.keys(args || {}).forEach(key => {
switch (key.charAt(0)) {
case '@':
processedArgs[key] = Drupal.checkPlain(args[key]);
@@ -80,20 +80,18 @@ window.Drupal = {
if (!Array.isArray(keys)) {
keys = Object.keys(args || {});
- keys.sort(function (a, b) {
- return a.length - b.length;
- });
+ keys.sort((a, b) => a.length - b.length);
}
if (keys.length === 0) {
return str;
}
- var key = keys.pop();
- var fragments = str.split(key);
+ const key = keys.pop();
+ const fragments = str.split(key);
if (keys.length) {
- for (var i = 0; i < fragments.length; i++) {
+ for (let i = 0; i < fragments.length; i++) {
fragments[i] = Drupal.stringReplace(fragments[i], args, keys.slice(0));
}
}
@@ -121,7 +119,7 @@ window.Drupal = {
};
Drupal.url.toAbsolute = function (url) {
- var urlParsingNode = document.createElement('a');
+ const urlParsingNode = document.createElement('a');
try {
url = decodeURIComponent(url);
@@ -132,14 +130,16 @@ window.Drupal = {
};
Drupal.url.isLocal = function (url) {
- var absoluteUrl = Drupal.url.toAbsolute(url);
- var protocol = window.location.protocol;
+ let absoluteUrl = Drupal.url.toAbsolute(url);
+ let {
+ protocol
+ } = window.location;
if (protocol === 'http:' && absoluteUrl.indexOf('https:') === 0) {
protocol = 'https:';
}
- var baseUrl = "".concat(protocol, "//").concat(window.location.host).concat(drupalSettings.path.baseUrl.slice(0, -1));
+ let baseUrl = `${protocol}//${window.location.host}${drupalSettings.path.baseUrl.slice(0, -1)}`;
try {
absoluteUrl = decodeURIComponent(absoluteUrl);
@@ -149,15 +149,15 @@ window.Drupal = {
baseUrl = decodeURIComponent(baseUrl);
} catch (e) {}
- return absoluteUrl === baseUrl || absoluteUrl.indexOf("".concat(baseUrl, "/")) === 0;
+ return absoluteUrl === baseUrl || absoluteUrl.indexOf(`${baseUrl}/`) === 0;
};
Drupal.formatPlural = function (count, singular, plural, args, options) {
args = args || {};
args['@count'] = count;
- var pluralDelimiter = drupalSettings.pluralDelimiter;
- var translations = Drupal.t(singular + pluralDelimiter + plural, args, options).split(pluralDelimiter);
- var index = 0;
+ const pluralDelimiter = drupalSettings.pluralDelimiter;
+ const translations = Drupal.t(singular + pluralDelimiter + plural, args, options).split(pluralDelimiter);
+ let index = 0;
if (typeof drupalTranslations !== 'undefined' && drupalTranslations.pluralFormula) {
index = count in drupalTranslations.pluralFormula ? drupalTranslations.pluralFormula[count] : drupalTranslations.pluralFormula.default;
@@ -172,53 +172,43 @@ window.Drupal = {
return window.encodeURIComponent(item).replace(/%2F/g, '/');
};
- Drupal.deprecationError = function (_ref) {
- var message = _ref.message;
-
+ Drupal.deprecationError = ({
+ message
+ }) => {
if (drupalSettings.suppressDeprecationErrors === false && typeof console !== 'undefined' && console.warn) {
- console.warn("[Deprecation] ".concat(message));
+ console.warn(`[Deprecation] ${message}`);
}
};
- Drupal.deprecatedProperty = function (_ref2) {
- var target = _ref2.target,
- deprecatedProperty = _ref2.deprecatedProperty,
- message = _ref2.message;
-
+ Drupal.deprecatedProperty = ({
+ target,
+ deprecatedProperty,
+ message
+ }) => {
if (!Proxy || !Reflect) {
return target;
}
return new Proxy(target, {
- get: function get(target, key) {
+ get: (target, key, ...rest) => {
if (key === deprecatedProperty) {
Drupal.deprecationError({
- message: message
+ message
});
}
- for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
- rest[_key - 2] = arguments[_key];
- }
-
- return Reflect.get.apply(Reflect, [target, key].concat(rest));
+ return Reflect.get(target, key, ...rest);
}
});
};
- Drupal.theme = function (func) {
+ Drupal.theme = function (func, ...args) {
if (func in Drupal.theme) {
- var _Drupal$theme;
-
- for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
- args[_key2 - 1] = arguments[_key2];
- }
-
- return (_Drupal$theme = Drupal.theme)[func].apply(_Drupal$theme, args);
+ return Drupal.theme[func](...args);
}
};
Drupal.theme.placeholder = function (str) {
- return "<em class=\"placeholder\">".concat(Drupal.checkPlain(str), "</em>");
+ return `<em class="placeholder">${Drupal.checkPlain(str)}</em>`;
};
})(Drupal, window.drupalSettings, window.drupalTranslations, window.console, window.Proxy, window.Reflect);
\ No newline at end of file
diff --git a/core/misc/drupalSettingsLoader.js b/core/misc/drupalSettingsLoader.js
index 27450b84d91d7305aa2f5a76fcc13d68a51c7f26..73cf91dae1ea7c042d31b8bf024dd6b3dc2af278 100644
--- a/core/misc/drupalSettingsLoader.js
+++ b/core/misc/drupalSettingsLoader.js
@@ -6,7 +6,7 @@
**/
(function () {
- var settingsElement = document.querySelector('head > script[type="application/json"][data-drupal-selector="drupal-settings-json"], body > script[type="application/json"][data-drupal-selector="drupal-settings-json"]');
+ const settingsElement = document.querySelector('head > script[type="application/json"][data-drupal-selector="drupal-settings-json"], body > script[type="application/json"][data-drupal-selector="drupal-settings-json"]');
window.drupalSettings = {};
if (settingsElement !== null) {
diff --git a/core/misc/entity-form.js b/core/misc/entity-form.js
index af450a020248fa0cf7395f6d4a0e5cf41c66f335..22c92201a0a1d9d426d3720d84ba2b7485080ec2 100644
--- a/core/misc/entity-form.js
+++ b/core/misc/entity-form.js
@@ -7,11 +7,11 @@
(function ($, Drupal) {
Drupal.behaviors.entityContentDetailsSummaries = {
- attach: function attach(context) {
- var $context = $(context);
- $context.find('.entity-content-form-revision-information').drupalSetSummary(function (context) {
- var $revisionContext = $(context);
- var revisionCheckbox = $revisionContext.find('.js-form-item-revision input');
+ attach(context) {
+ const $context = $(context);
+ $context.find('.entity-content-form-revision-information').drupalSetSummary(context => {
+ const $revisionContext = $(context);
+ const revisionCheckbox = $revisionContext.find('.js-form-item-revision input');
if (revisionCheckbox.is(':checked') || !revisionCheckbox.length && $revisionContext.find('.js-form-item-revision-log textarea').length) {
return Drupal.t('New revision');
@@ -19,10 +19,10 @@
return Drupal.t('No revision');
});
- $context.find('details.entity-translation-options').drupalSetSummary(function (context) {
- var $translationContext = $(context);
- var translate;
- var $checkbox = $translationContext.find('.js-form-item-translation-translate input');
+ $context.find('details.entity-translation-options').drupalSetSummary(context => {
+ const $translationContext = $(context);
+ let translate;
+ let $checkbox = $translationContext.find('.js-form-item-translation-translate input');
if ($checkbox.length) {
translate = $checkbox.is(':checked') ? Drupal.t('Needs to be updated') : Drupal.t('Does not need to be updated');
@@ -34,5 +34,6 @@
return translate;
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/form.js b/core/misc/form.js
index d85f85f1432479468ccbc58cfcdcf93806f1ee2b..c51425ea7533673d97b640bf595f88df36cedd37 100644
--- a/core/misc/form.js
+++ b/core/misc/form.js
@@ -7,32 +7,32 @@
(function ($, Drupal, debounce) {
$.fn.drupalGetSummary = function () {
- var callback = this.data('summaryCallback');
+ const callback = this.data('summaryCallback');
return this[0] && callback ? callback(this[0]).trim() : '';
};
$.fn.drupalSetSummary = function (callback) {
- var self = this;
+ const self = this;
if (typeof callback !== 'function') {
- var val = callback;
+ const val = callback;
- callback = function callback() {
+ callback = function () {
return val;
};
}
- return this.data('summaryCallback', callback).off('formUpdated.summary').on('formUpdated.summary', function () {
+ return this.data('summaryCallback', callback).off('formUpdated.summary').on('formUpdated.summary', () => {
self.trigger('summaryUpdated');
}).trigger('summaryUpdated');
};
Drupal.behaviors.formSingleSubmit = {
- attach: function attach() {
+ attach() {
function onFormSubmit(e) {
- var $form = $(e.currentTarget);
- var formValues = $form.serialize();
- var previousValues = $form.attr('data-drupal-form-submit-last');
+ const $form = $(e.currentTarget);
+ const formValues = $form.serialize();
+ const previousValues = $form.attr('data-drupal-form-submit-last');
if (previousValues === formValues) {
e.preventDefault();
@@ -43,6 +43,7 @@
$(once('form-single-submit', 'body')).on('submit.singleSubmit', 'form:not([method~="GET"])', onFormSubmit);
}
+
};
function triggerFormUpdated(element) {
@@ -50,22 +51,20 @@
}
function fieldsList(form) {
- return [].map.call(form.querySelectorAll('[name][id]'), function (el) {
- return el.id;
- });
+ return [].map.call(form.querySelectorAll('[name][id]'), el => el.id);
}
Drupal.behaviors.formUpdated = {
- attach: function attach(context) {
- var $context = $(context);
- var contextIsForm = $context.is('form');
- var $forms = $(once('form-updated', contextIsForm ? $context : $context.find('form')));
- var formFields;
+ attach(context) {
+ const $context = $(context);
+ const contextIsForm = $context.is('form');
+ const $forms = $(once('form-updated', contextIsForm ? $context : $context.find('form')));
+ let formFields;
if ($forms.length) {
- $.makeArray($forms).forEach(function (form) {
- var events = 'change.formUpdated input.formUpdated ';
- var eventHandler = debounce(function (event) {
+ $.makeArray($forms).forEach(form => {
+ const events = 'change.formUpdated input.formUpdated ';
+ const eventHandler = debounce(event => {
triggerFormUpdated(event.target);
}, 300);
formFields = fieldsList(form).join(',');
@@ -76,35 +75,37 @@
if (contextIsForm) {
formFields = fieldsList(context).join(',');
- var currentFields = $(context).attr('data-drupal-form-fields');
+ const currentFields = $(context).attr('data-drupal-form-fields');
if (formFields !== currentFields) {
triggerFormUpdated(context);
}
}
},
- detach: function detach(context, settings, trigger) {
- var $context = $(context);
- var contextIsForm = $context.is('form');
+
+ detach(context, settings, trigger) {
+ const $context = $(context);
+ const contextIsForm = $context.is('form');
if (trigger === 'unload') {
- once.remove('form-updated', contextIsForm ? $context : $context.find('form')).forEach(function (form) {
+ once.remove('form-updated', contextIsForm ? $context : $context.find('form')).forEach(form => {
form.removeAttribute('data-drupal-form-fields');
$(form).off('.formUpdated');
});
}
}
+
};
Drupal.behaviors.fillUserInfoFromBrowser = {
- attach: function attach(context, settings) {
- var userInfo = ['name', 'mail', 'homepage'];
- var $forms = $(once('user-info-from-browser', '[data-user-info-from-browser]'));
+ attach(context, settings) {
+ const userInfo = ['name', 'mail', 'homepage'];
+ const $forms = $(once('user-info-from-browser', '[data-user-info-from-browser]'));
if ($forms.length) {
- userInfo.forEach(function (info) {
- var $element = $forms.find("[name=".concat(info, "]"));
- var browserData = localStorage.getItem("Drupal.visitor.".concat(info));
- var emptyOrDefault = $element.val() === '' || $element.attr('data-drupal-default-value') === $element.val();
+ userInfo.forEach(info => {
+ const $element = $forms.find(`[name=${info}]`);
+ const browserData = localStorage.getItem(`Drupal.visitor.${info}`);
+ const emptyOrDefault = $element.val() === '' || $element.attr('data-drupal-default-value') === $element.val();
if ($element.length && emptyOrDefault && browserData) {
$element.val(browserData);
@@ -112,20 +113,21 @@
});
}
- $forms.on('submit', function () {
- userInfo.forEach(function (info) {
- var $element = $forms.find("[name=".concat(info, "]"));
+ $forms.on('submit', () => {
+ userInfo.forEach(info => {
+ const $element = $forms.find(`[name=${info}]`);
if ($element.length) {
- localStorage.setItem("Drupal.visitor.".concat(info), $element.val());
+ localStorage.setItem(`Drupal.visitor.${info}`, $element.val());
}
});
});
}
+
};
- var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e) {
- var url;
+ const handleFragmentLinkClickOrHashChange = e => {
+ let url;
if (e.type === 'click') {
url = e.currentTarget.location ? e.currentTarget.location : e.currentTarget;
@@ -133,18 +135,16 @@
url = window.location;
}
- var hash = url.hash.substr(1);
+ const hash = url.hash.substr(1);
if (hash) {
- var $target = $("#".concat(hash));
+ const $target = $(`#${hash}`);
$('body').trigger('formFragmentLinkClickOrHashChange', [$target]);
- setTimeout(function () {
- return $target.trigger('focus');
- }, 300);
+ setTimeout(() => $target.trigger('focus'), 300);
}
};
- var debouncedHandleFragmentLinkClickOrHashChange = debounce(handleFragmentLinkClickOrHashChange, 300, true);
+ const debouncedHandleFragmentLinkClickOrHashChange = debounce(handleFragmentLinkClickOrHashChange, 300, true);
$(window).on('hashchange.form-fragment', debouncedHandleFragmentLinkClickOrHashChange);
$(document).on('click.form-fragment', 'a[href*="#"]', debouncedHandleFragmentLinkClickOrHashChange);
})(jQuery, Drupal, Drupal.debounce);
\ No newline at end of file
diff --git a/core/misc/jquery.cookie.shim.js b/core/misc/jquery.cookie.shim.js
index 4902e04d068e575c8899e4a4259169f1ab7f8427..95d41336d14449c770ad61557ac2a9f81a2c1aea 100644
--- a/core/misc/jquery.cookie.shim.js
+++ b/core/misc/jquery.cookie.shim.js
@@ -5,20 +5,12 @@
* @preserve
**/
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+(($, Drupal, cookies) => {
+ const deprecatedMessageSuffix = `is deprecated in Drupal 9.0.0 and will be removed in Drupal 10.0.0. Use the core/js-cookie library instead. See https://www.drupal.org/node/3104677`;
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+ const isFunction = obj => Object.prototype.toString.call(obj) === '[object Function]';
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-(function ($, Drupal, cookies) {
- var deprecatedMessageSuffix = "is deprecated in Drupal 9.0.0 and will be removed in Drupal 10.0.0. Use the core/js-cookie library instead. See https://www.drupal.org/node/3104677";
-
- var isFunction = function isFunction(obj) {
- return Object.prototype.toString.call(obj) === '[object Function]';
- };
-
- var parseCookieValue = function parseCookieValue(value, parseJson) {
+ const parseCookieValue = (value, parseJson) => {
if (value.indexOf('"') === 0) {
value = value.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
}
@@ -29,8 +21,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
} catch (e) {}
};
- var reader = function reader(cookieValue, cookieName, converter, readUnsanitized, parseJson) {
- var value = readUnsanitized ? cookieValue : parseCookieValue(cookieValue, parseJson);
+ const reader = (cookieValue, cookieName, converter, readUnsanitized, parseJson) => {
+ const value = readUnsanitized ? cookieValue : parseCookieValue(cookieValue, parseJson);
if (converter !== undefined && isFunction(converter)) {
return converter(value, cookieName);
@@ -39,42 +31,38 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
return value;
};
- $.cookie = function (key) {
- var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
- var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+ $.cookie = (key, value = undefined, options = undefined) => {
Drupal.deprecationError({
- message: "jQuery.cookie() ".concat(deprecatedMessageSuffix)
+ message: `jQuery.cookie() ${deprecatedMessageSuffix}`
});
if (value !== undefined && !isFunction(value)) {
- var attributes = _objectSpread(_objectSpread({}, $.cookie.defaults), options);
+ const attributes = { ...$.cookie.defaults,
+ ...options
+ };
if (typeof attributes.expires === 'string' && attributes.expires !== '') {
attributes.expires = new Date(attributes.expires);
}
- var cookieSetter = cookies.withConverter({
- write: function write(cookieValue) {
- return encodeURIComponent(cookieValue);
- }
+ const cookieSetter = cookies.withConverter({
+ write: cookieValue => encodeURIComponent(cookieValue)
});
value = $.cookie.json && !$.cookie.raw ? JSON.stringify(value) : String(value);
return cookieSetter.set(key, value, attributes);
}
- var userProvidedConverter = value;
- var cookiesShim = cookies.withConverter({
- read: function read(cookieValue, cookieName) {
- return reader(cookieValue, cookieName, userProvidedConverter, $.cookie.raw, $.cookie.json);
- }
+ const userProvidedConverter = value;
+ const cookiesShim = cookies.withConverter({
+ read: (cookieValue, cookieName) => reader(cookieValue, cookieName, userProvidedConverter, $.cookie.raw, $.cookie.json)
});
if (key !== undefined) {
return cookiesShim.get(key);
}
- var results = cookiesShim.get();
- Object.keys(results).forEach(function (resultKey) {
+ const results = cookiesShim.get();
+ Object.keys(results).forEach(resultKey => {
if (results[resultKey] === undefined) {
delete results[resultKey];
}
@@ -82,17 +70,20 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
return results;
};
- $.cookie.defaults = _objectSpread({
- path: ''
- }, cookies.defaults);
+ $.cookie.defaults = {
+ path: '',
+ ...cookies.defaults
+ };
$.cookie.json = false;
$.cookie.raw = false;
- $.removeCookie = function (key, options) {
+ $.removeCookie = (key, options) => {
Drupal.deprecationError({
- message: "jQuery.removeCookie() ".concat(deprecatedMessageSuffix)
+ message: `jQuery.removeCookie() ${deprecatedMessageSuffix}`
+ });
+ cookies.remove(key, { ...$.cookie.defaults,
+ ...options
});
- cookies.remove(key, _objectSpread(_objectSpread({}, $.cookie.defaults), options));
return !cookies.get(key);
};
})(jQuery, Drupal, window.Cookies);
\ No newline at end of file
diff --git a/core/misc/jquery.once.bc.js b/core/misc/jquery.once.bc.js
index 9b3c3d4c6ff956c77c96580f277ec8af61972982..e41fe3df32fc8a41f330da3aeb01d69d398b124f 100644
--- a/core/misc/jquery.once.bc.js
+++ b/core/misc/jquery.once.bc.js
@@ -5,26 +5,26 @@
* @preserve
**/
-(function ($, once) {
- var deprecatedMessageSuffix = "is deprecated in Drupal 9.3.0 and will be removed in Drupal 10.0.0. Use the core/once library instead. See https://www.drupal.org/node/3158256";
- var originalJQOnce = $.fn.once;
- var originalJQRemoveOnce = $.fn.removeOnce;
+(($, once) => {
+ const deprecatedMessageSuffix = `is deprecated in Drupal 9.3.0 and will be removed in Drupal 10.0.0. Use the core/once library instead. See https://www.drupal.org/node/3158256`;
+ const originalJQOnce = $.fn.once;
+ const originalJQRemoveOnce = $.fn.removeOnce;
$.fn.once = function jQueryOnce(id) {
Drupal.deprecationError({
- message: "jQuery.once() ".concat(deprecatedMessageSuffix)
+ message: `jQuery.once() ${deprecatedMessageSuffix}`
});
return originalJQOnce.apply(this, [id]);
};
$.fn.removeOnce = function jQueryRemoveOnce(id) {
Drupal.deprecationError({
- message: "jQuery.removeOnce() ".concat(deprecatedMessageSuffix)
+ message: `jQuery.removeOnce() ${deprecatedMessageSuffix}`
});
return originalJQRemoveOnce.apply(this, [id]);
};
- var drupalOnce = once;
+ const drupalOnce = once;
function augmentedOnce(id, selector, context) {
originalJQOnce.apply($(selector, context), [id]);
@@ -37,6 +37,6 @@
}
window.once = Object.assign(augmentedOnce, drupalOnce, {
- remove: remove
+ remove
});
})(jQuery, once);
\ No newline at end of file
diff --git a/core/misc/jquery.tabbable.shim.js b/core/misc/jquery.tabbable.shim.js
index d5862998470884e89065571ecd94ec475d77d3ad..eaf650582c809590f201a7c219f7464a051cfd73 100644
--- a/core/misc/jquery.tabbable.shim.js
+++ b/core/misc/jquery.tabbable.shim.js
@@ -5,16 +5,17 @@
* @preserve
**/
-(function ($, Drupal, _ref) {
- var isTabbable = _ref.isTabbable;
+(($, Drupal, {
+ isTabbable
+}) => {
$.extend($.expr[':'], {
- tabbable: function tabbable(element) {
+ tabbable(element) {
Drupal.deprecationError({
message: 'The :tabbable selector is deprecated in Drupal 9.2.0 and will be removed in Drupal 10.0.0. Use the core/tabbable library instead. See https://www.drupal.org/node/3183730'
});
if (element.tagName === 'SUMMARY' || element.tagName === 'DETAILS') {
- var tabIndex = element.getAttribute('tabIndex');
+ const tabIndex = element.getAttribute('tabIndex');
if (tabIndex === null || tabIndex < 0) {
return false;
@@ -23,5 +24,6 @@
return isTabbable(element);
}
+
});
})(jQuery, Drupal, window.tabbable);
\ No newline at end of file
diff --git a/core/misc/machine-name.js b/core/misc/machine-name.js
index 2e0e1614cff0c1f5c9c6f5bb1e5365295bb91005..6b74c3945107d4d752780a925eeef39554efe308 100644
--- a/core/misc/machine-name.js
+++ b/core/misc/machine-name.js
@@ -7,14 +7,14 @@
(function ($, Drupal, drupalSettings) {
Drupal.behaviors.machineName = {
- attach: function attach(context, settings) {
- var self = this;
- var $context = $(context);
- var timeout = null;
- var xhr = null;
+ attach(context, settings) {
+ const self = this;
+ const $context = $(context);
+ let timeout = null;
+ let xhr = null;
function clickEditHandler(e) {
- var data = e.data;
+ const data = e.data;
data.$wrapper.removeClass('visually-hidden');
data.$target.trigger('focus');
data.$suffix.hide();
@@ -22,11 +22,11 @@
}
function machineNameHandler(e) {
- var data = e.data;
- var options = data.options;
- var baseValue = $(e.target).val();
- var rx = new RegExp(options.replace_pattern, 'g');
- var expected = baseValue.toLowerCase().replace(rx, options.replace).substr(0, options.maxlength);
+ const data = e.data;
+ const options = data.options;
+ const baseValue = $(e.target).val();
+ const rx = new RegExp(options.replace_pattern, 'g');
+ const expected = baseValue.toLowerCase().replace(rx, options.replace).substr(0, options.maxlength);
if (xhr && xhr.readystate !== 4) {
xhr.abort();
@@ -39,8 +39,8 @@
}
if (baseValue.toLowerCase() !== expected) {
- timeout = setTimeout(function () {
- xhr = self.transliterate(baseValue, options).done(function (machine) {
+ timeout = setTimeout(() => {
+ xhr = self.transliterate(baseValue, options).done(machine => {
self.showMachineName(machine.substr(0, options.maxlength), data);
});
}, 300);
@@ -49,12 +49,12 @@
}
}
- Object.keys(settings.machineName).forEach(function (sourceId) {
- var options = settings.machineName[sourceId];
- var $source = $(once('machine-name', $context.find(sourceId).addClass('machine-name-source')));
- var $target = $context.find(options.target).addClass('machine-name-target');
- var $suffix = $context.find(options.suffix);
- var $wrapper = $target.closest('.js-form-item');
+ Object.keys(settings.machineName).forEach(sourceId => {
+ const options = settings.machineName[sourceId];
+ const $source = $(once('machine-name', $context.find(sourceId).addClass('machine-name-source')));
+ const $target = $context.find(options.target).addClass('machine-name-target');
+ const $suffix = $context.find(options.suffix);
+ const $wrapper = $target.closest('.js-form-item');
if (!$source.length || !$target.length || !$suffix.length || !$wrapper.length) {
return;
@@ -66,12 +66,12 @@
options.maxlength = $target.attr('maxlength');
$wrapper.addClass('visually-hidden');
- var machine = $target.val();
- var $preview = $("<span class=\"machine-name-value\">".concat(options.field_prefix).concat(Drupal.checkPlain(machine)).concat(options.field_suffix, "</span>"));
+ const machine = $target.val();
+ const $preview = $(`<span class="machine-name-value">${options.field_prefix}${Drupal.checkPlain(machine)}${options.field_suffix}</span>`);
$suffix.empty();
if (options.label) {
- $suffix.append("<span class=\"machine-name-label\">".concat(options.label, ": </span>"));
+ $suffix.append(`<span class="machine-name-label">${options.label}: </span>`);
}
$suffix.append($preview);
@@ -80,22 +80,22 @@
return;
}
- var eventData = {
- $source: $source,
- $target: $target,
- $suffix: $suffix,
- $wrapper: $wrapper,
- $preview: $preview,
- options: options
+ const eventData = {
+ $source,
+ $target,
+ $suffix,
+ $wrapper,
+ $preview,
+ options
};
if (machine === '' && $source.val() !== '') {
- self.transliterate($source.val(), options).done(function (machineName) {
+ self.transliterate($source.val(), options).done(machineName => {
self.showMachineName(machineName.substr(0, options.maxlength), eventData);
});
}
- var $link = $("<span class=\"admin-link\"><button type=\"button\" class=\"link\">".concat(Drupal.t('Edit'), "</button></span>")).on('click', eventData, clickEditHandler);
+ const $link = $(`<span class="admin-link"><button type="button" class="link">${Drupal.t('Edit')}</button></span>`).on('click', eventData, clickEditHandler);
$suffix.append($link);
if ($target.val() === '') {
@@ -105,8 +105,9 @@
$target.on('invalid', eventData, clickEditHandler);
});
},
- showMachineName: function showMachineName(machine, data) {
- var settings = data.options;
+
+ showMachineName(machine, data) {
+ const settings = data.options;
if (machine !== '') {
if (machine !== settings.replace) {
@@ -121,7 +122,8 @@
data.$preview.empty();
}
},
- transliterate: function transliterate(source, settings) {
+
+ transliterate(source, settings) {
return $.get(Drupal.url('machine_name/transliterate'), {
text: source,
langcode: drupalSettings.langcode,
@@ -131,5 +133,6 @@
lowercase: true
});
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/misc/message.js b/core/misc/message.js
index 2ed9f113bd35367a0908856dbeef879fc947eeb6..8403b5167faf739ed304cabc1e2d8e2ec4d706a7 100644
--- a/core/misc/message.js
+++ b/core/misc/message.js
@@ -5,19 +5,9 @@
* @preserve
**/
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-(function (Drupal) {
- Drupal.Message = function () {
- function _class() {
- var messageWrapper = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-
- _classCallCheck(this, _class);
-
+(Drupal => {
+ Drupal.Message = class {
+ constructor(messageWrapper = null) {
if (!messageWrapper) {
this.messageWrapper = Drupal.Message.defaultWrapper();
} else {
@@ -25,110 +15,99 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
}
}
- _createClass(_class, [{
- key: "add",
- value: function add(message) {
- var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
- if (!options.hasOwnProperty('type')) {
- options.type = 'status';
- }
+ static defaultWrapper() {
+ let wrapper = document.querySelector('[data-drupal-messages]');
- if (typeof message !== 'string') {
- throw new Error('Message must be a string.');
- }
+ if (!wrapper) {
+ wrapper = document.querySelector('[data-drupal-messages-fallback]');
+ wrapper.removeAttribute('data-drupal-messages-fallback');
+ wrapper.setAttribute('data-drupal-messages', '');
+ wrapper.classList.remove('hidden');
+ }
- Drupal.Message.announce(message, options);
- options.id = options.id ? String(options.id) : "".concat(options.type, "-").concat(Math.random().toFixed(15).replace('0.', ''));
+ return wrapper.innerHTML === '' ? Drupal.Message.messageInternalWrapper(wrapper) : wrapper.firstElementChild;
+ }
- if (!Drupal.Message.getMessageTypeLabels().hasOwnProperty(options.type)) {
- var type = options.type;
- throw new Error("The message type, ".concat(type, ", is not present in Drupal.Message.getMessageTypeLabels()."));
- }
+ static getMessageTypeLabels() {
+ return {
+ status: Drupal.t('Status message'),
+ error: Drupal.t('Error message'),
+ warning: Drupal.t('Warning message')
+ };
+ }
- this.messageWrapper.appendChild(Drupal.theme('message', {
- text: message
- }, options));
- return options.id;
- }
- }, {
- key: "select",
- value: function select(id) {
- return this.messageWrapper.querySelector("[data-drupal-message-id^=\"".concat(id, "\"]"));
- }
- }, {
- key: "remove",
- value: function remove(id) {
- return this.messageWrapper.removeChild(this.select(id));
- }
- }, {
- key: "clear",
- value: function clear() {
- var _this = this;
-
- Array.prototype.forEach.call(this.messageWrapper.querySelectorAll('[data-drupal-message-id]'), function (message) {
- _this.messageWrapper.removeChild(message);
- });
+ add(message, options = {}) {
+ if (!options.hasOwnProperty('type')) {
+ options.type = 'status';
}
- }], [{
- key: "defaultWrapper",
- value: function defaultWrapper() {
- var wrapper = document.querySelector('[data-drupal-messages]');
-
- if (!wrapper) {
- wrapper = document.querySelector('[data-drupal-messages-fallback]');
- wrapper.removeAttribute('data-drupal-messages-fallback');
- wrapper.setAttribute('data-drupal-messages', '');
- wrapper.classList.remove('hidden');
- }
-
- return wrapper.innerHTML === '' ? Drupal.Message.messageInternalWrapper(wrapper) : wrapper.firstElementChild;
+
+ if (typeof message !== 'string') {
+ throw new Error('Message must be a string.');
}
- }, {
- key: "getMessageTypeLabels",
- value: function getMessageTypeLabels() {
- return {
- status: Drupal.t('Status message'),
- error: Drupal.t('Error message'),
- warning: Drupal.t('Warning message')
- };
+
+ Drupal.Message.announce(message, options);
+ options.id = options.id ? String(options.id) : `${options.type}-${Math.random().toFixed(15).replace('0.', '')}`;
+
+ if (!Drupal.Message.getMessageTypeLabels().hasOwnProperty(options.type)) {
+ const {
+ type
+ } = options;
+ throw new Error(`The message type, ${type}, is not present in Drupal.Message.getMessageTypeLabels().`);
}
- }, {
- key: "announce",
- value: function announce(message, options) {
- if (!options.priority && (options.type === 'warning' || options.type === 'error')) {
- options.priority = 'assertive';
- }
-
- if (options.announce !== '') {
- Drupal.announce(options.announce || message, options.priority);
- }
+
+ this.messageWrapper.appendChild(Drupal.theme('message', {
+ text: message
+ }, options));
+ return options.id;
+ }
+
+ select(id) {
+ return this.messageWrapper.querySelector(`[data-drupal-message-id^="${id}"]`);
+ }
+
+ remove(id) {
+ return this.messageWrapper.removeChild(this.select(id));
+ }
+
+ clear() {
+ Array.prototype.forEach.call(this.messageWrapper.querySelectorAll('[data-drupal-message-id]'), message => {
+ this.messageWrapper.removeChild(message);
+ });
+ }
+
+ static announce(message, options) {
+ if (!options.priority && (options.type === 'warning' || options.type === 'error')) {
+ options.priority = 'assertive';
}
- }, {
- key: "messageInternalWrapper",
- value: function messageInternalWrapper(messageWrapper) {
- var innerWrapper = document.createElement('div');
- innerWrapper.setAttribute('class', 'messages__wrapper');
- messageWrapper.insertAdjacentElement('afterbegin', innerWrapper);
- return innerWrapper;
+
+ if (options.announce !== '') {
+ Drupal.announce(options.announce || message, options.priority);
}
- }]);
-
- return _class;
- }();
-
- Drupal.theme.message = function (_ref, _ref2) {
- var text = _ref.text;
- var type = _ref2.type,
- id = _ref2.id;
- var messagesTypes = Drupal.Message.getMessageTypeLabels();
- var messageWrapper = document.createElement('div');
- messageWrapper.setAttribute('class', "messages messages--".concat(type));
+ }
+
+ static messageInternalWrapper(messageWrapper) {
+ const innerWrapper = document.createElement('div');
+ innerWrapper.setAttribute('class', 'messages__wrapper');
+ messageWrapper.insertAdjacentElement('afterbegin', innerWrapper);
+ return innerWrapper;
+ }
+
+ };
+
+ Drupal.theme.message = ({
+ text
+ }, {
+ type,
+ id
+ }) => {
+ const messagesTypes = Drupal.Message.getMessageTypeLabels();
+ const messageWrapper = document.createElement('div');
+ messageWrapper.setAttribute('class', `messages messages--${type}`);
messageWrapper.setAttribute('role', type === 'error' || type === 'warning' ? 'alert' : 'status');
messageWrapper.setAttribute('data-drupal-message-id', id);
messageWrapper.setAttribute('data-drupal-message-type', type);
messageWrapper.setAttribute('aria-label', messagesTypes[type]);
- messageWrapper.innerHTML = "".concat(text);
+ messageWrapper.innerHTML = `${text}`;
return messageWrapper;
};
})(Drupal);
\ No newline at end of file
diff --git a/core/misc/modernizr-additional-tests.js b/core/misc/modernizr-additional-tests.js
index acf897c271e9f40f8ba1598f4aaadbeba74eb8e4..35270745b7e6f1811d5dad6aa8a8874d68d2cadd 100644
--- a/core/misc/modernizr-additional-tests.js
+++ b/core/misc/modernizr-additional-tests.js
@@ -5,15 +5,15 @@
* @preserve
**/
-(function (Modernizr) {
- Modernizr.addTest('touchevents', function () {
- var bool;
+(Modernizr => {
+ Modernizr.addTest('touchevents', () => {
+ let bool;
if ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch) {
bool = true;
} else {
- var query = ['@media (', Modernizr._prefixes.join('touch-enabled),('), 'heartz', ')', '{#modernizr{top:9px;position:absolute}}'].join('');
- Modernizr.testStyles(query, function (node) {
+ const query = ['@media (', Modernizr._prefixes.join('touch-enabled),('), 'heartz', ')', '{#modernizr{top:9px;position:absolute}}'].join('');
+ Modernizr.testStyles(query, node => {
bool = node.offsetTop === 9;
});
}
diff --git a/core/misc/polyfills/array.find.js b/core/misc/polyfills/array.find.js
index 98341bf4cb76027e1f07a42b25490c607f1c5a0a..e2b9706c718f2017dc794966903f88ccf093cc32 100644
--- a/core/misc/polyfills/array.find.js
+++ b/core/misc/polyfills/array.find.js
@@ -7,7 +7,7 @@
if (!Array.prototype.find) {
Object.defineProperty(Array.prototype, 'find', {
- value: function value(predicate) {
+ value: function (predicate) {
if (this == null) {
throw TypeError('"this" is null or not defined');
}
diff --git a/core/misc/polyfills/array.includes.js b/core/misc/polyfills/array.includes.js
index 019fd8a046033011745290dc00a0ea08a03325c1..5943b58c83212c0a5f5a1ee8811cab3582324c3e 100644
--- a/core/misc/polyfills/array.includes.js
+++ b/core/misc/polyfills/array.includes.js
@@ -11,15 +11,15 @@ if (!Array.prototype.includes) {
throw new TypeError('Array.prototype.includes called on null or undefined');
}
- var O = Object(this);
- var len = parseInt(O.length, 10) || 0;
+ const O = Object(this);
+ const len = parseInt(O.length, 10) || 0;
if (len === 0) {
return false;
}
- var n = parseInt(arguments[1], 10) || 0;
- var k;
+ const n = parseInt(arguments[1], 10) || 0;
+ let k;
if (n >= 0) {
k = n;
@@ -31,7 +31,7 @@ if (!Array.prototype.includes) {
}
}
- var currentElement;
+ let currentElement;
while (k < len) {
currentElement = O[k];
diff --git a/core/misc/polyfills/customevent.js b/core/misc/polyfills/customevent.js
index 87e371ed1c52faff8613811c9f9d9470298ceeac..0e2910a4f4e2cca6913c49966a528c75f6c63778 100644
--- a/core/misc/polyfills/customevent.js
+++ b/core/misc/polyfills/customevent.js
@@ -14,7 +14,7 @@
cancelable: false,
detail: null
};
- var evt = document.createEvent('CustomEvent');
+ const evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
diff --git a/core/misc/position.js b/core/misc/position.js
index 45d23e00518a50163aa250acb0c2744ae966dfec..b2d865cf948f712d10d735219659bb01b4a6d73b 100644
--- a/core/misc/position.js
+++ b/core/misc/position.js
@@ -5,16 +5,18 @@
* @preserve
**/
-(function ($) {
- var cachedScrollbarWidth = null;
- var max = Math.max,
- abs = Math.abs;
- var regexHorizontal = /left|center|right/;
- var regexVertical = /top|center|bottom/;
- var regexOffset = /[+-]\d+(\.[\d]+)?%?/;
- var regexPosition = /^\w+/;
- var regexPercent = /%$/;
- var _position = $.fn.position;
+($ => {
+ let cachedScrollbarWidth = null;
+ const {
+ max,
+ abs
+ } = Math;
+ const regexHorizontal = /left|center|right/;
+ const regexVertical = /top|center|bottom/;
+ const regexOffset = /[+-]\d+(\.[\d]+)?%?/;
+ const regexPosition = /^\w+/;
+ const regexPercent = /%$/;
+ const _position = $.fn.position;
function getOffsets(offsets, width, height) {
return [parseFloat(offsets[0]) * (regexPercent.test(offsets[0]) ? width / 100 : 1), parseFloat(offsets[1]) * (regexPercent.test(offsets[1]) ? height / 100 : 1)];
@@ -25,7 +27,7 @@
}
function getDimensions(elem) {
- var raw = elem[0];
+ const raw = elem[0];
if (raw.nodeType === 9) {
return {
@@ -67,16 +69,18 @@
};
}
- var collisions = {
+ const collisions = {
fit: {
- left: function left(position, data) {
- var within = data.within;
- var withinOffset = within.isWindow ? within.scrollLeft : within.offset.left;
- var outerWidth = within.width;
- var collisionPosLeft = position.left - data.collisionPosition.marginLeft;
- var overLeft = withinOffset - collisionPosLeft;
- var overRight = collisionPosLeft + data.collisionWidth - outerWidth - withinOffset;
- var newOverRight;
+ left(position, data) {
+ const {
+ within
+ } = data;
+ const withinOffset = within.isWindow ? within.scrollLeft : within.offset.left;
+ const outerWidth = within.width;
+ const collisionPosLeft = position.left - data.collisionPosition.marginLeft;
+ const overLeft = withinOffset - collisionPosLeft;
+ const overRight = collisionPosLeft + data.collisionWidth - outerWidth - withinOffset;
+ let newOverRight;
if (data.collisionWidth > outerWidth) {
if (overLeft > 0 && overRight <= 0) {
@@ -97,14 +101,17 @@
position.left = max(position.left - collisionPosLeft, position.left);
}
},
- top: function top(position, data) {
- var within = data.within;
- var withinOffset = within.isWindow ? within.scrollTop : within.offset.top;
- var outerHeight = data.within.height;
- var collisionPosTop = position.top - data.collisionPosition.marginTop;
- var overTop = withinOffset - collisionPosTop;
- var overBottom = collisionPosTop + data.collisionHeight - outerHeight - withinOffset;
- var newOverBottom;
+
+ top(position, data) {
+ const {
+ within
+ } = data;
+ const withinOffset = within.isWindow ? within.scrollTop : within.offset.top;
+ const outerHeight = data.within.height;
+ const collisionPosTop = position.top - data.collisionPosition.marginTop;
+ const overTop = withinOffset - collisionPosTop;
+ const overBottom = collisionPosTop + data.collisionHeight - outerHeight - withinOffset;
+ let newOverBottom;
if (data.collisionHeight > outerHeight) {
if (overTop > 0 && overBottom <= 0) {
@@ -125,21 +132,24 @@
position.top = max(position.top - collisionPosTop, position.top);
}
}
+
},
flip: {
- left: function left(position, data) {
- var within = data.within;
- var withinOffset = within.offset.left + within.scrollLeft;
- var outerWidth = within.width;
- var offsetLeft = within.isWindow ? within.scrollLeft : within.offset.left;
- var collisionPosLeft = position.left - data.collisionPosition.marginLeft;
- var overLeft = collisionPosLeft - offsetLeft;
- var overRight = collisionPosLeft + data.collisionWidth - outerWidth - offsetLeft;
- var myOffset = data.my[0] === 'left' ? -data.elemWidth : data.my[0] === 'right' ? data.elemWidth : 0;
- var atOffset = data.at[0] === 'left' ? data.targetWidth : data.at[0] === 'right' ? -data.targetWidth : 0;
- var offset = -2 * data.offset[0];
- var newOverRight;
- var newOverLeft;
+ left(position, data) {
+ const {
+ within
+ } = data;
+ const withinOffset = within.offset.left + within.scrollLeft;
+ const outerWidth = within.width;
+ const offsetLeft = within.isWindow ? within.scrollLeft : within.offset.left;
+ const collisionPosLeft = position.left - data.collisionPosition.marginLeft;
+ const overLeft = collisionPosLeft - offsetLeft;
+ const overRight = collisionPosLeft + data.collisionWidth - outerWidth - offsetLeft;
+ const myOffset = data.my[0] === 'left' ? -data.elemWidth : data.my[0] === 'right' ? data.elemWidth : 0;
+ const atOffset = data.at[0] === 'left' ? data.targetWidth : data.at[0] === 'right' ? -data.targetWidth : 0;
+ const offset = -2 * data.offset[0];
+ let newOverRight;
+ let newOverLeft;
if (overLeft < 0) {
newOverRight = position.left + myOffset + atOffset + offset + data.collisionWidth - outerWidth - withinOffset;
@@ -155,20 +165,23 @@
}
}
},
- top: function top(position, data) {
- var within = data.within;
- var withinOffset = within.offset.top + within.scrollTop;
- var outerHeight = within.height;
- var offsetTop = within.isWindow ? within.scrollTop : within.offset.top;
- var collisionPosTop = position.top - data.collisionPosition.marginTop;
- var overTop = collisionPosTop - offsetTop;
- var overBottom = collisionPosTop + data.collisionHeight - outerHeight - offsetTop;
- var top = data.my[1] === 'top';
- var myOffset = top ? -data.elemHeight : data.my[1] === 'bottom' ? data.elemHeight : 0;
- var atOffset = data.at[1] === 'top' ? data.targetHeight : data.at[1] === 'bottom' ? -data.targetHeight : 0;
- var offset = -2 * data.offset[1];
- var newOverTop;
- var newOverBottom;
+
+ top(position, data) {
+ const {
+ within
+ } = data;
+ const withinOffset = within.offset.top + within.scrollTop;
+ const outerHeight = within.height;
+ const offsetTop = within.isWindow ? within.scrollTop : within.offset.top;
+ const collisionPosTop = position.top - data.collisionPosition.marginTop;
+ const overTop = collisionPosTop - offsetTop;
+ const overBottom = collisionPosTop + data.collisionHeight - outerHeight - offsetTop;
+ const top = data.my[1] === 'top';
+ const myOffset = top ? -data.elemHeight : data.my[1] === 'bottom' ? data.elemHeight : 0;
+ const atOffset = data.at[1] === 'top' ? data.targetHeight : data.at[1] === 'bottom' ? -data.targetHeight : 0;
+ const offset = -2 * data.offset[1];
+ let newOverTop;
+ let newOverBottom;
if (overTop < 0) {
newOverBottom = position.top + myOffset + atOffset + offset + data.collisionHeight - outerHeight - withinOffset;
@@ -184,38 +197,33 @@
}
}
}
+
},
flipfit: {
- left: function left() {
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
+ left(...args) {
collisions.flip.left.apply(this, args);
collisions.fit.left.apply(this, args);
},
- top: function top() {
- for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
- args[_key2] = arguments[_key2];
- }
+ top(...args) {
collisions.flip.top.apply(this, args);
collisions.fit.top.apply(this, args);
}
+
}
};
$.position = {
- scrollbarWidth: function scrollbarWidth() {
+ scrollbarWidth() {
if (cachedScrollbarWidth !== undefined) {
return cachedScrollbarWidth;
}
- var div = $('<div ' + "style='display:block;position:absolute;width:50px;height:50px;overflow:hidden;'>" + "<div style='height:100px;width:auto;'></div></div>");
- var innerDiv = div.children()[0];
+ const div = $('<div ' + "style='display:block;position:absolute;width:50px;height:50px;overflow:hidden;'>" + "<div style='height:100px;width:auto;'></div></div>");
+ const innerDiv = div.children()[0];
$('body').append(div);
- var w1 = innerDiv.offsetWidth;
+ const w1 = innerDiv.offsetWidth;
div.css('overflow', 'scroll');
- var w2 = innerDiv.offsetWidth;
+ let w2 = innerDiv.offsetWidth;
if (w1 === w2) {
w2 = div[0].clientWidth;
@@ -225,25 +233,27 @@
cachedScrollbarWidth = w1 - w2;
return cachedScrollbarWidth;
},
- getScrollInfo: function getScrollInfo(within) {
- var overflowX = within.isWindow || within.isDocument ? '' : within.element.css('overflow-x');
- var overflowY = within.isWindow || within.isDocument ? '' : within.element.css('overflow-y');
- var hasOverflowX = overflowX === 'scroll' || overflowX === 'auto' && within.width < within.element[0].scrollWidth;
- var hasOverflowY = overflowY === 'scroll' || overflowY === 'auto' && within.height < within.element[0].scrollHeight;
+
+ getScrollInfo(within) {
+ const overflowX = within.isWindow || within.isDocument ? '' : within.element.css('overflow-x');
+ const overflowY = within.isWindow || within.isDocument ? '' : within.element.css('overflow-y');
+ const hasOverflowX = overflowX === 'scroll' || overflowX === 'auto' && within.width < within.element[0].scrollWidth;
+ const hasOverflowY = overflowY === 'scroll' || overflowY === 'auto' && within.height < within.element[0].scrollHeight;
return {
width: hasOverflowY ? $.position.scrollbarWidth() : 0,
height: hasOverflowX ? $.position.scrollbarWidth() : 0
};
},
- getWithinInfo: function getWithinInfo(element) {
- var withinElement = $(element || window);
- var isWindow = $.isWindow(withinElement[0]);
- var isDocument = !!withinElement[0] && withinElement[0].nodeType === 9;
- var hasOffset = !isWindow && !isDocument;
+
+ getWithinInfo(element) {
+ const withinElement = $(element || window);
+ const isWindow = $.isWindow(withinElement[0]);
+ const isDocument = !!withinElement[0] && withinElement[0].nodeType === 9;
+ const hasOffset = !isWindow && !isDocument;
return {
element: withinElement,
- isWindow: isWindow,
- isDocument: isDocument,
+ isWindow,
+ isDocument,
offset: hasOffset ? $(element).offset() : {
left: 0,
top: 0
@@ -254,6 +264,7 @@
height: withinElement.outerHeight()
};
}
+
};
$.fn.position = function (options) {
@@ -262,23 +273,23 @@
}
options = $.extend({}, options);
- var within = $.position.getWithinInfo(options.within);
- var scrollInfo = $.position.getScrollInfo(within);
- var collision = (options.collision || 'flip').split(' ');
- var offsets = {};
- var target = $(options.of);
- var dimensions = getDimensions(target);
- var targetWidth = dimensions.width;
- var targetHeight = dimensions.height;
- var targetOffset = dimensions.offset;
+ const within = $.position.getWithinInfo(options.within);
+ const scrollInfo = $.position.getScrollInfo(within);
+ const collision = (options.collision || 'flip').split(' ');
+ const offsets = {};
+ const target = $(options.of);
+ const dimensions = getDimensions(target);
+ const targetWidth = dimensions.width;
+ const targetHeight = dimensions.height;
+ const targetOffset = dimensions.offset;
if (target[0].preventDefault) {
options.at = 'left top';
}
- var basePosition = $.extend({}, targetOffset);
+ const basePosition = $.extend({}, targetOffset);
$.each(['my', 'at'], function () {
- var pos = (options[this] || '').split(' ');
+ let pos = (options[this] || '').split(' ');
if (pos.length === 1) {
pos = regexHorizontal.test(pos[0]) ? pos.concat(['center']) : regexVertical.test(pos[0]) ? ['center'].concat(pos) : ['center', 'center'];
@@ -286,8 +297,8 @@
pos[0] = regexHorizontal.test(pos[0]) ? pos[0] : 'center';
pos[1] = regexVertical.test(pos[1]) ? pos[1] : 'center';
- var horizontalOffset = regexOffset.exec(pos[0]);
- var verticalOffset = regexOffset.exec(pos[1]);
+ const horizontalOffset = regexOffset.exec(pos[0]);
+ const verticalOffset = regexOffset.exec(pos[1]);
offsets[this] = [horizontalOffset ? horizontalOffset[0] : 0, verticalOffset ? verticalOffset[0] : 0];
options[this] = [regexPosition.exec(pos[0])[0], regexPosition.exec(pos[1])[0]];
});
@@ -308,20 +319,20 @@
basePosition.top += targetHeight / 2;
}
- var atOffset = getOffsets(offsets.at, targetWidth, targetHeight);
+ const atOffset = getOffsets(offsets.at, targetWidth, targetHeight);
basePosition.left += atOffset[0];
basePosition.top += atOffset[1];
return this.each(function () {
- var using;
- var elem = $(this);
- var elemWidth = elem.outerWidth();
- var elemHeight = elem.outerHeight();
- var marginLeft = parseCss(this, 'marginLeft');
- var marginTop = parseCss(this, 'marginTop');
- var collisionWidth = elemWidth + marginLeft + parseCss(this, 'marginRight') + scrollInfo.width;
- var collisionHeight = elemHeight + marginTop + parseCss(this, 'marginBottom') + scrollInfo.height;
- var position = $.extend({}, basePosition);
- var myOffset = getOffsets(offsets.my, elem.outerWidth(), elem.outerHeight());
+ let using;
+ const elem = $(this);
+ const elemWidth = elem.outerWidth();
+ const elemHeight = elem.outerHeight();
+ const marginLeft = parseCss(this, 'marginLeft');
+ const marginTop = parseCss(this, 'marginTop');
+ const collisionWidth = elemWidth + marginLeft + parseCss(this, 'marginRight') + scrollInfo.width;
+ const collisionHeight = elemHeight + marginTop + parseCss(this, 'marginBottom') + scrollInfo.height;
+ const position = $.extend({}, basePosition);
+ const myOffset = getOffsets(offsets.my, elem.outerWidth(), elem.outerHeight());
if (options.my[0] === 'right') {
position.left -= elemWidth;
@@ -337,36 +348,36 @@
position.left += myOffset[0];
position.top += myOffset[1];
- var collisionPosition = {
- marginLeft: marginLeft,
- marginTop: marginTop
+ const collisionPosition = {
+ marginLeft,
+ marginTop
};
$.each(['left', 'top'], function (i, dir) {
if (collisions[collision[i]]) {
collisions[collision[i]][dir](position, {
- targetWidth: targetWidth,
- targetHeight: targetHeight,
- elemWidth: elemWidth,
- elemHeight: elemHeight,
- collisionPosition: collisionPosition,
- collisionWidth: collisionWidth,
- collisionHeight: collisionHeight,
+ targetWidth,
+ targetHeight,
+ elemWidth,
+ elemHeight,
+ collisionPosition,
+ collisionWidth,
+ collisionHeight,
offset: [atOffset[0] + myOffset[0], atOffset[1] + myOffset[1]],
my: options.my,
at: options.at,
- within: within,
- elem: elem
+ within,
+ elem
});
}
});
if (options.using) {
- using = function using(props) {
- var left = targetOffset.left - position.left;
- var right = left + targetWidth - elemWidth;
- var top = targetOffset.top - position.top;
- var bottom = top + targetHeight - elemHeight;
- var feedback = {
+ using = function (props) {
+ const left = targetOffset.left - position.left;
+ const right = left + targetWidth - elemWidth;
+ const top = targetOffset.top - position.top;
+ const bottom = top + targetHeight - elemHeight;
+ const feedback = {
target: {
element: target,
left: targetOffset.left,
@@ -404,7 +415,7 @@
}
elem.offset($.extend(position, {
- using: using
+ using
}));
});
};
diff --git a/core/misc/progress.js b/core/misc/progress.js
index fc532a897d36b142e594fdd668dbcf1e696039e1..8c1a6ff3fb83d63327db3f341df6eff6cee2af00 100644
--- a/core/misc/progress.js
+++ b/core/misc/progress.js
@@ -7,7 +7,7 @@
(function ($, Drupal) {
Drupal.theme.progressBar = function (id) {
- return "<div id=\"".concat(id, "\" class=\"progress\" aria-live=\"polite\">") + '<div class="progress__label"> </div>' + '<div class="progress__track"><div class="progress__bar"></div></div>' + '<div class="progress__percentage"></div>' + '<div class="progress__description"> </div>' + '</div>';
+ return `<div id="${id}" class="progress" aria-live="polite">` + '<div class="progress__label"> </div>' + '<div class="progress__track"><div class="progress__bar"></div></div>' + '<div class="progress__percentage"></div>' + '<div class="progress__description"> </div>' + '</div>';
};
Drupal.ProgressBar = function (id, updateCallback, method, errorCallback) {
@@ -19,10 +19,10 @@
};
$.extend(Drupal.ProgressBar.prototype, {
- setProgress: function setProgress(percentage, message, label) {
+ setProgress(percentage, message, label) {
if (percentage >= 0 && percentage <= 100) {
- $(this.element).find('div.progress__bar').css('width', "".concat(percentage, "%"));
- $(this.element).find('div.progress__percentage').html("".concat(percentage, "%"));
+ $(this.element).find('div.progress__bar').css('width', `${percentage}%`);
+ $(this.element).find('div.progress__percentage').html(`${percentage}%`);
}
$('div.progress__description', this.element).html(message);
@@ -32,23 +32,26 @@
this.updateCallback(percentage, message, this);
}
},
- startMonitoring: function startMonitoring(uri, delay) {
+
+ startMonitoring(uri, delay) {
this.delay = delay;
this.uri = uri;
this.sendPing();
},
- stopMonitoring: function stopMonitoring() {
+
+ stopMonitoring() {
clearTimeout(this.timer);
this.uri = null;
},
- sendPing: function sendPing() {
+
+ sendPing() {
if (this.timer) {
clearTimeout(this.timer);
}
if (this.uri) {
- var pb = this;
- var uri = this.uri;
+ const pb = this;
+ let uri = this.uri;
if (uri.indexOf('?') === -1) {
uri += '?';
@@ -62,31 +65,36 @@
url: uri,
data: '',
dataType: 'json',
- success: function success(progress) {
+
+ success(progress) {
if (progress.status === 0) {
pb.displayError(progress.data);
return;
}
pb.setProgress(progress.percentage, progress.message, progress.label);
- pb.timer = setTimeout(function () {
+ pb.timer = setTimeout(() => {
pb.sendPing();
}, pb.delay);
},
- error: function error(xmlhttp) {
- var e = new Drupal.AjaxError(xmlhttp, pb.uri);
- pb.displayError("<pre>".concat(e.message, "</pre>"));
+
+ error(xmlhttp) {
+ const e = new Drupal.AjaxError(xmlhttp, pb.uri);
+ pb.displayError(`<pre>${e.message}</pre>`);
}
+
});
}
},
- displayError: function displayError(string) {
- var error = $('<div class="messages messages--error"></div>').html(string);
+
+ displayError(string) {
+ const error = $('<div class="messages messages--error"></div>').html(string);
$(this.element).before(error).hide();
if (this.errorCallback) {
this.errorCallback(this);
}
}
+
});
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/states.js b/core/misc/states.js
index 8629f8da7d1784bc58c1d8c9bbe7a291ccc8e506..766e2e9dff5e8e5ee956117d9a798d4354eb47c6 100644
--- a/core/misc/states.js
+++ b/core/misc/states.js
@@ -6,7 +6,7 @@
**/
(function ($, Drupal) {
- var states = {
+ const states = {
postponed: []
};
Drupal.states = states;
@@ -15,7 +15,7 @@
return invertState && typeof a !== 'undefined' ? !a : a;
}
- function _compare2(a, b) {
+ function compare(a, b) {
if (a === b) {
return typeof a === 'undefined' ? a : true;
}
@@ -36,119 +36,119 @@
}
Drupal.behaviors.states = {
- attach: function attach(context, settings) {
- var $states = $(context).find('[data-drupal-states]');
- var il = $states.length;
+ attach(context, settings) {
+ const $states = $(context).find('[data-drupal-states]');
+ const il = $states.length;
- var _loop = function _loop(i) {
- var config = JSON.parse($states[i].getAttribute('data-drupal-states'));
- Object.keys(config || {}).forEach(function (state) {
+ for (let i = 0; i < il; i++) {
+ const config = JSON.parse($states[i].getAttribute('data-drupal-states'));
+ Object.keys(config || {}).forEach(state => {
new states.Dependent({
element: $($states[i]),
state: states.State.sanitize(state),
constraints: config[state]
});
});
- };
-
- for (var i = 0; i < il; i++) {
- _loop(i);
}
while (states.postponed.length) {
states.postponed.shift()();
}
}
+
};
states.Dependent = function (args) {
- var _this = this;
-
$.extend(this, {
values: {},
oldValue: null
}, args);
this.dependees = this.getDependees();
- Object.keys(this.dependees || {}).forEach(function (selector) {
- _this.initializeDependee(selector, _this.dependees[selector]);
+ Object.keys(this.dependees || {}).forEach(selector => {
+ this.initializeDependee(selector, this.dependees[selector]);
});
};
states.Dependent.comparisons = {
- RegExp: function RegExp(reference, value) {
+ RegExp(reference, value) {
return reference.test(value);
},
- Function: function Function(reference, value) {
+
+ Function(reference, value) {
return reference(value);
},
- Number: function Number(reference, value) {
- return typeof value === 'string' ? _compare2(reference.toString(), value) : _compare2(reference, value);
+
+ Number(reference, value) {
+ return typeof value === 'string' ? compare(reference.toString(), value) : compare(reference, value);
}
+
};
states.Dependent.prototype = {
- initializeDependee: function initializeDependee(selector, dependeeStates) {
- var _this2 = this;
-
+ initializeDependee(selector, dependeeStates) {
this.values[selector] = {};
- Object.keys(dependeeStates).forEach(function (i) {
- var state = dependeeStates[i];
+ Object.keys(dependeeStates).forEach(i => {
+ let state = dependeeStates[i];
if ($.inArray(state, dependeeStates) === -1) {
return;
}
state = states.State.sanitize(state);
- _this2.values[selector][state.name] = null;
- $(selector).on("state:".concat(state), {
- selector: selector,
- state: state
- }, function (e) {
- _this2.update(e.data.selector, e.data.state, e.value);
+ this.values[selector][state.name] = null;
+ $(selector).on(`state:${state}`, {
+ selector,
+ state
+ }, e => {
+ this.update(e.data.selector, e.data.state, e.value);
});
new states.Trigger({
- selector: selector,
- state: state
+ selector,
+ state
});
});
},
- compare: function compare(reference, selector, state) {
- var value = this.values[selector][state.name];
+
+ compare(reference, selector, state) {
+ const value = this.values[selector][state.name];
if (reference.constructor.name in states.Dependent.comparisons) {
return states.Dependent.comparisons[reference.constructor.name](reference, value);
}
- return _compare2(reference, value);
+ return compare(reference, value);
},
- update: function update(selector, state, value) {
+
+ update(selector, state, value) {
if (value !== this.values[selector][state.name]) {
this.values[selector][state.name] = value;
this.reevaluate();
}
},
- reevaluate: function reevaluate() {
- var value = this.verifyConstraints(this.constraints);
+
+ reevaluate() {
+ let value = this.verifyConstraints(this.constraints);
if (value !== this.oldValue) {
this.oldValue = value;
value = invert(value, this.state.invert);
this.element.trigger({
- type: "state:".concat(this.state),
- value: value,
+ type: `state:${this.state}`,
+ value,
trigger: true
});
}
},
- verifyConstraints: function verifyConstraints(constraints, selector) {
- var result;
+
+ verifyConstraints(constraints, selector) {
+ let result;
if ($.isArray(constraints)) {
- var hasXor = $.inArray('xor', constraints) === -1;
- var len = constraints.length;
+ const hasXor = $.inArray('xor', constraints) === -1;
+ const len = constraints.length;
- for (var i = 0; i < len; i++) {
+ for (let i = 0; i < len; i++) {
if (constraints[i] !== 'xor') {
- var constraint = this.checkConstraints(constraints[i], selector, i);
+ const constraint = this.checkConstraints(constraints[i], selector, i);
if (constraint && (hasXor || result)) {
return hasXor;
@@ -158,7 +158,7 @@
}
}
} else if ($.isPlainObject(constraints)) {
- for (var n in constraints) {
+ for (const n in constraints) {
if (constraints.hasOwnProperty(n)) {
result = ternary(result, this.checkConstraints(constraints[n], selector, n));
@@ -171,7 +171,8 @@
return result;
},
- checkConstraints: function checkConstraints(value, selector, state) {
+
+ checkConstraints(value, selector, state) {
if (typeof state !== 'string' || /[0-9]/.test(state[0])) {
state = null;
} else if (typeof selector === 'undefined') {
@@ -186,9 +187,10 @@
return this.verifyConstraints(value, selector);
},
- getDependees: function getDependees() {
- var cache = {};
- var _compare = this.compare;
+
+ getDependees() {
+ const cache = {};
+ const _compare = this.compare;
this.compare = function (reference, selector, state) {
(cache[selector] || (cache[selector] = [])).push(state.name);
@@ -198,6 +200,7 @@
this.compare = _compare;
return cache;
}
+
};
states.Trigger = function (args) {
@@ -206,94 +209,99 @@
if (this.state in states.Trigger.states) {
this.element = $(this.selector);
- if (!this.element.data("trigger:".concat(this.state))) {
+ if (!this.element.data(`trigger:${this.state}`)) {
this.initialize();
}
}
};
states.Trigger.prototype = {
- initialize: function initialize() {
- var _this3 = this;
-
- var trigger = states.Trigger.states[this.state];
+ initialize() {
+ const trigger = states.Trigger.states[this.state];
if (typeof trigger === 'function') {
trigger.call(window, this.element);
} else {
- Object.keys(trigger || {}).forEach(function (event) {
- _this3.defaultTrigger(event, trigger[event]);
+ Object.keys(trigger || {}).forEach(event => {
+ this.defaultTrigger(event, trigger[event]);
});
}
- this.element.data("trigger:".concat(this.state), true);
+ this.element.data(`trigger:${this.state}`, true);
},
- defaultTrigger: function defaultTrigger(event, valueFn) {
- var oldValue = valueFn.call(this.element);
+
+ defaultTrigger(event, valueFn) {
+ let oldValue = valueFn.call(this.element);
this.element.on(event, $.proxy(function (e) {
- var value = valueFn.call(this.element, e);
+ const value = valueFn.call(this.element, e);
if (oldValue !== value) {
this.element.trigger({
- type: "state:".concat(this.state),
- value: value,
- oldValue: oldValue
+ type: `state:${this.state}`,
+ value,
+ oldValue
});
oldValue = value;
}
}, this));
states.postponed.push($.proxy(function () {
this.element.trigger({
- type: "state:".concat(this.state),
+ type: `state:${this.state}`,
value: oldValue,
oldValue: null
});
}, this));
}
+
};
states.Trigger.states = {
empty: {
- keyup: function keyup() {
+ keyup() {
return this.val() === '';
}
+
},
checked: {
- change: function change() {
- var checked = false;
+ change() {
+ let checked = false;
this.each(function () {
checked = $(this).prop('checked');
return !checked;
});
return checked;
}
+
},
value: {
- keyup: function keyup() {
+ keyup() {
if (this.length > 1) {
return this.filter(':checked').val() || false;
}
return this.val();
},
- change: function change() {
+
+ change() {
if (this.length > 1) {
return this.filter(':checked').val() || false;
}
return this.val();
}
+
},
collapsed: {
- collapsed: function collapsed(e) {
+ collapsed(e) {
return typeof e !== 'undefined' && 'value' in e ? e.value : !this.is('[open]');
}
+
}
};
states.State = function (state) {
this.pristine = state;
this.name = state;
- var process = true;
+ let process = true;
do {
while (this.name.charAt(0) === '!') {
@@ -333,21 +341,23 @@
};
states.State.prototype = {
invert: false,
- toString: function toString() {
+
+ toString() {
return this.name;
}
+
};
- var $document = $(document);
- $document.on('state:disabled', function (e) {
+ const $document = $(document);
+ $document.on('state:disabled', e => {
if (e.trigger) {
$(e.target).prop('disabled', e.value).closest('.js-form-item, .js-form-submit, .js-form-wrapper').toggleClass('form-disabled', e.value).find('select, input, textarea').prop('disabled', e.value);
}
});
- $document.on('state:required', function (e) {
+ $document.on('state:required', e => {
if (e.trigger) {
if (e.value) {
- var label = "label".concat(e.target.id ? "[for=".concat(e.target.id, "]") : '');
- var $label = $(e.target).attr({
+ const label = `label${e.target.id ? `[for=${e.target.id}]` : ''}`;
+ const $label = $(e.target).attr({
required: 'required',
'aria-required': 'true'
}).closest('.js-form-item, .js-form-wrapper').find(label);
@@ -360,17 +370,17 @@
}
}
});
- $document.on('state:visible', function (e) {
+ $document.on('state:visible', e => {
if (e.trigger) {
$(e.target).closest('.js-form-item, .js-form-submit, .js-form-wrapper').toggle(e.value);
}
});
- $document.on('state:checked', function (e) {
+ $document.on('state:checked', e => {
if (e.trigger) {
$(e.target).prop('checked', e.value);
}
});
- $document.on('state:collapsed', function (e) {
+ $document.on('state:collapsed', e => {
if (e.trigger) {
if ($(e.target).is('[open]') === e.value) {
$(e.target).find('> summary').trigger('click');
diff --git a/core/misc/tabbingmanager.js b/core/misc/tabbingmanager.js
index 7fd4f9192d56ad2efafc0dbfdd6a6ea30fbe8a11..f7ec7539ba1e70b1344700417a5c614793ff497f 100644
--- a/core/misc/tabbingmanager.js
+++ b/core/misc/tabbingmanager.js
@@ -5,22 +5,10 @@
* @preserve
**/
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-(function ($, Drupal, _ref) {
- var tabbable = _ref.tabbable,
- isTabbable = _ref.isTabbable;
-
+(function ($, Drupal, {
+ tabbable,
+ isTabbable
+}) {
function TabbingManager() {
this.stack = [];
}
@@ -37,37 +25,36 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
}
$.extend(TabbingManager.prototype, {
- constrain: function constrain(elements) {
- var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
- _ref2$trapFocus = _ref2.trapFocus,
- trapFocus = _ref2$trapFocus === void 0 ? false : _ref2$trapFocus;
+ constrain(elements, {
+ trapFocus = false
+ } = {}) {
+ const il = this.stack.length;
- var il = this.stack.length;
-
- for (var i = 0; i < il; i++) {
+ for (let i = 0; i < il; i++) {
this.stack[i].deactivate();
}
- var tabbableElements = [];
- $(elements).each(function (index, rootElement) {
- tabbableElements = [].concat(_toConsumableArray(tabbableElements), _toConsumableArray(tabbable(rootElement)));
+ let tabbableElements = [];
+ $(elements).each((index, rootElement) => {
+ tabbableElements = [...tabbableElements, ...tabbable(rootElement)];
if (isTabbable(rootElement)) {
- tabbableElements = [].concat(_toConsumableArray(tabbableElements), [rootElement]);
+ tabbableElements = [...tabbableElements, rootElement];
}
});
- var tabbingContext = new TabbingContext({
+ const tabbingContext = new TabbingContext({
level: this.stack.length,
$tabbableElements: $(tabbableElements),
- trapFocus: trapFocus
+ trapFocus
});
this.stack.push(tabbingContext);
tabbingContext.activate();
$(document).trigger('drupalTabbingConstrained', tabbingContext);
return tabbingContext;
},
- release: function release() {
- var toActivate = this.stack.length - 1;
+
+ release() {
+ let toActivate = this.stack.length - 1;
while (toActivate >= 0 && this.stack[toActivate].released) {
toActivate--;
@@ -79,19 +66,20 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
this.stack[toActivate].activate();
}
},
- activate: function activate(tabbingContext) {
- var $set = tabbingContext.$tabbableElements;
- var level = tabbingContext.level;
- var $disabledSet = $(tabbable(document.body)).not($set);
+
+ activate(tabbingContext) {
+ const $set = tabbingContext.$tabbableElements;
+ const level = tabbingContext.level;
+ const $disabledSet = $(tabbable(document.body)).not($set);
tabbingContext.$disabledElements = $disabledSet;
- var il = $disabledSet.length;
+ const il = $disabledSet.length;
- for (var i = 0; i < il; i++) {
+ for (let i = 0; i < il; i++) {
this.recordTabindex($disabledSet.eq(i), level);
}
$disabledSet.prop('tabindex', -1).prop('autofocus', false);
- var $hasFocus = $set.filter('[autofocus]').eq(-1);
+ let $hasFocus = $set.filter('[autofocus]').eq(-1);
if ($hasFocus.length === 0) {
$hasFocus = $set.eq(0);
@@ -100,13 +88,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
$hasFocus.trigger('focus');
if ($set.length && tabbingContext.trapFocus) {
- $set.last().on('keydown.focus-trap', function (event) {
+ $set.last().on('keydown.focus-trap', event => {
if (event.key === 'Tab' && !event.shiftKey) {
event.preventDefault();
$set.first().focus();
}
});
- $set.first().on('keydown.focus-trap', function (event) {
+ $set.first().on('keydown.focus-trap', event => {
if (event.key === 'Tab' && event.shiftKey) {
event.preventDefault();
$set.last().focus();
@@ -114,30 +102,33 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
});
}
},
- deactivate: function deactivate(tabbingContext) {
- var $set = tabbingContext.$disabledElements;
- var level = tabbingContext.level;
- var il = $set.length;
+
+ deactivate(tabbingContext) {
+ const $set = tabbingContext.$disabledElements;
+ const level = tabbingContext.level;
+ const il = $set.length;
tabbingContext.$tabbableElements.first().off('keydown.focus-trap');
tabbingContext.$tabbableElements.last().off('keydown.focus-trap');
- for (var i = 0; i < il; i++) {
+ for (let i = 0; i < il; i++) {
this.restoreTabindex($set.eq(i), level);
}
},
- recordTabindex: function recordTabindex($el, level) {
- var tabInfo = $el.data('drupalOriginalTabIndices') || {};
+
+ recordTabindex($el, level) {
+ const tabInfo = $el.data('drupalOriginalTabIndices') || {};
tabInfo[level] = {
tabindex: $el[0].getAttribute('tabindex'),
autofocus: $el[0].hasAttribute('autofocus')
};
$el.data('drupalOriginalTabIndices', tabInfo);
},
- restoreTabindex: function restoreTabindex($el, level) {
- var tabInfo = $el.data('drupalOriginalTabIndices');
+
+ restoreTabindex($el, level) {
+ const tabInfo = $el.data('drupalOriginalTabIndices');
if (tabInfo && tabInfo[level]) {
- var data = tabInfo[level];
+ const data = tabInfo[level];
if (data.tabindex) {
$el[0].setAttribute('tabindex', data.tabindex);
@@ -152,7 +143,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
if (level === 0) {
$el.removeData('drupalOriginalTabIndices');
} else {
- var levelToDelete = level;
+ let levelToDelete = level;
while (tabInfo.hasOwnProperty(levelToDelete)) {
delete tabInfo[levelToDelete];
@@ -163,9 +154,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
}
}
}
+
});
$.extend(TabbingContext.prototype, {
- release: function release() {
+ release() {
if (!this.released) {
this.deactivate();
this.released = true;
@@ -173,20 +165,23 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
$(document).trigger('drupalTabbingContextReleased', this);
}
},
- activate: function activate() {
+
+ activate() {
if (!this.active && !this.released) {
this.active = true;
Drupal.tabbingManager.activate(this);
$(document).trigger('drupalTabbingContextActivated', this);
}
},
- deactivate: function deactivate() {
+
+ deactivate() {
if (this.active) {
this.active = false;
Drupal.tabbingManager.deactivate(this);
$(document).trigger('drupalTabbingContextDeactivated', this);
}
}
+
});
if (Drupal.tabbingManager) {
diff --git a/core/misc/tabledrag.js b/core/misc/tabledrag.js
index 3b80baeccfc02c3dfcab1f7a98671c22f5a61e27..67d9a76ecb42c13b9c50207446c126c07d3f368a 100644
--- a/core/misc/tabledrag.js
+++ b/core/misc/tabledrag.js
@@ -5,29 +5,26 @@
* @preserve
**/
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
(function ($, Drupal, drupalSettings) {
- var showWeight = JSON.parse(localStorage.getItem('Drupal.tableDrag.showWeight'));
+ let showWeight = JSON.parse(localStorage.getItem('Drupal.tableDrag.showWeight'));
Drupal.behaviors.tableDrag = {
- attach: function attach(context, settings) {
+ attach(context, settings) {
function initTableDrag(table, base) {
if (table.length) {
Drupal.tableDrag[base] = new Drupal.tableDrag(table[0], settings.tableDrag[base]);
}
}
- Object.keys(settings.tableDrag || {}).forEach(function (base) {
- initTableDrag($(once('tabledrag', "#".concat(base), context)), base);
+ Object.keys(settings.tableDrag || {}).forEach(base => {
+ initTableDrag($(once('tabledrag', `#${base}`, context)), base);
});
}
+
};
Drupal.tableDrag = function (table, tableSettings) {
- var _this = this;
-
- var self = this;
- var $table = $(table);
+ const self = this;
+ const $table = $(table);
this.$table = $(table);
this.table = table;
this.tableSettings = tableSettings;
@@ -49,24 +46,24 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
this.windowHeight = 0;
this.$toggleWeightButton = null;
this.indentEnabled = false;
- Object.keys(tableSettings || {}).forEach(function (group) {
- Object.keys(tableSettings[group] || {}).forEach(function (n) {
+ Object.keys(tableSettings || {}).forEach(group => {
+ Object.keys(tableSettings[group] || {}).forEach(n => {
if (tableSettings[group][n].relationship === 'parent') {
- _this.indentEnabled = true;
+ this.indentEnabled = true;
}
if (tableSettings[group][n].limit > 0) {
- _this.maxDepth = tableSettings[group][n].limit;
+ this.maxDepth = tableSettings[group][n].limit;
}
});
});
if (this.indentEnabled) {
this.indentCount = 1;
- var indent = Drupal.theme('tableDragIndentation');
- var testRow = $('<tr></tr>').addClass('draggable').appendTo(table);
- var testCell = $('<td></td>').appendTo(testRow).prepend(indent).prepend(indent);
- var $indentation = testCell.find('.js-indentation');
+ const indent = Drupal.theme('tableDragIndentation');
+ const testRow = $('<tr></tr>').addClass('draggable').appendTo(table);
+ const testCell = $('<td></td>').appendTo(testRow).prepend(indent).prepend(indent);
+ const $indentation = testCell.find('.js-indentation');
this.indentAmount = $indentation.get(1).offsetLeft - $indentation.get(0).offsetLeft;
testRow.remove();
}
@@ -74,7 +71,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
$table.find('> tr.draggable, > tbody > tr.draggable').each(function () {
self.makeDraggable(this);
});
- var $toggleWeightWrapper = $(Drupal.theme('tableDragToggle'));
+ const $toggleWeightWrapper = $(Drupal.theme('tableDragToggle'));
this.$toggleWeightButton = $toggleWeightWrapper.find('[data-drupal-selector="tabledrag-toggle-weight"]');
this.$toggleWeightButton.on('click', $.proxy(function (e) {
e.preventDefault();
@@ -82,18 +79,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
}, this));
$table.before($toggleWeightWrapper);
self.initColumns();
- $(document).on('touchmove', function (event) {
- return self.dragRow(event.originalEvent.touches[0], self);
- });
- $(document).on('touchend', function (event) {
- return self.dropRow(event.originalEvent.touches[0], self);
- });
- $(document).on('mousemove pointermove', function (event) {
- return self.dragRow(event, self);
- });
- $(document).on('mouseup pointerup', function (event) {
- return self.dropRow(event, self);
- });
+ $(document).on('touchmove', event => self.dragRow(event.originalEvent.touches[0], self));
+ $(document).on('touchend', event => self.dropRow(event.originalEvent.touches[0], self));
+ $(document).on('mousemove pointermove', event => self.dragRow(event, self));
+ $(document).on('mouseup pointerup', event => self.dropRow(event, self));
$(window).on('storage', $.proxy(function (e) {
if (e.originalEvent.key === 'Drupal.tableDrag.showWeight') {
showWeight = JSON.parse(e.originalEvent.newValue);
@@ -103,18 +92,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.initColumns = function () {
- var _this2 = this;
-
- var $table = this.$table;
- var hidden;
- var cell;
- var columnIndex;
- Object.keys(this.tableSettings || {}).forEach(function (group) {
- Object.keys(_this2.tableSettings[group]).some(function (tableSetting) {
- var field = $table.find(".".concat(_this2.tableSettings[group][tableSetting].target)).eq(0);
-
- if (field.length && _this2.tableSettings[group][tableSetting].hidden) {
- hidden = _this2.tableSettings[group][tableSetting].hidden;
+ const $table = this.$table;
+ let hidden;
+ let cell;
+ let columnIndex;
+ Object.keys(this.tableSettings || {}).forEach(group => {
+ Object.keys(this.tableSettings[group]).some(tableSetting => {
+ const field = $table.find(`.${this.tableSettings[group][tableSetting].target}`).eq(0);
+
+ if (field.length && this.tableSettings[group][tableSetting].hidden) {
+ hidden = this.tableSettings[group][tableSetting].hidden;
cell = field.closest('td');
return true;
}
@@ -124,7 +111,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
if (hidden && cell[0]) {
columnIndex = cell.parent().find('> td').index(cell.get(0)) + 1;
- $table.find('> thead > tr, > tbody > tr, > tr').each(_this2.addColspanClass(columnIndex));
+ $table.find('> thead > tr, > tbody > tr, > tr').each(this.addColspanClass(columnIndex));
}
});
this.displayColumns(showWeight);
@@ -132,10 +119,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
Drupal.tableDrag.prototype.addColspanClass = function (columnIndex) {
return function () {
- var $row = $(this);
- var index = columnIndex;
- var cells = $row.children();
- var cell;
+ const $row = $(this);
+ let index = columnIndex;
+ const cells = $row.children();
+ let cell;
cells.each(function (n) {
if (n < index && this.colSpan && this.colSpan > 1) {
index -= this.colSpan - 1;
@@ -143,7 +130,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
});
if (index > 0) {
- cell = cells.filter(":nth-child(".concat(index, ")"));
+ cell = cells.filter(`:nth-child(${index})`);
if (cell[0].colSpan && cell[0].colSpan > 1) {
cell.addClass('tabledrag-has-colspan');
@@ -177,7 +164,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.hideColumns = function () {
- var $tables = $(once.filter('tabledrag', 'table'));
+ const $tables = $(once.filter('tabledrag', 'table'));
$tables.find('.tabledrag-hide').css('display', 'none');
$tables.find('.tabledrag-handle').css('display', '');
$tables.find('.tabledrag-has-colspan').each(function () {
@@ -186,7 +173,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.showColumns = function () {
- var $tables = $(once.filter('tabledrag', 'table'));
+ const $tables = $(once.filter('tabledrag', 'table'));
$tables.find('.tabledrag-hide').css('display', '');
$tables.find('.tabledrag-handle').css('display', 'none');
$tables.find('.tabledrag-has-colspan').each(function () {
@@ -195,31 +182,29 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.rowSettings = function (group, row) {
- var field = $(row).find(".".concat(group));
- var tableSettingsGroup = this.tableSettings[group];
- return Object.keys(tableSettingsGroup).map(function (delta) {
- var targetClass = tableSettingsGroup[delta].target;
- var rowSettings;
+ const field = $(row).find(`.${group}`);
+ const tableSettingsGroup = this.tableSettings[group];
+ return Object.keys(tableSettingsGroup).map(delta => {
+ const targetClass = tableSettingsGroup[delta].target;
+ let rowSettings;
- if (field.is(".".concat(targetClass))) {
+ if (field.is(`.${targetClass}`)) {
rowSettings = {};
- Object.keys(tableSettingsGroup[delta]).forEach(function (n) {
+ Object.keys(tableSettingsGroup[delta]).forEach(n => {
rowSettings[n] = tableSettingsGroup[delta][n];
});
}
return rowSettings;
- }).filter(function (rowSetting) {
- return rowSetting;
- })[0];
+ }).filter(rowSetting => rowSetting)[0];
};
Drupal.tableDrag.prototype.makeDraggable = function (item) {
- var self = this;
- var $item = $(item);
+ const self = this;
+ const $item = $(item);
$item.find('td:first-of-type').find('a').addClass('menu-item__link');
- var $handle = $(Drupal.theme('tableDragHandle'));
- var $indentationLast = $item.find('td:first-of-type').find('.js-indentation').eq(-1);
+ const $handle = $(Drupal.theme('tableDragHandle'));
+ const $indentationLast = $item.find('td:first-of-type').find('.js-indentation').eq(-1);
if ($indentationLast.length) {
$indentationLast.after($handle);
@@ -228,7 +213,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
$item.find('td').eq(0).prepend($handle);
}
- $handle.on('mousedown touchstart pointerdown', function (event) {
+ $handle.on('mousedown touchstart pointerdown', event => {
event.preventDefault();
if (event.originalEvent.type === 'touchstart') {
@@ -237,24 +222,24 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
self.dragStart(event, self, item);
});
- $handle.on('click', function (e) {
+ $handle.on('click', e => {
e.preventDefault();
});
- $handle.on('focus', function () {
+ $handle.on('focus', () => {
self.safeBlur = true;
});
- $handle.on('blur', function (event) {
+ $handle.on('blur', event => {
if (self.rowObject && self.safeBlur) {
self.dropRow(event, self);
}
});
- $handle.on('keydown', function (event) {
+ $handle.on('keydown', event => {
if (event.keyCode !== 9 && !self.rowObject) {
self.rowObject = new self.row(item, 'keyboard', self.indentEnabled, self.maxDepth, true);
}
- var keyChange = false;
- var groupHeight;
+ let keyChange = false;
+ let groupHeight;
switch (event.keyCode) {
case 37:
@@ -266,8 +251,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
case 38:
case 63232:
{
- var $previousRow = $(self.rowObject.element).prev('tr').eq(0);
- var previousRow = $previousRow.get(0);
+ let $previousRow = $(self.rowObject.element).prev('tr').eq(0);
+ let previousRow = $previousRow.get(0);
while (previousRow && $previousRow.is(':hidden')) {
$previousRow = $(previousRow).prev('tr').eq(0);
@@ -314,8 +299,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
case 40:
case 63233:
{
- var $nextRow = $(self.rowObject.group).eq(-1).next('tr').eq(0);
- var nextRow = $nextRow.get(0);
+ let $nextRow = $(self.rowObject.group).eq(-1).next('tr').eq(0);
+ let nextRow = $nextRow.get(0);
while (nextRow && $nextRow.is(':hidden')) {
$nextRow = $(nextRow).next('tr').eq(0);
@@ -329,13 +314,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
if ($(item).is('.tabledrag-root')) {
groupHeight = 0;
- var nextGroup = new self.row(nextRow, 'keyboard', self.indentEnabled, self.maxDepth, false);
+ const nextGroup = new self.row(nextRow, 'keyboard', self.indentEnabled, self.maxDepth, false);
if (nextGroup) {
$(nextGroup.group).each(function () {
groupHeight += $(this).is(':hidden') ? 0 : this.offsetHeight;
});
- var nextGroupRow = $(nextGroup.group).eq(-1).get(0);
+ const nextGroupRow = $(nextGroup.group).eq(-1).get(0);
self.rowObject.swap('after', nextGroupRow);
window.scrollBy(0, parseInt(groupHeight, 10));
}
@@ -373,7 +358,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
return false;
}
});
- $handle.on('keypress', function (event) {
+ $handle.on('keypress', event => {
switch (event.keyCode) {
case 37:
case 38:
@@ -413,20 +398,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
Drupal.tableDrag.prototype.dragRow = function (event, self) {
if (self.dragObject) {
self.currentPointerCoords = self.pointerCoords(event);
- var y = self.currentPointerCoords.y - self.dragObject.initOffset.y;
- var x = self.currentPointerCoords.x - self.dragObject.initOffset.x;
+ const y = self.currentPointerCoords.y - self.dragObject.initOffset.y;
+ const x = self.currentPointerCoords.x - self.dragObject.initOffset.x;
if (y !== self.oldY) {
self.rowObject.direction = y > self.oldY ? 'down' : 'up';
self.oldY = y;
- var scrollAmount = self.checkScroll(self.currentPointerCoords.y);
+ const scrollAmount = self.checkScroll(self.currentPointerCoords.y);
clearInterval(self.scrollInterval);
if (scrollAmount > 0 && self.rowObject.direction === 'down' || scrollAmount < 0 && self.rowObject.direction === 'up') {
self.setScroll(scrollAmount);
}
- var currentRow = self.findDropTargetRow(x, y);
+ const currentRow = self.findDropTargetRow(x, y);
if (currentRow) {
if (self.rowObject.direction === 'down') {
@@ -442,9 +427,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
}
if (self.indentEnabled) {
- var xDiff = self.currentPointerCoords.x - self.dragObject.indentPointerPos.x;
- var indentDiff = Math.round(xDiff / self.indentAmount);
- var indentChange = self.rowObject.indent(indentDiff);
+ const xDiff = self.currentPointerCoords.x - self.dragObject.indentPointerPos.x;
+ const indentDiff = Math.round(xDiff / self.indentAmount);
+ const indentChange = self.rowObject.indent(indentDiff);
self.dragObject.indentPointerPos.x += self.indentAmount * indentChange * self.rtl;
self.indentCount = Math.max(self.indentCount, self.rowObject.indents);
}
@@ -454,8 +439,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.dropRow = function (event, self) {
- var droppedRow;
- var $droppedRow;
+ let droppedRow;
+ let $droppedRow;
if (self.rowObject !== null) {
droppedRow = self.rowObject.element;
@@ -463,11 +448,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
if (self.rowObject.changed === true) {
self.updateFields(droppedRow);
- Object.keys(self.tableSettings || {}).forEach(function (group) {
- var rowSettings = self.rowSettings(group, droppedRow);
+ Object.keys(self.tableSettings || {}).forEach(group => {
+ const rowSettings = self.rowSettings(group, droppedRow);
if (rowSettings.relationship === 'group') {
- Object.keys(self.rowObject.children || {}).forEach(function (n) {
+ Object.keys(self.rowObject.children || {}).forEach(n => {
self.updateField(self.rowObject.children[n], group);
});
}
@@ -516,8 +501,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.getPointerOffset = function (target, event) {
- var docPos = $(target).offset();
- var pointerPos = this.pointerCoords(event);
+ const docPos = $(target).offset();
+ const pointerPos = this.pointerCoords(event);
return {
x: pointerPos.x - docPos.left,
y: pointerPos.y - docPos.top
@@ -525,15 +510,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.findDropTargetRow = function (x, y) {
- var _this3 = this;
-
- var rows = $(this.table.tBodies[0].rows).not(':hidden');
+ const rows = $(this.table.tBodies[0].rows).not(':hidden');
- var _loop = function _loop(n) {
- var row = rows[n];
- var $row = $(row);
- var rowY = $row.offset().top;
- var rowHeight = void 0;
+ for (let n = 0; n < rows.length; n++) {
+ let row = rows[n];
+ let $row = $(row);
+ const rowY = $row.offset().top;
+ let rowHeight;
if (row.offsetHeight === 0) {
rowHeight = parseInt(row.firstChild.offsetHeight, 10) / 2;
@@ -542,24 +525,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
}
if (y > rowY - rowHeight && y < rowY + rowHeight) {
- if (_this3.indentEnabled) {
- if (Object.keys(_this3.rowObject.group).some(function (o) {
- return _this3.rowObject.group[o] === row;
- })) {
- return {
- v: null
- };
+ if (this.indentEnabled) {
+ if (Object.keys(this.rowObject.group).some(o => this.rowObject.group[o] === row)) {
+ return null;
}
- } else if (row === _this3.rowObject.element) {
- return {
- v: null
- };
+ } else if (row === this.rowObject.element) {
+ return null;
}
- if (!_this3.rowObject.isValidSwap(row)) {
- return {
- v: null
- };
+ if (!this.rowObject.isValidSwap(row)) {
+ return null;
}
while ($row.is(':hidden') && $row.prev('tr').is(':hidden')) {
@@ -567,47 +542,37 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
row = $row.get(0);
}
- return {
- v: row
- };
+ return row;
}
- };
-
- for (var n = 0; n < rows.length; n++) {
- var _ret = _loop(n);
-
- if (_typeof(_ret) === "object") return _ret.v;
}
return null;
};
Drupal.tableDrag.prototype.updateFields = function (changedRow) {
- var _this4 = this;
-
- Object.keys(this.tableSettings || {}).forEach(function (group) {
- _this4.updateField(changedRow, group);
+ Object.keys(this.tableSettings || {}).forEach(group => {
+ this.updateField(changedRow, group);
});
};
Drupal.tableDrag.prototype.updateField = function (changedRow, group) {
- var rowSettings = this.rowSettings(group, changedRow);
- var $changedRow = $(changedRow);
- var sourceRow;
- var $previousRow;
- var previousRow;
- var useSibling;
+ let rowSettings = this.rowSettings(group, changedRow);
+ const $changedRow = $(changedRow);
+ let sourceRow;
+ let $previousRow;
+ let previousRow;
+ let useSibling;
if (rowSettings.relationship === 'self' || rowSettings.relationship === 'group') {
sourceRow = changedRow;
} else if (rowSettings.relationship === 'sibling') {
$previousRow = $changedRow.prev('tr:first-of-type');
previousRow = $previousRow.get(0);
- var $nextRow = $changedRow.next('tr:first-of-type');
- var nextRow = $nextRow.get(0);
+ const $nextRow = $changedRow.next('tr:first-of-type');
+ const nextRow = $nextRow.get(0);
sourceRow = changedRow;
- if ($previousRow.is('.draggable') && $previousRow.find(".".concat(group)).length) {
+ if ($previousRow.is('.draggable') && $previousRow.find(`.${group}`).length) {
if (this.indentEnabled) {
if ($previousRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) {
sourceRow = previousRow;
@@ -615,7 +580,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
} else {
sourceRow = previousRow;
}
- } else if ($nextRow.is('.draggable') && $nextRow.find(".".concat(group)).length) {
+ } else if ($nextRow.is('.draggable') && $nextRow.find(`.${group}`).length) {
if (this.indentEnabled) {
if ($nextRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) {
sourceRow = nextRow;
@@ -654,12 +619,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
rowSettings.source = rowSettings.target;
}
- var targetClass = ".".concat(rowSettings.target);
- var targetElement = $changedRow.find(targetClass).get(0);
+ const targetClass = `.${rowSettings.target}`;
+ const targetElement = $changedRow.find(targetClass).get(0);
if (targetElement) {
- var sourceClass = ".".concat(rowSettings.source);
- var sourceElement = $(sourceClass, sourceRow).get(0);
+ const sourceClass = `.${rowSettings.source}`;
+ const sourceElement = $(sourceClass, sourceRow).get(0);
switch (rowSettings.action) {
case 'depth':
@@ -672,14 +637,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
case 'order':
{
- var siblings = this.rowObject.findSiblings(rowSettings);
+ const siblings = this.rowObject.findSiblings(rowSettings);
if ($(targetElement).is('select')) {
- var values = [];
+ const values = [];
$(targetElement).find('option').each(function () {
values.push(this.value);
});
- var maxVal = values[values.length - 1];
+ const maxVal = values[values.length - 1];
$(siblings).find(targetClass).each(function () {
if (values.length > 0) {
this.value = values.shift();
@@ -688,7 +653,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
}
});
} else {
- var weight = parseInt($(siblings[0]).find(targetClass).val(), 10) || 0;
+ let weight = parseInt($(siblings[0]).find(targetClass).val(), 10) || 0;
$(siblings).find(targetClass).each(function () {
this.value = weight;
weight++;
@@ -702,8 +667,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.copyDragClasses = function (sourceRow, targetRow, group) {
- var sourceElement = $(sourceRow).find(".".concat(group));
- var targetElement = $(targetRow).find(".".concat(group));
+ const sourceElement = $(sourceRow).find(`.${group}`);
+ const targetElement = $(targetRow).find(`.${group}`);
if (sourceElement.length && targetElement.length) {
targetElement[0].className = sourceElement[0].className;
@@ -711,11 +676,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.checkScroll = function (cursorY) {
- var de = document.documentElement;
- var b = document.body;
- var windowHeight = window.innerHeight || (de.clientHeight && de.clientWidth !== 0 ? de.clientHeight : b.offsetHeight);
+ const de = document.documentElement;
+ const b = document.body;
+ const windowHeight = window.innerHeight || (de.clientHeight && de.clientWidth !== 0 ? de.clientHeight : b.offsetHeight);
this.windowHeight = windowHeight;
- var scrollY;
+ let scrollY;
if (document.all) {
scrollY = !de.scrollTop ? b.scrollTop : de.scrollTop;
@@ -724,8 +689,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
}
this.scrollY = scrollY;
- var trigger = this.scrollSettings.trigger;
- var delta = 0;
+ const trigger = this.scrollSettings.trigger;
+ let delta = 0;
if (cursorY - scrollY > windowHeight - trigger) {
delta = trigger / (windowHeight + scrollY - cursorY);
@@ -741,11 +706,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.setScroll = function (scrollAmount) {
- var self = this;
- this.scrollInterval = setInterval(function () {
+ const self = this;
+ this.scrollInterval = setInterval(() => {
self.checkScroll(self.currentPointerCoords.y);
- var aboveTable = self.scrollY > self.table.topY;
- var belowTable = self.scrollY + self.windowHeight < self.table.bottomY;
+ const aboveTable = self.scrollY > self.table.topY;
+ const belowTable = self.scrollY + self.windowHeight < self.table.bottomY;
if (scrollAmount > 0 && belowTable || scrollAmount < 0 && aboveTable) {
window.scrollBy(0, scrollAmount);
@@ -766,7 +731,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.row = function (tableRow, method, indentEnabled, maxDepth, addClasses) {
- var $tableRow = $(tableRow);
+ const $tableRow = $(tableRow);
this.element = tableRow;
this.method = method;
this.group = [tableRow];
@@ -782,20 +747,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
this.children = this.findChildren(addClasses);
this.group = this.group.concat(this.children);
- for (var n = 0; n < this.group.length; n++) {
+ for (let n = 0; n < this.group.length; n++) {
this.groupDepth = Math.max($(this.group[n]).find('.js-indentation').length, this.groupDepth);
}
}
};
Drupal.tableDrag.prototype.row.prototype.findChildren = function (addClasses) {
- var parentIndentation = this.indents;
- var currentRow = $(this.element, this.table).next('tr.draggable');
- var rows = [];
- var child = 0;
+ const parentIndentation = this.indents;
+ let currentRow = $(this.element, this.table).next('tr.draggable');
+ const rows = [];
+ let child = 0;
function rowIndentation(indentNum, el) {
- var self = $(el);
+ const self = $(el);
if (child === 1 && indentNum === parentIndentation) {
self.addClass('tree-child-first');
@@ -824,18 +789,18 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
}
if (addClasses && rows.length) {
- $(rows[rows.length - 1]).find(".js-indentation:nth-child(".concat(parentIndentation + 1, ")")).addClass('tree-child-last');
+ $(rows[rows.length - 1]).find(`.js-indentation:nth-child(${parentIndentation + 1})`).addClass('tree-child-last');
}
return rows;
};
Drupal.tableDrag.prototype.row.prototype.isValidSwap = function (row) {
- var $row = $(row);
+ const $row = $(row);
if (this.indentEnabled) {
- var prevRow;
- var nextRow;
+ let prevRow;
+ let nextRow;
if (this.direction === 'down') {
prevRow = row;
@@ -860,11 +825,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.row.prototype.swap = function (position, row) {
- this.group.forEach(function (row) {
+ this.group.forEach(row => {
Drupal.detachBehaviors(row, drupalSettings, 'move');
});
$(row)[position](this.group);
- this.group.forEach(function (row) {
+ this.group.forEach(row => {
Drupal.attachBehaviors(row, drupalSettings);
});
this.changed = true;
@@ -872,9 +837,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.row.prototype.validIndentInterval = function (prevRow, nextRow) {
- var $prevRow = $(prevRow);
- var maxIndent;
- var minIndent = nextRow ? $(nextRow).find('.js-indentation').length : 0;
+ const $prevRow = $(prevRow);
+ let maxIndent;
+ const minIndent = nextRow ? $(nextRow).find('.js-indentation').length : 0;
if (!prevRow || $prevRow.is(':not(.draggable)') || $(this.element).is('.tabledrag-root')) {
maxIndent = 0;
@@ -893,20 +858,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.row.prototype.indent = function (indentDiff) {
- var $group = $(this.group);
+ const $group = $(this.group);
if (!this.interval) {
- var prevRow = $(this.element).prev('tr').get(0);
- var nextRow = $group.eq(-1).next('tr').get(0);
+ const prevRow = $(this.element).prev('tr').get(0);
+ const nextRow = $group.eq(-1).next('tr').get(0);
this.interval = this.validIndentInterval(prevRow, nextRow);
}
- var indent = this.indents + indentDiff;
+ let indent = this.indents + indentDiff;
indent = Math.max(indent, this.interval.min);
indent = Math.min(indent, this.interval.max);
indentDiff = indent - this.indents;
- for (var n = 1; n <= Math.abs(indentDiff); n++) {
+ for (let n = 1; n <= Math.abs(indentDiff); n++) {
if (indentDiff < 0) {
$group.find('.js-indentation:first-of-type').remove();
this.indents--;
@@ -926,16 +891,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.row.prototype.findSiblings = function (rowSettings) {
- var siblings = [];
- var directions = ['prev', 'next'];
- var rowIndentation = this.indents;
- var checkRowIndentation;
+ const siblings = [];
+ const directions = ['prev', 'next'];
+ const rowIndentation = this.indents;
+ let checkRowIndentation;
- for (var d = 0; d < directions.length; d++) {
- var checkRow = $(this.element)[directions[d]]();
+ for (let d = 0; d < directions.length; d++) {
+ let checkRow = $(this.element)[directions[d]]();
while (checkRow.length) {
- if (checkRow.find(".".concat(rowSettings.target))) {
+ if (checkRow.find(`.${rowSettings.target}`)) {
if (this.indentEnabled) {
checkRowIndentation = checkRow.find('.js-indentation').length;
}
@@ -962,16 +927,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
Drupal.tableDrag.prototype.row.prototype.removeIndentClasses = function () {
- var _this5 = this;
-
- Object.keys(this.children || {}).forEach(function (n) {
- $(_this5.children[n]).find('.js-indentation').removeClass('tree-child').removeClass('tree-child-first').removeClass('tree-child-last').removeClass('tree-child-horizontal');
+ Object.keys(this.children || {}).forEach(n => {
+ $(this.children[n]).find('.js-indentation').removeClass('tree-child').removeClass('tree-child-first').removeClass('tree-child-last').removeClass('tree-child-horizontal');
});
};
Drupal.tableDrag.prototype.row.prototype.markChanged = function () {
- var marker = Drupal.theme('tableDragChangedMarker');
- var cell = $(this.element).find('td:first-of-type');
+ const marker = Drupal.theme('tableDragChangedMarker');
+ const cell = $(this.element).find('td:first-of-type');
if (cell.find('abbr.tabledrag-changed').length === 0) {
cell.append(marker);
@@ -987,23 +950,27 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
};
$.extend(Drupal.theme, {
- tableDragChangedMarker: function tableDragChangedMarker() {
- return "<abbr class=\"warning tabledrag-changed\" title=\"".concat(Drupal.t('Changed'), "\">*</abbr>");
+ tableDragChangedMarker() {
+ return `<abbr class="warning tabledrag-changed" title="${Drupal.t('Changed')}">*</abbr>`;
},
- tableDragIndentation: function tableDragIndentation() {
+
+ tableDragIndentation() {
return '<div class="js-indentation indentation"> </div>';
},
- tableDragChangedWarning: function tableDragChangedWarning() {
- return "<div class=\"tabledrag-changed-warning messages messages--warning\" role=\"alert\">".concat(Drupal.theme('tableDragChangedMarker'), " ").concat(Drupal.t('You have unsaved changes.'), "</div>");
- },
- tableDragToggle: function tableDragToggle() {
- return "<div class=\"tabledrag-toggle-weight-wrapper\" data-drupal-selector=\"tabledrag-toggle-weight-wrapper\">\n <button type=\"button\" class=\"link tabledrag-toggle-weight\" data-drupal-selector=\"tabledrag-toggle-weight\"></button>\n </div>";
- },
- toggleButtonContent: function toggleButtonContent(show) {
- return show ? Drupal.t('Hide row weights') : Drupal.t('Show row weights');
+
+ tableDragChangedWarning() {
+ return `<div class="tabledrag-changed-warning messages messages--warning" role="alert">${Drupal.theme('tableDragChangedMarker')} ${Drupal.t('You have unsaved changes.')}</div>`;
},
- tableDragHandle: function tableDragHandle() {
- return "<a href=\"#\" title=\"".concat(Drupal.t('Drag to re-order'), "\"\n class=\"tabledrag-handle\"><div class=\"handle\"> </div></a>");
+
+ tableDragToggle: () => `<div class="tabledrag-toggle-weight-wrapper" data-drupal-selector="tabledrag-toggle-weight-wrapper">
+ <button type="button" class="link tabledrag-toggle-weight" data-drupal-selector="tabledrag-toggle-weight"></button>
+ </div>`,
+ toggleButtonContent: show => show ? Drupal.t('Hide row weights') : Drupal.t('Show row weights'),
+
+ tableDragHandle() {
+ return `<a href="#" title="${Drupal.t('Drag to re-order')}"
+ class="tabledrag-handle"><div class="handle"> </div></a>`;
}
+
});
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/misc/tableheader.js b/core/misc/tableheader.js
index 110d30fee0ed77936d23b08bc1701ebf30db265b..35eef3057373b2a762a2f9f058093dff4ab8759e 100644
--- a/core/misc/tableheader.js
+++ b/core/misc/tableheader.js
@@ -7,7 +7,7 @@
(function ($, Drupal, displace) {
function TableHeader(table) {
- var $table = $(table);
+ const $table = $(table);
this.$originalTable = $table;
this.$originalHeader = $table.children('thead');
this.$originalHeaderCells = this.$originalHeader.find('> tr > th');
@@ -17,8 +17,8 @@
this.tableOffset = this.$originalTable.offset();
this.$originalTable.on('columnschange', {
tableHeader: this
- }, function (e, display) {
- var tableHeader = e.data.tableHeader;
+ }, (e, display) => {
+ const tableHeader = e.data.tableHeader;
if (tableHeader.displayWeight === null || tableHeader.displayWeight !== display) {
tableHeader.recalculateSticky();
@@ -30,27 +30,28 @@
}
function forTables(method, arg) {
- var tables = TableHeader.tables;
- var il = tables.length;
+ const tables = TableHeader.tables;
+ const il = tables.length;
- for (var i = 0; i < il; i++) {
+ for (let i = 0; i < il; i++) {
tables[i][method](arg);
}
}
function tableHeaderInitHandler(e) {
- once('tableheader', $(e.data.context).find('table.sticky-enabled')).forEach(function (table) {
+ once('tableheader', $(e.data.context).find('table.sticky-enabled')).forEach(table => {
TableHeader.tables.push(new TableHeader(table));
});
forTables('onScroll');
}
Drupal.behaviors.tableHeader = {
- attach: function attach(context) {
+ attach(context) {
$(window).one('scroll.TableHeaderInit', {
- context: context
+ context
}, tableHeaderInitHandler);
}
+
};
function scrollValue(position) {
@@ -85,9 +86,10 @@
tableOffset: null,
tableHeight: null,
stickyVisible: false,
- createSticky: function createSticky() {
+
+ createSticky() {
this.$html = $('html');
- var $stickyHeader = this.$originalHeader.clone(true);
+ const $stickyHeader = this.$originalHeader.clone(true);
this.$stickyTable = $('<table class="sticky-header"></table>').css({
visibility: 'hidden',
position: 'fixed',
@@ -96,25 +98,27 @@
this.$stickyHeaderCells = $stickyHeader.find('> tr > th');
this.recalculateSticky();
},
- stickyPosition: function stickyPosition(offsetTop, offsetLeft) {
- var css = {};
+
+ stickyPosition(offsetTop, offsetLeft) {
+ const css = {};
if (typeof offsetTop === 'number') {
- css.top = "".concat(offsetTop, "px");
+ css.top = `${offsetTop}px`;
}
if (typeof offsetLeft === 'number') {
- css.left = "".concat(this.tableOffset.left - offsetLeft, "px");
+ css.left = `${this.tableOffset.left - offsetLeft}px`;
}
this.$html.css('scroll-padding-top', displace.offsets.top + (this.stickyVisible ? this.$stickyTable.height() : 0));
return this.$stickyTable.css(css);
},
- checkStickyVisible: function checkStickyVisible() {
- var scrollTop = scrollValue('scrollTop');
- var tableTop = this.tableOffset.top - displace.offsets.top;
- var tableBottom = tableTop + this.tableHeight;
- var visible = false;
+
+ checkStickyVisible() {
+ const scrollTop = scrollValue('scrollTop');
+ const tableTop = this.tableOffset.top - displace.offsets.top;
+ const tableBottom = tableTop + this.tableHeight;
+ let visible = false;
if (tableTop < scrollTop && scrollTop < tableBottom - this.minHeight) {
visible = true;
@@ -123,22 +127,24 @@
this.stickyVisible = visible;
return visible;
},
- onScroll: function onScroll(e) {
+
+ onScroll(e) {
this.checkStickyVisible();
this.stickyPosition(null, scrollValue('scrollLeft'));
this.$stickyTable.css('visibility', this.stickyVisible ? 'visible' : 'hidden');
},
- recalculateSticky: function recalculateSticky(event) {
+
+ recalculateSticky(event) {
this.tableHeight = this.$originalTable[0].clientHeight;
displace.offsets.top = displace.calculateOffset('top');
this.tableOffset = this.$originalTable.offset();
this.stickyPosition(displace.offsets.top, scrollValue('scrollLeft'));
- var $that = null;
- var $stickyCell = null;
- var display = null;
- var il = this.$originalHeaderCells.length;
+ let $that = null;
+ let $stickyCell = null;
+ let display = null;
+ const il = this.$originalHeaderCells.length;
- for (var i = 0; i < il; i++) {
+ for (let i = 0; i < il; i++) {
$that = $(this.$originalHeaderCells[i]);
$stickyCell = this.$stickyHeaderCells.eq($that.index());
display = $that.css('display');
@@ -146,7 +152,7 @@
if (display !== 'none') {
$stickyCell.css({
width: $that.css('width'),
- display: display
+ display
});
} else {
$stickyCell.css('display', 'none');
@@ -155,6 +161,7 @@
this.$stickyTable.css('width', this.$originalTable.outerWidth());
}
+
});
Drupal.TableHeader = TableHeader;
})(jQuery, Drupal, window.Drupal.displace);
\ No newline at end of file
diff --git a/core/misc/tableresponsive.js b/core/misc/tableresponsive.js
index b5d152cded8acde406862015bd5274f68cd48123..9b64838452eafd60cbf820d9d950b3700955281c 100644
--- a/core/misc/tableresponsive.js
+++ b/core/misc/tableresponsive.js
@@ -18,19 +18,20 @@
}
Drupal.behaviors.tableResponsive = {
- attach: function attach(context, settings) {
- once('tableresponsive', 'table.responsive-enabled', context).forEach(function (table) {
+ attach(context, settings) {
+ once('tableresponsive', 'table.responsive-enabled', context).forEach(table => {
TableResponsive.tables.push(new TableResponsive(table));
});
}
+
};
$.extend(TableResponsive, {
tables: []
});
$.extend(TableResponsive.prototype, {
- eventhandlerEvaluateColumnVisibility: function eventhandlerEvaluateColumnVisibility(e) {
- var pegged = parseInt(this.$link.data('pegged'), 10);
- var hiddenLength = this.$headers.filter('.priority-medium:hidden, .priority-low:hidden').length;
+ eventhandlerEvaluateColumnVisibility(e) {
+ const pegged = parseInt(this.$link.data('pegged'), 10);
+ const hiddenLength = this.$headers.filter('.priority-medium:hidden, .priority-low:hidden').length;
if (hiddenLength > 0) {
this.$link.show().text(this.showText);
@@ -40,18 +41,19 @@
this.$link.hide().text(this.hideText);
}
},
- eventhandlerToggleColumns: function eventhandlerToggleColumns(e) {
+
+ eventhandlerToggleColumns(e) {
e.preventDefault();
- var self = this;
- var $hiddenHeaders = this.$headers.filter('.priority-medium:hidden, .priority-low:hidden');
+ const self = this;
+ const $hiddenHeaders = this.$headers.filter('.priority-medium:hidden, .priority-low:hidden');
this.$revealedCells = this.$revealedCells || $();
if ($hiddenHeaders.length > 0) {
$hiddenHeaders.each(function (index, element) {
- var $header = $(this);
- var position = $header.prevAll('th').length;
+ const $header = $(this);
+ const position = $header.prevAll('th').length;
self.$table.find('tbody tr').each(function () {
- var $cells = $(this).find('td').eq(position);
+ const $cells = $(this).find('td').eq(position);
$cells.show();
self.$revealedCells = $().add(self.$revealedCells).add($cells);
});
@@ -62,15 +64,15 @@
} else {
this.$revealedCells.hide();
this.$revealedCells.each(function (index, element) {
- var $cell = $(this);
- var properties = $cell.attr('style').split(';');
- var newProps = [];
- var match = /^display\s*:\s*none$/;
+ const $cell = $(this);
+ const properties = $cell.attr('style').split(';');
+ const newProps = [];
+ const match = /^display\s*:\s*none$/;
- for (var i = 0; i < properties.length; i++) {
- var prop = properties[i];
+ for (let i = 0; i < properties.length; i++) {
+ const prop = properties[i];
prop.trim();
- var isDisplayNone = match.exec(prop);
+ const isDisplayNone = match.exec(prop);
if (isDisplayNone) {
continue;
@@ -85,6 +87,7 @@
$(window).trigger('resize.tableresponsive');
}
}
+
});
Drupal.TableResponsive = TableResponsive;
})(jQuery, Drupal, window);
\ No newline at end of file
diff --git a/core/misc/tableselect.js b/core/misc/tableselect.js
index efd029f7ce174647719b8d0917d24ae97437615c..4d8712ae3088d28a83de0116e5ca439ad4106e57 100644
--- a/core/misc/tableselect.js
+++ b/core/misc/tableselect.js
@@ -7,11 +7,10 @@
(function ($, Drupal) {
Drupal.behaviors.tableSelect = {
- attach: function attach(context, settings) {
- once('table-select', $(context).find('th.select-all').closest('table')).forEach(function (table) {
- return Drupal.tableSelect.call(table);
- });
+ attach(context, settings) {
+ once('table-select', $(context).find('th.select-all').closest('table')).forEach(table => Drupal.tableSelect.call(table));
}
+
};
Drupal.tableSelect = function () {
@@ -19,19 +18,19 @@
return;
}
- var table = this;
- var checkboxes;
- var lastChecked;
- var $table = $(table);
- var strings = {
+ const table = this;
+ let checkboxes;
+ let lastChecked;
+ const $table = $(table);
+ const strings = {
selectAll: Drupal.t('Select all rows in this table'),
selectNone: Drupal.t('Deselect all rows in this table')
};
- var updateSelectAll = function updateSelectAll(state) {
+ const updateSelectAll = function (state) {
$table.prev('table.sticky-header').addBack().find('th.select-all input[type="checkbox"]').each(function () {
- var $checkbox = $(this);
- var stateChanged = $checkbox.prop('checked') !== state;
+ const $checkbox = $(this);
+ const stateChanged = $checkbox.prop('checked') !== state;
$checkbox.attr('title', state ? strings.selectNone : strings.selectAll);
if (stateChanged) {
@@ -40,11 +39,11 @@
});
};
- $table.find('th.select-all').prepend($(Drupal.theme('checkbox')).attr('title', strings.selectAll)).on('click', function (event) {
+ $table.find('th.select-all').prepend($(Drupal.theme('checkbox')).attr('title', strings.selectAll)).on('click', event => {
if ($(event.target).is('input[type="checkbox"]')) {
checkboxes.each(function () {
- var $checkbox = $(this);
- var stateChanged = $checkbox.prop('checked') !== event.target.checked;
+ const $checkbox = $(this);
+ const stateChanged = $checkbox.prop('checked') !== event.target.checked;
if (stateChanged) {
$checkbox.prop('checked', event.target.checked).trigger('change');
@@ -69,10 +68,10 @@
};
Drupal.tableSelectRange = function (from, to, state) {
- var mode = from.rowIndex > to.rowIndex ? 'previousSibling' : 'nextSibling';
+ const mode = from.rowIndex > to.rowIndex ? 'previousSibling' : 'nextSibling';
- for (var i = from[mode]; i; i = i[mode]) {
- var $i = $(i);
+ for (let i = from[mode]; i; i = i[mode]) {
+ const $i = $(i);
if (i.nodeType !== 1) {
continue;
diff --git a/core/misc/timezone.js b/core/misc/timezone.js
index a77cb96948cfcac72209f68d69fb3c3b64f036c0..5b36317c8dab5631fdf18acfe7e792ec5f1f68cd 100644
--- a/core/misc/timezone.js
+++ b/core/misc/timezone.js
@@ -7,28 +7,28 @@
(function ($, Drupal) {
Drupal.behaviors.setTimezone = {
- attach: function attach(context, settings) {
- var timezone = once('timezone', '.timezone-detect', context);
+ attach(context, settings) {
+ const timezone = once('timezone', '.timezone-detect', context);
if (timezone.length) {
- var $timezone = $(timezone);
- var tz = new Intl.DateTimeFormat().resolvedOptions().timeZone;
+ const $timezone = $(timezone);
+ const tz = new Intl.DateTimeFormat().resolvedOptions().timeZone;
- if (tz && $timezone.find("option[value=\"".concat(tz, "\"]")).length) {
+ if (tz && $timezone.find(`option[value="${tz}"]`).length) {
$timezone.val(tz);
return;
}
- var dateString = Date();
- var matches = dateString.match(/\(([A-Z]{3,5})\)/);
- var abbreviation = matches ? matches[1] : 0;
- var dateNow = new Date();
- var offsetNow = dateNow.getTimezoneOffset() * -60;
- var dateJan = new Date(dateNow.getFullYear(), 0, 1, 12, 0, 0, 0);
- var dateJul = new Date(dateNow.getFullYear(), 6, 1, 12, 0, 0, 0);
- var offsetJan = dateJan.getTimezoneOffset() * -60;
- var offsetJul = dateJul.getTimezoneOffset() * -60;
- var isDaylightSavingTime;
+ const dateString = Date();
+ const matches = dateString.match(/\(([A-Z]{3,5})\)/);
+ const abbreviation = matches ? matches[1] : 0;
+ const dateNow = new Date();
+ const offsetNow = dateNow.getTimezoneOffset() * -60;
+ const dateJan = new Date(dateNow.getFullYear(), 0, 1, 12, 0, 0, 0);
+ const dateJul = new Date(dateNow.getFullYear(), 6, 1, 12, 0, 0, 0);
+ const offsetJan = dateJan.getTimezoneOffset() * -60;
+ const offsetJul = dateJul.getTimezoneOffset() * -60;
+ let isDaylightSavingTime;
if (offsetJan === offsetJul) {
isDaylightSavingTime = '';
@@ -38,7 +38,7 @@
isDaylightSavingTime = 0;
}
- var path = "system/timezone/".concat(abbreviation, "/").concat(offsetNow, "/").concat(isDaylightSavingTime);
+ const path = `system/timezone/${abbreviation}/${offsetNow}/${isDaylightSavingTime}`;
$.ajax({
async: false,
url: Drupal.url(path),
@@ -46,13 +46,16 @@
date: dateString
},
dataType: 'json',
- success: function success(data) {
+
+ success(data) {
if (data) {
$timezone.val(data);
}
}
+
});
}
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index 9c967675cd983444b1f6e2d44a22da61513bd28a..e727cfde985708f716788b239d02fd64724227d3 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -6,37 +6,37 @@
**/
(function ($, Drupal, drupalSettings) {
- var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) {
- $target.parents('.vertical-tabs__pane').each(function (index, pane) {
+ const handleFragmentLinkClickOrHashChange = (e, $target) => {
+ $target.parents('.vertical-tabs__pane').each((index, pane) => {
$(pane).data('verticalTab').focus();
});
};
Drupal.behaviors.verticalTabs = {
- attach: function attach(context) {
- var width = drupalSettings.widthBreakpoint || 640;
- var mq = "(max-width: ".concat(width, "px)");
+ attach(context) {
+ const width = drupalSettings.widthBreakpoint || 640;
+ const mq = `(max-width: ${width}px)`;
if (window.matchMedia(mq).matches) {
return;
}
$(once('vertical-tabs-fragments', 'body')).on('formFragmentLinkClickOrHashChange.verticalTabs', handleFragmentLinkClickOrHashChange);
- once('vertical-tabs', '[data-vertical-tabs-panes]', context).forEach(function (verticalTab) {
- var $this = $(verticalTab).addClass('vertical-tabs__panes');
- var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
- var tabFocus;
- var $details = $this.find('> details');
+ once('vertical-tabs', '[data-vertical-tabs-panes]', context).forEach(verticalTab => {
+ const $this = $(verticalTab).addClass('vertical-tabs__panes');
+ const focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
+ let tabFocus;
+ const $details = $this.find('> details');
if ($details.length === 0) {
return;
}
- var tabList = $('<ul class="vertical-tabs__menu"></ul>');
+ const tabList = $('<ul class="vertical-tabs__menu"></ul>');
$this.wrap('<div class="vertical-tabs clearfix"></div>').before(tabList);
$details.each(function () {
- var $that = $(this);
- var verticalTab = new Drupal.verticalTab({
+ const $that = $(this);
+ const verticalTab = new Drupal.verticalTab({
title: $that.find('> summary').text(),
details: $that
});
@@ -51,7 +51,7 @@
$(tabList).find('> li').eq(-1).addClass('last');
if (!tabFocus) {
- var $locationHash = $this.find(window.location.hash);
+ const $locationHash = $this.find(window.location.hash);
if (window.location.hash && $locationHash.length) {
tabFocus = $locationHash.closest('.vertical-tabs__pane');
@@ -65,43 +65,46 @@
}
});
}
+
};
Drupal.verticalTab = function (settings) {
- var self = this;
+ const self = this;
$.extend(this, settings, Drupal.theme('verticalTab', settings));
- this.link.attr('href', "#".concat(settings.details.attr('id')));
- this.link.on('click', function (e) {
+ this.link.attr('href', `#${settings.details.attr('id')}`);
+ this.link.on('click', e => {
e.preventDefault();
self.focus();
});
- this.link.on('keydown', function (event) {
+ this.link.on('keydown', event => {
if (event.keyCode === 13) {
event.preventDefault();
self.focus();
$('.vertical-tabs__pane :input:visible:enabled').eq(0).trigger('focus');
}
});
- this.details.on('summaryUpdated', function () {
+ this.details.on('summaryUpdated', () => {
self.updateSummary();
}).trigger('summaryUpdated');
};
Drupal.verticalTab.prototype = {
- focus: function focus() {
+ focus() {
this.details.siblings('.vertical-tabs__pane').each(function () {
- var tab = $(this).data('verticalTab');
+ const tab = $(this).data('verticalTab');
tab.details.hide();
tab.item.removeClass('is-selected');
}).end().show().siblings(':hidden.vertical-tabs__active-tab').val(this.details.attr('id'));
this.item.addClass('is-selected');
$('#active-vertical-tab').remove();
- this.link.append("<span id=\"active-vertical-tab\" class=\"visually-hidden\">".concat(Drupal.t('(active tab)'), "</span>"));
+ this.link.append(`<span id="active-vertical-tab" class="visually-hidden">${Drupal.t('(active tab)')}</span>`);
},
- updateSummary: function updateSummary() {
+
+ updateSummary() {
this.summary.html(this.details.drupalGetSummary());
},
- tabShow: function tabShow() {
+
+ tabShow() {
this.item.show();
this.item.closest('.js-form-type-vertical-tabs').show();
this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
@@ -109,11 +112,12 @@
this.focus();
return this;
},
- tabHide: function tabHide() {
+
+ tabHide() {
this.item.hide();
this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
this.details.addClass('vertical-tab--hidden').hide();
- var $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)').eq(0);
+ const $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)').eq(0);
if ($firstTab.length) {
$firstTab.data('verticalTab').focus();
@@ -123,10 +127,11 @@
return this;
}
+
};
Drupal.theme.verticalTab = function (settings) {
- var tab = {};
+ const tab = {};
tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#"></a>').append(tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-item-summary"></span>')));
return tab;
};
diff --git a/core/modules/big_pipe/js/big_pipe.js b/core/modules/big_pipe/js/big_pipe.js
index 712001c7c52ac83ac5994d48a38827d07180755f..edcf98f0a7627077cb410a3546c5ffe70b7faa37 100644
--- a/core/modules/big_pipe/js/big_pipe.js
+++ b/core/modules/big_pipe/js/big_pipe.js
@@ -19,16 +19,16 @@
}
function bigPipeProcessPlaceholderReplacement(placeholderReplacement) {
- var placeholderId = placeholderReplacement.getAttribute('data-big-pipe-replacement-for-placeholder-with-id');
- var content = placeholderReplacement.textContent.trim();
+ const placeholderId = placeholderReplacement.getAttribute('data-big-pipe-replacement-for-placeholder-with-id');
+ const content = placeholderReplacement.textContent.trim();
if (typeof drupalSettings.bigPipePlaceholderIds[placeholderId] !== 'undefined') {
- var response = mapTextContentToAjaxResponse(content);
+ const response = mapTextContentToAjaxResponse(content);
if (response === false) {
once.remove('big-pipe', placeholderReplacement);
} else {
- var ajaxObject = Drupal.ajax({
+ const ajaxObject = Drupal.ajax({
url: '',
base: false,
element: false,
@@ -39,8 +39,8 @@
}
}
- var interval = drupalSettings.bigPipeInterval || 50;
- var timeoutID;
+ const interval = drupalSettings.bigPipeInterval || 50;
+ let timeoutID;
function bigPipeProcessDocument(context) {
if (!context.querySelector('script[data-big-pipe-event="start"]')) {
@@ -61,7 +61,7 @@
}
function bigPipeProcess() {
- timeoutID = setTimeout(function () {
+ timeoutID = setTimeout(() => {
if (!bigPipeProcessDocument(document)) {
bigPipeProcess();
}
@@ -69,7 +69,7 @@
}
bigPipeProcess();
- window.addEventListener('load', function () {
+ window.addEventListener('load', () => {
if (timeoutID) {
clearTimeout(timeoutID);
}
diff --git a/core/modules/block/js/block.admin.js b/core/modules/block/js/block.admin.js
index 7469333c70ab792e28588db1e149b25f9d6f1c34..254c838806b7617f603240557a8b401d08581fae 100644
--- a/core/modules/block/js/block.admin.js
+++ b/core/modules/block/js/block.admin.js
@@ -7,18 +7,18 @@
(function ($, Drupal, debounce, once) {
Drupal.behaviors.blockFilterByText = {
- attach: function attach(context, settings) {
- var $input = $(once('block-filter-text', 'input.block-filter-text'));
- var $table = $($input.attr('data-element'));
- var $filterRows;
+ attach(context, settings) {
+ const $input = $(once('block-filter-text', 'input.block-filter-text'));
+ const $table = $($input.attr('data-element'));
+ let $filterRows;
function filterBlockList(e) {
- var query = $(e.target).val().toLowerCase();
+ const query = $(e.target).val().toLowerCase();
function toggleBlockEntry(index, label) {
- var $label = $(label);
- var $row = $label.parent().parent();
- var textMatch = $label.text().toLowerCase().includes(query);
+ const $label = $(label);
+ const $row = $label.parent().parent();
+ const textMatch = $label.text().toLowerCase().includes(query);
$row.toggle(textMatch);
}
@@ -37,17 +37,19 @@
$input.on('keyup', debounce(filterBlockList, 200));
}
}
+
};
Drupal.behaviors.blockHighlightPlacement = {
- attach: function attach(context, settings) {
+ attach(context, settings) {
if (settings.blockPlacement && $('.js-block-placed').length) {
- once('block-highlight', '[data-drupal-selector="edit-blocks"]', context).forEach(function (container) {
- var $container = $(container);
+ once('block-highlight', '[data-drupal-selector="edit-blocks"]', context).forEach(container => {
+ const $container = $(container);
$('html, body').animate({
scrollTop: $('.js-block-placed').offset().top - $container.offset().top + $container.scrollTop()
}, 500);
});
}
}
+
};
})(jQuery, Drupal, Drupal.debounce, once);
\ No newline at end of file
diff --git a/core/modules/block/js/block.js b/core/modules/block/js/block.js
index bc4ac04e0d7ec685592b095c85eac32dd77cbd69..eac0fde0e596f7aa43af3488413778d7895b0783 100644
--- a/core/modules/block/js/block.js
+++ b/core/modules/block/js/block.js
@@ -7,17 +7,17 @@
(function ($, window, Drupal, once) {
Drupal.behaviors.blockSettingsSummary = {
- attach: function attach() {
+ attach() {
if (typeof $.fn.drupalSetSummary === 'undefined') {
return;
}
function checkboxesSummary(context) {
- var vals = [];
- var $checkboxes = $(context).find('input[type="checkbox"]:checked + label');
- var il = $checkboxes.length;
+ const vals = [];
+ const $checkboxes = $(context).find('input[type="checkbox"]:checked + label');
+ const il = $checkboxes.length;
- for (var i = 0; i < il; i++) {
+ for (let i = 0; i < il; i++) {
vals.push($($checkboxes[i]).html());
}
@@ -29,8 +29,8 @@
}
$('[data-drupal-selector="edit-visibility-node-type"], [data-drupal-selector="edit-visibility-entity-bundlenode"], [data-drupal-selector="edit-visibility-language"], [data-drupal-selector="edit-visibility-user-role"]').drupalSetSummary(checkboxesSummary);
- $('[data-drupal-selector="edit-visibility-request-path"]').drupalSetSummary(function (context) {
- var $pages = $(context).find('textarea[name="visibility[request_path][pages]"]');
+ $('[data-drupal-selector="edit-visibility-request-path"]').drupalSetSummary(context => {
+ const $pages = $(context).find('textarea[name="visibility[request_path][pages]"]');
if (!$pages.val()) {
return Drupal.t('Not restricted');
@@ -39,16 +39,17 @@
return Drupal.t('Restricted to certain pages');
});
}
+
};
Drupal.behaviors.blockDrag = {
- attach: function attach(context, settings) {
+ attach(context, settings) {
if (typeof Drupal.tableDrag === 'undefined' || typeof Drupal.tableDrag.blocks === 'undefined') {
return;
}
function checkEmptyRegions(table, rowObject) {
table.find('tr.region-message').each(function () {
- var $this = $(this);
+ const $this = $(this);
if ($this.prev('tr').get(0) === rowObject.element) {
if (rowObject.method !== 'keyboard' || rowObject.direction === 'down') {
@@ -66,7 +67,7 @@
function updateLastPlaced(table, rowObject) {
table.find('.color-success').removeClass('color-success');
- var $rowObject = $(rowObject);
+ const $rowObject = $(rowObject);
if (!$rowObject.is('.drag-previous')) {
table.find('.drag-previous').removeClass('drag-previous');
@@ -75,14 +76,12 @@
}
function updateBlockWeights(table, region) {
- var weight = -Math.round(table.find('.draggable').length / 2);
- table.find(".region-".concat(region, "-message")).nextUntil('.region-title').find('select.block-weight').val(function () {
- return ++weight;
- });
+ let weight = -Math.round(table.find('.draggable').length / 2);
+ table.find(`.region-${region}-message`).nextUntil('.region-title').find('select.block-weight').val(() => ++weight);
}
- var table = $('#blocks');
- var tableDrag = Drupal.tableDrag.blocks;
+ const table = $('#blocks');
+ const tableDrag = Drupal.tableDrag.blocks;
tableDrag.row.prototype.onSwap = function (swappedRow) {
checkEmptyRegions(table, this);
@@ -90,22 +89,22 @@
};
tableDrag.onDrop = function () {
- var dragObject = this;
- var $rowElement = $(dragObject.rowObject.element);
- var regionRow = $rowElement.prevAll('tr.region-message').get(0);
- var regionName = regionRow.className.replace(/([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
- var regionField = $rowElement.find('select.block-region-select');
+ const dragObject = this;
+ const $rowElement = $(dragObject.rowObject.element);
+ const regionRow = $rowElement.prevAll('tr.region-message').get(0);
+ const regionName = regionRow.className.replace(/([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
+ const regionField = $rowElement.find('select.block-region-select');
- if (regionField.find("option[value=".concat(regionName, "]")).length === 0) {
+ if (regionField.find(`option[value=${regionName}]`).length === 0) {
window.alert(Drupal.t('The block cannot be placed in this region.'));
regionField.trigger('change');
}
- if (!regionField.is(".block-region-".concat(regionName))) {
- var weightField = $rowElement.find('select.block-weight');
- var oldRegionName = weightField[0].className.replace(/([^ ]+[ ]+)*block-weight-([^ ]+)([ ]+[^ ]+)*/, '$2');
- regionField.removeClass("block-region-".concat(oldRegionName)).addClass("block-region-".concat(regionName));
- weightField.removeClass("block-weight-".concat(oldRegionName)).addClass("block-weight-".concat(regionName));
+ if (!regionField.is(`.block-region-${regionName}`)) {
+ const weightField = $rowElement.find('select.block-weight');
+ const oldRegionName = weightField[0].className.replace(/([^ ]+[ ]+)*block-weight-([^ ]+)([ ]+[^ ]+)*/, '$2');
+ regionField.removeClass(`block-region-${oldRegionName}`).addClass(`block-region-${regionName}`);
+ weightField.removeClass(`block-weight-${oldRegionName}`).addClass(`block-weight-${regionName}`);
regionField.val(regionName);
}
@@ -113,11 +112,11 @@
};
$(once('block-region-select', 'select.block-region-select', context)).on('change', function (event) {
- var row = $(this).closest('tr');
- var select = $(this);
+ const row = $(this).closest('tr');
+ const select = $(this);
tableDrag.rowObject = new tableDrag.row(row[0]);
- var regionMessage = table.find(".region-".concat(select[0].value, "-message"));
- var regionItems = regionMessage.nextUntil('.region-message, .region-title');
+ const regionMessage = table.find(`.region-${select[0].value}-message`);
+ const regionItems = regionMessage.nextUntil('.region-message, .region-title');
if (regionItems.length) {
regionItems.last().after(row);
@@ -137,5 +136,6 @@
select.trigger('blur');
});
}
+
};
})(jQuery, window, Drupal, once);
\ No newline at end of file
diff --git a/core/modules/book/book.js b/core/modules/book/book.js
index 6c4f5554d847b0e363d3d882524898051f209953..7e4dfce37227c7817c2022e0dea01aa29c419c4f 100644
--- a/core/modules/book/book.js
+++ b/core/modules/book/book.js
@@ -7,10 +7,10 @@
(function ($, Drupal) {
Drupal.behaviors.bookDetailsSummaries = {
- attach: function attach(context) {
- $(context).find('.book-outline-form').drupalSetSummary(function (context) {
- var $select = $(context).find('.book-title-select');
- var val = $select.val();
+ attach(context) {
+ $(context).find('.book-outline-form').drupalSetSummary(context => {
+ const $select = $(context).find('.book-title-select');
+ const val = $select.val();
if (val === '0') {
return Drupal.t('Not in book');
@@ -23,5 +23,6 @@
return Drupal.checkPlain($select.find(':selected').text());
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/ckeditor.admin.js b/core/modules/ckeditor/js/ckeditor.admin.js
index a5eb2d9afc34bff306da421759f64f51851591ae..dd716834deeef672a748e1347adbb85c69e1ef0d 100644
--- a/core/modules/ckeditor/js/ckeditor.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.admin.js
@@ -8,19 +8,19 @@
(function ($, Drupal, drupalSettings, _) {
Drupal.ckeditor = Drupal.ckeditor || {};
Drupal.behaviors.ckeditorAdmin = {
- attach: function attach(context) {
- var configurationForm = once('ckeditor-configuration', '.ckeditor-toolbar-configuration', context);
+ attach(context) {
+ const configurationForm = once('ckeditor-configuration', '.ckeditor-toolbar-configuration', context);
if (configurationForm.length) {
- var $configurationForm = $(configurationForm);
- var $textarea = $configurationForm.find('.js-form-item-editor-settings-toolbar-button-groups').hide().find('textarea');
+ const $configurationForm = $(configurationForm);
+ const $textarea = $configurationForm.find('.js-form-item-editor-settings-toolbar-button-groups').hide().find('textarea');
$configurationForm.append(drupalSettings.ckeditor.toolbarAdmin);
Drupal.ckeditor.models.Model = new Drupal.ckeditor.Model({
- $textarea: $textarea,
+ $textarea,
activeEditorConfig: JSON.parse($textarea.val()),
hiddenEditorConfig: drupalSettings.ckeditor.hiddenCKEditorConfig
});
- var viewDefaults = {
+ const viewDefaults = {
model: Drupal.ckeditor.models.Model,
el: $('.ckeditor-toolbar-configuration')
};
@@ -32,29 +32,32 @@
};
}
},
- detach: function detach(context, settings, trigger) {
+
+ detach(context, settings, trigger) {
if (trigger !== 'unload') {
return;
}
- var configurationForm = once.filter('ckeditor-configuration', '.ckeditor-toolbar-configuration', context);
+ const configurationForm = once.filter('ckeditor-configuration', '.ckeditor-toolbar-configuration', context);
if (configurationForm.length && Drupal.ckeditor.models && Drupal.ckeditor.models.Model) {
- var config = Drupal.ckeditor.models.Model.toJSON().activeEditorConfig;
- var buttons = Drupal.ckeditor.views.controller.getButtonList(config);
- var $activeToolbar = $('.ckeditor-toolbar-configuration').find('.ckeditor-toolbar-active');
+ const config = Drupal.ckeditor.models.Model.toJSON().activeEditorConfig;
+ const buttons = Drupal.ckeditor.views.controller.getButtonList(config);
+ const $activeToolbar = $('.ckeditor-toolbar-configuration').find('.ckeditor-toolbar-active');
- for (var i = 0; i < buttons.length; i++) {
+ for (let i = 0; i < buttons.length; i++) {
$activeToolbar.trigger('CKEditorToolbarChanged', ['removed', buttons[i]]);
}
}
}
+
};
Drupal.ckeditor = {
views: {},
models: {},
- registerButtonMove: function registerButtonMove(view, $button, callback) {
- var $group = $button.closest('.ckeditor-toolbar-group');
+
+ registerButtonMove(view, $button, callback) {
+ const $group = $button.closest('.ckeditor-toolbar-group');
if ($group.hasClass('placeholder')) {
if (view.isProcessing) {
@@ -68,8 +71,9 @@
callback(true);
}
},
- registerGroupMove: function registerGroupMove(view, $group) {
- var $row = $group.closest('.ckeditor-row');
+
+ registerGroupMove(view, $group) {
+ let $row = $group.closest('.ckeditor-row');
if ($row.hasClass('placeholder')) {
$row.removeClass('placeholder');
@@ -84,16 +88,17 @@
});
view.model.set('isDirty', true);
},
- openGroupNameDialog: function openGroupNameDialog(view, $group, callback) {
+
+ openGroupNameDialog(view, $group, callback) {
callback = callback || function () {};
function validateForm(form) {
if (form.elements[0].value.length === 0) {
- var $form = $(form);
+ const $form = $(form);
if (!$form.hasClass('errors')) {
$form.addClass('errors').find('input').addClass('error').attr('aria-invalid', 'true');
- $("<div class=\"description\" >".concat(Drupal.t('Please provide a name for the button group.'), "</div>")).insertAfter(form.elements[0]);
+ $(`<div class="description" >${Drupal.t('Please provide a name for the button group.')}</div>`).insertAfter(form.elements[0]);
}
return true;
@@ -110,7 +115,7 @@
function namePlaceholderGroup($group, name) {
if ($group.hasClass('placeholder')) {
- var groupID = "ckeditor-toolbar-group-aria-label-for-".concat(Drupal.checkPlain(name.toLowerCase().replace(/\s/g, '-')));
+ const groupID = `ckeditor-toolbar-group-aria-label-for-${Drupal.checkPlain(name.toLowerCase().replace(/\s/g, '-'))}`;
$group.removeAttr('aria-label').attr('data-drupal-ckeditor-type', 'group').attr('tabindex', 0).children('.ckeditor-toolbar-group-name').attr('id', groupID).end().children('.ckeditor-toolbar-group-buttons').attr('aria-labelledby', groupID);
}
@@ -136,33 +141,38 @@
}
}
- var $ckeditorButtonGroupNameForm = $(Drupal.theme('ckeditorButtonGroupNameForm'));
- var dialog = Drupal.dialog($ckeditorButtonGroupNameForm.get(0), {
+ const $ckeditorButtonGroupNameForm = $(Drupal.theme('ckeditorButtonGroupNameForm'));
+ const dialog = Drupal.dialog($ckeditorButtonGroupNameForm.get(0), {
title: Drupal.t('Button group name'),
dialogClass: 'ckeditor-name-toolbar-group',
resizable: false,
buttons: [{
text: Drupal.t('Apply'),
- click: function click() {
+
+ click() {
closeDialog('apply', this);
},
+
primary: true
}, {
text: Drupal.t('Cancel'),
- click: function click() {
+
+ click() {
closeDialog('cancel');
}
+
}],
- open: function open() {
- var form = this;
- var $form = $(this);
- var $widget = $form.parent();
+
+ open() {
+ const form = this;
+ const $form = $(this);
+ const $widget = $form.parent();
$widget.find('.ui-dialog-titlebar-close').remove();
- $widget.on('keypress.ckeditor', 'input, button', function (event) {
+ $widget.on('keypress.ckeditor', 'input, button', event => {
if (event.keyCode === 13) {
- var $target = $(event.currentTarget);
- var data = $target.data('ui-button');
- var action = 'apply';
+ const $target = $(event.currentTarget);
+ const data = $target.data('ui-button');
+ let action = 'apply';
if (data && data.options && data.options.label) {
action = data.options.label.toLowerCase();
@@ -174,7 +184,7 @@
event.preventDefault();
}
});
- var text = Drupal.t('Editing the name of the new button group in a dialog.');
+ let text = Drupal.t('Editing the name of the new button group in a dialog.');
if (typeof $group.attr('data-drupal-ckeditor-toolbar-group-name') !== 'undefined') {
text = Drupal.t('Editing the name of the "@groupName" button group in a dialog.', {
@@ -184,23 +194,26 @@
Drupal.announce(text);
},
- close: function close(event) {
+
+ close(event) {
$(event.target).remove();
}
+
});
dialog.showModal();
$(document.querySelector('.ckeditor-name-toolbar-group').querySelector('input')).attr('value', $group.attr('data-drupal-ckeditor-toolbar-group-name')).trigger('focus');
}
+
};
Drupal.behaviors.ckeditorAdminButtonPluginSettings = {
- attach: function attach(context) {
- var $context = $(context);
- var ckeditorPluginSettings = once('ckeditor-plugin-settings', '#ckeditor-plugin-settings', context);
+ attach(context) {
+ const $context = $(context);
+ const ckeditorPluginSettings = once('ckeditor-plugin-settings', '#ckeditor-plugin-settings', context);
if (ckeditorPluginSettings.length) {
- var $ckeditorPluginSettings = $(ckeditorPluginSettings);
+ const $ckeditorPluginSettings = $(ckeditorPluginSettings);
$ckeditorPluginSettings.find('[data-ckeditor-buttons]').each(function () {
- var $this = $(this);
+ const $this = $(this);
if ($this.data('verticalTab')) {
$this.data('verticalTab').tabHide();
@@ -210,15 +223,15 @@
$this.data('ckeditorButtonPluginSettingsActiveButtons', []);
});
- $context.find('.ckeditor-toolbar-active').off('CKEditorToolbarChanged.ckeditorAdminPluginSettings').on('CKEditorToolbarChanged.ckeditorAdminPluginSettings', function (event, action, button) {
- var $pluginSettings = $ckeditorPluginSettings.find("[data-ckeditor-buttons~=".concat(button, "]"));
+ $context.find('.ckeditor-toolbar-active').off('CKEditorToolbarChanged.ckeditorAdminPluginSettings').on('CKEditorToolbarChanged.ckeditorAdminPluginSettings', (event, action, button) => {
+ const $pluginSettings = $ckeditorPluginSettings.find(`[data-ckeditor-buttons~=${button}]`);
if ($pluginSettings.length === 0) {
return;
}
- var verticalTab = $pluginSettings.data('verticalTab');
- var activeButtons = $pluginSettings.data('ckeditorButtonPluginSettingsActiveButtons');
+ const verticalTab = $pluginSettings.data('verticalTab');
+ const activeButtons = $pluginSettings.data('ckeditorButtonPluginSettingsActiveButtons');
if (action === 'added') {
activeButtons.push(button);
@@ -244,6 +257,7 @@
});
}
}
+
};
Drupal.theme.ckeditorRow = function () {
@@ -251,9 +265,9 @@
};
Drupal.theme.ckeditorToolbarGroup = function () {
- var group = '';
- group += "<li class=\"ckeditor-toolbar-group placeholder\" role=\"presentation\" aria-label=\"".concat(Drupal.t('Place a button to create a new button group.'), "\">");
- group += "<h3 class=\"ckeditor-toolbar-group-name\">".concat(Drupal.t('New group'), "</h3>");
+ let group = '';
+ group += `<li class="ckeditor-toolbar-group placeholder" role="presentation" aria-label="${Drupal.t('Place a button to create a new button group.')}">`;
+ group += `<h3 class="ckeditor-toolbar-group-name">${Drupal.t('New group')}</h3>`;
group += '<ul class="ckeditor-buttons ckeditor-toolbar-group-buttons" role="toolbar" data-drupal-ckeditor-button-sorting="target"></ul>';
group += '</li>';
return group;
@@ -268,6 +282,6 @@
};
Drupal.theme.ckeditorNewButtonGroup = function () {
- return "<li class=\"ckeditor-add-new-group\"><button aria-label=\"".concat(Drupal.t('Add a CKEditor button group to the end of this row.'), "\">").concat(Drupal.t('Add group'), "</button></li>");
+ return `<li class="ckeditor-add-new-group"><button aria-label="${Drupal.t('Add a CKEditor button group to the end of this row.')}">${Drupal.t('Add group')}</button></li>`;
};
})(jQuery, Drupal, drupalSettings, _);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/ckeditor.drupalimage.admin.js b/core/modules/ckeditor/js/ckeditor.drupalimage.admin.js
index 284e0054a74526f1799f1584f25465ce2a65f97d..8d91c56718a339a0693104635656677502747f13 100644
--- a/core/modules/ckeditor/js/ckeditor.drupalimage.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.drupalimage.admin.js
@@ -7,33 +7,34 @@
(function ($, Drupal, drupalSettings) {
Drupal.behaviors.ckeditorDrupalImageSettingsSummary = {
- attach: function attach() {
- $('[data-ckeditor-plugin-id="drupalimage"]').drupalSetSummary(function (context) {
- var root = 'input[name="editor[settings][plugins][drupalimage][image_upload]';
- var $status = $("".concat(root, "[status]\"]"));
- var $maxFileSize = $("".concat(root, "[max_size]\"]"));
- var $maxWidth = $("".concat(root, "[max_dimensions][width]\"]"));
- var $maxHeight = $("".concat(root, "[max_dimensions][height]\"]"));
- var $scheme = $("".concat(root, "[scheme]\"]:checked"));
- var maxFileSize = $maxFileSize.val() ? $maxFileSize.val() : $maxFileSize.attr('placeholder');
- var maxDimensions = $maxWidth.val() && $maxHeight.val() ? "(".concat($maxWidth.val(), "x").concat($maxHeight.val(), ")") : '';
+ attach() {
+ $('[data-ckeditor-plugin-id="drupalimage"]').drupalSetSummary(context => {
+ const root = 'input[name="editor[settings][plugins][drupalimage][image_upload]';
+ const $status = $(`${root}[status]"]`);
+ const $maxFileSize = $(`${root}[max_size]"]`);
+ const $maxWidth = $(`${root}[max_dimensions][width]"]`);
+ const $maxHeight = $(`${root}[max_dimensions][height]"]`);
+ const $scheme = $(`${root}[scheme]"]:checked`);
+ const maxFileSize = $maxFileSize.val() ? $maxFileSize.val() : $maxFileSize.attr('placeholder');
+ const maxDimensions = $maxWidth.val() && $maxHeight.val() ? `(${$maxWidth.val()}x${$maxHeight.val()})` : '';
if (!$status.is(':checked')) {
return Drupal.t('Uploads disabled');
}
- var output = '';
+ let output = '';
output += Drupal.t('Uploads enabled, max size: @size @dimensions', {
'@size': maxFileSize,
'@dimensions': maxDimensions
});
if ($scheme.length) {
- output += "<br />".concat($scheme.attr('data-label'));
+ output += `<br />${$scheme.attr('data-label')}`;
}
return output;
});
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/ckeditor.js b/core/modules/ckeditor/js/ckeditor.js
index be798f0e05385d8f295715f3e1471965acccf3e3..e9431d7930686eb0dff005c366475a0e4626f09e 100644
--- a/core/modules/ckeditor/js/ckeditor.js
+++ b/core/modules/ckeditor/js/ckeditor.js
@@ -7,20 +7,21 @@
(function (Drupal, debounce, CKEDITOR, $, displace, AjaxCommands) {
Drupal.editors.ckeditor = {
- attach: function attach(element, format) {
+ attach(element, format) {
this._loadExternalPlugins(format);
format.editorSettings.drupal = {
format: format.format
};
- var label = $("label[for=".concat(element.getAttribute('id'), "]")).html();
+ const label = $(`label[for=${element.getAttribute('id')}]`).html();
format.editorSettings.title = Drupal.t('Rich Text Editor, !label field', {
'!label': label
});
return !!CKEDITOR.replace(element, format.editorSettings);
},
- detach: function detach(element, format, trigger) {
- var editor = CKEDITOR.dom.element.get(element).getEditor();
+
+ detach(element, format, trigger) {
+ const editor = CKEDITOR.dom.element.get(element).getEditor();
if (editor) {
if (trigger === 'serialize') {
@@ -33,20 +34,21 @@
return !!editor;
},
- onChange: function onChange(element, callback) {
- var editor = CKEDITOR.dom.element.get(element).getEditor();
+
+ onChange(element, callback) {
+ const editor = CKEDITOR.dom.element.get(element).getEditor();
if (editor) {
- editor.on('change', debounce(function () {
+ editor.on('change', debounce(() => {
callback(editor.getData());
}, 400));
- editor.on('mode', function () {
- var editable = editor.editable();
+ editor.on('mode', () => {
+ const editable = editor.editable();
if (!editable.isInline()) {
- editor.on('autoGrow', function (evt) {
- var doc = evt.editor.document;
- var scrollable = CKEDITOR.env.quirks ? doc.getBody() : doc.getDocumentElement();
+ editor.on('autoGrow', evt => {
+ const doc = evt.editor.document;
+ const scrollable = CKEDITOR.env.quirks ? doc.getBody() : doc.getDocumentElement();
if (scrollable.$.scrollHeight < scrollable.$.clientHeight) {
scrollable.setStyle('overflow-y', 'hidden');
@@ -60,27 +62,28 @@
return !!editor;
},
- attachInlineEditor: function attachInlineEditor(element, format, mainToolbarId, floatedToolbarId) {
+
+ attachInlineEditor(element, format, mainToolbarId, floatedToolbarId) {
this._loadExternalPlugins(format);
format.editorSettings.drupal = {
format: format.format
};
- var settings = $.extend(true, {}, format.editorSettings);
+ const settings = $.extend(true, {}, format.editorSettings);
if (mainToolbarId) {
- var settingsOverride = {
+ const settingsOverride = {
extraPlugins: 'sharedspace',
removePlugins: 'floatingspace,elementspath',
sharedSpaces: {
top: mainToolbarId
}
};
- var sourceButtonFound = false;
+ let sourceButtonFound = false;
- for (var i = 0; !sourceButtonFound && i < settings.toolbar.length; i++) {
+ for (let i = 0; !sourceButtonFound && i < settings.toolbar.length; i++) {
if (settings.toolbar[i] !== '/') {
- for (var j = 0; !sourceButtonFound && j < settings.toolbar[i].items.length; j++) {
+ for (let j = 0; !sourceButtonFound && j < settings.toolbar[i].items.length; j++) {
if (settings.toolbar[i].items[j] === 'Source') {
sourceButtonFound = true;
settings.toolbar[i].items[j] = 'Sourcedialog';
@@ -91,47 +94,50 @@
}
}
- settings.extraPlugins += ",".concat(settingsOverride.extraPlugins);
- settings.removePlugins += ",".concat(settingsOverride.removePlugins);
+ settings.extraPlugins += `,${settingsOverride.extraPlugins}`;
+ settings.removePlugins += `,${settingsOverride.removePlugins}`;
settings.sharedSpaces = settingsOverride.sharedSpaces;
}
element.setAttribute('contentEditable', 'true');
return !!CKEDITOR.inline(element, settings);
},
- _loadExternalPlugins: function _loadExternalPlugins(format) {
- var externalPlugins = format.editorSettings.drupalExternalPlugins;
+
+ _loadExternalPlugins(format) {
+ const externalPlugins = format.editorSettings.drupalExternalPlugins;
if (externalPlugins) {
- Object.keys(externalPlugins || {}).forEach(function (pluginName) {
+ Object.keys(externalPlugins || {}).forEach(pluginName => {
CKEDITOR.plugins.addExternal(pluginName, externalPlugins[pluginName], '');
});
delete format.editorSettings.drupalExternalPlugins;
}
}
+
};
Drupal.ckeditor = {
saveCallback: null,
- openDialog: function openDialog(editor, url, existingValues, saveCallback, dialogSettings) {
- var $target = $(editor.container.$);
+
+ openDialog(editor, url, existingValues, saveCallback, dialogSettings) {
+ let $target = $(editor.container.$);
if (editor.elementMode === CKEDITOR.ELEMENT_MODE_REPLACE) {
$target = $target.find('.cke_contents');
}
$target.css('position', 'relative').find('.ckeditor-dialog-loading').remove();
- var classes = dialogSettings.dialogClass ? dialogSettings.dialogClass.split(' ') : [];
+ const classes = dialogSettings.dialogClass ? dialogSettings.dialogClass.split(' ') : [];
classes.push('ui-dialog--narrow');
dialogSettings.dialogClass = classes.join(' ');
dialogSettings.autoResize = window.matchMedia('(min-width: 600px)').matches;
dialogSettings.width = 'auto';
- var $content = $("<div class=\"ckeditor-dialog-loading\"><span style=\"top: -40px;\" class=\"ckeditor-dialog-loading-link\">".concat(Drupal.t('Loading...'), "</span></div>"));
+ const $content = $(`<div class="ckeditor-dialog-loading"><span style="top: -40px;" class="ckeditor-dialog-loading-link">${Drupal.t('Loading...')}</span></div>`);
$content.appendTo($target);
- var ckeditorAjaxDialog = Drupal.ajax({
+ const ckeditorAjaxDialog = Drupal.ajax({
dialog: dialogSettings,
dialogType: 'modal',
selector: '.ckeditor-dialog-loading-link',
- url: url,
+ url,
progress: {
type: 'throbber'
},
@@ -140,48 +146,49 @@
}
});
ckeditorAjaxDialog.execute();
- window.setTimeout(function () {
+ window.setTimeout(() => {
$content.find('span').animate({
top: '0px'
});
}, 1000);
Drupal.ckeditor.saveCallback = saveCallback;
}
+
};
- $(window).on('dialogcreate', function (e, dialog, $element, settings) {
+ $(window).on('dialogcreate', (e, dialog, $element, settings) => {
$('.ui-dialog--narrow').css('zIndex', CKEDITOR.config.baseFloatZIndex + 1);
});
- $(window).on('dialog:beforecreate', function (e, dialog, $element, settings) {
+ $(window).on('dialog:beforecreate', (e, dialog, $element, settings) => {
$('.ckeditor-dialog-loading').animate({
top: '-40px'
}, function () {
$(this).remove();
});
});
- $(window).on('editor:dialogsave', function (e, values) {
+ $(window).on('editor:dialogsave', (e, values) => {
if (Drupal.ckeditor.saveCallback) {
Drupal.ckeditor.saveCallback(values);
}
});
- $(window).on('dialog:afterclose', function (e, dialog, $element) {
+ $(window).on('dialog:afterclose', (e, dialog, $element) => {
if (Drupal.ckeditor.saveCallback) {
Drupal.ckeditor.saveCallback = null;
}
});
- $(document).on('drupalViewportOffsetChange', function () {
+ $(document).on('drupalViewportOffsetChange', () => {
CKEDITOR.config.autoGrow_maxHeight = 0.7 * (window.innerHeight - displace.offsets.top - displace.offsets.bottom);
});
function redirectTextareaFragmentToCKEditorInstance() {
- var hash = window.location.hash.substr(1);
- var element = document.getElementById(hash);
+ const hash = window.location.hash.substr(1);
+ const element = document.getElementById(hash);
if (element) {
- var editor = CKEDITOR.dom.element.get(element).getEditor();
+ const editor = CKEDITOR.dom.element.get(element).getEditor();
if (editor) {
- var id = editor.container.getAttribute('id');
- window.location.replace("#".concat(id));
+ const id = editor.container.getAttribute('id');
+ window.location.replace(`#${id}`);
}
}
}
@@ -193,10 +200,10 @@
if (AjaxCommands) {
AjaxCommands.prototype.ckeditor_add_stylesheet = function (ajax, response, status) {
- var editor = CKEDITOR.instances[response.editor_id];
+ const editor = CKEDITOR.instances[response.editor_id];
if (editor) {
- response.stylesheets.forEach(function (url) {
+ response.stylesheets.forEach(url => {
editor.document.appendStyleSheet(url);
});
}
diff --git a/core/modules/ckeditor/js/ckeditor.language.admin.js b/core/modules/ckeditor/js/ckeditor.language.admin.js
index 1d8b1cedaedae7d4bd1bfef1129ba528d5bb2180..5d6376fb1f4701f2a93851827f478b7a10ce930a 100644
--- a/core/modules/ckeditor/js/ckeditor.language.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.language.admin.js
@@ -7,10 +7,9 @@
(function ($, Drupal) {
Drupal.behaviors.ckeditorLanguageSettingsSummary = {
- attach: function attach() {
- $('#edit-editor-settings-plugins-language').drupalSetSummary(function (context) {
- return $('#edit-editor-settings-plugins-language-language-list-type option:selected').text();
- });
+ attach() {
+ $('#edit-editor-settings-plugins-language').drupalSetSummary(context => $('#edit-editor-settings-plugins-language-language-list-type option:selected').text());
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.js b/core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.js
index e278cd634cc30be9818e6e19987285574232933f..e0b9dbf9a32241c9aae4ec5aec127481aba9e97b 100644
--- a/core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.js
+++ b/core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.js
@@ -5,49 +5,51 @@
* @preserve
**/
-(function ($, CKEDITOR) {
- var convertToOffCanvasCss = function convertToOffCanvasCss(originalCss) {
- var selectorPrefix = '#drupal-off-canvas ';
- var skinPath = "".concat(CKEDITOR.basePath).concat(CKEDITOR.skinName, "/");
- var css = originalCss.substring(originalCss.indexOf('*/') + 2).trim().replace(/}/g, "}".concat(selectorPrefix)).replace(/,/g, ",".concat(selectorPrefix)).replace(/url\(/g, skinPath);
- return "".concat(selectorPrefix).concat(css);
+(($, CKEDITOR) => {
+ const convertToOffCanvasCss = originalCss => {
+ const selectorPrefix = '#drupal-off-canvas ';
+ const skinPath = `${CKEDITOR.basePath}${CKEDITOR.skinName}/`;
+ const css = originalCss.substring(originalCss.indexOf('*/') + 2).trim().replace(/}/g, `}${selectorPrefix}`).replace(/,/g, `,${selectorPrefix}`).replace(/url\(/g, skinPath);
+ return `${selectorPrefix}${css}`;
};
- var insertCss = function insertCss(cssToInsert) {
- var offCanvasCss = document.createElement('style');
+ const insertCss = cssToInsert => {
+ const offCanvasCss = document.createElement('style');
offCanvasCss.innerHTML = cssToInsert;
offCanvasCss.setAttribute('id', 'ckeditor-off-canvas-reset');
document.body.appendChild(offCanvasCss);
};
- var addCkeditorOffCanvasCss = function addCkeditorOffCanvasCss() {
+ const addCkeditorOffCanvasCss = () => {
if (document.getElementById('ckeditor-off-canvas-reset')) {
return;
}
CKEDITOR.skinName = CKEDITOR.skin.name;
- var editorCssPath = CKEDITOR.skin.getPath('editor');
- var dialogCssPath = CKEDITOR.skin.getPath('dialog');
- var storedOffCanvasCss = window.localStorage.getItem("Drupal.off-canvas.css.".concat(editorCssPath).concat(dialogCssPath));
+ const editorCssPath = CKEDITOR.skin.getPath('editor');
+ const dialogCssPath = CKEDITOR.skin.getPath('dialog');
+ const storedOffCanvasCss = window.localStorage.getItem(`Drupal.off-canvas.css.${editorCssPath}${dialogCssPath}`);
if (storedOffCanvasCss) {
insertCss(storedOffCanvasCss);
return;
}
- $.when($.get(editorCssPath), $.get(dialogCssPath)).done(function (editorCss, dialogCss) {
- var offCanvasEditorCss = convertToOffCanvasCss(editorCss[0]);
- var offCanvasDialogCss = convertToOffCanvasCss(dialogCss[0]);
- var cssToInsert = "#drupal-off-canvas .cke_inner * {background: transparent;}\n ".concat(offCanvasEditorCss, "\n ").concat(offCanvasDialogCss);
+ $.when($.get(editorCssPath), $.get(dialogCssPath)).done((editorCss, dialogCss) => {
+ const offCanvasEditorCss = convertToOffCanvasCss(editorCss[0]);
+ const offCanvasDialogCss = convertToOffCanvasCss(dialogCss[0]);
+ const cssToInsert = `#drupal-off-canvas .cke_inner * {background: transparent;}
+ ${offCanvasEditorCss}
+ ${offCanvasDialogCss}`;
insertCss(cssToInsert);
if (CKEDITOR.timestamp && editorCssPath.indexOf(CKEDITOR.timestamp) !== -1 && dialogCssPath.indexOf(CKEDITOR.timestamp) !== -1) {
- Object.keys(window.localStorage).forEach(function (key) {
+ Object.keys(window.localStorage).forEach(key => {
if (key.indexOf('Drupal.off-canvas.css.') === 0) {
window.localStorage.removeItem(key);
}
});
- window.localStorage.setItem("Drupal.off-canvas.css.".concat(editorCssPath).concat(dialogCssPath), cssToInsert);
+ window.localStorage.setItem(`Drupal.off-canvas.css.${editorCssPath}${dialogCssPath}`, cssToInsert);
}
});
};
diff --git a/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js b/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js
index 164d16bc1bbd15e4ca08bb5fcab27cd2dc301062..dd8165091c0bbfe586d1570bc94130c30767d5fb 100644
--- a/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js
@@ -7,31 +7,32 @@
(function ($, Drupal, drupalSettings, _) {
Drupal.behaviors.ckeditorStylesComboSettings = {
- attach: function attach(context) {
- var $context = $(context);
- var $ckeditorActiveToolbar = $context.find('.ckeditor-toolbar-configuration').find('.ckeditor-toolbar-active');
- var previousStylesSet = drupalSettings.ckeditor.hiddenCKEditorConfig.stylesSet;
- var that = this;
+ attach(context) {
+ const $context = $(context);
+ const $ckeditorActiveToolbar = $context.find('.ckeditor-toolbar-configuration').find('.ckeditor-toolbar-active');
+ let previousStylesSet = drupalSettings.ckeditor.hiddenCKEditorConfig.stylesSet;
+ const that = this;
$context.find('[name="editor[settings][plugins][stylescombo][styles]"]').on('blur.ckeditorStylesComboSettings', function () {
- var styles = $(this).val().trim();
+ const styles = $(this).val().trim();
- var stylesSet = that._generateStylesSetSetting(styles);
+ const stylesSet = that._generateStylesSetSetting(styles);
if (!_.isEqual(previousStylesSet, stylesSet)) {
previousStylesSet = stylesSet;
$ckeditorActiveToolbar.trigger('CKEditorPluginSettingsChanged', [{
- stylesSet: stylesSet
+ stylesSet
}]);
}
});
},
- _generateStylesSetSetting: function _generateStylesSetSetting(styles) {
- var stylesSet = [];
+
+ _generateStylesSetSetting(styles) {
+ const stylesSet = [];
styles = styles.replace(/\r/g, '\n');
- var lines = styles.split('\n');
+ const lines = styles.split('\n');
- for (var i = 0; i < lines.length; i++) {
- var style = lines[i].trim();
+ for (let i = 0; i < lines.length; i++) {
+ const style = lines[i].trim();
if (style.length === 0) {
continue;
@@ -41,37 +42,39 @@
continue;
}
- var parts = style.split('|');
- var selector = parts[0];
- var label = parts[1];
- var classes = selector.split('.');
- var element = classes.shift();
+ const parts = style.split('|');
+ const selector = parts[0];
+ const label = parts[1];
+ const classes = selector.split('.');
+ const element = classes.shift();
stylesSet.push({
attributes: {
class: classes.join(' ')
},
- element: element,
+ element,
name: label
});
}
return stylesSet;
}
+
};
Drupal.behaviors.ckeditorStylesComboSettingsSummary = {
- attach: function attach() {
- $('[data-ckeditor-plugin-id="stylescombo"]').drupalSetSummary(function (context) {
- var styles = $('[data-drupal-selector="edit-editor-settings-plugins-stylescombo-styles"]').val().trim();
+ attach() {
+ $('[data-ckeditor-plugin-id="stylescombo"]').drupalSetSummary(context => {
+ const styles = $('[data-drupal-selector="edit-editor-settings-plugins-stylescombo-styles"]').val().trim();
if (styles.length === 0) {
return Drupal.t('No styles configured');
}
- var count = styles.split('\n').length;
+ const count = styles.split('\n').length;
return Drupal.t('@count styles configured', {
'@count': count
});
});
}
+
};
})(jQuery, Drupal, drupalSettings, _);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/models/Model.js b/core/modules/ckeditor/js/models/Model.js
index c38c580d7766258a1e5e7e4977e16be71919ca3d..c3379ead9924a4e126adb97b240ca926348b8c1b 100644
--- a/core/modules/ckeditor/js/models/Model.js
+++ b/core/modules/ckeditor/js/models/Model.js
@@ -16,8 +16,10 @@
featuresMetadata: null,
groupNamesVisible: false
},
- sync: function sync() {
+
+ sync() {
this.get('$textarea').val(JSON.stringify(this.get('activeEditorConfig')));
}
+
});
})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/plugins/drupalimage/plugin.js b/core/modules/ckeditor/js/plugins/drupalimage/plugin.js
index 34b0cc05197c3e5a75dd91ef85be315367098b9b..570efab2815c5b28eafe9f7da372c9a4ce02efd1 100644
--- a/core/modules/ckeditor/js/plugins/drupalimage/plugin.js
+++ b/core/modules/ckeditor/js/plugins/drupalimage/plugin.js
@@ -7,7 +7,7 @@
(function ($, Drupal, CKEDITOR) {
function getFocusedWidget(editor) {
- var widget = editor.widgets.focused;
+ const widget = editor.widgets.focused;
if (widget && widget.name === 'image') {
return widget;
@@ -23,7 +23,7 @@
CKEDITOR.plugins.drupallink.registerLinkableWidget('image');
editor.getCommand('drupalunlink').on('exec', function (evt) {
- var widget = getFocusedWidget(editor);
+ const widget = getFocusedWidget(editor);
if (!widget || !widget.parts.link) {
return;
@@ -34,7 +34,7 @@
evt.cancel();
});
editor.getCommand('drupalunlink').on('refresh', function (evt) {
- var widget = getFocusedWidget(editor);
+ const widget = getFocusedWidget(editor);
if (!widget) {
return;
@@ -49,9 +49,10 @@
requires: 'image2',
icons: 'drupalimage',
hidpi: true,
- beforeInit: function beforeInit(editor) {
- editor.on('widgetDefinition', function (event) {
- var widgetDefinition = event.data;
+
+ beforeInit(editor) {
+ editor.on('widgetDefinition', event => {
+ const widgetDefinition = event.data;
if (widgetDefinition.name !== 'image') {
return;
@@ -75,7 +76,7 @@
alt: ''
}
});
- var requiredContent = widgetDefinition.requiredContent.getDefinition();
+ const requiredContent = widgetDefinition.requiredContent.getDefinition();
requiredContent.attributes['data-entity-type'] = '';
requiredContent.attributes['data-entity-uuid'] = '';
widgetDefinition.requiredContent = new CKEDITOR.style(requiredContent);
@@ -101,14 +102,14 @@
return element;
};
- var originalGetClasses = widgetDefinition.getClasses;
+ const originalGetClasses = widgetDefinition.getClasses;
widgetDefinition.getClasses = function () {
- var classes = originalGetClasses.call(this);
- var captionedClasses = (this.editor.config.image2_captionedClass || '').split(/\s+/);
+ const classes = originalGetClasses.call(this);
+ const captionedClasses = (this.editor.config.image2_captionedClass || '').split(/\s+/);
if (captionedClasses.length && classes) {
- for (var i = 0; i < captionedClasses.length; i++) {
+ for (let i = 0; i < captionedClasses.length; i++) {
if (captionedClasses[i] in classes) {
delete classes[captionedClasses[i]];
}
@@ -128,18 +129,18 @@
};
widgetDefinition._dataToDialogValues = function (data) {
- var dialogValues = {};
- var map = widgetDefinition._mapDataToDialog;
- Object.keys(widgetDefinition._mapDataToDialog).forEach(function (key) {
+ const dialogValues = {};
+ const map = widgetDefinition._mapDataToDialog;
+ Object.keys(widgetDefinition._mapDataToDialog).forEach(key => {
dialogValues[map[key]] = data[key];
});
return dialogValues;
};
widgetDefinition._dialogValuesToData = function (dialogReturnValues) {
- var data = {};
- var map = widgetDefinition._mapDataToDialog;
- Object.keys(widgetDefinition._mapDataToDialog).forEach(function (key) {
+ const data = {};
+ const map = widgetDefinition._mapDataToDialog;
+ Object.keys(widgetDefinition._mapDataToDialog).forEach(key => {
if (dialogReturnValues.hasOwnProperty(map[key])) {
data[key] = dialogReturnValues[map[key]];
}
@@ -149,17 +150,17 @@
widgetDefinition._createDialogSaveCallback = function (editor, widget) {
return function (dialogReturnValues) {
- var firstEdit = !widget.ready;
+ const firstEdit = !widget.ready;
if (!firstEdit) {
widget.focus();
}
editor.fire('saveSnapshot');
- var container = widget.wrapper.getParent(true);
- var image = widget.parts.image;
+ const container = widget.wrapper.getParent(true);
+ const image = widget.parts.image;
- var data = widgetDefinition._dialogValuesToData(dialogReturnValues.attributes);
+ const data = widgetDefinition._dialogValuesToData(dialogReturnValues.attributes);
widget.setData(data);
widget = editor.widgets.getByElement(image);
@@ -168,7 +169,7 @@
editor.widgets.finalizeCreation(container);
}
- setTimeout(function () {
+ setTimeout(() => {
widget.focus();
editor.fire('saveSnapshot');
});
@@ -176,7 +177,7 @@
};
};
- var originalInit = widgetDefinition.init;
+ const originalInit = widgetDefinition.init;
widgetDefinition.init = function () {
originalInit.call(this);
@@ -186,14 +187,14 @@
}
};
});
- editor.widgets.on('instanceCreated', function (event) {
- var widget = event.data;
+ editor.widgets.on('instanceCreated', event => {
+ const widget = event.data;
if (widget.name !== 'image') {
return;
}
- widget.on('edit', function (event) {
+ widget.on('edit', event => {
event.cancel();
editor.execCommand('editdrupalimage', {
existingValues: widget.definition._dataToDialogValues(widget.data),
@@ -209,13 +210,15 @@
wysiwyg: 1
},
canUndo: true,
- exec: function exec(editor, data) {
- var dialogSettings = {
+
+ exec(editor, data) {
+ const dialogSettings = {
title: data.dialogTitle,
dialogClass: 'editor-image-dialog'
};
- Drupal.ckeditor.openDialog(editor, Drupal.url("editor/dialog/image/".concat(editor.config.drupal.format)), data.existingValues, data.saveCallback, dialogSettings);
+ Drupal.ckeditor.openDialog(editor, Drupal.url(`editor/dialog/image/${editor.config.drupal.format}`), data.existingValues, data.saveCallback, dialogSettings);
}
+
});
if (editor.ui.addButton) {
@@ -225,9 +228,11 @@
});
}
},
- afterInit: function afterInit(editor) {
+
+ afterInit(editor) {
linkCommandIntegrator(editor);
}
+
});
CKEDITOR.plugins.image2.getLinkAttributesParser = function () {
@@ -239,6 +244,6 @@
};
CKEDITOR.plugins.drupalimage = {
- getFocusedWidget: getFocusedWidget
+ getFocusedWidget
};
})(jQuery, Drupal, CKEDITOR);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js b/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js
index 292f7b85b6e462a0a53e2cabcc0e460c428d500e..4efdff440a06949d60767d1cd259a34e9ba81f51 100644
--- a/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js
+++ b/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js
@@ -11,8 +11,8 @@
return element;
}
- var found = null;
- element.forEach(function (el) {
+ let found = null;
+ element.forEach(el => {
if (el.name === name) {
found = el;
return false;
@@ -23,18 +23,19 @@
CKEDITOR.plugins.add('drupalimagecaption', {
requires: 'drupalimage',
- beforeInit: function beforeInit(editor) {
+
+ beforeInit(editor) {
editor.lang.image2.captionPlaceholder = '';
- var placeholderText = editor.config.drupalImageCaption_captionPlaceholderText;
- editor.on('widgetDefinition', function (event) {
- var widgetDefinition = event.data;
+ const placeholderText = editor.config.drupalImageCaption_captionPlaceholderText;
+ editor.on('widgetDefinition', event => {
+ const widgetDefinition = event.data;
if (widgetDefinition.name !== 'image') {
return;
}
- var captionFilterEnabled = editor.config.drupalImageCaption_captionFilterEnabled;
- var alignFilterEnabled = editor.config.drupalImageCaption_alignFilterEnabled;
+ const captionFilterEnabled = editor.config.drupalImageCaption_captionFilterEnabled;
+ const alignFilterEnabled = editor.config.drupalImageCaption_alignFilterEnabled;
CKEDITOR.tools.extend(widgetDefinition.features, {
caption: {
requiredContent: 'img[data-caption]'
@@ -43,21 +44,21 @@
requiredContent: 'img[data-align]'
}
}, true);
- var requiredContent = widgetDefinition.requiredContent.getDefinition();
+ const requiredContent = widgetDefinition.requiredContent.getDefinition();
requiredContent.attributes['data-align'] = '';
requiredContent.attributes['data-caption'] = '';
widgetDefinition.requiredContent = new CKEDITOR.style(requiredContent);
widgetDefinition.allowedContent.img.attributes['!data-align'] = true;
widgetDefinition.allowedContent.img.attributes['!data-caption'] = true;
widgetDefinition.editables.caption.allowedContent = 'a[!href]; em strong cite code br';
- var originalDowncast = widgetDefinition.downcast;
+ const originalDowncast = widgetDefinition.downcast;
widgetDefinition.downcast = function (element) {
- var img = findElementByName(element, 'img');
+ const img = findElementByName(element, 'img');
originalDowncast.call(this, img);
- var caption = this.editables.caption;
- var captionHtml = caption && caption.getData();
- var attrs = img.attributes;
+ const caption = this.editables.caption;
+ const captionHtml = caption && caption.getData();
+ const attrs = img.attributes;
if (captionFilterEnabled) {
if (captionHtml) {
@@ -78,7 +79,7 @@
return img;
};
- var originalUpcast = widgetDefinition.upcast;
+ const originalUpcast = widgetDefinition.upcast;
widgetDefinition.upcast = function (element, data) {
if (element.name !== 'img' || !element.attributes['data-entity-type'] || !element.attributes['data-entity-uuid']) {
@@ -90,14 +91,14 @@
}
element = originalUpcast.call(this, element, data);
- var attrs = element.attributes;
+ const attrs = element.attributes;
if (element.parent.name === 'a') {
element = element.parent;
}
- var retElement = element;
- var caption;
+ let retElement = element;
+ let caption;
if (captionFilterEnabled) {
caption = attrs['data-caption'];
@@ -116,9 +117,9 @@
if (captionFilterEnabled) {
if (element.parent.name === 'p' && caption) {
- var index = element.getIndex();
- var splitBefore = index > 0;
- var splitAfter = index + 1 < element.parent.children.length;
+ let index = element.getIndex();
+ const splitBefore = index > 0;
+ const splitAfter = index + 1 < element.parent.children.length;
if (splitBefore) {
element.parent.split(index);
@@ -135,9 +136,9 @@
}
if (caption) {
- var figure = new CKEDITOR.htmlParser.element('figure');
+ const figure = new CKEDITOR.htmlParser.element('figure');
caption = new CKEDITOR.htmlParser.fragment.fromHtml(caption, 'figcaption');
- var captionFilter = new CKEDITOR.filter(widgetDefinition.editables.caption.allowedContent);
+ const captionFilter = new CKEDITOR.filter(widgetDefinition.editables.caption.allowedContent);
captionFilter.applyTo(caption);
caption.attributes['data-placeholder'] = placeholderText;
element.replaceWith(figure);
@@ -150,7 +151,7 @@
if (alignFilterEnabled) {
if (data.align === 'center' && (!captionFilterEnabled || !caption)) {
- var p = new CKEDITOR.htmlParser.element('p');
+ const p = new CKEDITOR.htmlParser.element('p');
element.replaceWith(p);
p.add(element);
p.addClass(editor.config.image2_alignClasses[1]);
@@ -166,17 +167,17 @@
'data-caption': 'data-caption',
hasCaption: 'hasCaption'
});
- var originalCreateDialogSaveCallback = widgetDefinition._createDialogSaveCallback;
+ const originalCreateDialogSaveCallback = widgetDefinition._createDialogSaveCallback;
widgetDefinition._createDialogSaveCallback = function (editor, widget) {
- var saveCallback = originalCreateDialogSaveCallback.call(this, editor, widget);
+ const saveCallback = originalCreateDialogSaveCallback.call(this, editor, widget);
return function (dialogReturnValues) {
dialogReturnValues.attributes.hasCaption = !!dialogReturnValues.attributes.hasCaption;
- var actualWidget = saveCallback(dialogReturnValues);
+ const actualWidget = saveCallback(dialogReturnValues);
if (dialogReturnValues.attributes.hasCaption) {
actualWidget.editables.caption.setAttribute('data-placeholder', placeholderText);
- var captionElement = actualWidget.editables.caption.$;
+ const captionElement = actualWidget.editables.caption.$;
if (captionElement.childNodes.length === 1 && captionElement.childNodes.item(0).nodeName === 'BR') {
captionElement.removeChild(captionElement.childNodes.item(0));
@@ -186,9 +187,10 @@
};
}, null, null, 20);
},
- afterInit: function afterInit(editor) {
- var disableButtonIfOnWidget = function disableButtonIfOnWidget(evt) {
- var widget = editor.widgets.focused;
+
+ afterInit(editor) {
+ const disableButtonIfOnWidget = function (evt) {
+ const widget = editor.widgets.focused;
if (widget && widget.name === 'image') {
this.setState(CKEDITOR.TRISTATE_DISABLED);
@@ -197,15 +199,16 @@
};
if (editor.plugins.justify && !editor.config.drupalImageCaption_alignFilterEnabled) {
- var cmd;
- var commands = ['justifyleft', 'justifycenter', 'justifyright', 'justifyblock'];
+ let cmd;
+ const commands = ['justifyleft', 'justifycenter', 'justifyright', 'justifyblock'];
- for (var n = 0; n < commands.length; n++) {
+ for (let n = 0; n < commands.length; n++) {
cmd = editor.getCommand(commands[n]);
cmd.contextSensitive = 1;
cmd.on('refresh', disableButtonIfOnWidget, null, null, 4);
}
}
}
+
});
})(CKEDITOR);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/plugins/drupallink/plugin.js b/core/modules/ckeditor/js/plugins/drupallink/plugin.js
index b06b276757ee09bcba0ff121730c3aa70c892808..6dff582a8d82d1200e3fc466c48aaf50162b5234 100644
--- a/core/modules/ckeditor/js/plugins/drupallink/plugin.js
+++ b/core/modules/ckeditor/js/plugins/drupallink/plugin.js
@@ -7,12 +7,12 @@
(function ($, Drupal, drupalSettings, CKEDITOR) {
function parseAttributes(editor, element) {
- var parsedAttributes = {};
- var domElement = element.$;
- var attribute;
- var attributeName;
+ const parsedAttributes = {};
+ const domElement = element.$;
+ let attribute;
+ let attributeName;
- for (var attrIndex = 0; attrIndex < domElement.attributes.length; attrIndex++) {
+ for (let attrIndex = 0; attrIndex < domElement.attributes.length; attrIndex++) {
attribute = domElement.attributes.item(attrIndex);
attributeName = attribute.nodeName.toLowerCase();
@@ -20,7 +20,7 @@
continue;
}
- parsedAttributes[attributeName] = element.data("cke-saved-".concat(attributeName)) || attribute.nodeValue;
+ parsedAttributes[attributeName] = element.data(`cke-saved-${attributeName}`) || attribute.nodeValue;
}
if (parsedAttributes.class) {
@@ -31,29 +31,29 @@
}
function getAttributes(editor, data) {
- var set = {};
- Object.keys(data || {}).forEach(function (attributeName) {
+ const set = {};
+ Object.keys(data || {}).forEach(attributeName => {
set[attributeName] = data[attributeName];
});
set['data-cke-saved-href'] = set.href;
- var removed = {};
- Object.keys(set).forEach(function (s) {
+ const removed = {};
+ Object.keys(set).forEach(s => {
delete removed[s];
});
return {
- set: set,
+ set,
removed: CKEDITOR.tools.objectKeys(removed)
};
}
- var registeredLinkableWidgets = [];
+ const registeredLinkableWidgets = [];
function registerLinkableWidget(widgetName) {
registeredLinkableWidgets.push(widgetName);
}
function getFocusedLinkableWidget(editor) {
- var widget = editor.widgets.focused;
+ const widget = editor.widgets.focused;
if (widget && registeredLinkableWidgets.indexOf(widget.name) !== -1) {
return widget;
@@ -63,14 +63,14 @@
}
function getSelectedLink(editor) {
- var selection = editor.getSelection();
- var selectedElement = selection.getSelectedElement();
+ const selection = editor.getSelection();
+ const selectedElement = selection.getSelectedElement();
if (selectedElement && selectedElement.is('a')) {
return selectedElement;
}
- var range = selection.getRanges(true)[0];
+ const range = selection.getRanges(true)[0];
if (range) {
range.shrink(CKEDITOR.SHRINK_TEXT);
@@ -83,7 +83,8 @@
CKEDITOR.plugins.add('drupallink', {
icons: 'drupallink,drupalunlink',
hidpi: true,
- init: function init(editor) {
+
+ init(editor) {
editor.addCommand('drupallink', {
allowedContent: {
a: {
@@ -103,10 +104,11 @@
wysiwyg: 1
},
canUndo: true,
- exec: function exec(editor) {
- var focusedLinkableWidget = getFocusedLinkableWidget(editor);
- var linkElement = getSelectedLink(editor);
- var existingValues = {};
+
+ exec(editor) {
+ const focusedLinkableWidget = getFocusedLinkableWidget(editor);
+ let linkElement = getSelectedLink(editor);
+ let existingValues = {};
if (linkElement && linkElement.$) {
existingValues = parseAttributes(editor, linkElement);
@@ -114,7 +116,7 @@
existingValues = CKEDITOR.tools.clone(focusedLinkableWidget.data.link);
}
- var saveCallback = function saveCallback(returnValues) {
+ const saveCallback = function (returnValues) {
if (focusedLinkableWidget) {
focusedLinkableWidget.setData('link', CKEDITOR.tools.extend(returnValues.attributes, focusedLinkableWidget.data.link));
editor.fire('saveSnapshot');
@@ -124,16 +126,16 @@
editor.fire('saveSnapshot');
if (!linkElement && returnValues.attributes.href) {
- var selection = editor.getSelection();
- var range = selection.getRanges(1)[0];
+ const selection = editor.getSelection();
+ const range = selection.getRanges(1)[0];
if (range.collapsed) {
- var text = new CKEDITOR.dom.text(returnValues.attributes.href.replace(/^mailto:/, ''), editor.document);
+ const text = new CKEDITOR.dom.text(returnValues.attributes.href.replace(/^mailto:/, ''), editor.document);
range.insertNode(text);
range.selectNodeContents(text);
}
- var style = new CKEDITOR.style({
+ const style = new CKEDITOR.style({
element: 'a',
attributes: returnValues.attributes
});
@@ -142,10 +144,10 @@
range.select();
linkElement = getSelectedLink(editor);
} else if (linkElement) {
- Object.keys(returnValues.attributes || {}).forEach(function (attrName) {
+ Object.keys(returnValues.attributes || {}).forEach(attrName => {
if (returnValues.attributes[attrName].length > 0) {
- var value = returnValues.attributes[attrName];
- linkElement.data("cke-saved-".concat(attrName), value);
+ const value = returnValues.attributes[attrName];
+ linkElement.data(`cke-saved-${attrName}`, value);
linkElement.setAttribute(attrName, value);
} else {
linkElement.removeAttribute(attrName);
@@ -156,12 +158,13 @@
editor.fire('saveSnapshot');
};
- var dialogSettings = {
+ const dialogSettings = {
title: linkElement ? editor.config.drupalLink_dialogTitleEdit : editor.config.drupalLink_dialogTitleAdd,
dialogClass: 'editor-link-dialog'
};
- Drupal.ckeditor.openDialog(editor, Drupal.url("editor/dialog/link/".concat(editor.config.drupal.format)), existingValues, saveCallback, dialogSettings);
+ Drupal.ckeditor.openDialog(editor, Drupal.url(`editor/dialog/link/${editor.config.drupal.format}`), existingValues, saveCallback, dialogSettings);
}
+
});
editor.addCommand('drupalunlink', {
contextSensitive: 1,
@@ -172,16 +175,18 @@
href: ''
}
}),
- exec: function exec(editor) {
- var style = new CKEDITOR.style({
+
+ exec(editor) {
+ const style = new CKEDITOR.style({
element: 'a',
type: CKEDITOR.STYLE_INLINE,
alwaysRemoveElement: 1
});
editor.removeStyle(style);
},
- refresh: function refresh(editor, path) {
- var element = path.lastElement && path.lastElement.getAscendant('a', true);
+
+ refresh(editor, path) {
+ const element = path.lastElement && path.lastElement.getAscendant('a', true);
if (element && element.getName() === 'a' && element.getAttribute('href') && element.getChildCount()) {
this.setState(CKEDITOR.TRISTATE_OFF);
@@ -189,6 +194,7 @@
this.setState(CKEDITOR.TRISTATE_DISABLED);
}
}
+
});
editor.setKeystroke(CKEDITOR.CTRL + 75, 'drupallink');
@@ -203,8 +209,8 @@
});
}
- editor.on('doubleclick', function (evt) {
- var element = getSelectedLink(editor) || evt.data.element;
+ editor.on('doubleclick', evt => {
+ const element = getSelectedLink(editor) || evt.data.element;
if (!element.isReadOnly()) {
if (element.is('a')) {
@@ -232,18 +238,18 @@
}
if (editor.contextMenu) {
- editor.contextMenu.addListener(function (element, selection) {
+ editor.contextMenu.addListener((element, selection) => {
if (!element || element.isReadOnly()) {
return null;
}
- var anchor = getSelectedLink(editor);
+ const anchor = getSelectedLink(editor);
if (!anchor) {
return null;
}
- var menu = {};
+ let menu = {};
if (anchor.getAttribute('href') && anchor.getChildCount()) {
menu = {
@@ -256,10 +262,11 @@
});
}
}
+
});
CKEDITOR.plugins.drupallink = {
parseLinkAttributes: parseAttributes,
getLinkAttributes: getAttributes,
- registerLinkableWidget: registerLinkableWidget
+ registerLinkableWidget
};
})(jQuery, Drupal, drupalSettings, CKEDITOR);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/views/AuralView.js b/core/modules/ckeditor/js/views/AuralView.js
index 6ffd0e324090ed1297766298a76a6fe31e5cde7d..e0fae0c6e153fbab599548fe028f91b89e65c952 100644
--- a/core/modules/ckeditor/js/views/AuralView.js
+++ b/core/modules/ckeditor/js/views/AuralView.js
@@ -14,15 +14,17 @@
'focus .ckeditor-button-separator a': 'onFocus',
'focus .ckeditor-toolbar-group': 'onFocus'
},
- initialize: function initialize() {
+
+ initialize() {
this.listenTo(this.model, 'change:isDirty', this.announceMove);
},
- announceMove: function announceMove(model, isDirty) {
+
+ announceMove(model, isDirty) {
if (!isDirty) {
- var item = document.activeElement || null;
+ const item = document.activeElement || null;
if (item) {
- var $item = $(item);
+ const $item = $(item);
if ($item.hasClass('ckeditor-toolbar-group')) {
this.announceButtonGroupPosition($item);
@@ -32,11 +34,12 @@
}
}
},
- onFocus: function onFocus(event) {
+
+ onFocus(event) {
event.stopPropagation();
- var $originalTarget = $(event.target);
- var $currentTarget = $(event.currentTarget);
- var $parent = $currentTarget.parent();
+ const $originalTarget = $(event.target);
+ const $currentTarget = $(event.currentTarget);
+ const $parent = $currentTarget.parent();
if ($parent.hasClass('ckeditor-button') || $parent.hasClass('ckeditor-button-separator')) {
this.announceButtonPosition($currentTarget.parent());
@@ -44,15 +47,16 @@
this.announceButtonGroupPosition($currentTarget);
}
},
- announceButtonGroupPosition: function announceButtonGroupPosition($group) {
- var $groups = $group.parent().children();
- var $row = $group.closest('.ckeditor-row');
- var $rows = $row.parent().children();
- var position = $groups.index($group) + 1;
- var positionCount = $groups.not('.placeholder').length;
- var row = $rows.index($row) + 1;
- var rowCount = $rows.not('.placeholder').length;
- var text = Drupal.t('@groupName button group in position @position of @positionCount in row @row of @rowCount.', {
+
+ announceButtonGroupPosition($group) {
+ const $groups = $group.parent().children();
+ const $row = $group.closest('.ckeditor-row');
+ const $rows = $row.parent().children();
+ const position = $groups.index($group) + 1;
+ const positionCount = $groups.not('.placeholder').length;
+ const row = $rows.index($row) + 1;
+ const rowCount = $rows.not('.placeholder').length;
+ let text = Drupal.t('@groupName button group in position @position of @positionCount in row @row of @rowCount.', {
'@groupName': $group.attr('data-drupal-ckeditor-toolbar-group-name'),
'@position': position,
'@positionCount': positionCount,
@@ -67,27 +71,28 @@
Drupal.announce(text, 'assertive');
},
- announceButtonPosition: function announceButtonPosition($button) {
- var $row = $button.closest('.ckeditor-row');
- var $rows = $row.parent().children();
- var $buttons = $button.closest('.ckeditor-buttons').children();
- var $group = $button.closest('.ckeditor-toolbar-group');
- var $groups = $group.parent().children();
- var groupPosition = $groups.index($group) + 1;
- var groupPositionCount = $groups.not('.placeholder').length;
- var position = $buttons.index($button) + 1;
- var positionCount = $buttons.length;
- var row = $rows.index($row) + 1;
- var rowCount = $rows.not('.placeholder').length;
- var type = $button.attr('data-drupal-ckeditor-type') === 'separator' ? '' : Drupal.t('button');
- var text;
+
+ announceButtonPosition($button) {
+ const $row = $button.closest('.ckeditor-row');
+ const $rows = $row.parent().children();
+ const $buttons = $button.closest('.ckeditor-buttons').children();
+ const $group = $button.closest('.ckeditor-toolbar-group');
+ const $groups = $group.parent().children();
+ const groupPosition = $groups.index($group) + 1;
+ const groupPositionCount = $groups.not('.placeholder').length;
+ const position = $buttons.index($button) + 1;
+ const positionCount = $buttons.length;
+ const row = $rows.index($row) + 1;
+ const rowCount = $rows.not('.placeholder').length;
+ const type = $button.attr('data-drupal-ckeditor-type') === 'separator' ? '' : Drupal.t('button');
+ let text;
if ($button.closest('.ckeditor-toolbar-disabled').length > 0) {
text = Drupal.t('@name @type.', {
'@name': $button.children().attr('aria-label'),
'@type': type
});
- text += "\n".concat(Drupal.t('Press the down arrow key to activate.'));
+ text += `\n${Drupal.t('Press the down arrow key to activate.')}`;
Drupal.announce(text, 'assertive');
} else if ($group.not('.placeholder').length === 1) {
text = Drupal.t('@name @type in position @position of @positionCount in @groupName button group in row @row of @rowCount.', {
@@ -113,50 +118,53 @@
Drupal.announce(text, 'assertive');
}
},
- announceButtonHelp: function announceButtonHelp(event) {
- var $link = $(event.currentTarget);
- var $button = $link.parent();
- var enabled = $button.closest('.ckeditor-toolbar-active').length > 0;
- var message;
+
+ announceButtonHelp(event) {
+ const $link = $(event.currentTarget);
+ const $button = $link.parent();
+ const enabled = $button.closest('.ckeditor-toolbar-active').length > 0;
+ let message;
if (enabled) {
message = Drupal.t('The "@name" button is currently enabled.', {
'@name': $link.attr('aria-label')
});
- message += "\n".concat(Drupal.t('Use the keyboard arrow keys to change the position of this button.'));
- message += "\n".concat(Drupal.t('Press the up arrow key on the top row to disable the button.'));
+ message += `\n${Drupal.t('Use the keyboard arrow keys to change the position of this button.')}`;
+ message += `\n${Drupal.t('Press the up arrow key on the top row to disable the button.')}`;
} else {
message = Drupal.t('The "@name" button is currently disabled.', {
'@name': $link.attr('aria-label')
});
- message += "\n".concat(Drupal.t('Use the down arrow key to move this button into the active toolbar.'));
+ message += `\n${Drupal.t('Use the down arrow key to move this button into the active toolbar.')}`;
}
Drupal.announce(message);
event.preventDefault();
},
- announceSeparatorHelp: function announceSeparatorHelp(event) {
- var $link = $(event.currentTarget);
- var $button = $link.parent();
- var enabled = $button.closest('.ckeditor-toolbar-active').length > 0;
- var message;
+
+ announceSeparatorHelp(event) {
+ const $link = $(event.currentTarget);
+ const $button = $link.parent();
+ const enabled = $button.closest('.ckeditor-toolbar-active').length > 0;
+ let message;
if (enabled) {
message = Drupal.t('This @name is currently enabled.', {
'@name': $link.attr('aria-label')
});
- message += "\n".concat(Drupal.t('Use the keyboard arrow keys to change the position of this separator.'));
+ message += `\n${Drupal.t('Use the keyboard arrow keys to change the position of this separator.')}`;
} else {
message = Drupal.t('Separators are used to visually split individual buttons.');
- message += "\n".concat(Drupal.t('This @name is currently disabled.', {
+ message += `\n${Drupal.t('This @name is currently disabled.', {
'@name': $link.attr('aria-label')
- }));
- message += "\n".concat(Drupal.t('Use the down arrow key to move this separator into the active toolbar.'));
- message += "\n".concat(Drupal.t('You may add multiple separators to each button group.'));
+ })}`;
+ message += `\n${Drupal.t('Use the down arrow key to move this separator into the active toolbar.')}`;
+ message += `\n${Drupal.t('You may add multiple separators to each button group.')}`;
}
Drupal.announce(message);
event.preventDefault();
}
+
});
})(Drupal, Backbone, jQuery);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/views/ControllerView.js b/core/modules/ckeditor/js/views/ControllerView.js
index 3194d62f65619a05a8968f507aa88ff95cd33a4c..d2f5cfb8b026972c91a145db38010fe46d6dd026 100644
--- a/core/modules/ckeditor/js/views/ControllerView.js
+++ b/core/modules/ckeditor/js/views/ControllerView.js
@@ -8,23 +8,25 @@
(function ($, Drupal, Backbone, CKEDITOR, _) {
Drupal.ckeditor.ControllerView = Backbone.View.extend({
events: {},
- initialize: function initialize() {
+
+ initialize() {
this.getCKEditorFeatures(this.model.get('hiddenEditorConfig'), this.disableFeaturesDisallowedByFilters.bind(this));
this.model.listenTo(this.model, 'change:activeEditorConfig', this.model.sync);
this.listenTo(this.model, 'change:isDirty', this.parseEditorDOM);
},
- parseEditorDOM: function parseEditorDOM(model, isDirty, options) {
+
+ parseEditorDOM(model, isDirty, options) {
if (isDirty) {
- var currentConfig = this.model.get('activeEditorConfig');
- var rows = [];
+ const currentConfig = this.model.get('activeEditorConfig');
+ const rows = [];
this.$el.find('.ckeditor-active-toolbar-configuration').children('.ckeditor-row').each(function () {
- var groups = [];
+ const groups = [];
$(this).find('.ckeditor-toolbar-group').each(function () {
- var $group = $(this);
- var $buttons = $group.find('.ckeditor-button');
+ const $group = $(this);
+ const $buttons = $group.find('.ckeditor-button');
if ($buttons.length) {
- var group = {
+ const group = {
name: $group.attr('data-drupal-ckeditor-toolbar-group-name'),
items: []
};
@@ -43,8 +45,8 @@
this.model.set('isDirty', false);
if (options.broadcast !== false) {
- var prev = this.getButtonList(currentConfig);
- var next = this.getButtonList(rows);
+ const prev = this.getButtonList(currentConfig);
+ const next = this.getButtonList(rows);
if (prev.length !== next.length) {
this.$el.find('.ckeditor-toolbar-active').trigger('CKEditorToolbarChanged', [prev.length < next.length ? 'added' : 'removed', _.difference(_.union(prev, next), _.intersection(prev, next))[0]]);
@@ -52,16 +54,17 @@
}
}
},
- getCKEditorFeatures: function getCKEditorFeatures(CKEditorConfig, callback) {
- var getProperties = function getProperties(CKEPropertiesList) {
+
+ getCKEditorFeatures(CKEditorConfig, callback) {
+ const getProperties = function (CKEPropertiesList) {
return _.isObject(CKEPropertiesList) ? _.keys(CKEPropertiesList) : [];
};
- var convertCKERulesToEditorFeature = function convertCKERulesToEditorFeature(feature, CKEFeatureRules) {
- for (var i = 0; i < CKEFeatureRules.length; i++) {
- var CKERule = CKEFeatureRules[i];
- var rule = new Drupal.EditorFeatureHTMLRule();
- var tags = getProperties(CKERule.elements);
+ const convertCKERulesToEditorFeature = function (feature, CKEFeatureRules) {
+ for (let i = 0; i < CKEFeatureRules.length; i++) {
+ const CKERule = CKEFeatureRules[i];
+ const rule = new Drupal.EditorFeatureHTMLRule();
+ const tags = getProperties(CKERule.elements);
rule.required.tags = CKERule.propertiesOnly ? [] : tags;
rule.allowed.tags = tags;
rule.required.attributes = getProperties(CKERule.requiredAttributes);
@@ -75,30 +78,30 @@
}
};
- var hiddenCKEditorID = 'ckeditor-hidden';
+ const hiddenCKEditorID = 'ckeditor-hidden';
if (CKEDITOR.instances[hiddenCKEditorID]) {
CKEDITOR.instances[hiddenCKEditorID].destroy(true);
}
- var hiddenEditorConfig = this.model.get('hiddenEditorConfig');
+ const hiddenEditorConfig = this.model.get('hiddenEditorConfig');
if (hiddenEditorConfig.drupalExternalPlugins) {
- var externalPlugins = hiddenEditorConfig.drupalExternalPlugins;
- Object.keys(externalPlugins || {}).forEach(function (pluginName) {
+ const externalPlugins = hiddenEditorConfig.drupalExternalPlugins;
+ Object.keys(externalPlugins || {}).forEach(pluginName => {
CKEDITOR.plugins.addExternal(pluginName, externalPlugins[pluginName], '');
});
}
- CKEDITOR.inline($("#".concat(hiddenCKEditorID)).get(0), CKEditorConfig);
- CKEDITOR.once('instanceReady', function (e) {
+ CKEDITOR.inline($(`#${hiddenCKEditorID}`).get(0), CKEditorConfig);
+ CKEDITOR.once('instanceReady', e => {
if (e.editor.name === hiddenCKEditorID) {
- var CKEFeatureRulesMap = {};
- var rules = e.editor.filter.allowedContent;
- var rule;
- var name;
+ const CKEFeatureRulesMap = {};
+ const rules = e.editor.filter.allowedContent;
+ let rule;
+ let name;
- for (var i = 0; i < rules.length; i++) {
+ for (let i = 0; i < rules.length; i++) {
rule = rules[i];
name = rule.featureName || ':(';
@@ -109,13 +112,13 @@
CKEFeatureRulesMap[name].push(rule);
}
- var features = {};
- var buttonsToFeatures = {};
- Object.keys(CKEFeatureRulesMap).forEach(function (featureName) {
- var feature = new Drupal.EditorFeature(featureName);
+ const features = {};
+ const buttonsToFeatures = {};
+ Object.keys(CKEFeatureRulesMap).forEach(featureName => {
+ const feature = new Drupal.EditorFeature(featureName);
convertCKERulesToEditorFeature(feature, CKEFeatureRulesMap[featureName]);
features[featureName] = feature;
- var command = e.editor.getCommand(featureName);
+ const command = e.editor.getCommand(featureName);
if (command) {
buttonsToFeatures[command.uiItems[0].name] = featureName;
@@ -125,18 +128,19 @@
}
});
},
- getFeatureForButton: function getFeatureForButton(button) {
+
+ getFeatureForButton(button) {
if (button === '-') {
return false;
}
- var featureName = this.model.get('buttonsToFeatures')[button.toLowerCase()];
+ let featureName = this.model.get('buttonsToFeatures')[button.toLowerCase()];
if (!featureName) {
featureName = button.toLowerCase();
}
- var featuresMetadata = this.model.get('featuresMetadata');
+ const featuresMetadata = this.model.get('featuresMetadata');
if (!featuresMetadata[featureName]) {
featuresMetadata[featureName] = new Drupal.EditorFeature(featureName);
@@ -145,27 +149,28 @@
return featuresMetadata[featureName];
},
- disableFeaturesDisallowedByFilters: function disableFeaturesDisallowedByFilters(features, buttonsToFeatures) {
+
+ disableFeaturesDisallowedByFilters(features, buttonsToFeatures) {
this.model.set('featuresMetadata', features);
this.model.set('buttonsToFeatures', buttonsToFeatures);
this.broadcastConfigurationChanges(this.$el);
- var existingButtons = [];
+ let existingButtons = [];
- var buttonGroups = _.flatten(this.model.get('activeEditorConfig'));
+ const buttonGroups = _.flatten(this.model.get('activeEditorConfig'));
- for (var i = 0; i < buttonGroups.length; i++) {
- var buttons = buttonGroups[i].items;
+ for (let i = 0; i < buttonGroups.length; i++) {
+ const buttons = buttonGroups[i].items;
- for (var k = 0; k < buttons.length; k++) {
+ for (let k = 0; k < buttons.length; k++) {
existingButtons.push(buttons[k]);
}
}
existingButtons = _.unique(existingButtons);
- for (var n = 0; n < existingButtons.length; n++) {
- var button = existingButtons[n];
- var feature = this.getFeatureForButton(button);
+ for (let n = 0; n < existingButtons.length; n++) {
+ const button = existingButtons[n];
+ const feature = this.getFeatureForButton(button);
if (feature === false) {
continue;
@@ -174,7 +179,7 @@
if (Drupal.editorConfiguration.featureIsAllowedByFilters(feature)) {
this.$el.find('.ckeditor-toolbar-active').trigger('CKEditorToolbarChanged', ['added', existingButtons[n]]);
} else {
- $(".ckeditor-toolbar-active li[data-drupal-ckeditor-button-name=\"".concat(button, "\"]")).detach().appendTo('.ckeditor-toolbar-disabled > .ckeditor-toolbar-available > ul');
+ $(`.ckeditor-toolbar-active li[data-drupal-ckeditor-button-name="${button}"]`).detach().appendTo('.ckeditor-toolbar-disabled > .ckeditor-toolbar-available > ul');
this.model.set({
isDirty: true
}, {
@@ -183,28 +188,29 @@
}
}
},
- broadcastConfigurationChanges: function broadcastConfigurationChanges($ckeditorToolbar) {
- var view = this;
- var hiddenEditorConfig = this.model.get('hiddenEditorConfig');
- var getFeatureForButton = this.getFeatureForButton.bind(this);
- var getCKEditorFeatures = this.getCKEditorFeatures.bind(this);
- $ckeditorToolbar.find('.ckeditor-toolbar-active').on('CKEditorToolbarChanged.ckeditorAdmin', function (event, action, button) {
- var feature = getFeatureForButton(button);
+
+ broadcastConfigurationChanges($ckeditorToolbar) {
+ const view = this;
+ const hiddenEditorConfig = this.model.get('hiddenEditorConfig');
+ const getFeatureForButton = this.getFeatureForButton.bind(this);
+ const getCKEditorFeatures = this.getCKEditorFeatures.bind(this);
+ $ckeditorToolbar.find('.ckeditor-toolbar-active').on('CKEditorToolbarChanged.ckeditorAdmin', (event, action, button) => {
+ const feature = getFeatureForButton(button);
if (feature === false) {
return;
}
- var configEvent = action === 'added' ? 'addedFeature' : 'removedFeature';
+ const configEvent = action === 'added' ? 'addedFeature' : 'removedFeature';
Drupal.editorConfiguration[configEvent](feature);
- }).on('CKEditorPluginSettingsChanged.ckeditorAdmin', function (event, settingsChanges) {
- Object.keys(settingsChanges || {}).forEach(function (key) {
+ }).on('CKEditorPluginSettingsChanged.ckeditorAdmin', (event, settingsChanges) => {
+ Object.keys(settingsChanges || {}).forEach(key => {
hiddenEditorConfig[key] = settingsChanges[key];
});
- getCKEditorFeatures(hiddenEditorConfig, function (features) {
- var featuresMetadata = view.model.get('featuresMetadata');
- Object.keys(features || {}).forEach(function (name) {
- var feature = features[name];
+ getCKEditorFeatures(hiddenEditorConfig, features => {
+ const featuresMetadata = view.model.get('featuresMetadata');
+ Object.keys(features || {}).forEach(name => {
+ const feature = features[name];
if (featuresMetadata.hasOwnProperty(name) && !_.isEqual(featuresMetadata[name], feature)) {
Drupal.editorConfiguration.modifiedFeature(feature);
@@ -214,15 +220,17 @@
});
});
},
- getButtonList: function getButtonList(config) {
- var buttons = [];
+
+ getButtonList(config) {
+ const buttons = [];
config = _.flatten(config);
- config.forEach(function (group) {
- group.items.forEach(function (button) {
+ config.forEach(group => {
+ group.items.forEach(button => {
buttons.push(button);
});
});
return _.without(buttons, '-');
}
+
});
})(jQuery, Drupal, Backbone, CKEDITOR, _);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/views/KeyboardView.js b/core/modules/ckeditor/js/views/KeyboardView.js
index c1761ac626f79282638f3128fabc413fa4e49a3d..76f0a98d4f100959411901a96a6cdc2b7acb8fee 100644
--- a/core/modules/ckeditor/js/views/KeyboardView.js
+++ b/core/modules/ckeditor/js/views/KeyboardView.js
@@ -7,31 +7,33 @@
(function ($, Drupal, Backbone, _) {
Drupal.ckeditor.KeyboardView = Backbone.View.extend({
- initialize: function initialize() {
+ initialize() {
this.$el.on('keydown.ckeditor', '.ckeditor-buttons a, .ckeditor-multiple-buttons a', this.onPressButton.bind(this));
this.$el.on('keydown.ckeditor', '[data-drupal-ckeditor-type="group"]', this.onPressGroup.bind(this));
},
- render: function render() {},
- onPressButton: function onPressButton(event) {
- var upDownKeys = [38, 63232, 40, 63233];
- var leftRightKeys = [37, 63234, 39, 63235];
+
+ render() {},
+
+ onPressButton(event) {
+ const upDownKeys = [38, 63232, 40, 63233];
+ const leftRightKeys = [37, 63234, 39, 63235];
if (event.keyCode === 13) {
event.stopPropagation();
}
if (_.indexOf(_.union(upDownKeys, leftRightKeys), event.keyCode) > -1) {
- var view = this;
- var $target = $(event.currentTarget);
- var $button = $target.parent();
- var $container = $button.parent();
- var $group = $button.closest('.ckeditor-toolbar-group');
- var $row;
- var containerType = $container.data('drupal-ckeditor-button-sorting');
- var $availableButtons = this.$el.find('[data-drupal-ckeditor-button-sorting="source"]');
- var $activeButtons = this.$el.find('.ckeditor-toolbar-active');
- var $originalGroup = $group;
- var dir;
+ let view = this;
+ let $target = $(event.currentTarget);
+ let $button = $target.parent();
+ const $container = $button.parent();
+ let $group = $button.closest('.ckeditor-toolbar-group');
+ let $row;
+ const containerType = $container.data('drupal-ckeditor-button-sorting');
+ const $availableButtons = this.$el.find('[data-drupal-ckeditor-button-sorting="source"]');
+ const $activeButtons = this.$el.find('.ckeditor-toolbar-active');
+ const $originalGroup = $group;
+ let dir;
if (containerType === 'source') {
if (_.indexOf([40, 63233], event.keyCode) > -1) {
@@ -39,8 +41,8 @@
}
} else if (containerType === 'target') {
if (_.indexOf(leftRightKeys, event.keyCode) > -1) {
- var $siblings = $container.children();
- var index = $siblings.index($button);
+ const $siblings = $container.children();
+ const index = $siblings.index($button);
if (_.indexOf([37, 63234], event.keyCode) > -1) {
if (index > 0) {
@@ -85,7 +87,7 @@
}
view = this;
- Drupal.ckeditor.registerButtonMove(this, $button, function (result) {
+ Drupal.ckeditor.registerButtonMove(this, $button, result => {
if (!result && $originalGroup) {
$originalGroup.find('.ckeditor-buttons').append($button);
}
@@ -96,13 +98,14 @@
event.stopPropagation();
}
},
- onPressGroup: function onPressGroup(event) {
- var upDownKeys = [38, 63232, 40, 63233];
- var leftRightKeys = [37, 63234, 39, 63235];
+
+ onPressGroup(event) {
+ const upDownKeys = [38, 63232, 40, 63233];
+ const leftRightKeys = [37, 63234, 39, 63235];
if (event.keyCode === 13) {
- var view = this;
- window.setTimeout(function () {
+ const view = this;
+ window.setTimeout(() => {
Drupal.ckeditor.openGroupNameDialog(view, $(event.currentTarget));
}, 0);
event.preventDefault();
@@ -110,11 +113,11 @@
}
if (_.indexOf(_.union(upDownKeys, leftRightKeys), event.keyCode) > -1) {
- var $group = $(event.currentTarget);
- var $container = $group.parent();
- var $siblings = $container.children();
- var index;
- var dir;
+ const $group = $(event.currentTarget);
+ const $container = $group.parent();
+ const $siblings = $container.children();
+ let index;
+ let dir;
if (_.indexOf(leftRightKeys, event.keyCode) > -1) {
index = $siblings.index($group);
@@ -123,7 +126,7 @@
if (index > 0) {
$group.insertBefore($siblings.eq(index - 1));
} else {
- var $rowChildElement = $container.closest('.ckeditor-row').prev().find('.ckeditor-toolbar-groups').children().eq(-1);
+ const $rowChildElement = $container.closest('.ckeditor-row').prev().find('.ckeditor-toolbar-groups').children().eq(-1);
$group.insertBefore($rowChildElement);
}
} else if (_.indexOf([39, 63235], event.keyCode) > -1) {
@@ -144,5 +147,6 @@
event.stopPropagation();
}
}
+
});
})(jQuery, Drupal, Backbone, _);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/views/VisualView.js b/core/modules/ckeditor/js/views/VisualView.js
index bf53c5941dadb234200821cab5ba42327b516b7d..a8b06d11afbef3dc66d6a64d3168080157c455db 100644
--- a/core/modules/ckeditor/js/views/VisualView.js
+++ b/core/modules/ckeditor/js/views/VisualView.js
@@ -12,15 +12,17 @@
'click .ckeditor-groupnames-toggle': 'onGroupNamesToggleClick',
'click .ckeditor-add-new-group button': 'onAddGroupButtonClick'
},
- initialize: function initialize() {
+
+ initialize() {
this.listenTo(this.model, 'change:isDirty change:groupNamesVisible', this.render);
$(Drupal.theme('ckeditorButtonGroupNamesToggle')).prependTo(this.$el.find('#ckeditor-active-toolbar').parent());
this.render();
},
- render: function render(model, value, changedAttributes) {
+
+ render(model, value, changedAttributes) {
this.insertPlaceholders();
this.applySorting();
- var groupNamesVisible = this.model.get('groupNamesVisible');
+ let groupNamesVisible = this.model.get('groupNamesVisible');
if (changedAttributes && changedAttributes.changes && changedAttributes.changes.isDirty) {
this.model.set({
@@ -35,17 +37,20 @@
this.$el.find('.ckeditor-groupnames-toggle').text(groupNamesVisible ? Drupal.t('Hide group names') : Drupal.t('Show group names')).attr('aria-pressed', groupNamesVisible);
return this;
},
- onGroupNameClick: function onGroupNameClick(event) {
- var $group = $(event.currentTarget).closest('.ckeditor-toolbar-group');
+
+ onGroupNameClick(event) {
+ const $group = $(event.currentTarget).closest('.ckeditor-toolbar-group');
Drupal.ckeditor.openGroupNameDialog(this, $group);
event.stopPropagation();
event.preventDefault();
},
- onGroupNamesToggleClick: function onGroupNamesToggleClick(event) {
+
+ onGroupNamesToggleClick(event) {
this.model.set('groupNamesVisible', !this.model.get('groupNamesVisible'));
event.preventDefault();
},
- onAddGroupButtonClick: function onAddGroupButtonClick(event) {
+
+ onAddGroupButtonClick(event) {
function insertNewGroup(success, $group) {
if (success) {
$group.appendTo($(event.currentTarget).closest('.ckeditor-row').children('.ckeditor-toolbar-groups'));
@@ -56,64 +61,68 @@
Drupal.ckeditor.openGroupNameDialog(this, $(Drupal.theme('ckeditorToolbarGroup')), insertNewGroup);
event.preventDefault();
},
- endGroupDrag: function endGroupDrag(event) {
- var $item = $(event.item);
+
+ endGroupDrag(event) {
+ const $item = $(event.item);
Drupal.ckeditor.registerGroupMove(this, $item);
},
- startButtonDrag: function startButtonDrag(event) {
+
+ startButtonDrag(event) {
this.$el.find('a:focus').trigger('blur');
this.model.set('groupNamesVisible', true);
},
- endButtonDrag: function endButtonDrag(event) {
- var $item = $(event.item);
- Drupal.ckeditor.registerButtonMove(this, $item, function (success) {
+
+ endButtonDrag(event) {
+ const $item = $(event.item);
+ Drupal.ckeditor.registerButtonMove(this, $item, success => {
$item.find('a').trigger('focus');
});
},
- applySorting: function applySorting() {
- var _this = this;
- Array.prototype.forEach.call(this.el.querySelectorAll('.ckeditor-buttons:not(.js-sortable)'), function (buttons) {
+ applySorting() {
+ Array.prototype.forEach.call(this.el.querySelectorAll('.ckeditor-buttons:not(.js-sortable)'), buttons => {
buttons.classList.add('js-sortable');
Sortable.create(buttons, {
ghostClass: 'ckeditor-button-placeholder',
group: 'ckeditor-buttons',
- onStart: _this.startButtonDrag.bind(_this),
- onEnd: _this.endButtonDrag.bind(_this)
+ onStart: this.startButtonDrag.bind(this),
+ onEnd: this.endButtonDrag.bind(this)
});
});
- Array.prototype.forEach.call(this.el.querySelectorAll('.ckeditor-toolbar-groups:not(.js-sortable)'), function (buttons) {
+ Array.prototype.forEach.call(this.el.querySelectorAll('.ckeditor-toolbar-groups:not(.js-sortable)'), buttons => {
buttons.classList.add('js-sortable');
Sortable.create(buttons, {
ghostClass: 'ckeditor-toolbar-group-placeholder',
- onEnd: _this.endGroupDrag.bind(_this)
+ onEnd: this.endGroupDrag.bind(this)
});
});
- Array.prototype.forEach.call(this.el.querySelectorAll('.ckeditor-multiple-buttons:not(.js-sortable)'), function (buttons) {
+ Array.prototype.forEach.call(this.el.querySelectorAll('.ckeditor-multiple-buttons:not(.js-sortable)'), buttons => {
buttons.classList.add('js-sortable');
Sortable.create(buttons, {
group: {
name: 'ckeditor-buttons',
pull: 'clone'
},
- onEnd: _this.endButtonDrag.bind(_this)
+ onEnd: this.endButtonDrag.bind(this)
});
});
},
- insertPlaceholders: function insertPlaceholders() {
+
+ insertPlaceholders() {
this.insertPlaceholderRow();
this.insertNewGroupButtons();
},
- insertPlaceholderRow: function insertPlaceholderRow() {
- var $rows = this.$el.find('.ckeditor-row');
+
+ insertPlaceholderRow() {
+ let $rows = this.$el.find('.ckeditor-row');
if (!$rows.eq(-1).hasClass('placeholder')) {
this.$el.find('.ckeditor-toolbar-active').children('.ckeditor-active-toolbar-configuration').append(Drupal.theme('ckeditorRow'));
}
$rows = this.$el.find('.ckeditor-row');
- var len = $rows.length;
- $rows.filter(function (index, row) {
+ const len = $rows.length;
+ $rows.filter((index, row) => {
if (index + 1 === len) {
return false;
}
@@ -121,11 +130,12 @@
return $(row).find('.ckeditor-toolbar-group').not('.placeholder').length === 0;
}).remove();
},
- insertNewGroupButtons: function insertNewGroupButtons() {
+
+ insertNewGroupButtons() {
this.$el.find('.ckeditor-row').each(function () {
- var $row = $(this);
- var $groups = $row.find('.ckeditor-toolbar-group');
- var $button = $row.find('.ckeditor-add-new-group');
+ const $row = $(this);
+ const $groups = $row.find('.ckeditor-toolbar-group');
+ const $button = $row.find('.ckeditor-add-new-group');
if ($button.length === 0) {
$row.children('.ckeditor-toolbar-groups').append(Drupal.theme('ckeditorNewButtonGroup'));
@@ -134,5 +144,6 @@
}
});
}
+
});
})(Drupal, Backbone, jQuery, Sortable);
\ No newline at end of file
diff --git a/core/modules/ckeditor/tests/modules/js/ajax-css.js b/core/modules/ckeditor/tests/modules/js/ajax-css.js
index bb7ba0fb9a76e57f55c0bbc39f91c5024dfde220..9fc31459985b659e455d74163033730278c69a49 100644
--- a/core/modules/ckeditor/tests/modules/js/ajax-css.js
+++ b/core/modules/ckeditor/tests/modules/js/ajax-css.js
@@ -7,10 +7,11 @@
(function (Drupal, ckeditor, editorSettings, $) {
Drupal.behaviors.ajaxCssForm = {
- attach: function attach(context) {
+ attach(context) {
$(context).find('#edit-inline').not('[contenteditable]').each(function () {
ckeditor.attachInlineEditor(this, editorSettings.formats.test_format);
});
}
+
};
})(Drupal, Drupal.editors.ckeditor, drupalSettings.editor, jQuery);
\ No newline at end of file
diff --git a/core/modules/ckeditor5/js/build/drupalEmphasis.js b/core/modules/ckeditor5/js/build/drupalEmphasis.js
index 7aa31a0b7fc954ac6c35c5fd072599f642f8297b..0ee238a1f69a4e0951e84fab20b19ec640e54a2d 100644
--- a/core/modules/ckeditor5/js/build/drupalEmphasis.js
+++ b/core/modules/ckeditor5/js/build/drupalEmphasis.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.drupalEmphasis=t())}(self,(function(){return function(){var e={"ckeditor5/src/core.js":function(e,t,r){e.exports=r("dll-reference CKEditor5.dll")("./src/core.js")},"dll-reference CKEditor5.dll":function(e){"use strict";e.exports=CKEditor5.dll}},t={};function r(o){var i=t[o];if(void 0!==i)return i.exports;var n=t[o]={exports:{}};return e[o](n,n.exports,r),n.exports}r.d=function(e,t){for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o={};return function(){"use strict";r.d(o,{default:function(){return s}});var e=r("ckeditor5/src/core.js");class t extends e.Plugin{static get pluginName(){return"DrupalEmphasisEditing"}init(){this.editor.conversion.for("downcast").attributeToElement({model:"italic",view:"em",converterPriority:"high"})}}var i=t;class n extends e.Plugin{static get requires(){return[i]}static get pluginName(){return"DrupalEmphasis"}}var s={DrupalEmphasis:n}}(),o=o.default}()}));
\ No newline at end of file
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.drupalEmphasis=t())}(self,(function(){return(()=>{var e={"ckeditor5/src/core.js":(e,t,r)=>{e.exports=r("dll-reference CKEditor5.dll")("./src/core.js")},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},t={};function r(o){var i=t[o];if(void 0!==i)return i.exports;var s=t[o]={exports:{}};return e[o](s,s.exports,r),s.exports}r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var o={};return(()=>{"use strict";r.d(o,{default:()=>n});var e=r("ckeditor5/src/core.js");class t extends e.Plugin{static get pluginName(){return"DrupalEmphasisEditing"}init(){this.editor.conversion.for("downcast").attributeToElement({model:"italic",view:"em",converterPriority:"high"})}}const i=t;class s extends e.Plugin{static get requires(){return[i]}static get pluginName(){return"DrupalEmphasis"}}const n={DrupalEmphasis:s}})(),o=o.default})()}));
\ No newline at end of file
diff --git a/core/modules/ckeditor5/js/build/drupalHtmlEngine.js b/core/modules/ckeditor5/js/build/drupalHtmlEngine.js
index 448883cc96838bd3db20246426614890dcae08e3..823e0e86ef8c29aa6bfe8212b3e34353f26a8b8b 100644
--- a/core/modules/ckeditor5/js/build/drupalHtmlEngine.js
+++ b/core/modules/ckeditor5/js/build/drupalHtmlEngine.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.drupalHtmlEngine=t())}(self,(function(){return function(){var e={"ckeditor5/src/core.js":function(e,t,n){e.exports=n("dll-reference CKEditor5.dll")("./src/core.js")},"dll-reference CKEditor5.dll":function(e){"use strict";e.exports=CKEditor5.dll}},t={};function n(r){var p=t[r];if(void 0!==p)return p.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var r={};return function(){"use strict";n.d(r,{default:function(){return o}});var e=n("ckeditor5/src/core.js");class t{constructor(){this.chunks=[],this.selfClosingTags=["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]}build(){return this.chunks.join("")}appendNode(e){e.nodeType===Node.TEXT_NODE?this._appendText(e):e.nodeType===Node.ELEMENT_NODE?this._appendElement(e):e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&this._appendChildren(e)}_appendElement(e){const t=e.nodeName.toLowerCase();this._append("<"),this._append(t),this._appendAttributes(e),this._append(">"),this.selfClosingTags.includes(t)||(this._appendChildren(e),this._append("</"),this._append(t),this._append(">"))}_appendChildren(e){Object.keys(e.childNodes).forEach((t=>{this.appendNode(e.childNodes[t])}))}_appendAttributes(e){Object.keys(e.attributes).forEach((t=>{this._append(" "),this._append(e.attributes[t].name),this._append('="'),this._append(this.constructor._escapeAttribute(e.attributes[t].value)),this._append('"')}))}_appendText(e){const t=document.implementation.createHTMLDocument("").createElement("p");t.textContent=e.textContent,this._append(t.innerHTML)}_append(e){this.chunks.push(e)}static _escapeAttribute(e){return e.replace(/&/g,"&").replace(/'/g,"'").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">").replace(/\r\n/g," ").replace(/[\r\n]/g," ")}}class p{getHtml(e){const n=new t;return n.appendNode(e),n.build()}}class i extends e.Plugin{init(){this.editor.data.processor.htmlWriter=new p}static get pluginName(){return"DrupalHtmlEngine"}}var o={DrupalHtmlEngine:i}}(),r=r.default}()}));
\ No newline at end of file
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.drupalHtmlEngine=t())}(self,(function(){return(()=>{var e={"ckeditor5/src/core.js":(e,t,r)=>{e.exports=r("dll-reference CKEditor5.dll")("./src/core.js")},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},t={};function r(n){var p=t[n];if(void 0!==p)return p.exports;var s=t[n]={exports:{}};return e[n](s,s.exports,r),s.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{"use strict";r.d(n,{default:()=>o});var e=r("ckeditor5/src/core.js");class t{constructor(){this.chunks=[],this.selfClosingTags=["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]}build(){return this.chunks.join("")}appendNode(e){e.nodeType===Node.TEXT_NODE?this._appendText(e):e.nodeType===Node.ELEMENT_NODE?this._appendElement(e):e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&this._appendChildren(e)}_appendElement(e){const t=e.nodeName.toLowerCase();this._append("<"),this._append(t),this._appendAttributes(e),this._append(">"),this.selfClosingTags.includes(t)||(this._appendChildren(e),this._append("</"),this._append(t),this._append(">"))}_appendChildren(e){Object.keys(e.childNodes).forEach((t=>{this.appendNode(e.childNodes[t])}))}_appendAttributes(e){Object.keys(e.attributes).forEach((t=>{this._append(" "),this._append(e.attributes[t].name),this._append('="'),this._append(this.constructor._escapeAttribute(e.attributes[t].value)),this._append('"')}))}_appendText(e){const t=document.implementation.createHTMLDocument("").createElement("p");t.textContent=e.textContent,this._append(t.innerHTML)}_append(e){this.chunks.push(e)}static _escapeAttribute(e){return e.replace(/&/g,"&").replace(/'/g,"'").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">").replace(/\r\n/g," ").replace(/[\r\n]/g," ")}}class p{getHtml(e){const r=new t;return r.appendNode(e),r.build()}}class s extends e.Plugin{init(){this.editor.data.processor.htmlWriter=new p}static get pluginName(){return"DrupalHtmlEngine"}}const o={DrupalHtmlEngine:s}})(),n=n.default})()}));
\ No newline at end of file
diff --git a/core/modules/ckeditor5/js/build/drupalImage.js b/core/modules/ckeditor5/js/build/drupalImage.js
index 44d330d5c9a38d5c0d24e89dd2ee282aeaa87487..88c2e53f775fb1a1a101821db0b1f21993b209da 100644
--- a/core/modules/ckeditor5/js/build/drupalImage.js
+++ b/core/modules/ckeditor5/js/build/drupalImage.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.CKEditor5=e():(t.CKEditor5=t.CKEditor5||{},t.CKEditor5.drupalImage=e())}(self,(function(){return function(){var t={"ckeditor5/src/core.js":function(t,e,i){t.exports=i("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/upload.js":function(t,e,i){t.exports=i("dll-reference CKEditor5.dll")("./src/upload.js")},"ckeditor5/src/utils.js":function(t,e,i){t.exports=i("dll-reference CKEditor5.dll")("./src/utils.js")},"dll-reference CKEditor5.dll":function(t){"use strict";t.exports=CKEditor5.dll}},e={};function i(r){var n=e[r];if(void 0!==n)return n.exports;var a=e[r]={exports:{}};return t[r](a,a.exports,i),a.exports}i.d=function(t,e){for(var r in e)i.o(e,r)&&!i.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)};var r={};return function(){"use strict";i.d(r,{default:function(){return p}});var t=i("ckeditor5/src/core.js");function e(t){return t.createEmptyElement("img")}function n(){function t(t,e,i){if(!i.consumable.consume(e.item,t.name))return;const r=i.mapper.toViewElement(e.item),n=i.writer,a=n.createContainerElement("a",{href:e.attributeNewValue});n.insert(n.createPositionBefore(r),a),n.move(n.createRangeOn(r),n.createPositionAt(a,0)),i.consumable.consume(e.item,"attribute:htmlLinkAttributes:imageBlock")&&function(t,e,i){if(e.attributes)for(const[r,n]of Object.entries(e.attributes))t.setAttribute(r,n,i);e.styles&&t.setStyle(e.styles,i),e.classes&&t.addClass(e.classes,i)}(i.writer,e.item.getAttribute("htmlLinkAttributes"),a)}return e=>{e.on("attribute:linkHref:imageBlock",t,{priority:"high"})}}class a extends t.Plugin{static get pluginName(){return"DrupalImageEditing"}init(){const{editor:t}=this,{conversion:i}=t,{schema:r}=t.model;r.isRegistered("imageInline")&&r.extend("imageInline",{allowAttributes:["dataEntityUuid","dataEntityType","width","height"]}),r.isRegistered("imageBlock")&&r.extend("imageBlock",{allowAttributes:["dataEntityUuid","dataEntityType","width","height"]}),i.for("upcast").add(function(t){function e(e,i,r){const{viewItem:n}=i,{writer:a,consumable:o,safeInsert:s,updateConversionResult:u,schema:l}=r,d=[];let c;if(o.test(n,{name:!0,attributes:"src"})){if(c=l.checkChild(i.modelCursor,"imageInline")?a.createElement("imageInline",{src:n.getAttribute("src")}):a.createElement("imageBlock",{src:n.getAttribute("src")}),t.plugins.has("ImageStyleEditing")&&o.test(n,{name:!0,attributes:"data-align"})){const t={left:"alignBlockLeft",center:"alignCenter",right:"alignBlockRight"},e={left:"alignLeft",right:"alignRight"},i=n.getAttribute("data-align"),r=c.is("element","imageBlock")?t[i]:e[i];a.setAttribute("imageStyle",r,c),d.push("data-align")}if(c.is("element","imageBlock")&&o.test(n,{name:!0,attributes:"data-caption"})){const e=a.createElement("caption"),i=t.data.processor.toView(n.getAttribute("data-caption")),o=a.createDocumentFragment();r.consumable.constructor.createFrom(i,r.consumable),r.convertChildren(i,o);for(const t of Array.from(o.getChildren()))a.append(t,e);a.append(e,c),d.push("data-caption")}o.test(n,{name:!0,attributes:"data-entity-uuid"})&&(a.setAttribute("dataEntityUuid",n.getAttribute("data-entity-uuid"),c),d.push("data-entity-uuid")),o.test(n,{name:!0,attributes:"data-entity-type"})&&(a.setAttribute("dataEntityType",n.getAttribute("data-entity-type"),c),d.push("data-entity-type")),s(c,i.modelCursor)&&(o.consume(n,{name:!0,attributes:d}),u(c,i))}}return t=>{t.on("element:img",e,{priority:"high"})}}(t)).attributeToAttribute({view:{name:"img",key:"width"},model:{key:"width",value:t=>`${t.getAttribute("width")}px`}}).attributeToAttribute({view:{name:"img",key:"height"},model:{key:"height",value:t=>`${t.getAttribute("height")}px`}}),i.for("downcast").add(function(){function t(t,e,i){const{item:r}=e,{consumable:n,writer:a}=i;if(!n.consume(r,t.name))return;const o=i.mapper.toViewElement(r),s=Array.from(o.getChildren()).find((t=>"img"===t.name));a.setAttribute("data-entity-uuid",e.attributeNewValue,s||o)}return e=>{e.on("attribute:dataEntityUuid",t)}}()).add(function(){function t(t,e,i){const{item:r}=e,{consumable:n,writer:a}=i;if(!n.consume(r,t.name))return;const o=i.mapper.toViewElement(r),s=Array.from(o.getChildren()).find((t=>"img"===t.name));a.setAttribute("data-entity-type",e.attributeNewValue,s||o)}return e=>{e.on("attribute:dataEntityType",t)}}()),i.for("dataDowncast").add(function(t){return e=>{e.on("insert:caption",((e,i,r)=>{const{consumable:n,writer:a,mapper:o}=r;if(!n.consume(i.item,"insert"))return;const s=t.model.createRangeIn(i.item),u=a.createDocumentFragment();o.bindElements(i.item,u);for(const{item:e}of Array.from(s)){const i={item:e,range:t.model.createRangeOn(e)},n=`insert:${e.name||"$text"}`;t.data.downcastDispatcher.fire(n,i,r);for(const n of e.getAttributeKeys())Object.assign(i,{attributeKey:n,attributeOldValue:null,attributeNewValue:i.item.getAttribute(n)}),t.data.downcastDispatcher.fire(`attribute:${n}`,i,r)}for(const t of a.createRangeIn(u).getItems())o.unbindViewElement(t);o.unbindViewElement(u);const l=t.data.processor.toData(u);if(l){const t=o.toViewElement(i.item.parent);a.setAttribute("data-caption",l,t)}}),{priority:"high"})}}(t)).elementToElement({model:"imageBlock",view:(t,{writer:i})=>e(i),converterPriority:"high"}).elementToElement({model:"imageInline",view:(t,{writer:i})=>e(i),converterPriority:"high"}).add(function(){function t(t,e,i){const{item:r}=e,{consumable:n,writer:a}=i,o={alignLeft:"left",alignRight:"right",alignCenter:"center",alignBlockRight:"right",alignBlockLeft:"left"};if(!o[e.attributeNewValue]||!n.consume(r,t.name))return;const s=i.mapper.toViewElement(r),u=Array.from(s.getChildren()).find((t=>"img"===t.name));a.setAttribute("data-align",o[e.attributeNewValue],u||s)}return e=>{e.on("attribute:imageStyle",t,{priority:"high"})}}()).add(function(){function t(t,e,i){const{item:r}=e,{consumable:n,writer:a}=i;if(!n.consume(r,t.name))return;const o=i.mapper.toViewElement(r),s=Array.from(o.getChildren()).find((t=>"img"===t.name));a.setAttribute("width",e.attributeNewValue.replace("px",""),s||o)}return e=>{e.on("attribute:width:imageInline",t,{priority:"high"}),e.on("attribute:width:imageBlock",t,{priority:"high"})}}()).add(function(){function t(t,e,i){const{item:r}=e,{consumable:n,writer:a}=i;if(!n.consume(r,t.name))return;const o=i.mapper.toViewElement(r),s=Array.from(o.getChildren()).find((t=>"img"===t.name));a.setAttribute("height",e.attributeNewValue.replace("px",""),s||o)}return e=>{e.on("attribute:height:imageInline",t,{priority:"high"}),e.on("attribute:height:imageBlock",t,{priority:"high"})}}()).add(n())}}class o extends t.Plugin{static get requires(){return[a]}static get pluginName(){return"DrupalImage"}}var s=o;class u extends t.Plugin{init(){const{editor:t}=this;t.plugins.get("ImageUploadEditing").on("uploadComplete",((e,{data:i,imageElement:r})=>{t.model.change((t=>{t.setAttribute("dataEntityUuid",i.dataEntityUuid,r),t.setAttribute("dataEntityType",i.dataEntityType,r)}))}))}static get pluginName(){return"DrupalImageUploadEditing"}}var l=i("ckeditor5/src/upload.js"),d=i("ckeditor5/src/utils.js");class c{constructor(t,e){this.loader=t,this.options=e}upload(){return this.loader.file.then((t=>new Promise(((e,i)=>{this._initRequest(),this._initListeners(e,i,t),this._sendRequest(t)}))))}abort(){this.xhr&&this.xhr.abort()}_initRequest(){this.xhr=new XMLHttpRequest,this.xhr.open("POST",this.options.uploadUrl,!0),this.xhr.responseType="json"}_initListeners(t,e,i){const r=this.xhr,n=this.loader,a=`Couldn't upload file: ${i.name}.`;r.addEventListener("error",(()=>e(a))),r.addEventListener("abort",(()=>e())),r.addEventListener("load",(()=>{const i=r.response;if(!i||i.error)return e(i&&i.error&&i.error.message?i.error.message:a);t({urls:{default:i.url},dataEntityUuid:i.uuid?i.uuid:"",dataEntityType:i.entity_type?i.entity_type:""})})),r.upload&&r.upload.addEventListener("progress",(t=>{t.lengthComputable&&(n.uploadTotal=t.total,n.uploaded=t.loaded)}))}_sendRequest(t){const e=this.options.headers||{},i=this.options.withCredentials||!1;Object.keys(e).forEach((t=>{this.xhr.setRequestHeader(t,e[t])})),this.xhr.withCredentials=i;const r=new FormData;r.append("upload",t),this.xhr.send(r)}}class m extends t.Plugin{static get requires(){return[l.FileRepository]}static get pluginName(){return"DrupalFileRepository"}init(){const t=this.editor.config.get("drupalImageUpload");t&&(t.uploadUrl?this.editor.plugins.get(l.FileRepository).createUploadAdapter=e=>new c(e,t):(0,d.logWarning)("simple-upload-adapter-missing-uploadurl"))}}class g extends t.Plugin{static get requires(){return[m,u]}static get pluginName(){return"DrupalImageUpload"}}var p={DrupalImage:s,DrupalImageUpload:g}}(),r=r.default}()}));
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.CKEditor5=e():(t.CKEditor5=t.CKEditor5||{},t.CKEditor5.drupalImage=e())}(self,(function(){return(()=>{var t={"ckeditor5/src/core.js":(t,e,i)=>{t.exports=i("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/upload.js":(t,e,i)=>{t.exports=i("dll-reference CKEditor5.dll")("./src/upload.js")},"ckeditor5/src/utils.js":(t,e,i)=>{t.exports=i("dll-reference CKEditor5.dll")("./src/utils.js")},"dll-reference CKEditor5.dll":t=>{"use strict";t.exports=CKEditor5.dll}},e={};function i(r){var n=e[r];if(void 0!==n)return n.exports;var a=e[r]={exports:{}};return t[r](a,a.exports,i),a.exports}i.d=(t,e)=>{for(var r in e)i.o(e,r)&&!i.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var r={};return(()=>{"use strict";i.d(r,{default:()=>p});var t=i("ckeditor5/src/core.js");function e(t){return t.createEmptyElement("img")}function n(){function t(t,e,i){if(!i.consumable.consume(e.item,t.name))return;const r=i.mapper.toViewElement(e.item),n=i.writer,a=n.createContainerElement("a",{href:e.attributeNewValue});n.insert(n.createPositionBefore(r),a),n.move(n.createRangeOn(r),n.createPositionAt(a,0)),i.consumable.consume(e.item,"attribute:htmlLinkAttributes:imageBlock")&&function(t,e,i){if(e.attributes)for(const[r,n]of Object.entries(e.attributes))t.setAttribute(r,n,i);e.styles&&t.setStyle(e.styles,i),e.classes&&t.addClass(e.classes,i)}(i.writer,e.item.getAttribute("htmlLinkAttributes"),a)}return e=>{e.on("attribute:linkHref:imageBlock",t,{priority:"high"})}}class a extends t.Plugin{static get pluginName(){return"DrupalImageEditing"}init(){const{editor:t}=this,{conversion:i}=t,{schema:r}=t.model;r.isRegistered("imageInline")&&r.extend("imageInline",{allowAttributes:["dataEntityUuid","dataEntityType","width","height"]}),r.isRegistered("imageBlock")&&r.extend("imageBlock",{allowAttributes:["dataEntityUuid","dataEntityType","width","height"]}),i.for("upcast").add(function(t){function e(e,i,r){const{viewItem:n}=i,{writer:a,consumable:o,safeInsert:s,updateConversionResult:u,schema:l}=r,d=[];let c;if(o.test(n,{name:!0,attributes:"src"})){if(c=l.checkChild(i.modelCursor,"imageInline")?a.createElement("imageInline",{src:n.getAttribute("src")}):a.createElement("imageBlock",{src:n.getAttribute("src")}),t.plugins.has("ImageStyleEditing")&&o.test(n,{name:!0,attributes:"data-align"})){const t={left:"alignBlockLeft",center:"alignCenter",right:"alignBlockRight"},e={left:"alignLeft",right:"alignRight"},i=n.getAttribute("data-align"),r=c.is("element","imageBlock")?t[i]:e[i];a.setAttribute("imageStyle",r,c),d.push("data-align")}if(c.is("element","imageBlock")&&o.test(n,{name:!0,attributes:"data-caption"})){const e=a.createElement("caption"),i=t.data.processor.toView(n.getAttribute("data-caption")),o=a.createDocumentFragment();r.consumable.constructor.createFrom(i,r.consumable),r.convertChildren(i,o);for(const t of Array.from(o.getChildren()))a.append(t,e);a.append(e,c),d.push("data-caption")}o.test(n,{name:!0,attributes:"data-entity-uuid"})&&(a.setAttribute("dataEntityUuid",n.getAttribute("data-entity-uuid"),c),d.push("data-entity-uuid")),o.test(n,{name:!0,attributes:"data-entity-type"})&&(a.setAttribute("dataEntityType",n.getAttribute("data-entity-type"),c),d.push("data-entity-type")),s(c,i.modelCursor)&&(o.consume(n,{name:!0,attributes:d}),u(c,i))}}return t=>{t.on("element:img",e,{priority:"high"})}}(t)).attributeToAttribute({view:{name:"img",key:"width"},model:{key:"width",value:t=>`${t.getAttribute("width")}px`}}).attributeToAttribute({view:{name:"img",key:"height"},model:{key:"height",value:t=>`${t.getAttribute("height")}px`}}),i.for("downcast").add(function(){function t(t,e,i){const{item:r}=e,{consumable:n,writer:a}=i;if(!n.consume(r,t.name))return;const o=i.mapper.toViewElement(r),s=Array.from(o.getChildren()).find((t=>"img"===t.name));a.setAttribute("data-entity-uuid",e.attributeNewValue,s||o)}return e=>{e.on("attribute:dataEntityUuid",t)}}()).add(function(){function t(t,e,i){const{item:r}=e,{consumable:n,writer:a}=i;if(!n.consume(r,t.name))return;const o=i.mapper.toViewElement(r),s=Array.from(o.getChildren()).find((t=>"img"===t.name));a.setAttribute("data-entity-type",e.attributeNewValue,s||o)}return e=>{e.on("attribute:dataEntityType",t)}}()),i.for("dataDowncast").add(function(t){return e=>{e.on("insert:caption",((e,i,r)=>{const{consumable:n,writer:a,mapper:o}=r;if(!n.consume(i.item,"insert"))return;const s=t.model.createRangeIn(i.item),u=a.createDocumentFragment();o.bindElements(i.item,u);for(const{item:e}of Array.from(s)){const i={item:e,range:t.model.createRangeOn(e)},n=`insert:${e.name||"$text"}`;t.data.downcastDispatcher.fire(n,i,r);for(const n of e.getAttributeKeys())Object.assign(i,{attributeKey:n,attributeOldValue:null,attributeNewValue:i.item.getAttribute(n)}),t.data.downcastDispatcher.fire(`attribute:${n}`,i,r)}for(const t of a.createRangeIn(u).getItems())o.unbindViewElement(t);o.unbindViewElement(u);const l=t.data.processor.toData(u);if(l){const t=o.toViewElement(i.item.parent);a.setAttribute("data-caption",l,t)}}),{priority:"high"})}}(t)).elementToElement({model:"imageBlock",view:(t,{writer:i})=>e(i),converterPriority:"high"}).elementToElement({model:"imageInline",view:(t,{writer:i})=>e(i),converterPriority:"high"}).add(function(){function t(t,e,i){const{item:r}=e,{consumable:n,writer:a}=i,o={alignLeft:"left",alignRight:"right",alignCenter:"center",alignBlockRight:"right",alignBlockLeft:"left"};if(!o[e.attributeNewValue]||!n.consume(r,t.name))return;const s=i.mapper.toViewElement(r),u=Array.from(s.getChildren()).find((t=>"img"===t.name));a.setAttribute("data-align",o[e.attributeNewValue],u||s)}return e=>{e.on("attribute:imageStyle",t,{priority:"high"})}}()).add(function(){function t(t,e,i){const{item:r}=e,{consumable:n,writer:a}=i;if(!n.consume(r,t.name))return;const o=i.mapper.toViewElement(r),s=Array.from(o.getChildren()).find((t=>"img"===t.name));a.setAttribute("width",e.attributeNewValue.replace("px",""),s||o)}return e=>{e.on("attribute:width:imageInline",t,{priority:"high"}),e.on("attribute:width:imageBlock",t,{priority:"high"})}}()).add(function(){function t(t,e,i){const{item:r}=e,{consumable:n,writer:a}=i;if(!n.consume(r,t.name))return;const o=i.mapper.toViewElement(r),s=Array.from(o.getChildren()).find((t=>"img"===t.name));a.setAttribute("height",e.attributeNewValue.replace("px",""),s||o)}return e=>{e.on("attribute:height:imageInline",t,{priority:"high"}),e.on("attribute:height:imageBlock",t,{priority:"high"})}}()).add(n())}}class o extends t.Plugin{static get requires(){return[a]}static get pluginName(){return"DrupalImage"}}const s=o;class u extends t.Plugin{init(){const{editor:t}=this;t.plugins.get("ImageUploadEditing").on("uploadComplete",((e,{data:i,imageElement:r})=>{t.model.change((t=>{t.setAttribute("dataEntityUuid",i.dataEntityUuid,r),t.setAttribute("dataEntityType",i.dataEntityType,r)}))}))}static get pluginName(){return"DrupalImageUploadEditing"}}var l=i("ckeditor5/src/upload.js"),d=i("ckeditor5/src/utils.js");class c{constructor(t,e){this.loader=t,this.options=e}upload(){return this.loader.file.then((t=>new Promise(((e,i)=>{this._initRequest(),this._initListeners(e,i,t),this._sendRequest(t)}))))}abort(){this.xhr&&this.xhr.abort()}_initRequest(){this.xhr=new XMLHttpRequest,this.xhr.open("POST",this.options.uploadUrl,!0),this.xhr.responseType="json"}_initListeners(t,e,i){const r=this.xhr,n=this.loader,a=`Couldn't upload file: ${i.name}.`;r.addEventListener("error",(()=>e(a))),r.addEventListener("abort",(()=>e())),r.addEventListener("load",(()=>{const i=r.response;if(!i||i.error)return e(i&&i.error&&i.error.message?i.error.message:a);t({urls:{default:i.url},dataEntityUuid:i.uuid?i.uuid:"",dataEntityType:i.entity_type?i.entity_type:""})})),r.upload&&r.upload.addEventListener("progress",(t=>{t.lengthComputable&&(n.uploadTotal=t.total,n.uploaded=t.loaded)}))}_sendRequest(t){const e=this.options.headers||{},i=this.options.withCredentials||!1;Object.keys(e).forEach((t=>{this.xhr.setRequestHeader(t,e[t])})),this.xhr.withCredentials=i;const r=new FormData;r.append("upload",t),this.xhr.send(r)}}class m extends t.Plugin{static get requires(){return[l.FileRepository]}static get pluginName(){return"DrupalFileRepository"}init(){const t=this.editor.config.get("drupalImageUpload");t&&(t.uploadUrl?this.editor.plugins.get(l.FileRepository).createUploadAdapter=e=>new c(e,t):(0,d.logWarning)("simple-upload-adapter-missing-uploadurl"))}}class g extends t.Plugin{static get requires(){return[m,u]}static get pluginName(){return"DrupalImageUpload"}}const p={DrupalImage:s,DrupalImageUpload:g}})(),r=r.default})()}));
\ No newline at end of file
diff --git a/core/modules/ckeditor5/js/build/drupalMedia.js b/core/modules/ckeditor5/js/build/drupalMedia.js
index ee2cc68094affa54472aaa23204726e25a88676f..e359b5cc616d4da3bf06f8f850e133eb78f152a1 100644
--- a/core/modules/ckeditor5/js/build/drupalMedia.js
+++ b/core/modules/ckeditor5/js/build/drupalMedia.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.drupalMedia=t())}(self,(function(){return function(){var e={"ckeditor5/src/core.js":function(e,t,i){e.exports=i("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/ui.js":function(e,t,i){e.exports=i("dll-reference CKEditor5.dll")("./src/ui.js")},"ckeditor5/src/utils.js":function(e,t,i){e.exports=i("dll-reference CKEditor5.dll")("./src/utils.js")},"ckeditor5/src/widget.js":function(e,t,i){e.exports=i("dll-reference CKEditor5.dll")("./src/widget.js")},"dll-reference CKEditor5.dll":function(e){"use strict";e.exports=CKEditor5.dll}},t={};function i(r){var n=t[r];if(void 0!==n)return n.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,i),a.exports}i.d=function(e,t){for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var r={};return function(){"use strict";i.d(r,{default:function(){return y}});var e=i("ckeditor5/src/core.js"),t=i("ckeditor5/src/widget.js");class n extends e.Command{execute(e){const t=this.editor.plugins.get("DrupalMediaEditing"),i=Object.entries(t.attrs).reduce(((e,[t,i])=>(e[i]=t,e)),{}),r=Object.keys(e).reduce(((t,r)=>(i[r]&&(t[i[r]]=e[r]),t)),{});this.editor.model.change((e=>{this.editor.model.insertContent(function(e,t){return e.createElement("drupalMedia",t)}(e,r))}))}refresh(){const e=this.editor.model,t=e.document.selection,i=e.schema.findAllowedParent(t.getFirstPosition(),"drupalMedia");this.isEnabled=null!==i}}class a extends e.Plugin{static get requires(){return[t.Widget]}init(){this.attrs={drupalMediaAlt:"alt",drupalMediaAlign:"data-align",drupalMediaCaption:"data-caption",drupalMediaEntityType:"data-entity-type",drupalMediaEntityUuid:"data-entity-uuid",drupalMediaViewMode:"data-view-mode"};const e=this.editor.config.get("drupalMedia");if(!e)return;const{previewURL:t,themeError:i}=e;this.previewURL=t,this.labelError=this.editor.t("Preview failed"),this.themeError=i||`\n <p>${this.editor.t("An error occurred while trying to preview the media. Please save your work and reload this page.")}<p>\n `,this._defineSchema(),this._defineConverters(),this.editor.commands.add("insertDrupalMedia",new n(this.editor))}async _fetchPreview(e,t){const i=await fetch(`${e}?${new URLSearchParams(t)}`,{headers:{"X-Drupal-MediaPreview-CSRF-Token":this.editor.config.get("drupalMedia").previewCsrfToken}});if(i.ok){return{label:i.headers.get("drupal-media-label"),preview:await i.text()}}return{label:this.labelError,preview:this.themeError}}_defineSchema(){this.editor.model.schema.register("drupalMedia",{allowWhere:"$block",isObject:!0,isContent:!0,allowAttributes:Object.keys(this.attrs)})}_defineConverters(){const e=this.editor.conversion;e.for("upcast").elementToElement({view:{name:"drupal-media"},model:"drupalMedia"}),e.for("dataDowncast").elementToElement({model:"drupalMedia",view:{name:"drupal-media"}}),e.for("editingDowncast").elementToElement({model:"drupalMedia",view:(e,{writer:i})=>{const r=i.createContainerElement("div",{class:"drupal-media"}),n=i.createRawElement("div",{"data-drupal-media-preview":"loading"},(t=>{this.previewURL?this._fetchPreview(this.previewURL,{text:this._renderElement(e),uuid:e.getAttribute("drupalMediaEntityUuid")}).then((({label:e,preview:i})=>{t.innerHTML=i,t.setAttribute("aria-label",e),t.setAttribute("data-drupal-media-preview","ready")})):(t.innerHTML=this.themeError,t.setAttribute("aria-label","drupal-media"),t.setAttribute("data-drupal-media-preview","unavailable"))}));return i.insert(i.createPositionAt(r,0),n),i.setCustomProperty("drupalMedia",!0,r),(0,t.toWidget)(r,i,{label:"media widget"})}}),Object.keys(this.attrs).forEach((t=>{e.attributeToAttribute({model:{key:t,name:"drupalMedia"},view:{name:"drupal-media",key:this.attrs[t]}})}))}_renderElement(e){const t=e.getAttributes();let i="<drupal-media";return Array.from(t).forEach((e=>{this.attrs[e[0]]&&"drupalMediaCaption"!==e[0]&&(i+=` ${this.attrs[e[0]]}="${e[1]}"`)})),i+="></drupal-media>",i}static get pluginName(){return"DrupalMediaEditing"}}var s=i("ckeditor5/src/ui.js");class o extends e.Plugin{init(){const e=this.editor,t=this.editor.config.get("drupalMedia");if(!t)return;const{libraryURL:i,openDialog:r,dialogSettings:n={}}=t;i&&"function"==typeof r&&e.ui.componentFactory.add("drupalMedia",(t=>{const a=e.commands.get("insertDrupalMedia"),o=new s.ButtonView(t);return o.set({label:e.t("Insert Drupal Media"),icon:'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.1873 4.86414L10.2509 6.86414V7.02335H10.2499V15.5091C9.70972 15.1961 9.01793 15.1048 8.34069 15.3136C7.12086 15.6896 6.41013 16.8967 6.75322 18.0096C7.09631 19.1226 8.3633 19.72 9.58313 19.344C10.6666 19.01 11.3484 18.0203 11.2469 17.0234H11.2499V9.80173L18.1803 8.25067V14.3868C17.6401 14.0739 16.9483 13.9825 16.2711 14.1913C15.0513 14.5674 14.3406 15.7744 14.6836 16.8875C15.0267 18.0004 16.2937 18.5978 17.5136 18.2218C18.597 17.8877 19.2788 16.8982 19.1773 15.9011H19.1803V8.02687L19.1873 8.0253V4.86414Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5039 0.743652H0.386932V12.1603H13.5039V0.743652ZM12.3379 1.75842H1.55289V11.1454H1.65715L4.00622 8.86353L6.06254 10.861L9.24985 5.91309L11.3812 9.22179L11.7761 8.6676L12.3379 9.45621V1.75842ZM6.22048 4.50869C6.22048 5.58193 5.35045 6.45196 4.27722 6.45196C3.20398 6.45196 2.33395 5.58193 2.33395 4.50869C2.33395 3.43546 3.20398 2.56543 4.27722 2.56543C5.35045 2.56543 6.22048 3.43546 6.22048 4.50869Z" fill="black"/></svg>\n',tooltip:!0}),o.bind("isOn","isEnabled").to(a,"value","isEnabled"),this.listenTo(o,"execute",(()=>{r(i,(({attributes:t})=>{e.execute("insertDrupalMedia",t)}),n)})),o}))}}function l(e){return!!e&&e.is("element","drupalMedia")}function d(e){const i=e.getSelectedElement();return i&&function(e){return(0,t.isWidget)(e)&&!!e.getCustomProperty("drupalMedia")}(i)?i:null}class u extends e.Plugin{static get requires(){return[t.WidgetToolbarRepository]}static get pluginName(){return"DrupalMediaToolbar"}afterInit(){const e=this.editor,{t:i}=e;e.plugins.get(t.WidgetToolbarRepository).register("drupalMedia",{ariaLabel:i("Drupal Media toolbar"),items:e.config.get("drupalMedia.toolbar")||[],getRelatedElement:e=>d(e)})}}class c extends e.Command{refresh(){const e=this.editor.model.document.selection.getSelectedElement();this.isEnabled=!1,l(e)&&this._isMediaImage(e).then((e=>{this.isEnabled=e})),l(e)&&e.hasAttribute("drupalMediaAlt")?this.value=e.getAttribute("drupalMediaAlt"):this.value=!1}execute(e){const{model:t}=this.editor,i=t.document.selection.getSelectedElement();e.newValue=e.newValue.trim(),t.change((t=>{e.newValue.length>0?t.setAttribute("drupalMediaAlt",e.newValue,i):t.removeAttribute("drupalMediaAlt",i)}))}async _isMediaImage(e){const t=this.editor.config.get("drupalMedia");if(!t)return null;const{isMediaUrl:i}=t,r=new URLSearchParams({uuid:e.getAttribute("drupalMediaEntityUuid")}),n=await fetch(`${i}&${r}`);return n.ok?JSON.parse(await n.text()):null}}class m extends e.Plugin{static get pluginName(){return"MediaImageTextAlternativeEditing"}init(){this.editor.commands.add("mediaImageTextAlternative",new c(this.editor))}}function h(e){const t=e.editing.view,i=s.BalloonPanelView.defaultPositions;return{target:t.domConverter.viewToDom(t.document.selection.getSelectedElement()),positions:[i.northArrowSouth,i.northArrowSouthWest,i.northArrowSouthEast,i.southArrowNorth,i.southArrowNorthWest,i.southArrowNorthEast]}}var p=i("ckeditor5/src/utils.js");class f extends s.View{constructor(t){super(t);const i=this.locale.t;this.focusTracker=new p.FocusTracker,this.keystrokes=new p.KeystrokeHandler,this.labeledInput=this._createLabeledInputView(),this.saveButtonView=this._createButton(i("Save"),e.icons.check,"ck-button-save"),this.saveButtonView.type="submit",this.cancelButtonView=this._createButton(i("Cancel"),e.icons.cancel,"ck-button-cancel","cancel"),this._focusables=new s.ViewCollection,this._focusCycler=new s.FocusCycler({focusables:this._focusables,focusTracker:this.focusTracker,keystrokeHandler:this.keystrokes,actions:{focusPrevious:"shift + tab",focusNext:"tab"}}),this.setTemplate({tag:"form",attributes:{class:["ck","ck-text-alternative-form","ck-responsive-form"],tabindex:"-1"},children:[this.labeledInput,this.saveButtonView,this.cancelButtonView]}),(0,s.injectCssTransitionDisabler)(this)}render(){super.render(),this.keystrokes.listenTo(this.element),(0,s.submitHandler)({view:this}),[this.labeledInput,this.saveButtonView,this.cancelButtonView].forEach((e=>{this._focusables.add(e),this.focusTracker.add(e.element)}))}_createButton(e,t,i,r){const n=new s.ButtonView(this.locale);return n.set({label:e,icon:t,tooltip:!0}),n.extendTemplate({attributes:{class:i}}),r&&n.delegate("execute").to(this,r),n}_createLabeledInputView(){const e=this.locale.t,t=new s.LabeledFieldView(this.locale,s.createLabeledInputText);return t.label=e("Override text alternative"),t}}class g extends e.Plugin{static get requires(){return[s.ContextualBalloon]}static get pluginName(){return"MediaImageTextAlternativeUi"}init(){this._createButton(),this._createForm()}destroy(){super.destroy(),this._form.destroy()}_createButton(){const t=this.editor,i=t.t;t.ui.componentFactory.add("mediaImageTextAlternative",(r=>{const n=t.commands.get("mediaImageTextAlternative"),a=new s.ButtonView(r);return a.set({label:i("Override media image text alternative"),icon:e.icons.lowVision,tooltip:!0}),a.bind("isVisible").to(n,"isEnabled"),this.listenTo(a,"execute",(()=>{this._showForm()})),a}))}_createForm(){const e=this.editor,t=e.editing.view.document;this._balloon=this.editor.plugins.get("ContextualBalloon"),this._form=new f(e.locale),this._form.render(),this.listenTo(this._form,"submit",(()=>{e.execute("mediaImageTextAlternative",{newValue:this._form.labeledInput.fieldView.element.value}),this._hideForm(!0)})),this.listenTo(this._form,"cancel",(()=>{this._hideForm(!0)})),this._form.keystrokes.set("Esc",((e,t)=>{this._hideForm(!0),t()})),this.listenTo(e.ui,"update",(()=>{d(t.selection)?this._isVisible&&function(e){const t=e.plugins.get("ContextualBalloon");if(d(e.editing.view.document.selection)){const i=h(e);t.updatePosition(i)}}(e):this._hideForm(!0)})),(0,s.clickOutsideHandler)({emitter:this._form,activator:()=>this._isVisible,contextElements:[this._balloon.view.element],callback:()=>this._hideForm()})}_showForm(){if(this._isVisible)return;const e=this.editor,t=e.commands.get("mediaImageTextAlternative"),i=this._form.labeledInput;this._form.disableCssTransitions(),this._isInBalloon||this._balloon.add({view:this._form,position:h(e)}),i.fieldView.element.value=t.value||"",i.fieldView.value=i.fieldView.element.value,this._form.labeledInput.fieldView.select(),this._form.enableCssTransitions()}_hideForm(e){this._isInBalloon&&(this._form.focusTracker.isFocused&&this._form.saveButtonView.focus(),this._balloon.remove(this._form),e&&this.editor.editing.view.focus())}get _isVisible(){return this._balloon.visibleView===this._form}get _isInBalloon(){return this._balloon.hasView(this._form)}}class b extends e.Plugin{static get requires(){return[m,g]}static get pluginName(){return"MediaImageTextAlternative"}}function w(e,t,i){if(t.attributes)for(const[r,n]of Object.entries(t.attributes))e.setAttribute(r,n,i);t.styles&&e.setStyle(t.styles,i),t.classes&&e.addClass(t.classes,i)}function v(e){return t=>{t.on("element:drupal-media",((t,i,r)=>{const n=i.viewItem.parent;n.is("element","a")&&function(t,n){const a=e._consumeAllowedAttributes(t,r);a&&r.writer.setAttribute(n,a,i.modelRange)}(n,"htmlLinkAttributes")}),{priority:"low"})}}class M extends e.Plugin{init(){const{editor:e}=this;if(!e.plugins.has("GeneralHtmlSupport"))return;const{schema:t}=e.model,{conversion:i}=e,r=e.plugins.get("DataFilter");t.extend("drupalMedia",{allowAttributes:["htmlLinkAttributes"]}),i.for("upcast").add(v(r)),i.for("editingDowncast").add((e=>e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{if(!i.consumable.consume(t.item,"attribute:htmlLinkAttributes:drupalMedia"))return;const r=i.mapper.toViewElement(t.item),n=function(e,t,i){const r=e.createRangeOn(t);for(const{item:e}of r.getWalker())if(e.is("element",i))return e}(i.writer,r,"a");w(i.writer,t.item.getAttribute("htmlLinkAttributes"),n)}),{priority:"low"}))),i.for("dataDowncast").add((e=>e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{if(!i.consumable.consume(t.item,"attribute:htmlLinkAttributes:drupalMedia"))return;const r=i.mapper.toViewElement(t.item).parent;w(i.writer,t.item.getAttribute("htmlLinkAttributes"),r)}),{priority:"low"})))}static get pluginName(){return"DrupalMediaGeneralHtmlSupport"}}class k extends e.Plugin{static get requires(){return[a,M,o,u,b]}}function _(){return e=>{e.on("element:a",((e,t,i)=>{const r=t.viewItem,n=(a=r,Array.from(a.getChildren()).find((e=>"drupal-media"===e.name)));var a;if(!n)return;if(!i.consumable.consume(r,{attributes:["href"]}))return;const s=r.getAttribute("href");if(!s)return;const o=i.convertItem(n,t.modelCursor);t.modelRange=o.modelRange,t.modelCursor=o.modelCursor;const l=t.modelCursor.nodeBefore;l&&l.is("element","drupalMedia")&&i.writer.setAttribute("linkHref",s,l)}),{priority:"high"})}}class A extends e.Plugin{static get requires(){return["LinkEditing","DrupalMediaEditing"]}static get pluginName(){return"DrupalLinkMediaEditing"}init(){const{editor:e}=this;e.model.schema.extend("drupalMedia",{allowAttributes:["linkHref"]}),e.conversion.for("upcast").add(_()),e.conversion.for("editingDowncast").add((e=>{e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{const{writer:r}=i;if(!i.consumable.consume(t.item,e.name))return;const n=i.mapper.toViewElement(t.item),a=Array.from(n.getChildren()).find((e=>"a"===e.name));if(a)t.attributeNewValue?r.setAttribute("href",t.attributeNewValue,a):(r.move(r.createRangeIn(a),r.createPositionAt(n,0)),r.remove(a));else{const e=Array.from(n.getChildren()).find((e=>e.getAttribute("data-drupal-media-preview"))),i=r.createContainerElement("a",{href:t.attributeNewValue});r.insert(r.createPositionAt(n,0),i),r.move(r.createRangeOn(e),r.createPositionAt(i,0))}}),{priority:"high"})})),e.conversion.for("dataDowncast").add((e=>{e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{const{writer:r}=i;if(!i.consumable.consume(t.item,e.name))return;const n=i.mapper.toViewElement(t.item),a=r.createContainerElement("a",{href:t.attributeNewValue});r.insert(r.createPositionBefore(n),a),r.move(r.createRangeOn(n),r.createPositionAt(a,0))}),{priority:"high"})}))}}class x extends e.Plugin{static get requires(){return["LinkEditing","LinkUI","DrupalMediaEditing"]}static get pluginName(){return"DrupalLinkMediaUi"}init(){const{editor:e}=this,t=e.editing.view.document;this.listenTo(t,"click",((t,i)=>{this._isSelectedLinkedMedia(e.model.document.selection)&&(i.preventDefault(),t.stop())}),{priority:"high"}),this._createToolbarLinkMediaButton()}_createToolbarLinkMediaButton(){const{editor:e}=this,{t:t}=e;e.ui.componentFactory.add("drupalLinkMedia",(i=>{const r=new s.ButtonView(i),n=e.plugins.get("LinkUI"),a=e.commands.get("link");return r.set({isEnabled:!0,label:t("Link media"),icon:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.077 15 .991-1.416a.75.75 0 1 1 1.229.86l-1.148 1.64a.748.748 0 0 1-.217.206 5.251 5.251 0 0 1-8.503-5.955.741.741 0 0 1 .12-.274l1.147-1.639a.75.75 0 1 1 1.228.86L4.933 10.7l.006.003a3.75 3.75 0 0 0 6.132 4.294l.006.004zm5.494-5.335a.748.748 0 0 1-.12.274l-1.147 1.639a.75.75 0 1 1-1.228-.86l.86-1.23a3.75 3.75 0 0 0-6.144-4.301l-.86 1.229a.75.75 0 0 1-1.229-.86l1.148-1.64a.748.748 0 0 1 .217-.206 5.251 5.251 0 0 1 8.503 5.955zm-4.563-2.532a.75.75 0 0 1 .184 1.045l-3.155 4.505a.75.75 0 1 1-1.229-.86l3.155-4.506a.75.75 0 0 1 1.045-.184z"/></svg>\n',keystroke:"Ctrl+K",tooltip:!0,isToggleable:!0}),r.bind("isEnabled").to(a,"isEnabled"),r.bind("isOn").to(a,"value",(e=>!!e)),this.listenTo(r,"execute",(()=>{this._isSelectedLinkedMedia(e.model.document.selection)?n._addActionsView():n._showUI(!0)})),r}))}_isSelectedLinkedMedia(e){const t=e.getSelectedElement();return!!t&&t.is("element","drupalMedia")&&t.hasAttribute("linkHref")}}class E extends e.Plugin{static get requires(){return[A,x]}static get pluginName(){return"DrupalLinkMedia"}}var y={DrupalMedia:k,MediaImageTextAlternative:b,MediaImageTextAlternativeEditing:m,MediaImageTextAlternativeUi:g,DrupalLinkMedia:E}}(),r=r.default}()}));
\ No newline at end of file
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.drupalMedia=t())}(self,(function(){return(()=>{var e={"ckeditor5/src/core.js":(e,t,i)=>{e.exports=i("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/ui.js":(e,t,i)=>{e.exports=i("dll-reference CKEditor5.dll")("./src/ui.js")},"ckeditor5/src/utils.js":(e,t,i)=>{e.exports=i("dll-reference CKEditor5.dll")("./src/utils.js")},"ckeditor5/src/widget.js":(e,t,i)=>{e.exports=i("dll-reference CKEditor5.dll")("./src/widget.js")},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},t={};function i(r){var a=t[r];if(void 0!==a)return a.exports;var n=t[r]={exports:{}};return e[r](n,n.exports,i),n.exports}i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var r={};return(()=>{"use strict";i.d(r,{default:()=>y});var e=i("ckeditor5/src/core.js"),t=i("ckeditor5/src/widget.js");class a extends e.Command{execute(e){const t=this.editor.plugins.get("DrupalMediaEditing"),i=Object.entries(t.attrs).reduce(((e,[t,i])=>(e[i]=t,e)),{}),r=Object.keys(e).reduce(((t,r)=>(i[r]&&(t[i[r]]=e[r]),t)),{});this.editor.model.change((e=>{this.editor.model.insertContent(function(e,t){return e.createElement("drupalMedia",t)}(e,r))}))}refresh(){const e=this.editor.model,t=e.document.selection,i=e.schema.findAllowedParent(t.getFirstPosition(),"drupalMedia");this.isEnabled=null!==i}}class n extends e.Plugin{static get requires(){return[t.Widget]}init(){this.attrs={drupalMediaAlt:"alt",drupalMediaAlign:"data-align",drupalMediaCaption:"data-caption",drupalMediaEntityType:"data-entity-type",drupalMediaEntityUuid:"data-entity-uuid",drupalMediaViewMode:"data-view-mode"};const e=this.editor.config.get("drupalMedia");if(!e)return;const{previewURL:t,themeError:i}=e;this.previewURL=t,this.labelError=this.editor.t("Preview failed"),this.themeError=i||`\n <p>${this.editor.t("An error occurred while trying to preview the media. Please save your work and reload this page.")}<p>\n `,this._defineSchema(),this._defineConverters(),this.editor.commands.add("insertDrupalMedia",new a(this.editor))}async _fetchPreview(e,t){const i=await fetch(`${e}?${new URLSearchParams(t)}`,{headers:{"X-Drupal-MediaPreview-CSRF-Token":this.editor.config.get("drupalMedia").previewCsrfToken}});if(i.ok){return{label:i.headers.get("drupal-media-label"),preview:await i.text()}}return{label:this.labelError,preview:this.themeError}}_defineSchema(){this.editor.model.schema.register("drupalMedia",{allowWhere:"$block",isObject:!0,isContent:!0,allowAttributes:Object.keys(this.attrs)})}_defineConverters(){const e=this.editor.conversion;e.for("upcast").elementToElement({view:{name:"drupal-media"},model:"drupalMedia"}),e.for("dataDowncast").elementToElement({model:"drupalMedia",view:{name:"drupal-media"}}),e.for("editingDowncast").elementToElement({model:"drupalMedia",view:(e,{writer:i})=>{const r=i.createContainerElement("div",{class:"drupal-media"}),a=i.createRawElement("div",{"data-drupal-media-preview":"loading"},(t=>{this.previewURL?this._fetchPreview(this.previewURL,{text:this._renderElement(e),uuid:e.getAttribute("drupalMediaEntityUuid")}).then((({label:e,preview:i})=>{t.innerHTML=i,t.setAttribute("aria-label",e),t.setAttribute("data-drupal-media-preview","ready")})):(t.innerHTML=this.themeError,t.setAttribute("aria-label","drupal-media"),t.setAttribute("data-drupal-media-preview","unavailable"))}));return i.insert(i.createPositionAt(r,0),a),i.setCustomProperty("drupalMedia",!0,r),(0,t.toWidget)(r,i,{label:"media widget"})}}),Object.keys(this.attrs).forEach((t=>{e.attributeToAttribute({model:{key:t,name:"drupalMedia"},view:{name:"drupal-media",key:this.attrs[t]}})}))}_renderElement(e){const t=e.getAttributes();let i="<drupal-media";return Array.from(t).forEach((e=>{this.attrs[e[0]]&&"drupalMediaCaption"!==e[0]&&(i+=` ${this.attrs[e[0]]}="${e[1]}"`)})),i+="></drupal-media>",i}static get pluginName(){return"DrupalMediaEditing"}}var s=i("ckeditor5/src/ui.js");class o extends e.Plugin{init(){const e=this.editor,t=this.editor.config.get("drupalMedia");if(!t)return;const{libraryURL:i,openDialog:r,dialogSettings:a={}}=t;i&&"function"==typeof r&&e.ui.componentFactory.add("drupalMedia",(t=>{const n=e.commands.get("insertDrupalMedia"),o=new s.ButtonView(t);return o.set({label:e.t("Insert Drupal Media"),icon:'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.1873 4.86414L10.2509 6.86414V7.02335H10.2499V15.5091C9.70972 15.1961 9.01793 15.1048 8.34069 15.3136C7.12086 15.6896 6.41013 16.8967 6.75322 18.0096C7.09631 19.1226 8.3633 19.72 9.58313 19.344C10.6666 19.01 11.3484 18.0203 11.2469 17.0234H11.2499V9.80173L18.1803 8.25067V14.3868C17.6401 14.0739 16.9483 13.9825 16.2711 14.1913C15.0513 14.5674 14.3406 15.7744 14.6836 16.8875C15.0267 18.0004 16.2937 18.5978 17.5136 18.2218C18.597 17.8877 19.2788 16.8982 19.1773 15.9011H19.1803V8.02687L19.1873 8.0253V4.86414Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5039 0.743652H0.386932V12.1603H13.5039V0.743652ZM12.3379 1.75842H1.55289V11.1454H1.65715L4.00622 8.86353L6.06254 10.861L9.24985 5.91309L11.3812 9.22179L11.7761 8.6676L12.3379 9.45621V1.75842ZM6.22048 4.50869C6.22048 5.58193 5.35045 6.45196 4.27722 6.45196C3.20398 6.45196 2.33395 5.58193 2.33395 4.50869C2.33395 3.43546 3.20398 2.56543 4.27722 2.56543C5.35045 2.56543 6.22048 3.43546 6.22048 4.50869Z" fill="black"/></svg>\n',tooltip:!0}),o.bind("isOn","isEnabled").to(n,"value","isEnabled"),this.listenTo(o,"execute",(()=>{r(i,(({attributes:t})=>{e.execute("insertDrupalMedia",t)}),a)})),o}))}}function l(e){return!!e&&e.is("element","drupalMedia")}function d(e){const i=e.getSelectedElement();return i&&function(e){return(0,t.isWidget)(e)&&!!e.getCustomProperty("drupalMedia")}(i)?i:null}class u extends e.Plugin{static get requires(){return[t.WidgetToolbarRepository]}static get pluginName(){return"DrupalMediaToolbar"}afterInit(){const e=this.editor,{t:i}=e;e.plugins.get(t.WidgetToolbarRepository).register("drupalMedia",{ariaLabel:i("Drupal Media toolbar"),items:e.config.get("drupalMedia.toolbar")||[],getRelatedElement:e=>d(e)})}}class c extends e.Command{refresh(){const e=this.editor.model.document.selection.getSelectedElement();this.isEnabled=!1,l(e)&&this._isMediaImage(e).then((e=>{this.isEnabled=e})),l(e)&&e.hasAttribute("drupalMediaAlt")?this.value=e.getAttribute("drupalMediaAlt"):this.value=!1}execute(e){const{model:t}=this.editor,i=t.document.selection.getSelectedElement();e.newValue=e.newValue.trim(),t.change((t=>{e.newValue.length>0?t.setAttribute("drupalMediaAlt",e.newValue,i):t.removeAttribute("drupalMediaAlt",i)}))}async _isMediaImage(e){const t=this.editor.config.get("drupalMedia");if(!t)return null;const{isMediaUrl:i}=t,r=new URLSearchParams({uuid:e.getAttribute("drupalMediaEntityUuid")}),a=await fetch(`${i}&${r}`);return a.ok?JSON.parse(await a.text()):null}}class m extends e.Plugin{static get pluginName(){return"MediaImageTextAlternativeEditing"}init(){this.editor.commands.add("mediaImageTextAlternative",new c(this.editor))}}function h(e){const t=e.editing.view,i=s.BalloonPanelView.defaultPositions;return{target:t.domConverter.viewToDom(t.document.selection.getSelectedElement()),positions:[i.northArrowSouth,i.northArrowSouthWest,i.northArrowSouthEast,i.southArrowNorth,i.southArrowNorthWest,i.southArrowNorthEast]}}var p=i("ckeditor5/src/utils.js");class g extends s.View{constructor(t){super(t);const i=this.locale.t;this.focusTracker=new p.FocusTracker,this.keystrokes=new p.KeystrokeHandler,this.labeledInput=this._createLabeledInputView(),this.saveButtonView=this._createButton(i("Save"),e.icons.check,"ck-button-save"),this.saveButtonView.type="submit",this.cancelButtonView=this._createButton(i("Cancel"),e.icons.cancel,"ck-button-cancel","cancel"),this._focusables=new s.ViewCollection,this._focusCycler=new s.FocusCycler({focusables:this._focusables,focusTracker:this.focusTracker,keystrokeHandler:this.keystrokes,actions:{focusPrevious:"shift + tab",focusNext:"tab"}}),this.setTemplate({tag:"form",attributes:{class:["ck","ck-text-alternative-form","ck-responsive-form"],tabindex:"-1"},children:[this.labeledInput,this.saveButtonView,this.cancelButtonView]}),(0,s.injectCssTransitionDisabler)(this)}render(){super.render(),this.keystrokes.listenTo(this.element),(0,s.submitHandler)({view:this}),[this.labeledInput,this.saveButtonView,this.cancelButtonView].forEach((e=>{this._focusables.add(e),this.focusTracker.add(e.element)}))}_createButton(e,t,i,r){const a=new s.ButtonView(this.locale);return a.set({label:e,icon:t,tooltip:!0}),a.extendTemplate({attributes:{class:i}}),r&&a.delegate("execute").to(this,r),a}_createLabeledInputView(){const e=this.locale.t,t=new s.LabeledFieldView(this.locale,s.createLabeledInputText);return t.label=e("Override text alternative"),t}}class f extends e.Plugin{static get requires(){return[s.ContextualBalloon]}static get pluginName(){return"MediaImageTextAlternativeUi"}init(){this._createButton(),this._createForm()}destroy(){super.destroy(),this._form.destroy()}_createButton(){const t=this.editor,i=t.t;t.ui.componentFactory.add("mediaImageTextAlternative",(r=>{const a=t.commands.get("mediaImageTextAlternative"),n=new s.ButtonView(r);return n.set({label:i("Override media image text alternative"),icon:e.icons.lowVision,tooltip:!0}),n.bind("isVisible").to(a,"isEnabled"),this.listenTo(n,"execute",(()=>{this._showForm()})),n}))}_createForm(){const e=this.editor,t=e.editing.view.document;this._balloon=this.editor.plugins.get("ContextualBalloon"),this._form=new g(e.locale),this._form.render(),this.listenTo(this._form,"submit",(()=>{e.execute("mediaImageTextAlternative",{newValue:this._form.labeledInput.fieldView.element.value}),this._hideForm(!0)})),this.listenTo(this._form,"cancel",(()=>{this._hideForm(!0)})),this._form.keystrokes.set("Esc",((e,t)=>{this._hideForm(!0),t()})),this.listenTo(e.ui,"update",(()=>{d(t.selection)?this._isVisible&&function(e){const t=e.plugins.get("ContextualBalloon");if(d(e.editing.view.document.selection)){const i=h(e);t.updatePosition(i)}}(e):this._hideForm(!0)})),(0,s.clickOutsideHandler)({emitter:this._form,activator:()=>this._isVisible,contextElements:[this._balloon.view.element],callback:()=>this._hideForm()})}_showForm(){if(this._isVisible)return;const e=this.editor,t=e.commands.get("mediaImageTextAlternative"),i=this._form.labeledInput;this._form.disableCssTransitions(),this._isInBalloon||this._balloon.add({view:this._form,position:h(e)}),i.fieldView.element.value=t.value||"",i.fieldView.value=i.fieldView.element.value,this._form.labeledInput.fieldView.select(),this._form.enableCssTransitions()}_hideForm(e){this._isInBalloon&&(this._form.focusTracker.isFocused&&this._form.saveButtonView.focus(),this._balloon.remove(this._form),e&&this.editor.editing.view.focus())}get _isVisible(){return this._balloon.visibleView===this._form}get _isInBalloon(){return this._balloon.hasView(this._form)}}class b extends e.Plugin{static get requires(){return[m,f]}static get pluginName(){return"MediaImageTextAlternative"}}function w(e,t,i){if(t.attributes)for(const[r,a]of Object.entries(t.attributes))e.setAttribute(r,a,i);t.styles&&e.setStyle(t.styles,i),t.classes&&e.addClass(t.classes,i)}function v(e){return t=>{t.on("element:drupal-media",((t,i,r)=>{const a=i.viewItem.parent;a.is("element","a")&&function(t,a){const n=e._consumeAllowedAttributes(t,r);n&&r.writer.setAttribute(a,n,i.modelRange)}(a,"htmlLinkAttributes")}),{priority:"low"})}}class M extends e.Plugin{init(){const{editor:e}=this;if(!e.plugins.has("GeneralHtmlSupport"))return;const{schema:t}=e.model,{conversion:i}=e,r=e.plugins.get("DataFilter");t.extend("drupalMedia",{allowAttributes:["htmlLinkAttributes"]}),i.for("upcast").add(v(r)),i.for("editingDowncast").add((e=>e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{if(!i.consumable.consume(t.item,"attribute:htmlLinkAttributes:drupalMedia"))return;const r=i.mapper.toViewElement(t.item),a=function(e,t,i){const r=e.createRangeOn(t);for(const{item:e}of r.getWalker())if(e.is("element",i))return e}(i.writer,r,"a");w(i.writer,t.item.getAttribute("htmlLinkAttributes"),a)}),{priority:"low"}))),i.for("dataDowncast").add((e=>e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{if(!i.consumable.consume(t.item,"attribute:htmlLinkAttributes:drupalMedia"))return;const r=i.mapper.toViewElement(t.item).parent;w(i.writer,t.item.getAttribute("htmlLinkAttributes"),r)}),{priority:"low"})))}static get pluginName(){return"DrupalMediaGeneralHtmlSupport"}}class k extends e.Plugin{static get requires(){return[n,M,o,u,b]}}function _(){return e=>{e.on("element:a",((e,t,i)=>{const r=t.viewItem,a=(n=r,Array.from(n.getChildren()).find((e=>"drupal-media"===e.name)));var n;if(!a)return;if(!i.consumable.consume(r,{attributes:["href"]}))return;const s=r.getAttribute("href");if(!s)return;const o=i.convertItem(a,t.modelCursor);t.modelRange=o.modelRange,t.modelCursor=o.modelCursor;const l=t.modelCursor.nodeBefore;l&&l.is("element","drupalMedia")&&i.writer.setAttribute("linkHref",s,l)}),{priority:"high"})}}class A extends e.Plugin{static get requires(){return["LinkEditing","DrupalMediaEditing"]}static get pluginName(){return"DrupalLinkMediaEditing"}init(){const{editor:e}=this;e.model.schema.extend("drupalMedia",{allowAttributes:["linkHref"]}),e.conversion.for("upcast").add(_()),e.conversion.for("editingDowncast").add((e=>{e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{const{writer:r}=i;if(!i.consumable.consume(t.item,e.name))return;const a=i.mapper.toViewElement(t.item),n=Array.from(a.getChildren()).find((e=>"a"===e.name));if(n)t.attributeNewValue?r.setAttribute("href",t.attributeNewValue,n):(r.move(r.createRangeIn(n),r.createPositionAt(a,0)),r.remove(n));else{const e=Array.from(a.getChildren()).find((e=>e.getAttribute("data-drupal-media-preview"))),i=r.createContainerElement("a",{href:t.attributeNewValue});r.insert(r.createPositionAt(a,0),i),r.move(r.createRangeOn(e),r.createPositionAt(i,0))}}),{priority:"high"})})),e.conversion.for("dataDowncast").add((e=>{e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{const{writer:r}=i;if(!i.consumable.consume(t.item,e.name))return;const a=i.mapper.toViewElement(t.item),n=r.createContainerElement("a",{href:t.attributeNewValue});r.insert(r.createPositionBefore(a),n),r.move(r.createRangeOn(a),r.createPositionAt(n,0))}),{priority:"high"})}))}}class x extends e.Plugin{static get requires(){return["LinkEditing","LinkUI","DrupalMediaEditing"]}static get pluginName(){return"DrupalLinkMediaUi"}init(){const{editor:e}=this,t=e.editing.view.document;this.listenTo(t,"click",((t,i)=>{this._isSelectedLinkedMedia(e.model.document.selection)&&(i.preventDefault(),t.stop())}),{priority:"high"}),this._createToolbarLinkMediaButton()}_createToolbarLinkMediaButton(){const{editor:e}=this,{t}=e;e.ui.componentFactory.add("drupalLinkMedia",(i=>{const r=new s.ButtonView(i),a=e.plugins.get("LinkUI"),n=e.commands.get("link");return r.set({isEnabled:!0,label:t("Link media"),icon:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.077 15 .991-1.416a.75.75 0 1 1 1.229.86l-1.148 1.64a.748.748 0 0 1-.217.206 5.251 5.251 0 0 1-8.503-5.955.741.741 0 0 1 .12-.274l1.147-1.639a.75.75 0 1 1 1.228.86L4.933 10.7l.006.003a3.75 3.75 0 0 0 6.132 4.294l.006.004zm5.494-5.335a.748.748 0 0 1-.12.274l-1.147 1.639a.75.75 0 1 1-1.228-.86l.86-1.23a3.75 3.75 0 0 0-6.144-4.301l-.86 1.229a.75.75 0 0 1-1.229-.86l1.148-1.64a.748.748 0 0 1 .217-.206 5.251 5.251 0 0 1 8.503 5.955zm-4.563-2.532a.75.75 0 0 1 .184 1.045l-3.155 4.505a.75.75 0 1 1-1.229-.86l3.155-4.506a.75.75 0 0 1 1.045-.184z"/></svg>\n',keystroke:"Ctrl+K",tooltip:!0,isToggleable:!0}),r.bind("isEnabled").to(n,"isEnabled"),r.bind("isOn").to(n,"value",(e=>!!e)),this.listenTo(r,"execute",(()=>{this._isSelectedLinkedMedia(e.model.document.selection)?a._addActionsView():a._showUI(!0)})),r}))}_isSelectedLinkedMedia(e){const t=e.getSelectedElement();return!!t&&t.is("element","drupalMedia")&&t.hasAttribute("linkHref")}}class E extends e.Plugin{static get requires(){return[A,x]}static get pluginName(){return"DrupalLinkMedia"}}const y={DrupalMedia:k,MediaImageTextAlternative:b,MediaImageTextAlternativeEditing:m,MediaImageTextAlternativeUi:f,DrupalLinkMedia:E}})(),r=r.default})()}));
\ No newline at end of file
diff --git a/core/modules/ckeditor5/js/ckeditor5.admin.js b/core/modules/ckeditor5/js/ckeditor5.admin.js
index 1d031035f35e8dc68e1aa4c8459cbaf0e0df1f74..29d9fdbffdeb049c7f11ac6432cf84141abffca5 100644
--- a/core/modules/ckeditor5/js/ckeditor5.admin.js
+++ b/core/modules/ckeditor5/js/ckeditor5.admin.js
@@ -5,40 +5,8 @@
* @preserve
**/
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-(function (Drupal, drupalSettings, $, JSON, once, Sortable) {
- var toolbarHelp = [{
+((Drupal, drupalSettings, $, JSON, once, Sortable) => {
+ const toolbarHelp = [{
message: Drupal.t("The toolbar buttons that don't fit the user's browser window width will be grouped in a dropdown. If multiple toolbar rows are preferred, those can be configured by adding an explicit wrapping breakpoint wherever you want to start a new row.", null, {
context: 'CKEditor 5 toolbar help text, default, no explicit wrapping breakpoint'
}),
@@ -51,101 +19,83 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
button: 'wrapping',
condition: true
}];
-
- var Observable = function () {
- function Observable(value) {
- _classCallCheck(this, Observable);
-
+ const Observable = class {
+ constructor(value) {
this._listeners = [];
this._value = value;
}
- _createClass(Observable, [{
- key: "notify",
- value: function notify() {
- var _this = this;
+ notify() {
+ this._listeners.forEach(listener => listener(this._value));
+ }
- this._listeners.forEach(function (listener) {
- return listener(_this._value);
- });
- }
- }, {
- key: "subscribe",
- value: function subscribe(listener) {
- this._listeners.push(listener);
- }
- }, {
- key: "value",
- get: function get() {
- return this._value;
- },
- set: function set(val) {
- if (val !== this._value) {
- this._value = val;
- this.notify();
- }
+ subscribe(listener) {
+ this._listeners.push(listener);
+ }
+
+ get value() {
+ return this._value;
+ }
+
+ set value(val) {
+ if (val !== this._value) {
+ this._value = val;
+ this.notify();
}
- }]);
+ }
- return Observable;
- }();
+ };
- var getSelectedButtons = function getSelectedButtons(selected, dividers, available) {
- return selected.map(function (id) {
- return _objectSpread({}, [].concat(_toConsumableArray(dividers), _toConsumableArray(available)).find(function (button) {
- return button.id === id;
- }));
- });
+ const getSelectedButtons = (selected, dividers, available) => {
+ return selected.map(id => ({ ...[...dividers, ...available].find(button => button.id === id)
+ }));
};
- var updateSelectedButtons = function updateSelectedButtons(selection, textarea) {
- var newValue = JSON.stringify(selection);
- var priorValue = textarea.innerHTML;
+ const updateSelectedButtons = (selection, textarea) => {
+ const newValue = JSON.stringify(selection);
+ const priorValue = textarea.innerHTML;
textarea.value = newValue;
textarea.innerHTML = newValue;
textarea.dispatchEvent(new CustomEvent('change', {
detail: {
- priorValue: priorValue
+ priorValue
}
}));
};
- var addToSelectedButtons = function addToSelectedButtons(selection, element, announceChange) {
- var list = _toConsumableArray(selection.value);
-
+ const addToSelectedButtons = (selection, element, announceChange) => {
+ const list = [...selection.value];
list.push(element.dataset.id);
selection.value = list;
if (announceChange) {
- setTimeout(function () {
+ setTimeout(() => {
announceChange(element.dataset.label);
});
}
};
- var removeFromSelectedButtons = function removeFromSelectedButtons(selection, element, announceChange) {
- var list = _toConsumableArray(selection.value);
-
- var index = Array.from(element.parentElement.children).findIndex(function (child) {
+ const removeFromSelectedButtons = (selection, element, announceChange) => {
+ const list = [...selection.value];
+ const index = Array.from(element.parentElement.children).findIndex(child => {
return child === element;
});
list.splice(index, 1);
selection.value = list;
if (announceChange) {
- setTimeout(function () {
+ setTimeout(() => {
announceChange(element.dataset.label);
});
}
};
- var moveWithinSelectedButtons = function moveWithinSelectedButtons(selection, element, dir) {
- var list = _toConsumableArray(selection.value);
-
- var index = Array.from(element.parentElement.children).findIndex(function (child) {
+ const moveWithinSelectedButtons = (selection, element, dir) => {
+ const list = [...selection.value];
+ const index = Array.from(element.parentElement.children).findIndex(child => {
return child === element;
});
- var condition = dir < 0 ? index > 0 : index < list.length - 1;
+ const condition = dir < 0 ? index > 0 : index < list.length - 1;
if (condition) {
list.splice(index + dir, 0, list.splice(index, 1)[0]);
@@ -153,29 +103,22 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
}
};
- var copyToActiveButtons = function copyToActiveButtons(selection, element, announceChange) {
- var list = _toConsumableArray(selection.value);
-
+ const copyToActiveButtons = (selection, element, announceChange) => {
+ const list = [...selection.value];
list.push(element.dataset.id);
selection.value = list;
- setTimeout(function () {
+ setTimeout(() => {
if (announceChange) {
announceChange(element.dataset.label);
}
});
};
- var render = function render(root, selectedButtons, availableButtons, dividerButtons) {
- var toolbarHelpText = toolbarHelp.filter(function (helpItem) {
- return selectedButtons.value.includes(helpItem.button) === helpItem.condition;
- }).map(function (helpItem) {
- return helpItem.message;
- });
+ const render = (root, selectedButtons, availableButtons, dividerButtons) => {
+ const toolbarHelpText = toolbarHelp.filter(helpItem => selectedButtons.value.includes(helpItem.button) === helpItem.condition).map(helpItem => helpItem.message);
root.innerHTML = Drupal.theme.ckeditor5Admin({
availableButtons: Drupal.theme.ckeditor5AvailableButtons({
- buttons: availableButtons.filter(function (button) {
- return !selectedButtons.value.includes(button.id);
- })
+ buttons: availableButtons.filter(button => !selectedButtons.value.includes(button.id))
}),
dividerButtons: Drupal.theme.ckeditor5DividerButtons({
buttons: dividerButtons
@@ -192,23 +135,23 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
},
sort: true,
store: {
- set: function set(sortable) {
+ set: sortable => {
selectedButtons.value = sortable.toArray();
}
}
});
- var toolbarAvailableButtons = new Sortable(root.querySelector('[data-button-list="ckeditor5-toolbar-available-buttons"]'), {
+ const toolbarAvailableButtons = new Sortable(root.querySelector('[data-button-list="ckeditor5-toolbar-available-buttons"]'), {
group: {
name: 'available',
put: ['toolbar']
},
sort: false,
- onAdd: function onAdd(event) {
- if (dividerButtons.find(function (dividerButton) {
- return dividerButton.id === event.item.dataset.id;
- })) {
- var newIndex = event.newIndex;
- setTimeout(function () {
+ onAdd: event => {
+ if (dividerButtons.find(dividerButton => dividerButton.id === event.item.dataset.id)) {
+ const {
+ newIndex
+ } = event;
+ setTimeout(() => {
document.querySelectorAll('.ckeditor5-toolbar-available__buttons li')[newIndex].remove();
});
}
@@ -222,15 +165,15 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
sort: 'false'
}
});
- root.querySelectorAll('[data-drupal-selector="ckeditor5-toolbar-button"]').forEach(function (element) {
- var expandButton = function expandButton(event) {
- event.currentTarget.querySelectorAll('.ckeditor5-toolbar-button').forEach(function (buttonElement) {
+ root.querySelectorAll('[data-drupal-selector="ckeditor5-toolbar-button"]').forEach(element => {
+ const expandButton = event => {
+ event.currentTarget.querySelectorAll('.ckeditor5-toolbar-button').forEach(buttonElement => {
buttonElement.setAttribute('data-expanded', true);
});
};
- var retractButton = function retractButton(event) {
- event.currentTarget.querySelectorAll('.ckeditor5-toolbar-button').forEach(function (buttonElement) {
+ const retractButton = event => {
+ event.currentTarget.querySelectorAll('.ckeditor5-toolbar-button').forEach(buttonElement => {
buttonElement.setAttribute('data-expanded', false);
});
};
@@ -239,16 +182,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
element.addEventListener('focus', expandButton);
element.addEventListener('mouseleave', retractButton);
element.addEventListener('blur', retractButton);
- element.addEventListener('keyup', function (event) {
- var supportedKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
- var dir = document.documentElement.dir;
+ element.addEventListener('keyup', event => {
+ const supportedKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+ const dir = document.documentElement.dir;
if (supportedKeys.includes(event.key)) {
if (event.currentTarget.dataset.divider.toLowerCase() === 'true') {
switch (event.key) {
case 'ArrowDown':
{
- var announceChange = function announceChange(name) {
+ const announceChange = name => {
Drupal.announce(Drupal.t('Button @name has been copied to the active toolbar.', {
'@name': name
}));
@@ -260,14 +203,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
}
}
} else if (selectedButtons.value.includes(event.currentTarget.dataset.id)) {
- var index = Array.from(element.parentElement.children).findIndex(function (child) {
+ const index = Array.from(element.parentElement.children).findIndex(child => {
return child === element;
});
switch (event.key) {
case 'ArrowLeft':
{
- var leftOffset = dir === 'ltr' ? -1 : 1;
+ const leftOffset = dir === 'ltr' ? -1 : 1;
moveWithinSelectedButtons(selectedButtons, event.currentTarget, leftOffset);
root.querySelectorAll('[data-button-list="ckeditor5-toolbar-active-buttons"] li')[index + leftOffset].focus();
break;
@@ -275,7 +218,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
case 'ArrowRight':
{
- var rightOffset = dir === 'ltr' ? 1 : -1;
+ const rightOffset = dir === 'ltr' ? 1 : -1;
moveWithinSelectedButtons(selectedButtons, event.currentTarget, rightOffset);
root.querySelectorAll('[data-button-list="ckeditor5-toolbar-active-buttons"] li')[index + rightOffset].focus();
break;
@@ -283,18 +226,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
case 'ArrowUp':
{
- var _announceChange = function _announceChange(name) {
+ const announceChange = name => {
Drupal.announce(Drupal.t('Button @name has been removed from the active toolbar.', {
'@name': name
}));
};
- removeFromSelectedButtons(selectedButtons, event.currentTarget, _announceChange);
+ removeFromSelectedButtons(selectedButtons, event.currentTarget, announceChange);
- if (!dividerButtons.find(function (dividerButton) {
- return event.currentTarget.dataset.id === dividerButton.id;
- })) {
- root.querySelector("[data-button-list=\"ckeditor5-toolbar-available-buttons\"] [data-id=\"".concat(event.currentTarget.dataset.id, "\"]")).focus();
+ if (!dividerButtons.find(dividerButton => event.currentTarget.dataset.id === dividerButton.id)) {
+ root.querySelector(`[data-button-list="ckeditor5-toolbar-available-buttons"] [data-id="${event.currentTarget.dataset.id}"]`).focus();
}
break;
@@ -304,13 +245,13 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
switch (event.key) {
case 'ArrowDown':
{
- var _announceChange2 = function _announceChange2(name) {
+ const announceChange = name => {
Drupal.announce(Drupal.t('Button @name has been moved to the active toolbar.', {
'@name': name
}));
};
- addToSelectedButtons(selectedButtons, event.currentTarget, _announceChange2);
+ addToSelectedButtons(selectedButtons, event.currentTarget, announceChange);
root.querySelector('[data-button-list="ckeditor5-toolbar-active-buttons"] li:last-child').focus();
break;
}
@@ -322,20 +263,15 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
};
Drupal.behaviors.ckeditor5Admin = {
- attach: function attach(context) {
- once('ckeditor5-admin-toolbar', '#ckeditor5-toolbar-app').forEach(function (container) {
- var selectedTextarea = context.querySelector('#ckeditor5-toolbar-buttons-selected');
- var available = Object.entries(JSON.parse(context.querySelector('#ckeditor5-toolbar-buttons-available').innerHTML)).map(function (_ref) {
- var _ref2 = _slicedToArray(_ref, 2),
- name = _ref2[0],
- attrs = _ref2[1];
-
- return _objectSpread({
- name: name,
- id: name
- }, attrs);
- });
- var dividers = [{
+ attach(context) {
+ once('ckeditor5-admin-toolbar', '#ckeditor5-toolbar-app').forEach(container => {
+ const selectedTextarea = context.querySelector('#ckeditor5-toolbar-buttons-selected');
+ const available = Object.entries(JSON.parse(context.querySelector('#ckeditor5-toolbar-buttons-available').innerHTML)).map(([name, attrs]) => ({
+ name,
+ id: name,
+ ...attrs
+ }));
+ const dividers = [{
id: 'divider',
name: '|',
label: Drupal.t('Divider')
@@ -344,34 +280,32 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
name: '-',
label: Drupal.t('Wrapping')
}];
- var selected = new Observable(JSON.parse(selectedTextarea.innerHTML).map(function (name) {
- return [].concat(dividers, _toConsumableArray(available)).find(function (button) {
+ const selected = new Observable(JSON.parse(selectedTextarea.innerHTML).map(name => {
+ return [...dividers, ...available].find(button => {
return button.name === name;
}).id;
}));
- var mapSelection = function mapSelection(selection) {
- return selection.map(function (id) {
- return [].concat(dividers, _toConsumableArray(available)).find(function (button) {
+ const mapSelection = selection => {
+ return selection.map(id => {
+ return [...dividers, ...available].find(button => {
return button.id === id;
}).name;
});
};
- selected.subscribe(function (selection) {
+ selected.subscribe(selection => {
updateSelectedButtons(mapSelection(selection), selectedTextarea);
render(container, selected, available, dividers);
});
- [context.querySelector('#ckeditor5-toolbar-buttons-available'), context.querySelector('[class*="editor-settings-toolbar-items"]')].filter(function (el) {
- return el;
- }).forEach(function (el) {
+ [context.querySelector('#ckeditor5-toolbar-buttons-available'), context.querySelector('[class*="editor-settings-toolbar-items"]')].filter(el => el).forEach(el => {
el.classList.add('visually-hidden');
});
render(container, selected, available, dividers);
});
- once('safari-focus-fix', document.querySelectorAll('.ckeditor5-toolbar-item')).forEach(function (item) {
- item.addEventListener('keydown', function (e) {
- var keyCodeDirections = {
+ once('safari-focus-fix', document.querySelectorAll('.ckeditor5-toolbar-item')).forEach(item => {
+ item.addEventListener('keydown', e => {
+ const keyCodeDirections = {
9: 'tab',
37: 'left',
38: 'up',
@@ -380,8 +314,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
};
if (['tab', 'left', 'up', 'right', 'down'].includes(keyCodeDirections[e.keyCode])) {
- var hideTip = false;
- var isActive = e.target.closest('[data-button-list="ckeditor5-toolbar-active__buttons"]');
+ let hideTip = false;
+ const isActive = e.target.closest('[data-button-list="ckeditor5-toolbar-active__buttons"]');
if (isActive) {
if (['tab', 'left', 'up', 'right'].includes(keyCodeDirections[e.keyCode])) {
@@ -398,14 +332,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
});
});
- var updateUiStateStorage = function updateUiStateStorage(states) {
- var form = document.querySelector('#filter-format-edit-form, #filter-format-add-form');
- var currentStates = form.hasAttribute('data-drupal-ui-state') ? JSON.parse(form.getAttribute('data-drupal-ui-state')) : {};
- form.setAttribute('data-drupal-ui-state', JSON.stringify(_objectSpread(_objectSpread({}, currentStates), states)));
+ const updateUiStateStorage = states => {
+ const form = document.querySelector('#filter-format-edit-form, #filter-format-add-form');
+ const currentStates = form.hasAttribute('data-drupal-ui-state') ? JSON.parse(form.getAttribute('data-drupal-ui-state')) : {};
+ form.setAttribute('data-drupal-ui-state', JSON.stringify({ ...currentStates,
+ ...states
+ }));
};
- var getUiStateStorage = function getUiStateStorage(property) {
- var form = document.querySelector('#filter-format-edit-form, #filter-format-add-form');
+ const getUiStateStorage = property => {
+ const form = document.querySelector('#filter-format-edit-form, #filter-format-add-form');
if (form === null) {
return;
@@ -414,25 +350,25 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
return form.hasAttribute('data-drupal-ui-state') ? JSON.parse(form.getAttribute('data-drupal-ui-state'))[property] : null;
};
- once('ui-state-storage', document.querySelector('#filter-format-edit-form, #filter-format-add-form')).forEach(function (form) {
+ once('ui-state-storage', document.querySelector('#filter-format-edit-form, #filter-format-add-form')).forEach(form => {
form.setAttribute('data-drupal-ui-state', JSON.stringify({}));
});
- var maintainActiveVerticalTab = function maintainActiveVerticalTab(verticalTabs) {
- var id = verticalTabs.id;
- var activeTab = getUiStateStorage("".concat(id, "-active-tab"));
+ const maintainActiveVerticalTab = verticalTabs => {
+ const id = verticalTabs.id;
+ const activeTab = getUiStateStorage(`${id}-active-tab`);
if (activeTab) {
- setTimeout(function () {
+ setTimeout(() => {
document.querySelector(activeTab).click();
});
}
- verticalTabs.querySelectorAll('.vertical-tabs__menu').forEach(function (tab) {
- tab.addEventListener('click', function (e) {
- var state = {};
- var href = e.target.closest('[href]').getAttribute('href').split('--')[0];
- state["".concat(id, "-active-tab")] = "#".concat(id, " [href^='").concat(href, "']");
+ verticalTabs.querySelectorAll('.vertical-tabs__menu').forEach(tab => {
+ tab.addEventListener('click', e => {
+ const state = {};
+ const href = e.target.closest('[href]').getAttribute('href').split('--')[0];
+ state[`${id}-active-tab`] = `#${id} [href^='${href}']`;
updateUiStateStorage(state);
});
});
@@ -440,62 +376,58 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
once('plugin-settings', document.querySelector('#plugin-settings-wrapper')).forEach(maintainActiveVerticalTab);
once('filter-settings', document.querySelector('#filter-settings-wrapper')).forEach(maintainActiveVerticalTab);
- var selectedButtons = document.querySelector('#ckeditor5-toolbar-buttons-selected');
- once('textarea-listener', selectedButtons).forEach(function (textarea) {
- textarea.addEventListener('change', function (e) {
- var buttonName = document.activeElement.getAttribute('data-id');
+ const selectedButtons = document.querySelector('#ckeditor5-toolbar-buttons-selected');
+ once('textarea-listener', selectedButtons).forEach(textarea => {
+ textarea.addEventListener('change', e => {
+ const buttonName = document.activeElement.getAttribute('data-id');
if (!buttonName) {
return;
}
- var focusSelector = '';
+ let focusSelector = '';
if (['divider', 'wrapping'].includes(buttonName)) {
- var oldConfig = JSON.parse(e.detail.priorValue);
- var newConfig = JSON.parse(e.target.innerHTML);
+ const oldConfig = JSON.parse(e.detail.priorValue);
+ const newConfig = JSON.parse(e.target.innerHTML);
if (oldConfig.length > newConfig.length) {
- for (var item = 0; item < newConfig.length; item++) {
+ for (let item = 0; item < newConfig.length; item++) {
if (newConfig[item] !== oldConfig[item]) {
- focusSelector = "[data-button-list=\"ckeditor5-toolbar-active-buttons\"] li:nth-child(".concat(Math.min(item - 1, 0), ")");
+ focusSelector = `[data-button-list="ckeditor5-toolbar-active-buttons"] li:nth-child(${Math.min(item - 1, 0)})`;
break;
}
}
} else if (oldConfig.length < newConfig.length) {
focusSelector = '[data-button-list="ckeditor5-toolbar-active-buttons"] li:last-child';
} else {
- document.querySelectorAll("[data-button-list=\"ckeditor5-toolbar-active-buttons\"] [data-id='".concat(buttonName, "']")).forEach(function (divider, index) {
+ document.querySelectorAll(`[data-button-list="ckeditor5-toolbar-active-buttons"] [data-id='${buttonName}']`).forEach((divider, index) => {
if (divider === document.activeElement) {
- focusSelector = "".concat(buttonName, "|").concat(index);
+ focusSelector = `${buttonName}|${index}`;
}
});
}
} else {
- focusSelector = "[data-id='".concat(buttonName, "']");
+ focusSelector = `[data-id='${buttonName}']`;
}
updateUiStateStorage({
- focusSelector: focusSelector
+ focusSelector
});
});
- textarea.addEventListener('focus', function () {
- var focusSelector = getUiStateStorage('focusSelector');
+ textarea.addEventListener('focus', () => {
+ const focusSelector = getUiStateStorage('focusSelector');
if (focusSelector) {
if (focusSelector.includes('|')) {
- var _focusSelector$split = focusSelector.split('|'),
- _focusSelector$split2 = _slicedToArray(_focusSelector$split, 2),
- buttonName = _focusSelector$split2[0],
- count = _focusSelector$split2[1];
-
- document.querySelectorAll("[data-button-list=\"ckeditor5-toolbar-active-buttons\"] [data-id='".concat(buttonName, "']")).forEach(function (item, index) {
+ const [buttonName, count] = focusSelector.split('|');
+ document.querySelectorAll(`[data-button-list="ckeditor5-toolbar-active-buttons"] [data-id='${buttonName}']`).forEach((item, index) => {
if (index === parseInt(count, 10)) {
item.focus();
}
});
} else {
- var toFocus = document.querySelector(focusSelector);
+ const toFocus = document.querySelector(focusSelector);
if (toFocus) {
toFocus.focus();
@@ -505,74 +437,112 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
});
});
}
+
};
- Drupal.theme.ckeditor5SelectedButtons = function (_ref3) {
- var buttons = _ref3.buttons;
- return "\n <ul class=\"ckeditor5-toolbar-tray ckeditor5-toolbar-active__buttons\" data-button-list=\"ckeditor5-toolbar-active-buttons\" role=\"listbox\" aria-orientation=\"horizontal\" aria-labelledby=\"ckeditor5-toolbar-active-buttons-label\">\n ".concat(buttons.map(function (button) {
- return Drupal.theme.ckeditor5Button({
- button: button,
- listType: 'active'
- });
- }).join(''), "\n </ul>\n ");
+ Drupal.theme.ckeditor5SelectedButtons = ({
+ buttons
+ }) => {
+ return `
+ <ul class="ckeditor5-toolbar-tray ckeditor5-toolbar-active__buttons" data-button-list="ckeditor5-toolbar-active-buttons" role="listbox" aria-orientation="horizontal" aria-labelledby="ckeditor5-toolbar-active-buttons-label">
+ ${buttons.map(button => Drupal.theme.ckeditor5Button({
+ button,
+ listType: 'active'
+ })).join('')}
+ </ul>
+ `;
};
- Drupal.theme.ckeditor5DividerButtons = function (_ref4) {
- var buttons = _ref4.buttons;
- return "\n <ul class=\"ckeditor5-toolbar-tray ckeditor5-toolbar-divider__buttons\" data-button-list=\"ckeditor5-toolbar-divider-buttons\" role=\"listbox\" aria-orientation=\"horizontal\" aria-labelledby=\"ckeditor5-toolbar-divider-buttons-label\">\n ".concat(buttons.map(function (button) {
- return Drupal.theme.ckeditor5Button({
- button: button,
- listType: 'divider'
- });
- }).join(''), "\n </ul>\n ");
+ Drupal.theme.ckeditor5DividerButtons = ({
+ buttons
+ }) => {
+ return `
+ <ul class="ckeditor5-toolbar-tray ckeditor5-toolbar-divider__buttons" data-button-list="ckeditor5-toolbar-divider-buttons" role="listbox" aria-orientation="horizontal" aria-labelledby="ckeditor5-toolbar-divider-buttons-label">
+ ${buttons.map(button => Drupal.theme.ckeditor5Button({
+ button,
+ listType: 'divider'
+ })).join('')}
+ </ul>
+ `;
};
- Drupal.theme.ckeditor5AvailableButtons = function (_ref5) {
- var buttons = _ref5.buttons;
- return "\n <ul class=\"ckeditor5-toolbar-tray ckeditor5-toolbar-available__buttons\" data-button-list=\"ckeditor5-toolbar-available-buttons\" role=\"listbox\" aria-orientation=\"horizontal\" aria-labelledby=\"ckeditor5-toolbar-available-buttons-label\">\n ".concat(buttons.map(function (button) {
- return Drupal.theme.ckeditor5Button({
- button: button,
- listType: 'available'
- });
- }).join(''), "\n </ul>\n ");
+ Drupal.theme.ckeditor5AvailableButtons = ({
+ buttons
+ }) => {
+ return `
+ <ul class="ckeditor5-toolbar-tray ckeditor5-toolbar-available__buttons" data-button-list="ckeditor5-toolbar-available-buttons" role="listbox" aria-orientation="horizontal" aria-labelledby="ckeditor5-toolbar-available-buttons-label">
+ ${buttons.map(button => Drupal.theme.ckeditor5Button({
+ button,
+ listType: 'available'
+ })).join('')}
+ </ul>
+ `;
};
- Drupal.theme.ckeditor5Button = function (_ref6) {
- var _ref6$button = _ref6.button,
- label = _ref6$button.label,
- id = _ref6$button.id,
- listType = _ref6.listType;
- var visuallyHiddenLabel = Drupal.t("@listType button @label", {
+ Drupal.theme.ckeditor5Button = ({
+ button: {
+ label,
+ id
+ },
+ listType
+ }) => {
+ const visuallyHiddenLabel = Drupal.t(`@listType button @label`, {
'@listType': listType !== 'divider' ? listType : 'available',
'@label': label
});
- return "\n <li class=\"ckeditor5-toolbar-item ckeditor5-toolbar-item-".concat(id, "\" role=\"option\" tabindex=\"0\" data-drupal-selector=\"ckeditor5-toolbar-button\" data-id=\"").concat(id, "\" data-label=\"").concat(label, "\" data-divider=\"").concat(listType === 'divider', "\">\n <span class=\"ckeditor5-toolbar-button ckeditor5-toolbar-button-").concat(id, "\">\n <span class=\"visually-hidden\">").concat(visuallyHiddenLabel, ")}</span>\n </span>\n <span class=\"ckeditor5-toolbar-tooltip\" aria-hidden=\"true\">").concat(label, "</span>\n </li>\n ");
+ return `
+ <li class="ckeditor5-toolbar-item ckeditor5-toolbar-item-${id}" role="option" tabindex="0" data-drupal-selector="ckeditor5-toolbar-button" data-id="${id}" data-label="${label}" data-divider="${listType === 'divider'}">
+ <span class="ckeditor5-toolbar-button ckeditor5-toolbar-button-${id}">
+ <span class="visually-hidden">${visuallyHiddenLabel})}</span>
+ </span>
+ <span class="ckeditor5-toolbar-tooltip" aria-hidden="true">${label}</span>
+ </li>
+ `;
};
- Drupal.theme.ckeditor5Admin = function (_ref7) {
- var availableButtons = _ref7.availableButtons,
- dividerButtons = _ref7.dividerButtons,
- activeToolbar = _ref7.activeToolbar,
- helpMessage = _ref7.helpMessage;
- return "\n <div aria-live=\"polite\" data-drupal-selector=\"ckeditor5-admin-help-message\">\n <p>".concat(helpMessage.join('</p><p>'), "</p>\n </div>\n <div class=\"ckeditor5-toolbar-disabled\">\n <div class=\"ckeditor5-toolbar-available\">\n <label id=\"ckeditor5-toolbar-available-buttons-label\">").concat(Drupal.t('Available buttons'), "</label>\n ").concat(availableButtons, "\n </div>\n <div class=\"ckeditor5-toolbar-divider\">\n <label id=\"ckeditor5-toolbar-divider-buttons-label\">").concat(Drupal.t('Button divider'), "</label>\n ").concat(dividerButtons, "\n </div>\n </div>\n <div class=\"ckeditor5-toolbar-active\">\n <label id=\"ckeditor5-toolbar-active-buttons-label\">").concat(Drupal.t('Active toolbar'), "</label>\n ").concat(activeToolbar, "\n </div>\n ");
+ Drupal.theme.ckeditor5Admin = ({
+ availableButtons,
+ dividerButtons,
+ activeToolbar,
+ helpMessage
+ }) => {
+ return `
+ <div aria-live="polite" data-drupal-selector="ckeditor5-admin-help-message">
+ <p>${helpMessage.join('</p><p>')}</p>
+ </div>
+ <div class="ckeditor5-toolbar-disabled">
+ <div class="ckeditor5-toolbar-available">
+ <label id="ckeditor5-toolbar-available-buttons-label">${Drupal.t('Available buttons')}</label>
+ ${availableButtons}
+ </div>
+ <div class="ckeditor5-toolbar-divider">
+ <label id="ckeditor5-toolbar-divider-buttons-label">${Drupal.t('Button divider')}</label>
+ ${dividerButtons}
+ </div>
+ </div>
+ <div class="ckeditor5-toolbar-active">
+ <label id="ckeditor5-toolbar-active-buttons-label">${Drupal.t('Active toolbar')}</label>
+ ${activeToolbar}
+ </div>
+ `;
};
- var originalFilterStatusAttach = Drupal.behaviors.filterStatus.attach;
+ const originalFilterStatusAttach = Drupal.behaviors.filterStatus.attach;
- Drupal.behaviors.filterStatus.attach = function (context, settings) {
- var filterStatusCheckboxes = document.querySelectorAll('#filters-status-wrapper input.form-checkbox');
+ Drupal.behaviors.filterStatus.attach = (context, settings) => {
+ const filterStatusCheckboxes = document.querySelectorAll('#filters-status-wrapper input.form-checkbox');
once.remove('filter-status', filterStatusCheckboxes);
$(filterStatusCheckboxes).off('click.filterUpdate');
originalFilterStatusAttach(context, settings);
};
Drupal.behaviors.tabErrorsVisible = {
- attach: function attach(context) {
- context.querySelectorAll('details .form-item .error').forEach(function (item) {
- var details = item.closest('details');
+ attach(context) {
+ context.querySelectorAll('details .form-item .error').forEach(item => {
+ const details = item.closest('details');
if (details.style.display === 'none') {
- var tabSelect = document.querySelector("[href='#".concat(details.id, "']"));
+ const tabSelect = document.querySelector(`[href='#${details.id}']`);
if (tabSelect) {
tabSelect.click();
@@ -580,5 +550,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
}
});
}
+
};
})(Drupal, drupalSettings, jQuery, JSON, once, Sortable);
\ No newline at end of file
diff --git a/core/modules/ckeditor5/js/ckeditor5.filter.admin.js b/core/modules/ckeditor5/js/ckeditor5.filter.admin.js
index 2e8a0a0d970d933fb4e934cc0ca4f7e816bd9fba..c375fa50eb9fce3c7ba3db6edadec998f78470a4 100644
--- a/core/modules/ckeditor5/js/ckeditor5.filter.admin.js
+++ b/core/modules/ckeditor5/js/ckeditor5.filter.admin.js
@@ -5,23 +5,23 @@
* @preserve
**/
-(function (Drupal, once) {
+((Drupal, once) => {
Drupal.behaviors.allowedTagsListener = {
attach: function attach(context) {
- once('allowed-tags-listener', context.querySelector('[data-drupal-selector="edit-filters-filter-html-settings-allowed-html"]')).forEach(function (textarea) {
- var editorSelect = document.querySelector('[data-drupal-selector="edit-editor-editor"]');
- var filterCheckbox = document.querySelector('[data-drupal-selector="edit-filters-filter-html-status"]');
- var formSubmit = document.querySelector('[data-drupal-selector="edit-actions-submit"]');
- var wrapper = textarea.closest('div');
+ once('allowed-tags-listener', context.querySelector('[data-drupal-selector="edit-filters-filter-html-settings-allowed-html"]')).forEach(textarea => {
+ const editorSelect = document.querySelector('[data-drupal-selector="edit-editor-editor"]');
+ const filterCheckbox = document.querySelector('[data-drupal-selector="edit-filters-filter-html-status"]');
+ const formSubmit = document.querySelector('[data-drupal-selector="edit-actions-submit"]');
+ const wrapper = textarea.closest('div');
- var resetChanges = function resetChanges() {
- var updateButtonContainer = document.querySelector('[data-ckeditor5-allowed-tags-info]');
+ const resetChanges = () => {
+ const updateButtonContainer = document.querySelector('[data-ckeditor5-allowed-tags-info]');
if (updateButtonContainer) {
updateButtonContainer.remove();
}
- var allowedTagsDisabledHelp = document.querySelector('[data-ckeditor5-allowed-tags-disabled-help]');
+ const allowedTagsDisabledHelp = document.querySelector('[data-ckeditor5-allowed-tags-disabled-help]');
if (allowedTagsDisabledHelp) {
allowedTagsDisabledHelp.remove();
@@ -33,22 +33,22 @@
resetChanges();
- var addAllowedTagsUpdateButton = function addAllowedTagsUpdateButton() {
+ const addAllowedTagsUpdateButton = () => {
resetChanges();
if (editorSelect.value === 'ckeditor5' && filterCheckbox && filterCheckbox.checked) {
if (!textarea.hasAttribute('readonly')) {
wrapper.classList.add('ckeditor5-filter-attention');
- var container = document.createElement('div');
+ const container = document.createElement('div');
container.setAttribute('data-ckeditor5-allowed-tags-info', true);
- var description = document.createElement('p');
+ const description = document.createElement('p');
description.innerText = Drupal.t('Switching to CKEditor 5 requires, at minimum, the tags "<p> <br>". After switching to CKEditor 5, this field will be read only, and will be updated based on which CKEditor 5 plugins are enabled. When switching to CKEditor 5 from an existing text format with content, we recommend documenting what tags are in use and then enabling the CKEditor 5 tags that support them.');
- var updateButton = document.createElement('button');
+ const updateButton = document.createElement('button');
updateButton.setAttribute('name', 'update-ckeditor5-allowed-tags');
updateButton.innerText = Drupal.t('Apply changes to allowed tags.');
- updateButton.addEventListener('click', function () {
+ updateButton.addEventListener('click', () => {
editorSelect.dispatchEvent(new CustomEvent('change'));
- setTimeout(function () {
+ setTimeout(() => {
resetChanges();
});
});
@@ -56,7 +56,7 @@
container.appendChild(updateButton);
wrapper.appendChild(container);
formSubmit.setAttribute('disabled', true);
- var formSubmitHelp = document.createElement('p');
+ const formSubmitHelp = document.createElement('p');
formSubmitHelp.setAttribute('data-ckeditor5-allowed-tags-disabled-help', true);
formSubmitHelp.textContent = Drupal.t('This form is not submittable when the editor is set to CKEditor 5 unless the "Limit allowed HTML tags and correct faulty HTML" filter\'s "Allowed HTML tags" field includes the tags required by CKEDitor 5');
formSubmit.parentNode.append(formSubmitHelp);
@@ -69,19 +69,15 @@
});
}
};
- var originalAjaxEventResponse = Drupal.Ajax.prototype.eventResponse;
+ const originalAjaxEventResponse = Drupal.Ajax.prototype.eventResponse;
- Drupal.Ajax.prototype.eventResponse = function ckeditor5AjaxEventResponse() {
+ Drupal.Ajax.prototype.eventResponse = function ckeditor5AjaxEventResponse(...args) {
if (this.ckeditor5_only) {
if (this.$form[0].querySelector('#edit-editor-editor').value !== 'ckeditor5') {
return;
}
}
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
originalAjaxEventResponse.apply(this, args);
};
})(Drupal, once);
\ No newline at end of file
diff --git a/core/modules/ckeditor5/js/ckeditor5.js b/core/modules/ckeditor5/js/ckeditor5.js
index e216c1228f43df4e9f5c35609ad2ec12405b4117..4a85cb7ea897e87597e9633b6517318ca325b00f 100644
--- a/core/modules/ckeditor5/js/ckeditor5.js
+++ b/core/modules/ckeditor5/js/ckeditor5.js
@@ -5,45 +5,17 @@
* @preserve
**/
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-(function (Drupal, debounce, CKEditor5, $) {
+((Drupal, debounce, CKEditor5, $) => {
Drupal.CKEditor5Instances = new Map();
- var callbacks = new Map();
- var required = new Set();
+ const callbacks = new Map();
+ const required = new Set();
function findFunc(scope, name) {
if (!scope) {
return null;
}
- var parts = name.includes('.') ? name.split('.') : name;
+ const parts = name.includes('.') ? name.split('.') : name;
if (parts.length > 1) {
return findFunc(scope[parts.shift()], parts);
@@ -53,11 +25,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
}
function buildFunc(config) {
- var func = config.func;
- var fn = findFunc(window, func.name);
+ const {
+ func
+ } = config;
+ const fn = findFunc(window, func.name);
if (typeof fn === 'function') {
- var result = func.invoke ? fn.apply(void 0, _toConsumableArray(func.args)) : fn;
+ const result = func.invoke ? fn(...func.args) : fn;
return result;
}
@@ -65,16 +39,18 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
}
function buildRegexp(config) {
- var pattern = config.regexp.pattern;
- var main = pattern.match(/\/(.+)\/.*/)[1];
- var options = pattern.match(/\/.+\/(.*)/)[1];
+ const {
+ pattern
+ } = config.regexp;
+ const main = pattern.match(/\/(.+)\/.*/)[1];
+ const options = pattern.match(/\/.+\/(.*)/)[1];
return new RegExp(main, options);
}
function processConfig(config) {
function processArray(config) {
- return config.map(function (item) {
- if (_typeof(item) === 'object') {
+ return config.map(item => {
+ if (typeof item === 'object') {
return processConfig(item);
}
@@ -82,12 +58,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
});
}
- return Object.entries(config).reduce(function (processed, _ref) {
- var _ref2 = _slicedToArray(_ref, 2),
- key = _ref2[0],
- value = _ref2[1];
-
- if (_typeof(value) === 'object') {
+ return Object.entries(config).reduce((processed, [key, value]) => {
+ if (typeof value === 'object') {
if (value.hasOwnProperty('func')) {
processed[key] = buildFunc(value);
} else if (value.hasOwnProperty('regexp')) {
@@ -105,92 +77,84 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
}, {});
}
- var setElementId = function setElementId(element) {
- var id = Math.random().toString().slice(2, 9);
+ const setElementId = element => {
+ const id = Math.random().toString().slice(2, 9);
element.setAttribute('data-ckeditor5-id', id);
return id;
};
- var getElementId = function getElementId(element) {
- return element.getAttribute('data-ckeditor5-id');
- };
+ const getElementId = element => element.getAttribute('data-ckeditor5-id');
function selectPlugins(plugins) {
- return plugins.map(function (pluginDefinition) {
- var _pluginDefinition$spl = pluginDefinition.split('.'),
- _pluginDefinition$spl2 = _slicedToArray(_pluginDefinition$spl, 2),
- build = _pluginDefinition$spl2[0],
- name = _pluginDefinition$spl2[1];
+ return plugins.map(pluginDefinition => {
+ const [build, name] = pluginDefinition.split('.');
if (CKEditor5[build] && CKEditor5[build][name]) {
return CKEditor5[build][name];
}
- console.warn("Failed to load ".concat(build, " - ").concat(name));
+ console.warn(`Failed to load ${build} - ${name}`);
return null;
});
}
- var offCanvasCss = function offCanvasCss(element) {
+ const offCanvasCss = element => {
element.parentNode.setAttribute('data-drupal-ck-style-fence', true);
if (!document.querySelector('#ckeditor5-off-canvas-reset')) {
- var prefix = "#drupal-off-canvas [data-drupal-ck-style-fence]";
- var existingCss = '';
-
- _toConsumableArray(document.styleSheets).forEach(function (sheet) {
+ const prefix = `#drupal-off-canvas [data-drupal-ck-style-fence]`;
+ let existingCss = '';
+ [...document.styleSheets].forEach(sheet => {
if (!sheet.href || sheet.href && sheet.href.indexOf('off-canvas') === -1) {
try {
- var rules = sheet.cssRules;
-
- _toConsumableArray(rules).forEach(function (rule) {
- var cssText = rule.cssText;
- var selector = rule.cssText.split('{')[0];
- cssText = cssText.replace(selector, selector.replace(/,/g, ", ".concat(prefix)));
- existingCss += "".concat(prefix, " ").concat(cssText);
+ const rules = sheet.cssRules;
+ [...rules].forEach(rule => {
+ let {
+ cssText
+ } = rule;
+ const selector = rule.cssText.split('{')[0];
+ cssText = cssText.replace(selector, selector.replace(/,/g, `, ${prefix}`));
+ existingCss += `${prefix} ${cssText}`;
});
} catch (e) {
- console.warn("Stylesheet ".concat(sheet.href, " not included in CKEditor reset due to the browser's CORS policy."));
+ console.warn(`Stylesheet ${sheet.href} not included in CKEditor reset due to the browser's CORS policy.`);
}
}
});
-
- var addedCss = ["".concat(prefix, " .ck.ck-content {display:block;min-height:5rem;}"), "".concat(prefix, " .ck.ck-content * {display:initial;background:initial;color:initial;padding:initial;}"), "".concat(prefix, " .ck.ck-content li {display:list-item}"), "".concat(prefix, " .ck.ck-content ol li {list-style-type: decimal}"), "".concat(prefix, " .ck[contenteditable], ").concat(prefix, " .ck[contenteditable] * {-webkit-user-modify: read-write;-moz-user-modify: read-write;}")];
- var blockSelectors = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'ol', 'ul', 'address', 'article', 'aside', 'blockquote', 'body', 'dd', 'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'header', 'hgroup', 'hr', 'html', 'legend', 'main', 'menu', 'pre', 'section', 'xmp'].map(function (blockElement) {
- return "".concat(prefix, " .ck.ck-content ").concat(blockElement);
- }).join(', \n');
- var blockCss = "".concat(blockSelectors, " { display: block; }");
- var prefixedCss = [].concat(addedCss, [existingCss, blockCss]).join('\n');
-
- var _offCanvasCss = document.createElement('style');
-
- _offCanvasCss.innerHTML = prefixedCss;
-
- _offCanvasCss.setAttribute('id', 'ckeditor5-off-canvas-reset');
-
- document.body.appendChild(_offCanvasCss);
+ const addedCss = [`${prefix} .ck.ck-content {display:block;min-height:5rem;}`, `${prefix} .ck.ck-content * {display:initial;background:initial;color:initial;padding:initial;}`, `${prefix} .ck.ck-content li {display:list-item}`, `${prefix} .ck.ck-content ol li {list-style-type: decimal}`, `${prefix} .ck[contenteditable], ${prefix} .ck[contenteditable] * {-webkit-user-modify: read-write;-moz-user-modify: read-write;}`];
+ const blockSelectors = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'ol', 'ul', 'address', 'article', 'aside', 'blockquote', 'body', 'dd', 'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'header', 'hgroup', 'hr', 'html', 'legend', 'main', 'menu', 'pre', 'section', 'xmp'].map(blockElement => `${prefix} .ck.ck-content ${blockElement}`).join(', \n');
+ const blockCss = `${blockSelectors} { display: block; }`;
+ const prefixedCss = [...addedCss, existingCss, blockCss].join('\n');
+ const offCanvasCss = document.createElement('style');
+ offCanvasCss.innerHTML = prefixedCss;
+ offCanvasCss.setAttribute('id', 'ckeditor5-off-canvas-reset');
+ document.body.appendChild(offCanvasCss);
}
};
Drupal.editors.ckeditor5 = {
- attach: function attach(element, format) {
- var editorClassic = CKEditor5.editorClassic;
- var _format$editorSetting = format.editorSettings,
- toolbar = _format$editorSetting.toolbar,
- plugins = _format$editorSetting.plugins,
- pluginConfig = _format$editorSetting.config,
- language = _format$editorSetting.language;
- var extraPlugins = selectPlugins(plugins);
-
- var config = _objectSpread({
- extraPlugins: extraPlugins,
- toolbar: toolbar,
- language: language
- }, processConfig(pluginConfig));
-
- var id = setElementId(element);
- var ClassicEditor = editorClassic.ClassicEditor;
- ClassicEditor.create(element, config).then(function (editor) {
+ attach(element, format) {
+ const {
+ editorClassic
+ } = CKEditor5;
+ const {
+ toolbar,
+ plugins,
+ config: pluginConfig,
+ language
+ } = format.editorSettings;
+ const extraPlugins = selectPlugins(plugins);
+ const config = {
+ extraPlugins,
+ toolbar,
+ language,
+ ...processConfig(pluginConfig)
+ };
+ const id = setElementId(element);
+ const {
+ ClassicEditor
+ } = editorClassic;
+ ClassicEditor.create(element, config).then(editor => {
Drupal.CKEditor5Instances.set(id, editor);
if (element.hasAttribute('required')) {
@@ -198,8 +162,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
element.removeAttribute('required');
}
- editor.model.document.on('change:data', function () {
- var callback = callbacks.get(id);
+ editor.model.document.on('change:data', () => {
+ const callback = callbacks.get(id);
if (callback) {
if (editor.plugins.has('SourceEditing')) {
@@ -212,18 +176,19 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
debounce(callback, 400)();
}
});
- var isOffCanvas = element.closest('#drupal-off-canvas');
+ const isOffCanvas = element.closest('#drupal-off-canvas');
if (isOffCanvas) {
offCanvasCss(element);
}
- }).catch(function (error) {
+ }).catch(error => {
console.error(error);
});
},
- detach: function detach(element, format, trigger) {
- var id = getElementId(element);
- var editor = Drupal.CKEditor5Instances.get(id);
+
+ detach(element, format, trigger) {
+ const id = getElementId(element);
+ const editor = Drupal.CKEditor5Instances.get(id);
if (!editor) {
return;
@@ -233,9 +198,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
editor.updateSourceElement();
} else {
element.removeAttribute('contentEditable');
- var textElement = null;
- var originalValue = null;
- var usingQuickEdit = (((Drupal || {}).quickedit || {}).editors || {}).editor;
+ let textElement = null;
+ let originalValue = null;
+ const usingQuickEdit = (((Drupal || {}).quickedit || {}).editors || {}).editor;
if (usingQuickEdit) {
Drupal.quickedit.editors.editor.prototype.revert = function revertQuickeditChanges() {
@@ -244,7 +209,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
};
}
- editor.destroy().then(function () {
+ editor.destroy().then(() => {
if (textElement && originalValue) {
textElement.innerHTML = originalValue;
}
@@ -256,62 +221,70 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
element.setAttribute('required', 'required');
required.delete(id);
}
- }).catch(function (error) {
+ }).catch(error => {
console.error(error);
});
}
},
- onChange: function onChange(element, callback) {
+
+ onChange(element, callback) {
callbacks.set(getElementId(element), callback);
},
- attachInlineEditor: function attachInlineEditor(element, format, mainToolbarId) {
- var editorDecoupled = CKEditor5.editorDecoupled;
- var _format$editorSetting2 = format.editorSettings,
- toolbar = _format$editorSetting2.toolbar,
- plugins = _format$editorSetting2.plugins,
- pluginConfig = _format$editorSetting2.config,
- language = _format$editorSetting2.language;
- var extraPlugins = selectPlugins(plugins);
-
- var config = _objectSpread({
- extraPlugins: extraPlugins,
- toolbar: toolbar,
- language: language
- }, processConfig(pluginConfig));
-
- var id = setElementId(element);
- var DecoupledEditor = editorDecoupled.DecoupledEditor;
- DecoupledEditor.create(element, config).then(function (editor) {
+
+ attachInlineEditor(element, format, mainToolbarId) {
+ const {
+ editorDecoupled
+ } = CKEditor5;
+ const {
+ toolbar,
+ plugins,
+ config: pluginConfig,
+ language
+ } = format.editorSettings;
+ const extraPlugins = selectPlugins(plugins);
+ const config = {
+ extraPlugins,
+ toolbar,
+ language,
+ ...processConfig(pluginConfig)
+ };
+ const id = setElementId(element);
+ const {
+ DecoupledEditor
+ } = editorDecoupled;
+ DecoupledEditor.create(element, config).then(editor => {
Drupal.CKEditor5Instances.set(id, editor);
- var toolbar = document.getElementById(mainToolbarId);
+ const toolbar = document.getElementById(mainToolbarId);
toolbar.appendChild(editor.ui.view.toolbar.element);
- editor.model.document.on('change:data', function () {
- var callback = callbacks.get(id);
+ editor.model.document.on('change:data', () => {
+ const callback = callbacks.get(id);
if (callback) {
debounce(callback, 400)(editor.getData());
}
});
- }).catch(function (error) {
+ }).catch(error => {
console.error(error);
});
}
+
};
Drupal.ckeditor5 = {
saveCallback: null,
- openDialog: function openDialog(url, saveCallback, dialogSettings) {
- var classes = dialogSettings.dialogClass ? dialogSettings.dialogClass.split(' ') : [];
+
+ openDialog(url, saveCallback, dialogSettings) {
+ const classes = dialogSettings.dialogClass ? dialogSettings.dialogClass.split(' ') : [];
classes.push('ui-dialog--narrow');
dialogSettings.dialogClass = classes.join(' ');
dialogSettings.autoResize = window.matchMedia('(min-width: 600px)').matches;
dialogSettings.width = 'auto';
- var $content = $("<div class=\"ckeditor5-dialog-loading\"><span style=\"top: -40px;\" class=\"ckeditor5-dialog-loading-link\">".concat(Drupal.t('Loading...'), "</span></div>"));
+ const $content = $(`<div class="ckeditor5-dialog-loading"><span style="top: -40px;" class="ckeditor5-dialog-loading-link">${Drupal.t('Loading...')}</span></div>`);
$content.appendTo($('body'));
- var ckeditorAjaxDialog = Drupal.ajax({
+ const ckeditorAjaxDialog = Drupal.ajax({
dialog: dialogSettings,
dialogType: 'modal',
selector: '.ckeditor5-dialog-loading-link',
- url: url,
+ url,
progress: {
type: 'throbber'
},
@@ -320,27 +293,28 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
}
});
ckeditorAjaxDialog.execute();
- window.setTimeout(function () {
+ window.setTimeout(() => {
$content.find('span').animate({
top: '0px'
});
}, 1000);
Drupal.ckeditor5.saveCallback = saveCallback;
}
+
};
- $(window).on('dialog:beforecreate', function () {
+ $(window).on('dialog:beforecreate', () => {
$('.ckeditor5-dialog-loading').animate({
top: '-40px'
}, function removeDialogLoading() {
$(this).remove();
});
});
- $(window).on('editor:dialogsave', function (e, values) {
+ $(window).on('editor:dialogsave', (e, values) => {
if (Drupal.ckeditor5.saveCallback) {
Drupal.ckeditor5.saveCallback(values);
}
});
- $(window).on('dialog:afterclose', function () {
+ $(window).on('dialog:afterclose', () => {
if (Drupal.ckeditor5.saveCallback) {
Drupal.ckeditor5.saveCallback = null;
}
diff --git a/core/modules/ckeditor5/js/ie11.filter.warnings.js b/core/modules/ckeditor5/js/ie11.filter.warnings.js
index 2afbf8b6a774571e19fe91423d0d6d55f35e450b..4b643a633030c2e74d5d13535d42fbdd96f6acac 100644
--- a/core/modules/ckeditor5/js/ie11.filter.warnings.js
+++ b/core/modules/ckeditor5/js/ie11.filter.warnings.js
@@ -5,20 +5,20 @@
* @preserve
**/
-(function (Drupal, once, Modernizr) {
+((Drupal, once, Modernizr) => {
Drupal.behaviors.ckEditor5warn = {
attach: function attach() {
- var isIE11 = Modernizr.mq('(-ms-high-contrast: active), (-ms-high-contrast: none)');
- var editorSelect = once('editor-select', document.querySelector('#filter-format-edit-form #edit-editor-editor, #filter-format-add-form #edit-editor-editor'));
+ const isIE11 = Modernizr.mq('(-ms-high-contrast: active), (-ms-high-contrast: none)');
+ const editorSelect = once('editor-select', document.querySelector('#filter-format-edit-form #edit-editor-editor, #filter-format-add-form #edit-editor-editor'));
if (typeof editorSelect[0] !== 'undefined') {
- var select = editorSelect[0];
- var selectMessageContainer = document.createElement('div');
+ const select = editorSelect[0];
+ const selectMessageContainer = document.createElement('div');
select.parentNode.insertBefore(selectMessageContainer, select);
- var selectMessages = new Drupal.Message(selectMessageContainer);
- var editorSettings = document.querySelector('#editor-settings-wrapper');
+ const selectMessages = new Drupal.Message(selectMessageContainer);
+ const editorSettings = document.querySelector('#editor-settings-wrapper');
- var ck5Warning = function ck5Warning() {
+ const ck5Warning = () => {
selectMessages.add(Drupal.t('CKEditor 5 is not compatible with Internet Explorer 11. Text fields using CKEditor 5 will still be editable but without the benefits of CKEditor.'), {
type: 'warning'
});
@@ -33,7 +33,7 @@
}
};
- var updateWarningStatus = function updateWarningStatus() {
+ const updateWarningStatus = () => {
if (select.value === 'ckeditor5' && !select.classList.contains('error')) {
ck5Warning();
} else {
@@ -42,11 +42,11 @@
}
};
- var selectChangeHandler = function selectChangeHandler() {
- var editorSelectObserver = null;
+ const selectChangeHandler = () => {
+ let editorSelectObserver = null;
function whenSelectAttributeChanges(mutations) {
- for (var i = 0; i < mutations.length; i++) {
+ for (let i = 0; i < mutations.length; i++) {
if (mutations[i].type === 'attributes' && mutations[i].attributeName === 'disabled' && !select.disabled) {
updateWarningStatus();
editorSelectObserver.disconnect();
diff --git a/core/modules/ckeditor5/js/ie11.user.warnings.js b/core/modules/ckeditor5/js/ie11.user.warnings.js
index d1849fbca00499f1e0e45a82ff4a6f6d50efafa7..e6b4af0d0210723e445bfd22f9c1044fecd4371b 100644
--- a/core/modules/ckeditor5/js/ie11.user.warnings.js
+++ b/core/modules/ckeditor5/js/ie11.user.warnings.js
@@ -5,22 +5,22 @@
* @preserve
**/
-(function (Drupal, Modernizr) {
- var isIE11 = Modernizr.mq('(-ms-high-contrast: active), (-ms-high-contrast: none)');
+((Drupal, Modernizr) => {
+ const isIE11 = Modernizr.mq('(-ms-high-contrast: active), (-ms-high-contrast: none)');
if (isIE11) {
- var quickEditLabelObserver = null;
+ let quickEditLabelObserver = null;
Drupal.editors.ckeditor5 = {
attach: function attach(element) {
- var editorMessageContainer = document.createElement('div');
+ const editorMessageContainer = document.createElement('div');
element.parentNode.insertBefore(editorMessageContainer, element);
- var editorMessages = new Drupal.Message(editorMessageContainer);
+ const editorMessages = new Drupal.Message(editorMessageContainer);
editorMessages.add(Drupal.t('Internet Explorer 11 user: a rich text editor is available for this field when used with any other supported browser.'), {
type: 'warning'
});
},
detach: function detach() {
- var quickEditToolbar = document.querySelector('#quickedit-entity-toolbar .quickedit-toolbar');
+ const quickEditToolbar = document.querySelector('#quickedit-entity-toolbar .quickedit-toolbar');
if (quickEditToolbar) {
quickEditToolbar.classList.remove('ck5-ie11');
@@ -30,13 +30,13 @@
},
onChange: function onChange() {},
attachInlineEditor: function attachInlineEditor(element) {
- var quickEditToolbar = document.querySelector('#quickedit-entity-toolbar .quickedit-toolbar');
- var notEditableAlert = Drupal.t('Field Not Editable');
- var notEditableMessage = Drupal.t('CKEditor 5 is not compatible with IE11.');
+ const quickEditToolbar = document.querySelector('#quickedit-entity-toolbar .quickedit-toolbar');
+ const notEditableAlert = Drupal.t('Field Not Editable');
+ const notEditableMessage = Drupal.t('CKEditor 5 is not compatible with IE11.');
function quickEditLabelWarnIE11(toolbarLabel) {
quickEditLabelObserver.disconnect();
- toolbarLabel.innerHTML = "<div><b>".concat(notEditableAlert, "</b><div>").concat(notEditableMessage, "</div></div>");
+ toolbarLabel.innerHTML = `<div><b>${notEditableAlert}</b><div>${notEditableMessage}</div></div>`;
quickEditLabelObserver.observe(toolbarLabel, {
childList: true
});
@@ -46,9 +46,9 @@
quickEditToolbar.classList.add('ck5-ie11');
quickEditToolbar.classList.remove('icon-pencil');
element.classList.add('ck5-ie11');
- var toolbarLabel = quickEditToolbar.querySelector('.quickedit-toolbar-label');
- quickEditLabelObserver = new MutationObserver(function (mutations) {
- for (var i = 0; i < mutations.length; i++) {
+ const toolbarLabel = quickEditToolbar.querySelector('.quickedit-toolbar-label');
+ quickEditLabelObserver = new MutationObserver(mutations => {
+ for (let i = 0; i < mutations.length; i++) {
if (mutations[i].type === 'childList') {
quickEditLabelWarnIE11(toolbarLabel);
}
diff --git a/core/modules/ckeditor5/js/media_embed_ckeditor5.theme.js b/core/modules/ckeditor5/js/media_embed_ckeditor5.theme.js
index 90d0db9545b9f14eaf98c2b055d1e8b916f76769..bcacbb8bb5bb1e097f1e603b4c91d928daf808e7 100644
--- a/core/modules/ckeditor5/js/media_embed_ckeditor5.theme.js
+++ b/core/modules/ckeditor5/js/media_embed_ckeditor5.theme.js
@@ -5,8 +5,6 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.mediaEmbedPreviewError = function () {
- return "<div>".concat(Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.'), "</div>");
- };
+(Drupal => {
+ Drupal.theme.mediaEmbedPreviewError = () => `<div>${Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.')}</div>`;
})(Drupal);
\ No newline at end of file
diff --git a/core/modules/ckeditor5/tests/src/Nightwatch/Tests/drupalHtmlBuilderTest.js b/core/modules/ckeditor5/tests/src/Nightwatch/Tests/drupalHtmlBuilderTest.js
index 8d416758b5177b21ab3fc8b35042987aa5b607ba..cb40904c511e60f3b846077b813aa88c9bf7918b 100644
--- a/core/modules/ckeditor5/tests/src/Nightwatch/Tests/drupalHtmlBuilderTest.js
+++ b/core/modules/ckeditor5/tests/src/Nightwatch/Tests/drupalHtmlBuilderTest.js
@@ -5,51 +5,53 @@
* @preserve
**/
-var assert = require('assert');
+const assert = require('assert');
-var fs = require('fs');
+const fs = require('fs');
-var path = require('path');
+const path = require('path');
-var _require = require('jsdom'),
- JSDOM = _require.JSDOM;
+const {
+ JSDOM
+} = require('jsdom');
-var DrupalHtmlBuilder = eval("(".concat(fs.readFileSync(path.resolve(__dirname, '../../../../js/ckeditor5_plugins/drupalHtmlEngine/src/drupalhtmlbuilder.js')).toString(), ")").replace('export default', ''));
-var _JSDOM$window = new JSDOM("<!DOCTYPE html>").window,
- document = _JSDOM$window.document,
- Node = _JSDOM$window.Node;
+const DrupalHtmlBuilder = eval(`(${fs.readFileSync(path.resolve(__dirname, '../../../../js/ckeditor5_plugins/drupalHtmlEngine/src/drupalhtmlbuilder.js')).toString()})`.replace('export default', ''));
+const {
+ document,
+ Node
+} = new JSDOM(`<!DOCTYPE html>`).window;
module.exports = {
'@tags': ['ckeditor5'],
'@unitTest': true,
- 'should return empty string when empty DocumentFragment is passed': function shouldReturnEmptyStringWhenEmptyDocumentFragmentIsPassed() {
- var drupalHtmlBuilder = new DrupalHtmlBuilder();
+ 'should return empty string when empty DocumentFragment is passed': function () {
+ const drupalHtmlBuilder = new DrupalHtmlBuilder();
drupalHtmlBuilder.appendNode(document.createDocumentFragment());
assert.equal(drupalHtmlBuilder.build(), '');
},
- 'should create text from single text node': function shouldCreateTextFromSingleTextNode() {
- var drupalHtmlBuilder = new DrupalHtmlBuilder();
- var text = 'foo bar';
- var fragment = document.createDocumentFragment();
- var textNode = document.createTextNode(text);
+ 'should create text from single text node': function () {
+ const drupalHtmlBuilder = new DrupalHtmlBuilder();
+ const text = 'foo bar';
+ const fragment = document.createDocumentFragment();
+ const textNode = document.createTextNode(text);
fragment.appendChild(textNode);
drupalHtmlBuilder.appendNode(fragment);
assert.equal(drupalHtmlBuilder.build(), text);
},
- 'should return correct HTML from fragment with paragraph': function shouldReturnCorrectHTMLFromFragmentWithParagraph() {
- var drupalHtmlBuilder = new DrupalHtmlBuilder();
- var fragment = document.createDocumentFragment();
- var paragraph = document.createElement('p');
+ 'should return correct HTML from fragment with paragraph': function () {
+ const drupalHtmlBuilder = new DrupalHtmlBuilder();
+ const fragment = document.createDocumentFragment();
+ const paragraph = document.createElement('p');
paragraph.textContent = 'foo bar';
fragment.appendChild(paragraph);
drupalHtmlBuilder.appendNode(fragment);
assert.equal(drupalHtmlBuilder.build(), '<p>foo bar</p>');
},
- 'should return correct HTML from fragment with multiple child nodes': function shouldReturnCorrectHTMLFromFragmentWithMultipleChildNodes() {
- var drupalHtmlBuilder = new DrupalHtmlBuilder();
- var fragment = document.createDocumentFragment();
- var text = document.createTextNode('foo bar');
- var paragraph = document.createElement('p');
- var div = document.createElement('div');
+ 'should return correct HTML from fragment with multiple child nodes': function () {
+ const drupalHtmlBuilder = new DrupalHtmlBuilder();
+ const fragment = document.createDocumentFragment();
+ const text = document.createTextNode('foo bar');
+ const paragraph = document.createElement('p');
+ const div = document.createElement('div');
paragraph.textContent = 'foo';
div.textContent = 'bar';
fragment.appendChild(text);
@@ -58,21 +60,21 @@ module.exports = {
drupalHtmlBuilder.appendNode(fragment);
assert.equal(drupalHtmlBuilder.build(), 'foo bar<p>foo</p><div>bar</div>');
},
- 'should return correct HTML from fragment with comment': function shouldReturnCorrectHTMLFromFragmentWithComment() {
- var drupalHtmlBuilder = new DrupalHtmlBuilder();
- var fragment = document.createDocumentFragment();
- var div = document.createElement('div');
- var comment = document.createComment('bar');
+ 'should return correct HTML from fragment with comment': function () {
+ const drupalHtmlBuilder = new DrupalHtmlBuilder();
+ const fragment = document.createDocumentFragment();
+ const div = document.createElement('div');
+ const comment = document.createComment('bar');
div.textContent = 'bar';
fragment.appendChild(div);
fragment.appendChild(comment);
drupalHtmlBuilder.appendNode(fragment);
assert.equal(drupalHtmlBuilder.build(), '<div>bar</div>');
},
- 'should return correct HTML from fragment with attributes': function shouldReturnCorrectHTMLFromFragmentWithAttributes() {
- var drupalHtmlBuilder = new DrupalHtmlBuilder();
- var fragment = document.createDocumentFragment();
- var div = document.createElement('div');
+ 'should return correct HTML from fragment with attributes': function () {
+ const drupalHtmlBuilder = new DrupalHtmlBuilder();
+ const fragment = document.createDocumentFragment();
+ const div = document.createElement('div');
div.setAttribute('id', 'foo');
div.classList.add('bar');
div.textContent = 'baz';
@@ -80,18 +82,18 @@ module.exports = {
drupalHtmlBuilder.appendNode(fragment);
assert.equal(drupalHtmlBuilder.build(), '<div id="foo" class="bar">baz</div>');
},
- 'should return correct HTML from fragment with self closing tag': function shouldReturnCorrectHTMLFromFragmentWithSelfClosingTag() {
- var drupalHtmlBuilder = new DrupalHtmlBuilder();
- var fragment = document.createDocumentFragment();
- var hr = document.createElement('hr');
+ 'should return correct HTML from fragment with self closing tag': function () {
+ const drupalHtmlBuilder = new DrupalHtmlBuilder();
+ const fragment = document.createDocumentFragment();
+ const hr = document.createElement('hr');
fragment.appendChild(hr);
drupalHtmlBuilder.appendNode(fragment);
assert.equal(drupalHtmlBuilder.build(), '<hr>');
},
- 'attribute values should be escaped': function attributeValuesShouldBeEscaped() {
- var drupalHtmlBuilder = new DrupalHtmlBuilder();
- var fragment = document.createDocumentFragment();
- var div = document.createElement('div');
+ 'attribute values should be escaped': function () {
+ const drupalHtmlBuilder = new DrupalHtmlBuilder();
+ const fragment = document.createDocumentFragment();
+ const div = document.createElement('div');
div.setAttribute('data-caption', 'Kittens & llamas are <em>cute</em>');
div.textContent = 'foo';
fragment.appendChild(div);
diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index 4bf2091d799241bfd0e2b978ca88b561430647de..90050867efc678c0b2c0369ebf8fb303c7a9df36 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -7,28 +7,28 @@
(function ($, Drupal) {
Drupal.behaviors.color = {
- attach: function attach(context, settings) {
- var i;
- var j;
- var colors;
- var form = $(once('color', '#system-theme-settings .color-form', context));
+ attach(context, settings) {
+ let i;
+ let j;
+ let colors;
+ const form = $(once('color', '#system-theme-settings .color-form', context));
if (form.length === 0) {
return;
}
- var inputs = [];
- var hooks = [];
- var locks = [];
- var focused = null;
+ const inputs = [];
+ const hooks = [];
+ const locks = [];
+ let focused = null;
$(once('color', $('<div class="color-placeholder"></div>'))).prependTo(form);
- var farb = $.farbtastic('.color-placeholder');
- var reference = settings.color.reference;
- Object.keys(reference || {}).forEach(function (color) {
+ const farb = $.farbtastic('.color-placeholder');
+ const reference = settings.color.reference;
+ Object.keys(reference || {}).forEach(color => {
reference[color] = farb.RGBToHSL(farb.unpack(reference[color]));
});
- var height = [];
- var width = [];
+ const height = [];
+ const width = [];
function preview() {
Drupal.color.callback(context, settings, form, farb, height, width);
@@ -41,7 +41,7 @@
}
function shiftColor(given, ref1, ref2) {
- var d;
+ let d;
given = farb.RGBToHSL(farb.unpack(given));
given[0] += ref2[0] - ref1[0];
@@ -73,7 +73,7 @@
}
function callback(input, color, propagate, colorScheme) {
- var matched;
+ let matched;
$(input).css({
backgroundColor: color,
color: farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff'
@@ -112,9 +112,9 @@
}
}
- Object.keys(settings.gradients || {}).forEach(function (i) {
- $(once('color', '.color-preview')).append("<div id=\"gradient-".concat(i, "\"></div>"));
- var gradient = $(".color-preview #gradient-".concat(i));
+ Object.keys(settings.gradients || {}).forEach(i => {
+ $(once('color', '.color-preview')).append(`<div id="gradient-${i}"></div>`);
+ const gradient = $(`.color-preview #gradient-${i}`);
height.push(parseInt(gradient.css('height'), 10) / 10);
width.push(parseInt(gradient.css('width'), 10) / 10);
@@ -123,27 +123,27 @@
}
});
form.find('#edit-scheme').on('change', function () {
- var schemes = settings.color.schemes;
- var colorScheme = this.options[this.selectedIndex].value;
+ const schemes = settings.color.schemes;
+ const colorScheme = this.options[this.selectedIndex].value;
if (colorScheme !== '' && schemes[colorScheme]) {
colors = schemes[colorScheme];
- Object.keys(colors || {}).forEach(function (fieldName) {
- callback($("#edit-palette-".concat(fieldName)), colors[fieldName], false, true);
+ Object.keys(colors || {}).forEach(fieldName => {
+ callback($(`#edit-palette-${fieldName}`), colors[fieldName], false, true);
});
preview();
}
});
function focus(e) {
- var input = e.target;
+ const input = e.target;
if (focused) {
$(focused).off('keyup', farb.updateValue).off('keyup', preview).off('keyup', resetScheme).parent().removeClass('item-selected');
}
focused = input;
- farb.linkTo(function (color) {
+ farb.linkTo(color => {
callback(input, color, true, false);
});
farb.setColor(input.value);
@@ -152,12 +152,12 @@
form.find('.js-color-palette input.form-text').each(function () {
this.key = this.id.substring(13);
- farb.linkTo(function () {}).setColor('#000').linkTo(this);
- var i = inputs.length;
+ farb.linkTo(() => {}).setColor('#000').linkTo(this);
+ const i = inputs.length;
if (inputs.length) {
- var toggleClick = true;
- var lock = $("<button class=\"color-palette__lock\">".concat(Drupal.t('Unlock'), "</button>")).on('click', function (e) {
+ let toggleClick = true;
+ const lock = $(`<button class="color-palette__lock">${Drupal.t('Unlock')}</button>`).on('click', function (e) {
e.preventDefault();
if (toggleClick) {
@@ -176,7 +176,7 @@
locks.push(lock);
}
- var hook = $('<div class="color-palette__hook"></div>');
+ const hook = $('<div class="color-palette__hook"></div>');
$(this).after(hook);
hooks.push(hook);
$(this).parent().find('.color-palette__lock').trigger('click');
@@ -187,5 +187,6 @@
inputs[0].focus();
preview();
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/color/preview.js b/core/modules/color/preview.js
index a65d0ea175b4d9245f128e7a9c5189bcc91c4e23..358c4ba707958bef55fa0bf9651570745c8e4f9e 100644
--- a/core/modules/color/preview.js
+++ b/core/modules/color/preview.js
@@ -7,35 +7,36 @@
(function ($, Drupal) {
Drupal.color = {
- callback: function callback(context, settings, form, farb, height, width) {
- var accum;
- var delta;
+ callback(context, settings, form, farb, height, width) {
+ let accum;
+ let delta;
form.find('.color-preview').css('backgroundColor', form.find('.color-palette input[name="palette[base]"]').val());
form.find('#text').css('color', form.find('.color-palette input[name="palette[text]"]').val());
form.find('#text a, #text h2').css('color', form.find('.color-palette input[name="palette[link]"]').val());
function gradientLineColor(i, element) {
- Object.keys(accum || {}).forEach(function (k) {
+ Object.keys(accum || {}).forEach(k => {
accum[k] += delta[k];
});
element.style.backgroundColor = farb.pack(accum);
}
- var colorStart;
- var colorEnd;
- Object.keys(settings.gradients || {}).forEach(function (i) {
- colorStart = farb.unpack(form.find(".color-palette input[name=\"palette[".concat(settings.gradients[i].colors[0], "]\"]")).val());
- colorEnd = farb.unpack(form.find(".color-palette input[name=\"palette[".concat(settings.gradients[i].colors[1], "]\"]")).val());
+ let colorStart;
+ let colorEnd;
+ Object.keys(settings.gradients || {}).forEach(i => {
+ colorStart = farb.unpack(form.find(`.color-palette input[name="palette[${settings.gradients[i].colors[0]}]"]`).val());
+ colorEnd = farb.unpack(form.find(`.color-palette input[name="palette[${settings.gradients[i].colors[1]}]"]`).val());
if (colorStart && colorEnd) {
delta = [];
- Object.keys(colorStart || {}).forEach(function (colorStartKey) {
+ Object.keys(colorStart || {}).forEach(colorStartKey => {
delta[colorStartKey] = (colorEnd[colorStartKey] - colorStart[colorStartKey]) / (settings.gradients[i].vertical ? height[i] : width[i]);
});
accum = colorStart;
- form.find("#gradient-".concat(i, " > div")).each(gradientLineColor);
+ form.find(`#gradient-${i} > div`).each(gradientLineColor);
}
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.js b/core/modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.js
index 546127de3f51cf869228bf2a5314e5eaf39ed302..7461d17d6036fd52d4bdac41d04d5a590211633a 100644
--- a/core/modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.js
+++ b/core/modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.js
@@ -6,5 +6,5 @@
**/
(function ($) {
- $(document).ready(function () {});
+ $(document).ready(() => {});
})(jQuery);
\ No newline at end of file
diff --git a/core/modules/comment/comment-entity-form.js b/core/modules/comment/comment-entity-form.js
index 15196ca8331a98fee0202cced11a1430d7121fac..239b13bb0eeac0d60ce56e5bcd2fbbc0745a94b6 100644
--- a/core/modules/comment/comment-entity-form.js
+++ b/core/modules/comment/comment-entity-form.js
@@ -7,11 +7,10 @@
(function ($, Drupal) {
Drupal.behaviors.commentFieldsetSummaries = {
- attach: function attach(context) {
- var $context = $(context);
- $context.find('fieldset.comment-entity-settings-form').drupalSetSummary(function (context) {
- return Drupal.checkPlain($(context).find('.js-form-item-comment input:checked').next('label').text());
- });
+ attach(context) {
+ const $context = $(context);
+ $context.find('fieldset.comment-entity-settings-form').drupalSetSummary(context => Drupal.checkPlain($(context).find('.js-form-item-comment input:checked').next('label').text()));
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/comment/js/comment-by-viewer.js b/core/modules/comment/js/comment-by-viewer.js
index c255a10fc00bbe160e6a30dcf3bb8bcb636a4092..3f47ceeaab273915e6c80a68ca0517eed3888c01 100644
--- a/core/modules/comment/js/comment-by-viewer.js
+++ b/core/modules/comment/js/comment-by-viewer.js
@@ -7,11 +7,12 @@
(function ($, Drupal, drupalSettings) {
Drupal.behaviors.commentByViewer = {
- attach: function attach(context) {
- var currentUserID = parseInt(drupalSettings.user.uid, 10);
+ attach(context) {
+ const currentUserID = parseInt(drupalSettings.user.uid, 10);
$('[data-comment-user-id]').filter(function () {
return parseInt(this.getAttribute('data-comment-user-id'), 10) === currentUserID;
}).addClass('by-viewer');
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/comment/js/comment-new-indicator.js b/core/modules/comment/js/comment-new-indicator.js
index 22ec2069fd0424aa024c3bbf9e36d305947c0015..64416bd63a0aa6183a5fca8c155c525b13a5e13e 100644
--- a/core/modules/comment/js/comment-new-indicator.js
+++ b/core/modules/comment/js/comment-new-indicator.js
@@ -7,18 +7,18 @@
(function ($, Drupal, window) {
function processCommentNewIndicators(placeholders) {
- var isFirstNewComment = true;
- var newCommentString = Drupal.t('new');
- var $placeholder;
- placeholders.forEach(function (placeholder) {
+ let isFirstNewComment = true;
+ const newCommentString = Drupal.t('new');
+ let $placeholder;
+ placeholders.forEach(placeholder => {
$placeholder = $(placeholder);
- var timestamp = parseInt($placeholder.attr('data-comment-timestamp'), 10);
- var $node = $placeholder.closest('[data-history-node-id]');
- var nodeID = $node.attr('data-history-node-id');
- var lastViewTimestamp = Drupal.history.getLastRead(nodeID);
+ const timestamp = parseInt($placeholder.attr('data-comment-timestamp'), 10);
+ const $node = $placeholder.closest('[data-history-node-id]');
+ const nodeID = $node.attr('data-history-node-id');
+ const lastViewTimestamp = Drupal.history.getLastRead(nodeID);
if (timestamp > lastViewTimestamp) {
- var $comment = $(placeholder).removeClass('hidden').text(newCommentString).closest('.js-comment').addClass('new');
+ const $comment = $(placeholder).removeClass('hidden').text(newCommentString).closest('.js-comment').addClass('new');
if (isFirstNewComment) {
isFirstNewComment = false;
@@ -33,12 +33,12 @@
}
Drupal.behaviors.commentNewIndicator = {
- attach: function attach(context) {
- var nodeIDs = [];
- var placeholders = once('history', '[data-comment-timestamp]', context).filter(function (placeholder) {
- var $placeholder = $(placeholder);
- var commentTimestamp = parseInt($placeholder.attr('data-comment-timestamp'), 10);
- var nodeID = $placeholder.closest('[data-history-node-id]').attr('data-history-node-id');
+ attach(context) {
+ const nodeIDs = [];
+ const placeholders = once('history', '[data-comment-timestamp]', context).filter(placeholder => {
+ const $placeholder = $(placeholder);
+ const commentTimestamp = parseInt($placeholder.attr('data-comment-timestamp'), 10);
+ const nodeID = $placeholder.closest('[data-history-node-id]').attr('data-history-node-id');
if (Drupal.history.needsServerCheck(nodeID, commentTimestamp)) {
nodeIDs.push(nodeID);
@@ -52,9 +52,10 @@
return;
}
- Drupal.history.fetchTimestamps(nodeIDs, function () {
+ Drupal.history.fetchTimestamps(nodeIDs, () => {
processCommentNewIndicators(placeholders);
});
}
+
};
})(jQuery, Drupal, window);
\ No newline at end of file
diff --git a/core/modules/comment/js/node-new-comments-link.js b/core/modules/comment/js/node-new-comments-link.js
index 4136308f586015e942ba6eb010b501b53e749f13..ebac99a578f7b3eeff4d40dcfefe8ff115937d50 100644
--- a/core/modules/comment/js/node-new-comments-link.js
+++ b/core/modules/comment/js/node-new-comments-link.js
@@ -19,15 +19,15 @@
}
function processNodeNewCommentLinks(placeholders) {
- var $placeholdersToUpdate = {};
- var fieldName = 'comment';
- var $placeholder;
- placeholders.forEach(function (placeholder) {
+ const $placeholdersToUpdate = {};
+ let fieldName = 'comment';
+ let $placeholder;
+ placeholders.forEach(placeholder => {
$placeholder = $(placeholder);
- var timestamp = parseInt($placeholder.attr('data-history-node-last-comment-timestamp'), 10);
+ const timestamp = parseInt($placeholder.attr('data-history-node-last-comment-timestamp'), 10);
fieldName = $placeholder.attr('data-history-node-field-name');
- var nodeID = $placeholder.closest('[data-history-node-id]').attr('data-history-node-id');
- var lastViewTimestamp = Drupal.history.getLastRead(nodeID);
+ const nodeID = $placeholder.closest('[data-history-node-id]').attr('data-history-node-id');
+ const lastViewTimestamp = Drupal.history.getLastRead(nodeID);
if (timestamp > lastViewTimestamp) {
$placeholdersToUpdate[nodeID] = $placeholder;
@@ -35,14 +35,14 @@
remove($placeholder);
}
});
- var nodeIDs = Object.keys($placeholdersToUpdate);
+ const nodeIDs = Object.keys($placeholdersToUpdate);
if (nodeIDs.length === 0) {
return;
}
function render(results) {
- Object.keys(results || {}).forEach(function (nodeID) {
+ Object.keys(results || {}).forEach(nodeID => {
if ($placeholdersToUpdate.hasOwnProperty(nodeID)) {
$placeholdersToUpdate[nodeID].attr('href', results[nodeID].first_new_comment_link).text(Drupal.formatPlural(results[nodeID].new_comment_count, '1 new comment', '@count new comments')).removeClass('hidden');
show($placeholdersToUpdate[nodeID]);
@@ -67,12 +67,12 @@
}
Drupal.behaviors.nodeNewCommentsLink = {
- attach: function attach(context) {
- var nodeIDs = [];
- var placeholders = once('history', '[data-history-node-last-comment-timestamp]', context).filter(function (placeholder) {
- var $placeholder = $(placeholder);
- var lastCommentTimestamp = parseInt($placeholder.attr('data-history-node-last-comment-timestamp'), 10);
- var nodeID = $placeholder.closest('[data-history-node-id]').attr('data-history-node-id');
+ attach(context) {
+ const nodeIDs = [];
+ const placeholders = once('history', '[data-history-node-last-comment-timestamp]', context).filter(placeholder => {
+ const $placeholder = $(placeholder);
+ const lastCommentTimestamp = parseInt($placeholder.attr('data-history-node-last-comment-timestamp'), 10);
+ const nodeID = $placeholder.closest('[data-history-node-id]').attr('data-history-node-id');
if (Drupal.history.needsServerCheck(nodeID, lastCommentTimestamp)) {
nodeIDs.push(nodeID);
@@ -88,9 +88,10 @@
return;
}
- Drupal.history.fetchTimestamps(nodeIDs, function () {
+ Drupal.history.fetchTimestamps(nodeIDs, () => {
processNodeNewCommentLinks(placeholders);
});
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/content_translation/content_translation.admin.js b/core/modules/content_translation/content_translation.admin.js
index 7b243b5f88ad02b8588e5b59790d978ccb47adc3..d27a7d6ded686c4f721fc5ab9093aec391311d19 100644
--- a/core/modules/content_translation/content_translation.admin.js
+++ b/core/modules/content_translation/content_translation.admin.js
@@ -7,10 +7,10 @@
(function ($, Drupal, drupalSettings) {
Drupal.behaviors.contentTranslationDependentOptions = {
- attach: function attach(context) {
- var $context = $(context);
- var options = drupalSettings.contentTranslationDependentOptions;
- var $fields;
+ attach(context) {
+ const $context = $(context);
+ const options = drupalSettings.contentTranslationDependentOptions;
+ let $fields;
function fieldsChangeHandler($fields, dependentColumns) {
return function (e) {
@@ -19,42 +19,44 @@
}
if (options && options.dependent_selectors) {
- Object.keys(options.dependent_selectors).forEach(function (field) {
- $fields = $context.find("input[name^=\"".concat(field, "\"]"));
- var dependentColumns = options.dependent_selectors[field];
+ Object.keys(options.dependent_selectors).forEach(field => {
+ $fields = $context.find(`input[name^="${field}"]`);
+ const dependentColumns = options.dependent_selectors[field];
$fields.on('change', fieldsChangeHandler($fields, dependentColumns));
Drupal.behaviors.contentTranslationDependentOptions.check($fields, dependentColumns);
});
}
},
- check: function check($fields, dependentColumns, $changed) {
- var $element = $changed;
- var column;
+
+ check($fields, dependentColumns, $changed) {
+ let $element = $changed;
+ let column;
function filterFieldsList(index, field) {
return $(field).val() === column;
}
- Object.keys(dependentColumns || {}).forEach(function (index) {
+ Object.keys(dependentColumns || {}).forEach(index => {
column = dependentColumns[index];
if (!$changed) {
$element = $fields.filter(filterFieldsList);
}
- if ($element.is("input[value=\"".concat(column, "\"]:checked"))) {
+ if ($element.is(`input[value="${column}"]:checked`)) {
$fields.prop('checked', true).not($element).prop('disabled', true);
} else {
$fields.prop('disabled', false);
}
});
}
+
};
Drupal.behaviors.contentTranslation = {
- attach: function attach(context) {
- once('translation-entity-admin-hide', $(context).find('table .bundle-settings .translatable :input')).forEach(function (input) {
- var $input = $(input);
- var $bundleSettings = $input.closest('.bundle-settings');
+ attach(context) {
+ once('translation-entity-admin-hide', $(context).find('table .bundle-settings .translatable :input')).forEach(input => {
+ const $input = $(input);
+ const $bundleSettings = $input.closest('.bundle-settings');
if (!$input.is(':checked')) {
$bundleSettings.nextUntil('.bundle-settings').hide();
@@ -62,11 +64,11 @@
$bundleSettings.nextUntil('.bundle-settings', '.field-settings').find('.translatable :input:not(:checked)').closest('.field-settings').nextUntil(':not(.column-settings)').hide();
}
});
- $(once('translation-entity-admin-bind', 'body')).on('click', 'table .bundle-settings .translatable :input', function (e) {
- var $target = $(e.target);
- var $bundleSettings = $target.closest('.bundle-settings');
- var $settings = $bundleSettings.nextUntil('.bundle-settings');
- var $fieldSettings = $settings.filter('.field-settings');
+ $(once('translation-entity-admin-bind', 'body')).on('click', 'table .bundle-settings .translatable :input', e => {
+ const $target = $(e.target);
+ const $bundleSettings = $target.closest('.bundle-settings');
+ const $settings = $bundleSettings.nextUntil('.bundle-settings');
+ const $fieldSettings = $settings.filter('.field-settings');
if ($target.is(':checked')) {
$bundleSettings.find('.operations :input[name$="[language_alterable]"]').prop('checked', true);
@@ -75,10 +77,10 @@
} else {
$settings.hide();
}
- }).on('click', 'table .field-settings .translatable :input', function (e) {
- var $target = $(e.target);
- var $fieldSettings = $target.closest('.field-settings');
- var $columnSettings = $fieldSettings.nextUntil('.field-settings, .bundle-settings');
+ }).on('click', 'table .field-settings .translatable :input', e => {
+ const $target = $(e.target);
+ const $fieldSettings = $target.closest('.field-settings');
+ const $columnSettings = $fieldSettings.nextUntil('.field-settings, .bundle-settings');
if ($target.is(':checked')) {
$columnSettings.show();
@@ -87,5 +89,6 @@
}
});
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/contextual/js/contextual.js b/core/modules/contextual/js/contextual.js
index 4911b2949b8f183ef9a9b533a4cebd5b153dc952..c7f5da87f6ffff1e579f1145ebbc50af6194cf63 100644
--- a/core/modules/contextual/js/contextual.js
+++ b/core/modules/contextual/js/contextual.js
@@ -6,18 +6,18 @@
**/
(function ($, Drupal, drupalSettings, _, Backbone, JSON, storage) {
- var options = $.extend(drupalSettings.contextual, {
+ const options = $.extend(drupalSettings.contextual, {
strings: {
open: Drupal.t('Open'),
close: Drupal.t('Close')
}
});
- var cachedPermissionsHash = storage.getItem('Drupal.contextual.permissionsHash');
- var permissionsHash = drupalSettings.user.permissionsHash;
+ const cachedPermissionsHash = storage.getItem('Drupal.contextual.permissionsHash');
+ const permissionsHash = drupalSettings.user.permissionsHash;
if (cachedPermissionsHash !== permissionsHash) {
if (typeof permissionsHash === 'string') {
- _.chain(storage).keys().each(function (key) {
+ _.chain(storage).keys().each(key => {
if (key.substring(0, 18) === 'Drupal.contextual.') {
storage.removeItem(key);
}
@@ -28,19 +28,19 @@
}
function adjustIfNestedAndOverlapping($contextual) {
- var $contextuals = $contextual.parents('.contextual-region').eq(-1).find('.contextual');
+ const $contextuals = $contextual.parents('.contextual-region').eq(-1).find('.contextual');
if ($contextuals.length <= 1) {
return;
}
- var firstTop = $contextuals.eq(0).offset().top;
- var secondTop = $contextuals.eq(1).offset().top;
+ const firstTop = $contextuals.eq(0).offset().top;
+ const secondTop = $contextuals.eq(1).offset().top;
if (firstTop === secondTop) {
- var $nestedContextual = $contextuals.eq(1);
- var height = 0;
- var $trigger = $nestedContextual.find('.trigger');
+ const $nestedContextual = $contextuals.eq(1);
+ let height = 0;
+ const $trigger = $nestedContextual.find('.trigger');
$trigger.removeClass('visually-hidden');
height = $nestedContextual.height();
$trigger.addClass('visually-hidden');
@@ -51,21 +51,21 @@
}
function initContextual($contextual, html) {
- var $region = $contextual.closest('.contextual-region');
- var contextual = Drupal.contextual;
+ const $region = $contextual.closest('.contextual-region');
+ const contextual = Drupal.contextual;
$contextual.html(html).addClass('contextual').prepend(Drupal.theme('contextualTrigger'));
- var destination = "destination=".concat(Drupal.encodePath(Drupal.url(drupalSettings.path.currentPath)));
+ const destination = `destination=${Drupal.encodePath(Drupal.url(drupalSettings.path.currentPath))}`;
$contextual.find('.contextual-links a').each(function () {
- var url = this.getAttribute('href');
- var glue = url.indexOf('?') === -1 ? '?' : '&';
+ const url = this.getAttribute('href');
+ const glue = url.indexOf('?') === -1 ? '?' : '&';
this.setAttribute('href', url + glue + destination);
});
- var model = new contextual.StateModel({
+ const model = new contextual.StateModel({
title: $region.find('h2').eq(0).text().trim()
});
- var viewOptions = $.extend({
+ const viewOptions = $.extend({
el: $contextual,
- model: model
+ model
}, options);
contextual.views.push({
visual: new contextual.VisualView(viewOptions),
@@ -74,41 +74,41 @@
});
contextual.regionViews.push(new contextual.RegionView($.extend({
el: $region,
- model: model
+ model
}, options)));
contextual.collection.add(model);
$(document).trigger('drupalContextualLinkAdded', {
$el: $contextual,
- $region: $region,
- model: model
+ $region,
+ model
});
adjustIfNestedAndOverlapping($contextual);
}
Drupal.behaviors.contextual = {
- attach: function attach(context) {
- var $context = $(context);
- var $placeholders = $(once('contextual-render', '[data-contextual-id]', context));
+ attach(context) {
+ const $context = $(context);
+ let $placeholders = $(once('contextual-render', '[data-contextual-id]', context));
if ($placeholders.length === 0) {
return;
}
- var ids = [];
+ const ids = [];
$placeholders.each(function () {
ids.push({
id: $(this).attr('data-contextual-id'),
token: $(this).attr('data-contextual-token')
});
});
- var uncachedIDs = [];
- var uncachedTokens = [];
- ids.forEach(function (contextualID) {
- var html = storage.getItem("Drupal.contextual.".concat(contextualID.id));
+ const uncachedIDs = [];
+ const uncachedTokens = [];
+ ids.forEach(contextualID => {
+ const html = storage.getItem(`Drupal.contextual.${contextualID.id}`);
if (html && html.length) {
- window.setTimeout(function () {
- initContextual($context.find("[data-contextual-id=\"".concat(contextualID.id, "\"]:empty")).eq(0), html);
+ window.setTimeout(() => {
+ initContextual($context.find(`[data-contextual-id="${contextualID.id}"]:empty`).eq(0), html);
});
return;
}
@@ -126,22 +126,25 @@
'tokens[]': uncachedTokens
},
dataType: 'json',
- success: function success(results) {
- _.each(results, function (html, contextualID) {
- storage.setItem("Drupal.contextual.".concat(contextualID), html);
+
+ success(results) {
+ _.each(results, (html, contextualID) => {
+ storage.setItem(`Drupal.contextual.${contextualID}`, html);
if (html.length > 0) {
- $placeholders = $context.find("[data-contextual-id=\"".concat(contextualID, "\"]"));
+ $placeholders = $context.find(`[data-contextual-id="${contextualID}"]`);
- for (var i = 0; i < $placeholders.length; i++) {
+ for (let i = 0; i < $placeholders.length; i++) {
initContextual($placeholders.eq(i), html);
}
}
});
}
+
});
}
}
+
};
Drupal.contextual = {
views: [],
@@ -155,7 +158,7 @@
return '<button class="trigger visually-hidden focusable" type="button"></button>';
};
- $(document).on('drupalContextualLinkAdded', function (event, data) {
+ $(document).on('drupalContextualLinkAdded', (event, data) => {
Drupal.ajax.bindAjaxLinks(data.$el[0]);
});
})(jQuery, Drupal, drupalSettings, _, Backbone, window.JSON, window.sessionStorage);
\ No newline at end of file
diff --git a/core/modules/contextual/js/contextual.toolbar.js b/core/modules/contextual/js/contextual.toolbar.js
index bbd8792d06903dbf5d51ebe8c62607ce44b07095..4a5673a6e272e5e33f3a1b48f21f5e6b4e1f2881 100644
--- a/core/modules/contextual/js/contextual.toolbar.js
+++ b/core/modules/contextual/js/contextual.toolbar.js
@@ -6,7 +6,7 @@
**/
(function ($, Drupal, Backbone) {
- var strings = {
+ const strings = {
tabbingReleased: Drupal.t('Tabbing is no longer constrained by the Contextual module.'),
tabbingConstrained: Drupal.t('Tabbing is constrained to a set of @contextualsCount and the edit mode toggle.'),
pressEsc: Drupal.t('Press the esc key to exit.')
@@ -17,27 +17,28 @@
return;
}
- var contextualToolbar = Drupal.contextualToolbar;
+ const contextualToolbar = Drupal.contextualToolbar;
contextualToolbar.model = new contextualToolbar.StateModel({
isViewing: localStorage.getItem('Drupal.contextualToolbar.isViewing') !== 'false'
}, {
contextualCollection: Drupal.contextual.collection
});
- var viewOptions = {
+ const viewOptions = {
el: $('.toolbar .toolbar-bar .contextual-toolbar-tab'),
model: contextualToolbar.model,
- strings: strings
+ strings
};
new contextualToolbar.VisualView(viewOptions);
new contextualToolbar.AuralView(viewOptions);
}
Drupal.behaviors.contextualToolbar = {
- attach: function attach(context) {
+ attach(context) {
if (once('contextualToolbar-init', 'body').length) {
initContextualToolbar(context);
}
}
+
};
Drupal.contextualToolbar = {
model: null
diff --git a/core/modules/contextual/js/models/StateModel.js b/core/modules/contextual/js/models/StateModel.js
index 8be38641b8fd8e2e97f0a710f610d4250a4707f1..a132a7c1fb261e0309b6efacd50f8a3439ab34f7 100644
--- a/core/modules/contextual/js/models/StateModel.js
+++ b/core/modules/contextual/js/models/StateModel.js
@@ -14,8 +14,9 @@
isOpen: false,
isLocked: false
},
- toggleOpen: function toggleOpen() {
- var newIsOpen = !this.get('isOpen');
+
+ toggleOpen() {
+ const newIsOpen = !this.get('isOpen');
this.set('isOpen', newIsOpen);
if (newIsOpen) {
@@ -24,26 +25,30 @@
return this;
},
- close: function close() {
+
+ close() {
this.set('isOpen', false);
return this;
},
- focus: function focus() {
+
+ focus() {
this.set('hasFocus', true);
- var cid = this.cid;
- this.collection.each(function (model) {
+ const cid = this.cid;
+ this.collection.each(model => {
if (model.cid !== cid) {
model.close().blur();
}
});
return this;
},
- blur: function blur() {
+
+ blur() {
if (!this.get('isOpen')) {
this.set('hasFocus', false);
}
return this;
}
+
});
})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/contextual/js/toolbar/models/StateModel.js b/core/modules/contextual/js/toolbar/models/StateModel.js
index e9780c8f8094ea855b41bcc62ea2e4eab7290098..f6dedcf05024cbe395d344d9b2eba32d8c4cc574 100644
--- a/core/modules/contextual/js/toolbar/models/StateModel.js
+++ b/core/modules/contextual/js/toolbar/models/StateModel.js
@@ -13,26 +13,31 @@
contextualCount: 0,
tabbingContext: null
},
- initialize: function initialize(attrs, options) {
+
+ initialize(attrs, options) {
this.listenTo(options.contextualCollection, 'reset remove add', this.countContextualLinks);
this.listenTo(options.contextualCollection, 'add', this.lockNewContextualLinks);
this.listenTo(this, 'change:contextualCount', this.updateVisibility);
- this.listenTo(this, 'change:isViewing', function (model, isViewing) {
- options.contextualCollection.each(function (contextualModel) {
+ this.listenTo(this, 'change:isViewing', (model, isViewing) => {
+ options.contextualCollection.each(contextualModel => {
contextualModel.set('isLocked', !isViewing);
});
});
},
- countContextualLinks: function countContextualLinks(contextualModel, contextualCollection) {
+
+ countContextualLinks(contextualModel, contextualCollection) {
this.set('contextualCount', contextualCollection.length);
},
- lockNewContextualLinks: function lockNewContextualLinks(contextualModel, contextualCollection) {
+
+ lockNewContextualLinks(contextualModel, contextualCollection) {
if (!this.get('isViewing')) {
contextualModel.set('isLocked', true);
}
},
- updateVisibility: function updateVisibility() {
+
+ updateVisibility() {
this.set('isVisible', this.get('contextualCount') > 0);
}
+
});
})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/contextual/js/toolbar/views/AuralView.js b/core/modules/contextual/js/toolbar/views/AuralView.js
index 1de1d173f3a368d7221c00a43e6f9afeff3484a4..59890d5799974ee2017955ec3ea028e478e35fd4 100644
--- a/core/modules/contextual/js/toolbar/views/AuralView.js
+++ b/core/modules/contextual/js/toolbar/views/AuralView.js
@@ -8,19 +8,22 @@
(function ($, Drupal, Backbone, _) {
Drupal.contextualToolbar.AuralView = Backbone.View.extend({
announcedOnce: false,
- initialize: function initialize(options) {
+
+ initialize(options) {
this.options = options;
this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'change:isViewing', this.manageTabbing);
$(document).on('keyup', _.bind(this.onKeypress, this));
this.manageTabbing();
},
- render: function render() {
+
+ render() {
this.$el.find('button').attr('aria-pressed', !this.model.get('isViewing'));
return this;
},
- manageTabbing: function manageTabbing() {
- var tabbingContext = this.model.get('tabbingContext');
+
+ manageTabbing() {
+ let tabbingContext = this.model.get('tabbingContext');
if (tabbingContext) {
if (tabbingContext.active) {
@@ -37,14 +40,16 @@
this.announcedOnce = true;
}
},
- announceTabbingConstraint: function announceTabbingConstraint() {
- var strings = this.options.strings;
+
+ announceTabbingConstraint() {
+ const strings = this.options.strings;
Drupal.announce(Drupal.formatString(strings.tabbingConstrained, {
'@contextualsCount': Drupal.formatPlural(Drupal.contextual.collection.length, '@count contextual link', '@count contextual links')
}));
Drupal.announce(strings.pressEsc);
},
- onKeypress: function onKeypress(event) {
+
+ onKeypress(event) {
if (!this.announcedOnce && event.keyCode === 9 && !this.model.get('isViewing')) {
this.announceTabbingConstraint();
this.announcedOnce = true;
@@ -54,5 +59,6 @@
this.model.set('isViewing', true);
}
}
+
});
})(jQuery, Drupal, Backbone, _);
\ No newline at end of file
diff --git a/core/modules/contextual/js/toolbar/views/VisualView.js b/core/modules/contextual/js/toolbar/views/VisualView.js
index fb8ecd3c5cb4a6f1caa60adc546baf929bee4313..556c439eee85ca9193f80f354217e4e10cc66792 100644
--- a/core/modules/contextual/js/toolbar/views/VisualView.js
+++ b/core/modules/contextual/js/toolbar/views/VisualView.js
@@ -7,34 +7,39 @@
(function (Drupal, Backbone) {
Drupal.contextualToolbar.VisualView = Backbone.View.extend({
- events: function events() {
- var touchEndToClick = function touchEndToClick(event) {
+ events() {
+ const touchEndToClick = function (event) {
event.preventDefault();
event.target.click();
};
return {
- click: function click() {
+ click() {
this.model.set('isViewing', !this.model.get('isViewing'));
},
+
touchend: touchEndToClick
};
},
- initialize: function initialize() {
+
+ initialize() {
this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'change:isViewing', this.persist);
},
- render: function render() {
+
+ render() {
this.$el.toggleClass('hidden', !this.model.get('isVisible'));
this.$el.find('button').toggleClass('is-active', !this.model.get('isViewing'));
return this;
},
- persist: function persist(model, isViewing) {
+
+ persist(model, isViewing) {
if (!isViewing) {
localStorage.setItem('Drupal.contextualToolbar.isViewing', 'false');
} else {
localStorage.removeItem('Drupal.contextualToolbar.isViewing');
}
}
+
});
})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/contextual/js/views/AuralView.js b/core/modules/contextual/js/views/AuralView.js
index b26ead11955b090328367f231bdfc8b49c0915f2..ff936f93be872efcf7673259f11f9bce70318cac 100644
--- a/core/modules/contextual/js/views/AuralView.js
+++ b/core/modules/contextual/js/views/AuralView.js
@@ -7,18 +7,20 @@
(function (Drupal, Backbone) {
Drupal.contextual.AuralView = Backbone.View.extend({
- initialize: function initialize(options) {
+ initialize(options) {
this.options = options;
this.listenTo(this.model, 'change', this.render);
this.render();
},
- render: function render() {
- var isOpen = this.model.get('isOpen');
+
+ render() {
+ const isOpen = this.model.get('isOpen');
this.$el.find('.contextual-links').prop('hidden', !isOpen);
this.$el.find('.trigger').text(Drupal.t('@action @title configuration options', {
'@action': !isOpen ? this.options.strings.open : this.options.strings.close,
'@title': this.model.get('title')
})).attr('aria-pressed', isOpen);
}
+
});
})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/contextual/js/views/KeyboardView.js b/core/modules/contextual/js/views/KeyboardView.js
index 2f28f865852cc6aa6ed81eb005a97f0eeedb87d7..3f10479b3514535c6aa8ca8e6459e835ec1098af 100644
--- a/core/modules/contextual/js/views/KeyboardView.js
+++ b/core/modules/contextual/js/views/KeyboardView.js
@@ -10,22 +10,25 @@
events: {
'focus .trigger': 'focus',
'focus .contextual-links a': 'focus',
- 'blur .trigger': function blurTrigger() {
+ 'blur .trigger': function () {
this.model.blur();
},
- 'blur .contextual-links a': function blurContextualLinksA() {
- var that = this;
- this.timer = window.setTimeout(function () {
+ 'blur .contextual-links a': function () {
+ const that = this;
+ this.timer = window.setTimeout(() => {
that.model.close().blur();
}, 150);
}
},
- initialize: function initialize() {
+
+ initialize() {
this.timer = NaN;
},
- focus: function focus() {
+
+ focus() {
window.clearTimeout(this.timer);
this.model.focus();
}
+
});
})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/contextual/js/views/RegionView.js b/core/modules/contextual/js/views/RegionView.js
index e156b907511d51e18e54ac0d26f8d6f089a1784a..dd4270736d726951d01bd1757fdfc2a4c06c9645 100644
--- a/core/modules/contextual/js/views/RegionView.js
+++ b/core/modules/contextual/js/views/RegionView.js
@@ -7,14 +7,16 @@
(function (Drupal, Backbone, Modernizr) {
Drupal.contextual.RegionView = Backbone.View.extend({
- events: function events() {
- var mapping = {
- mouseenter: function mouseenter() {
+ events() {
+ let mapping = {
+ mouseenter() {
this.model.set('regionIsHovered', true);
},
- mouseleave: function mouseleave() {
+
+ mouseleave() {
this.model.close().blur().set('regionIsHovered', false);
}
+
};
if (Modernizr.touchevents) {
@@ -23,12 +25,15 @@
return mapping;
},
- initialize: function initialize() {
+
+ initialize() {
this.listenTo(this.model, 'change:hasFocus', this.render);
},
- render: function render() {
+
+ render() {
this.$el.toggleClass('focus', this.model.get('hasFocus'));
return this;
}
+
});
})(Drupal, Backbone, Modernizr);
\ No newline at end of file
diff --git a/core/modules/contextual/js/views/VisualView.js b/core/modules/contextual/js/views/VisualView.js
index dc5007504ca8d3831fae24458019d1fbb48c9bbf..9a97d220c8384d22ae40cc07c4165e7509caa861 100644
--- a/core/modules/contextual/js/views/VisualView.js
+++ b/core/modules/contextual/js/views/VisualView.js
@@ -7,18 +7,18 @@
(function (Drupal, Backbone, Modernizr) {
Drupal.contextual.VisualView = Backbone.View.extend({
- events: function events() {
- var touchEndToClick = function touchEndToClick(event) {
+ events() {
+ const touchEndToClick = function (event) {
event.preventDefault();
event.target.click();
};
- var mapping = {
- 'click .trigger': function clickTrigger() {
+ const mapping = {
+ 'click .trigger': function () {
this.model.toggleOpen();
},
'touchend .trigger': touchEndToClick,
- 'click .contextual-links a': function clickContextualLinksA() {
+ 'click .contextual-links a': function () {
this.model.close().blur();
},
'touchend .contextual-links a': touchEndToClick
@@ -32,12 +32,14 @@
return mapping;
},
- initialize: function initialize() {
+
+ initialize() {
this.listenTo(this.model, 'change', this.render);
},
- render: function render() {
- var isOpen = this.model.get('isOpen');
- var isVisible = this.model.get('isLocked') || this.model.get('regionIsHovered') || isOpen;
+
+ render() {
+ const isOpen = this.model.get('isOpen');
+ const isVisible = this.model.get('isLocked') || this.model.get('regionIsHovered') || isOpen;
this.$el.toggleClass('open', isOpen).find('.trigger').toggleClass('visually-hidden', !isVisible);
if ('isOpen' in this.model.changed) {
@@ -46,5 +48,6 @@
return this;
}
+
});
})(Drupal, Backbone, Modernizr);
\ No newline at end of file
diff --git a/core/modules/editor/js/editor.admin.js b/core/modules/editor/js/editor.admin.js
index eacbaa17d2ead726ef4fde60ba3e1a7a53e1d1eb..e78984f345d5b2d51dfa610ee0acde46fdc4e238 100644
--- a/core/modules/editor/js/editor.admin.js
+++ b/core/modules/editor/js/editor.admin.js
@@ -7,29 +7,32 @@
(function ($, _, Drupal, document) {
Drupal.editorConfiguration = {
- addedFeature: function addedFeature(feature) {
+ addedFeature(feature) {
$(document).trigger('drupalEditorFeatureAdded', feature);
},
- removedFeature: function removedFeature(feature) {
+
+ removedFeature(feature) {
$(document).trigger('drupalEditorFeatureRemoved', feature);
},
- modifiedFeature: function modifiedFeature(feature) {
+
+ modifiedFeature(feature) {
$(document).trigger('drupalEditorFeatureModified', feature);
},
- featureIsAllowedByFilters: function featureIsAllowedByFilters(feature) {
+
+ featureIsAllowedByFilters(feature) {
function emptyProperties(section) {
return section.attributes.length === 0 && section.classes.length === 0 && section.styles.length === 0;
}
function generateUniverseFromFeatureRequirements(feature) {
- var properties = ['attributes', 'styles', 'classes'];
- var universe = {};
+ const properties = ['attributes', 'styles', 'classes'];
+ const universe = {};
- for (var r = 0; r < feature.rules.length; r++) {
- var featureRule = feature.rules[r];
- var requiredTags = featureRule.required.tags;
+ for (let r = 0; r < feature.rules.length; r++) {
+ const featureRule = feature.rules[r];
+ const requiredTags = featureRule.required.tags;
- for (var t = 0; t < requiredTags.length; t++) {
+ for (let t = 0; t < requiredTags.length; t++) {
universe[requiredTags[t]] = {
tag: false,
touchedByAllowedPropertyRule: false
@@ -40,12 +43,12 @@
continue;
}
- for (var p = 0; p < properties.length; p++) {
- var property = properties[p];
+ for (let p = 0; p < properties.length; p++) {
+ const property = properties[p];
- for (var pv = 0; pv < featureRule.required[property].length; pv++) {
- var propertyValue = featureRule.required[property];
- universe[requiredTags]["".concat(property, ":").concat(propertyValue)] = false;
+ for (let pv = 0; pv < featureRule.required[property].length; pv++) {
+ const propertyValue = featureRule.required[property];
+ universe[requiredTags][`${property}:${propertyValue}`] = false;
}
}
}
@@ -58,7 +61,7 @@
return false;
}
- var key = "".concat(property, ":").concat(propertyValue);
+ const key = `${property}:${propertyValue}`;
if (allowing) {
universe[tag].touchedByAllowedPropertyRule = true;
@@ -76,10 +79,10 @@
return false;
}
- var atLeastOneFound = false;
- var regex = key.replace(/\*/g, '[^ ]*');
+ let atLeastOneFound = false;
+ const regex = key.replace(/\*/g, '[^ ]*');
- _.each(_.keys(universe[tag]), function (key) {
+ _.each(_.keys(universe[tag]), key => {
if (key.match(regex)) {
atLeastOneFound = true;
@@ -93,9 +96,9 @@
}
function findPropertyValuesOnAllTags(universe, property, propertyValues, allowing) {
- var atLeastOneFound = false;
+ let atLeastOneFound = false;
- _.each(_.keys(universe), function (tag) {
+ _.each(_.keys(universe), tag => {
if (findPropertyValuesOnTag(universe, tag, property, propertyValues, allowing)) {
atLeastOneFound = true;
}
@@ -109,9 +112,9 @@
return findPropertyValuesOnAllTags(universe, property, propertyValues, allowing);
}
- var atLeastOneFound = false;
+ let atLeastOneFound = false;
- _.each(propertyValues, function (propertyValue) {
+ _.each(propertyValues, propertyValue => {
if (findPropertyValueOnTag(universe, tag, property, propertyValue, allowing)) {
atLeastOneFound = true;
}
@@ -121,9 +124,9 @@
}
function deleteAllTagsFromUniverseIfAllowed(universe) {
- var atLeastOneDeleted = false;
+ let atLeastOneDeleted = false;
- _.each(_.keys(universe), function (tag) {
+ _.each(_.keys(universe), tag => {
if (deleteFromUniverseIfAllowed(universe, tag)) {
atLeastOneDeleted = true;
}
@@ -146,13 +149,13 @@
}
function anyForbiddenFilterRuleMatches(universe, filterStatus) {
- var properties = ['attributes', 'styles', 'classes'];
+ const properties = ['attributes', 'styles', 'classes'];
- var allRequiredTags = _.keys(universe);
+ const allRequiredTags = _.keys(universe);
- var filterRule;
+ let filterRule;
- for (var i = 0; i < filterStatus.rules.length; i++) {
+ for (let i = 0; i < filterStatus.rules.length; i++) {
filterRule = filterStatus.rules[i];
if (filterRule.allow === false) {
@@ -162,15 +165,15 @@
}
}
- for (var n = 0; n < filterStatus.rules.length; n++) {
+ for (let n = 0; n < filterStatus.rules.length; n++) {
filterRule = filterStatus.rules[n];
if (filterRule.restrictedTags.tags.length && !emptyProperties(filterRule.restrictedTags.forbidden)) {
- for (var j = 0; j < filterRule.restrictedTags.tags.length; j++) {
- var tag = filterRule.restrictedTags.tags[j];
+ for (let j = 0; j < filterRule.restrictedTags.tags.length; j++) {
+ const tag = filterRule.restrictedTags.tags[j];
- for (var k = 0; k < properties.length; k++) {
- var property = properties[k];
+ for (let k = 0; k < properties.length; k++) {
+ const property = properties[k];
if (findPropertyValuesOnTag(universe, tag, property, filterRule.restrictedTags.forbidden[property], false)) {
return true;
@@ -184,15 +187,15 @@
}
function markAllowedTagsAndPropertyValues(universe, filterStatus) {
- var properties = ['attributes', 'styles', 'classes'];
- var filterRule;
- var tag;
+ const properties = ['attributes', 'styles', 'classes'];
+ let filterRule;
+ let tag;
- for (var l = 0; !_.isEmpty(universe) && l < filterStatus.rules.length; l++) {
+ for (let l = 0; !_.isEmpty(universe) && l < filterStatus.rules.length; l++) {
filterRule = filterStatus.rules[l];
if (filterRule.allow === true) {
- for (var m = 0; !_.isEmpty(universe) && m < filterRule.tags.length; m++) {
+ for (let m = 0; !_.isEmpty(universe) && m < filterRule.tags.length; m++) {
tag = filterRule.tags[m];
if (_.has(universe, tag)) {
@@ -203,15 +206,15 @@
}
}
- for (var i = 0; !_.isEmpty(universe) && i < filterStatus.rules.length; i++) {
+ for (let i = 0; !_.isEmpty(universe) && i < filterStatus.rules.length; i++) {
filterRule = filterStatus.rules[i];
if (filterRule.restrictedTags.tags.length && !emptyProperties(filterRule.restrictedTags.allowed)) {
- for (var j = 0; !_.isEmpty(universe) && j < filterRule.restrictedTags.tags.length; j++) {
+ for (let j = 0; !_.isEmpty(universe) && j < filterRule.restrictedTags.tags.length; j++) {
tag = filterRule.restrictedTags.tags[j];
- for (var k = 0; k < properties.length; k++) {
- var property = properties[k];
+ for (let k = 0; k < properties.length; k++) {
+ const property = properties[k];
if (findPropertyValuesOnTag(universe, tag, property, filterRule.restrictedTags.allowed[property], true)) {
deleteFromUniverseIfAllowed(universe, tag);
@@ -235,7 +238,7 @@
return true;
}
- var universe = generateUniverseFromFeatureRequirements(feature);
+ const universe = generateUniverseFromFeatureRequirements(feature);
if (anyForbiddenFilterRuleMatches(universe, filterStatus)) {
return false;
@@ -252,10 +255,10 @@
return false;
}
- var tags = _.keys(universe);
+ const tags = _.keys(universe);
- for (var i = 0; i < tags.length; i++) {
- var tag = tags[i];
+ for (let i = 0; i < tags.length; i++) {
+ const tag = tags[i];
if (_.has(universe, tag)) {
if (universe[tag].touchedByAllowedPropertyRule === false) {
@@ -271,10 +274,9 @@
}
Drupal.filterConfiguration.update();
- return Object.keys(Drupal.filterConfiguration.statuses).every(function (filterID) {
- return filterStatusAllowsFeature(Drupal.filterConfiguration.statuses[filterID], feature);
- });
+ return Object.keys(Drupal.filterConfiguration.statuses).every(filterID => filterStatusAllowsFeature(Drupal.filterConfiguration.statuses[filterID], feature));
}
+
};
Drupal.EditorFeatureHTMLRule = function () {
@@ -332,7 +334,7 @@
};
Drupal.FilterHTMLRule.prototype.clone = function () {
- var clone = new Drupal.FilterHTMLRule();
+ const clone = new Drupal.FilterHTMLRule();
clone.tags = this.tags.slice(0);
clone.allow = this.allow;
clone.restrictedTags.tags = this.restrictedTags.tags.slice(0);
@@ -348,24 +350,27 @@
Drupal.filterConfiguration = {
statuses: {},
liveSettingParsers: {},
- update: function update() {
- Object.keys(Drupal.filterConfiguration.statuses || {}).forEach(function (filterID) {
- Drupal.filterConfiguration.statuses[filterID].active = $("[name=\"filters[".concat(filterID, "][status]\"]")).is(':checked');
+
+ update() {
+ Object.keys(Drupal.filterConfiguration.statuses || {}).forEach(filterID => {
+ Drupal.filterConfiguration.statuses[filterID].active = $(`[name="filters[${filterID}][status]"]`).is(':checked');
if (Drupal.filterConfiguration.liveSettingParsers[filterID]) {
Drupal.filterConfiguration.statuses[filterID].rules = Drupal.filterConfiguration.liveSettingParsers[filterID].getRules();
}
});
}
+
};
Drupal.behaviors.initializeFilterConfiguration = {
- attach: function attach(context, settings) {
- once('filter-editor-status', '#filters-status-wrapper input.form-checkbox', context).forEach(function (checkbox) {
- var $checkbox = $(checkbox);
- var nameAttribute = $checkbox.attr('name');
- var filterID = nameAttribute.substring(8, nameAttribute.indexOf(']'));
+ attach(context, settings) {
+ once('filter-editor-status', '#filters-status-wrapper input.form-checkbox', context).forEach(checkbox => {
+ const $checkbox = $(checkbox);
+ const nameAttribute = $checkbox.attr('name');
+ const filterID = nameAttribute.substring(8, nameAttribute.indexOf(']'));
Drupal.filterConfiguration.statuses[filterID] = new Drupal.FilterStatus(filterID);
});
}
+
};
})(jQuery, _, Drupal, document);
\ No newline at end of file
diff --git a/core/modules/editor/js/editor.formattedTextEditor.js b/core/modules/editor/js/editor.formattedTextEditor.js
index 2519b90406d63db7af44374181389cbcd1f83a01..0421b8da20fa250eb2e51e0f0e274e2f4e40e3fc 100644
--- a/core/modules/editor/js/editor.formattedTextEditor.js
+++ b/core/modules/editor/js/editor.formattedTextEditor.js
@@ -11,13 +11,14 @@
textFormatHasTransformations: null,
textEditor: null,
$textElement: null,
- initialize: function initialize(options) {
+
+ initialize(options) {
Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
- var metadata = Drupal.quickedit.metadata.get(this.fieldModel.get('fieldID'), 'custom');
+ const metadata = Drupal.quickedit.metadata.get(this.fieldModel.get('fieldID'), 'custom');
this.textFormat = drupalSettings.editor.formats[metadata.format];
this.textFormatHasTransformations = metadata.formatHasTransformations;
this.textEditor = Drupal.editors[this.textFormat.editor];
- var $fieldItems = this.$el.find('.quickedit-field');
+ const $fieldItems = this.$el.find('.quickedit-field');
if ($fieldItems.length) {
this.$textElement = $fieldItems.eq(0);
@@ -27,13 +28,15 @@
this.model.set('originalValue', this.$textElement.html());
},
- getEditedElement: function getEditedElement() {
+
+ getEditedElement() {
return this.$textElement;
},
- stateChange: function stateChange(fieldModel, state) {
- var editorModel = this.model;
- var from = fieldModel.previous('state');
- var to = state;
+
+ stateChange(fieldModel, state) {
+ const editorModel = this.model;
+ const from = fieldModel.previous('state');
+ const to = state;
switch (to) {
case 'inactive':
@@ -59,14 +62,14 @@
case 'activating':
if (this.textFormatHasTransformations) {
- var $textElement = this.$textElement;
+ const $textElement = this.$textElement;
- this._getUntransformedText(function (untransformedText) {
+ this._getUntransformedText(untransformedText => {
$textElement.html(untransformedText);
fieldModel.set('state', 'active');
});
} else {
- _.defer(function () {
+ _.defer(() => {
fieldModel.set('state', 'active');
});
}
@@ -75,10 +78,10 @@
case 'active':
{
- var textElement = this.$textElement.get(0);
- var toolbarView = fieldModel.toolbarView;
+ const textElement = this.$textElement.get(0);
+ const toolbarView = fieldModel.toolbarView;
this.textEditor.attachInlineEditor(textElement, this.textFormat, toolbarView.getMainWysiwygToolgroupId(), toolbarView.getFloatedWysiwygToolgroupId());
- this.textEditor.onChange(textElement, function (htmlText) {
+ this.textEditor.onChange(textElement, htmlText => {
editorModel.set('currentValue', htmlText);
fieldModel.set('state', 'changed');
});
@@ -104,7 +107,8 @@
break;
}
},
- getQuickEditUISettings: function getQuickEditUISettings() {
+
+ getQuickEditUISettings() {
return {
padding: true,
unifiedToolbar: true,
@@ -112,12 +116,14 @@
popup: false
};
},
- revert: function revert() {
+
+ revert() {
this.$textElement.html(this.model.get('originalValue'));
},
- _getUntransformedText: function _getUntransformedText(callback) {
- var fieldID = this.fieldModel.get('fieldID');
- var textLoaderAjax = Drupal.ajax({
+
+ _getUntransformedText(callback) {
+ const fieldID = this.fieldModel.get('fieldID');
+ const textLoaderAjax = Drupal.ajax({
url: Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('editor/!entity_type/!id/!field_name/!langcode/!view_mode')),
submit: {
nocssjs: true
@@ -130,5 +136,6 @@
textLoaderAjax.execute();
}
+
});
})(jQuery, Drupal, drupalSettings, _);
\ No newline at end of file
diff --git a/core/modules/editor/js/editor.js b/core/modules/editor/js/editor.js
index ec247975f77d2b8ca23ddbb2ea51d3a3c30ed72a..c819efcd70ea434e49b44f8d0c9d3b9147567977 100644
--- a/core/modules/editor/js/editor.js
+++ b/core/modules/editor/js/editor.js
@@ -7,8 +7,8 @@
(function ($, Drupal, drupalSettings) {
function findFieldForFormatSelector($formatSelector) {
- var fieldId = $formatSelector.attr('data-editor-for');
- return $("#".concat(fieldId)).get(0);
+ const fieldId = $formatSelector.attr('data-editor-for');
+ return $(`#${fieldId}`).get(0);
}
function filterXssWhenSwitching(field, format, originalFormatID, callback) {
@@ -16,26 +16,28 @@
callback(field, format);
} else {
$.ajax({
- url: Drupal.url("editor/filter_xss/".concat(format.format)),
+ url: Drupal.url(`editor/filter_xss/${format.format}`),
type: 'POST',
data: {
value: field.value,
original_format_id: originalFormatID
},
dataType: 'json',
- success: function success(xssFilteredValue) {
+
+ success(xssFilteredValue) {
if (xssFilteredValue !== false) {
field.value = xssFilteredValue;
}
callback(field, format);
}
+
});
}
}
function changeTextEditor(field, newFormatID) {
- var previousFormatID = field.getAttribute('data-editor-active-text-format');
+ const previousFormatID = field.getAttribute('data-editor-active-text-format');
if (drupalSettings.editor.formats[previousFormatID]) {
Drupal.editorDetach(field, drupalSettings.editor.formats[previousFormatID]);
@@ -44,7 +46,7 @@
}
if (drupalSettings.editor.formats[newFormatID]) {
- var format = drupalSettings.editor.formats[newFormatID];
+ const format = drupalSettings.editor.formats[newFormatID];
filterXssWhenSwitching(field, format, previousFormatID, Drupal.editorAttach);
}
@@ -52,49 +54,57 @@
}
function onTextFormatChange(event) {
- var $select = $(event.target);
- var field = event.data.field;
- var activeFormatID = field.getAttribute('data-editor-active-text-format');
- var newFormatID = $select.val();
+ const $select = $(event.target);
+ const field = event.data.field;
+ const activeFormatID = field.getAttribute('data-editor-active-text-format');
+ const newFormatID = $select.val();
if (newFormatID === activeFormatID) {
return;
}
- var supportContentFiltering = drupalSettings.editor.formats[newFormatID] && drupalSettings.editor.formats[newFormatID].editorSupportsContentFiltering;
- var hasContent = field.value !== '';
+ const supportContentFiltering = drupalSettings.editor.formats[newFormatID] && drupalSettings.editor.formats[newFormatID].editorSupportsContentFiltering;
+ const hasContent = field.value !== '';
if (hasContent && supportContentFiltering) {
- var message = Drupal.t('Changing the text format to %text_format will permanently remove content that is not allowed in that text format.<br><br>Save your changes before switching the text format to avoid losing data.', {
+ const message = Drupal.t('Changing the text format to %text_format will permanently remove content that is not allowed in that text format.<br><br>Save your changes before switching the text format to avoid losing data.', {
'%text_format': $select.find('option:selected').text()
});
- var confirmationDialog = Drupal.dialog("<div>".concat(message, "</div>"), {
+ const confirmationDialog = Drupal.dialog(`<div>${message}</div>`, {
title: Drupal.t('Change text format?'),
dialogClass: 'editor-change-text-format-modal',
resizable: false,
buttons: [{
text: Drupal.t('Continue'),
class: 'button button--primary',
- click: function click() {
+
+ click() {
changeTextEditor(field, newFormatID);
confirmationDialog.close();
}
+
}, {
text: Drupal.t('Cancel'),
class: 'button',
- click: function click() {
+
+ click() {
$select.val(activeFormatID);
confirmationDialog.close();
}
+
}],
closeOnEscape: false,
- create: function create() {
+
+ create() {
$(this).parent().find('.ui-dialog-titlebar-close').remove();
},
+
beforeClose: false,
- close: function close(event) {
+
+ close(event) {
$(event.target).remove();
}
+
});
confirmationDialog.showModal();
} else {
@@ -104,38 +114,38 @@
Drupal.editors = {};
Drupal.behaviors.editor = {
- attach: function attach(context, settings) {
+ attach(context, settings) {
if (!settings.editor) {
return;
}
- once('editor', '[data-editor-for]', context).forEach(function (editor) {
- var $this = $(editor);
- var field = findFieldForFormatSelector($this);
+ once('editor', '[data-editor-for]', context).forEach(editor => {
+ const $this = $(editor);
+ const field = findFieldForFormatSelector($this);
if (!field) {
return;
}
- var activeFormatID = $this.val();
+ const activeFormatID = $this.val();
field.setAttribute('data-editor-active-text-format', activeFormatID);
if (settings.editor.formats[activeFormatID]) {
Drupal.editorAttach(field, settings.editor.formats[activeFormatID]);
}
- $(field).on('change.editor keypress.editor', function () {
+ $(field).on('change.editor keypress.editor', () => {
field.setAttribute('data-editor-value-is-changed', 'true');
$(field).off('.editor');
});
if ($this.is('select')) {
$this.on('change.editorAttach', {
- field: field
+ field
}, onTextFormatChange);
}
- $this.parents('form').on('submit', function (event) {
+ $this.parents('form').on('submit', event => {
if (event.isDefaultPrevented()) {
return;
}
@@ -146,8 +156,9 @@
});
});
},
- detach: function detach(context, settings, trigger) {
- var editors;
+
+ detach(context, settings, trigger) {
+ let editors;
if (trigger === 'serialize') {
editors = once.filter('editor', '[data-editor-for]', context);
@@ -155,22 +166,23 @@
editors = once.remove('editor', '[data-editor-for]', context);
}
- editors.forEach(function (editor) {
- var $this = $(editor);
- var activeFormatID = $this.val();
- var field = findFieldForFormatSelector($this);
+ editors.forEach(editor => {
+ const $this = $(editor);
+ const activeFormatID = $this.val();
+ const field = findFieldForFormatSelector($this);
if (field && activeFormatID in settings.editor.formats) {
Drupal.editorDetach(field, settings.editor.formats[activeFormatID], trigger);
}
});
}
+
};
Drupal.editorAttach = function (field, format) {
if (format.editor) {
Drupal.editors[format.editor].attach(field, format);
- Drupal.editors[format.editor].onChange(field, function () {
+ Drupal.editors[format.editor].onChange(field, () => {
$(field).trigger('formUpdated');
field.setAttribute('data-editor-value-is-changed', 'true');
});
diff --git a/core/modules/field_ui/field_ui.js b/core/modules/field_ui/field_ui.js
index ef88cc357b2b517cf4758d341e88147c9d9e610b..76fdabc27e6fe00d5c4d164e81af00200a79ab74 100644
--- a/core/modules/field_ui/field_ui.js
+++ b/core/modules/field_ui/field_ui.js
@@ -7,22 +7,22 @@
(function ($, Drupal, drupalSettings) {
Drupal.behaviors.fieldUIFieldStorageAddForm = {
- attach: function attach(context) {
- var form = once('field_ui_add', '[data-drupal-selector="field-ui-field-storage-add-form"]', context);
+ attach(context) {
+ const form = once('field_ui_add', '[data-drupal-selector="field-ui-field-storage-add-form"]', context);
if (form.length) {
- var $form = $(form);
+ const $form = $(form);
$form.find('.js-form-item-label label,' + '.js-form-item-field-name label,' + '.js-form-item-existing-storage-label label').addClass('js-form-required form-required');
- var $newFieldType = $form.find('select[name="new_storage_type"]');
- var $existingStorageName = $form.find('select[name="existing_storage_name"]');
- var $existingStorageLabel = $form.find('input[name="existing_storage_label"]');
+ const $newFieldType = $form.find('select[name="new_storage_type"]');
+ const $existingStorageName = $form.find('select[name="existing_storage_name"]');
+ const $existingStorageLabel = $form.find('input[name="existing_storage_label"]');
$newFieldType.on('change', function () {
if ($(this).val() !== '') {
$existingStorageName.val('').trigger('change');
}
});
$existingStorageName.on('change', function () {
- var value = $(this).val();
+ const value = $(this).val();
if (value !== '') {
$newFieldType.val('').trigger('change');
@@ -34,37 +34,40 @@
});
}
}
+
};
Drupal.behaviors.fieldUIDisplayOverview = {
- attach: function attach(context, settings) {
- once('field-display-overview', 'table#field-display-overview', context).forEach(function (overview) {
+ attach(context, settings) {
+ once('field-display-overview', 'table#field-display-overview', context).forEach(overview => {
Drupal.fieldUIOverview.attach(overview, settings.fieldUIRowsData, Drupal.fieldUIDisplayOverview);
});
}
+
};
Drupal.fieldUIOverview = {
- attach: function attach(table, rowsData, rowHandlers) {
- var tableDrag = Drupal.tableDrag[table.id];
+ attach(table, rowsData, rowHandlers) {
+ const tableDrag = Drupal.tableDrag[table.id];
tableDrag.onDrop = this.onDrop;
tableDrag.row.prototype.onSwap = this.onSwap;
$(table).find('tr.draggable').each(function () {
- var row = this;
+ const row = this;
if (row.id in rowsData) {
- var data = rowsData[row.id];
+ const data = rowsData[row.id];
data.tableDrag = tableDrag;
- var rowHandler = new rowHandlers[data.rowHandler](row, data);
+ const rowHandler = new rowHandlers[data.rowHandler](row, data);
$(row).data('fieldUIRowHandler', rowHandler);
}
});
},
- onChange: function onChange() {
- var $trigger = $(this);
- var $row = $trigger.closest('tr');
- var rowHandler = $row.data('fieldUIRowHandler');
- var refreshRows = {};
+
+ onChange() {
+ const $trigger = $(this);
+ const $row = $trigger.closest('tr');
+ const rowHandler = $row.data('fieldUIRowHandler');
+ const refreshRows = {};
refreshRows[rowHandler.name] = $trigger.get(0);
- var region = rowHandler.getRegion();
+ const region = rowHandler.getRegion();
if (region !== rowHandler.region) {
$row.find('select.js-field-parent').val('');
@@ -74,27 +77,29 @@
Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
},
- onDrop: function onDrop() {
- var dragObject = this;
- var row = dragObject.rowObject.element;
- var $row = $(row);
- var rowHandler = $row.data('fieldUIRowHandler');
+
+ onDrop() {
+ const dragObject = this;
+ const row = dragObject.rowObject.element;
+ const $row = $(row);
+ const rowHandler = $row.data('fieldUIRowHandler');
if (typeof rowHandler !== 'undefined') {
- var regionRow = $row.prevAll('tr.region-message').get(0);
- var region = regionRow.className.replace(/([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
+ const regionRow = $row.prevAll('tr.region-message').get(0);
+ const region = regionRow.className.replace(/([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
if (region !== rowHandler.region) {
- var refreshRows = rowHandler.regionChange(region);
+ const refreshRows = rowHandler.regionChange(region);
rowHandler.region = region;
Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
}
}
},
- onSwap: function onSwap(draggedRow) {
- var rowObject = this;
+
+ onSwap(draggedRow) {
+ const rowObject = this;
$(rowObject.table).find('tr.region-message').each(function () {
- var $this = $(this);
+ const $this = $(this);
if ($this.prev('tr').get(0) === rowObject.group[rowObject.group.length - 1]) {
if (rowObject.method !== 'keyboard' || rowObject.direction === 'down') {
@@ -109,10 +114,11 @@
}
});
},
- AJAXRefreshRows: function AJAXRefreshRows(rows) {
- var rowNames = [];
- var ajaxElements = [];
- Object.keys(rows || {}).forEach(function (rowName) {
+
+ AJAXRefreshRows(rows) {
+ const rowNames = [];
+ const ajaxElements = [];
+ Object.keys(rows || {}).forEach(rowName => {
rowNames.push(rowName);
ajaxElements.push(rows[rowName]);
});
@@ -124,6 +130,7 @@
$(ajaxElements).prop('disabled', true);
}
}
+
};
Drupal.fieldUIDisplayOverview = {};
@@ -141,24 +148,26 @@
};
Drupal.fieldUIDisplayOverview.field.prototype = {
- getRegion: function getRegion() {
+ getRegion() {
return this.$regionSelect.val();
},
- regionChange: function regionChange(region) {
+
+ regionChange(region) {
region = region.replace(/-/g, '_');
this.$regionSelect.val(region);
if (this.region === 'hidden') {
- var value = typeof this.defaultPlugin !== 'undefined' ? this.defaultPlugin : this.$pluginSelect.find('option').val();
+ const value = typeof this.defaultPlugin !== 'undefined' ? this.defaultPlugin : this.$pluginSelect.find('option').val();
if (typeof value !== 'undefined') {
this.$pluginSelect.val(value);
}
}
- var refreshRows = {};
+ const refreshRows = {};
refreshRows[this.name] = this.$pluginSelect.get(0);
return refreshRows;
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/file/file.js b/core/modules/file/file.js
index b963984b4428a9efaab4688a37211b78c5c5fba1..56d48e8f2e27f613813989d6016410037e16a279 100644
--- a/core/modules/file/file.js
+++ b/core/modules/file/file.js
@@ -7,9 +7,9 @@
(function ($, Drupal) {
Drupal.behaviors.fileValidateAutoAttach = {
- attach: function attach(context, settings) {
- var $context = $(context);
- var elements;
+ attach(context, settings) {
+ const $context = $(context);
+ let elements;
function initFileValidation(selector) {
$(once('fileValidate', $context.find(selector))).on('change.fileValidate', {
@@ -22,9 +22,10 @@
Object.keys(elements).forEach(initFileValidation);
}
},
- detach: function detach(context, settings, trigger) {
- var $context = $(context);
- var elements;
+
+ detach(context, settings, trigger) {
+ const $context = $(context);
+ let elements;
function removeFileValidation(selector) {
$(once.remove('fileValidate', $context.find(selector))).off('change.fileValidate', Drupal.file.validateExtension);
@@ -35,98 +36,110 @@
Object.keys(elements).forEach(removeFileValidation);
}
}
+
};
Drupal.behaviors.fileAutoUpload = {
- attach: function attach(context) {
+ attach(context) {
$(once('auto-file-upload', 'input[type="file"]', context)).on('change.autoFileUpload', Drupal.file.triggerUploadButton);
},
- detach: function detach(context, settings, trigger) {
+
+ detach(context, settings, trigger) {
if (trigger === 'unload') {
$(once.remove('auto-file-upload', 'input[type="file"]', context)).off('.autoFileUpload');
}
}
+
};
Drupal.behaviors.fileButtons = {
- attach: function attach(context) {
- var $context = $(context);
+ attach(context) {
+ const $context = $(context);
$context.find('.js-form-submit').on('mousedown', Drupal.file.disableFields);
$context.find('.js-form-managed-file .js-form-submit').on('mousedown', Drupal.file.progressBar);
},
- detach: function detach(context, settings, trigger) {
+
+ detach(context, settings, trigger) {
if (trigger === 'unload') {
- var $context = $(context);
+ const $context = $(context);
$context.find('.js-form-submit').off('mousedown', Drupal.file.disableFields);
$context.find('.js-form-managed-file .js-form-submit').off('mousedown', Drupal.file.progressBar);
}
}
+
};
Drupal.behaviors.filePreviewLinks = {
- attach: function attach(context) {
+ attach(context) {
$(context).find('div.js-form-managed-file .file a').on('click', Drupal.file.openInNewWindow);
},
- detach: function detach(context) {
+
+ detach(context) {
$(context).find('div.js-form-managed-file .file a').off('click', Drupal.file.openInNewWindow);
}
+
};
Drupal.file = Drupal.file || {
- validateExtension: function validateExtension(event) {
+ validateExtension(event) {
event.preventDefault();
$('.file-upload-js-error').remove();
- var extensionPattern = event.data.extensions.replace(/,\s*/g, '|');
+ const extensionPattern = event.data.extensions.replace(/,\s*/g, '|');
if (extensionPattern.length > 1 && this.value.length > 0) {
- var acceptableMatch = new RegExp("\\.(".concat(extensionPattern, ")$"), 'gi');
+ const acceptableMatch = new RegExp(`\\.(${extensionPattern})$`, 'gi');
if (!acceptableMatch.test(this.value)) {
- var error = Drupal.t('The selected file %filename cannot be uploaded. Only files with the following extensions are allowed: %extensions.', {
+ const error = Drupal.t('The selected file %filename cannot be uploaded. Only files with the following extensions are allowed: %extensions.', {
'%filename': this.value.replace('C:\\fakepath\\', ''),
'%extensions': extensionPattern.replace(/\|/g, ', ')
});
- $(this).closest('div.js-form-managed-file').prepend("<div class=\"messages messages--error file-upload-js-error\" aria-live=\"polite\">".concat(error, "</div>"));
+ $(this).closest('div.js-form-managed-file').prepend(`<div class="messages messages--error file-upload-js-error" aria-live="polite">${error}</div>`);
this.value = '';
event.stopImmediatePropagation();
}
}
},
- triggerUploadButton: function triggerUploadButton(event) {
+
+ triggerUploadButton(event) {
$(event.target).closest('.js-form-managed-file').find('.js-form-submit[data-drupal-selector$="upload-button"]').trigger('mousedown');
},
- disableFields: function disableFields(event) {
- var $clickedButton = $(this);
+
+ disableFields(event) {
+ const $clickedButton = $(this);
$clickedButton.trigger('formUpdated');
- var $enabledFields = [];
+ let $enabledFields = [];
if ($clickedButton.closest('div.js-form-managed-file').length > 0) {
$enabledFields = $clickedButton.closest('div.js-form-managed-file').find('input.js-form-file');
}
- var $fieldsToTemporarilyDisable = $('div.js-form-managed-file input.js-form-file').not($enabledFields).not(':disabled');
+ const $fieldsToTemporarilyDisable = $('div.js-form-managed-file input.js-form-file').not($enabledFields).not(':disabled');
$fieldsToTemporarilyDisable.prop('disabled', true);
- setTimeout(function () {
+ setTimeout(() => {
$fieldsToTemporarilyDisable.prop('disabled', false);
}, 1000);
},
- progressBar: function progressBar(event) {
- var $clickedButton = $(this);
- var $progressId = $clickedButton.closest('div.js-form-managed-file').find('input.file-progress');
+
+ progressBar(event) {
+ const $clickedButton = $(this);
+ const $progressId = $clickedButton.closest('div.js-form-managed-file').find('input.file-progress');
if ($progressId.length) {
- var originalName = $progressId.attr('name');
+ const originalName = $progressId.attr('name');
$progressId.attr('name', originalName.match(/APC_UPLOAD_PROGRESS|UPLOAD_IDENTIFIER/)[0]);
- setTimeout(function () {
+ setTimeout(() => {
$progressId.attr('name', originalName);
}, 1000);
}
- setTimeout(function () {
+ setTimeout(() => {
$clickedButton.closest('div.js-form-managed-file').find('div.ajax-progress-bar').slideDown();
}, 500);
$clickedButton.trigger('fileUpload');
},
- openInNewWindow: function openInNewWindow(event) {
+
+ openInNewWindow(event) {
event.preventDefault();
$(this).attr('target', '_blank');
window.open(this.href, 'filePreview', 'toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=0,resizable=1,width=500,height=550');
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/filter/filter.admin.js b/core/modules/filter/filter.admin.js
index 43baa73394c05cf47e750fa1c025cab85962779e..848006dcaf90756dbfdef98800edee6e00ae0ab9 100644
--- a/core/modules/filter/filter.admin.js
+++ b/core/modules/filter/filter.admin.js
@@ -7,14 +7,14 @@
(function ($, Drupal) {
Drupal.behaviors.filterStatus = {
- attach: function attach(context, settings) {
- var $context = $(context);
- once('filter-status', '#filters-status-wrapper input.form-checkbox', context).forEach(function (checkbox) {
- var $checkbox = $(checkbox);
- var $row = $context.find("#".concat($checkbox.attr('id').replace(/-status$/, '-weight'))).closest('tr');
- var $filterSettings = $context.find("[data-drupal-selector='".concat($checkbox.attr('id').replace(/-status$/, '-settings'), "']"));
- var filterSettingsTab = $filterSettings.data('verticalTab');
- $checkbox.on('click.filterUpdate', function () {
+ attach(context, settings) {
+ const $context = $(context);
+ once('filter-status', '#filters-status-wrapper input.form-checkbox', context).forEach(checkbox => {
+ const $checkbox = $(checkbox);
+ const $row = $context.find(`#${$checkbox.attr('id').replace(/-status$/, '-weight')}`).closest('tr');
+ const $filterSettings = $context.find(`[data-drupal-selector='${$checkbox.attr('id').replace(/-status$/, '-settings')}']`);
+ const filterSettingsTab = $filterSettings.data('verticalTab');
+ $checkbox.on('click.filterUpdate', () => {
if ($checkbox.is(':checked')) {
$row.show();
@@ -37,13 +37,12 @@
});
if (filterSettingsTab) {
- filterSettingsTab.details.drupalSetSummary(function () {
- return $checkbox.is(':checked') ? Drupal.t('Enabled') : Drupal.t('Disabled');
- });
+ filterSettingsTab.details.drupalSetSummary(() => $checkbox.is(':checked') ? Drupal.t('Enabled') : Drupal.t('Disabled'));
}
$checkbox.triggerHandler('click.filterUpdate');
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/filter/filter.filter_html.admin.js b/core/modules/filter/filter.filter_html.admin.js
index 54eed3ff6b25db75d3266c870888b1b5be6e1a0b..eef5514052e3c8fa30cb41a653617c2455acb3a6 100644
--- a/core/modules/filter/filter.filter_html.admin.js
+++ b/core/modules/filter/filter.filter_html.admin.js
@@ -8,17 +8,18 @@
(function ($, Drupal, _, document) {
if (Drupal.filterConfiguration) {
Drupal.filterConfiguration.liveSettingParsers.filter_html = {
- getRules: function getRules() {
- var currentValue = $('#edit-filters-filter-html-settings-allowed-html').val();
+ getRules() {
+ const currentValue = $('#edit-filters-filter-html-settings-allowed-html').val();
- var rules = Drupal.behaviors.filterFilterHtmlUpdating._parseSetting(currentValue);
+ const rules = Drupal.behaviors.filterFilterHtmlUpdating._parseSetting(currentValue);
- var rule = new Drupal.FilterHTMLRule();
+ const rule = new Drupal.FilterHTMLRule();
rule.restrictedTags.tags = ['*'];
rule.restrictedTags.forbidden.attributes = ['style', 'on*'];
rules.push(rule);
return rules;
}
+
};
}
@@ -28,23 +29,24 @@
userTags: {},
autoTags: null,
newFeatures: {},
- attach: function attach(context, settings) {
- var that = this;
- once('filter-filter_html-updating', '[name="filters[filter_html][settings][allowed_html]"]', context).forEach(function (formItem) {
+
+ attach(context, settings) {
+ const that = this;
+ once('filter-filter_html-updating', '[name="filters[filter_html][settings][allowed_html]"]', context).forEach(formItem => {
that.$allowedHTMLFormItem = $(formItem);
that.$allowedHTMLDescription = that.$allowedHTMLFormItem.closest('.js-form-item').find('.description');
that.userTags = that._parseSetting(formItem.value);
- $(document).on('drupalEditorFeatureAdded', function (e, feature) {
+ $(document).on('drupalEditorFeatureAdded', (e, feature) => {
that.newFeatures[feature.name] = feature.rules;
that._updateAllowedTags();
- }).on('drupalEditorFeatureModified', function (e, feature) {
+ }).on('drupalEditorFeatureModified', (e, feature) => {
if (that.newFeatures.hasOwnProperty(feature.name)) {
that.newFeatures[feature.name] = feature.rules;
that._updateAllowedTags();
}
- }).on('drupalEditorFeatureRemoved', function (e, feature) {
+ }).on('drupalEditorFeatureRemoved', (e, feature) => {
if (that.newFeatures.hasOwnProperty(feature.name)) {
delete that.newFeatures[feature.name];
@@ -56,32 +58,34 @@
});
});
},
- _updateAllowedTags: function _updateAllowedTags() {
+
+ _updateAllowedTags() {
this.autoTags = this._calculateAutoAllowedTags(this.userTags, this.newFeatures);
this.$allowedHTMLDescription.find('.editor-update-message').remove();
if (!_.isEmpty(this.autoTags)) {
this.$allowedHTMLDescription.append(Drupal.theme('filterFilterHTMLUpdateMessage', this.autoTags));
- var userTagsWithoutOverrides = _.omit(this.userTags, _.keys(this.autoTags));
+ const userTagsWithoutOverrides = _.omit(this.userTags, _.keys(this.autoTags));
- this.$allowedHTMLFormItem.val("".concat(this._generateSetting(userTagsWithoutOverrides), " ").concat(this._generateSetting(this.autoTags)));
+ this.$allowedHTMLFormItem.val(`${this._generateSetting(userTagsWithoutOverrides)} ${this._generateSetting(this.autoTags)}`);
} else {
this.$allowedHTMLFormItem.val(this._generateSetting(this.userTags));
}
},
- _calculateAutoAllowedTags: function _calculateAutoAllowedTags(userAllowedTags, newFeatures) {
- var editorRequiredTags = {};
- Object.keys(newFeatures || {}).forEach(function (featureName) {
- var feature = newFeatures[featureName];
- var featureRule;
- var filterRule;
- var tag;
-
- for (var f = 0; f < feature.length; f++) {
+
+ _calculateAutoAllowedTags(userAllowedTags, newFeatures) {
+ const editorRequiredTags = {};
+ Object.keys(newFeatures || {}).forEach(featureName => {
+ const feature = newFeatures[featureName];
+ let featureRule;
+ let filterRule;
+ let tag;
+
+ for (let f = 0; f < feature.length; f++) {
featureRule = feature[f];
- for (var t = 0; t < featureRule.required.tags.length; t++) {
+ for (let t = 0; t < featureRule.required.tags.length; t++) {
tag = featureRule.required.tags[t];
if (!_.has(editorRequiredTags, tag)) {
@@ -98,20 +102,20 @@
}
}
});
- var autoAllowedTags = {};
- Object.keys(editorRequiredTags).forEach(function (tag) {
+ const autoAllowedTags = {};
+ Object.keys(editorRequiredTags).forEach(tag => {
if (!_.has(userAllowedTags, tag)) {
autoAllowedTags[tag] = editorRequiredTags[tag];
} else {
- var requiredAttributes = editorRequiredTags[tag].restrictedTags.allowed.attributes;
- var allowedAttributes = userAllowedTags[tag].restrictedTags.allowed.attributes;
+ const requiredAttributes = editorRequiredTags[tag].restrictedTags.allowed.attributes;
+ const allowedAttributes = userAllowedTags[tag].restrictedTags.allowed.attributes;
- var needsAdditionalAttributes = requiredAttributes.length && _.difference(requiredAttributes, allowedAttributes).length;
+ const needsAdditionalAttributes = requiredAttributes.length && _.difference(requiredAttributes, allowedAttributes).length;
- var requiredClasses = editorRequiredTags[tag].restrictedTags.allowed.classes;
- var allowedClasses = userAllowedTags[tag].restrictedTags.allowed.classes;
+ const requiredClasses = editorRequiredTags[tag].restrictedTags.allowed.classes;
+ const allowedClasses = userAllowedTags[tag].restrictedTags.allowed.classes;
- var needsAdditionalClasses = requiredClasses.length && _.difference(requiredClasses, allowedClasses).length;
+ const needsAdditionalClasses = requiredClasses.length && _.difference(requiredClasses, allowedClasses).length;
if (needsAdditionalAttributes || needsAdditionalClasses) {
autoAllowedTags[tag] = userAllowedTags[tag].clone();
@@ -128,27 +132,28 @@
});
return autoAllowedTags;
},
- _parseSetting: function _parseSetting(setting) {
- var tag;
- var rule;
- var attributes;
- var attribute;
- var allowedTags = setting.match(/(<[^>]+>)/g);
- var rules = {};
-
- for (var t = 0; t < allowedTags.length; t++) {
- var $tagObject = $(allowedTags[t]);
+
+ _parseSetting(setting) {
+ let tag;
+ let rule;
+ let attributes;
+ let attribute;
+ const allowedTags = setting.match(/(<[^>]+>)/g);
+ const rules = {};
+
+ for (let t = 0; t < allowedTags.length; t++) {
+ const $tagObject = $(allowedTags[t]);
tag = $tagObject.prop('tagName').toLowerCase();
rule = new Drupal.FilterHTMLRule();
rule.restrictedTags.tags = [tag];
attributes = $tagObject.prop('attributes');
- for (var i = 0; i < attributes.length; i++) {
+ for (let i = 0; i < attributes.length; i++) {
attribute = attributes.item(i);
- var attributeName = attribute.nodeName;
+ const attributeName = attribute.nodeName;
if (attributeName === 'class') {
- var attributeValue = attribute.textContent;
+ const attributeValue = attribute.textContent;
rule.restrictedTags.allowed.classes = attributeValue.split(' ');
} else {
rule.restrictedTags.allowed.attributes.push(attributeName);
@@ -160,32 +165,34 @@
return rules;
},
- _generateSetting: function _generateSetting(tags) {
- return _.reduce(tags, function (setting, rule, tag) {
+
+ _generateSetting(tags) {
+ return _.reduce(tags, (setting, rule, tag) => {
if (setting.length) {
setting += ' ';
}
- setting += "<".concat(tag);
+ setting += `<${tag}`;
if (rule.restrictedTags.allowed.attributes.length) {
- setting += " ".concat(rule.restrictedTags.allowed.attributes.join(' '));
+ setting += ` ${rule.restrictedTags.allowed.attributes.join(' ')}`;
}
if (rule.restrictedTags.allowed.classes.length) {
- setting += " class=\"".concat(rule.restrictedTags.allowed.classes.join(' '), "\"");
+ setting += ` class="${rule.restrictedTags.allowed.classes.join(' ')}"`;
}
setting += '>';
return setting;
}, '');
}
+
};
Drupal.theme.filterFilterHTMLUpdateMessage = function (tags) {
- var html = '';
+ let html = '';
- var tagList = Drupal.behaviors.filterFilterHtmlUpdating._generateSetting(tags);
+ const tagList = Drupal.behaviors.filterFilterHtmlUpdating._generateSetting(tags);
html += '<p class="editor-update-message">';
html += Drupal.t('Based on the text editor configuration, these tags have automatically been added: <strong>@tag-list</strong>.', {
diff --git a/core/modules/filter/filter.js b/core/modules/filter/filter.js
index e8d57f1d79d96a5c1ef746b7e4a074266edd54d1..de9391b207a74b1dee7ef48203c2501c769941d9 100644
--- a/core/modules/filter/filter.js
+++ b/core/modules/filter/filter.js
@@ -7,14 +7,15 @@
(function ($, Drupal) {
Drupal.behaviors.filterGuidelines = {
- attach: function attach(context) {
+ attach(context) {
function updateFilterGuidelines(event) {
- var $this = $(event.target);
- var value = $this.val();
- $this.closest('.js-filter-wrapper').find('[data-drupal-format-id]').hide().filter("[data-drupal-format-id=\"".concat(value, "\"]")).show();
+ const $this = $(event.target);
+ const value = $this.val();
+ $this.closest('.js-filter-wrapper').find('[data-drupal-format-id]').hide().filter(`[data-drupal-format-id="${value}"]`).show();
}
$(once('filter-guidelines', '.js-filter-guidelines', context)).find(':header').hide().closest('.js-filter-wrapper').find('select.js-filter-list').on('change.filterGuidelines', updateFilterGuidelines).trigger('change.filterGuidelines');
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/history/js/history.js b/core/modules/history/js/history.js
index 8e13059da8c3738ccbc8fdcb897f357beb8ebcc0..4b2ef8e21ecc04942f3d4ea8090a65bec7d7fa01 100644
--- a/core/modules/history/js/history.js
+++ b/core/modules/history/js/history.js
@@ -6,17 +6,17 @@
**/
(function ($, Drupal, drupalSettings, storage) {
- var currentUserID = parseInt(drupalSettings.user.uid, 10);
- var secondsIn30Days = 2592000;
- var thirtyDaysAgo = Math.round(new Date().getTime() / 1000) - secondsIn30Days;
- var embeddedLastReadTimestamps = false;
+ const currentUserID = parseInt(drupalSettings.user.uid, 10);
+ const secondsIn30Days = 2592000;
+ const thirtyDaysAgo = Math.round(new Date().getTime() / 1000) - secondsIn30Days;
+ let embeddedLastReadTimestamps = false;
if (drupalSettings.history && drupalSettings.history.lastReadTimestamps) {
embeddedLastReadTimestamps = drupalSettings.history.lastReadTimestamps;
}
Drupal.history = {
- fetchTimestamps: function fetchTimestamps(nodeIDs, callback) {
+ fetchTimestamps(nodeIDs, callback) {
if (embeddedLastReadTimestamps) {
callback();
return;
@@ -29,36 +29,43 @@
'node_ids[]': nodeIDs
},
dataType: 'json',
- success: function success(results) {
- Object.keys(results || {}).forEach(function (nodeID) {
- storage.setItem("Drupal.history.".concat(currentUserID, ".").concat(nodeID), results[nodeID]);
+
+ success(results) {
+ Object.keys(results || {}).forEach(nodeID => {
+ storage.setItem(`Drupal.history.${currentUserID}.${nodeID}`, results[nodeID]);
});
callback();
}
+
});
},
- getLastRead: function getLastRead(nodeID) {
+
+ getLastRead(nodeID) {
if (embeddedLastReadTimestamps && embeddedLastReadTimestamps[nodeID]) {
return parseInt(embeddedLastReadTimestamps[nodeID], 10);
}
- return parseInt(storage.getItem("Drupal.history.".concat(currentUserID, ".").concat(nodeID)) || 0, 10);
+ return parseInt(storage.getItem(`Drupal.history.${currentUserID}.${nodeID}`) || 0, 10);
},
- markAsRead: function markAsRead(nodeID) {
+
+ markAsRead(nodeID) {
$.ajax({
- url: Drupal.url("history/".concat(nodeID, "/read")),
+ url: Drupal.url(`history/${nodeID}/read`),
type: 'POST',
dataType: 'json',
- success: function success(timestamp) {
+
+ success(timestamp) {
if (embeddedLastReadTimestamps && embeddedLastReadTimestamps[nodeID]) {
return;
}
- storage.setItem("Drupal.history.".concat(currentUserID, ".").concat(nodeID), timestamp);
+ storage.setItem(`Drupal.history.${currentUserID}.${nodeID}`, timestamp);
}
+
});
},
- needsServerCheck: function needsServerCheck(nodeID, contentTimestamp) {
+
+ needsServerCheck(nodeID, contentTimestamp) {
if (contentTimestamp < thirtyDaysAgo) {
return false;
}
@@ -67,8 +74,9 @@
return contentTimestamp > parseInt(embeddedLastReadTimestamps[nodeID], 10);
}
- var minLastReadTimestamp = parseInt(storage.getItem("Drupal.history.".concat(currentUserID, ".").concat(nodeID)) || 0, 10);
+ const minLastReadTimestamp = parseInt(storage.getItem(`Drupal.history.${currentUserID}.${nodeID}`) || 0, 10);
return contentTimestamp > minLastReadTimestamp;
}
+
};
})(jQuery, Drupal, drupalSettings, window.localStorage);
\ No newline at end of file
diff --git a/core/modules/history/js/mark-as-read.js b/core/modules/history/js/mark-as-read.js
index c3a74f4296d493d1c15402d910c3adf811df3f93..e42d7c4dddac9e7b5a18344d797ce9c7847490ba 100644
--- a/core/modules/history/js/mark-as-read.js
+++ b/core/modules/history/js/mark-as-read.js
@@ -6,7 +6,7 @@
**/
(function (window, Drupal, drupalSettings) {
- window.addEventListener('load', function () {
+ window.addEventListener('load', () => {
if (drupalSettings.history && drupalSettings.history.nodesToMarkAsRead) {
Object.keys(drupalSettings.history.nodesToMarkAsRead).forEach(Drupal.history.markAsRead);
}
diff --git a/core/modules/image/js/editors/image.js b/core/modules/image/js/editors/image.js
index 4ca52361d480ad48e9cd786c2fe485d52e334230..c6a5126384e2dc15c49fee314292eb4547941e7c 100644
--- a/core/modules/image/js/editors/image.js
+++ b/core/modules/image/js/editors/image.js
@@ -7,16 +7,16 @@
(function ($, _, Drupal) {
Drupal.quickedit.editors.image = Drupal.quickedit.EditorView.extend({
- initialize: function initialize(options) {
+ initialize(options) {
Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
this.model.set('originalValue', this.$el.html().trim());
this.model.set('currentValue', function (index, value) {
- var matches = $(this).attr('name').match(/(alt|title)]$/);
+ const matches = $(this).attr('name').match(/(alt|title)]$/);
if (matches) {
- var name = matches[1];
- var $toolgroup = $("#".concat(options.fieldModel.toolbarView.getMainWysiwygToolgroupId()));
- var $input = $toolgroup.find(".quickedit-image-field-info input[name=\"".concat(name, "\"]"));
+ const name = matches[1];
+ const $toolgroup = $(`#${options.fieldModel.toolbarView.getMainWysiwygToolgroupId()}`);
+ const $input = $toolgroup.find(`.quickedit-image-field-info input[name="${name}"]`);
if ($input.length) {
return $input.val();
@@ -24,8 +24,9 @@
}
});
},
- stateChange: function stateChange(fieldModel, state, options) {
- var from = fieldModel.previous('state');
+
+ stateChange(fieldModel, state, options) {
+ const from = fieldModel.previous('state');
switch (state) {
case 'inactive':
@@ -47,7 +48,7 @@
break;
case 'activating':
- _.defer(function () {
+ _.defer(() => {
fieldModel.set('state', 'active');
});
@@ -55,9 +56,9 @@
case 'active':
{
- var self = this;
+ const self = this;
this.$el.addClass('quickedit-image-element');
- var $dropzone = this.renderDropzone('upload', Drupal.t('Drop file here or click to upload'));
+ const $dropzone = this.renderDropzone('upload', Drupal.t('Drop file here or click to upload'));
$dropzone.on('dragenter', function (e) {
$(this).addClass('hover');
});
@@ -70,14 +71,14 @@
self.uploadImage(e.originalEvent.dataTransfer.files[0]);
}
});
- $dropzone.on('click', function (e) {
+ $dropzone.on('click', e => {
$('<input type="file">').trigger('click').on('change', function () {
if (this.files.length) {
self.uploadImage(this.files[0]);
}
});
});
- $dropzone.on('dragover dragenter dragleave drop click', function (e) {
+ $dropzone.on('dragover dragenter dragleave drop click', e => {
e.preventDefault();
e.stopPropagation();
});
@@ -104,42 +105,48 @@
break;
}
},
- uploadImage: function uploadImage(file) {
+
+ uploadImage(file) {
this.renderDropzone('upload loading', Drupal.t('Uploading <i>@file</i>…', {
'@file': file.name
}));
- var fieldID = this.fieldModel.get('fieldID');
- var url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/upload/!entity_type/!id/!field_name/!langcode/!view_mode'));
- var data = new FormData();
+ const fieldID = this.fieldModel.get('fieldID');
+ const url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/upload/!entity_type/!id/!field_name/!langcode/!view_mode'));
+ const data = new FormData();
data.append('files[image]', file);
- var self = this;
+ const self = this;
this.ajax({
type: 'POST',
- url: url,
- data: data,
- success: function success(response) {
- var $el = $(self.fieldModel.get('el'));
+ url,
+ data,
+
+ success(response) {
+ const $el = $(self.fieldModel.get('el'));
self.fieldModel.set('state', 'changed');
self.fieldModel.get('entity').set('inTempStore', true);
self.removeValidationErrors();
- var $content = $(response.html).closest('[data-quickedit-field-id]').children();
+ const $content = $(response.html).closest('[data-quickedit-field-id]').children();
$el.empty().append($content);
}
+
});
},
- ajax: function ajax(options) {
- var defaultOptions = {
+
+ ajax(options) {
+ const defaultOptions = {
context: this,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
- error: function error() {
+
+ error() {
this.renderDropzone('error', Drupal.t('A server error has occurred.'));
}
+
};
- var ajaxOptions = $.extend(defaultOptions, options);
- var successCallback = ajaxOptions.success;
+ const ajaxOptions = $.extend(defaultOptions, options);
+ const successCallback = ajaxOptions.success;
ajaxOptions.success = function (response) {
if (response.main_error) {
@@ -157,47 +164,53 @@
$.ajax(ajaxOptions);
},
- renderToolbar: function renderToolbar(fieldModel) {
- var $toolgroup = $("#".concat(fieldModel.toolbarView.getMainWysiwygToolgroupId()));
- var $toolbar = $toolgroup.find('.quickedit-image-field-info');
+
+ renderToolbar(fieldModel) {
+ const $toolgroup = $(`#${fieldModel.toolbarView.getMainWysiwygToolgroupId()}`);
+ let $toolbar = $toolgroup.find('.quickedit-image-field-info');
if ($toolbar.length === 0) {
- var fieldID = fieldModel.get('fieldID');
- var url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/info/!entity_type/!id/!field_name/!langcode/!view_mode'));
- var self = this;
+ const fieldID = fieldModel.get('fieldID');
+ const url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/info/!entity_type/!id/!field_name/!langcode/!view_mode'));
+ const self = this;
self.ajax({
type: 'GET',
- url: url,
- success: function success(response) {
+ url,
+
+ success(response) {
$toolbar = $(Drupal.theme.quickeditImageToolbar(response));
$toolgroup.append($toolbar);
- $toolbar.on('keyup paste', function () {
+ $toolbar.on('keyup paste', () => {
fieldModel.set('state', 'changed');
});
fieldModel.get('entity').toolbarView.position();
}
+
});
}
},
- renderDropzone: function renderDropzone(state, text) {
- var $dropzone = this.$el.find('.quickedit-image-dropzone');
+
+ renderDropzone(state, text) {
+ let $dropzone = this.$el.find('.quickedit-image-dropzone');
if ($dropzone.length) {
- $dropzone.removeClass('upload error hover loading').addClass(".quickedit-image-dropzone ".concat(state)).children('.quickedit-image-text').html(text);
+ $dropzone.removeClass('upload error hover loading').addClass(`.quickedit-image-dropzone ${state}`).children('.quickedit-image-text').html(text);
} else {
$dropzone = $(Drupal.theme('quickeditImageDropzone', {
- state: state,
- text: text
+ state,
+ text
}));
this.$el.append($dropzone);
}
return $dropzone;
},
- revert: function revert() {
+
+ revert() {
this.$el.html(this.model.get('originalValue'));
},
- getQuickEditUISettings: function getQuickEditUISettings() {
+
+ getQuickEditUISettings() {
return {
padding: false,
unifiedToolbar: true,
@@ -205,17 +218,20 @@
popup: false
};
},
- showValidationErrors: function showValidationErrors() {
- var errors = Drupal.theme('quickeditImageErrors', {
+
+ showValidationErrors() {
+ const errors = Drupal.theme('quickeditImageErrors', {
errors: this.model.get('validationErrors')
});
- $("#".concat(this.fieldModel.toolbarView.getMainWysiwygToolgroupId())).append(errors);
+ $(`#${this.fieldModel.toolbarView.getMainWysiwygToolgroupId()}`).append(errors);
this.getEditedElement().addClass('quickedit-validation-error');
this.fieldModel.get('entity').toolbarView.position();
},
- removeValidationErrors: function removeValidationErrors() {
- $("#".concat(this.fieldModel.toolbarView.getMainWysiwygToolgroupId())).find('.quickedit-image-errors').remove();
+
+ removeValidationErrors() {
+ $(`#${this.fieldModel.toolbarView.getMainWysiwygToolgroupId()}`).find('.quickedit-image-errors').remove();
this.getEditedElement().removeClass('quickedit-validation-error');
}
+
});
})(jQuery, _, Drupal);
\ No newline at end of file
diff --git a/core/modules/image/js/theme.js b/core/modules/image/js/theme.js
index 2f1c60e3b6fc993a2872ac1a118d9cacdb41ff53..6ae707b0ae5e73197c10445134f820a1749af62f 100644
--- a/core/modules/image/js/theme.js
+++ b/core/modules/image/js/theme.js
@@ -7,22 +7,22 @@
(function (Drupal) {
Drupal.theme.quickeditImageErrors = function (settings) {
- return "<div class=\"quickedit-image-errors\">".concat(settings.errors, "</div>");
+ return `<div class="quickedit-image-errors">${settings.errors}</div>`;
};
Drupal.theme.quickeditImageDropzone = function (settings) {
- return "<div class=\"quickedit-image-dropzone ".concat(settings.state, "\">") + ' <i class="quickedit-image-icon"></i>' + " <span class=\"quickedit-image-text\">".concat(settings.text, "</span>") + '</div>';
+ return `<div class="quickedit-image-dropzone ${settings.state}">` + ' <i class="quickedit-image-icon"></i>' + ` <span class="quickedit-image-text">${settings.text}</span>` + '</div>';
};
Drupal.theme.quickeditImageToolbar = function (settings) {
- var html = '<form class="quickedit-image-field-info">';
+ let html = '<form class="quickedit-image-field-info">';
if (settings.alt_field) {
- html += "<div><label for=\"alt\" class=\"".concat(settings.alt_field_required ? 'required' : '', "\">").concat(Drupal.t('Alternative text'), "</label>") + "<input type=\"text\" placeholder=\"".concat(settings.alt, "\" value=\"").concat(settings.alt, "\" name=\"alt\" ").concat(settings.alt_field_required ? 'required' : '', "/>") + ' </div>';
+ html += `<div><label for="alt" class="${settings.alt_field_required ? 'required' : ''}">${Drupal.t('Alternative text')}</label>` + `<input type="text" placeholder="${settings.alt}" value="${settings.alt}" name="alt" ${settings.alt_field_required ? 'required' : ''}/>` + ' </div>';
}
if (settings.title_field) {
- html += "<div><label for=\"title\" class=\"".concat(settings.title_field_required ? 'form-required' : '', "\">").concat(Drupal.t('Title'), "</label>") + "<input type=\"text\" placeholder=\"".concat(settings.title, "\" value=\"").concat(settings.title, "\" name=\"title\" ").concat(settings.title_field_required ? 'required' : '', "/>") + '</div>';
+ html += `<div><label for="title" class="${settings.title_field_required ? 'form-required' : ''}">${Drupal.t('Title')}</label>` + `<input type="text" placeholder="${settings.title}" value="${settings.title}" name="title" ${settings.title_field_required ? 'required' : ''}/>` + '</div>';
}
html += '</form>';
diff --git a/core/modules/language/language.admin.js b/core/modules/language/language.admin.js
index 4ae06b194e00e2c5c8c526ba1b2c446b0e83473d..373e7193310aa2e1930954b855a1dc7f21155608 100644
--- a/core/modules/language/language.admin.js
+++ b/core/modules/language/language.admin.js
@@ -7,21 +7,22 @@
(function ($, Drupal) {
Drupal.behaviors.negotiationLanguage = {
- attach: function attach() {
- var $configForm = $('#language-negotiation-configure-form');
- var inputSelector = 'input[name$="[configurable]"]';
+ attach() {
+ const $configForm = $('#language-negotiation-configure-form');
+ const inputSelector = 'input[name$="[configurable]"]';
function toggleTable(checkbox) {
- var $checkbox = $(checkbox);
+ const $checkbox = $(checkbox);
$checkbox.closest('.table-language-group').find('table, .tabledrag-toggle-weight').toggle($checkbox.prop('checked'));
}
- $(once('negotiation-language-admin-bind', $configForm)).on('change', inputSelector, function (event) {
+ $(once('negotiation-language-admin-bind', $configForm)).on('change', inputSelector, event => {
toggleTable(event.target);
});
- $configForm.find("".concat(inputSelector, ":not(:checked)")).each(function (index, element) {
+ $configForm.find(`${inputSelector}:not(:checked)`).each((index, element) => {
toggleTable(element);
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/layout_builder/js/layout-builder.js b/core/modules/layout_builder/js/layout-builder.js
index a3fc41e9c2c01a5e15aad1fd4f19ebd001f3eeff..be5a820c093143bff1cfa78246f69646975430af 100644
--- a/core/modules/layout_builder/js/layout-builder.js
+++ b/core/modules/layout_builder/js/layout-builder.js
@@ -5,24 +5,26 @@
* @preserve
**/
-(function ($, Drupal, Sortable) {
- var ajax = Drupal.ajax,
- behaviors = Drupal.behaviors,
- debounce = Drupal.debounce,
- announce = Drupal.announce,
- formatPlural = Drupal.formatPlural;
- var layoutBuilderBlocksFiltered = false;
+(($, Drupal, Sortable) => {
+ const {
+ ajax,
+ behaviors,
+ debounce,
+ announce,
+ formatPlural
+ } = Drupal;
+ let layoutBuilderBlocksFiltered = false;
behaviors.layoutBuilderBlockFilter = {
- attach: function attach(context) {
- var $categories = $('.js-layout-builder-categories', context);
- var $filterLinks = $categories.find('.js-layout-builder-block-link');
+ attach(context) {
+ const $categories = $('.js-layout-builder-categories', context);
+ const $filterLinks = $categories.find('.js-layout-builder-block-link');
- var filterBlockList = function filterBlockList(e) {
- var query = $(e.target).val().toLowerCase();
+ const filterBlockList = e => {
+ const query = $(e.target).val().toLowerCase();
- var toggleBlockEntry = function toggleBlockEntry(index, link) {
- var $link = $(link);
- var textMatch = $link.text().toLowerCase().indexOf(query) !== -1;
+ const toggleBlockEntry = (index, link) => {
+ const $link = $(link);
+ const textMatch = $link.text().toLowerCase().indexOf(query) !== -1;
$link.toggle(textMatch);
};
@@ -44,65 +46,60 @@
$(once('block-filter-text', 'input.js-layout-builder-filter', context)).on('keyup', debounce(filterBlockList, 200));
}
+
};
Drupal.layoutBuilderBlockUpdate = function (item, from, to) {
- var $item = $(item);
- var $from = $(from);
- var itemRegion = $item.closest('.js-layout-builder-region');
+ const $item = $(item);
+ const $from = $(from);
+ const itemRegion = $item.closest('.js-layout-builder-region');
if (to === itemRegion[0]) {
- var deltaTo = $item.closest('[data-layout-delta]').data('layout-delta');
- var deltaFrom = $from ? $from.closest('[data-layout-delta]').data('layout-delta') : deltaTo;
+ const deltaTo = $item.closest('[data-layout-delta]').data('layout-delta');
+ const deltaFrom = $from ? $from.closest('[data-layout-delta]').data('layout-delta') : deltaTo;
ajax({
- url: [$item.closest('[data-layout-update-url]').data('layout-update-url'), deltaFrom, deltaTo, itemRegion.data('region'), $item.data('layout-block-uuid'), $item.prev('[data-layout-block-uuid]').data('layout-block-uuid')].filter(function (element) {
- return element !== undefined;
- }).join('/')
+ url: [$item.closest('[data-layout-update-url]').data('layout-update-url'), deltaFrom, deltaTo, itemRegion.data('region'), $item.data('layout-block-uuid'), $item.prev('[data-layout-block-uuid]').data('layout-block-uuid')].filter(element => element !== undefined).join('/')
}).execute();
}
};
behaviors.layoutBuilderBlockDrag = {
- attach: function attach(context) {
- var regionSelector = '.js-layout-builder-region';
- Array.prototype.forEach.call(context.querySelectorAll(regionSelector), function (region) {
+ attach(context) {
+ const regionSelector = '.js-layout-builder-region';
+ Array.prototype.forEach.call(context.querySelectorAll(regionSelector), region => {
Sortable.create(region, {
draggable: '.js-layout-builder-block',
ghostClass: 'ui-state-drop',
group: 'builder-region',
- onEnd: function onEnd(event) {
- return Drupal.layoutBuilderBlockUpdate(event.item, event.from, event.to);
- }
+ onEnd: event => Drupal.layoutBuilderBlockUpdate(event.item, event.from, event.to)
});
});
}
+
};
behaviors.layoutBuilderDisableInteractiveElements = {
- attach: function attach() {
- var $blocks = $('#layout-builder [data-layout-block-uuid]');
+ attach() {
+ const $blocks = $('#layout-builder [data-layout-block-uuid]');
$blocks.find('input, textarea, select').prop('disabled', true);
- $blocks.find('a').not(function (index, element) {
- return $(element).closest('[data-contextual-id]').length > 0;
- }).on('click mouseup touchstart', function (e) {
+ $blocks.find('a').not((index, element) => $(element).closest('[data-contextual-id]').length > 0).on('click mouseup touchstart', e => {
e.preventDefault();
e.stopPropagation();
});
- $blocks.find('button, [href], input, select, textarea, iframe, [tabindex]:not([tabindex="-1"]):not(.tabbable)').not(function (index, element) {
- return $(element).closest('[data-contextual-id]').length > 0;
- }).attr('tabindex', -1);
+ $blocks.find('button, [href], input, select, textarea, iframe, [tabindex]:not([tabindex="-1"]):not(.tabbable)').not((index, element) => $(element).closest('[data-contextual-id]').length > 0).attr('tabindex', -1);
}
+
};
- $(window).on('dialog:aftercreate', function (event, dialog, $element) {
+ $(window).on('dialog:aftercreate', (event, dialog, $element) => {
if (Drupal.offCanvas.isOffCanvas($element)) {
$('.is-layout-builder-highlighted').removeClass('is-layout-builder-highlighted');
- var id = $element.find('[data-layout-builder-target-highlight-id]').attr('data-layout-builder-target-highlight-id');
+ const id = $element.find('[data-layout-builder-target-highlight-id]').attr('data-layout-builder-target-highlight-id');
if (id) {
- $("[data-layout-builder-highlight-id=\"".concat(id, "\"]")).addClass('is-layout-builder-highlighted');
+ $(`[data-layout-builder-highlight-id="${id}"]`).addClass('is-layout-builder-highlighted');
}
$('#layout-builder').removeClass('layout-builder--move-blocks-active');
- var layoutBuilderWrapperValue = $element.find('[data-add-layout-builder-wrapper]').attr('data-add-layout-builder-wrapper');
+ const layoutBuilderWrapperValue = $element.find('[data-add-layout-builder-wrapper]').attr('data-add-layout-builder-wrapper');
if (layoutBuilderWrapperValue) {
$('#layout-builder').addClass(layoutBuilderWrapperValue);
@@ -111,19 +108,19 @@
});
if (document.querySelector('[data-off-canvas-main-canvas]')) {
- var mainCanvas = document.querySelector('[data-off-canvas-main-canvas]');
- mainCanvas.addEventListener('transitionend', function () {
- var $target = $('.is-layout-builder-highlighted');
+ const mainCanvas = document.querySelector('[data-off-canvas-main-canvas]');
+ mainCanvas.addEventListener('transitionend', () => {
+ const $target = $('.is-layout-builder-highlighted');
if ($target.length > 0) {
- var targetTop = $target.offset().top;
- var targetBottom = targetTop + $target.outerHeight();
- var viewportTop = $(window).scrollTop();
- var viewportBottom = viewportTop + $(window).height();
+ const targetTop = $target.offset().top;
+ const targetBottom = targetTop + $target.outerHeight();
+ const viewportTop = $(window).scrollTop();
+ const viewportBottom = viewportTop + $(window).height();
if (targetBottom < viewportTop || targetTop > viewportBottom) {
- var viewportMiddle = (viewportBottom + viewportTop) / 2;
- var scrollAmount = targetTop - viewportMiddle;
+ const viewportMiddle = (viewportBottom + viewportTop) / 2;
+ const scrollAmount = targetTop - viewportMiddle;
if ('scrollBehavior' in document.documentElement.style) {
window.scrollBy({
@@ -139,40 +136,40 @@
});
}
- $(window).on('dialog:afterclose', function (event, dialog, $element) {
+ $(window).on('dialog:afterclose', (event, dialog, $element) => {
if (Drupal.offCanvas.isOffCanvas($element)) {
$('.is-layout-builder-highlighted').removeClass('is-layout-builder-highlighted');
$('#layout-builder').removeClass('layout-builder--move-blocks-active');
}
});
behaviors.layoutBuilderToggleContentPreview = {
- attach: function attach(context) {
- var $layoutBuilder = $('#layout-builder');
- var $layoutBuilderContentPreview = $('#layout-builder-content-preview');
- var contentPreviewId = $layoutBuilderContentPreview.data('content-preview-id');
- var isContentPreview = JSON.parse(localStorage.getItem(contentPreviewId)) !== false;
+ attach(context) {
+ const $layoutBuilder = $('#layout-builder');
+ const $layoutBuilderContentPreview = $('#layout-builder-content-preview');
+ const contentPreviewId = $layoutBuilderContentPreview.data('content-preview-id');
+ const isContentPreview = JSON.parse(localStorage.getItem(contentPreviewId)) !== false;
- var disableContentPreview = function disableContentPreview() {
+ const disableContentPreview = () => {
$layoutBuilder.addClass('layout-builder--content-preview-disabled');
- $('[data-layout-content-preview-placeholder-label]', context).each(function (i, element) {
- var $element = $(element);
+ $('[data-layout-content-preview-placeholder-label]', context).each((i, element) => {
+ const $element = $(element);
$element.children(':not([data-contextual-id])').hide(0);
- var contentPreviewPlaceholderText = $element.attr('data-layout-content-preview-placeholder-label');
- var contentPreviewPlaceholderLabel = Drupal.theme('layoutBuilderPrependContentPreviewPlaceholderLabel', contentPreviewPlaceholderText);
+ const contentPreviewPlaceholderText = $element.attr('data-layout-content-preview-placeholder-label');
+ const contentPreviewPlaceholderLabel = Drupal.theme('layoutBuilderPrependContentPreviewPlaceholderLabel', contentPreviewPlaceholderText);
$element.prepend(contentPreviewPlaceholderLabel);
});
};
- var enableContentPreview = function enableContentPreview() {
+ const enableContentPreview = () => {
$layoutBuilder.removeClass('layout-builder--content-preview-disabled');
$('.js-layout-builder-content-preview-placeholder-label').remove();
- $('[data-layout-content-preview-placeholder-label]').each(function (i, element) {
+ $('[data-layout-content-preview-placeholder-label]').each((i, element) => {
$(element).children().show();
});
};
- $('#layout-builder-content-preview', context).on('change', function (event) {
- var isChecked = $(event.currentTarget).is(':checked');
+ $('#layout-builder-content-preview', context).on('change', event => {
+ const isChecked = $(event.currentTarget).is(':checked');
localStorage.setItem(contentPreviewId, JSON.stringify(isChecked));
if (isChecked) {
@@ -189,12 +186,13 @@
disableContentPreview();
}
}
+
};
- Drupal.theme.layoutBuilderPrependContentPreviewPlaceholderLabel = function (contentPreviewPlaceholderText) {
- var contentPreviewPlaceholderLabel = document.createElement('div');
+ Drupal.theme.layoutBuilderPrependContentPreviewPlaceholderLabel = contentPreviewPlaceholderText => {
+ const contentPreviewPlaceholderLabel = document.createElement('div');
contentPreviewPlaceholderLabel.className = 'layout-builder-block__content-preview-placeholder-label js-layout-builder-content-preview-placeholder-label';
contentPreviewPlaceholderLabel.innerHTML = contentPreviewPlaceholderText;
- return "<div class=\"layout-builder-block__content-preview-placeholder-label js-layout-builder-content-preview-placeholder-label\">".concat(contentPreviewPlaceholderText, "</div>");
+ return `<div class="layout-builder-block__content-preview-placeholder-label js-layout-builder-content-preview-placeholder-label">${contentPreviewPlaceholderText}</div>`;
};
})(jQuery, Drupal, Sortable);
\ No newline at end of file
diff --git a/core/modules/locale/locale.admin.js b/core/modules/locale/locale.admin.js
index d5eb6baf99a70640c33687931bf809cfe315d724..cfe50643c658e1f8bec9078031033111aa69df71 100644
--- a/core/modules/locale/locale.admin.js
+++ b/core/modules/locale/locale.admin.js
@@ -7,20 +7,20 @@
(function ($, Drupal) {
Drupal.behaviors.localeTranslateDirty = {
- attach: function attach() {
- var form = once('localetranslatedirty', '#locale-translate-edit-form');
+ attach() {
+ const form = once('localetranslatedirty', '#locale-translate-edit-form');
if (form.length) {
- var $form = $(form);
+ const $form = $(form);
$form.one('formUpdated.localeTranslateDirty', 'table', function () {
- var $marker = $(Drupal.theme('localeTranslateChangedWarning')).hide();
+ const $marker = $(Drupal.theme('localeTranslateChangedWarning')).hide();
$(this).addClass('changed').before($marker);
$marker.fadeIn('slow');
});
$form.on('formUpdated.localeTranslateDirty', 'tr', function () {
- var $row = $(this);
- var rowToMark = once('localemark', $row);
- var marker = Drupal.theme('localeTranslateChangedMarker');
+ const $row = $(this);
+ const rowToMark = once('localemark', $row);
+ const marker = Drupal.theme('localeTranslateChangedMarker');
$row.addClass('changed');
if (rowToMark.length) {
@@ -29,32 +29,34 @@
});
}
},
- detach: function detach(context, settings, trigger) {
+
+ detach(context, settings, trigger) {
if (trigger === 'unload') {
- var form = once.remove('localetranslatedirty', '#locale-translate-edit-form');
+ const form = once.remove('localetranslatedirty', '#locale-translate-edit-form');
if (form.length) {
$(form).off('formUpdated.localeTranslateDirty');
}
}
}
+
};
Drupal.behaviors.hideUpdateInformation = {
- attach: function attach(context, settings) {
- var table = once('expand-updates', '#locale-translation-status-form');
+ attach(context, settings) {
+ const table = once('expand-updates', '#locale-translation-status-form');
if (table.length) {
- var $table = $(table);
- var $tbodies = $table.find('tbody');
+ const $table = $(table);
+ const $tbodies = $table.find('tbody');
$tbodies.on('click keydown', '.description', function (e) {
if (e.keyCode && e.keyCode !== 13 && e.keyCode !== 32) {
return;
}
e.preventDefault();
- var $tr = $(this).closest('tr');
+ const $tr = $(this).closest('tr');
$tr.toggleClass('expanded');
- $tr.find('.locale-translation-update__prefix').text(function () {
+ $tr.find('.locale-translation-update__prefix').text(() => {
if ($tr.hasClass('expanded')) {
return Drupal.t('Hide description');
}
@@ -65,13 +67,16 @@
$table.find('.requirements, .links').hide();
}
}
+
};
$.extend(Drupal.theme, {
- localeTranslateChangedMarker: function localeTranslateChangedMarker() {
- return "<abbr class=\"warning ajax-changed\" title=\"".concat(Drupal.t('Changed'), "\">*</abbr>");
+ localeTranslateChangedMarker() {
+ return `<abbr class="warning ajax-changed" title="${Drupal.t('Changed')}">*</abbr>`;
},
- localeTranslateChangedWarning: function localeTranslateChangedWarning() {
- return "<div class=\"clearfix messages messages--warning\">".concat(Drupal.theme('localeTranslateChangedMarker'), " ").concat(Drupal.t('Changes made in this table will not be saved until the form is submitted.'), "</div>");
+
+ localeTranslateChangedWarning() {
+ return `<div class="clearfix messages messages--warning">${Drupal.theme('localeTranslateChangedMarker')} ${Drupal.t('Changes made in this table will not be saved until the form is submitted.')}</div>`;
}
+
});
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/locale/locale.bulk.js b/core/modules/locale/locale.bulk.js
index 4222a7891a92b4d82bc5ad0686464f0cf6ca472b..9ee0feb957a0bd3cb3389e540dc33a425626eea4 100644
--- a/core/modules/locale/locale.bulk.js
+++ b/core/modules/locale/locale.bulk.js
@@ -7,20 +7,21 @@
(function ($, Drupal) {
Drupal.behaviors.importLanguageCodeSelector = {
- attach: function attach(context, settings) {
- var form = once('autodetect-lang', '#locale-translate-import-form');
+ attach(context, settings) {
+ const form = once('autodetect-lang', '#locale-translate-import-form');
if (form.length) {
- var $form = $(form);
- var $langcode = $form.find('.langcode-input');
+ const $form = $(form);
+ const $langcode = $form.find('.langcode-input');
$form.find('.file-import-input').on('change', function () {
- var matches = $(this).val().match(/([^.][.]*)([\w-]+)\.po$/);
+ const matches = $(this).val().match(/([^.][.]*)([\w-]+)\.po$/);
- if (matches && $langcode.find("option[value=\"".concat(matches[2], "\"]")).length) {
+ if (matches && $langcode.find(`option[value="${matches[2]}"]`).length) {
$langcode.val(matches[2]);
}
});
}
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/media/js/form.js b/core/modules/media/js/form.js
index aa2ee237eac1edd105c04d0adea335d332949ed0..970e2eafe562dcb09491a3fd8fa01ad344f41656 100644
--- a/core/modules/media/js/form.js
+++ b/core/modules/media/js/form.js
@@ -7,12 +7,12 @@
(function ($, Drupal) {
Drupal.behaviors.mediaFormSummaries = {
- attach: function attach(context) {
- var $context = $(context);
- $context.find('.media-form-author').drupalSetSummary(function (context) {
- var $authorContext = $(context);
- var name = $authorContext.find('.field--name-uid input').val();
- var date = $authorContext.find('.field--name-created input').val();
+ attach(context) {
+ const $context = $(context);
+ $context.find('.media-form-author').drupalSetSummary(context => {
+ const $authorContext = $(context);
+ const name = $authorContext.find('.field--name-uid input').val();
+ const date = $authorContext.find('.field--name-created input').val();
if (name && date) {
return Drupal.t('By @name on @date', {
@@ -34,5 +34,6 @@
}
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/media/js/media_embed_ckeditor.theme.js b/core/modules/media/js/media_embed_ckeditor.theme.js
index bddc1ea4772169d6dc10d054f2a2e2fd4e99ce35..7a63f1120ff0f943e953522ceafafa5001330d2c 100644
--- a/core/modules/media/js/media_embed_ckeditor.theme.js
+++ b/core/modules/media/js/media_embed_ckeditor.theme.js
@@ -5,12 +5,8 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.mediaEmbedPreviewError = function () {
- return "<div>".concat(Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.'), "</div>");
- };
+(Drupal => {
+ Drupal.theme.mediaEmbedPreviewError = () => `<div>${Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.')}</div>`;
- Drupal.theme.mediaEmbedEditButton = function () {
- return "<button class=\"media-library-item__edit\">".concat(Drupal.t('Edit media'), "</button>");
- };
+ Drupal.theme.mediaEmbedEditButton = () => `<button class="media-library-item__edit">${Drupal.t('Edit media')}</button>`;
})(Drupal);
\ No newline at end of file
diff --git a/core/modules/media/js/plugins/drupalmedia/plugin.js b/core/modules/media/js/plugins/drupalmedia/plugin.js
index 626931693ca1b104af71eb034c8f98c0b0c3da03..51e1da502e3ecf027655070c70a94ab488688f3a 100644
--- a/core/modules/media/js/plugins/drupalmedia/plugin.js
+++ b/core/modules/media/js/plugins/drupalmedia/plugin.js
@@ -7,7 +7,7 @@
(function (jQuery, Drupal, CKEDITOR) {
function getFocusedWidget(editor) {
- var widget = editor.widgets.focused;
+ const widget = editor.widgets.focused;
if (widget && widget.name === 'drupalmedia') {
return widget;
@@ -23,7 +23,7 @@
CKEDITOR.plugins.drupallink.registerLinkableWidget('drupalmedia');
editor.getCommand('drupalunlink').on('exec', function (evt) {
- var widget = getFocusedWidget(editor);
+ const widget = getFocusedWidget(editor);
if (!widget) {
return;
@@ -34,7 +34,7 @@
evt.cancel();
});
editor.getCommand('drupalunlink').on('refresh', function (evt) {
- var widget = getFocusedWidget(editor);
+ const widget = getFocusedWidget(editor);
if (!widget) {
return;
@@ -45,8 +45,8 @@
});
if (editor.contextMenu) {
- editor.contextMenu.addListener(function () {
- var widget = getFocusedWidget(editor);
+ editor.contextMenu.addListener(() => {
+ const widget = getFocusedWidget(editor);
if (!widget) {
return;
@@ -66,12 +66,15 @@
CKEDITOR.plugins.add('drupalmedia', {
requires: 'widget',
- beforeInit: function beforeInit(editor) {
- var dtd = CKEDITOR.dtd;
+
+ beforeInit(editor) {
+ const {
+ dtd
+ } = CKEDITOR;
dtd['drupal-media'] = {
'#': 1
};
- Object.keys(dtd).forEach(function (tagName) {
+ Object.keys(dtd).forEach(tagName => {
if (dtd[tagName].div) {
dtd[tagName]['drupal-media'] = 1;
}
@@ -106,15 +109,19 @@
pathName: Drupal.t('Caption')
}
},
- getLabel: function getLabel() {
+
+ getLabel() {
if (this.data.label) {
return this.data.label;
}
return Drupal.t('Embedded media');
},
- upcast: function upcast(element, data) {
- var attributes = element.attributes;
+
+ upcast(element, data) {
+ const {
+ attributes
+ } = element;
if (element.name !== 'drupal-media' || attributes['data-entity-type'] !== 'media' || attributes['data-entity-uuid'] === undefined) {
return;
@@ -132,14 +139,14 @@
if (element.parent.name === 'a') {
data.link = CKEDITOR.tools.copy(element.parent.attributes);
- Object.keys(element.parent.attributes).forEach(function (attrName) {
+ Object.keys(element.parent.attributes).forEach(attrName => {
if (attrName.indexOf('data-cke-') !== -1) {
delete data.link[attrName];
}
});
}
- var hostEntityLangcode = document.getElementById(editor.name).getAttribute('data-media-embed-host-entity-langcode');
+ const hostEntityLangcode = document.getElementById(editor.name).getAttribute('data-media-embed-host-entity-langcode');
if (hostEntityLangcode) {
data.hostEntityLangcode = hostEntityLangcode;
@@ -147,12 +154,12 @@
return element;
},
- destroy: function destroy() {
+
+ destroy() {
this._tearDownDynamicEditables();
},
- data: function data(event) {
- var _this = this;
+ data(event) {
if (this.oldData) {
if (!this.data.hasCaption && this.oldData.hasCaption) {
delete this.data.attributes['data-caption'];
@@ -166,7 +173,7 @@
this._tearDownDynamicEditables();
- this._loadPreview(function (widget) {
+ this._loadPreview(widget => {
widget._setUpDynamicEditables();
widget._setUpEditButton();
@@ -176,36 +183,35 @@
}
if (this.oldData) {
- Object.keys(this.oldData.attributes).forEach(function (attrName) {
- _this.element.removeAttribute(attrName);
+ Object.keys(this.oldData.attributes).forEach(attrName => {
+ this.element.removeAttribute(attrName);
});
}
this.element.setAttributes(this.data.attributes);
this.oldData = CKEDITOR.tools.clone(this.data);
},
- downcast: function downcast() {
- var downcastElement = new CKEDITOR.htmlParser.element('drupal-media', this.data.attributes);
+
+ downcast() {
+ const downcastElement = new CKEDITOR.htmlParser.element('drupal-media', this.data.attributes);
if (this.data.link) {
- var link = new CKEDITOR.htmlParser.element('a', this.data.link);
+ const link = new CKEDITOR.htmlParser.element('a', this.data.link);
link.add(downcastElement);
return link;
}
return downcastElement;
},
- _setUpDynamicEditables: function _setUpDynamicEditables() {
- var _this2 = this;
+ _setUpDynamicEditables() {
if (this.initEditable('caption', this.definition.editables.caption)) {
- var captionEditable = this.editables.caption;
+ const captionEditable = this.editables.caption;
captionEditable.setAttribute('data-placeholder', Drupal.t('Enter caption here'));
- this.captionObserver = new MutationObserver(function () {
- var mediaAttributes = CKEDITOR.tools.clone(_this2.data.attributes);
+ this.captionObserver = new MutationObserver(() => {
+ const mediaAttributes = CKEDITOR.tools.clone(this.data.attributes);
mediaAttributes['data-caption'] = captionEditable.getData();
-
- _this2.setData('attributes', mediaAttributes);
+ this.setData('attributes', mediaAttributes);
});
this.captionObserver.observe(captionEditable.$, {
characterData: true,
@@ -219,34 +225,35 @@
}
}
},
- _setUpEditButton: function _setUpEditButton() {
+
+ _setUpEditButton() {
if (this.element.findOne('.media-embed-error')) {
return;
}
- var isElementNode = function isElementNode(n) {
+ const isElementNode = function (n) {
return n.type === CKEDITOR.NODE_ELEMENT;
};
- var embeddedMediaContainer = this.data.hasCaption ? this.element.findOne('figure') : this.element;
- var embeddedMedia = embeddedMediaContainer.getFirst(isElementNode);
+ const embeddedMediaContainer = this.data.hasCaption ? this.element.findOne('figure') : this.element;
+ let embeddedMedia = embeddedMediaContainer.getFirst(isElementNode);
if (this.data.link) {
embeddedMedia = embeddedMedia.getFirst(isElementNode);
}
embeddedMedia.setStyle('position', 'relative');
- var editButton = CKEDITOR.dom.element.createFromHtml(Drupal.theme('mediaEmbedEditButton'));
+ const editButton = CKEDITOR.dom.element.createFromHtml(Drupal.theme('mediaEmbedEditButton'));
embeddedMedia.getFirst().insertBeforeMe(editButton);
- var widget = this;
- this.element.findOne('.media-library-item__edit').on('click', function (event) {
- var saveCallback = function saveCallback(values) {
+ const widget = this;
+ this.element.findOne('.media-library-item__edit').on('click', event => {
+ const saveCallback = function (values) {
event.cancel();
editor.fire('saveSnapshot');
if (values.hasOwnProperty('attributes')) {
CKEDITOR.tools.extend(values.attributes, widget.data.attributes);
- Object.keys(values.attributes).forEach(function (prop) {
+ Object.keys(values.attributes).forEach(prop => {
if (values.attributes[prop] === false || prop === 'data-align' && values.attributes[prop] === 'none') {
delete values.attributes[prop];
}
@@ -260,14 +267,14 @@
editor.fire('saveSnapshot');
};
- Drupal.ckeditor.openDialog(editor, Drupal.url("editor/dialog/media/".concat(editor.config.drupal.format)), widget.data, saveCallback, {});
+ Drupal.ckeditor.openDialog(editor, Drupal.url(`editor/dialog/media/${editor.config.drupal.format}`), widget.data, saveCallback, {});
});
- this.element.findOne('.media-library-item__edit').on('keydown', function (event) {
- var returnKey = 13;
- var spaceBar = 32;
+ this.element.findOne('.media-library-item__edit').on('keydown', event => {
+ const returnKey = 13;
+ const spaceBar = 32;
if (typeof event.data !== 'undefined') {
- var keypress = event.data.getKey();
+ const keypress = event.data.getKey();
if (keypress === returnKey || keypress === spaceBar) {
event.sender.$.click();
@@ -278,20 +285,23 @@
}
});
},
- _tearDownDynamicEditables: function _tearDownDynamicEditables() {
+
+ _tearDownDynamicEditables() {
if (this.captionObserver) {
this.captionObserver.disconnect();
}
},
- _previewNeedsServerSideUpdate: function _previewNeedsServerSideUpdate() {
+
+ _previewNeedsServerSideUpdate() {
if (!this.ready) {
return true;
}
return this._hashData(this.oldData) !== this._hashData(this.data);
},
- _hashData: function _hashData(data) {
- var dataToHash = CKEDITOR.tools.clone(data);
+
+ _hashData(data) {
+ const dataToHash = CKEDITOR.tools.clone(data);
delete dataToHash.attributes['data-caption'];
delete dataToHash.label;
@@ -301,11 +311,10 @@
return JSON.stringify(dataToHash);
},
- _loadPreview: function _loadPreview(callback) {
- var _this3 = this;
+ _loadPreview(callback) {
jQuery.get({
- url: Drupal.url("media/".concat(editor.config.drupal.format, "/preview")),
+ url: Drupal.url(`media/${editor.config.drupal.format}/preview`),
data: {
text: this.downcast().getOuterHtml(),
uuid: this.data.attributes['data-entity-uuid']
@@ -314,22 +323,23 @@
headers: {
'X-Drupal-MediaPreview-CSRF-Token': editor.config.drupalMedia_previewCsrfToken
},
- success: function success(previewHtml, textStatus, jqXhr) {
- _this3.element.setHtml(previewHtml);
-
- _this3.setData('label', jqXhr.getResponseHeader('Drupal-Media-Label'));
-
- callback(_this3);
+ success: (previewHtml, textStatus, jqXhr) => {
+ this.element.setHtml(previewHtml);
+ this.setData('label', jqXhr.getResponseHeader('Drupal-Media-Label'));
+ callback(this);
},
- error: function error() {
- _this3.element.setHtml(Drupal.theme('mediaEmbedPreviewError'));
+ error: () => {
+ this.element.setHtml(Drupal.theme('mediaEmbedPreviewError'));
}
});
}
+
});
},
- afterInit: function afterInit(editor) {
+
+ afterInit(editor) {
linkCommandIntegrator(editor);
}
+
});
})(jQuery, Drupal, CKEDITOR);
\ No newline at end of file
diff --git a/core/modules/media/js/type_form.js b/core/modules/media/js/type_form.js
index 01c2150f3605aec9b02413663a69d152c2d871a9..6f62a15db3d33a6756c908e6cc60d96719c7e046 100644
--- a/core/modules/media/js/type_form.js
+++ b/core/modules/media/js/type_form.js
@@ -7,10 +7,10 @@
(function ($, Drupal) {
Drupal.behaviors.mediaTypeFormSummaries = {
- attach: function attach(context) {
- var $context = $(context);
- $context.find('#edit-workflow').drupalSetSummary(function (context) {
- var vals = [];
+ attach(context) {
+ const $context = $(context);
+ $context.find('#edit-workflow').drupalSetSummary(context => {
+ const vals = [];
$(context).find('input[name^="options"]:checked').parent().each(function () {
vals.push(Drupal.checkPlain($(this).find('label').text()));
});
@@ -21,8 +21,8 @@
return vals.join(', ');
});
- $(context).find('#edit-language').drupalSetSummary(function (context) {
- var vals = [];
+ $(context).find('#edit-language').drupalSetSummary(context => {
+ const vals = [];
vals.push($(context).find('.js-form-item-language-configuration-langcode select option:selected').text());
$(context).find('input:checked').next('label').each(function () {
vals.push(Drupal.checkPlain($(this).text()));
@@ -30,5 +30,6 @@
return vals.join(', ');
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/media_library/js/media_library.click_to_select.js b/core/modules/media_library/js/media_library.click_to_select.js
index 4c4aeaa397ef90388df08b7e66b12f0383543b3e..e7de36a1b3bccbf2a217a24ce27c50e7e074210c 100644
--- a/core/modules/media_library/js/media_library.click_to_select.js
+++ b/core/modules/media_library/js/media_library.click_to_select.js
@@ -5,27 +5,31 @@
* @preserve
**/
-(function ($, Drupal) {
+(($, Drupal) => {
Drupal.behaviors.ClickToSelect = {
- attach: function attach(context) {
- $(once('media-library-click-to-select', '.js-click-to-select-trigger', context)).on('click', function (event) {
+ attach(context) {
+ $(once('media-library-click-to-select', '.js-click-to-select-trigger', context)).on('click', event => {
event.preventDefault();
- var $input = $(event.currentTarget).closest('.js-click-to-select').find('.js-click-to-select-checkbox input');
+ const $input = $(event.currentTarget).closest('.js-click-to-select').find('.js-click-to-select-checkbox input');
$input.prop('checked', !$input.prop('checked')).trigger('change');
});
- $(once('media-library-click-to-select', '.js-click-to-select-checkbox input', context)).on('change', function (_ref) {
- var currentTarget = _ref.currentTarget;
+ $(once('media-library-click-to-select', '.js-click-to-select-checkbox input', context)).on('change', ({
+ currentTarget
+ }) => {
$(currentTarget).closest('.js-click-to-select').toggleClass('checked', $(currentTarget).prop('checked'));
- }).on('focus blur', function (_ref2) {
- var currentTarget = _ref2.currentTarget,
- type = _ref2.type;
+ }).on('focus blur', ({
+ currentTarget,
+ type
+ }) => {
$(currentTarget).closest('.js-click-to-select').toggleClass('is-focus', type === 'focus');
});
- $(once('media-library-click-to-select-hover', '.js-click-to-select-trigger, .js-click-to-select-checkbox', context)).on('mouseover mouseout', function (_ref3) {
- var currentTarget = _ref3.currentTarget,
- type = _ref3.type;
+ $(once('media-library-click-to-select-hover', '.js-click-to-select-trigger, .js-click-to-select-checkbox', context)).on('mouseover mouseout', ({
+ currentTarget,
+ type
+ }) => {
$(currentTarget).closest('.js-click-to-select').toggleClass('is-hover', type === 'mouseover');
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/media_library/js/media_library.ui.js b/core/modules/media_library/js/media_library.ui.js
index 32050310012575707bf7b930cff0bdb8343ea88c..64a479edc7790fe5d542bf2c517f1c3b97dad0da 100644
--- a/core/modules/media_library/js/media_library.ui.js
+++ b/core/modules/media_library/js/media_library.ui.js
@@ -5,31 +5,32 @@
* @preserve
**/
-(function ($, Drupal, window, _ref) {
- var tabbable = _ref.tabbable;
+(($, Drupal, window, {
+ tabbable
+}) => {
Drupal.MediaLibrary = {
currentSelection: []
};
Drupal.AjaxCommands.prototype.updateMediaLibrarySelection = function (ajax, response, status) {
- Object.values(response.mediaIds).forEach(function (value) {
+ Object.values(response.mediaIds).forEach(value => {
Drupal.MediaLibrary.currentSelection.push(value);
});
};
Drupal.behaviors.MediaLibraryTabs = {
- attach: function attach(context) {
- var $menu = $('.js-media-library-menu');
- $(once('media-library-menu-item', $menu.find('a'))).on('keypress', function (e) {
+ attach(context) {
+ const $menu = $('.js-media-library-menu');
+ $(once('media-library-menu-item', $menu.find('a'))).on('keypress', e => {
if (e.which === 32) {
e.preventDefault();
e.stopPropagation();
$(e.currentTarget).trigger('click');
}
- }).on('click', function (e) {
+ }).on('click', e => {
e.preventDefault();
e.stopPropagation();
- var ajaxObject = Drupal.ajax({
+ const ajaxObject = Drupal.ajax({
wrapper: 'media-library-content',
url: e.currentTarget.href,
dialogType: 'ajax',
@@ -40,8 +41,6 @@
});
ajaxObject.success = function (response, status) {
- var _this = this;
-
if (this.progress.element) {
$(this.progress.element).remove();
}
@@ -51,15 +50,15 @@
}
$(this.element).prop('disabled', false);
- Object.keys(response || {}).forEach(function (i) {
- if (response[i].command && _this.commands[response[i].command]) {
- _this.commands[response[i].command](_this, response[i], status);
+ Object.keys(response || {}).forEach(i => {
+ if (response[i].command && this.commands[response[i].command]) {
+ this.commands[response[i].command](this, response[i], status);
}
});
- var mediaLibraryContent = document.getElementById('media-library-content');
+ const mediaLibraryContent = document.getElementById('media-library-content');
if (mediaLibraryContent) {
- var tabbableContent = tabbable(mediaLibraryContent);
+ const tabbableContent = tabbable(mediaLibraryContent);
if (tabbableContent.length) {
tabbableContent[0].focus();
@@ -80,18 +79,19 @@
}));
});
}
+
};
Drupal.behaviors.MediaLibraryViewsDisplay = {
- attach: function attach(context) {
- var $view = $(context).hasClass('.js-media-library-view') ? $(context) : $('.js-media-library-view', context);
+ attach(context) {
+ const $view = $(context).hasClass('.js-media-library-view') ? $(context) : $('.js-media-library-view', context);
$view.closest('.views-element-container').attr('id', 'media-library-view');
- $(once('media-library-views-display-link', '.views-display-link-widget, .views-display-link-widget_table', context)).on('click', function (e) {
+ $(once('media-library-views-display-link', '.views-display-link-widget, .views-display-link-widget_table', context)).on('click', e => {
e.preventDefault();
e.stopPropagation();
- var $link = $(e.currentTarget);
- var loadingAnnouncement = '';
- var displayAnnouncement = '';
- var focusSelector = '';
+ const $link = $(e.currentTarget);
+ let loadingAnnouncement = '';
+ let displayAnnouncement = '';
+ let focusSelector = '';
if ($link.hasClass('views-display-link-widget')) {
loadingAnnouncement = Drupal.t('Loading grid view.');
@@ -103,7 +103,7 @@
focusSelector = '.views-display-link-widget_table';
}
- var ajaxObject = Drupal.ajax({
+ const ajaxObject = Drupal.ajax({
wrapper: 'media-library-view',
url: e.currentTarget.href,
dialogType: 'ajax',
@@ -114,7 +114,7 @@
});
if (displayAnnouncement || focusSelector) {
- var success = ajaxObject.success;
+ const success = ajaxObject.success;
ajaxObject.success = function (response, status) {
success.bind(this)(response, status);
@@ -136,17 +136,18 @@
}
});
}
+
};
Drupal.behaviors.MediaLibraryItemSelection = {
- attach: function attach(context, settings) {
- var $form = $('.js-media-library-views-form, .js-media-library-add-form', context);
- var currentSelection = Drupal.MediaLibrary.currentSelection;
+ attach(context, settings) {
+ const $form = $('.js-media-library-views-form, .js-media-library-add-form', context);
+ const currentSelection = Drupal.MediaLibrary.currentSelection;
if (!$form.length) {
return;
}
- var $mediaItems = $('.js-media-library-item input[type="checkbox"]', $form);
+ const $mediaItems = $('.js-media-library-item input[type="checkbox"]', $form);
function disableItems($items) {
$items.prop('disabled', true).closest('.js-media-library-item').addClass('media-library-item--disabled');
@@ -157,15 +158,15 @@
}
function updateSelectionCount(remaining) {
- var selectItemsText = remaining < 0 ? Drupal.formatPlural(currentSelection.length, '1 item selected', '@count items selected') : Drupal.formatPlural(remaining, '@selected of @count item selected', '@selected of @count items selected', {
+ const selectItemsText = remaining < 0 ? Drupal.formatPlural(currentSelection.length, '1 item selected', '@count items selected') : Drupal.formatPlural(remaining, '@selected of @count item selected', '@selected of @count items selected', {
'@selected': currentSelection.length
});
$('.js-media-library-selected-count').html(selectItemsText);
}
- $(once('media-item-change', $mediaItems)).on('change', function (e) {
- var id = e.currentTarget.value;
- var position = currentSelection.indexOf(id);
+ $(once('media-item-change', $mediaItems)).on('change', e => {
+ const id = e.currentTarget.value;
+ const position = currentSelection.indexOf(id);
if (e.currentTarget.checked) {
if (position === -1) {
@@ -178,7 +179,7 @@
$form.find('#media-library-modal-selection').val(currentSelection.join()).trigger('change');
$('.js-media-library-add-form-current-selection').val(currentSelection.join());
});
- $(once('media-library-selection-change', $form.find('#media-library-modal-selection'))).on('change', function (e) {
+ $(once('media-library-selection-change', $form.find('#media-library-modal-selection'))).on('change', e => {
updateSelectionCount(settings.media_library.selection_remaining);
if (currentSelection.length === settings.media_library.selection_remaining) {
@@ -188,16 +189,16 @@
enableItems($mediaItems);
}
});
- currentSelection.forEach(function (value) {
- $form.find("input[type=\"checkbox\"][value=\"".concat(value, "\"]")).prop('checked', true).trigger('change');
+ currentSelection.forEach(value => {
+ $form.find(`input[type="checkbox"][value="${value}"]`).prop('checked', true).trigger('change');
});
if (!once('media-library-selection-info', 'html').length) {
return;
}
- $(window).on('dialog:aftercreate', function () {
- var $buttonPane = $('.media-library-widget-modal .ui-dialog-buttonpane');
+ $(window).on('dialog:aftercreate', () => {
+ const $buttonPane = $('.media-library-widget-modal .ui-dialog-buttonpane');
if (!$buttonPane.length) {
return;
@@ -207,20 +208,22 @@
updateSelectionCount(settings.media_library.selection_remaining);
});
}
+
};
Drupal.behaviors.MediaLibraryModalClearSelection = {
- attach: function attach() {
+ attach() {
if (!once('media-library-clear-selection', 'html').length) {
return;
}
- $(window).on('dialog:afterclose', function () {
+ $(window).on('dialog:afterclose', () => {
Drupal.MediaLibrary.currentSelection = [];
});
}
+
};
Drupal.theme.mediaLibrarySelectionCount = function () {
- return "<div class=\"media-library-selected-count js-media-library-selected-count\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"></div>";
+ return `<div class="media-library-selected-count js-media-library-selected-count" role="status" aria-live="polite" aria-atomic="true"></div>`;
};
})(jQuery, Drupal, window, window.tabbable);
\ No newline at end of file
diff --git a/core/modules/media_library/js/media_library.view.js b/core/modules/media_library/js/media_library.view.js
index 8c4ecf2fdb78937c0af5f16dabd85166116a4385..e3b7622c6b2dda03221793ae63776e6ef5360815 100644
--- a/core/modules/media_library/js/media_library.view.js
+++ b/core/modules/media_library/js/media_library.view.js
@@ -5,25 +5,27 @@
* @preserve
**/
-(function ($, Drupal) {
+(($, Drupal) => {
Drupal.behaviors.MediaLibrarySelectAll = {
- attach: function attach(context) {
- var $view = $(once('media-library-select-all', '.js-media-library-view[data-view-display-id="page"]', context));
+ attach(context) {
+ const $view = $(once('media-library-select-all', '.js-media-library-view[data-view-display-id="page"]', context));
if ($view.length && $view.find('.js-media-library-item').length) {
- var $checkbox = $(Drupal.theme('checkbox')).on('click', function (_ref) {
- var currentTarget = _ref.currentTarget;
- var $checkboxes = $(currentTarget).closest('.js-media-library-view').find('.js-media-library-item input[type="checkbox"]');
+ const $checkbox = $(Drupal.theme('checkbox')).on('click', ({
+ currentTarget
+ }) => {
+ const $checkboxes = $(currentTarget).closest('.js-media-library-view').find('.js-media-library-item input[type="checkbox"]');
$checkboxes.prop('checked', $(currentTarget).prop('checked')).trigger('change');
- var announcement = $(currentTarget).prop('checked') ? Drupal.t('All @count items selected', {
+ const announcement = $(currentTarget).prop('checked') ? Drupal.t('All @count items selected', {
'@count': $checkboxes.length
}) : Drupal.t('Zero items selected');
Drupal.announce(announcement);
});
- var $label = $('<label class="media-library-select-all"></label>').text(Drupal.t('Select all media'));
+ const $label = $('<label class="media-library-select-all"></label>').text(Drupal.t('Select all media'));
$label.prepend($checkbox);
$view.find('.js-media-library-item').first().before($label);
}
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/media_library/js/media_library.widget.js b/core/modules/media_library/js/media_library.widget.js
index d2e74bab3038305a8510e769d7651ed3327005d3..4b6df19ba4eb03e103e725633695be21e3eb85b6 100644
--- a/core/modules/media_library/js/media_library.widget.js
+++ b/core/modules/media_library/js/media_library.widget.js
@@ -5,44 +5,47 @@
* @preserve
**/
-(function ($, Drupal, Sortable) {
+(($, Drupal, Sortable) => {
Drupal.behaviors.MediaLibraryWidgetSortable = {
- attach: function attach(context) {
- var selection = context.querySelectorAll('.js-media-library-selection');
- selection.forEach(function (widget) {
+ attach(context) {
+ const selection = context.querySelectorAll('.js-media-library-selection');
+ selection.forEach(widget => {
Sortable.create(widget, {
draggable: '.js-media-library-item',
handle: '.js-media-library-item-preview',
- onEnd: function onEnd() {
- $(widget).children().each(function (index, child) {
+ onEnd: () => {
+ $(widget).children().each((index, child) => {
$(child).find('.js-media-library-item-weight').val(index);
});
}
});
});
}
+
};
Drupal.behaviors.MediaLibraryWidgetToggleWeight = {
- attach: function attach(context) {
- var strings = {
+ attach(context) {
+ const strings = {
show: Drupal.t('Show media item weights'),
hide: Drupal.t('Hide media item weights')
};
- $(once('media-library-toggle', '.js-media-library-widget-toggle-weight', context)).on('click', function (e) {
+ $(once('media-library-toggle', '.js-media-library-widget-toggle-weight', context)).on('click', e => {
e.preventDefault();
$(e.currentTarget).toggleClass('active').text($(e.currentTarget).hasClass('active') ? strings.hide : strings.show).closest('.js-media-library-widget').find('.js-media-library-item-weight').parent().toggle();
}).text(strings.show);
$(once('media-library-toggle', '.js-media-library-item-weight', context)).parent().hide();
}
+
};
Drupal.behaviors.MediaLibraryWidgetDisableButton = {
- attach: function attach(context) {
- once('media-library-disable', '.js-media-library-open-button[data-disabled-focus="true"]', context).forEach(function (button) {
+ attach(context) {
+ once('media-library-disable', '.js-media-library-open-button[data-disabled-focus="true"]', context).forEach(button => {
$(button).focus();
- setTimeout(function () {
+ setTimeout(() => {
$(button).attr('disabled', 'disabled');
}, 50);
});
}
+
};
})(jQuery, Drupal, Sortable);
\ No newline at end of file
diff --git a/core/modules/media_library/js/plugins/drupalmedialibrary/plugin.js b/core/modules/media_library/js/plugins/drupalmedialibrary/plugin.js
index bfb1e19529a27b8fb78893d5e2037ba566b8c2c1..84cf9e7cca0f4334c1cc4419ac2d7f1710917e19 100644
--- a/core/modules/media_library/js/plugins/drupalmedialibrary/plugin.js
+++ b/core/modules/media_library/js/plugins/drupalmedialibrary/plugin.js
@@ -10,7 +10,8 @@
requires: 'drupalmedia',
icons: 'drupalmedialibrary',
hidpi: true,
- beforeInit: function beforeInit(editor) {
+
+ beforeInit(editor) {
editor.addCommand('drupalmedialibrary', {
allowedContent: {
'drupal-media': {
@@ -37,12 +38,13 @@
wysiwyg: 1
},
canUndo: true,
- exec: function exec(editor) {
- var saveCallback = function saveCallback(values) {
+
+ exec(editor) {
+ const saveCallback = function (values) {
editor.fire('saveSnapshot');
- var mediaElement = editor.document.createElement('drupal-media');
- var attributes = values.attributes;
- Object.keys(attributes).forEach(function (key) {
+ const mediaElement = editor.document.createElement('drupal-media');
+ const attributes = values.attributes;
+ Object.keys(attributes).forEach(key => {
mediaElement.setAttribute(key, attributes[key]);
});
editor.insertHtml(mediaElement.getOuterHtml());
@@ -51,6 +53,7 @@
Drupal.ckeditor.openDialog(editor, editor.config.DrupalMediaLibrary_url, {}, saveCallback, editor.config.DrupalMediaLibrary_dialogOptions);
}
+
});
if (editor.ui.addButton) {
@@ -60,5 +63,6 @@
});
}
}
+
});
})(Drupal, CKEDITOR);
\ No newline at end of file
diff --git a/core/modules/menu_ui/menu_ui.admin.js b/core/modules/menu_ui/menu_ui.admin.js
index 62442f0b2e43c7870f4f7bec4d230e5a921d28c7..728ca26fdcd86a408080212c37052c06cd0c1af0 100644
--- a/core/modules/menu_ui/menu_ui.admin.js
+++ b/core/modules/menu_ui/menu_ui.admin.js
@@ -7,41 +7,44 @@
(function ($, Drupal) {
Drupal.behaviors.menuUiChangeParentItems = {
- attach: function attach(context, settings) {
- var menu = once('menu-parent', '#edit-menu');
+ attach(context, settings) {
+ const menu = once('menu-parent', '#edit-menu');
if (menu.length) {
- var $menu = $(menu);
+ const $menu = $(menu);
Drupal.menuUiUpdateParentList();
$menu.on('change', 'input', Drupal.menuUiUpdateParentList);
}
}
+
};
Drupal.menuUiUpdateParentList = function () {
- var $menu = $('#edit-menu');
- var values = [];
+ const $menu = $('#edit-menu');
+ const values = [];
$menu.find('input:checked').each(function () {
values.push(Drupal.checkPlain($(this).val()));
});
$.ajax({
- url: "".concat(window.location.protocol, "//").concat(window.location.host).concat(Drupal.url('admin/structure/menu/parents')),
+ url: `${window.location.protocol}//${window.location.host}${Drupal.url('admin/structure/menu/parents')}`,
type: 'POST',
data: {
'menus[]': values
},
dataType: 'json',
- success: function success(options) {
- var $select = $('#edit-menu-parent');
- var selected = $select.val();
+
+ success(options) {
+ const $select = $('#edit-menu-parent');
+ const selected = $select.val();
$select.children().remove();
- var totalOptions = 0;
- Object.keys(options || {}).forEach(function (machineName) {
- $select.append($("<option ".concat(machineName === selected ? ' selected="selected"' : '', "></option>")).val(machineName).text(options[machineName]));
+ let totalOptions = 0;
+ Object.keys(options || {}).forEach(machineName => {
+ $select.append($(`<option ${machineName === selected ? ' selected="selected"' : ''}></option>`).val(machineName).text(options[machineName]));
totalOptions++;
});
$select.closest('div').toggle(totalOptions > 0).attr('hidden', totalOptions === 0);
}
+
});
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/menu_ui/menu_ui.js b/core/modules/menu_ui/menu_ui.js
index f5a7fc0c459d4d4b45a3abf7ca2516ba11a8a9dd..c4bb7d7e885836c16d15796b232b4d1ec3949326 100644
--- a/core/modules/menu_ui/menu_ui.js
+++ b/core/modules/menu_ui/menu_ui.js
@@ -7,9 +7,9 @@
(function ($, Drupal) {
Drupal.behaviors.menuUiDetailsSummaries = {
- attach: function attach(context) {
- $(context).find('.menu-link-form').drupalSetSummary(function (context) {
- var $context = $(context);
+ attach(context) {
+ $(context).find('.menu-link-form').drupalSetSummary(context => {
+ const $context = $(context);
if ($context.find('.js-form-item-menu-enabled input').is(':checked')) {
return Drupal.checkPlain($context.find('.js-form-item-menu-title input').val());
@@ -18,15 +18,16 @@
return Drupal.t('Not in menu');
});
}
+
};
Drupal.behaviors.menuUiLinkAutomaticTitle = {
- attach: function attach(context) {
- var $context = $(context);
+ attach(context) {
+ const $context = $(context);
$context.find('.menu-link-form').each(function () {
- var $this = $(this);
- var $checkbox = $this.find('.js-form-item-menu-enabled input');
- var $linkTitle = $context.find('.js-form-item-menu-title input');
- var $title = $this.closest('form').find('.js-form-item-title-0-value input');
+ const $this = $(this);
+ const $checkbox = $this.find('.js-form-item-menu-enabled input');
+ const $linkTitle = $context.find('.js-form-item-menu-title input');
+ const $title = $this.closest('form').find('.js-form-item-title-0-value input');
if (!($checkbox.length && $linkTitle.length && $title.length)) {
return;
@@ -36,10 +37,10 @@
$linkTitle.data('menuLinkAutomaticTitleOverridden', true);
}
- $linkTitle.on('keyup', function () {
+ $linkTitle.on('keyup', () => {
$linkTitle.data('menuLinkAutomaticTitleOverridden', true);
});
- $checkbox.on('change', function () {
+ $checkbox.on('change', () => {
if ($checkbox.is(':checked')) {
if (!$linkTitle.data('menuLinkAutomaticTitleOverridden')) {
$linkTitle.val($title.val());
@@ -52,7 +53,7 @@
$checkbox.closest('.vertical-tabs-pane').trigger('summaryUpdated');
$checkbox.trigger('formUpdated');
});
- $title.on('keyup', function () {
+ $title.on('keyup', () => {
if (!$linkTitle.data('menuLinkAutomaticTitleOverridden') && $checkbox.is(':checked')) {
$linkTitle.val($title.val());
$linkTitle.val($title.val()).trigger('formUpdated');
@@ -60,5 +61,6 @@
});
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/node/content_types.js b/core/modules/node/content_types.js
index 97258743854e90d55503f3f08a3018675dc68bd1..fa3b16ffac21a16daab31244ad70c5a9dcf1c7cf 100644
--- a/core/modules/node/content_types.js
+++ b/core/modules/node/content_types.js
@@ -7,15 +7,15 @@
(function ($, Drupal) {
Drupal.behaviors.contentTypes = {
- attach: function attach(context) {
- var $context = $(context);
- $context.find('#edit-submission').drupalSetSummary(function (context) {
- var vals = [];
+ attach(context) {
+ const $context = $(context);
+ $context.find('#edit-submission').drupalSetSummary(context => {
+ const vals = [];
vals.push(Drupal.checkPlain($(context).find('#edit-title-label').val()) || Drupal.t('Requires a title'));
return vals.join(', ');
});
- $context.find('#edit-workflow').drupalSetSummary(function (context) {
- var vals = [];
+ $context.find('#edit-workflow').drupalSetSummary(context => {
+ const vals = [];
$(context).find('input[name^="options"]:checked').next('label').each(function () {
vals.push(Drupal.checkPlain($(this).text()));
});
@@ -26,17 +26,17 @@
return vals.join(', ');
});
- $('#edit-language', context).drupalSetSummary(function (context) {
- var vals = [];
+ $('#edit-language', context).drupalSetSummary(context => {
+ const vals = [];
vals.push($('.js-form-item-language-configuration-langcode select option:selected', context).text());
$('input:checked', context).next('label').each(function () {
vals.push(Drupal.checkPlain($(this).text()));
});
return vals.join(', ');
});
- $context.find('#edit-display').drupalSetSummary(function (context) {
- var vals = [];
- var $editContext = $(context);
+ $context.find('#edit-display').drupalSetSummary(context => {
+ const vals = [];
+ const $editContext = $(context);
$editContext.find('input:checked').next('label').each(function () {
vals.push(Drupal.checkPlain($(this).text()));
});
@@ -48,5 +48,6 @@
return vals.join(', ');
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/node/node.js b/core/modules/node/node.js
index 52e221e9acdef72f901b653970db987b56944058..d50a617f87165eb5aabd34c560518f8264a9cf47 100644
--- a/core/modules/node/node.js
+++ b/core/modules/node/node.js
@@ -7,12 +7,12 @@
(function ($, Drupal, drupalSettings) {
Drupal.behaviors.nodeDetailsSummaries = {
- attach: function attach(context) {
- var $context = $(context);
- $context.find('.node-form-author').drupalSetSummary(function (context) {
- var $authorContext = $(context);
- var name = $authorContext.find('.field--name-uid input').val();
- var date = $authorContext.find('.field--name-created input').val();
+ attach(context) {
+ const $context = $(context);
+ $context.find('.node-form-author').drupalSetSummary(context => {
+ const $authorContext = $(context);
+ const name = $authorContext.find('.field--name-uid input').val();
+ const date = $authorContext.find('.field--name-created input').val();
if (name && date) {
return Drupal.t('By @name on @date', {
@@ -33,9 +33,9 @@
});
}
});
- $context.find('.node-form-options').drupalSetSummary(function (context) {
- var $optionsContext = $(context);
- var vals = [];
+ $context.find('.node-form-options').drupalSetSummary(context => {
+ const $optionsContext = $(context);
+ const vals = [];
if ($optionsContext.find('input').is(':checked')) {
$optionsContext.find('input:checked').next('label').each(function () {
@@ -47,5 +47,6 @@
return Drupal.t('Not promoted');
});
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/node/node.preview.js b/core/modules/node/node.preview.js
index 669dada2ec2d93646d2ca2a374f6a69c33330265..dff9d0984629c8bbfbe642670900615c65724010 100644
--- a/core/modules/node/node.preview.js
+++ b/core/modules/node/node.preview.js
@@ -7,23 +7,27 @@
(function ($, Drupal) {
Drupal.behaviors.nodePreviewDestroyLinks = {
- attach: function attach(context) {
+ attach(context) {
function clickPreviewModal(event) {
if (event.button === 0 && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
event.preventDefault();
- var $previewDialog = $("<div>".concat(Drupal.theme('nodePreviewModal'), "</div>")).appendTo('body');
+ const $previewDialog = $(`<div>${Drupal.theme('nodePreviewModal')}</div>`).appendTo('body');
Drupal.dialog($previewDialog, {
title: Drupal.t('Leave preview?'),
buttons: [{
text: Drupal.t('Cancel'),
- click: function click() {
+
+ click() {
$(this).dialog('close');
}
+
}, {
text: Drupal.t('Leave preview'),
- click: function click() {
+
+ click() {
window.top.location.href = event.target.href;
}
+
}]
}).showModal();
}
@@ -37,17 +41,19 @@
$(document).on('click.preview', 'a:not([href^="#"], .node-preview-container a)', clickPreviewModal);
}
},
- detach: function detach(context, settings, trigger) {
+
+ detach(context, settings, trigger) {
if (trigger === 'unload') {
if (context.querySelector('.node-preview-container') && once.remove('node-preview', 'html').length) {
$(document).off('click.preview');
}
}
}
+
};
Drupal.behaviors.nodePreviewSwitchViewMode = {
- attach: function attach(context) {
- var autosubmit = once('autosubmit', '[data-drupal-autosubmit]', context);
+ attach(context) {
+ const autosubmit = once('autosubmit', '[data-drupal-autosubmit]', context);
if (autosubmit.length) {
$(autosubmit).on('formUpdated.preview', function () {
@@ -55,9 +61,10 @@
});
}
}
+
};
Drupal.theme.nodePreviewModal = function () {
- return "<p>".concat(Drupal.t('Leaving the preview will cause unsaved changes to be lost. Are you sure you want to leave the preview?'), "</p><small class=\"description\">").concat(Drupal.t('CTRL+Left click will prevent this dialog from showing and proceed to the clicked link.'), "</small>");
+ return `<p>${Drupal.t('Leaving the preview will cause unsaved changes to be lost. Are you sure you want to leave the preview?')}</p><small class="description">${Drupal.t('CTRL+Left click will prevent this dialog from showing and proceed to the clicked link.')}</small>`;
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/path/path.js b/core/modules/path/path.js
index d7a3ecfdd22e24b66e1bdd1ed30ddb96bca40f2c..ac60045f8003c2428961b6042784f6c9635cea8d 100644
--- a/core/modules/path/path.js
+++ b/core/modules/path/path.js
@@ -7,13 +7,14 @@
(function ($, Drupal) {
Drupal.behaviors.pathDetailsSummaries = {
- attach: function attach(context) {
- $(context).find('.path-form').drupalSetSummary(function (context) {
- var path = $('.js-form-item-path-0-alias input').val();
+ attach(context) {
+ $(context).find('.path-form').drupalSetSummary(context => {
+ const path = $('.js-form-item-path-0-alias input').val();
return path ? Drupal.t('Alias: @alias', {
'@alias': path
}) : Drupal.t('No alias');
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/editors/formEditor.js b/core/modules/quickedit/js/editors/formEditor.js
index 9eec923948f1d725cf423c15accbca34d552a0ee..7d49b686bf21c84821ce91d7117ee928313a6997 100644
--- a/core/modules/quickedit/js/editors/formEditor.js
+++ b/core/modules/quickedit/js/editors/formEditor.js
@@ -9,9 +9,10 @@
Drupal.quickedit.editors.form = Drupal.quickedit.EditorView.extend({
$formContainer: null,
formSaveAjax: null,
- stateChange: function stateChange(fieldModel, state) {
- var from = fieldModel.previous('state');
- var to = state;
+
+ stateChange(fieldModel, state) {
+ const from = fieldModel.previous('state');
+ const to = state;
switch (to) {
case 'inactive':
@@ -52,7 +53,8 @@
break;
}
},
- getQuickEditUISettings: function getQuickEditUISettings() {
+
+ getQuickEditUISettings() {
return {
padding: true,
unifiedToolbar: true,
@@ -60,11 +62,12 @@
popup: true
};
},
- loadForm: function loadForm() {
- var fieldModel = this.fieldModel;
- var id = "quickedit-form-for-".concat(fieldModel.id.replace(/[/[\]]/g, '_'));
- var $formContainer = $(Drupal.theme('quickeditFormContainer', {
- id: id,
+
+ loadForm() {
+ const fieldModel = this.fieldModel;
+ const id = `quickedit-form-for-${fieldModel.id.replace(/[/[\]]/g, '_')}`;
+ const $formContainer = $(Drupal.theme('quickeditFormContainer', {
+ id,
loadingMsg: Drupal.t('Loading…')
}));
this.$formContainer = $formContainer;
@@ -72,32 +75,32 @@
if (this.$el.css('display') === 'inline') {
$formContainer.prependTo(this.$el.offsetParent());
- var pos = this.$el.position();
+ const pos = this.$el.position();
$formContainer.css('left', pos.left).css('top', pos.top);
} else {
$formContainer.insertBefore(this.$el);
}
- var formOptions = {
+ const formOptions = {
fieldID: fieldModel.get('fieldID'),
$el: this.$el,
nocssjs: false,
reset: !fieldModel.get('entity').get('inTempStore')
};
- Drupal.quickedit.util.form.load(formOptions, function (form, ajax) {
+ Drupal.quickedit.util.form.load(formOptions, (form, ajax) => {
Drupal.AjaxCommands.prototype.insert(ajax, {
data: form,
- selector: "#".concat(id, " .placeholder")
+ selector: `#${id} .placeholder`
});
- $formContainer.on('formUpdated.quickedit', ':input', function (event) {
- var state = fieldModel.get('state');
+ $formContainer.on('formUpdated.quickedit', ':input', event => {
+ const state = fieldModel.get('state');
if (state === 'invalid') {
fieldModel.set('state', 'activating');
} else {
fieldModel.set('state', 'changed');
}
- }).on('keypress.quickedit', 'input', function (event) {
+ }).on('keypress.quickedit', 'input', event => {
if (event.keyCode === 13) {
return false;
}
@@ -105,7 +108,8 @@
fieldModel.set('state', 'active');
});
},
- removeForm: function removeForm() {
+
+ removeForm() {
if (this.$formContainer === null) {
return;
}
@@ -115,12 +119,13 @@
this.$formContainer.off('change.quickedit', ':input').off('keypress.quickedit', 'input').remove();
this.$formContainer = null;
},
- save: function save() {
- var $formContainer = this.$formContainer;
- var $submit = $formContainer.find('.quickedit-form-submit');
- var editorModel = this.model;
- var fieldModel = this.fieldModel;
- var formSaveAjax = Drupal.quickedit.util.form.ajaxifySaving({
+
+ save() {
+ const $formContainer = this.$formContainer;
+ const $submit = $formContainer.find('.quickedit-form-submit');
+ const editorModel = this.model;
+ const fieldModel = this.fieldModel;
+ let formSaveAjax = Drupal.quickedit.util.form.ajaxifySaving({
nocssjs: false,
other_view_modes: fieldModel.findOtherViewModes()
}, $submit);
@@ -135,7 +140,7 @@
fieldModel.set('state', 'saved');
fieldModel.set('htmlForOtherViewModes', response.other_view_modes);
- _.defer(function () {
+ _.defer(() => {
fieldModel.set('html', response.data);
});
};
@@ -148,14 +153,16 @@
formSaveAjax.commands.quickeditFieldForm = function (ajax, response, status) {
Drupal.AjaxCommands.prototype.insert(ajax, {
data: response.data,
- selector: "#".concat($formContainer.attr('id'), " form")
+ selector: `#${$formContainer.attr('id')} form`
});
};
$submit.trigger('click.quickedit');
},
- showValidationErrors: function showValidationErrors() {
+
+ showValidationErrors() {
this.$formContainer.find('.quickedit-form').addClass('quickedit-validation-error').find('form').prepend(this.model.get('validationErrors'));
}
+
});
})(jQuery, Drupal, _);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/editors/plainTextEditor.js b/core/modules/quickedit/js/editors/plainTextEditor.js
index 6021bd6ab1520979f566229a8a1b005c35eb5a3b..90bc75f44a5a2b76eaf7fef8013a4e231f6a6cbe 100644
--- a/core/modules/quickedit/js/editors/plainTextEditor.js
+++ b/core/modules/quickedit/js/editors/plainTextEditor.js
@@ -8,17 +8,18 @@
(function ($, _, Drupal) {
Drupal.quickedit.editors.plain_text = Drupal.quickedit.EditorView.extend({
$textElement: null,
- initialize: function initialize(options) {
+
+ initialize(options) {
Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
- var editorModel = this.model;
- var fieldModel = this.fieldModel;
- var $fieldItems = this.$el.find('.quickedit-field');
- var $textElement = $fieldItems.length ? $fieldItems.eq(0) : this.$el;
+ const editorModel = this.model;
+ const fieldModel = this.fieldModel;
+ const $fieldItems = this.$el.find('.quickedit-field');
+ const $textElement = $fieldItems.length ? $fieldItems.eq(0) : this.$el;
this.$textElement = $textElement;
editorModel.set('originalValue', this.$textElement.text().trim());
- var previousText = editorModel.get('originalValue');
- $textElement.on('keyup paste', function (event) {
- var currentText = $textElement.text().trim();
+ let previousText = editorModel.get('originalValue');
+ $textElement.on('keyup paste', event => {
+ const currentText = $textElement.text().trim();
if (previousText !== currentText) {
previousText = currentText;
@@ -27,12 +28,14 @@
}
});
},
- getEditedElement: function getEditedElement() {
+
+ getEditedElement() {
return this.$textElement;
},
- stateChange: function stateChange(fieldModel, state, options) {
- var from = fieldModel.previous('state');
- var to = state;
+
+ stateChange(fieldModel, state, options) {
+ const from = fieldModel.previous('state');
+ const to = state;
switch (to) {
case 'inactive':
@@ -53,7 +56,7 @@
break;
case 'activating':
- _.defer(function () {
+ _.defer(() => {
fieldModel.set('state', 'active');
});
@@ -82,7 +85,8 @@
break;
}
},
- getQuickEditUISettings: function getQuickEditUISettings() {
+
+ getQuickEditUISettings() {
return {
padding: true,
unifiedToolbar: false,
@@ -90,8 +94,10 @@
popup: false
};
},
- revert: function revert() {
+
+ revert() {
this.$textElement.html(this.model.get('originalValue'));
}
+
});
})(jQuery, _, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/models/BaseModel.js b/core/modules/quickedit/js/models/BaseModel.js
index f700522f4058cb563f80ec47425a0289b17accc4..d03b920ea5fcf8a12bbf567d8426edfb5e98ff6d 100644
--- a/core/modules/quickedit/js/models/BaseModel.js
+++ b/core/modules/quickedit/js/models/BaseModel.js
@@ -5,17 +5,16 @@
* @preserve
**/
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
(function (Drupal, Backbone) {
Drupal.quickedit.BaseModel = Backbone.Model.extend({
- initialize: function initialize(options) {
+ initialize(options) {
this.__initialized = true;
return Backbone.Model.prototype.initialize.call(this, options);
},
- set: function set(key, val, options) {
+
+ set(key, val, options) {
if (this.__initialized) {
- if (_typeof(key) === 'object') {
+ if (typeof key === 'object') {
key.validate = true;
} else {
if (!options) {
@@ -28,5 +27,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
return Backbone.Model.prototype.set.call(this, key, val, options);
}
+
});
})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/models/EntityModel.js b/core/modules/quickedit/js/models/EntityModel.js
index 9776a9c61d8937332bf3f6ad3364145169b9e045..18c37c3c2283c3b1fcb69bbf8c4a4d22891144e5 100644
--- a/core/modules/quickedit/js/models/EntityModel.js
+++ b/core/modules/quickedit/js/models/EntityModel.js
@@ -22,14 +22,16 @@
fieldsInTempStore: [],
reload: false
},
- initialize: function initialize() {
+
+ initialize() {
this.set('fields', new Drupal.quickedit.FieldCollection());
this.listenTo(this, 'change:state', this.stateChange);
this.listenTo(this.get('fields'), 'change:state', this.fieldStateChange);
Drupal.quickedit.BaseModel.prototype.initialize.call(this);
},
- stateChange: function stateChange(entityModel, state, options) {
- var to = state;
+
+ stateChange(entityModel, state, options) {
+ const to = state;
switch (to) {
case 'closed':
@@ -44,7 +46,7 @@
break;
case 'opening':
- entityModel.get('fields').each(function (fieldModel) {
+ entityModel.get('fields').each(fieldModel => {
fieldModel.set('state', 'candidate', options);
});
break;
@@ -55,15 +57,11 @@
case 'committing':
{
- var fields = this.get('fields');
- fields.chain().filter(function (fieldModel) {
- return _.intersection([fieldModel.get('state')], ['active']).length;
- }).each(function (fieldModel) {
+ const fields = this.get('fields');
+ fields.chain().filter(fieldModel => _.intersection([fieldModel.get('state')], ['active']).length).each(fieldModel => {
fieldModel.set('state', 'candidate');
});
- fields.chain().filter(function (fieldModel) {
- return _.intersection([fieldModel.get('state')], Drupal.quickedit.app.changedFieldStates).length;
- }).each(function (fieldModel) {
+ fields.chain().filter(fieldModel => _.intersection([fieldModel.get('state')], Drupal.quickedit.app.changedFieldStates).length).each(fieldModel => {
fieldModel.set('state', 'saving');
});
break;
@@ -71,24 +69,20 @@
case 'deactivating':
{
- var changedFields = this.get('fields').filter(function (fieldModel) {
- return _.intersection([fieldModel.get('state')], ['changed', 'invalid']).length;
- });
+ const changedFields = this.get('fields').filter(fieldModel => _.intersection([fieldModel.get('state')], ['changed', 'invalid']).length);
if ((changedFields.length || this.get('fieldsInTempStore').length) && !options.saved && !options.confirmed) {
this.set('state', 'opened', {
confirming: true
});
- _.defer(function () {
+ _.defer(() => {
Drupal.quickedit.app.confirmEntityDeactivation(entityModel);
});
} else {
- var invalidFields = this.get('fields').filter(function (fieldModel) {
- return _.intersection([fieldModel.get('state')], ['invalid']).length;
- });
+ const invalidFields = this.get('fields').filter(fieldModel => _.intersection([fieldModel.get('state')], ['invalid']).length);
entityModel.set('reload', this.get('fieldsInTempStore').length || invalidFields.length);
- entityModel.get('fields').each(function (fieldModel) {
+ entityModel.get('fields').each(fieldModel => {
if (_.intersection([fieldModel.get('state')], ['candidate', 'highlighted']).length) {
fieldModel.trigger('change:state', fieldModel, fieldModel.get('state'), options);
} else {
@@ -102,7 +96,7 @@
case 'closing':
options.reason = 'stop';
- this.get('fields').each(function (fieldModel) {
+ this.get('fields').each(fieldModel => {
fieldModel.set({
inTempStore: false,
state: 'inactive'
@@ -111,10 +105,11 @@
break;
}
},
- _updateInTempStoreAttributes: function _updateInTempStoreAttributes(entityModel, fieldModel) {
- var current = fieldModel.get('state');
- var previous = fieldModel.previous('state');
- var fieldsInTempStore = entityModel.get('fieldsInTempStore');
+
+ _updateInTempStoreAttributes(entityModel, fieldModel) {
+ const current = fieldModel.get('state');
+ const previous = fieldModel.previous('state');
+ let fieldsInTempStore = entityModel.get('fieldsInTempStore');
if (current === 'saved') {
entityModel.set('inTempStore', true);
@@ -126,9 +121,10 @@
fieldModel.set('inTempStore', _.intersection([fieldModel.get('fieldID')], fieldsInTempStore).length > 0);
}
},
- fieldStateChange: function fieldStateChange(fieldModel, state) {
- var entityModel = this;
- var fieldState = state;
+
+ fieldStateChange(fieldModel, state) {
+ const entityModel = this;
+ const fieldState = state;
switch (this.get('state')) {
case 'closed':
@@ -136,7 +132,7 @@
break;
case 'opening':
- _.defer(function () {
+ _.defer(() => {
entityModel.set('state', 'opened', {
'accept-field-states': Drupal.quickedit.app.readyFieldStates
});
@@ -156,7 +152,7 @@
case 'committing':
{
if (fieldState === 'invalid') {
- _.defer(function () {
+ _.defer(() => {
entityModel.set('state', 'opened', {
reason: 'invalid'
});
@@ -165,13 +161,13 @@
this._updateInTempStoreAttributes(entityModel, fieldModel);
}
- var options = {
+ const options = {
'accept-field-states': Drupal.quickedit.app.readyFieldStates
};
if (entityModel.set('isCommitting', true, options)) {
entityModel.save({
- success: function success() {
+ success() {
entityModel.set({
state: 'deactivating',
isCommitting: false
@@ -179,16 +175,18 @@
saved: true
});
},
- error: function error() {
+
+ error() {
entityModel.set('isCommitting', false);
entityModel.set('state', 'opened', {
reason: 'networkerror'
});
- var message = Drupal.t('Your changes to <q>@entity-title</q> could not be saved, either due to a website problem or a network connection problem.<br>Please try again.', {
+ const message = Drupal.t('Your changes to <q>@entity-title</q> could not be saved, either due to a website problem or a network connection problem.<br>Please try again.', {
'@entity-title': entityModel.get('label')
});
Drupal.quickedit.util.networkErrorModal(Drupal.t('Network problem!'), message);
}
+
});
}
@@ -196,7 +194,7 @@
}
case 'deactivating':
- _.defer(function () {
+ _.defer(() => {
entityModel.set('state', 'closing', {
'accept-field-states': Drupal.quickedit.app.readyFieldStates
});
@@ -205,7 +203,7 @@
break;
case 'closing':
- _.defer(function () {
+ _.defer(() => {
entityModel.set('state', 'closed', {
'accept-field-states': ['inactive']
});
@@ -214,17 +212,20 @@
break;
}
},
- save: function save(options) {
- var entityModel = this;
- var entitySaverAjax = Drupal.ajax({
- url: Drupal.url("quickedit/entity/".concat(entityModel.get('entityID'))),
- error: function error() {
+
+ save(options) {
+ const entityModel = this;
+ const entitySaverAjax = Drupal.ajax({
+ url: Drupal.url(`quickedit/entity/${entityModel.get('entityID')}`),
+
+ error() {
options.error.call(entityModel);
}
+
});
entitySaverAjax.commands.quickeditEntitySaved = function (ajax, response, status) {
- entityModel.get('fields').each(function (fieldModel) {
+ entityModel.get('fields').each(fieldModel => {
fieldModel.set('inTempStore', false);
});
entityModel.set('inTempStore', false);
@@ -239,14 +240,15 @@
entitySaverAjax.options.headers['X-Drupal-Quickedit-CSRF-Token'] = drupalSettings.quickedit.csrf_token;
entitySaverAjax.execute();
},
- validate: function validate(attrs, options) {
- var acceptedFieldStates = options['accept-field-states'] || [];
- var currentState = this.get('state');
- var nextState = attrs.state;
+
+ validate(attrs, options) {
+ const acceptedFieldStates = options['accept-field-states'] || [];
+ const currentState = this.get('state');
+ const nextState = attrs.state;
if (currentState !== nextState) {
if (_.indexOf(this.constructor.states, nextState) === -1) {
- return "\"".concat(nextState, "\" is an invalid state");
+ return `"${nextState}" is an invalid state`;
}
if (!this._acceptStateChange(currentState, nextState, options)) {
@@ -258,8 +260,8 @@
}
}
- var currentIsCommitting = this.get('isCommitting');
- var nextIsCommitting = attrs.isCommitting;
+ const currentIsCommitting = this.get('isCommitting');
+ const nextIsCommitting = attrs.isCommitting;
if (currentIsCommitting === false && nextIsCommitting === true) {
if (!this._fieldsHaveAcceptableStates(acceptedFieldStates)) {
@@ -269,8 +271,9 @@
return 'isCommitting is a mutex, hence only changes are allowed';
}
},
- _acceptStateChange: function _acceptStateChange(from, to, context) {
- var accept = true;
+
+ _acceptStateChange(from, to, context) {
+ let accept = true;
if (!this.constructor.followsStateSequence(from, to)) {
accept = false;
@@ -288,11 +291,12 @@
return accept;
},
- _fieldsHaveAcceptableStates: function _fieldsHaveAcceptableStates(acceptedFieldStates) {
- var accept = true;
+
+ _fieldsHaveAcceptableStates(acceptedFieldStates) {
+ let accept = true;
if (acceptedFieldStates.length > 0) {
- var fieldStates = this.get('fields').pluck('state') || [];
+ const fieldStates = this.get('fields').pluck('state') || [];
if (_.difference(fieldStates, acceptedFieldStates).length) {
accept = false;
@@ -301,17 +305,22 @@
return accept;
},
- destroy: function destroy(options) {
+
+ destroy(options) {
Drupal.quickedit.BaseModel.prototype.destroy.call(this, options);
this.stopListening();
this.get('fields').reset();
},
- sync: function sync() {}
+
+ sync() {}
+
}, {
states: ['closed', 'launching', 'opening', 'opened', 'committing', 'deactivating', 'closing'],
- followsStateSequence: function followsStateSequence(from, to) {
+
+ followsStateSequence(from, to) {
return _.indexOf(this.states, from) < _.indexOf(this.states, to);
}
+
});
Drupal.quickedit.EntityCollection = Backbone.Collection.extend({
model: Drupal.quickedit.EntityModel
diff --git a/core/modules/quickedit/js/models/FieldModel.js b/core/modules/quickedit/js/models/FieldModel.js
index 76037ede04b854f49b013652050858feecce3604..514531df2c8398aad79e29d90cc1338caa337874 100644
--- a/core/modules/quickedit/js/models/FieldModel.js
+++ b/core/modules/quickedit/js/models/FieldModel.js
@@ -21,27 +21,31 @@
html: null,
htmlForOtherViewModes: null
},
- initialize: function initialize(options) {
+
+ initialize(options) {
this.set('html', options.el.outerHTML);
this.get('entity').get('fields').add(this);
this.set('logicalFieldID', this.get('fieldID').split('/').slice(0, 4).join('/'));
Drupal.quickedit.BaseModel.prototype.initialize.call(this, options);
},
- destroy: function destroy(options) {
+
+ destroy(options) {
if (this.get('state') !== 'inactive') {
throw new Error('FieldModel cannot be destroyed if it is not inactive state.');
}
Drupal.quickedit.BaseModel.prototype.destroy.call(this, options);
},
- sync: function sync() {},
- validate: function validate(attrs, options) {
- var current = this.get('state');
- var next = attrs.state;
+
+ sync() {},
+
+ validate(attrs, options) {
+ const current = this.get('state');
+ const next = attrs.state;
if (current !== next) {
if (_.indexOf(this.constructor.states, next) === -1) {
- return "\"".concat(next, "\" is an invalid state");
+ return `"${next}" is an invalid state`;
}
if (!this.get('acceptStateChange')(current, next, options, this)) {
@@ -49,29 +53,35 @@
}
}
},
- getEntityID: function getEntityID() {
+
+ getEntityID() {
return this.get('fieldID').split('/').slice(0, 2).join('/');
},
- getViewMode: function getViewMode() {
+
+ getViewMode() {
return this.get('fieldID').split('/').pop();
},
- findOtherViewModes: function findOtherViewModes() {
- var currentField = this;
- var otherViewModes = [];
+
+ findOtherViewModes() {
+ const currentField = this;
+ const otherViewModes = [];
Drupal.quickedit.collections.fields.where({
logicalFieldID: currentField.get('logicalFieldID')
- }).forEach(function (field) {
+ }).forEach(field => {
if (field !== currentField && field.get('fieldID') !== currentField.get('fieldID')) {
otherViewModes.push(field.getViewMode());
}
});
return otherViewModes;
}
+
}, {
states: ['inactive', 'candidate', 'highlighted', 'activating', 'active', 'changed', 'saving', 'saved', 'invalid'],
- followsStateSequence: function followsStateSequence(from, to) {
+
+ followsStateSequence(from, to) {
return _.indexOf(this.states, from) < _.indexOf(this.states, to);
}
+
});
Drupal.quickedit.FieldCollection = Backbone.Collection.extend({
model: Drupal.quickedit.FieldModel
diff --git a/core/modules/quickedit/js/quickedit.js b/core/modules/quickedit/js/quickedit.js
index 2e0f21551dbf907036f9e4fb9094c353b3a549d1..5b7ef22fb998efabfe90b34a6ed069576aca306a 100644
--- a/core/modules/quickedit/js/quickedit.js
+++ b/core/modules/quickedit/js/quickedit.js
@@ -6,15 +6,15 @@
**/
(function ($, _, Backbone, Drupal, drupalSettings, JSON, storage) {
- var options = $.extend(drupalSettings.quickedit, {
+ const options = $.extend(drupalSettings.quickedit, {
strings: {
quickEdit: Drupal.t('Quick edit')
}
});
- var fieldsMetadataQueue = [];
- var fieldsAvailableQueue = [];
- var contextualLinksQueue = [];
- var entityInstancesTracker = {};
+ let fieldsMetadataQueue = [];
+ let fieldsAvailableQueue = [];
+ let contextualLinksQueue = [];
+ const entityInstancesTracker = {};
function initQuickEdit(bodyElement) {
Drupal.quickedit.collections.entities = new Drupal.quickedit.EntityCollection();
@@ -28,7 +28,7 @@
}
function processEntity(entityElement) {
- var entityID = entityElement.getAttribute('data-quickedit-entity-id');
+ const entityID = entityElement.getAttribute('data-quickedit-entity-id');
if (!entityInstancesTracker.hasOwnProperty(entityID)) {
entityInstancesTracker[entityID] = 0;
@@ -36,21 +36,21 @@
entityInstancesTracker[entityID]++;
}
- var entityInstanceID = entityInstancesTracker[entityID];
+ const entityInstanceID = entityInstancesTracker[entityID];
entityElement.setAttribute('data-quickedit-entity-instance-id', entityInstanceID);
}
function initializeField(fieldElement, fieldID, entityID, entityInstanceID) {
- var entity = Drupal.quickedit.collections.entities.findWhere({
- entityID: entityID,
- entityInstanceID: entityInstanceID
+ const entity = Drupal.quickedit.collections.entities.findWhere({
+ entityID,
+ entityInstanceID
});
$(fieldElement).addClass('quickedit-field');
- var field = new Drupal.quickedit.FieldModel({
+ const field = new Drupal.quickedit.FieldModel({
el: fieldElement,
- fieldID: fieldID,
- id: "".concat(fieldID, "[").concat(entity.get('entityInstanceID'), "]"),
- entity: entity,
+ fieldID,
+ id: `${fieldID}[${entity.get('entityInstanceID')}]`,
+ entity,
metadata: Drupal.quickedit.metadata.get(fieldID),
acceptStateChange: _.bind(Drupal.quickedit.app.acceptEditorStateChange, Drupal.quickedit.app)
});
@@ -58,11 +58,11 @@
}
function loadMissingEditors(callback) {
- var loadedEditors = _.keys(Drupal.quickedit.editors);
+ const loadedEditors = _.keys(Drupal.quickedit.editors);
- var missingEditors = [];
- Drupal.quickedit.collections.fields.each(function (fieldModel) {
- var metadata = Drupal.quickedit.metadata.get(fieldModel.get('fieldID'));
+ let missingEditors = [];
+ Drupal.quickedit.collections.fields.each(fieldModel => {
+ const metadata = Drupal.quickedit.metadata.get(fieldModel.get('fieldID'));
if (metadata.access && _.indexOf(loadedEditors, metadata.editor) === -1) {
missingEditors.push(metadata.editor);
@@ -76,13 +76,13 @@
return;
}
- var loadEditorsAjax = Drupal.ajax({
+ const loadEditorsAjax = Drupal.ajax({
url: Drupal.url('quickedit/attachments'),
submit: {
'editors[]': missingEditors
}
});
- var realInsert = Drupal.AjaxCommands.prototype.insert;
+ const realInsert = Drupal.AjaxCommands.prototype.insert;
loadEditorsAjax.commands.insert = function (ajax, response, status) {
_.defer(callback);
@@ -94,11 +94,11 @@
}
function initializeEntityContextualLink(contextualLink) {
- var metadata = Drupal.quickedit.metadata;
+ const metadata = Drupal.quickedit.metadata;
function hasFieldWithPermission(fieldIDs) {
- for (var i = 0; i < fieldIDs.length; i++) {
- var fieldID = fieldIDs[i];
+ for (let i = 0; i < fieldIDs.length; i++) {
+ const fieldID = fieldIDs[i];
if (metadata.get(fieldID, 'access') === true) {
return true;
@@ -112,41 +112,41 @@
return fieldIDs.length === metadata.intersection(fieldIDs).length;
}
- var fields = _.where(fieldsAvailableQueue, {
+ const fields = _.where(fieldsAvailableQueue, {
entityID: contextualLink.entityID,
entityInstanceID: contextualLink.entityInstanceID
});
- var fieldIDs = _.pluck(fields, 'fieldID');
+ const fieldIDs = _.pluck(fields, 'fieldID');
if (fieldIDs.length === 0) {
return false;
}
if (hasFieldWithPermission(fieldIDs)) {
- var entityModel = new Drupal.quickedit.EntityModel({
+ const entityModel = new Drupal.quickedit.EntityModel({
el: contextualLink.region,
entityID: contextualLink.entityID,
entityInstanceID: contextualLink.entityInstanceID,
- id: "".concat(contextualLink.entityID, "[").concat(contextualLink.entityInstanceID, "]"),
+ id: `${contextualLink.entityID}[${contextualLink.entityInstanceID}]`,
label: Drupal.quickedit.metadata.get(contextualLink.entityID, 'label')
});
Drupal.quickedit.collections.entities.add(entityModel);
- var entityDecorationView = new Drupal.quickedit.EntityDecorationView({
+ const entityDecorationView = new Drupal.quickedit.EntityDecorationView({
el: contextualLink.region,
model: entityModel
});
entityModel.set('entityDecorationView', entityDecorationView);
- _.each(fields, function (field) {
+ _.each(fields, field => {
initializeField(field.el, field.fieldID, contextualLink.entityID, contextualLink.entityInstanceID);
});
fieldsAvailableQueue = _.difference(fieldsAvailableQueue, fields);
- var initContextualLink = _.once(function () {
- var $links = $(contextualLink.el).find('.contextual-links');
- var contextualLinkView = new Drupal.quickedit.ContextualLinkView($.extend({
+ const initContextualLink = _.once(() => {
+ const $links = $(contextualLink.el).find('.contextual-links');
+ const contextualLinkView = new Drupal.quickedit.ContextualLinkView($.extend({
el: $('<li class="quickedit"><a href="" role="button" aria-pressed="false"></a></li>').prependTo($links),
model: entityModel,
appModel: Drupal.quickedit.app.model
@@ -170,31 +170,31 @@
}
function processField(fieldElement) {
- var metadata = Drupal.quickedit.metadata;
- var fieldID = fieldElement.getAttribute('data-quickedit-field-id');
- var entityID = extractEntityID(fieldID);
- var entityElementSelector = "[data-quickedit-entity-id=\"".concat(entityID, "\"]");
- var $entityElement = $(entityElementSelector);
+ const metadata = Drupal.quickedit.metadata;
+ const fieldID = fieldElement.getAttribute('data-quickedit-field-id');
+ const entityID = extractEntityID(fieldID);
+ const entityElementSelector = `[data-quickedit-entity-id="${entityID}"]`;
+ const $entityElement = $(entityElementSelector);
if (!$entityElement.length) {
- throw new Error("Quick Edit could not associate the rendered entity field markup (with [data-quickedit-field-id=\"".concat(fieldID, "\"]) with the corresponding rendered entity markup: no parent DOM node found with [data-quickedit-entity-id=\"").concat(entityID, "\"]. This is typically caused by the theme's template for this entity type forgetting to print the attributes."));
+ throw new Error(`Quick Edit could not associate the rendered entity field markup (with [data-quickedit-field-id="${fieldID}"]) with the corresponding rendered entity markup: no parent DOM node found with [data-quickedit-entity-id="${entityID}"]. This is typically caused by the theme's template for this entity type forgetting to print the attributes.`);
}
- var entityElement = $(fieldElement).closest($entityElement);
+ let entityElement = $(fieldElement).closest($entityElement);
if (entityElement.length === 0) {
- var $lowestCommonParent = $entityElement.parents().has(fieldElement).first();
+ const $lowestCommonParent = $entityElement.parents().has(fieldElement).first();
entityElement = $lowestCommonParent.find($entityElement);
}
- var entityInstanceID = entityElement.get(0).getAttribute('data-quickedit-entity-instance-id');
+ const entityInstanceID = entityElement.get(0).getAttribute('data-quickedit-entity-instance-id');
if (!metadata.has(fieldID)) {
fieldsMetadataQueue.push({
el: fieldElement,
- fieldID: fieldID,
- entityID: entityID,
- entityInstanceID: entityInstanceID
+ fieldID,
+ entityID,
+ entityInstanceID
});
return;
}
@@ -204,28 +204,28 @@
}
if (Drupal.quickedit.collections.entities.findWhere({
- entityID: entityID,
- entityInstanceID: entityInstanceID
+ entityID,
+ entityInstanceID
})) {
initializeField(fieldElement, fieldID, entityID, entityInstanceID);
} else {
fieldsAvailableQueue.push({
el: fieldElement,
- fieldID: fieldID,
- entityID: entityID,
- entityInstanceID: entityInstanceID
+ fieldID,
+ entityID,
+ entityInstanceID
});
}
}
function deleteContainedModelsAndQueues($context) {
- $context.find('[data-quickedit-entity-id]').addBack('[data-quickedit-entity-id]').each(function (index, entityElement) {
- var entityModel = Drupal.quickedit.collections.entities.findWhere({
+ $context.find('[data-quickedit-entity-id]').addBack('[data-quickedit-entity-id]').each((index, entityElement) => {
+ const entityModel = Drupal.quickedit.collections.entities.findWhere({
el: entityElement
});
if (entityModel) {
- var contextualLinkView = entityModel.get('contextualLinkView');
+ const contextualLinkView = entityModel.get('contextualLinkView');
contextualLinkView.undelegateEvents();
contextualLinkView.remove();
entityModel.get('entityDecorationView').remove();
@@ -238,10 +238,8 @@
contextualLinksQueue = _.filter(contextualLinksQueue, hasOtherRegion);
});
- $context.find('[data-quickedit-field-id]').addBack('[data-quickedit-field-id]').each(function (index, fieldElement) {
- Drupal.quickedit.collections.fields.chain().filter(function (fieldModel) {
- return fieldModel.get('el') === fieldElement;
- }).invoke('destroy');
+ $context.find('[data-quickedit-field-id]').addBack('[data-quickedit-field-id]').each((index, fieldElement) => {
+ Drupal.quickedit.collections.fields.chain().filter(fieldModel => fieldModel.get('el') === fieldElement).invoke('destroy');
function hasOtherFieldElement(field) {
return field.el !== fieldElement;
@@ -254,11 +252,11 @@
function fetchMissingMetadata(callback) {
if (fieldsMetadataQueue.length) {
- var fieldIDs = _.pluck(fieldsMetadataQueue, 'fieldID');
+ const fieldIDs = _.pluck(fieldsMetadataQueue, 'fieldID');
- var fieldElementsWithoutMetadata = _.pluck(fieldsMetadataQueue, 'el');
+ const fieldElementsWithoutMetadata = _.pluck(fieldsMetadataQueue, 'el');
- var entityIDs = _.uniq(_.pluck(fieldsMetadataQueue, 'entityID'), true);
+ let entityIDs = _.uniq(_.pluck(fieldsMetadataQueue, 'entityID'), true);
entityIDs = _.difference(entityIDs, Drupal.quickedit.metadata.intersection(entityIDs));
fieldsMetadataQueue = [];
@@ -270,21 +268,23 @@
'entities[]': entityIDs
},
dataType: 'json',
- success: function success(results) {
- _.each(results, function (fieldMetadata, fieldID) {
+
+ success(results) {
+ _.each(results, (fieldMetadata, fieldID) => {
Drupal.quickedit.metadata.add(fieldID, fieldMetadata);
});
callback(fieldElementsWithoutMetadata);
}
+
});
}
}
Drupal.behaviors.quickedit = {
- attach: function attach(context) {
+ attach(context) {
once('quickedit-init', 'body').forEach(initQuickEdit);
- var fields = once('quickedit', '[data-quickedit-field-id]', context);
+ const fields = once('quickedit', '[data-quickedit-field-id]', context);
if (fields.length === 0) {
return;
@@ -292,22 +292,20 @@
once('quickedit', '[data-quickedit-entity-id]', context).forEach(processEntity);
fields.forEach(processField);
- contextualLinksQueue = _.filter(contextualLinksQueue, function (contextualLink) {
- return !initializeEntityContextualLink(contextualLink);
- });
- fetchMissingMetadata(function (fieldElementsWithFreshMetadata) {
+ contextualLinksQueue = _.filter(contextualLinksQueue, contextualLink => !initializeEntityContextualLink(contextualLink));
+ fetchMissingMetadata(fieldElementsWithFreshMetadata => {
_.each(fieldElementsWithFreshMetadata, processField);
- contextualLinksQueue = _.filter(contextualLinksQueue, function (contextualLink) {
- return !initializeEntityContextualLink(contextualLink);
- });
+ contextualLinksQueue = _.filter(contextualLinksQueue, contextualLink => !initializeEntityContextualLink(contextualLink));
});
},
- detach: function detach(context, settings, trigger) {
+
+ detach(context, settings, trigger) {
if (trigger === 'unload') {
deleteContainedModelsAndQueues($(context));
}
}
+
};
Drupal.quickedit = {
app: null,
@@ -317,40 +315,46 @@
},
editors: {},
metadata: {
- has: function has(fieldID) {
+ has(fieldID) {
return storage.getItem(this._prefixFieldID(fieldID)) !== null;
},
- add: function add(fieldID, metadata) {
+
+ add(fieldID, metadata) {
storage.setItem(this._prefixFieldID(fieldID), JSON.stringify(metadata));
},
- get: function get(fieldID, key) {
- var metadata = JSON.parse(storage.getItem(this._prefixFieldID(fieldID)));
+
+ get(fieldID, key) {
+ const metadata = JSON.parse(storage.getItem(this._prefixFieldID(fieldID)));
return typeof key === 'undefined' ? metadata : metadata[key];
},
- _prefixFieldID: function _prefixFieldID(fieldID) {
- return "Drupal.quickedit.metadata.".concat(fieldID);
+
+ _prefixFieldID(fieldID) {
+ return `Drupal.quickedit.metadata.${fieldID}`;
},
- _unprefixFieldID: function _unprefixFieldID(fieldID) {
+
+ _unprefixFieldID(fieldID) {
return fieldID.substring(26);
},
- intersection: function intersection(fieldIDs) {
- var prefixedFieldIDs = _.map(fieldIDs, this._prefixFieldID);
- var intersection = _.intersection(prefixedFieldIDs, _.keys(sessionStorage));
+ intersection(fieldIDs) {
+ const prefixedFieldIDs = _.map(fieldIDs, this._prefixFieldID);
+
+ const intersection = _.intersection(prefixedFieldIDs, _.keys(sessionStorage));
return _.map(intersection, this._unprefixFieldID);
}
+
}
};
- var permissionsHashKey = Drupal.quickedit.metadata._prefixFieldID('permissionsHash');
+ const permissionsHashKey = Drupal.quickedit.metadata._prefixFieldID('permissionsHash');
- var permissionsHashValue = storage.getItem(permissionsHashKey);
- var permissionsHash = drupalSettings.user.permissionsHash;
+ const permissionsHashValue = storage.getItem(permissionsHashKey);
+ const permissionsHash = drupalSettings.user.permissionsHash;
if (permissionsHashValue !== permissionsHash) {
if (typeof permissionsHash === 'string') {
- _.chain(storage).keys().each(function (key) {
+ _.chain(storage).keys().each(key => {
if (key.substring(0, 26) === 'Drupal.quickedit.metadata.') {
storage.removeItem(key);
}
@@ -360,14 +364,14 @@
storage.setItem(permissionsHashKey, permissionsHash);
}
- $(document).on('drupalContextualLinkAdded', function (event, data) {
+ $(document).on('drupalContextualLinkAdded', (event, data) => {
if (data.$region.is('[data-quickedit-entity-id]')) {
if (!data.$region.is('[data-quickedit-entity-instance-id]')) {
once('quickedit', data.$region);
processEntity(data.$region.get(0));
}
- var contextualLink = {
+ const contextualLink = {
entityID: data.$region.attr('data-quickedit-entity-id'),
entityInstanceID: data.$region.attr('data-quickedit-entity-instance-id'),
el: data.$el[0],
diff --git a/core/modules/quickedit/js/theme.js b/core/modules/quickedit/js/theme.js
index c94a0c2078ee54e29309763b68379128b1d43aff..0545c680f82f220ee866c255a4f80ea011e61b82 100644
--- a/core/modules/quickedit/js/theme.js
+++ b/core/modules/quickedit/js/theme.js
@@ -7,14 +7,14 @@
(function ($, Drupal) {
Drupal.theme.quickeditBackstage = function (settings) {
- var html = '';
- html += "<div id=\"".concat(settings.id, "\"></div>");
+ let html = '';
+ html += `<div id="${settings.id}"></div>`;
return html;
};
Drupal.theme.quickeditEntityToolbar = function (settings) {
- var html = '';
- html += "<div id=\"".concat(settings.id, "\" class=\"quickedit quickedit-toolbar-container clearfix\">");
+ let html = '';
+ html += `<div id="${settings.id}" class="quickedit quickedit-toolbar-container clearfix">`;
html += '<i class="quickedit-toolbar-pointer"></i>';
html += '<div class="quickedit-toolbar-content">';
html += '<div class="quickedit-toolbar quickedit-toolbar-entity clearfix icon icon-pencil">';
@@ -26,7 +26,7 @@
};
Drupal.theme.quickeditEntityToolbarLabel = function (settings) {
- return "<span class=\"field\">".concat(Drupal.checkPlain(settings.fieldLabel), "</span>").concat(Drupal.checkPlain(settings.entityLabel));
+ return `<span class="field">${Drupal.checkPlain(settings.fieldLabel)}</span>${Drupal.checkPlain(settings.entityLabel)}`;
};
Drupal.theme.quickeditEntityToolbarFence = function () {
@@ -34,17 +34,17 @@
};
Drupal.theme.quickeditFieldToolbar = function (settings) {
- return "<div id=\"".concat(settings.id, "\"></div>");
+ return `<div id="${settings.id}"></div>`;
};
Drupal.theme.quickeditToolgroup = function (settings) {
- var classes = settings.classes || [];
+ const classes = settings.classes || [];
classes.unshift('quickedit-toolgroup');
- var html = '';
- html += "<div class=\"".concat(classes.join(' '), "\"");
+ let html = '';
+ html += `<div class="${classes.join(' ')}"`;
if (settings.id) {
- html += " id=\"".concat(settings.id, "\"");
+ html += ` id="${settings.id}"`;
}
html += '>';
@@ -56,33 +56,29 @@
};
Drupal.theme.quickeditButtons = function (settings) {
- var html = '';
+ let html = '';
- var _loop = function _loop(i) {
- var button = settings.buttons[i];
+ for (let i = 0; i < settings.buttons.length; i++) {
+ const button = settings.buttons[i];
if (!button.hasOwnProperty('type')) {
button.type = 'button';
}
- var attributes = [];
- var attrMap = settings.buttons[i].attributes || {};
- Object.keys(attrMap).forEach(function (attr) {
- attributes.push(attr + (attrMap[attr] ? "=\"".concat(attrMap[attr], "\"") : ''));
+ const attributes = [];
+ const attrMap = settings.buttons[i].attributes || {};
+ Object.keys(attrMap).forEach(attr => {
+ attributes.push(attr + (attrMap[attr] ? `="${attrMap[attr]}"` : ''));
});
- html += "<button type=\"".concat(button.type, "\" class=\"").concat(button.classes, "\" ").concat(attributes.join(' '), ">").concat(button.label, "</button>");
- };
-
- for (var i = 0; i < settings.buttons.length; i++) {
- _loop(i);
+ html += `<button type="${button.type}" class="${button.classes}" ${attributes.join(' ')}>${button.label}</button>`;
}
return html;
};
Drupal.theme.quickeditFormContainer = function (settings) {
- var html = '';
- html += "<div id=\"".concat(settings.id, "\" class=\"quickedit-form-container\">");
+ let html = '';
+ html += `<div id="${settings.id}" class="quickedit-form-container">`;
html += ' <div class="quickedit-form">';
html += ' <div class="placeholder">';
html += settings.loadingMsg;
diff --git a/core/modules/quickedit/js/util.js b/core/modules/quickedit/js/util.js
index 7c3e80d2d24612945dc20f5417117a1f13de7568..2c006393f55f653ccf6d89c992d536fd14f5468d 100644
--- a/core/modules/quickedit/js/util.js
+++ b/core/modules/quickedit/js/util.js
@@ -11,7 +11,7 @@
Drupal.quickedit.util.constants.transitionEnd = 'transitionEnd.quickedit webkitTransitionEnd.quickedit transitionend.quickedit msTransitionEnd.quickedit oTransitionEnd.quickedit';
Drupal.quickedit.util.buildUrl = function (id, urlFormat) {
- var parts = id.split('/');
+ const parts = id.split('/');
return Drupal.formatString(decodeURIComponent(urlFormat), {
'!entity_type': parts[0],
'!id': parts[1],
@@ -22,45 +22,52 @@
};
Drupal.quickedit.util.networkErrorModal = function (title, message) {
- var $message = $("<div>".concat(message, "</div>"));
- var networkErrorModal = Drupal.dialog($message.get(0), {
- title: title,
+ const $message = $(`<div>${message}</div>`);
+ const networkErrorModal = Drupal.dialog($message.get(0), {
+ title,
dialogClass: 'quickedit-network-error',
buttons: [{
text: Drupal.t('OK'),
- click: function click() {
+
+ click() {
networkErrorModal.close();
},
+
primary: true
}],
- create: function create() {
+
+ create() {
$(this).parent().find('.ui-dialog-titlebar-close').remove();
},
- close: function close(event) {
+
+ close(event) {
$(event.target).remove();
}
+
});
networkErrorModal.showModal();
};
Drupal.quickedit.util.form = {
- load: function load(options, callback) {
- var fieldID = options.fieldID;
- var formLoaderAjax = Drupal.ajax({
+ load(options, callback) {
+ const fieldID = options.fieldID;
+ const formLoaderAjax = Drupal.ajax({
url: Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/form/!entity_type/!id/!field_name/!langcode/!view_mode')),
submit: {
nocssjs: options.nocssjs,
reset: options.reset
},
- error: function error(xhr, url) {
- var fieldLabel = Drupal.quickedit.metadata.get(fieldID, 'label');
- var message = Drupal.t('Could not load the form for <q>@field-label</q>, either due to a website problem or a network connection problem.<br>Please try again.', {
+
+ error(xhr, url) {
+ const fieldLabel = Drupal.quickedit.metadata.get(fieldID, 'label');
+ const message = Drupal.t('Could not load the form for <q>@field-label</q>, either due to a website problem or a network connection problem.<br>Please try again.', {
'@field-label': fieldLabel
});
Drupal.quickedit.util.networkErrorModal(Drupal.t('Network problem!'), message);
- var fieldModel = Drupal.quickedit.app.model.get('activeField');
+ const fieldModel = Drupal.quickedit.app.model.get('activeField');
fieldModel.set('state', 'candidate');
}
+
});
formLoaderAjax.commands.quickeditFieldForm = function (ajax, response, status) {
@@ -70,8 +77,9 @@
formLoaderAjax.execute();
},
- ajaxifySaving: function ajaxifySaving(options, $submit) {
- var settings = {
+
+ ajaxifySaving(options, $submit) {
+ const settings = {
url: $submit.closest('form').attr('action'),
setClick: true,
event: 'click.quickedit',
@@ -80,22 +88,24 @@
nocssjs: options.nocssjs,
other_view_modes: options.other_view_modes
},
- success: function success(response, status) {
- var _this = this;
- Object.keys(response || {}).forEach(function (i) {
- if (response[i].command && _this.commands[response[i].command]) {
- _this.commands[response[i].command](_this, response[i], status);
+ success(response, status) {
+ Object.keys(response || {}).forEach(i => {
+ if (response[i].command && this.commands[response[i].command]) {
+ this.commands[response[i].command](this, response[i], status);
}
});
},
+
base: $submit.attr('id'),
element: $submit[0]
};
return Drupal.ajax(settings);
},
- unajaxifySaving: function unajaxifySaving(ajax) {
+
+ unajaxifySaving(ajax) {
$(ajax.element).off('click.quickedit');
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/AppView.js b/core/modules/quickedit/js/views/AppView.js
index 26aabbd611425e8b43d7bafbe7cb3ef9b0a764b2..b6e2e14cc4308cb11dd37eafd28aaee8a3cdf175 100644
--- a/core/modules/quickedit/js/views/AppView.js
+++ b/core/modules/quickedit/js/views/AppView.js
@@ -6,9 +6,9 @@
**/
(function ($, _, Backbone, Drupal) {
- var reload = false;
+ let reload = false;
Drupal.quickedit.AppView = Backbone.View.extend({
- initialize: function initialize(options) {
+ initialize(options) {
this.activeFieldStates = ['activating', 'active'];
this.singleFieldStates = ['highlighted', 'activating', 'active'];
this.changedFieldStates = ['changed', 'saving', 'saved', 'invalid'];
@@ -21,9 +21,10 @@
this.listenTo(options.fieldsCollection, 'add', this.rerenderedFieldToCandidate);
this.listenTo(options.fieldsCollection, 'destroy', this.teardownEditor);
},
- appStateChange: function appStateChange(entityModel, state) {
- var app = this;
- var entityToolbarView;
+
+ appStateChange(entityModel, state) {
+ const app = this;
+ let entityToolbarView;
switch (state) {
case 'launching':
@@ -33,11 +34,11 @@
appModel: this.model
});
entityModel.toolbarView = entityToolbarView;
- entityModel.get('fields').each(function (fieldModel) {
+ entityModel.get('fields').each(fieldModel => {
app.setupEditor(fieldModel);
});
- _.defer(function () {
+ _.defer(() => {
entityModel.set('state', 'opening');
});
@@ -45,7 +46,7 @@
case 'closed':
entityToolbarView = entityModel.toolbarView;
- entityModel.get('fields').each(function (fieldModel) {
+ entityModel.get('fields').each(fieldModel => {
app.teardownEditor(fieldModel);
});
@@ -62,8 +63,9 @@
break;
}
},
- acceptEditorStateChange: function acceptEditorStateChange(from, to, context, fieldModel) {
- var accept = true;
+
+ acceptEditorStateChange(from, to, context, fieldModel) {
+ let accept = true;
if (context && (context.reason === 'stop' || context.reason === 'rerender')) {
if (from === 'candidate' && to === 'inactive') {
@@ -89,8 +91,8 @@
}
if (accept) {
- var activeField;
- var activeFieldState;
+ let activeField;
+ let activeFieldState;
if ((this.readyFieldStates.indexOf(from) !== -1 || from === 'invalid') && this.activeFieldStates.indexOf(to) !== -1) {
activeField = this.model.get('activeField');
@@ -125,34 +127,36 @@
return accept;
},
- setupEditor: function setupEditor(fieldModel) {
- var entityModel = fieldModel.get('entity');
- var entityToolbarView = entityModel.toolbarView;
- var fieldToolbarRoot = entityToolbarView.getToolbarRoot();
- var editorName = fieldModel.get('metadata').editor;
- var editorModel = new Drupal.quickedit.EditorModel();
- var editorView = new Drupal.quickedit.editors[editorName]({
+
+ setupEditor(fieldModel) {
+ const entityModel = fieldModel.get('entity');
+ const entityToolbarView = entityModel.toolbarView;
+ const fieldToolbarRoot = entityToolbarView.getToolbarRoot();
+ const editorName = fieldModel.get('metadata').editor;
+ const editorModel = new Drupal.quickedit.EditorModel();
+ const editorView = new Drupal.quickedit.editors[editorName]({
el: $(fieldModel.get('el')),
model: editorModel,
- fieldModel: fieldModel
+ fieldModel
});
- var toolbarView = new Drupal.quickedit.FieldToolbarView({
+ const toolbarView = new Drupal.quickedit.FieldToolbarView({
el: fieldToolbarRoot,
model: fieldModel,
$editedElement: $(editorView.getEditedElement()),
- editorView: editorView,
- entityModel: entityModel
+ editorView,
+ entityModel
});
- var decorationView = new Drupal.quickedit.FieldDecorationView({
+ const decorationView = new Drupal.quickedit.FieldDecorationView({
el: $(editorView.getEditedElement()),
model: fieldModel,
- editorView: editorView
+ editorView
});
fieldModel.editorView = editorView;
fieldModel.toolbarView = toolbarView;
fieldModel.decorationView = decorationView;
},
- teardownEditor: function teardownEditor(fieldModel) {
+
+ teardownEditor(fieldModel) {
if (typeof fieldModel.editorView === 'undefined') {
return;
}
@@ -164,9 +168,10 @@
fieldModel.editorView.remove();
delete fieldModel.editorView;
},
- confirmEntityDeactivation: function confirmEntityDeactivation(entityModel) {
- var that = this;
- var discardDialog;
+
+ confirmEntityDeactivation(entityModel) {
+ const that = this;
+ let discardDialog;
function closeDiscardDialog(action) {
discardDialog.close(action);
@@ -189,39 +194,48 @@
}
if (!this.model.get('activeModal')) {
- var $unsavedChanges = $("<div>".concat(Drupal.t('You have unsaved changes'), "</div>"));
+ const $unsavedChanges = $(`<div>${Drupal.t('You have unsaved changes')}</div>`);
discardDialog = Drupal.dialog($unsavedChanges.get(0), {
title: Drupal.t('Discard changes?'),
dialogClass: 'quickedit-discard-modal',
resizable: false,
buttons: [{
text: Drupal.t('Save'),
- click: function click() {
+
+ click() {
closeDiscardDialog('save');
},
+
primary: true
}, {
text: Drupal.t('Discard changes'),
- click: function click() {
+
+ click() {
closeDiscardDialog('discard');
}
+
}],
closeOnEscape: false,
- create: function create() {
+
+ create() {
$(this).parent().find('.ui-dialog-titlebar-close').remove();
},
+
beforeClose: false,
- close: function close(event) {
+
+ close(event) {
$(event.target).remove();
}
+
});
this.model.set('activeModal', discardDialog);
discardDialog.showModal();
}
},
- editorStateChange: function editorStateChange(fieldModel, state) {
- var from = fieldModel.previous('state');
- var to = state;
+
+ editorStateChange(fieldModel, state) {
+ const from = fieldModel.previous('state');
+ const to = state;
if (_.indexOf(this.singleFieldStates, to) !== -1 && this.model.get('highlightedField') !== fieldModel) {
this.model.set('highlightedField', fieldModel);
@@ -239,21 +253,22 @@
this.model.set('activeField', null);
}
},
- renderUpdatedField: function renderUpdatedField(fieldModel, html, options) {
- var $fieldWrapper = $(fieldModel.get('el'));
- var $context = $fieldWrapper.parent();
- var renderField = function renderField() {
+ renderUpdatedField(fieldModel, html, options) {
+ const $fieldWrapper = $(fieldModel.get('el'));
+ const $context = $fieldWrapper.parent();
+
+ const renderField = function () {
fieldModel.destroy();
$fieldWrapper.replaceWith(html);
Drupal.attachBehaviors($context.get(0));
};
if (!options.propagation) {
- _.defer(function () {
+ _.defer(() => {
fieldModel.set('state', 'candidate');
- _.defer(function () {
+ _.defer(() => {
fieldModel.set('state', 'inactive', {
reason: 'rerender'
});
@@ -264,15 +279,16 @@
renderField();
}
},
- propagateUpdatedField: function propagateUpdatedField(updatedField, html, options) {
+
+ propagateUpdatedField(updatedField, html, options) {
if (options.propagation) {
return;
}
- var htmlForOtherViewModes = updatedField.get('htmlForOtherViewModes');
+ const htmlForOtherViewModes = updatedField.get('htmlForOtherViewModes');
Drupal.quickedit.collections.fields.where({
logicalFieldID: updatedField.get('logicalFieldID')
- }).forEach(function (field) {
+ }).forEach(field => {
if (field === updatedField) {} else if (field.getViewMode() === updatedField.getViewMode()) {
field.set('html', updatedField.get('html'));
} else if (field.getViewMode() in htmlForOtherViewModes) {
@@ -282,8 +298,9 @@
}
});
},
- rerenderedFieldToCandidate: function rerenderedFieldToCandidate(fieldModel) {
- var activeEntity = Drupal.quickedit.collections.entities.findWhere({
+
+ rerenderedFieldToCandidate(fieldModel) {
+ const activeEntity = Drupal.quickedit.collections.entities.findWhere({
isActive: true
});
@@ -296,16 +313,16 @@
fieldModel.set('state', 'candidate');
}
},
- enforceSingleActiveEntity: function enforceSingleActiveEntity(changedEntityModel) {
+
+ enforceSingleActiveEntity(changedEntityModel) {
if (changedEntityModel.get('isActive') === false) {
return;
}
- changedEntityModel.collection.chain().filter(function (entityModel) {
- return entityModel.get('isActive') === true && entityModel !== changedEntityModel;
- }).each(function (entityModel) {
+ changedEntityModel.collection.chain().filter(entityModel => entityModel.get('isActive') === true && entityModel !== changedEntityModel).each(entityModel => {
entityModel.set('state', 'deactivating');
});
}
+
});
})(jQuery, _, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/ContextualLinkView.js b/core/modules/quickedit/js/views/ContextualLinkView.js
index 51b3fa38dd7f265c4b19f02fc6a9e5ce222002f8..8a22b6030d4d67aa0afd3389ed6680fa0db17d04 100644
--- a/core/modules/quickedit/js/views/ContextualLinkView.js
+++ b/core/modules/quickedit/js/views/ContextualLinkView.js
@@ -7,29 +7,32 @@
(function ($, Backbone, Drupal) {
Drupal.quickedit.ContextualLinkView = Backbone.View.extend({
- events: function events() {
+ events() {
function touchEndToClick(event) {
event.preventDefault();
event.target.click();
}
return {
- 'click a': function clickA(event) {
+ 'click a': function (event) {
event.preventDefault();
this.model.set('state', 'launching');
},
'touchEnd a': touchEndToClick
};
},
- initialize: function initialize(options) {
+
+ initialize(options) {
this.$el.find('a').text(options.strings.quickEdit);
this.render();
this.listenTo(this.model, 'change:isActive', this.render);
},
- render: function render(entityModel, isActive) {
+
+ render(entityModel, isActive) {
this.$el.find('a').attr('aria-pressed', isActive);
this.$el.closest('.contextual').toggle(!isActive);
return this;
}
+
});
})(jQuery, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/EditorView.js b/core/modules/quickedit/js/views/EditorView.js
index 29b9fdc9c3456011bf64f41946419c4d0042dc72..6eb89ef164a7d25ac612d95970d52db4e2e2d6d2 100644
--- a/core/modules/quickedit/js/views/EditorView.js
+++ b/core/modules/quickedit/js/views/EditorView.js
@@ -7,18 +7,21 @@
(function ($, Backbone, Drupal) {
Drupal.quickedit.EditorView = Backbone.View.extend({
- initialize: function initialize(options) {
+ initialize(options) {
this.fieldModel = options.fieldModel;
this.listenTo(this.fieldModel, 'change:state', this.stateChange);
},
- remove: function remove() {
+
+ remove() {
this.setElement();
Backbone.View.prototype.remove.call(this);
},
- getEditedElement: function getEditedElement() {
+
+ getEditedElement() {
return this.$el;
},
- getQuickEditUISettings: function getQuickEditUISettings() {
+
+ getQuickEditUISettings() {
return {
padding: false,
unifiedToolbar: false,
@@ -26,9 +29,10 @@
popup: false
};
},
- stateChange: function stateChange(fieldModel, state) {
- var from = fieldModel.previous('state');
- var to = state;
+
+ stateChange(fieldModel, state) {
+ const from = fieldModel.previous('state');
+ const to = state;
switch (to) {
case 'inactive':
@@ -46,11 +50,11 @@
case 'activating':
{
- var loadDependencies = function loadDependencies(callback) {
+ const loadDependencies = function (callback) {
callback();
};
- loadDependencies(function () {
+ loadDependencies(() => {
fieldModel.set('state', 'active');
});
break;
@@ -78,33 +82,35 @@
break;
}
},
- revert: function revert() {},
- save: function save() {
- var fieldModel = this.fieldModel;
- var editorModel = this.model;
- var backstageId = "quickedit_backstage-".concat(this.fieldModel.id.replace(/[/[\]_\s]/g, '-'));
+
+ revert() {},
+
+ save() {
+ const fieldModel = this.fieldModel;
+ const editorModel = this.model;
+ const backstageId = `quickedit_backstage-${this.fieldModel.id.replace(/[/[\]_\s]/g, '-')}`;
function fillAndSubmitForm(value) {
- var $form = $("#".concat(backstageId)).find('form');
+ const $form = $(`#${backstageId}`).find('form');
$form.find(':input[type!="hidden"][type!="submit"]:not(select)').not('[name$="\\[summary\\]"]').val(value);
$form.find('.quickedit-form-submit').trigger('click.quickedit');
}
- var formOptions = {
+ const formOptions = {
fieldID: this.fieldModel.get('fieldID'),
$el: this.$el,
nocssjs: true,
other_view_modes: fieldModel.findOtherViewModes(),
reset: !this.fieldModel.get('entity').get('inTempStore')
};
- var self = this;
- Drupal.quickedit.util.form.load(formOptions, function (form, ajax) {
- var $backstage = $(Drupal.theme('quickeditBackstage', {
+ const self = this;
+ Drupal.quickedit.util.form.load(formOptions, (form, ajax) => {
+ const $backstage = $(Drupal.theme('quickeditBackstage', {
id: backstageId
})).appendTo('body');
- var $form = $(form).appendTo($backstage);
+ const $form = $(form).appendTo($backstage);
$form.prop('novalidate', true);
- var $submit = $form.find('.quickedit-form-submit');
+ const $submit = $form.find('.quickedit-form-submit');
self.formSaveAjax = Drupal.quickedit.util.form.ajaxifySaving(formOptions, $submit);
function removeHiddenForm() {
@@ -131,12 +137,15 @@
fillAndSubmitForm(editorModel.get('currentValue'));
});
},
- showValidationErrors: function showValidationErrors() {
- var $errors = $('<div class="quickedit-validation-errors"></div>').append(this.model.get('validationErrors'));
+
+ showValidationErrors() {
+ const $errors = $('<div class="quickedit-validation-errors"></div>').append(this.model.get('validationErrors'));
this.getEditedElement().addClass('quickedit-validation-error').after($errors);
},
- removeValidationErrors: function removeValidationErrors() {
+
+ removeValidationErrors() {
this.getEditedElement().removeClass('quickedit-validation-error').next('.quickedit-validation-errors').remove();
}
+
});
})(jQuery, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/EntityDecorationView.js b/core/modules/quickedit/js/views/EntityDecorationView.js
index aeaf6e365268b8f95af3039af7e7599a337d5586..7c3158ad775971f17218e94ead8cdda3ca32c56e 100644
--- a/core/modules/quickedit/js/views/EntityDecorationView.js
+++ b/core/modules/quickedit/js/views/EntityDecorationView.js
@@ -7,15 +7,18 @@
(function (Drupal, $, Backbone) {
Drupal.quickedit.EntityDecorationView = Backbone.View.extend({
- initialize: function initialize() {
+ initialize() {
this.listenTo(this.model, 'change', this.render);
},
- render: function render() {
+
+ render() {
this.$el.toggleClass('quickedit-entity-active', this.model.get('isActive'));
},
- remove: function remove() {
+
+ remove() {
this.setElement(null);
Backbone.View.prototype.remove.call(this);
}
+
});
})(Drupal, jQuery, Backbone);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/EntityToolbarView.js b/core/modules/quickedit/js/views/EntityToolbarView.js
index afaf356490a6abe6b7e4ed18c8af0fade7eb3813..9b54675b3222fc8cc6c9efd5d3175afefb9de437 100644
--- a/core/modules/quickedit/js/views/EntityToolbarView.js
+++ b/core/modules/quickedit/js/views/EntityToolbarView.js
@@ -8,35 +8,38 @@
(function ($, _, Backbone, Drupal, debounce, Popper) {
Drupal.quickedit.EntityToolbarView = Backbone.View.extend({
_fieldToolbarRoot: null,
- events: function events() {
- var map = {
+
+ events() {
+ const map = {
'click button.action-save': 'onClickSave',
'click button.action-cancel': 'onClickCancel',
mouseenter: 'onMouseenter'
};
return map;
},
- initialize: function initialize(options) {
- var that = this;
+
+ initialize(options) {
+ const that = this;
this.appModel = options.appModel;
this.$entity = $(this.model.get('el'));
this.listenTo(this.model, 'change:isActive change:isDirty change:state', this.render);
this.listenTo(this.appModel, 'change:highlightedField change:activeField', this.render);
this.listenTo(this.model.get('fields'), 'change:state', this.fieldStateChange);
$(window).on('resize.quickedit scroll.quickedit drupalViewportOffsetChange.quickedit', debounce($.proxy(this.windowChangeHandler, this), 150));
- $(document).on('drupalViewportOffsetChange.quickedit', function (event, offsets) {
+ $(document).on('drupalViewportOffsetChange.quickedit', (event, offsets) => {
if (that.$fence) {
that.$fence.css(offsets);
}
});
- var $toolbar = this.buildToolbarEl();
+ const $toolbar = this.buildToolbarEl();
this.setElement($toolbar);
this._fieldToolbarRoot = $toolbar.find('.quickedit-toolbar-field').get(0);
this.render();
},
- render: function render() {
+
+ render() {
if (this.model.get('isActive')) {
- var $body = $('body');
+ const $body = $('body');
if ($body.children('#quickedit-entity-toolbar').length === 0) {
$body.append(this.$el);
@@ -51,8 +54,8 @@
this.position();
}
- var $button = this.$el.find('.quickedit-button.action-save');
- var isDirty = this.model.get('isDirty');
+ const $button = this.$el.find('.quickedit-button.action-save');
+ const isDirty = this.model.get('isDirty');
switch (this.model.get('state')) {
case 'opened':
@@ -70,16 +73,19 @@
return this;
},
- remove: function remove() {
+
+ remove() {
this.$fence.remove();
$(window).off('resize.quickedit scroll.quickedit drupalViewportOffsetChange.quickedit');
$(document).off('drupalViewportOffsetChange.quickedit');
Backbone.View.prototype.remove.call(this);
},
- windowChangeHandler: function windowChangeHandler(event) {
+
+ windowChangeHandler(event) {
this.position();
},
- fieldStateChange: function fieldStateChange(model, state) {
+
+ fieldStateChange(model, state) {
switch (state) {
case 'active':
this.render();
@@ -90,16 +96,17 @@
break;
}
},
- position: function position(element) {
+
+ position(element) {
clearTimeout(this.timer);
- var that = this;
- var edge = document.documentElement.dir === 'rtl' ? 'right' : 'left';
- var delay = 0;
- var check = 0;
- var horizontalPadding = 0;
- var of;
- var activeField;
- var highlightedField;
+ const that = this;
+ const edge = document.documentElement.dir === 'rtl' ? 'right' : 'left';
+ let delay = 0;
+ let check = 0;
+ let horizontalPadding = 0;
+ let of;
+ let activeField;
+ let highlightedField;
do {
switch (check) {
@@ -129,12 +136,12 @@
default:
{
- var fieldModels = this.model.get('fields').models;
- var topMostPosition = 1000000;
- var topMostField = null;
+ const fieldModels = this.model.get('fields').models;
+ let topMostPosition = 1000000;
+ let topMostField = null;
- for (var i = 0; i < fieldModels.length; i++) {
- var pos = fieldModels[i].get('el').getBoundingClientRect().top;
+ for (let i = 0; i < fieldModels.length; i++) {
+ const pos = fieldModels[i].get('el').getBoundingClientRect().top;
if (pos < topMostPosition) {
topMostPosition = pos;
@@ -151,23 +158,24 @@
check++;
} while (!of);
- function refinePopper(_ref) {
- var state = _ref.state;
- var isBelow = state.placement.split('-')[0] === 'bottom';
- var classListMethod = isBelow ? 'add' : 'remove';
+ function refinePopper({
+ state
+ }) {
+ const isBelow = state.placement.split('-')[0] === 'bottom';
+ const classListMethod = isBelow ? 'add' : 'remove';
state.elements.popper.classList[classListMethod]('quickedit-toolbar-pointer-top');
}
function positionToolbar() {
- var popperElement = that.el;
- var referenceElement = of;
- var boundariesElement = that.$fence[0];
- var popperedge = edge === 'left' ? 'start' : 'end';
+ const popperElement = that.el;
+ const referenceElement = of;
+ const boundariesElement = that.$fence[0];
+ const popperedge = edge === 'left' ? 'start' : 'end';
if (referenceElement !== undefined) {
if (!popperElement.classList.contains('js-popper-processed')) {
that.popper = Popper.createPopper(referenceElement, popperElement, {
- placement: "top-".concat(popperedge),
+ placement: `top-${popperedge}`,
modifiers: [{
name: 'flip',
options: {
@@ -210,24 +218,28 @@
});
}
- this.timer = setTimeout(function () {
+ this.timer = setTimeout(() => {
_.defer(positionToolbar);
}, delay);
},
- onClickSave: function onClickSave(event) {
+
+ onClickSave(event) {
event.stopPropagation();
event.preventDefault();
this.model.set('state', 'committing');
},
- onClickCancel: function onClickCancel(event) {
+
+ onClickCancel(event) {
event.preventDefault();
this.model.set('state', 'deactivating');
},
- onMouseenter: function onMouseenter(event) {
+
+ onMouseenter(event) {
clearTimeout(this.timer);
},
- buildToolbarEl: function buildToolbarEl() {
- var $toolbar = $(Drupal.theme('quickeditEntityToolbar', {
+
+ buildToolbarEl() {
+ const $toolbar = $(Drupal.theme('quickeditEntityToolbar', {
id: 'quickedit-entity-toolbar'
}));
$toolbar.find('.quickedit-toolbar-entity').prepend(Drupal.theme('quickeditToolgroup', {
@@ -250,25 +262,27 @@
});
return $toolbar;
},
- getToolbarRoot: function getToolbarRoot() {
+
+ getToolbarRoot() {
return this._fieldToolbarRoot;
},
- label: function label() {
- var label = '';
- var entityLabel = this.model.get('label');
- var activeField = Drupal.quickedit.app.model.get('activeField');
- var activeFieldLabel = activeField && activeField.get('metadata').label;
- var highlightedField = Drupal.quickedit.app.model.get('highlightedField');
- var highlightedFieldLabel = highlightedField && highlightedField.get('metadata').label;
+
+ label() {
+ let label = '';
+ const entityLabel = this.model.get('label');
+ const activeField = Drupal.quickedit.app.model.get('activeField');
+ const activeFieldLabel = activeField && activeField.get('metadata').label;
+ const highlightedField = Drupal.quickedit.app.model.get('highlightedField');
+ const highlightedFieldLabel = highlightedField && highlightedField.get('metadata').label;
if (activeFieldLabel) {
label = Drupal.theme('quickeditEntityToolbarLabel', {
- entityLabel: entityLabel,
+ entityLabel,
fieldLabel: activeFieldLabel
});
} else if (highlightedFieldLabel) {
label = Drupal.theme('quickeditEntityToolbarLabel', {
- entityLabel: entityLabel,
+ entityLabel,
fieldLabel: highlightedFieldLabel
});
} else {
@@ -277,17 +291,22 @@
this.$el.find('.quickedit-toolbar-label').html(label);
},
- addClass: function addClass(toolgroup, classes) {
+
+ addClass(toolgroup, classes) {
this._find(toolgroup).addClass(classes);
},
- removeClass: function removeClass(toolgroup, classes) {
+
+ removeClass(toolgroup, classes) {
this._find(toolgroup).removeClass(classes);
},
- _find: function _find(toolgroup) {
- return this.$el.find(".quickedit-toolbar .quickedit-toolgroup.".concat(toolgroup));
+
+ _find(toolgroup) {
+ return this.$el.find(`.quickedit-toolbar .quickedit-toolgroup.${toolgroup}`);
},
- show: function show(toolgroup) {
+
+ show(toolgroup) {
this.$el.removeClass('quickedit-animate-invisible');
}
+
});
})(jQuery, _, Backbone, Drupal, Drupal.debounce, Popper);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/FieldDecorationView.js b/core/modules/quickedit/js/views/FieldDecorationView.js
index 5d4e804311fc6f4d8472edf74df53aeeee3d039d..605f59526ca7f50ab9eb3c1487a4e482dcb9e85d 100644
--- a/core/modules/quickedit/js/views/FieldDecorationView.js
+++ b/core/modules/quickedit/js/views/FieldDecorationView.js
@@ -15,18 +15,21 @@
'tabIn.quickedit': 'onMouseEnter',
'tabOut.quickedit': 'onMouseLeave'
},
- initialize: function initialize(options) {
+
+ initialize(options) {
this.editorView = options.editorView;
this.listenTo(this.model, 'change:state', this.stateChange);
this.listenTo(this.model, 'change:isChanged change:inTempStore', this.renderChanged);
},
- remove: function remove() {
+
+ remove() {
this.setElement();
Backbone.View.prototype.remove.call(this);
},
- stateChange: function stateChange(model, state) {
- var from = model.previous('state');
- var to = state;
+
+ stateChange(model, state) {
+ const from = model.previous('state');
+ const to = state;
switch (to) {
case 'inactive':
@@ -82,47 +85,57 @@
break;
}
},
- renderChanged: function renderChanged() {
+
+ renderChanged() {
this.$el.toggleClass('quickedit-changed', this.model.get('isChanged') || this.model.get('inTempStore'));
},
- onMouseEnter: function onMouseEnter(event) {
- var that = this;
+
+ onMouseEnter(event) {
+ const that = this;
that.model.set('state', 'highlighted');
event.stopPropagation();
},
- onMouseLeave: function onMouseLeave(event) {
- var that = this;
+
+ onMouseLeave(event) {
+ const that = this;
that.model.set('state', 'candidate', {
reason: 'mouseleave'
});
event.stopPropagation();
},
- onClick: function onClick(event) {
+
+ onClick(event) {
this.model.set('state', 'activating');
event.preventDefault();
event.stopPropagation();
},
- decorate: function decorate() {
+
+ decorate() {
this.$el.addClass('quickedit-candidate quickedit-editable');
},
- undecorate: function undecorate() {
+
+ undecorate() {
this.$el.removeClass('quickedit-candidate quickedit-editable quickedit-highlighted quickedit-editing');
},
- startHighlight: function startHighlight() {
- var that = this;
+
+ startHighlight() {
+ const that = this;
that.$el.addClass('quickedit-highlighted');
},
- stopHighlight: function stopHighlight() {
+
+ stopHighlight() {
this.$el.removeClass('quickedit-highlighted');
},
- prepareEdit: function prepareEdit() {
+
+ prepareEdit() {
this.$el.addClass('quickedit-editing');
if (this.editorView.getQuickEditUISettings().popup) {
this.$el.addClass('quickedit-editor-is-popup');
}
},
- stopEdit: function stopEdit() {
+
+ stopEdit() {
this.$el.removeClass('quickedit-highlighted quickedit-editing');
if (this.editorView.getQuickEditUISettings().popup) {
@@ -131,81 +144,86 @@
$('.quickedit-candidate').addClass('quickedit-editable');
},
- _pad: function _pad() {
+
+ _pad() {
if (this.$el.data('quickedit-padded')) {
return;
}
- var self = this;
+ const self = this;
if (this.$el[0].style.width === '') {
this._widthAttributeIsEmpty = true;
this.$el.addClass('quickedit-animate-disable-width').css('width', this.$el.width());
}
- var posProp = this._getPositionProperties(this.$el);
+ const posProp = this._getPositionProperties(this.$el);
- setTimeout(function () {
+ setTimeout(() => {
self.$el.removeClass('quickedit-animate-disable-width');
self.$el.css({
position: 'relative',
- top: "".concat(posProp.top - 5, "px"),
- left: "".concat(posProp.left - 5, "px"),
- 'padding-top': "".concat(posProp['padding-top'] + 5, "px"),
- 'padding-left': "".concat(posProp['padding-left'] + 5, "px"),
- 'padding-right': "".concat(posProp['padding-right'] + 5, "px"),
- 'padding-bottom': "".concat(posProp['padding-bottom'] + 5, "px"),
- 'margin-bottom': "".concat(posProp['margin-bottom'] - 10, "px")
+ top: `${posProp.top - 5}px`,
+ left: `${posProp.left - 5}px`,
+ 'padding-top': `${posProp['padding-top'] + 5}px`,
+ 'padding-left': `${posProp['padding-left'] + 5}px`,
+ 'padding-right': `${posProp['padding-right'] + 5}px`,
+ 'padding-bottom': `${posProp['padding-bottom'] + 5}px`,
+ 'margin-bottom': `${posProp['margin-bottom'] - 10}px`
}).data('quickedit-padded', true);
}, 0);
},
- _unpad: function _unpad() {
+
+ _unpad() {
if (!this.$el.data('quickedit-padded')) {
return;
}
- var self = this;
+ const self = this;
if (this._widthAttributeIsEmpty) {
this.$el.addClass('quickedit-animate-disable-width').css('width', '');
}
- var posProp = this._getPositionProperties(this.$el);
+ const posProp = this._getPositionProperties(this.$el);
- setTimeout(function () {
+ setTimeout(() => {
self.$el.removeClass('quickedit-animate-disable-width');
self.$el.css({
position: 'relative',
- top: "".concat(posProp.top + 5, "px"),
- left: "".concat(posProp.left + 5, "px"),
- 'padding-top': "".concat(posProp['padding-top'] - 5, "px"),
- 'padding-left': "".concat(posProp['padding-left'] - 5, "px"),
- 'padding-right': "".concat(posProp['padding-right'] - 5, "px"),
- 'padding-bottom': "".concat(posProp['padding-bottom'] - 5, "px"),
- 'margin-bottom': "".concat(posProp['margin-bottom'] + 10, "px")
+ top: `${posProp.top + 5}px`,
+ left: `${posProp.left + 5}px`,
+ 'padding-top': `${posProp['padding-top'] - 5}px`,
+ 'padding-left': `${posProp['padding-left'] - 5}px`,
+ 'padding-right': `${posProp['padding-right'] - 5}px`,
+ 'padding-bottom': `${posProp['padding-bottom'] - 5}px`,
+ 'margin-bottom': `${posProp['margin-bottom'] + 10}px`
});
}, 0);
this.$el.removeData('quickedit-padded');
},
- _getPositionProperties: function _getPositionProperties($e) {
- var p;
- var r = {};
- var props = ['top', 'left', 'bottom', 'right', 'padding-top', 'padding-left', 'padding-right', 'padding-bottom', 'margin-bottom'];
- var propCount = props.length;
- for (var i = 0; i < propCount; i++) {
+ _getPositionProperties($e) {
+ let p;
+ const r = {};
+ const props = ['top', 'left', 'bottom', 'right', 'padding-top', 'padding-left', 'padding-right', 'padding-bottom', 'margin-bottom'];
+ const propCount = props.length;
+
+ for (let i = 0; i < propCount; i++) {
p = props[i];
r[p] = parseInt(this._replaceBlankPosition($e.css(p)), 10);
}
return r;
},
- _replaceBlankPosition: function _replaceBlankPosition(pos) {
+
+ _replaceBlankPosition(pos) {
if (pos === 'auto' || !pos) {
pos = '0px';
}
return pos;
}
+
});
})(jQuery, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/FieldToolbarView.js b/core/modules/quickedit/js/views/FieldToolbarView.js
index ac295816368e018a0e973c37f4e8761136233a84..da2be3a13c6d7d8323f212d024263aed705ecf86 100644
--- a/core/modules/quickedit/js/views/FieldToolbarView.js
+++ b/core/modules/quickedit/js/views/FieldToolbarView.js
@@ -10,23 +10,26 @@
$editedElement: null,
editorView: null,
_id: null,
- initialize: function initialize(options) {
+
+ initialize(options) {
this.$editedElement = options.$editedElement;
this.editorView = options.editorView;
this.$root = this.$el;
- this._id = "quickedit-toolbar-for-".concat(this.model.id.replace(/[/[\]]/g, '_'));
+ this._id = `quickedit-toolbar-for-${this.model.id.replace(/[/[\]]/g, '_')}`;
this.listenTo(this.model, 'change:state', this.stateChange);
},
- render: function render() {
+
+ render() {
this.setElement($(Drupal.theme('quickeditFieldToolbar', {
id: this._id
})));
this.$el.prependTo(this.$root);
return this;
},
- stateChange: function stateChange(model, state) {
- var from = model.previous('state');
- var to = state;
+
+ stateChange(model, state) {
+ const from = model.previous('state');
+ const to = state;
switch (to) {
case 'inactive':
@@ -72,7 +75,8 @@
break;
}
},
- insertWYSIWYGToolGroups: function insertWYSIWYGToolGroups() {
+
+ insertWYSIWYGToolGroups() {
this.$el.append(Drupal.theme('quickeditToolgroup', {
id: this.getFloatedWysiwygToolgroupId(),
classes: ['wysiwyg-floated', 'quickedit-animate-slow', 'quickedit-animate-invisible', 'quickedit-animate-delay-veryfast'],
@@ -85,27 +89,33 @@
this.show('wysiwyg-floated');
this.show('wysiwyg-main');
},
- getId: function getId() {
- return "quickedit-toolbar-for-".concat(this._id);
+
+ getId() {
+ return `quickedit-toolbar-for-${this._id}`;
},
- getFloatedWysiwygToolgroupId: function getFloatedWysiwygToolgroupId() {
- return "quickedit-wysiwyg-floated-toolgroup-for-".concat(this._id);
+
+ getFloatedWysiwygToolgroupId() {
+ return `quickedit-wysiwyg-floated-toolgroup-for-${this._id}`;
},
- getMainWysiwygToolgroupId: function getMainWysiwygToolgroupId() {
- return "quickedit-wysiwyg-main-toolgroup-for-".concat(this._id);
+
+ getMainWysiwygToolgroupId() {
+ return `quickedit-wysiwyg-main-toolgroup-for-${this._id}`;
},
- _find: function _find(toolgroup) {
- return this.$el.find(".quickedit-toolgroup.".concat(toolgroup));
+
+ _find(toolgroup) {
+ return this.$el.find(`.quickedit-toolgroup.${toolgroup}`);
},
- show: function show(toolgroup) {
- var $group = this._find(toolgroup);
- $group.on(Drupal.quickedit.util.constants.transitionEnd, function (event) {
+ show(toolgroup) {
+ const $group = this._find(toolgroup);
+
+ $group.on(Drupal.quickedit.util.constants.transitionEnd, event => {
$group.off(Drupal.quickedit.util.constants.transitionEnd);
});
- window.setTimeout(function () {
+ window.setTimeout(() => {
$group.removeClass('quickedit-animate-invisible');
}, 0);
}
+
});
})(jQuery, _, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/responsive_image/js/responsive_image.ajax.js b/core/modules/responsive_image/js/responsive_image.ajax.js
index 145adcf00aa8d4b0b7bddc9a9407e28b97e6c0ce..35ffd8455730c4cfb69b4bfa9c5d622ec3c7cca7 100644
--- a/core/modules/responsive_image/js/responsive_image.ajax.js
+++ b/core/modules/responsive_image/js/responsive_image.ajax.js
@@ -7,10 +7,11 @@
(function (Drupal) {
Drupal.behaviors.responsiveImageAJAX = {
- attach: function attach() {
+ attach() {
if (window.picturefill) {
window.picturefill();
}
}
+
};
})(Drupal);
\ No newline at end of file
diff --git a/core/modules/settings_tray/js/settings_tray.js b/core/modules/settings_tray/js/settings_tray.js
index 6817268687fe4e43c4d60c606412bfb3a414ed47..14635c670a3c34afe3a6e1b8c3d701aae3c39c77 100644
--- a/core/modules/settings_tray/js/settings_tray.js
+++ b/core/modules/settings_tray/js/settings_tray.js
@@ -5,12 +5,12 @@
* @preserve
**/
-(function ($, Drupal) {
- var blockConfigureSelector = '[data-settings-tray-edit]';
- var toggleEditSelector = '[data-drupal-settingstray="toggle"]';
- var itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-settingstray="editable"] a, [data-drupal-settingstray="editable"] button';
- var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
- var quickEditItemSelector = '[data-quickedit-entity-id]';
+(($, Drupal) => {
+ const blockConfigureSelector = '[data-settings-tray-edit]';
+ const toggleEditSelector = '[data-drupal-settingstray="toggle"]';
+ const itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-settingstray="editable"] a, [data-drupal-settingstray="editable"] button';
+ const contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
+ const quickEditItemSelector = '[data-quickedit-entity-id]';
function preventClick(event) {
if ($(event.target).closest('.contextual-links').length) {
@@ -42,8 +42,8 @@
}
editMode = !!editMode;
- var $editButton = $(toggleEditSelector);
- var $editables;
+ const $editButton = $(toggleEditSelector);
+ let $editables;
if (editMode) {
$editButton.text(Drupal.t('Editing'));
@@ -52,7 +52,7 @@
if ($editables.length) {
document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true);
- $editables.not(contextualItemsSelector).on('click.settingstray', function (e) {
+ $editables.not(contextualItemsSelector).on('click.settingstray', e => {
if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
return;
}
@@ -60,7 +60,7 @@
$(e.currentTarget).find(blockConfigureSelector).trigger('click');
disableQuickEdit();
});
- $(quickEditItemSelector).not(contextualItemsSelector).on('click.settingstray', function (e) {
+ $(quickEditItemSelector).not(contextualItemsSelector).on('click.settingstray', e => {
if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
closeOffCanvas();
}
@@ -99,9 +99,7 @@
}
function prepareAjaxLinks() {
- Drupal.ajax.instances.filter(function (instance) {
- return instance && $(instance.element).attr('data-dialog-renderer') === 'off_canvas';
- }).forEach(function (instance) {
+ Drupal.ajax.instances.filter(instance => instance && $(instance.element).attr('data-dialog-renderer') === 'off_canvas').forEach(instance => {
if (!instance.options.data.hasOwnProperty('dialogOptions')) {
instance.options.data.dialogOptions = {};
}
@@ -113,16 +111,16 @@
});
}
- $(document).on('drupalContextualLinkAdded', function (event, data) {
+ $(document).on('drupalContextualLinkAdded', (event, data) => {
prepareAjaxLinks();
- once('settings_tray.edit_mode_init', 'body').forEach(function () {
- var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
+ once('settings_tray.edit_mode_init', 'body').forEach(() => {
+ const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
if (editMode) {
setEditModeState(true);
}
});
- data.$el.find(blockConfigureSelector).on('click.settingstray', function () {
+ data.$el.find(blockConfigureSelector).on('click.settingstray', () => {
if (!isInEditMode()) {
$(toggleEditSelector).trigger('click').trigger('click.settings_tray');
}
@@ -130,29 +128,30 @@
disableQuickEdit();
});
});
- $(document).on('keyup.settingstray', function (e) {
+ $(document).on('keyup.settingstray', e => {
if (isInEditMode() && e.keyCode === 27) {
Drupal.announce(Drupal.t('Exited edit mode.'));
toggleEditMode();
}
});
Drupal.behaviors.toggleEditMode = {
- attach: function attach() {
+ attach() {
$(once('settingstray', toggleEditSelector)).on('click.settingstray', toggleEditMode);
}
+
};
$(window).on({
- 'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
+ 'dialog:beforecreate': (event, dialog, $element, settings) => {
if ($element.is('#drupal-off-canvas')) {
$('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
- var $activeElement = $("#".concat(settings.settingsTrayActiveEditableId));
+ const $activeElement = $(`#${settings.settingsTrayActiveEditableId}`);
if ($activeElement.length) {
$activeElement.addClass('settings-tray-active-editable');
}
}
},
- 'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
+ 'dialog:beforeclose': (event, dialog, $element) => {
if ($element.is('#drupal-off-canvas')) {
$('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
}
diff --git a/core/modules/statistics/statistics.js b/core/modules/statistics/statistics.js
index 44c1e8e98299497f61ba220b013a98122d01bf1e..0c2f4107fb5351496f1f1b5c046331fda187c2f5 100644
--- a/core/modules/statistics/statistics.js
+++ b/core/modules/statistics/statistics.js
@@ -6,7 +6,7 @@
**/
(function ($, Drupal, drupalSettings) {
- $(document).ready(function () {
+ $(document).ready(() => {
$.ajax({
type: 'POST',
cache: false,
diff --git a/core/modules/system/js/system.date.js b/core/modules/system/js/system.date.js
index 7c083f0bc5c2597fc1e49e2859daa3a9c245d057..faeba83cbf2feb400934dc5ac58aa7e52736da1d 100644
--- a/core/modules/system/js/system.date.js
+++ b/core/modules/system/js/system.date.js
@@ -6,29 +6,28 @@
**/
(function ($, Drupal, drupalSettings) {
- var dateFormats = drupalSettings.dateFormats;
+ const dateFormats = drupalSettings.dateFormats;
Drupal.behaviors.dateFormat = {
- attach: function attach(context) {
- var source = once('dateFormat', '[data-drupal-date-formatter="source"]', context);
- var target = once('dateFormat', '[data-drupal-date-formatter="preview"]', context);
+ attach(context) {
+ const source = once('dateFormat', '[data-drupal-date-formatter="source"]', context);
+ const target = once('dateFormat', '[data-drupal-date-formatter="preview"]', context);
if (!source.length || !target.length) {
return;
}
- var $target = $(target);
- var $preview = $target.find('em');
+ const $target = $(target);
+ const $preview = $target.find('em');
function dateFormatHandler(e) {
- var baseValue = $(e.target).val() || '';
- var dateString = baseValue.replace(/\\?(.?)/gi, function (key, value) {
- return dateFormats[key] ? dateFormats[key] : value;
- });
+ const baseValue = $(e.target).val() || '';
+ const dateString = baseValue.replace(/\\?(.?)/gi, (key, value) => dateFormats[key] ? dateFormats[key] : value);
$preview.text(dateString);
$target.toggleClass('js-hide', !dateString.length);
}
$(source).on('keyup.dateFormat change.dateFormat input.dateFormat', dateFormatHandler).trigger('keyup');
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/system/js/system.js b/core/modules/system/js/system.js
index a69e362f7c919c42c7612a9439dbf84a4690494b..3aee4859c487f826910c1375f0445b18dc6e450d 100644
--- a/core/modules/system/js/system.js
+++ b/core/modules/system/js/system.js
@@ -6,35 +6,39 @@
**/
(function ($, Drupal, drupalSettings) {
- var ids = [];
+ const ids = [];
Drupal.behaviors.copyFieldValue = {
- attach: function attach(context) {
- Object.keys(drupalSettings.copyFieldValue || {}).forEach(function (element) {
+ attach(context) {
+ Object.keys(drupalSettings.copyFieldValue || {}).forEach(element => {
ids.push(element);
});
if (ids.length) {
$(once('copy-field-values', 'body')).on('value:copy', this.valueTargetCopyHandler);
- $(once('copy-field-values', "#".concat(ids.join(', #')))).on('blur', this.valueSourceBlurHandler);
+ $(once('copy-field-values', `#${ids.join(', #')}`)).on('blur', this.valueSourceBlurHandler);
}
},
- detach: function detach(context, settings, trigger) {
+
+ detach(context, settings, trigger) {
if (trigger === 'unload' && ids.length) {
$(once.remove('copy-field-values', 'body')).off('value:copy');
- $(once.remove('copy-field-values', "#".concat(ids.join(', #')))).off('blur');
+ $(once.remove('copy-field-values', `#${ids.join(', #')}`)).off('blur');
}
},
- valueTargetCopyHandler: function valueTargetCopyHandler(e, value) {
- var $target = $(e.target);
+
+ valueTargetCopyHandler(e, value) {
+ const $target = $(e.target);
if ($target.val() === '') {
$target.val(value);
}
},
- valueSourceBlurHandler: function valueSourceBlurHandler(e) {
- var value = $(e.target).val();
- var targetIds = drupalSettings.copyFieldValue[e.target.id];
- $("#".concat(targetIds.join(', #'))).trigger('value:copy', value);
+
+ valueSourceBlurHandler(e) {
+ const value = $(e.target).val();
+ const targetIds = drupalSettings.copyFieldValue[e.target.id];
+ $(`#${targetIds.join(', #')}`).trigger('value:copy', value);
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/system/js/system.modules.js b/core/modules/system/js/system.modules.js
index 6757f8f0f49c3a8c2ae71d19942f2ab7283aa195..e397b2c736e609fe185bcd8c4eef3739b3794ea9 100644
--- a/core/modules/system/js/system.modules.js
+++ b/core/modules/system/js/system.modules.js
@@ -5,49 +5,35 @@
* @preserve
**/
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
(function ($, Drupal, debounce) {
Drupal.behaviors.tableFilterByText = {
- attach: function attach(context, settings) {
- var _once = once('table-filter-text', 'input.table-filter-text'),
- _once2 = _slicedToArray(_once, 1),
- input = _once2[0];
+ attach(context, settings) {
+ const [input] = once('table-filter-text', 'input.table-filter-text');
if (!input) {
return;
}
- var $table = $(input.getAttribute('data-table'));
- var $rowsAndDetails;
- var $rows;
- var $details;
- var searching = false;
+ const $table = $(input.getAttribute('data-table'));
+ let $rowsAndDetails;
+ let $rows;
+ let $details;
+ let searching = false;
function hidePackageDetails(index, element) {
- var $packDetails = $(element);
- var $visibleRows = $packDetails.find('tbody tr:visible');
+ const $packDetails = $(element);
+ const $visibleRows = $packDetails.find('tbody tr:visible');
$packDetails.toggle($visibleRows.length > 0);
}
function filterModuleList(e) {
- var query = $(e.target).val();
- var re = new RegExp("\\b".concat(query), 'i');
+ const query = $(e.target).val();
+ const re = new RegExp(`\\b${query}`, 'i');
function showModuleRow(index, row) {
- var $row = $(row);
- var $sources = $row.find('.table-filter-text-source, .module-name, .module-description');
- var textMatch = $sources.text().search(re) !== -1;
+ const $row = $(row);
+ const $sources = $row.find('.table-filter-text-source, .module-name, .module-description');
+ const textMatch = $sources.text().search(re) !== -1;
$row.closest('tr').toggle(textMatch);
}
@@ -85,5 +71,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
});
}
}
+
};
})(jQuery, Drupal, Drupal.debounce);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/ajax_test/js/focus-ajax.js b/core/modules/system/tests/modules/ajax_test/js/focus-ajax.js
index 9cc0da8661375424dba32610f90841a81b254483..22314f02041a9153eed8e3e0817cc1db0939c621 100644
--- a/core/modules/system/tests/modules/ajax_test/js/focus-ajax.js
+++ b/core/modules/system/tests/modules/ajax_test/js/focus-ajax.js
@@ -5,17 +5,18 @@
* @preserve
**/
-(function (Drupal) {
+(Drupal => {
Drupal.behaviors.focusFirstTest = {
- attach: function attach() {
- once('focusin', document.body).forEach(function (element) {
- element.addEventListener('focusin', function (e) {
- document.querySelectorAll('[data-has-focus]').forEach(function (wasFocused) {
+ attach() {
+ once('focusin', document.body).forEach(element => {
+ element.addEventListener('focusin', e => {
+ document.querySelectorAll('[data-has-focus]').forEach(wasFocused => {
wasFocused.removeAttribute('data-has-focus');
});
e.target.setAttribute('data-has-focus', true);
});
});
}
+
};
})(Drupal, once);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/ajax_test/js/insert-ajax.js b/core/modules/system/tests/modules/ajax_test/js/insert-ajax.js
index 2c3db6a61dce3f304403cb625ec77c3e6c5517be..a41e676e36799eaf5e64e0441658a1fbf8a0b65e 100644
--- a/core/modules/system/tests/modules/ajax_test/js/insert-ajax.js
+++ b/core/modules/system/tests/modules/ajax_test/js/insert-ajax.js
@@ -7,10 +7,10 @@
(function ($, window, Drupal) {
Drupal.behaviors.insertTest = {
- attach: function attach(context) {
- $(once('ajax-insert', '.ajax-insert')).on('click', function (event) {
+ attach(context) {
+ $(once('ajax-insert', '.ajax-insert')).on('click', event => {
event.preventDefault();
- var ajaxSettings = {
+ const ajaxSettings = {
url: event.currentTarget.getAttribute('href'),
wrapper: 'ajax-target',
base: false,
@@ -18,12 +18,12 @@
method: event.currentTarget.getAttribute('data-method'),
effect: event.currentTarget.getAttribute('data-effect')
};
- var myAjaxObject = Drupal.ajax(ajaxSettings);
+ const myAjaxObject = Drupal.ajax(ajaxSettings);
myAjaxObject.execute();
});
- $(once('ajax-insert', '.ajax-insert-inline')).on('click', function (event) {
+ $(once('ajax-insert', '.ajax-insert-inline')).on('click', event => {
event.preventDefault();
- var ajaxSettings = {
+ const ajaxSettings = {
url: event.currentTarget.getAttribute('href'),
wrapper: 'ajax-target-inline',
base: false,
@@ -31,10 +31,11 @@
method: event.currentTarget.getAttribute('data-method'),
effect: event.currentTarget.getAttribute('data-effect')
};
- var myAjaxObject = Drupal.ajax(ajaxSettings);
+ const myAjaxObject = Drupal.ajax(ajaxSettings);
myAjaxObject.execute();
});
$(context).addClass('processed');
}
+
};
})(jQuery, window, Drupal);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/jquery_keyevent_polyfilll_test/js/jquery.keyevent.polyfill.js b/core/modules/system/tests/modules/jquery_keyevent_polyfilll_test/js/jquery.keyevent.polyfill.js
index 94b4116052eaf7f2a3bd473d33a0e3d33fba2f79..a39a83757470ab26a6f3722c589ffac37a567bd3 100644
--- a/core/modules/system/tests/modules/jquery_keyevent_polyfilll_test/js/jquery.keyevent.polyfill.js
+++ b/core/modules/system/tests/modules/jquery_keyevent_polyfilll_test/js/jquery.keyevent.polyfill.js
@@ -5,11 +5,11 @@
* @preserve
**/
-(function ($) {
+($ => {
jQuery.event.addProp('which', function (event) {
- var keyEventRegex = /^key/;
- var mouseEventRegex = /^(?:mouse|pointer|contextmenu|drag|drop)|click/;
- var button = event.button;
+ const keyEventRegex = /^key/;
+ const mouseEventRegex = /^(?:mouse|pointer|contextmenu|drag|drop)|click/;
+ const button = event.button;
if (event.which == null && keyEventRegex.test(event.type)) {
return event.charCode != null ? event.charCode : event.keyCode;
diff --git a/core/modules/system/tests/modules/js_ajax_test/js/js_ajax_test.ajax.js b/core/modules/system/tests/modules/js_ajax_test/js/js_ajax_test.ajax.js
index 4d71a2f3811bfe08a828b93d8a024ff68224bd81..eda1bbc275921b98b449a3ba5963d678c8f16098 100644
--- a/core/modules/system/tests/modules/js_ajax_test/js/js_ajax_test.ajax.js
+++ b/core/modules/system/tests/modules/js_ajax_test/js/js_ajax_test.ajax.js
@@ -7,12 +7,12 @@
(function ($, Drupal) {
Drupal.AjaxCommands.prototype.jsAjaxTestCommand = function (ajax, response) {
- var $domElement = $(response.selector);
+ const $domElement = $(response.selector);
ajax.element_settings.cat = 'catbro';
- var data = {
+ const data = {
element_settings: ajax.element_settings.cat || {},
elementSettings: ajax.elementSettings.cat || {}
};
- $domElement.html("<div id=\"js_ajax_test_form_element\">".concat(JSON.stringify(data), "</div>"));
+ $domElement.html(`<div id="js_ajax_test_form_element">${JSON.stringify(data)}</div>`);
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/js_cookie_test/js/js_cookie_shim_test.js b/core/modules/system/tests/modules/js_cookie_test/js/js_cookie_shim_test.js
index 2a7a3fd1991889a9782af4a6ed3b7e33244ad5d4..ca166a0bc08747c4daa541ffa83e7bd8ae486a9c 100644
--- a/core/modules/system/tests/modules/js_cookie_test/js/js_cookie_shim_test.js
+++ b/core/modules/system/tests/modules/js_cookie_test/js/js_cookie_shim_test.js
@@ -5,32 +5,33 @@
* @preserve
**/
-(function (_ref, $) {
- var behaviors = _ref.behaviors;
+(({
+ behaviors
+}, $) => {
behaviors.jqueryCookie = {
- attach: function attach() {
+ attach: () => {
if (once('js_cookie_test-init', 'body').length) {
- $('.js_cookie_test_add_button').on('click', function () {
+ $('.js_cookie_test_add_button').on('click', () => {
$.cookie('js_cookie_test', 'red panda');
});
- $('.js_cookie_test_add_raw_button').on('click', function () {
+ $('.js_cookie_test_add_raw_button').on('click', () => {
$.cookie.raw = true;
$.cookie('js_cookie_test_raw', 'red panda');
});
- $('.js_cookie_test_add_json_button').on('click', function () {
+ $('.js_cookie_test_add_json_button').on('click', () => {
$.cookie.json = true;
$.cookie('js_cookie_test_json', {
panda: 'red'
});
$.cookie('js_cookie_test_json_simple', 'red panda');
});
- $('.js_cookie_test_add_json_string_button').on('click', function () {
+ $('.js_cookie_test_add_json_string_button').on('click', () => {
$.cookie.json = false;
$.cookie('js_cookie_test_json_string', {
panda: 'red'
});
});
- $('.js_cookie_test_remove_button').on('click', function () {
+ $('.js_cookie_test_remove_button').on('click', () => {
$.removeCookie('js_cookie_test');
});
}
diff --git a/core/modules/system/tests/modules/js_deprecation_test/js/js_deprecation_test.js b/core/modules/system/tests/modules/js_deprecation_test/js/js_deprecation_test.js
index 48ccbad18c0a9a8a1885fa8363595b1e24e7af64..6558fb97bf4e667b21987919e755a90239d90a92 100644
--- a/core/modules/system/tests/modules/js_deprecation_test/js/js_deprecation_test.js
+++ b/core/modules/system/tests/modules/js_deprecation_test/js/js_deprecation_test.js
@@ -5,18 +5,18 @@
* @preserve
**/
-(function (_ref) {
- var deprecationError = _ref.deprecationError,
- deprecatedProperty = _ref.deprecatedProperty,
- behaviors = _ref.behaviors;
-
- var deprecatedFunction = function deprecatedFunction() {
+(function ({
+ deprecationError,
+ deprecatedProperty,
+ behaviors
+}) {
+ const deprecatedFunction = () => {
deprecationError({
message: 'This function is deprecated for testing purposes.'
});
};
- var objectWithDeprecatedProperty = deprecatedProperty({
+ const objectWithDeprecatedProperty = deprecatedProperty({
target: {
deprecatedProperty: 'Kitten'
},
@@ -24,9 +24,9 @@
message: 'This property is deprecated for testing purposes.'
});
behaviors.testDeprecations = {
- attach: function attach() {
+ attach: () => {
deprecatedFunction();
- var deprecatedProperty = objectWithDeprecatedProperty.deprecatedProperty;
+ const deprecatedProperty = objectWithDeprecatedProperty.deprecatedProperty;
}
};
})(Drupal);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/js_errors_test/js/js_errors_test.js b/core/modules/system/tests/modules/js_errors_test/js/js_errors_test.js
index a3357d06f801eb847a768e6cea2fddc31a3ac4f8..4affcd94b03e1c2d7ab46ca62ef29d27c226613a 100644
--- a/core/modules/system/tests/modules/js_errors_test/js/js_errors_test.js
+++ b/core/modules/system/tests/modules/js_errors_test/js/js_errors_test.js
@@ -5,11 +5,12 @@
* @preserve
**/
-(function (_ref) {
- var throwError = _ref.throwError,
- behaviors = _ref.behaviors;
+(function ({
+ throwError,
+ behaviors
+}) {
behaviors.testErrors = {
- attach: function attach() {
+ attach: () => {
throwError(new Error('A manually thrown error.'));
}
};
diff --git a/core/modules/system/tests/modules/js_interaction_test/js/js_interaction_test.trigger_link.js b/core/modules/system/tests/modules/js_interaction_test/js/js_interaction_test.trigger_link.js
index c6b1618bb300d52383014d700e653a6a55505a81..3a11dbd6d22801f432170d6292215b4e5498d9b9 100644
--- a/core/modules/system/tests/modules/js_interaction_test/js/js_interaction_test.trigger_link.js
+++ b/core/modules/system/tests/modules/js_interaction_test/js/js_interaction_test.trigger_link.js
@@ -5,24 +5,26 @@
* @preserve
**/
-(function (_ref) {
- var behaviors = _ref.behaviors;
+(({
+ behaviors
+}) => {
behaviors.js_interaction_test_trigger_link = {
- attach: function attach() {
- var removeBlockerTrigger = once('remove-blocker-trigger', '.remove-blocker-trigger').shift();
- removeBlockerTrigger.addEventListener('click', function (event) {
+ attach() {
+ const removeBlockerTrigger = once('remove-blocker-trigger', '.remove-blocker-trigger').shift();
+ removeBlockerTrigger.addEventListener('click', event => {
event.preventDefault();
- setTimeout(function () {
+ setTimeout(() => {
document.querySelector('.blocker-element').remove();
}, 100);
});
- var enableFieldTrigger = once('enable-field-trigger', '.enable-field-trigger').shift();
- enableFieldTrigger.addEventListener('click', function (event) {
+ const enableFieldTrigger = once('enable-field-trigger', '.enable-field-trigger').shift();
+ enableFieldTrigger.addEventListener('click', event => {
event.preventDefault();
- setTimeout(function () {
+ setTimeout(() => {
document.querySelector('input[name="target_field"]').disabled = false;
}, 100);
});
}
+
};
})(Drupal);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/js_message_test/js/js_message_test.js b/core/modules/system/tests/modules/js_message_test/js/js_message_test.js
index e4f2ce8a00fb7316657c50f99abca8da77e042f3..e47eea8cffa5490c4ba9ff2b126ae263b2ad700f 100644
--- a/core/modules/system/tests/modules/js_message_test/js/js_message_test.js
+++ b/core/modules/system/tests/modules/js_message_test/js/js_message_test.js
@@ -5,82 +5,77 @@
* @preserve
**/
-(function ($, _ref, _ref2) {
- var behaviors = _ref.behaviors;
- var testMessages = _ref2.testMessages;
- var indexes = {};
- testMessages.types.forEach(function (type) {
+(($, {
+ behaviors
+}, {
+ testMessages
+}) => {
+ const indexes = {};
+ testMessages.types.forEach(type => {
indexes[type] = [];
});
- var messageObjects = {
+ const messageObjects = {
default: {
zone: new Drupal.Message(),
- indexes: indexes
+ indexes
},
multiple: []
};
messageObjects.default.zone.clear();
- testMessages.selectors.filter(Boolean).forEach(function (selector) {
+ testMessages.selectors.filter(Boolean).forEach(selector => {
messageObjects[selector] = {
zone: new Drupal.Message(document.querySelector(selector)),
- indexes: indexes
+ indexes
};
});
behaviors.js_message_test = {
- attach: function attach() {
- $(once('messages-details', '[data-drupal-messages-area]')).on('click', '[data-action]', function (e) {
- var $target = $(e.currentTarget);
- var type = $target.attr('data-type');
- var area = $target.closest('[data-drupal-messages-area]').attr('data-drupal-messages-area') || 'default';
- var message = messageObjects[area].zone;
- var action = $target.attr('data-action');
+ attach() {
+ $(once('messages-details', '[data-drupal-messages-area]')).on('click', '[data-action]', e => {
+ const $target = $(e.currentTarget);
+ const type = $target.attr('data-type');
+ const area = $target.closest('[data-drupal-messages-area]').attr('data-drupal-messages-area') || 'default';
+ const message = messageObjects[area].zone;
+ const action = $target.attr('data-action');
if (action === 'add') {
- messageObjects[area].indexes[type].push(message.add("This is a message of the type, ".concat(type, ". You be the judge of its importance."), {
- type: type
+ messageObjects[area].indexes[type].push(message.add(`This is a message of the type, ${type}. You be the judge of its importance.`, {
+ type
}));
} else if (action === 'remove') {
message.remove(messageObjects[area].indexes[type].pop());
}
});
- $(once('add-multiple', '[data-action="add-multiple"]')).on('click', function () {
- [0, 1, 2, 3, 4, 5].forEach(function (i) {
- messageObjects.multiple.push(messageObjects.default.zone.add("This is message number ".concat(i, " of the type, ").concat(testMessages.types[i % testMessages.types.length], ". You be the judge of its importance."), {
+ $(once('add-multiple', '[data-action="add-multiple"]')).on('click', () => {
+ [0, 1, 2, 3, 4, 5].forEach(i => {
+ messageObjects.multiple.push(messageObjects.default.zone.add(`This is message number ${i} of the type, ${testMessages.types[i % testMessages.types.length]}. You be the judge of its importance.`, {
type: testMessages.types[i % testMessages.types.length]
}));
});
});
- $(once('remove-multiple', '[data-action="remove-multiple"]')).on('click', function () {
- messageObjects.multiple.forEach(function (messageIndex) {
- return messageObjects.default.zone.remove(messageIndex);
- });
+ $(once('remove-multiple', '[data-action="remove-multiple"]')).on('click', () => {
+ messageObjects.multiple.forEach(messageIndex => messageObjects.default.zone.remove(messageIndex));
messageObjects.multiple = [];
});
- $(once('add-multiple-error', '[data-action="add-multiple-error"]')).on('click', function () {
- [0, 1, 2, 3, 4, 5].forEach(function (i) {
- return messageObjects.default.zone.add("Msg-".concat(i), {
- type: 'error'
- });
- });
- messageObjects.default.zone.add("Msg-".concat(testMessages.types.length * 2), {
+ $(once('add-multiple-error', '[data-action="add-multiple-error"]')).on('click', () => {
+ [0, 1, 2, 3, 4, 5].forEach(i => messageObjects.default.zone.add(`Msg-${i}`, {
+ type: 'error'
+ }));
+ messageObjects.default.zone.add(`Msg-${testMessages.types.length * 2}`, {
type: 'status'
});
});
- $(once('remove-type', '[data-action="remove-type"]')).on('click', function () {
- Array.prototype.map.call(document.querySelectorAll('[data-drupal-message-id^="error"]'), function (element) {
- return element.getAttribute('data-drupal-message-id');
- }).forEach(function (id) {
- return messageObjects.default.zone.remove(id);
- });
+ $(once('remove-type', '[data-action="remove-type"]')).on('click', () => {
+ Array.prototype.map.call(document.querySelectorAll('[data-drupal-message-id^="error"]'), element => element.getAttribute('data-drupal-message-id')).forEach(id => messageObjects.default.zone.remove(id));
});
- $(once('clear-all', '[data-action="clear-all"]')).on('click', function () {
+ $(once('clear-all', '[data-action="clear-all"]')).on('click', () => {
messageObjects.default.zone.clear();
});
- $(once('id-no-status', '[data-action="id-no-status"]')).on('click', function () {
+ $(once('id-no-status', '[data-action="id-no-status"]')).on('click', () => {
messageObjects.default.zone.add('Msg-id-no-status', {
id: 'my-special-id'
});
});
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/js_testing_log_test/js/js_testing_log.js b/core/modules/system/tests/modules/js_testing_log_test/js/js_testing_log.js
index 2a5348723b0dc8ee65442d539840f1aa3dd88ac2..bf4904dd6ad3c5d7d429b2f38a9d2c2dcf0d7e22 100644
--- a/core/modules/system/tests/modules/js_testing_log_test/js/js_testing_log.js
+++ b/core/modules/system/tests/modules/js_testing_log_test/js/js_testing_log.js
@@ -7,19 +7,19 @@
(function (Drupal) {
if (typeof console !== 'undefined' && console.warn) {
- var originalWarnFunction = console.warn;
+ const originalWarnFunction = console.warn;
- console.warn = function (warning) {
- var warnings = JSON.parse(sessionStorage.getItem('js_testing_log_test.warnings') || JSON.stringify([]));
+ console.warn = warning => {
+ const warnings = JSON.parse(sessionStorage.getItem('js_testing_log_test.warnings') || JSON.stringify([]));
warnings.push(warning);
sessionStorage.setItem('js_testing_log_test.warnings', JSON.stringify(warnings));
originalWarnFunction(warning);
};
- var originalThrowFunction = Drupal.throwError;
+ const originalThrowFunction = Drupal.throwError;
- Drupal.throwError = function (error) {
- var errors = JSON.parse(sessionStorage.getItem('js_testing_log_test.errors') || JSON.stringify([]));
+ Drupal.throwError = error => {
+ const errors = JSON.parse(sessionStorage.getItem('js_testing_log_test.errors') || JSON.stringify([]));
errors.push(error.stack);
sessionStorage.setItem('js_testing_log_test.errors', JSON.stringify(errors));
originalThrowFunction(error);
diff --git a/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.no_element_after_wait.js b/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.no_element_after_wait.js
index 8237f7a38d7b3952703360ea540af3cccdd9913b..7241cbb7f80bb04c796f1e63194274c0d422cd47 100644
--- a/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.no_element_after_wait.js
+++ b/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.no_element_after_wait.js
@@ -5,21 +5,22 @@
* @preserve
**/
-(function ($, Drupal) {
+(($, Drupal) => {
Drupal.behaviors.js_webassert_test_wait_for_ajax_request = {
- attach: function attach() {
- $('#edit-test-assert-no-element-after-wait-pass').on('click', function (e) {
+ attach() {
+ $('#edit-test-assert-no-element-after-wait-pass').on('click', e => {
e.preventDefault();
- setTimeout(function () {
+ setTimeout(() => {
$('#edit-test-assert-no-element-after-wait-pass').remove();
}, 500);
});
- $('#edit-test-assert-no-element-after-wait-fail').on('click', function (e) {
+ $('#edit-test-assert-no-element-after-wait-fail').on('click', e => {
e.preventDefault();
- setTimeout(function () {
+ setTimeout(() => {
$('#edit-test-assert-no-element-after-wait-fail').remove();
}, 2000);
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.js b/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.js
index 3413846dbf7df6698ee720572b8143e4f29bd549..e67b784226290e17aef32ca63f9688e34ee3e8ff 100644
--- a/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.js
+++ b/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.js
@@ -7,8 +7,9 @@
(function ($, Drupal, drupalSettings) {
Drupal.behaviors.js_webassert_test_wait_for_ajax_request = {
- attach: function attach(context) {
+ attach(context) {
$('input[name="test_assert_wait_on_ajax_input"]').val('js_webassert_test');
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.js b/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.js
index 4ab7ba4e70fe637e7cf5801582bb5f52a0541f47..d4286211016354f3374978f150a6c80cf1ebd738 100644
--- a/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.js
+++ b/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.js
@@ -7,8 +7,9 @@
(function ($, Drupal, drupalSettings) {
Drupal.behaviors.js_webassert_test_wait_for_element = {
- attach: function attach(context) {
+ attach(context) {
$('#js_webassert_test_element_invisible').show();
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/olivero_test/js/log-errors.js b/core/modules/system/tests/modules/olivero_test/js/log-errors.js
index 28057970e8dd38ea787e1efc18c41b9a0c29c66a..60cdc04e786c406f8fbe2e87b3ee06059b32c55c 100644
--- a/core/modules/system/tests/modules/olivero_test/js/log-errors.js
+++ b/core/modules/system/tests/modules/olivero_test/js/log-errors.js
@@ -6,6 +6,6 @@
**/
Drupal.errorLog = [];
-window.addEventListener('error', function (e) {
+window.addEventListener('error', e => {
Drupal.errorLog.push(e);
});
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/tabledrag_test/js/tabledrag_test.js b/core/modules/system/tests/modules/tabledrag_test/js/tabledrag_test.js
index 6eb1d1ebc450112a5a2dbac6358f69bfccb522fd..c0ee7081b0610eb3680b6bdfd408c0740d04af46 100644
--- a/core/modules/system/tests/modules/tabledrag_test/js/tabledrag_test.js
+++ b/core/modules/system/tests/modules/tabledrag_test/js/tabledrag_test.js
@@ -7,10 +7,11 @@
(function ($, Drupal) {
Drupal.behaviors.tableDragTest = {
- attach: function attach(context) {
- $(once('tabledrag-test', '.tabledrag-handle', context)).on('keydown.tabledrag-test', function (event) {
+ attach(context) {
+ $(once('tabledrag-test', '.tabledrag-handle', context)).on('keydown.tabledrag-test', event => {
$(event.currentTarget).removeClass('tabledrag-test-dragging');
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/taxonomy/taxonomy.js b/core/modules/taxonomy/taxonomy.js
index 0fe952bf06341937918875008e84d7687586a8fd..8b65002ce8b2e4bab73afee7353efd136f2e8ddd 100644
--- a/core/modules/taxonomy/taxonomy.js
+++ b/core/modules/taxonomy/taxonomy.js
@@ -7,21 +7,21 @@
(function ($, Drupal) {
Drupal.behaviors.termDrag = {
- attach: function attach(context, settings) {
- var backStep = settings.taxonomy.backStep;
- var forwardStep = settings.taxonomy.forwardStep;
- var tableDrag = Drupal.tableDrag.taxonomy;
- var $table = $('#taxonomy');
- var rows = $table.find('tr').length;
+ attach(context, settings) {
+ const backStep = settings.taxonomy.backStep;
+ const forwardStep = settings.taxonomy.forwardStep;
+ const tableDrag = Drupal.tableDrag.taxonomy;
+ const $table = $('#taxonomy');
+ const rows = $table.find('tr').length;
tableDrag.row.prototype.onSwap = function (swappedRow) {
$table.find('tr.taxonomy-term-preview').removeClass('taxonomy-term-preview');
$table.find('tr.taxonomy-term-divider-top').removeClass('taxonomy-term-divider-top');
$table.find('tr.taxonomy-term-divider-bottom').removeClass('taxonomy-term-divider-bottom');
- var tableBody = $table[0].tBodies[0];
+ const tableBody = $table[0].tBodies[0];
if (backStep) {
- for (var n = 0; n < backStep; n++) {
+ for (let n = 0; n < backStep; n++) {
$(tableBody.rows[n]).addClass('taxonomy-term-preview');
}
@@ -30,7 +30,7 @@
}
if (forwardStep) {
- for (var k = rows - forwardStep - 1; k < rows - 1; k++) {
+ for (let k = rows - forwardStep - 1; k < rows - 1; k++) {
$(tableBody.rows[k]).addClass('taxonomy-term-preview');
}
@@ -39,5 +39,6 @@
}
};
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/text/text.js b/core/modules/text/text.js
index d45bb736b0e23a8d20ab3ce53e62f58377ca080e..df62c14002777dd805dde91fb38224ca0df5358f 100644
--- a/core/modules/text/text.js
+++ b/core/modules/text/text.js
@@ -7,29 +7,27 @@
(function ($, Drupal) {
Drupal.behaviors.textSummary = {
- attach: function attach(context, settings) {
- once('text-summary', '.js-text-summary', context).forEach(function (summary) {
- var $widget = $(summary).closest('.js-text-format-wrapper');
- var $summary = $widget.find('.js-text-summary-wrapper');
- var $summaryLabel = $summary.find('label').eq(0);
- var $full = $widget.children('.js-form-type-textarea');
- var $fullLabel = $full.find('label').eq(0);
+ attach(context, settings) {
+ once('text-summary', '.js-text-summary', context).forEach(summary => {
+ const $widget = $(summary).closest('.js-text-format-wrapper');
+ const $summary = $widget.find('.js-text-summary-wrapper');
+ const $summaryLabel = $summary.find('label').eq(0);
+ const $full = $widget.children('.js-form-type-textarea');
+ let $fullLabel = $full.find('label').eq(0);
if ($fullLabel.length === 0) {
$fullLabel = $('<label></label>').prependTo($full);
}
if ($fullLabel.hasClass('visually-hidden')) {
- $fullLabel.html(function (index, oldHtml) {
- return "<span class=\"visually-hidden\">".concat(oldHtml, "</span>");
- });
+ $fullLabel.html((index, oldHtml) => `<span class="visually-hidden">${oldHtml}</span>`);
$fullLabel.removeClass('visually-hidden');
}
- var $link = $("<span class=\"field-edit-link\"> (<button type=\"button\" class=\"link link-edit-summary\">".concat(Drupal.t('Hide summary'), "</button>)</span>"));
- var $button = $link.find('button');
- var toggleClick = true;
- $link.on('click', function (e) {
+ const $link = $(`<span class="field-edit-link"> (<button type="button" class="link link-edit-summary">${Drupal.t('Hide summary')}</button>)</span>`);
+ const $button = $link.find('button');
+ let toggleClick = true;
+ $link.on('click', e => {
if (toggleClick) {
$summary.hide();
$button.html(Drupal.t('Edit summary'));
@@ -49,5 +47,6 @@
}
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/escapeAdmin.js b/core/modules/toolbar/js/escapeAdmin.js
index 1b7fda1986d47749c4f0e123a60fc3de89941334..d0a139bb2516101d87a28760f7b491b26b7fa0af 100644
--- a/core/modules/toolbar/js/escapeAdmin.js
+++ b/core/modules/toolbar/js/escapeAdmin.js
@@ -6,20 +6,20 @@
**/
(function ($, Drupal, drupalSettings) {
- var pathInfo = drupalSettings.path;
- var escapeAdminPath = sessionStorage.getItem('escapeAdminPath');
- var windowLocation = window.location;
+ const pathInfo = drupalSettings.path;
+ const escapeAdminPath = sessionStorage.getItem('escapeAdminPath');
+ const windowLocation = window.location;
if (!pathInfo.currentPathIsAdmin && !/destination=/.test(windowLocation.search)) {
sessionStorage.setItem('escapeAdminPath', windowLocation);
}
Drupal.behaviors.escapeAdmin = {
- attach: function attach() {
- var toolbarEscape = once('escapeAdmin', '[data-toolbar-escape-admin]');
+ attach() {
+ const toolbarEscape = once('escapeAdmin', '[data-toolbar-escape-admin]');
if (toolbarEscape.length && pathInfo.currentPathIsAdmin) {
- var $toolbarEscape = $(toolbarEscape);
+ const $toolbarEscape = $(toolbarEscape);
if (escapeAdminPath !== null) {
$toolbarEscape.attr('href', escapeAdminPath);
@@ -28,5 +28,6 @@
}
}
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/models/ToolbarModel.js b/core/modules/toolbar/js/models/ToolbarModel.js
index 8bf91dafa26f6a89f07575ad753cbec9bc97ed32..379894e181e7507be4b1026670326da34bcaebfa 100644
--- a/core/modules/toolbar/js/models/ToolbarModel.js
+++ b/core/modules/toolbar/js/models/ToolbarModel.js
@@ -25,10 +25,12 @@
left: 0
}
},
- validate: function validate(attributes, options) {
+
+ validate(attributes, options) {
if (attributes.orientation === 'horizontal' && this.get('locked') && !options.override) {
return Drupal.t('The toolbar cannot be set to a horizontal orientation when it is locked.');
}
}
+
});
})(Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index 53e052ba6fb82853e1c92a71dd08f206bdde3e73..f6cae64f00a13cc61911ff7d790abbe91d100ab6 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -6,7 +6,7 @@
**/
(function ($, Drupal, drupalSettings) {
- var options = $.extend({
+ const options = $.extend({
breakpoints: {
'toolbar.narrow': '',
'toolbar.standard': '',
@@ -19,63 +19,63 @@
}
});
Drupal.behaviors.toolbar = {
- attach: function attach(context) {
+ attach(context) {
if (!window.matchMedia('only screen').matches) {
return;
}
- once('toolbar', '#toolbar-administration', context).forEach(function (toolbar) {
- var model = new Drupal.toolbar.ToolbarModel({
+ once('toolbar', '#toolbar-administration', context).forEach(toolbar => {
+ const model = new Drupal.toolbar.ToolbarModel({
locked: JSON.parse(localStorage.getItem('Drupal.toolbar.trayVerticalLocked')),
activeTab: document.getElementById(JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID'))),
height: $('#toolbar-administration').outerHeight()
});
Drupal.toolbar.models.toolbarModel = model;
- Object.keys(options.breakpoints).forEach(function (label) {
- var mq = options.breakpoints[label];
- var mql = window.matchMedia(mq);
+ Object.keys(options.breakpoints).forEach(label => {
+ const mq = options.breakpoints[label];
+ const mql = window.matchMedia(mq);
Drupal.toolbar.mql[label] = mql;
mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
Drupal.toolbar.mediaQueryChangeHandler.call(null, model, label, mql);
});
Drupal.toolbar.views.toolbarVisualView = new Drupal.toolbar.ToolbarVisualView({
el: toolbar,
- model: model,
+ model,
strings: options.strings
});
Drupal.toolbar.views.toolbarAuralView = new Drupal.toolbar.ToolbarAuralView({
el: toolbar,
- model: model,
+ model,
strings: options.strings
});
Drupal.toolbar.views.bodyVisualView = new Drupal.toolbar.BodyVisualView({
el: toolbar,
- model: model
+ model
});
model.trigger('change:isFixed', model, model.get('isFixed'));
model.trigger('change:activeTray', model, model.get('activeTray'));
- var menuModel = new Drupal.toolbar.MenuModel();
+ const menuModel = new Drupal.toolbar.MenuModel();
Drupal.toolbar.models.menuModel = menuModel;
Drupal.toolbar.views.menuVisualView = new Drupal.toolbar.MenuVisualView({
el: $(toolbar).find('.toolbar-menu-administration').get(0),
model: menuModel,
strings: options.strings
});
- Drupal.toolbar.setSubtrees.done(function (subtrees) {
+ Drupal.toolbar.setSubtrees.done(subtrees => {
menuModel.set('subtrees', subtrees);
- var theme = drupalSettings.ajaxPageState.theme;
- localStorage.setItem("Drupal.toolbar.subtrees.".concat(theme), JSON.stringify(subtrees));
+ const theme = drupalSettings.ajaxPageState.theme;
+ localStorage.setItem(`Drupal.toolbar.subtrees.${theme}`, JSON.stringify(subtrees));
model.set('areSubtreesLoaded', true);
});
Drupal.toolbar.views.toolbarVisualView.loadSubtrees();
- $(document).on('drupalViewportOffsetChange.toolbar', function (event, offsets) {
+ $(document).on('drupalViewportOffsetChange.toolbar', (event, offsets) => {
model.set('offsets', offsets);
});
- model.on('change:orientation', function (model, orientation) {
+ model.on('change:orientation', (model, orientation) => {
$(document).trigger('drupalToolbarOrientationChange', orientation);
- }).on('change:activeTab', function (model, tab) {
+ }).on('change:activeTab', (model, tab) => {
$(document).trigger('drupalToolbarTabChange', tab);
- }).on('change:activeTray', function (model, tray) {
+ }).on('change:activeTray', (model, tray) => {
$(document).trigger('drupalToolbarTrayChange', tray);
});
@@ -86,32 +86,34 @@
}
$(window).on({
- 'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
- var $toolbar = $('#toolbar-bar');
+ 'dialog:aftercreate': (event, dialog, $element, settings) => {
+ const $toolbar = $('#toolbar-bar');
$toolbar.css('margin-top', '0');
if (settings.drupalOffCanvasPosition === 'top') {
- var height = Drupal.offCanvas.getContainer($element).outerHeight();
- $toolbar.css('margin-top', "".concat(height, "px"));
- $element.on('dialogContentResize.off-canvas', function () {
- var newHeight = Drupal.offCanvas.getContainer($element).outerHeight();
- $toolbar.css('margin-top', "".concat(newHeight, "px"));
+ const height = Drupal.offCanvas.getContainer($element).outerHeight();
+ $toolbar.css('margin-top', `${height}px`);
+ $element.on('dialogContentResize.off-canvas', () => {
+ const newHeight = Drupal.offCanvas.getContainer($element).outerHeight();
+ $toolbar.css('margin-top', `${newHeight}px`);
});
}
},
- 'dialog:beforeclose': function dialogBeforeclose() {
+ 'dialog:beforeclose': () => {
$('#toolbar-bar').css('margin-top', '0');
}
});
});
}
+
};
Drupal.toolbar = {
views: {},
models: {},
mql: {},
setSubtrees: new $.Deferred(),
- mediaQueryChangeHandler: function mediaQueryChangeHandler(model, label, mql) {
+
+ mediaQueryChangeHandler(model, label, mql) {
switch (label) {
case 'toolbar.narrow':
model.set({
@@ -150,6 +152,7 @@
break;
}
}
+
};
Drupal.theme.toolbarOrientationToggle = function () {
diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js
index de4f8b596a0603433aa4eac1848bab31b1abab10..ca9031baf3567e82c45c6ced3f28739715fd152e 100644
--- a/core/modules/toolbar/js/toolbar.menu.js
+++ b/core/modules/toolbar/js/toolbar.menu.js
@@ -6,16 +6,16 @@
**/
(function ($, Drupal, drupalSettings) {
- var activeItem = Drupal.url(drupalSettings.path.currentPath);
+ let activeItem = Drupal.url(drupalSettings.path.currentPath);
$.fn.drupalToolbarMenu = function () {
- var ui = {
+ const ui = {
handleOpen: Drupal.t('Extend'),
handleClose: Drupal.t('Collapse')
};
function toggleList($item, switcher) {
- var $toggle = $item.children('.toolbar-box').children('.toolbar-handle');
+ const $toggle = $item.children('.toolbar-box').children('.toolbar-handle');
switcher = typeof switcher !== 'undefined' ? switcher : !$item.hasClass('open');
$item.toggleClass('open', switcher);
$toggle.toggleClass('open', switcher);
@@ -23,10 +23,10 @@
}
function toggleClickHandler(event) {
- var $toggle = $(event.target);
- var $item = $toggle.closest('li');
+ const $toggle = $(event.target);
+ const $item = $toggle.closest('li');
toggleList($item);
- var $openItems = $item.siblings().filter('.open');
+ const $openItems = $item.siblings().filter('.open');
toggleList($openItems, false);
}
@@ -39,17 +39,17 @@
}
function initItems($menu) {
- var options = {
+ const options = {
class: 'toolbar-icon toolbar-handle',
action: ui.handleOpen,
text: ''
};
$menu.find('li > a').wrap('<div class="toolbar-box">');
- $menu.find('li').each(function (index, element) {
- var $item = $(element);
+ $menu.find('li').each((index, element) => {
+ const $item = $(element);
if ($item.children('ul.toolbar-menu').length) {
- var $box = $item.children('.toolbar-box');
+ const $box = $item.children('.toolbar-box');
options.text = Drupal.t('@label', {
'@label': $box.find('a').text()
});
@@ -60,7 +60,7 @@
function markListLevels($lists, level) {
level = !level ? 1 : level;
- var $lis = $lists.children('li').addClass("level-".concat(level));
+ const $lis = $lists.children('li').addClass(`level-${level}`);
$lists = $lis.children('ul');
if ($lists.length) {
@@ -69,24 +69,24 @@
}
function openActiveItem($menu) {
- var pathItem = $menu.find("a[href=\"".concat(window.location.pathname, "\"]"));
+ const pathItem = $menu.find(`a[href="${window.location.pathname}"]`);
if (pathItem.length && !activeItem) {
activeItem = window.location.pathname;
}
if (activeItem) {
- var $activeItem = $menu.find("a[href=\"".concat(activeItem, "\"]")).addClass('menu-item--active');
- var $activeTrail = $activeItem.parentsUntil('.root', 'li').addClass('menu-item--active-trail');
+ const $activeItem = $menu.find(`a[href="${activeItem}"]`).addClass('menu-item--active');
+ const $activeTrail = $activeItem.parentsUntil('.root', 'li').addClass('menu-item--active-trail');
toggleList($activeTrail, true);
}
}
return this.each(function (selector) {
- var menu = once('toolbar-menu', this);
+ const menu = once('toolbar-menu', this);
if (menu.length) {
- var $menu = $(menu);
+ const $menu = $(menu);
$menu.on('click.toolbar', '.toolbar-box', toggleClickHandler).on('click.toolbar', '.toolbar-box a', linkClickHandler);
$menu.addClass('root');
initItems($menu);
@@ -97,6 +97,6 @@
};
Drupal.theme.toolbarMenuItemToggle = function (options) {
- return "<button class=\"".concat(options.class, "\"><span class=\"action\">").concat(options.action, "</span> <span class=\"label\">").concat(options.text, "</span></button>");
+ return `<button class="${options.class}"><span class="action">${options.action}</span> <span class="label">${options.text}</span></button>`;
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/views/BodyVisualView.js b/core/modules/toolbar/js/views/BodyVisualView.js
index 71293844fe39e09fd90f48396d5ee71f56e394ac..93b029d208f90b4cbde1ad0ef298ed4e3ba57424 100644
--- a/core/modules/toolbar/js/views/BodyVisualView.js
+++ b/core/modules/toolbar/js/views/BodyVisualView.js
@@ -7,16 +7,19 @@
(function ($, Drupal, Backbone) {
Drupal.toolbar.BodyVisualView = Backbone.View.extend({
- initialize: function initialize() {
+ initialize() {
this.listenTo(this.model, 'change:activeTray ', this.render);
this.listenTo(this.model, 'change:isFixed change:isViewportOverflowConstrained', this.isToolbarFixed);
},
- isToolbarFixed: function isToolbarFixed() {
- var isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained');
+
+ isToolbarFixed() {
+ const isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained');
$('body').toggleClass('toolbar-fixed', isViewportOverflowConstrained || this.model.get('isFixed'));
},
- render: function render() {
+
+ render() {
$('body').toggleClass('toolbar-tray-open', !!this.model.get('activeTray'));
}
+
});
})(jQuery, Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/views/MenuVisualView.js b/core/modules/toolbar/js/views/MenuVisualView.js
index 2cbd95067a39e65877b1780c8e77a1b57fe12459..1eb9aa21b5392c69956b80aa11a4ca3c5cec1c4e 100644
--- a/core/modules/toolbar/js/views/MenuVisualView.js
+++ b/core/modules/toolbar/js/views/MenuVisualView.js
@@ -7,20 +7,20 @@
(function ($, Backbone, Drupal) {
Drupal.toolbar.MenuVisualView = Backbone.View.extend({
- initialize: function initialize() {
+ initialize() {
this.listenTo(this.model, 'change:subtrees', this.render);
},
- render: function render() {
- var _this = this;
- var subtrees = this.model.get('subtrees');
- Object.keys(subtrees || {}).forEach(function (id) {
- $(once('toolbar-subtrees', _this.$el.find("#toolbar-link-".concat(id)))).after(subtrees[id]);
+ render() {
+ const subtrees = this.model.get('subtrees');
+ Object.keys(subtrees || {}).forEach(id => {
+ $(once('toolbar-subtrees', this.$el.find(`#toolbar-link-${id}`))).after(subtrees[id]);
});
if ('drupalToolbarMenu' in $.fn) {
this.$el.children('.toolbar-menu').drupalToolbarMenu();
}
}
+
});
})(jQuery, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/views/ToolbarAuralView.js b/core/modules/toolbar/js/views/ToolbarAuralView.js
index fae40f334b9ced6a1be1193634a58166ea2f5f09..5577eec4d5ba10a611607c32156be37c50a39ed2 100644
--- a/core/modules/toolbar/js/views/ToolbarAuralView.js
+++ b/core/modules/toolbar/js/views/ToolbarAuralView.js
@@ -7,26 +7,28 @@
(function (Backbone, Drupal) {
Drupal.toolbar.ToolbarAuralView = Backbone.View.extend({
- initialize: function initialize(options) {
+ initialize(options) {
this.strings = options.strings;
this.listenTo(this.model, 'change:orientation', this.onOrientationChange);
this.listenTo(this.model, 'change:activeTray', this.onActiveTrayChange);
},
- onOrientationChange: function onOrientationChange(model, orientation) {
+
+ onOrientationChange(model, orientation) {
Drupal.announce(Drupal.t('Tray orientation changed to @orientation.', {
'@orientation': orientation
}));
},
- onActiveTrayChange: function onActiveTrayChange(model, tray) {
- var relevantTray = tray === null ? model.previous('activeTray') : tray;
+
+ onActiveTrayChange(model, tray) {
+ const relevantTray = tray === null ? model.previous('activeTray') : tray;
if (!relevantTray) {
return;
}
- var action = tray === null ? Drupal.t('closed') : Drupal.t('opened');
- var trayNameElement = relevantTray.querySelector('.toolbar-tray-name');
- var text;
+ const action = tray === null ? Drupal.t('closed') : Drupal.t('opened');
+ const trayNameElement = relevantTray.querySelector('.toolbar-tray-name');
+ let text;
if (trayNameElement !== null) {
text = Drupal.t('Tray "@tray" @action.', {
@@ -41,5 +43,6 @@
Drupal.announce(text);
}
+
});
})(Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index 3d65693ca84b576e9271cfe0e4039c1463be1d6c..36b75a32dbbf7ae465411823e471f3c2afe1c356 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -7,8 +7,8 @@
(function ($, Drupal, drupalSettings, Backbone) {
Drupal.toolbar.ToolbarVisualView = Backbone.View.extend({
- events: function events() {
- var touchEndToClick = function touchEndToClick(event) {
+ events() {
+ const touchEndToClick = function (event) {
event.preventDefault();
event.target.click();
};
@@ -20,7 +20,8 @@
'touchend .toolbar-toggle-orientation button': touchEndToClick
};
},
- initialize: function initialize(options) {
+
+ initialize(options) {
this.strings = options.strings;
this.listenTo(this.model, 'change:activeTab change:orientation change:isOriented change:isTrayToggleVisible', this.render);
this.listenTo(this.model, 'change:mqMatches', this.onMediaQueryChange);
@@ -29,9 +30,10 @@
this.$el.find('.toolbar-tray .toolbar-lining').append(Drupal.theme('toolbarOrientationToggle'));
this.model.trigger('change:activeTab');
},
- updateToolbarHeight: function updateToolbarHeight() {
- var toolbarTabOuterHeight = $('#toolbar-bar').find('.toolbar-tab').outerHeight() || 0;
- var toolbarTrayHorizontalOuterHeight = $('.is-active.toolbar-tray-horizontal').outerHeight() || 0;
+
+ updateToolbarHeight() {
+ const toolbarTabOuterHeight = $('#toolbar-bar').find('.toolbar-tab').outerHeight() || 0;
+ const toolbarTrayHorizontalOuterHeight = $('.is-active.toolbar-tray-horizontal').outerHeight() || 0;
this.model.set('height', toolbarTabOuterHeight + toolbarTrayHorizontalOuterHeight);
$('body').css({
'padding-top': this.model.get('height')
@@ -41,12 +43,14 @@
});
this.triggerDisplace();
},
- triggerDisplace: function triggerDisplace() {
- _.defer(function () {
+
+ triggerDisplace() {
+ _.defer(() => {
Drupal.displace(true);
});
},
- render: function render() {
+
+ render() {
this.updateTabs();
this.updateTrayOrientation();
this.updateBarAttributes();
@@ -58,19 +62,21 @@
return this;
},
- onTabClick: function onTabClick(event) {
+
+ onTabClick(event) {
if (event.currentTarget.hasAttribute('data-toolbar-tray')) {
- var activeTab = this.model.get('activeTab');
- var clickedTab = event.currentTarget;
+ const activeTab = this.model.get('activeTab');
+ const clickedTab = event.currentTarget;
this.model.set('activeTab', !activeTab || clickedTab !== activeTab ? clickedTab : null);
event.preventDefault();
event.stopPropagation();
}
},
- onOrientationToggleClick: function onOrientationToggleClick(event) {
- var orientation = this.model.get('orientation');
- var antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
- var locked = antiOrientation === 'vertical';
+
+ onOrientationToggleClick(event) {
+ const orientation = this.model.get('orientation');
+ const antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
+ const locked = antiOrientation === 'vertical';
if (locked) {
localStorage.setItem('Drupal.toolbar.trayVerticalLocked', 'true');
@@ -79,7 +85,7 @@
}
this.model.set({
- locked: locked,
+ locked,
orientation: antiOrientation
}, {
validate: true,
@@ -88,21 +94,22 @@
event.preventDefault();
event.stopPropagation();
},
- updateTabs: function updateTabs() {
- var $tab = $(this.model.get('activeTab'));
+
+ updateTabs() {
+ const $tab = $(this.model.get('activeTab'));
$(this.model.previous('activeTab')).removeClass('is-active').prop('aria-pressed', false);
$(this.model.previous('activeTray')).removeClass('is-active');
if ($tab.length > 0) {
$tab.addClass('is-active').prop('aria-pressed', true);
- var name = $tab.attr('data-toolbar-tray');
- var id = $tab.get(0).id;
+ const name = $tab.attr('data-toolbar-tray');
+ const id = $tab.get(0).id;
if (id) {
localStorage.setItem('Drupal.toolbar.activeTabID', JSON.stringify(id));
}
- var $tray = this.$el.find("[data-toolbar-tray=\"".concat(name, "\"].toolbar-tray"));
+ const $tray = this.$el.find(`[data-toolbar-tray="${name}"].toolbar-tray`);
if ($tray.length) {
$tray.addClass('is-active');
@@ -115,8 +122,9 @@
localStorage.removeItem('Drupal.toolbar.activeTabID');
}
},
- updateBarAttributes: function updateBarAttributes() {
- var isOriented = this.model.get('isOriented');
+
+ updateBarAttributes() {
+ const isOriented = this.model.get('isOriented');
if (isOriented) {
this.$el.find('.toolbar-bar').attr('data-offset-top', '');
@@ -126,52 +134,56 @@
this.$el.toggleClass('toolbar-oriented', isOriented);
},
- updateTrayOrientation: function updateTrayOrientation() {
- var orientation = this.model.get('orientation');
- var antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
+
+ updateTrayOrientation() {
+ const orientation = this.model.get('orientation');
+ const antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
$('body').toggleClass('toolbar-vertical', orientation === 'vertical').toggleClass('toolbar-horizontal', orientation === 'horizontal');
- var removeClass = antiOrientation === 'horizontal' ? 'toolbar-tray-horizontal' : 'toolbar-tray-vertical';
- var $trays = this.$el.find('.toolbar-tray').removeClass(removeClass).addClass("toolbar-tray-".concat(orientation));
- var iconClass = "toolbar-icon-toggle-".concat(orientation);
- var iconAntiClass = "toolbar-icon-toggle-".concat(antiOrientation);
- var $orientationToggle = this.$el.find('.toolbar-toggle-orientation').toggle(this.model.get('isTrayToggleVisible'));
+ const removeClass = antiOrientation === 'horizontal' ? 'toolbar-tray-horizontal' : 'toolbar-tray-vertical';
+ const $trays = this.$el.find('.toolbar-tray').removeClass(removeClass).addClass(`toolbar-tray-${orientation}`);
+ const iconClass = `toolbar-icon-toggle-${orientation}`;
+ const iconAntiClass = `toolbar-icon-toggle-${antiOrientation}`;
+ const $orientationToggle = this.$el.find('.toolbar-toggle-orientation').toggle(this.model.get('isTrayToggleVisible'));
$orientationToggle.find('button').val(antiOrientation).attr('title', this.strings[antiOrientation]).text(this.strings[antiOrientation]).removeClass(iconClass).addClass(iconAntiClass);
- var dir = document.documentElement.dir;
- var edge = dir === 'rtl' ? 'right' : 'left';
+ const dir = document.documentElement.dir;
+ const edge = dir === 'rtl' ? 'right' : 'left';
$trays.removeAttr('data-offset-left data-offset-right data-offset-top');
- $trays.filter('.toolbar-tray-vertical.is-active').attr("data-offset-".concat(edge), '');
+ $trays.filter('.toolbar-tray-vertical.is-active').attr(`data-offset-${edge}`, '');
$trays.filter('.toolbar-tray-horizontal.is-active').attr('data-offset-top', '');
},
- adjustPlacement: function adjustPlacement() {
- var $trays = this.$el.find('.toolbar-tray');
+
+ adjustPlacement() {
+ const $trays = this.$el.find('.toolbar-tray');
if (!this.model.get('isOriented')) {
$trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
}
},
- loadSubtrees: function loadSubtrees() {
- var $activeTab = $(this.model.get('activeTab'));
- var orientation = this.model.get('orientation');
+
+ loadSubtrees() {
+ const $activeTab = $(this.model.get('activeTab'));
+ const orientation = this.model.get('orientation');
if (!this.model.get('areSubtreesLoaded') && typeof $activeTab.data('drupal-subtrees') !== 'undefined' && orientation === 'vertical') {
- var subtreesHash = drupalSettings.toolbar.subtreesHash;
- var theme = drupalSettings.ajaxPageState.theme;
- var endpoint = Drupal.url("toolbar/subtrees/".concat(subtreesHash));
- var cachedSubtreesHash = localStorage.getItem("Drupal.toolbar.subtreesHash.".concat(theme));
- var cachedSubtrees = JSON.parse(localStorage.getItem("Drupal.toolbar.subtrees.".concat(theme)));
- var isVertical = this.model.get('orientation') === 'vertical';
+ const subtreesHash = drupalSettings.toolbar.subtreesHash;
+ const theme = drupalSettings.ajaxPageState.theme;
+ const endpoint = Drupal.url(`toolbar/subtrees/${subtreesHash}`);
+ const cachedSubtreesHash = localStorage.getItem(`Drupal.toolbar.subtreesHash.${theme}`);
+ const cachedSubtrees = JSON.parse(localStorage.getItem(`Drupal.toolbar.subtrees.${theme}`));
+ const isVertical = this.model.get('orientation') === 'vertical';
if (isVertical && subtreesHash === cachedSubtreesHash && cachedSubtrees) {
Drupal.toolbar.setSubtrees.resolve(cachedSubtrees);
} else if (isVertical) {
- localStorage.removeItem("Drupal.toolbar.subtreesHash.".concat(theme));
- localStorage.removeItem("Drupal.toolbar.subtrees.".concat(theme));
+ localStorage.removeItem(`Drupal.toolbar.subtreesHash.${theme}`);
+ localStorage.removeItem(`Drupal.toolbar.subtrees.${theme}`);
Drupal.ajax({
url: endpoint
}).execute();
- localStorage.setItem("Drupal.toolbar.subtreesHash.".concat(theme), subtreesHash);
+ localStorage.setItem(`Drupal.toolbar.subtreesHash.${theme}`, subtreesHash);
}
}
}
+
});
})(jQuery, Drupal, drupalSettings, Backbone);
\ No newline at end of file
diff --git a/core/modules/tour/js/tour.js b/core/modules/tour/js/tour.js
index c9bf7798c5ed197dc5553cdc1563bd7215b76676..527b059eb27158a52d346dae1d80791c2018c80c 100644
--- a/core/modules/tour/js/tour.js
+++ b/core/modules/tour/js/tour.js
@@ -5,17 +5,17 @@
* @preserve
**/
-(function ($, Backbone, Drupal, settings, document, Shepherd) {
- var queryString = decodeURI(window.location.search);
+(($, Backbone, Drupal, settings, document, Shepherd) => {
+ const queryString = decodeURI(window.location.search);
Drupal.behaviors.tour = {
- attach: function attach(context) {
- once('tour', 'body').forEach(function () {
- var model = new Drupal.tour.models.StateModel();
+ attach(context) {
+ once('tour', 'body').forEach(() => {
+ const model = new Drupal.tour.models.StateModel();
new Drupal.tour.views.ToggleTourView({
el: $(context).find('#toolbar-tab-tour'),
- model: model
+ model
});
- model.on('change:isActive', function (tourModel, isActive) {
+ model.on('change:isActive', (tourModel, isActive) => {
$(document).trigger(isActive ? 'drupalTourStarted' : 'drupalTourStopped');
});
@@ -28,6 +28,7 @@
}
});
}
+
};
Drupal.tour = Drupal.tour || {
models: {},
@@ -44,67 +45,76 @@
events: {
click: 'onClick'
},
- initialize: function initialize() {
+
+ initialize() {
this.listenTo(this.model, 'change:tour change:isActive', this.render);
this.listenTo(this.model, 'change:isActive', this.toggleTour);
},
- render: function render() {
+
+ render() {
this.$el.toggleClass('hidden', this._getTour().length === 0);
- var isActive = this.model.get('isActive');
+ const isActive = this.model.get('isActive');
this.$el.find('button').toggleClass('is-active', isActive).attr('aria-pressed', isActive);
return this;
},
- toggleTour: function toggleTour() {
+
+ toggleTour() {
if (this.model.get('isActive')) {
this._removeIrrelevantTourItems(this._getTour());
- var tourItems = this.model.get('tour');
- var that = this;
+ const tourItems = this.model.get('tour');
+ const that = this;
if (tourItems.length) {
settings.tourShepherdConfig.defaultStepOptions.popperOptions.modifiers.push({
name: 'moveArrowJoyridePosition',
enabled: true,
phase: 'write',
- fn: function fn(_ref) {
- var state = _ref.state;
- var arrow = state.elements.arrow;
- var placement = state.placement;
+
+ fn({
+ state
+ }) {
+ const {
+ arrow
+ } = state.elements;
+ const {
+ placement
+ } = state;
if (arrow && /^top|bottom/.test(placement) && /-start|-end$/.test(placement)) {
- var horizontalPosition = placement.split('-')[1];
- var offset = horizontalPosition === 'start' ? 28 : state.elements.popper.clientWidth - 56;
- arrow.style.transform = "translate3d(".concat(offset, "px, 0px, 0px)");
+ const horizontalPosition = placement.split('-')[1];
+ const offset = horizontalPosition === 'start' ? 28 : state.elements.popper.clientWidth - 56;
+ arrow.style.transform = `translate3d(${offset}px, 0px, 0px)`;
}
}
+
});
- var shepherdTour = new Shepherd.Tour(settings.tourShepherdConfig);
- shepherdTour.on('cancel', function () {
+ const shepherdTour = new Shepherd.Tour(settings.tourShepherdConfig);
+ shepherdTour.on('cancel', () => {
that.model.set('isActive', false);
});
- shepherdTour.on('complete', function () {
+ shepherdTour.on('complete', () => {
that.model.set('isActive', false);
});
- tourItems.forEach(function (tourStepConfig, index) {
- var tourItemOptions = {
+ tourItems.forEach((tourStepConfig, index) => {
+ const tourItemOptions = {
title: tourStepConfig.title ? Drupal.checkPlain(tourStepConfig.title) : null,
- text: function text() {
- return Drupal.theme('tourItemContent', tourStepConfig);
- },
+ text: () => Drupal.theme('tourItemContent', tourStepConfig),
attachTo: tourStepConfig.attachTo,
buttons: [Drupal.tour.nextButton(shepherdTour, tourStepConfig)],
classes: tourStepConfig.classes,
- index: index
+ index
};
tourItemOptions.when = {
- show: function show() {
- var nextButton = shepherdTour.currentStep.el.querySelector('footer button');
+ show() {
+ const nextButton = shepherdTour.currentStep.el.querySelector('footer button');
nextButton.focus();
if (Drupal.tour.hasOwnProperty('convertToJoyrideMarkup')) {
Drupal.tour.convertToJoyrideMarkup(shepherdTour);
}
}
+
};
shepherdTour.addStep(tourItemOptions);
});
@@ -122,17 +132,20 @@
});
}
},
- onClick: function onClick(event) {
+
+ onClick(event) {
this.model.set('isActive', !this.model.get('isActive'));
event.preventDefault();
event.stopPropagation();
},
- _getTour: function _getTour() {
+
+ _getTour() {
return this.model.get('tour');
},
- _removeIrrelevantTourItems: function _removeIrrelevantTourItems(tourItems) {
- var tips = /tips=([^&]+)/.exec(queryString);
- var filteredTour = tourItems.filter(function (tourItem) {
+
+ _removeIrrelevantTourItems(tourItems) {
+ const tips = /tips=([^&]+)/.exec(queryString);
+ const filteredTour = tourItems.filter(tourItem => {
if (tips && tourItem.hasOwnProperty('classes') && tourItem.classes.indexOf(tips[1]) === -1) {
return false;
}
@@ -141,7 +154,7 @@
});
if (tourItems.length !== filteredTour.length) {
- filteredTour.forEach(function (filteredTourItem, filteredTourItemId) {
+ filteredTour.forEach((filteredTourItem, filteredTourItemId) => {
filteredTour[filteredTourItemId].counter = Drupal.t('!tour_item of !total', {
'!tour_item': filteredTourItemId + 1,
'!total': filteredTour.length
@@ -154,9 +167,10 @@
this.model.set('tour', filteredTour);
}
}
+
});
- Drupal.tour.nextButton = function (shepherdTour, tourStepConfig) {
+ Drupal.tour.nextButton = (shepherdTour, tourStepConfig) => {
return {
classes: 'button button--primary',
text: tourStepConfig.cancelText ? tourStepConfig.cancelText : Drupal.t('Next'),
@@ -164,7 +178,5 @@
};
};
- Drupal.theme.tourItemContent = function (tourStepConfig) {
- return "".concat(tourStepConfig.body, "<div class=\"tour-progress\">").concat(tourStepConfig.counter, "</div>");
- };
+ Drupal.theme.tourItemContent = tourStepConfig => `${tourStepConfig.body}<div class="tour-progress">${tourStepConfig.counter}</div>`;
})(jQuery, Backbone, Drupal, drupalSettings, document, window.Shepherd);
\ No newline at end of file
diff --git a/core/modules/tracker/js/tracker-history.js b/core/modules/tracker/js/tracker-history.js
index 74ac7330242f2630c6368fa77e6497a88f099e70..520fec26f60f09126b48cca5be40f68f79e616f0 100644
--- a/core/modules/tracker/js/tracker-history.js
+++ b/core/modules/tracker/js/tracker-history.js
@@ -7,32 +7,32 @@
(function ($, Drupal, window) {
function processNodeNewIndicators(placeholders) {
- var newNodeString = Drupal.t('new');
- var updatedNodeString = Drupal.t('updated');
- placeholders.forEach(function (placeholder) {
- var timestamp = parseInt(placeholder.getAttribute('data-history-node-timestamp'), 10);
- var nodeID = placeholder.getAttribute('data-history-node-id');
- var lastViewTimestamp = Drupal.history.getLastRead(nodeID);
+ const newNodeString = Drupal.t('new');
+ const updatedNodeString = Drupal.t('updated');
+ placeholders.forEach(placeholder => {
+ const timestamp = parseInt(placeholder.getAttribute('data-history-node-timestamp'), 10);
+ const nodeID = placeholder.getAttribute('data-history-node-id');
+ const lastViewTimestamp = Drupal.history.getLastRead(nodeID);
if (timestamp > lastViewTimestamp) {
- var message = lastViewTimestamp === 0 ? newNodeString : updatedNodeString;
- $(placeholder).append("<span class=\"marker\">".concat(message, "</span>"));
+ const message = lastViewTimestamp === 0 ? newNodeString : updatedNodeString;
+ $(placeholder).append(`<span class="marker">${message}</span>`);
}
});
}
function processNewRepliesIndicators(placeholders) {
- var placeholdersToUpdate = {};
- placeholders.forEach(function (placeholder) {
- var timestamp = parseInt(placeholder.getAttribute('data-history-node-last-comment-timestamp'), 10);
- var nodeID = placeholder.previousSibling.previousSibling.getAttribute('data-history-node-id');
- var lastViewTimestamp = Drupal.history.getLastRead(nodeID);
+ const placeholdersToUpdate = {};
+ placeholders.forEach(placeholder => {
+ const timestamp = parseInt(placeholder.getAttribute('data-history-node-last-comment-timestamp'), 10);
+ const nodeID = placeholder.previousSibling.previousSibling.getAttribute('data-history-node-id');
+ const lastViewTimestamp = Drupal.history.getLastRead(nodeID);
if (timestamp > lastViewTimestamp) {
placeholdersToUpdate[nodeID] = placeholder;
}
});
- var nodeIDs = Object.keys(placeholdersToUpdate);
+ const nodeIDs = Object.keys(placeholdersToUpdate);
if (nodeIDs.length === 0) {
return;
@@ -45,24 +45,26 @@
'node_ids[]': nodeIDs
},
dataType: 'json',
- success: function success(results) {
- Object.keys(results || {}).forEach(function (nodeID) {
+
+ success(results) {
+ Object.keys(results || {}).forEach(nodeID => {
if (placeholdersToUpdate.hasOwnProperty(nodeID)) {
- var url = results[nodeID].first_new_comment_link;
- var text = Drupal.formatPlural(results[nodeID].new_comment_count, '1 new', '@count new');
- $(placeholdersToUpdate[nodeID]).append("<br /><a href=\"".concat(url, "\">").concat(text, "</a>"));
+ const url = results[nodeID].first_new_comment_link;
+ const text = Drupal.formatPlural(results[nodeID].new_comment_count, '1 new', '@count new');
+ $(placeholdersToUpdate[nodeID]).append(`<br /><a href="${url}">${text}</a>`);
}
});
}
+
});
}
Drupal.behaviors.trackerHistory = {
- attach: function attach(context) {
- var nodeIDs = [];
- var nodeNewPlaceholders = once('history', '[data-history-node-timestamp]', context).filter(function (placeholder) {
- var nodeTimestamp = parseInt(placeholder.getAttribute('data-history-node-timestamp'), 10);
- var nodeID = placeholder.getAttribute('data-history-node-id');
+ attach(context) {
+ const nodeIDs = [];
+ const nodeNewPlaceholders = once('history', '[data-history-node-timestamp]', context).filter(placeholder => {
+ const nodeTimestamp = parseInt(placeholder.getAttribute('data-history-node-timestamp'), 10);
+ const nodeID = placeholder.getAttribute('data-history-node-id');
if (Drupal.history.needsServerCheck(nodeID, nodeTimestamp)) {
nodeIDs.push(nodeID);
@@ -71,15 +73,15 @@
return false;
});
- var newRepliesPlaceholders = once('history', '[data-history-node-last-comment-timestamp]', context).filter(function (placeholder) {
- var lastCommentTimestamp = parseInt(placeholder.getAttribute('data-history-node-last-comment-timestamp'), 10);
- var nodeTimestamp = parseInt(placeholder.previousSibling.previousSibling.getAttribute('data-history-node-timestamp'), 10);
+ const newRepliesPlaceholders = once('history', '[data-history-node-last-comment-timestamp]', context).filter(placeholder => {
+ const lastCommentTimestamp = parseInt(placeholder.getAttribute('data-history-node-last-comment-timestamp'), 10);
+ const nodeTimestamp = parseInt(placeholder.previousSibling.previousSibling.getAttribute('data-history-node-timestamp'), 10);
if (lastCommentTimestamp === nodeTimestamp) {
return false;
}
- var nodeID = placeholder.previousSibling.previousSibling.getAttribute('data-history-node-id');
+ const nodeID = placeholder.previousSibling.previousSibling.getAttribute('data-history-node-id');
if (Drupal.history.needsServerCheck(nodeID, lastCommentTimestamp)) {
if (nodeIDs.indexOf(nodeID) === -1) {
@@ -96,10 +98,11 @@
return;
}
- Drupal.history.fetchTimestamps(nodeIDs, function () {
+ Drupal.history.fetchTimestamps(nodeIDs, () => {
processNodeNewIndicators(nodeNewPlaceholders);
processNewRepliesIndicators(newRepliesPlaceholders);
});
}
+
};
})(jQuery, Drupal, window);
\ No newline at end of file
diff --git a/core/modules/user/tests/themes/password_theme_function_test/js/password-theme-functions.js b/core/modules/user/tests/themes/password_theme_function_test/js/password-theme-functions.js
index 06c0108577a42e34aa3c38cc13206b5e2782152c..1dd89e30762163ffd1ec9b673d1730598677c705 100644
--- a/core/modules/user/tests/themes/password_theme_function_test/js/password-theme-functions.js
+++ b/core/modules/user/tests/themes/password_theme_function_test/js/password-theme-functions.js
@@ -5,29 +5,38 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.passwordStrength = function (_ref) {
- var strengthTitle = _ref.strengthTitle;
- var strengthIndicator = '<span>Overridden passwordStrength:</span><div class="password-strength__indicator js-password-strength__indicator the-prior-class-is-deprecated" data-drupal-selector="a-distinct-absence-of-password-strength-indicator"></div>';
- var strengthText = '<span class="password-strength__text js-password-strength__text the-prior-class-is-deprecated" data-drupal-selector="a-distinct-absence-of-password-strength-text"></span>';
- return "\n <div class=\"password-strength\">\n <div class=\"password-strength__meter\" data-drupal-selector=\"password-strength-meter\">".concat(strengthIndicator, "</div>\n <div aria-live=\"polite\" aria-atomic=\"true\" class=\"password-strength__title\">").concat(strengthTitle, " ").concat(strengthText, "</div>\n </div>\n ");
+(Drupal => {
+ Drupal.theme.passwordStrength = ({
+ strengthTitle
+ }) => {
+ const strengthIndicator = '<span>Overridden passwordStrength:</span><div class="password-strength__indicator js-password-strength__indicator the-prior-class-is-deprecated" data-drupal-selector="a-distinct-absence-of-password-strength-indicator"></div>';
+ const strengthText = '<span class="password-strength__text js-password-strength__text the-prior-class-is-deprecated" data-drupal-selector="a-distinct-absence-of-password-strength-text"></span>';
+ return `
+ <div class="password-strength">
+ <div class="password-strength__meter" data-drupal-selector="password-strength-meter">${strengthIndicator}</div>
+ <div aria-live="polite" aria-atomic="true" class="password-strength__title">${strengthTitle} ${strengthText}</div>
+ </div>
+ `;
};
- Drupal.theme.passwordSuggestions = function (_ref2, tips) {
- var hasWeaknesses = _ref2.hasWeaknesses;
- return "<div class=\"password-suggestions\">Overridden passwordSuggestions: ".concat(tips.length ? "".concat(hasWeaknesses, "<ul><li>").concat(tips.join('</li><li>'), "</li></ul>") : '', "</div>");
- };
+ Drupal.theme.passwordSuggestions = ({
+ hasWeaknesses
+ }, tips) => `<div class="password-suggestions">Overridden passwordSuggestions: ${tips.length ? `${hasWeaknesses}<ul><li>${tips.join('</li><li>')}</li></ul>` : ''}</div>`;
- Drupal.theme.passwordConfirmMessage = function (_ref3) {
- var confirmTitle = _ref3.confirmTitle;
- var confirmTextWrapper = '<span>Overridden passwordConfirmMessage:</span><span data-drupal-selector="a-distinct-absence-of-password-match-status-text"></span>';
- return "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"password-confirm-message\" data-drupal-selector=\"password-confirm-message\">".concat(confirmTitle, " ").concat(confirmTextWrapper, "</div>");
+ Drupal.theme.passwordConfirmMessage = ({
+ confirmTitle
+ }) => {
+ const confirmTextWrapper = '<span>Overridden passwordConfirmMessage:</span><span data-drupal-selector="a-distinct-absence-of-password-match-status-text"></span>';
+ return `<div aria-live="polite" aria-atomic="true" class="password-confirm-message" data-drupal-selector="password-confirm-message">${confirmTitle} ${confirmTextWrapper}</div>`;
};
Drupal.behaviors.passwordThemeFunctionTest = {
- attach: function attach(context, settings) {
- var strength = Drupal.evaluatePasswordStrength('password', settings.password);
- var message = strength.message;
+ attach(context, settings) {
+ const strength = Drupal.evaluatePasswordStrength('password', settings.password);
+ const {
+ message
+ } = strength;
}
+
};
})(Drupal);
\ No newline at end of file
diff --git a/core/modules/user/user.js b/core/modules/user/user.js
index 5e55522cf0a574e2335b7b0c7f1f9040b85aef62..75b7ad64bdafca786c7a0665146c60a6a90d668f 100644
--- a/core/modules/user/user.js
+++ b/core/modules/user/user.js
@@ -5,7 +5,7 @@
* @preserve
**/
-(function ($, Drupal) {
+(($, Drupal) => {
Drupal.user = {
password: {
css: {
@@ -25,15 +25,15 @@
}
};
Drupal.behaviors.password = {
- attach: function attach(context, settings) {
- var cssClasses = Drupal.user.password.css;
- once('password', 'input.js-password-field', context).forEach(function (value) {
- var $mainInput = $(value);
- var $mainInputParent = $mainInput.parent().addClass(cssClasses.passwordParent);
- var $passwordWidget = $mainInput.closest('.js-form-type-password-confirm');
- var $confirmInput = $passwordWidget.find('input.js-password-confirm');
- var $passwordConfirmMessage = $(Drupal.theme('passwordConfirmMessage', settings.password));
- var $passwordMatchStatus = $passwordConfirmMessage.find('[data-drupal-selector="password-match-status-text"]').first();
+ attach(context, settings) {
+ const cssClasses = Drupal.user.password.css;
+ once('password', 'input.js-password-field', context).forEach(value => {
+ const $mainInput = $(value);
+ const $mainInputParent = $mainInput.parent().addClass(cssClasses.passwordParent);
+ const $passwordWidget = $mainInput.closest('.js-form-type-password-confirm');
+ const $confirmInput = $passwordWidget.find('input.js-password-confirm');
+ const $passwordConfirmMessage = $(Drupal.theme('passwordConfirmMessage', settings.password));
+ let $passwordMatchStatus = $passwordConfirmMessage.find('[data-drupal-selector="password-match-status-text"]').first();
if ($passwordMatchStatus.length === 0) {
$passwordMatchStatus = $passwordConfirmMessage.find('span').first();
@@ -42,14 +42,14 @@
});
}
- var $confirmInputParent = $confirmInput.parent().addClass('confirm-parent').append($passwordConfirmMessage);
- var passwordStrengthBarClassesToRemove = [cssClasses.passwordWeak || '', cssClasses.passwordFair || '', cssClasses.passwordGood || '', cssClasses.passwordStrong || ''].join(' ').trim();
- var confirmTextWrapperClassesToRemove = [cssClasses.passwordsMatch || '', cssClasses.passwordsNotMatch || ''].join(' ').trim();
- var widgetClassesToRemove = [cssClasses.widgetInitial || '', cssClasses.passwordEmpty || '', cssClasses.passwordFilled || '', cssClasses.confirmEmpty || '', cssClasses.confirmFilled || ''].join(' ').trim();
- var password = {};
+ const $confirmInputParent = $confirmInput.parent().addClass('confirm-parent').append($passwordConfirmMessage);
+ const passwordStrengthBarClassesToRemove = [cssClasses.passwordWeak || '', cssClasses.passwordFair || '', cssClasses.passwordGood || '', cssClasses.passwordStrong || ''].join(' ').trim();
+ const confirmTextWrapperClassesToRemove = [cssClasses.passwordsMatch || '', cssClasses.passwordsNotMatch || ''].join(' ').trim();
+ const widgetClassesToRemove = [cssClasses.widgetInitial || '', cssClasses.passwordEmpty || '', cssClasses.passwordFilled || '', cssClasses.confirmEmpty || '', cssClasses.confirmFilled || ''].join(' ').trim();
+ const password = {};
if (settings.password.showStrengthIndicator) {
- var $passwordStrength = $(Drupal.theme('passwordStrength', settings.password));
+ const $passwordStrength = $(Drupal.theme('passwordStrength', settings.password));
password.$strengthBar = $passwordStrength.find('[data-drupal-selector="password-strength-indicator"]').first();
if (password.$strengthBar.length === 0) {
@@ -74,14 +74,14 @@
$confirmInputParent.after(password.$suggestions);
}
- var addWidgetClasses = function addWidgetClasses() {
+ const addWidgetClasses = () => {
$passwordWidget.addClass($mainInput.val() ? cssClasses.passwordFilled : cssClasses.passwordEmpty).addClass($confirmInput.val() ? cssClasses.confirmFilled : cssClasses.confirmEmpty);
};
- var passwordCheckMatch = function passwordCheckMatch(confirmInputVal) {
- var passwordsAreMatching = $mainInput.val() === confirmInputVal;
- var confirmClass = passwordsAreMatching ? cssClasses.passwordsMatch : cssClasses.passwordsNotMatch;
- var confirmMessage = passwordsAreMatching ? settings.password.confirmSuccess : settings.password.confirmFailure;
+ const passwordCheckMatch = confirmInputVal => {
+ const passwordsAreMatching = $mainInput.val() === confirmInputVal;
+ const confirmClass = passwordsAreMatching ? cssClasses.passwordsMatch : cssClasses.passwordsNotMatch;
+ const confirmMessage = passwordsAreMatching ? settings.password.confirmSuccess : settings.password.confirmFailure;
if (!$passwordMatchStatus.hasClass(confirmClass) || !$passwordMatchStatus.html() === confirmMessage) {
if (confirmTextWrapperClassesToRemove) {
@@ -92,10 +92,10 @@
}
};
- var passwordCheck = function passwordCheck() {
+ const passwordCheck = () => {
if (settings.password.showStrengthIndicator) {
- var result = Drupal.evaluatePasswordStrength($mainInput.val(), settings.password);
- var $currentPasswordSuggestions = $(Drupal.theme('passwordSuggestions', settings.password, result.messageTips));
+ const result = Drupal.evaluatePasswordStrength($mainInput.val(), settings.password);
+ const $currentPasswordSuggestions = $(Drupal.theme('passwordSuggestions', settings.password, result.messageTips));
if (password.$suggestions.html() !== $currentPasswordSuggestions.html()) {
password.$suggestions.replaceWith($currentPasswordSuggestions);
@@ -106,7 +106,7 @@
password.$strengthBar.removeClass(passwordStrengthBarClassesToRemove);
}
- password.$strengthBar.css('width', "".concat(result.strength, "%")).addClass(result.indicatorClass);
+ password.$strengthBar.css('width', `${result.strength}%`).addClass(result.indicatorClass);
password.$strengthTextWrapper.html(result.indicatorText);
}
@@ -135,21 +135,22 @@
$confirmInput.on('input', passwordCheck);
});
}
+
};
- Drupal.evaluatePasswordStrength = function (password, passwordSettings) {
+ Drupal.evaluatePasswordStrength = (password, passwordSettings) => {
password = password.trim();
- var indicatorText;
- var indicatorClass;
- var weaknesses = 0;
- var strength = 100;
- var msg = [];
- var hasLowercase = /[a-z]/.test(password);
- var hasUppercase = /[A-Z]/.test(password);
- var hasNumbers = /[0-9]/.test(password);
- var hasPunctuation = /[^a-zA-Z0-9]/.test(password);
- var $usernameBox = $('input.username');
- var username = $usernameBox.length > 0 ? $usernameBox.val() : passwordSettings.username;
+ let indicatorText;
+ let indicatorClass;
+ let weaknesses = 0;
+ let strength = 100;
+ let msg = [];
+ const hasLowercase = /[a-z]/.test(password);
+ const hasUppercase = /[A-Z]/.test(password);
+ const hasNumbers = /[0-9]/.test(password);
+ const hasPunctuation = /[^a-zA-Z0-9]/.test(password);
+ const $usernameBox = $('input.username');
+ const username = $usernameBox.length > 0 ? $usernameBox.val() : passwordSettings.username;
if (password.length < 12) {
msg.push(passwordSettings.tooShort);
@@ -196,7 +197,7 @@
strength = 5;
}
- var cssClasses = Drupal.user.password.css;
+ const cssClasses = Drupal.user.password.css;
if (strength < 60) {
indicatorText = passwordSettings.weak;
@@ -212,15 +213,15 @@
indicatorClass = cssClasses.passwordStrong;
}
- var messageTips = msg;
- msg = "".concat(passwordSettings.hasWeaknesses, "<ul><li>").concat(msg.join('</li><li>'), "</li></ul>");
+ const messageTips = msg;
+ msg = `${passwordSettings.hasWeaknesses}<ul><li>${msg.join('</li><li>')}</li></ul>`;
return Drupal.deprecatedProperty({
target: {
- strength: strength,
+ strength,
message: msg,
- indicatorText: indicatorText,
- indicatorClass: indicatorClass,
- messageTips: messageTips
+ indicatorText,
+ indicatorClass,
+ messageTips
},
deprecatedProperty: 'message',
message: 'The message property is deprecated in drupal:9.1.0 and is removed from drupal:10.0.0. The markup should be constructed using messageTips property and Drupal.theme.passwordSuggestions. See https://www.drupal.org/node/3130352'
diff --git a/core/modules/user/user.permissions.js b/core/modules/user/user.permissions.js
index e6d4ea4691a5f7988f0209574b9df9f8dca10e28..0188fab28731255e713af5f488ba8bd06d612b73 100644
--- a/core/modules/user/user.permissions.js
+++ b/core/modules/user/user.permissions.js
@@ -7,13 +7,11 @@
(function ($, Drupal) {
Drupal.behaviors.permissions = {
- attach: function attach(context) {
- var _this = this;
-
- once('permissions', 'table#permissions').forEach(function (table) {
- var $table = $(table);
- var $ancestor;
- var method;
+ attach(context) {
+ once('permissions', 'table#permissions').forEach(table => {
+ const $table = $(table);
+ let $ancestor;
+ let method;
if ($table.prev().length) {
$ancestor = $table.prev();
@@ -24,15 +22,16 @@
}
$table.detach();
- var $dummy = $(Drupal.theme('checkbox')).removeClass('form-checkbox').addClass('dummy-checkbox js-dummy-checkbox').attr('disabled', 'disabled').attr('checked', 'checked').attr('title', Drupal.t('This permission is inherited from the authenticated user role.')).hide();
+ const $dummy = $(Drupal.theme('checkbox')).removeClass('form-checkbox').addClass('dummy-checkbox js-dummy-checkbox').attr('disabled', 'disabled').attr('checked', 'checked').attr('title', Drupal.t('This permission is inherited from the authenticated user role.')).hide();
$table.find('input[type="checkbox"]').not('.js-rid-anonymous, .js-rid-authenticated').addClass('real-checkbox js-real-checkbox').after($dummy);
- $table.find('input[type=checkbox].js-rid-authenticated').on('click.permissions', _this.toggle).each(_this.toggle);
+ $table.find('input[type=checkbox].js-rid-authenticated').on('click.permissions', this.toggle).each(this.toggle);
$ancestor[method]($table);
});
},
- toggle: function toggle() {
- var authCheckbox = this;
- var $row = $(this).closest('tr');
+
+ toggle() {
+ const authCheckbox = this;
+ const $row = $(this).closest('tr');
$row.find('.js-real-checkbox').each(function () {
this.style.display = authCheckbox.checked ? 'none' : '';
});
@@ -40,5 +39,6 @@
this.style.display = authCheckbox.checked ? '' : 'none';
});
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/user/user.theme.js b/core/modules/user/user.theme.js
index 2a3ae1eeafd27835273651e570f43e715e4b98d5..00084d7dfb46e7c6746b787777434c1ced7e8ba5 100644
--- a/core/modules/user/user.theme.js
+++ b/core/modules/user/user.theme.js
@@ -5,22 +5,28 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.passwordConfirmMessage = function (_ref) {
- var confirmTitle = _ref.confirmTitle;
- var confirmTextWrapper = '<span data-drupal-selector="password-match-status-text"></span>';
- return "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"password-confirm-message\" data-drupal-selector=\"password-confirm-message\">".concat(confirmTitle, " ").concat(confirmTextWrapper, "</div>");
+(Drupal => {
+ Drupal.theme.passwordConfirmMessage = ({
+ confirmTitle
+ }) => {
+ const confirmTextWrapper = '<span data-drupal-selector="password-match-status-text"></span>';
+ return `<div aria-live="polite" aria-atomic="true" class="password-confirm-message" data-drupal-selector="password-confirm-message">${confirmTitle} ${confirmTextWrapper}</div>`;
};
- Drupal.theme.passwordStrength = function (_ref2) {
- var strengthTitle = _ref2.strengthTitle;
- var strengthIndicator = '<div class="password-strength__indicator" data-drupal-selector="password-strength-indicator"></div>';
- var strengthText = '<span class="password-strength__text" data-drupal-selector="password-strength-text"></span>';
- return "\n <div class=\"password-strength\">\n <div class=\"password-strength__meter\" data-drupal-selector=\"password-strength-meter\">".concat(strengthIndicator, "</div>\n <div aria-live=\"polite\" aria-atomic=\"true\" class=\"password-strength__title\">").concat(strengthTitle, " ").concat(strengthText, "</div>\n </div>\n ");
+ Drupal.theme.passwordStrength = ({
+ strengthTitle
+ }) => {
+ const strengthIndicator = '<div class="password-strength__indicator" data-drupal-selector="password-strength-indicator"></div>';
+ const strengthText = '<span class="password-strength__text" data-drupal-selector="password-strength-text"></span>';
+ return `
+ <div class="password-strength">
+ <div class="password-strength__meter" data-drupal-selector="password-strength-meter">${strengthIndicator}</div>
+ <div aria-live="polite" aria-atomic="true" class="password-strength__title">${strengthTitle} ${strengthText}</div>
+ </div>
+ `;
};
- Drupal.theme.passwordSuggestions = function (_ref3, tips) {
- var hasWeaknesses = _ref3.hasWeaknesses;
- return "<div class=\"password-suggestions\">".concat(tips.length ? "".concat(hasWeaknesses, "<ul><li>").concat(tips.join('</li><li>'), "</li></ul>") : '', "</div>");
- };
+ Drupal.theme.passwordSuggestions = ({
+ hasWeaknesses
+ }, tips) => `<div class="password-suggestions">${tips.length ? `${hasWeaknesses}<ul><li>${tips.join('</li><li>')}</li></ul>` : ''}</div>`;
})(Drupal);
\ No newline at end of file
diff --git a/core/modules/views/js/ajax_view.js b/core/modules/views/js/ajax_view.js
index 225836f4f8b8d7612891b41347801c94a95f2ec4..6589f202459ed1fc1cef957839e9d54ff03f767b 100644
--- a/core/modules/views/js/ajax_view.js
+++ b/core/modules/views/js/ajax_view.js
@@ -10,19 +10,27 @@
Drupal.behaviors.ViewsAjaxView.attach = function (context, settings) {
if (settings && settings.views && settings.views.ajaxViews) {
- var ajaxViews = settings.views.ajaxViews;
- Object.keys(ajaxViews || {}).forEach(function (i) {
+ const {
+ views: {
+ ajaxViews
+ }
+ } = settings;
+ Object.keys(ajaxViews || {}).forEach(i => {
Drupal.views.instances[i] = new Drupal.views.ajaxView(ajaxViews[i]);
});
}
};
- Drupal.behaviors.ViewsAjaxView.detach = function (context, settings, trigger) {
+ Drupal.behaviors.ViewsAjaxView.detach = (context, settings, trigger) => {
if (trigger === 'unload') {
if (settings && settings.views && settings.views.ajaxViews) {
- var ajaxViews = settings.views.ajaxViews;
- Object.keys(ajaxViews || {}).forEach(function (i) {
- var selector = ".js-view-dom-id-".concat(ajaxViews[i].view_dom_id);
+ const {
+ views: {
+ ajaxViews
+ }
+ } = settings;
+ Object.keys(ajaxViews || {}).forEach(i => {
+ const selector = `.js-view-dom-id-${ajaxViews[i].view_dom_id}`;
if ($(selector, context).length) {
delete Drupal.views.instances[i];
@@ -37,15 +45,15 @@
Drupal.views.instances = {};
Drupal.views.ajaxView = function (settings) {
- var selector = ".js-view-dom-id-".concat(settings.view_dom_id);
+ const selector = `.js-view-dom-id-${settings.view_dom_id}`;
this.$view = $(selector);
- var ajaxPath = drupalSettings.views.ajax_path;
+ let ajaxPath = drupalSettings.views.ajax_path;
if (ajaxPath.constructor.toString().indexOf('Array') !== -1) {
ajaxPath = ajaxPath[0];
}
- var queryString = window.location.search || '';
+ let queryString = window.location.search || '';
if (queryString !== '') {
queryString = queryString.slice(1).replace(/q=[^&]+&?|&?render=[^&]+/, '');
@@ -60,16 +68,16 @@
submit: settings,
setClick: true,
event: 'click',
- selector: selector,
+ selector,
progress: {
type: 'fullscreen'
}
};
this.settings = settings;
- this.$exposed_form = $("form#views-exposed-form-".concat(settings.view_name.replace(/_/g, '-'), "-").concat(settings.view_display_id.replace(/_/g, '-')));
+ this.$exposed_form = $(`form#views-exposed-form-${settings.view_name.replace(/_/g, '-')}-${settings.view_display_id.replace(/_/g, '-')}`);
once('exposed-form', this.$exposed_form).forEach($.proxy(this.attachExposedFormAjax, this));
once('ajax-pager', this.$view.filter($.proxy(this.filterNestedViews, this))).forEach($.proxy(this.attachPagerAjax, this));
- var selfSettings = $.extend({}, this.element_settings, {
+ const selfSettings = $.extend({}, this.element_settings, {
event: 'RefreshView',
base: this.selector,
element: this.$view.get(0)
@@ -78,10 +86,10 @@
};
Drupal.views.ajaxView.prototype.attachExposedFormAjax = function () {
- var that = this;
+ const that = this;
this.exposedFormAjax = [];
$('input[type=submit], button[type=submit], input[type=image]', this.$exposed_form).not('[data-drupal-selector=edit-reset]').each(function (index) {
- var selfSettings = $.extend({}, that.element_settings, {
+ const selfSettings = $.extend({}, that.element_settings, {
base: $(this).attr('id'),
element: this
});
@@ -98,11 +106,11 @@
};
Drupal.views.ajaxView.prototype.attachPagerLinkAjax = function (id, link) {
- var $link = $(link);
- var viewData = {};
- var href = $link.attr('href');
+ const $link = $(link);
+ const viewData = {};
+ const href = $link.attr('href');
$.extend(viewData, this.settings, Drupal.Views.parseQueryString(href), Drupal.Views.parseViewArgs(href, this.settings.view_base_path));
- var selfSettings = $.extend({}, this.element_settings, {
+ const selfSettings = $.extend({}, this.element_settings, {
submit: viewData,
base: false,
element: link
@@ -111,8 +119,8 @@
};
Drupal.AjaxCommands.prototype.viewsScrollTop = function (ajax, response) {
- var offset = $(response.selector).offset();
- var scrollTarget = response.selector;
+ const offset = $(response.selector).offset();
+ let scrollTarget = response.selector;
while ($(scrollTarget).scrollTop() === 0 && $(scrollTarget).parent()) {
scrollTarget = $(scrollTarget).parent();
diff --git a/core/modules/views/js/base.js b/core/modules/views/js/base.js
index 4f434ecc7f1bcdbff989540bc205826fb217a0ce..7a4076be62fca11d60ea47dfa13877551b1f87bd 100644
--- a/core/modules/views/js/base.js
+++ b/core/modules/views/js/base.js
@@ -9,17 +9,17 @@
Drupal.Views = {};
Drupal.Views.parseQueryString = function (query) {
- var args = {};
- var pos = query.indexOf('?');
+ const args = {};
+ const pos = query.indexOf('?');
if (pos !== -1) {
query = query.substring(pos + 1);
}
- var pair;
- var pairs = query.split('&');
+ let pair;
+ const pairs = query.split('&');
- for (var i = 0; i < pairs.length; i++) {
+ for (let i = 0; i < pairs.length; i++) {
pair = pairs[i].split('=');
if (pair[0] !== 'q' && pair[1]) {
@@ -31,11 +31,11 @@
};
Drupal.Views.parseViewArgs = function (href, viewPath) {
- var returnObj = {};
- var path = Drupal.Views.getPath(href);
- var viewHref = Drupal.url(viewPath).substring(drupalSettings.path.baseUrl.length);
+ const returnObj = {};
+ const path = Drupal.Views.getPath(href);
+ const viewHref = Drupal.url(viewPath).substring(drupalSettings.path.baseUrl.length);
- if (viewHref && path.substring(0, viewHref.length + 1) === "".concat(viewHref, "/")) {
+ if (viewHref && path.substring(0, viewHref.length + 1) === `${viewHref}/`) {
returnObj.view_args = decodeURIComponent(path.substring(viewHref.length + 1, path.length));
returnObj.view_path = path;
}
@@ -44,7 +44,7 @@
};
Drupal.Views.pathPortion = function (href) {
- var protocol = window.location.protocol;
+ const protocol = window.location.protocol;
if (href.substring(0, protocol.length) === protocol) {
href = href.substring(href.indexOf('/', protocol.length + 2));
@@ -61,9 +61,9 @@
href = href.substring(3, href.length);
}
- var chars = ['#', '?', '&'];
+ const chars = ['#', '?', '&'];
- for (var i = 0; i < chars.length; i++) {
+ for (let i = 0; i < chars.length; i++) {
if (href.indexOf(chars[i]) > -1) {
href = href.substr(0, href.indexOf(chars[i]));
}
diff --git a/core/modules/views_ui/js/ajax.js b/core/modules/views_ui/js/ajax.js
index 8de29e68202352bbe85364013da0f6c51b728432..6a5df0c8f61f1671166f9e9bbd5e99808c0b7a23 100644
--- a/core/modules/views_ui/js/ajax.js
+++ b/core/modules/views_ui/js/ajax.js
@@ -12,20 +12,20 @@
};
Drupal.AjaxCommands.prototype.viewsSetForm = function (ajax, response, status) {
- var $form = $('.js-views-ui-dialog form');
- var $submitButtons = $(once('views-ajax-submit', $form.find('input[type=submit].js-form-submit, button.js-form-submit')));
+ const $form = $('.js-views-ui-dialog form');
+ const $submitButtons = $(once('views-ajax-submit', $form.find('input[type=submit].js-form-submit, button.js-form-submit')));
$submitButtons.on('click mousedown', function () {
this.form.clk = this;
});
- once('views-ajax-submit', $form).forEach(function (form) {
- var $form = $(form);
- var elementSettings = {
+ once('views-ajax-submit', $form).forEach(form => {
+ const $form = $(form);
+ const elementSettings = {
url: response.url,
event: 'submit',
base: $form.attr('id'),
element: form
};
- var ajaxForm = Drupal.ajax(elementSettings);
+ const ajaxForm = Drupal.ajax(elementSettings);
ajaxForm.$form = $form;
});
};
@@ -45,11 +45,11 @@
};
Drupal.AjaxCommands.prototype.viewsReplaceTitle = function (ajax, response, status) {
- var doc = document;
- var oldTitle = doc.title;
- var escapedSiteName = response.siteName.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
- var re = new RegExp(".+ (.) ".concat(escapedSiteName));
- doc.title = oldTitle.replace(re, "".concat(response.title, " $1 ").concat(response.siteName));
+ const doc = document;
+ const oldTitle = doc.title;
+ const escapedSiteName = response.siteName.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+ const re = new RegExp(`.+ (.) ${escapedSiteName}`);
+ doc.title = oldTitle.replace(re, `${response.title} $1 ${response.siteName}`);
$('h1.page-title').text(response.title);
};
@@ -58,35 +58,38 @@
};
Drupal.behaviors.livePreview = {
- attach: function attach(context) {
+ attach(context) {
$(once('views-ajax', 'input#edit-displays-live-preview', context)).on('click', function () {
if ($(this).is(':checked')) {
$('#preview-submit').trigger('click');
}
});
}
+
};
Drupal.behaviors.syncPreviewDisplay = {
- attach: function attach(context) {
+ attach(context) {
$(once('views-ajax', '#views-tabset a')).on('click', function () {
- var href = $(this).attr('href');
- var displayId = href.substr(11);
+ const href = $(this).attr('href');
+ const displayId = href.substr(11);
$('#views-live-preview #preview-display-id').val(displayId);
});
}
+
};
Drupal.behaviors.viewsAjax = {
collapseReplaced: false,
- attach: function attach(context, settings) {
- var baseElementSettings = {
+
+ attach(context, settings) {
+ const baseElementSettings = {
event: 'click',
progress: {
type: 'fullscreen'
}
};
- once('views-ajax', 'a.views-ajax-link', context).forEach(function (link) {
- var $link = $(link);
- var elementSettings = baseElementSettings;
+ once('views-ajax', 'a.views-ajax-link', context).forEach(link => {
+ const $link = $(link);
+ const elementSettings = baseElementSettings;
elementSettings.base = $link.attr('id');
elementSettings.element = link;
@@ -96,14 +99,14 @@
Drupal.ajax(elementSettings);
});
- once('views-ajax', 'div#views-live-preview a').forEach(function (link) {
- var $link = $(link);
+ once('views-ajax', 'div#views-live-preview a').forEach(link => {
+ const $link = $(link);
if (!$link.attr('href')) {
return true;
}
- var elementSettings = baseElementSettings;
+ const elementSettings = baseElementSettings;
elementSettings.url = $link.attr('href');
if (Drupal.Views.getPath(elementSettings.url).substring(0, 21) !== 'admin/structure/views') {
@@ -116,13 +119,13 @@
elementSettings.element = link;
Drupal.ajax(elementSettings);
});
- once('views-ajax', 'div#views-live-preview input[type=submit]').forEach(function (submit) {
- var $submit = $(submit);
+ once('views-ajax', 'div#views-live-preview input[type=submit]').forEach(submit => {
+ const $submit = $(submit);
$submit.on('click', function () {
this.form.clk = this;
return true;
});
- var elementSettings = baseElementSettings;
+ const elementSettings = baseElementSettings;
elementSettings.url = $(submit.form).attr('action');
if (Drupal.Views.getPath(elementSettings.url).substring(0, 21) !== 'admin/structure/views') {
@@ -137,5 +140,6 @@
Drupal.ajax(elementSettings);
});
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/views_ui/js/dialog.views.js b/core/modules/views_ui/js/dialog.views.js
index 625f4798aca260d28728bc0fa1275238fdf6e5d1..45dee992c15dfdd65dc8520faa855e402aa9e33b 100644
--- a/core/modules/views_ui/js/dialog.views.js
+++ b/core/modules/views_ui/js/dialog.views.js
@@ -7,11 +7,11 @@
(function ($, Drupal, drupalSettings) {
function handleDialogResize(e) {
- var $modal = $(e.currentTarget);
- var $viewsOverride = $modal.find('[data-drupal-views-offset]');
- var $scroll = $modal.find('[data-drupal-views-scroll]');
- var offset = 0;
- var modalHeight;
+ const $modal = $(e.currentTarget);
+ const $viewsOverride = $modal.find('[data-drupal-views-offset]');
+ const $scroll = $modal.find('[data-drupal-views-scroll]');
+ let offset = 0;
+ let modalHeight;
if ($scroll.length) {
$modal.closest('.views-ui-dialog').addClass('views-ui-dialog-scroll');
@@ -23,7 +23,7 @@
$viewsOverride.each(function () {
offset += $(this).outerHeight();
});
- var scrollOffset = $scroll.outerHeight() - $scroll.height();
+ const scrollOffset = $scroll.outerHeight() - $scroll.height();
$scroll.height(modalHeight - offset - scrollOffset);
$modal.css('overflow', 'hidden');
$scroll.css('overflow', 'auto');
@@ -31,16 +31,18 @@
}
Drupal.behaviors.viewsModalContent = {
- attach: function attach(context) {
+ attach(context) {
$(once('viewsDialog', 'body')).on('dialogContentResize.viewsDialog', '.ui-dialog-content', handleDialogResize);
- $(once('detailsUpdate', '.scroll', context)).on('click', 'summary', function (e) {
+ $(once('detailsUpdate', '.scroll', context)).on('click', 'summary', e => {
$(e.currentTarget).trigger('dialogContentResize');
});
},
- detach: function detach(context, settings, trigger) {
+
+ detach(context, settings, trigger) {
if (trigger === 'unload') {
$(once.remove('viewsDialog', 'body')).off('.viewsDialog');
}
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js
index ef21d748a0ff79456ef369a50de083649726508f..cfced1787a687624b77bcc4e0b1f500dbc1e9a83 100644
--- a/core/modules/views_ui/js/views-admin.js
+++ b/core/modules/views_ui/js/views-admin.js
@@ -8,19 +8,20 @@
(function ($, Drupal, drupalSettings) {
Drupal.viewsUi = {};
Drupal.behaviors.viewsUiEditView = {
- attach: function attach() {
- $('[data-drupal-selector="edit-query-options-disable-sql-rewrite"]').on('click', function () {
+ attach() {
+ $('[data-drupal-selector="edit-query-options-disable-sql-rewrite"]').on('click', () => {
$('.sql-rewrite-warning').toggleClass('js-hide');
});
}
+
};
Drupal.behaviors.viewsUiAddView = {
- attach: function attach(context) {
- var $context = $(context);
- var exclude = new RegExp('[^a-z0-9\\-]+', 'g');
- var replace = '-';
- var suffix;
- var $fields = $context.find('[id^="edit-page-title"], [id^="edit-block-title"], [id^="edit-page-link-properties-title"]');
+ attach(context) {
+ const $context = $(context);
+ const exclude = new RegExp('[^a-z0-9\\-]+', 'g');
+ const replace = '-';
+ let suffix;
+ const $fields = $context.find('[id^="edit-page-title"], [id^="edit-block-title"], [id^="edit-page-link-properties-title"]');
if ($fields.length) {
if (!this.fieldsFiller) {
@@ -30,7 +31,7 @@
}
}
- var $pathField = $context.find('[id^="edit-page-path"]');
+ const $pathField = $context.find('[id^="edit-page-path"]');
if ($pathField.length) {
if (!this.pathFiller) {
@@ -40,7 +41,7 @@
}
}
- var $feedField = $context.find('[id^="edit-page-feed-properties-path"]');
+ const $feedField = $context.find('[id^="edit-page-feed-properties-path"]');
if ($feedField.length) {
if (!this.feedFiller) {
@@ -51,6 +52,7 @@
}
}
}
+
};
Drupal.viewsUi.FormFieldFiller = function ($target, exclude, replace, suffix) {
@@ -59,7 +61,7 @@
this.exclude = exclude || false;
this.replace = replace || '';
this.suffix = suffix || '';
- var self = this;
+ const self = this;
this.populate = function () {
return self._populate.call(self);
@@ -73,13 +75,14 @@
};
$.extend(Drupal.viewsUi.FormFieldFiller.prototype, {
- bind: function bind() {
+ bind() {
this.unbind();
this.source.on('keyup.viewsUi change.viewsUi', this.populate);
this.target.on('focus.viewsUi', this.unbind);
},
- getTransliterated: function getTransliterated() {
- var from = this.source.val();
+
+ getTransliterated() {
+ let from = this.source.val();
if (this.exclude) {
from = from.toLowerCase().replace(this.exclude, this.replace);
@@ -87,27 +90,31 @@
return from;
},
- _populate: function _populate() {
- var transliterated = this.getTransliterated();
- var suffix = this.suffix;
+
+ _populate() {
+ const transliterated = this.getTransliterated();
+ const suffix = this.suffix;
this.target.each(function (i) {
- var maxlength = $(this).attr('maxlength') - suffix.length;
+ const maxlength = $(this).attr('maxlength') - suffix.length;
$(this).val(transliterated.substr(0, maxlength) + suffix);
});
},
- _unbind: function _unbind() {
+
+ _unbind() {
this.source.off('keyup.viewsUi change.viewsUi', this.populate);
this.target.off('focus.viewsUi', this.unbind);
},
- rebind: function rebind($fields) {
+
+ rebind($fields) {
this.target = $fields;
this.bind();
}
+
});
Drupal.behaviors.addItemForm = {
- attach: function attach(context) {
- var $context = $(context);
- var $form = $context;
+ attach(context) {
+ const $context = $(context);
+ let $form = $context;
if (!$context.is('form[id^="views-ui-add-handler-form"]')) {
$form = $context.find('form[id^="views-ui-add-handler-form"]');
@@ -117,6 +124,7 @@
new Drupal.viewsUi.AddItemForm($form);
}
}
+
};
Drupal.viewsUi.AddItemForm = function ($form) {
@@ -128,16 +136,16 @@
};
Drupal.viewsUi.AddItemForm.prototype.handleCheck = function (event) {
- var $target = $(event.target);
- var label = $target.closest('td').next().html().trim();
+ const $target = $(event.target);
+ const label = $target.closest('td').next().html().trim();
if ($target.is(':checked')) {
this.$selected_div.show().css('display', 'block');
this.checkedItems.push(label);
} else {
- var position = $.inArray(label, this.checkedItems);
+ const position = $.inArray(label, this.checkedItems);
- for (var i = 0; i < this.checkedItems.length; i++) {
+ for (let i = 0; i < this.checkedItems.length; i++) {
if (i === position) {
this.checkedItems.splice(i, 1);
i--;
@@ -158,19 +166,19 @@
};
Drupal.behaviors.viewsUiRenderAddViewButton = {
- attach: function attach(context) {
- var menu = once('views-ui-render-add-view-button', '#views-display-menu-tabs', context);
+ attach(context) {
+ const menu = once('views-ui-render-add-view-button', '#views-display-menu-tabs', context);
if (!menu.length) {
return;
}
- var $menu = $(menu);
- var $addDisplayDropdown = $("<li class=\"add\"><a href=\"#\"><span class=\"icon add\"></span>".concat(Drupal.t('Add'), "</a><ul class=\"action-list\" style=\"display:none;\"></ul></li>"));
- var $displayButtons = $menu.nextAll('input.add-display').detach();
+ const $menu = $(menu);
+ const $addDisplayDropdown = $(`<li class="add"><a href="#"><span class="icon add"></span>${Drupal.t('Add')}</a><ul class="action-list" style="display:none;"></ul></li>`);
+ const $displayButtons = $menu.nextAll('input.add-display').detach();
$displayButtons.appendTo($addDisplayDropdown.find('.action-list')).wrap('<li>').parent().eq(0).addClass('first').end().eq(-1).addClass('last');
$displayButtons.each(function () {
- var label = $(this).val();
+ const label = $(this).val();
if (label.substr(0, 4) === 'Add ') {
$(this).val(label.substr(4));
@@ -179,18 +187,19 @@
$addDisplayDropdown.appendTo($menu);
$menu.find('li.add > a').on('click', function (event) {
event.preventDefault();
- var $trigger = $(this);
+ const $trigger = $(this);
Drupal.behaviors.viewsUiRenderAddViewButton.toggleMenu($trigger);
});
$('li.add', $menu).on('mouseleave', function (event) {
- var $this = $(this);
- var $trigger = $this.children('a[href="#"]');
+ const $this = $(this);
+ const $trigger = $this.children('a[href="#"]');
if ($this.children('.action-list').is(':visible')) {
Drupal.behaviors.viewsUiRenderAddViewButton.toggleMenu($trigger);
}
});
}
+
};
Drupal.behaviors.viewsUiRenderAddViewButton.toggleMenu = function ($trigger) {
@@ -199,9 +208,9 @@
};
Drupal.behaviors.viewsUiSearchOptions = {
- attach: function attach(context) {
- var $context = $(context);
- var $form = $context;
+ attach(context) {
+ const $context = $(context);
+ let $form = $context;
if (!$context.is('form[id^="views-ui-add-handler-form"]')) {
$form = $context.find('form[id^="views-ui-add-handler-form"]');
@@ -211,21 +220,22 @@
new Drupal.viewsUi.OptionsSearch($form);
}
}
+
};
Drupal.viewsUi.OptionsSearch = function ($form) {
this.$form = $form;
- this.$form.on('click', 'td.title', function (event) {
- var $target = $(event.currentTarget);
+ this.$form.on('click', 'td.title', event => {
+ const $target = $(event.currentTarget);
$target.closest('tr').find('input').trigger('click');
});
- var searchBoxSelector = '[data-drupal-selector="edit-override-controls-options-search"]';
- var controlGroupSelector = '[data-drupal-selector="edit-override-controls-group"]';
- this.$form.on('formUpdated', "".concat(searchBoxSelector, ",").concat(controlGroupSelector), $.proxy(this.handleFilter, this));
+ const searchBoxSelector = '[data-drupal-selector="edit-override-controls-options-search"]';
+ const controlGroupSelector = '[data-drupal-selector="edit-override-controls-group"]';
+ this.$form.on('formUpdated', `${searchBoxSelector},${controlGroupSelector}`, $.proxy(this.handleFilter, this));
this.$searchBox = this.$form.find(searchBoxSelector);
this.$controlGroup = this.$form.find(controlGroupSelector);
this.options = this.getOptions(this.$form.find('.filterable-option'));
- this.$searchBox.on('keypress', function (event) {
+ this.$searchBox.on('keypress', event => {
if (event.which === 13) {
event.preventDefault();
}
@@ -233,35 +243,36 @@
};
$.extend(Drupal.viewsUi.OptionsSearch.prototype, {
- getOptions: function getOptions($allOptions) {
- var $title;
- var $description;
- var $option;
- var options = [];
- var length = $allOptions.length;
-
- for (var i = 0; i < length; i++) {
+ getOptions($allOptions) {
+ let $title;
+ let $description;
+ let $option;
+ const options = [];
+ const length = $allOptions.length;
+
+ for (let i = 0; i < length; i++) {
$option = $($allOptions[i]);
$title = $option.find('.title');
$description = $option.find('.description');
options[i] = {
- searchText: "".concat($title.text().toLowerCase(), " ").concat($description.text().toLowerCase()),
+ searchText: `${$title.text().toLowerCase()} ${$description.text().toLowerCase()}`,
$div: $option
};
}
return options;
},
- handleFilter: function handleFilter(event) {
- var search = this.$searchBox.val().toLowerCase();
- var words = search.split(' ');
- var group = this.$controlGroup.val();
- this.options.forEach(function (option) {
+
+ handleFilter(event) {
+ const search = this.$searchBox.val().toLowerCase();
+ const words = search.split(' ');
+ const group = this.$controlGroup.val();
+ this.options.forEach(option => {
function hasWord(word) {
return option.searchText.indexOf(word) !== -1;
}
- var found = true;
+ let found = true;
if (search) {
found = words.every(hasWord);
@@ -275,16 +286,17 @@
});
$(event.target).trigger('dialogContentResize');
}
+
});
Drupal.behaviors.viewsUiPreview = {
- attach: function attach(context) {
- var $contextualFiltersBucket = $(context).find('.views-display-column .views-ui-display-tab-bucket.argument');
+ attach(context) {
+ const $contextualFiltersBucket = $(context).find('.views-display-column .views-ui-display-tab-bucket.argument');
if ($contextualFiltersBucket.length === 0) {
return;
}
- var $contextualFilters = $contextualFiltersBucket.find('.views-display-setting a');
+ const $contextualFilters = $contextualFiltersBucket.find('.views-display-setting a');
if ($contextualFilters.length) {
$('#preview-args').parent().show();
@@ -296,6 +308,7 @@
$(once('edit-displays-live-preview', '#preview-submit')).trigger('click');
}
}
+
};
Drupal.viewsUi.RearrangeFilterHandler = function ($table, $operator) {
@@ -319,31 +332,34 @@
};
$.extend(Drupal.viewsUi.RearrangeFilterHandler.prototype, {
- insertAddRemoveFilterGroupLinks: function insertAddRemoveFilterGroupLinks() {
- $(once('views-rearrange-filter-handler', $("<ul class=\"action-links\"><li><a id=\"views-add-group-link\" href=\"#\">".concat(this.addGroupButton.val(), "</a></li></ul>")).prependTo(this.table.parent()))).find('#views-add-group-link').on('click.views-rearrange-filter-handler', $.proxy(this, 'clickAddGroupButton'));
- var length = this.removeGroupButtons.length;
- var i;
+ insertAddRemoveFilterGroupLinks() {
+ $(once('views-rearrange-filter-handler', $(`<ul class="action-links"><li><a id="views-add-group-link" href="#">${this.addGroupButton.val()}</a></li></ul>`).prependTo(this.table.parent()))).find('#views-add-group-link').on('click.views-rearrange-filter-handler', $.proxy(this, 'clickAddGroupButton'));
+ const length = this.removeGroupButtons.length;
+ let i;
for (i = 0; i < length; i++) {
- var $removeGroupButton = $(this.removeGroupButtons[i]);
- var buttonId = $removeGroupButton.attr('id');
- $(once('views-rearrange-filter-handler', $("<a href=\"#\" class=\"views-remove-group-link\">".concat(Drupal.t('Remove group'), "</a>")).insertBefore($removeGroupButton))).on('click.views-rearrange-filter-handler', {
- buttonId: buttonId
+ const $removeGroupButton = $(this.removeGroupButtons[i]);
+ const buttonId = $removeGroupButton.attr('id');
+ $(once('views-rearrange-filter-handler', $(`<a href="#" class="views-remove-group-link">${Drupal.t('Remove group')}</a>`).insertBefore($removeGroupButton))).on('click.views-rearrange-filter-handler', {
+ buttonId
}, $.proxy(this, 'clickRemoveGroupButton'));
}
},
- clickAddGroupButton: function clickAddGroupButton(event) {
+
+ clickAddGroupButton(event) {
this.addGroupButton.trigger('mousedown');
event.preventDefault();
},
- clickRemoveGroupButton: function clickRemoveGroupButton(event) {
- this.table.find("#".concat(event.data.buttonId)).trigger('mousedown');
+
+ clickRemoveGroupButton(event) {
+ this.table.find(`#${event.data.buttonId}`).trigger('mousedown');
event.preventDefault();
},
- duplicateGroupsOperator: function duplicateGroupsOperator() {
- var newRow;
- var titleRow;
- var titleRows = once('duplicateGroupsOperator', 'tr.views-group-title');
+
+ duplicateGroupsOperator() {
+ let newRow;
+ let titleRow;
+ const titleRows = once('duplicateGroupsOperator', 'tr.views-group-title');
if (!titleRows.length) {
return this.operator;
@@ -351,16 +367,16 @@
this.operator.find('label').add('div.description').addClass('visually-hidden');
this.operator.find('select').addClass('form-select');
- var dropdowns = this.operator;
+ const dropdowns = this.operator;
titleRow = $('tr#views-group-title-2');
newRow = $('<tr class="filter-group-operator-row"><td colspan="5"></td></tr>');
newRow.find('td').append(this.operator);
newRow.insertBefore(titleRow);
- var length = titleRows.length;
+ const length = titleRows.length;
- for (var i = 2; i < length; i++) {
+ for (let i = 2; i < length; i++) {
titleRow = $(titleRows[i]);
- var fakeOperator = this.operator.clone();
+ const fakeOperator = this.operator.clone();
fakeOperator.attr('id', '');
newRow = $('<tr class="filter-group-operator-row"><td colspan="5"></td></tr>');
newRow.find('td').append(fakeOperator);
@@ -370,29 +386,32 @@
return dropdowns;
},
- syncGroupsOperators: function syncGroupsOperators() {
+
+ syncGroupsOperators() {
if (this.dropdowns.length < 2) {
return;
}
this.dropdowns.on('change', $.proxy(this, 'operatorChangeHandler'));
},
- operatorChangeHandler: function operatorChangeHandler(event) {
- var $target = $(event.target);
- var operators = this.dropdowns.find('select').not($target);
+
+ operatorChangeHandler(event) {
+ const $target = $(event.target);
+ const operators = this.dropdowns.find('select').not($target);
operators.val($target.val());
},
- modifyTableDrag: function modifyTableDrag() {
- var tableDrag = Drupal.tableDrag['views-rearrange-filters'];
- var filterHandler = this;
+
+ modifyTableDrag() {
+ const tableDrag = Drupal.tableDrag['views-rearrange-filters'];
+ const filterHandler = this;
tableDrag.row.prototype.onSwap = function () {
if (filterHandler.hasGroupOperator) {
- var thisRow = $(this.group);
- var previousRow = thisRow.prev('tr');
+ const thisRow = $(this.group);
+ const previousRow = thisRow.prev('tr');
if (previousRow.length && !previousRow.hasClass('group-message') && !previousRow.hasClass('draggable')) {
- var next = thisRow.next();
+ const next = thisRow.next();
if (next.is('tr')) {
this.swap('after', next);
@@ -406,37 +425,38 @@
};
tableDrag.onDrop = function () {
- var changeMarker = $(this.oldRowElement).find('.tabledrag-changed');
+ const changeMarker = $(this.oldRowElement).find('.tabledrag-changed');
if (changeMarker.length) {
- var operatorLabel = changeMarker.prevAll('.views-operator-label');
+ const operatorLabel = changeMarker.prevAll('.views-operator-label');
if (operatorLabel.length) {
operatorLabel.insertAfter(changeMarker);
}
}
- var groupRow = $(this.rowObject.element).prevAll('tr.group-message').get(0);
- var groupName = groupRow.className.replace(/([^ ]+[ ]+)*group-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
- var groupField = $('select.views-group-select', this.rowObject.element);
+ const groupRow = $(this.rowObject.element).prevAll('tr.group-message').get(0);
+ const groupName = groupRow.className.replace(/([^ ]+[ ]+)*group-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
+ const groupField = $('select.views-group-select', this.rowObject.element);
- if (!groupField.is(".views-group-select-".concat(groupName))) {
- var oldGroupName = groupField.attr('class').replace(/([^ ]+[ ]+)*views-group-select-([^ ]+)([ ]+[^ ]+)*/, '$2');
- groupField.removeClass("views-group-select-".concat(oldGroupName)).addClass("views-group-select-".concat(groupName));
+ if (!groupField.is(`.views-group-select-${groupName}`)) {
+ const oldGroupName = groupField.attr('class').replace(/([^ ]+[ ]+)*views-group-select-([^ ]+)([ ]+[^ ]+)*/, '$2');
+ groupField.removeClass(`views-group-select-${oldGroupName}`).addClass(`views-group-select-${groupName}`);
groupField.val(groupName);
}
};
},
- redrawOperatorLabels: function redrawOperatorLabels() {
- for (var i = 0; i < this.draggableRows.length; i++) {
- var $draggableRow = $(this.draggableRows[i]);
- var $firstCell = $draggableRow.find('td').eq(0);
+
+ redrawOperatorLabels() {
+ for (let i = 0; i < this.draggableRows.length; i++) {
+ const $draggableRow = $(this.draggableRows[i]);
+ const $firstCell = $draggableRow.find('td').eq(0);
if ($firstCell.length) {
- var operatorValue = $draggableRow.prevAll('.views-group-title').find('option:selected').html();
- var operatorLabel = "<span class=\"views-operator-label\">".concat(operatorValue, "</span>");
- var $nextRow = $draggableRow.nextAll(':visible').eq(0);
- var $existingOperatorLabel = $firstCell.find('.views-operator-label');
+ const operatorValue = $draggableRow.prevAll('.views-group-title').find('option:selected').html();
+ const operatorLabel = `<span class="views-operator-label">${operatorValue}</span>`;
+ const $nextRow = $draggableRow.nextAll(':visible').eq(0);
+ const $existingOperatorLabel = $firstCell.find('.views-operator-label');
if ($nextRow.hasClass('draggable')) {
if ($existingOperatorLabel.length) {
@@ -450,15 +470,16 @@
}
}
},
- updateRowspans: function updateRowspans() {
- var $row;
- var $currentEmptyRow;
- var draggableCount;
- var $operatorCell;
- var rows = $(this.table).find('tr');
- var length = rows.length;
-
- for (var i = 0; i < length; i++) {
+
+ updateRowspans() {
+ let $row;
+ let $currentEmptyRow;
+ let draggableCount;
+ let $operatorCell;
+ const rows = $(this.table).find('tr');
+ const length = rows.length;
+
+ for (let i = 0; i < length; i++) {
$row = $(rows[i]);
if ($row.hasClass('views-group-title')) {
@@ -474,15 +495,16 @@
}
}
}
+
});
Drupal.behaviors.viewsFilterConfigSelectAll = {
- attach: function attach(context) {
- var selectAll = once('filterConfigSelectAll', '.js-form-item-options-value-all', context);
+ attach(context) {
+ const selectAll = once('filterConfigSelectAll', '.js-form-item-options-value-all', context);
if (selectAll.length) {
- var $selectAll = $(selectAll);
- var $selectAllCheckbox = $selectAll.find('input[type=checkbox]');
- var $checkboxes = $selectAll.closest('.form-checkboxes').find('.js-form-type-checkbox:not(.js-form-item-options-value-all) input[type="checkbox"]');
+ const $selectAll = $(selectAll);
+ const $selectAllCheckbox = $selectAll.find('input[type=checkbox]');
+ const $checkboxes = $selectAll.closest('.form-checkboxes').find('.js-form-type-checkbox:not(.js-form-item-options-value-all) input[type="checkbox"]');
$selectAll.show();
$selectAllCheckbox.on('click', function () {
$checkboxes.prop('checked', $(this).is(':checked'));
@@ -494,22 +516,23 @@
});
}
}
+
};
Drupal.behaviors.viewsRemoveIconClass = {
- attach: function attach(context) {
+ attach(context) {
$(once('dropbutton-icon', '.dropbutton', context)).find('.icon').removeClass('icon');
}
+
};
Drupal.behaviors.viewsUiCheckboxify = {
- attach: function attach(context, settings) {
- var buttons = once('views-ui-checkboxify', '[data-drupal-selector="edit-options-expose-button-button"], [data-drupal-selector="edit-options-group-button-button"]').forEach(function (button) {
- return new Drupal.viewsUi.Checkboxifier(button);
- });
+ attach(context, settings) {
+ const buttons = once('views-ui-checkboxify', '[data-drupal-selector="edit-options-expose-button-button"], [data-drupal-selector="edit-options-group-button-button"]').forEach(button => new Drupal.viewsUi.Checkboxifier(button));
}
+
};
Drupal.behaviors.viewsUiChangeDefaultWidget = {
- attach: function attach(context) {
- var $context = $(context);
+ attach(context) {
+ const $context = $(context);
function changeDefaultWidget(event) {
if ($(event.target).prop('checked')) {
@@ -525,6 +548,7 @@
$context.find('input[name="options[group_info][multiple]"]').on('change', changeDefaultWidget).trigger('change');
}
+
};
Drupal.viewsUi.Checkboxifier = function (button) {
@@ -541,17 +565,17 @@
};
Drupal.behaviors.viewsUiOverrideSelect = {
- attach: function attach(context) {
- once('views-ui-override-button-text', '[data-drupal-selector="edit-override-dropdown"]', context).forEach(function (dropdown) {
- var $context = $(context);
- var $submit = $context.find('[id^=edit-submit]');
- var oldValue = $submit.val();
+ attach(context) {
+ once('views-ui-override-button-text', '[data-drupal-selector="edit-override-dropdown"]', context).forEach(dropdown => {
+ const $context = $(context);
+ const $submit = $context.find('[id^=edit-submit]');
+ const oldValue = $submit.val();
$(once('views-ui-override-button-text', $submit)).on('mouseup', function () {
$(this).val(oldValue);
return true;
});
$(dropdown).on('change', function () {
- var $this = $(this);
+ const $this = $(this);
if ($this.val() === 'default') {
$submit.val(Drupal.t('Apply (all displays)'));
@@ -561,41 +585,44 @@
$submit.val(Drupal.t('Apply (this display)'));
}
- var $dialog = $context.closest('.ui-dialog-content');
+ const $dialog = $context.closest('.ui-dialog-content');
$dialog.trigger('dialogButtonsChange');
}).trigger('change');
});
}
+
};
Drupal.behaviors.viewsUiHandlerRemoveLink = {
- attach: function attach(context) {
- var $context = $(context);
+ attach(context) {
+ const $context = $(context);
$(once('views', 'a.views-remove-link', context)).on('click', function (event) {
- var id = $(this).attr('id').replace('views-remove-link-', '');
- $context.find("#views-row-".concat(id)).hide();
- $context.find("#views-removed-".concat(id)).prop('checked', true);
+ const id = $(this).attr('id').replace('views-remove-link-', '');
+ $context.find(`#views-row-${id}`).hide();
+ $context.find(`#views-removed-${id}`).prop('checked', true);
event.preventDefault();
});
$(once('display', 'a.display-remove-link', context)).on('click', function (event) {
- var id = $(this).attr('id').replace('display-remove-link-', '');
- $context.find("#display-row-".concat(id)).hide();
- $context.find("#display-removed-".concat(id)).prop('checked', true);
+ const id = $(this).attr('id').replace('display-remove-link-', '');
+ $context.find(`#display-row-${id}`).hide();
+ $context.find(`#display-removed-${id}`).prop('checked', true);
event.preventDefault();
});
}
+
};
Drupal.behaviors.viewsUiRearrangeFilter = {
- attach: function attach(context) {
+ attach(context) {
if (typeof Drupal.tableDrag === 'undefined' || typeof Drupal.tableDrag['views-rearrange-filters'] === 'undefined') {
return;
}
- var table = once('views-rearrange-filters', '#views-rearrange-filters', context);
- var operator = once('views-rearrange-filters', '.js-form-item-filter-groups-operator', context);
+ const table = once('views-rearrange-filters', '#views-rearrange-filters', context);
+ const operator = once('views-rearrange-filters', '.js-form-item-filter-groups-operator', context);
if (table.length) {
new Drupal.viewsUi.RearrangeFilterHandler($(table), $(operator));
}
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/views_ui/js/views_ui.listing.js b/core/modules/views_ui/js/views_ui.listing.js
index d5e848d84eb2e21bcccac1420cd6177925279441..b87dbede61f68ca611b4a4af1be9a1f3fbe4ff09 100644
--- a/core/modules/views_ui/js/views_ui.listing.js
+++ b/core/modules/views_ui/js/views_ui.listing.js
@@ -5,39 +5,25 @@
* @preserve
**/
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
(function ($, Drupal) {
Drupal.behaviors.viewTableFilterByText = {
- attach: function attach(context, settings) {
- var _once = once('views-filter-text', 'input.views-filter-text'),
- _once2 = _slicedToArray(_once, 1),
- input = _once2[0];
+ attach(context, settings) {
+ const [input] = once('views-filter-text', 'input.views-filter-text');
if (!input) {
return;
}
- var $table = $(input.getAttribute('data-table'));
- var $rows;
+ const $table = $(input.getAttribute('data-table'));
+ let $rows;
function filterViewList(e) {
- var query = $(e.target).val().toLowerCase();
+ const query = $(e.target).val().toLowerCase();
function showViewRow(index, row) {
- var $row = $(row);
- var $sources = $row.find('[data-drupal-selector="views-table-filter-text-source"]');
- var textMatch = $sources.text().toLowerCase().indexOf(query) !== -1;
+ const $row = $(row);
+ const $sources = $row.find('[data-drupal-selector="views-table-filter-text-source"]');
+ const textMatch = $sources.text().toLowerCase().indexOf(query) !== -1;
$row.closest('tr').toggle(textMatch);
}
@@ -53,5 +39,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
$(input).on('keyup', filterViewList);
}
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/package.json b/core/package.json
index a465af90c034b442eab59e9ca8981c968f2acfd9..9b1a9e9d7716edf94b393843029b3055686a85fe 100644
--- a/core/package.json
+++ b/core/package.json
@@ -150,7 +150,6 @@
"last 2 Edge major versions",
"last 2 Opera versions",
"last 2 iOS major versions",
- "last 1 Explorer major version",
"last 1 ChromeAndroid version",
"last 1 UCAndroid version",
"last 1 Samsung version",
diff --git a/core/profiles/demo_umami/themes/umami/js/classy/media_embed_ckeditor.theme.js b/core/profiles/demo_umami/themes/umami/js/classy/media_embed_ckeditor.theme.js
index 0b9d95999e8e2bd85013524aa5443c9832cf7c4c..19cc4ff77763ccdea8407959894cab4a7aa27c73 100644
--- a/core/profiles/demo_umami/themes/umami/js/classy/media_embed_ckeditor.theme.js
+++ b/core/profiles/demo_umami/themes/umami/js/classy/media_embed_ckeditor.theme.js
@@ -5,8 +5,6 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.mediaEmbedPreviewError = function () {
- return "<div class=\"media-embed-error media-embed-error--preview-error\">".concat(Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.'), "</div>");
- };
+(Drupal => {
+ Drupal.theme.mediaEmbedPreviewError = () => `<div class="media-embed-error media-embed-error--preview-error">${Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.')}</div>`;
})(Drupal);
\ No newline at end of file
diff --git a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js
index 0705b50f5587e025119f888a457866f62f66e3b0..faeec79da9b003ecd1a1b17f65ad440073ac3fdc 100644
--- a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js
+++ b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js
@@ -6,8 +6,8 @@
**/
(function () {
- var toggler = document.querySelector('[data-drupal-selector="menu-main-toggle"]');
- var menu = document.querySelector('[data-drupal-selector="menu-main"]');
+ const toggler = document.querySelector('[data-drupal-selector="menu-main-toggle"]');
+ const menu = document.querySelector('[data-drupal-selector="menu-main"]');
function toggleMenu() {
toggler.classList.toggle('menu-main-toggle--active');
diff --git a/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
index 06256add5f743a163365f4df1d8ce541d75994de..c35f5c9b9233554b53d94749dda066343797e046 100644
--- a/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
@@ -714,7 +714,7 @@ protected function getClassyHash($type, $file) {
],
'js' => [
'media_embed_ckeditor.theme.es6.js' => 'd9fa9e008aff8d4fb0401083bab0a1ad',
- 'media_embed_ckeditor.theme.js' => 'f8e192b79f25d2b61a6ff43b9733ec72',
+ 'media_embed_ckeditor.theme.js' => 'b2e705b4503be407a35692b272c7ed6a',
],
'images' => [
'application-octet-stream.png' => 'fef73511632890590b5ae0a13c99e4bf',
diff --git a/core/themes/bartik/color/preview.js b/core/themes/bartik/color/preview.js
index daf0d9e474b7d28babdb2e09e67692bac76dc915..52d6f421a47c6e10908049da6b308a6f5c358eac 100644
--- a/core/themes/bartik/color/preview.js
+++ b/core/themes/bartik/color/preview.js
@@ -8,7 +8,8 @@
(function ($, Drupal, drupalSettings) {
Drupal.color = {
logoChanged: false,
- callback: function callback(context, settings, $form) {
+
+ callback(context, settings, $form) {
if (!this.logoChanged) {
$('.color-preview .color-preview-logo img').attr('src', drupalSettings.color.logo);
this.logoChanged = true;
@@ -18,19 +19,20 @@
$('div').remove('.color-preview-logo');
}
- var $colorPreview = $form.find('.color-preview');
- var $colorPalette = $form.find('.js-color-palette');
+ const $colorPreview = $form.find('.color-preview');
+ const $colorPalette = $form.find('.js-color-palette');
$colorPreview.css('backgroundColor', $colorPalette.find('input[name="palette[bg]"]').val());
$colorPreview.find('.color-preview-main h2, .color-preview .preview-content').css('color', $colorPalette.find('input[name="palette[text]"]').val());
$colorPreview.find('.color-preview-content a').css('color', $colorPalette.find('input[name="palette[link]"]').val());
- var $colorPreviewBlock = $colorPreview.find('.color-preview-sidebar .color-preview-block');
+ const $colorPreviewBlock = $colorPreview.find('.color-preview-sidebar .color-preview-block');
$colorPreviewBlock.css('background-color', $colorPalette.find('input[name="palette[sidebar]"]').val());
$colorPreviewBlock.css('border-color', $colorPalette.find('input[name="palette[sidebarborders]"]').val());
$colorPreview.find('.color-preview-footer-wrapper').css('background-color', $colorPalette.find('input[name="palette[footer]"]').val());
- var gradientStart = $colorPalette.find('input[name="palette[top]"]').val();
- var gradientEnd = $colorPalette.find('input[name="palette[bottom]"]').val();
- $colorPreview.find('.color-preview-header').attr('style', "background-color: ".concat(gradientStart, "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(").concat(gradientStart, "), to(").concat(gradientEnd, ")); background-image: -moz-linear-gradient(-90deg, ").concat(gradientStart, ", ").concat(gradientEnd, ");"));
+ const gradientStart = $colorPalette.find('input[name="palette[top]"]').val();
+ const gradientEnd = $colorPalette.find('input[name="palette[bottom]"]').val();
+ $colorPreview.find('.color-preview-header').attr('style', `background-color: ${gradientStart}; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(${gradientStart}), to(${gradientEnd})); background-image: -moz-linear-gradient(-90deg, ${gradientStart}, ${gradientEnd});`);
$colorPreview.find('.color-preview-site-name').css('color', $colorPalette.find('input[name="palette[titleslogan]"]').val());
}
+
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/themes/bartik/js/classy/media_embed_ckeditor.theme.js b/core/themes/bartik/js/classy/media_embed_ckeditor.theme.js
index 0b9d95999e8e2bd85013524aa5443c9832cf7c4c..19cc4ff77763ccdea8407959894cab4a7aa27c73 100644
--- a/core/themes/bartik/js/classy/media_embed_ckeditor.theme.js
+++ b/core/themes/bartik/js/classy/media_embed_ckeditor.theme.js
@@ -5,8 +5,6 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.mediaEmbedPreviewError = function () {
- return "<div class=\"media-embed-error media-embed-error--preview-error\">".concat(Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.'), "</div>");
- };
+(Drupal => {
+ Drupal.theme.mediaEmbedPreviewError = () => `<div class="media-embed-error media-embed-error--preview-error">${Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.')}</div>`;
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/claro.libraries.yml b/core/themes/claro/claro.libraries.yml
index f182132a670cea4cafd9963d2efef73fde83cbd9..3d24373975fab405aaf9f694fa5356a2e8a81b6b 100644
--- a/core/themes/claro/claro.libraries.yml
+++ b/core/themes/claro/claro.libraries.yml
@@ -2,6 +2,7 @@ global-styling:
version: VERSION
css:
base:
+ css/base/variables.css: {}
css/base/elements.css: {}
css/base/typography.css: {}
css/base/print.css: {}
diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css
index 54e57b99d678d38d4a0ab957039846a853bf2221..65f88fb70f106faafd2cbb52860402c1f3d1b59c 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -10,21 +10,21 @@
*/
html {
- font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font-family: var(--font-family);
font-size: 100%;
font-weight: normal;
font-style: normal;
- line-height: 1.5;
+ line-height: var(--line-height);
}
body {
- color: #232429;
- background: #fff;
+ color: var(--color-fg);
+ background: var(--color-bg);
}
a,
.link {
- color: #003cc5;
+ color: var(--color-link);
}
a:hover,
@@ -37,20 +37,20 @@ a:focus,
a:hover,
.link:hover {
- color: #0036b1;
+ color: var(--color-link-hover);
}
a:active,
.link:active {
- color: #00339a;
+ color: var(--color-link-active);
}
hr {
height: 1px;
- margin: 1rem 0;
+ margin: var(--space-m) 0;
padding: 0;
border: none;
- background: rgba(142, 146, 156, 0.5);
+ background: var(--color-divider);
}
summary {
@@ -64,50 +64,50 @@ summary {
h1,
.heading-a {
- margin: 1rem 0 0.75rem;
- font-size: 2.027rem;
+ margin: var(--space-m) 0 var(--space-s);
+ font-size: var(--font-size-h1);
font-weight: bold;
- line-height: 1.3;
+ line-height: var(--line-height-heading);
}
h2,
.heading-b {
- margin: 1rem 0 0.75rem;
- font-size: 1.802rem;
+ margin: var(--space-m) 0 var(--space-s);
+ font-size: var(--font-size-h2);
font-weight: bold;
- line-height: 1.3;
+ line-height: var(--line-height-heading);
}
h3,
.heading-c {
- margin: 1rem 0 0.75rem;
- font-size: 1.602rem;
+ margin: var(--space-m) 0 var(--space-s);
+ font-size: var(--font-size-h3);
font-weight: bold;
- line-height: 1.3;
+ line-height: var(--line-height-heading);
}
h4,
.heading-d {
- margin: 1rem 0 0.75rem;
- font-size: 1.424rem;
+ margin: var(--space-m) 0 var(--space-s);
+ font-size: var(--font-size-h4);
font-weight: bold;
- line-height: 1.3;
+ line-height: var(--line-height-heading);
}
h5,
.heading-e {
- margin: 1rem 0 0.75rem;
- font-size: 1.266rem;
+ margin: var(--space-m) 0 var(--space-s);
+ font-size: var(--font-size-h5);
font-weight: bold;
- line-height: 1.3;
+ line-height: var(--line-height-heading);
}
h6,
.heading-f {
- margin: 1rem 0 0.75rem;
- font-size: 1.125rem;
+ margin: var(--space-m) 0 var(--space-s);
+ font-size: var(--font-size-h6);
font-weight: bold;
- line-height: 1.3;
+ line-height: var(--line-height-heading);
}
p {
@@ -222,7 +222,7 @@ pre {
}
details {
- line-height: 1.295rem;
+ line-height: var(--details-line-height);
}
details summary {
@@ -250,6 +250,6 @@ img {
.page-wrapper *:focus,
.ui-dialog *:focus {
- outline: 2px dotted transparent;
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ outline: var(--focus-outline);
+ box-shadow: var(--focus-box-shadow);
}
diff --git a/core/themes/claro/css/base/elements.pcss.css b/core/themes/claro/css/base/elements.pcss.css
index 3bf522deba37798d18ce3063b28d4681274ec025..2e1ce76f00739dac1fb855fca0405c9f2e6b535c 100644
--- a/core/themes/claro/css/base/elements.pcss.css
+++ b/core/themes/claro/css/base/elements.pcss.css
@@ -2,8 +2,6 @@
* Generic elements.
*/
-@import "./variables.pcss.css";
-
html {
font-family: var(--font-family);
font-size: 100%;
diff --git a/core/themes/claro/css/base/off-canvas.theme.css b/core/themes/claro/css/base/off-canvas.theme.css
index 85074a9e59fdfff3040c696e09ac88d9f35b662e..5ee2b664d72a7f2b7403d1fb1ec87a860c488964 100644
--- a/core/themes/claro/css/base/off-canvas.theme.css
+++ b/core/themes/claro/css/base/off-canvas.theme.css
@@ -16,7 +16,7 @@
.ui-dialog.ui-dialog-off-canvas {
/* Layer the dialog just under the toolbar. */
- z-index: 501;
+ z-index: var(--jui-dialog-off-canvas-z-index);
padding: 0;
color: #ddd;
border-radius: 0;
@@ -31,40 +31,40 @@
/* Style the off-canvas dialog header. */
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
- padding: 0.75rem 3rem 0.75rem 1rem; /* LTR */
+ padding: var(--space-s) var(--jui-dialog-off-canvas-close-button-reserved-space) var(--space-s) var(--space-m); /* LTR */
border: 0;
border-bottom: 1px solid #000;
border-radius: 0;
background: #2d2d2d;
- line-height: 1.5;
+ line-height: var(--line-height);
}
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
- padding-right: 1rem;
- padding-left: 3rem;
+ padding-right: var(--space-m);
+ padding-left: var(--jui-dialog-off-canvas-close-button-reserved-space);
}
.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
/* Push the text away from the icon. */
- padding-left: 1.75rem; /* LTR */
+ padding-left: calc(var(--space-m) + var(--space-s)); /* LTR */
/* Ensure that long titles are not truncated. */
white-space: normal;
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: 0 50%; /* LTR */
background-size: 1.25rem 1.25rem;
- font-size: 1rem;
+ font-size: var(--font-size-base);
}
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
- padding-right: 1.75rem;
+ padding-right: calc(var(--space-m) + var(--space-s));
padding-left: 0;
background-position: 100% 50%;
}
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- margin-right: 1rem;
- margin-left: 1rem;
+ margin-right: var(--space-m);
+ margin-left: var(--space-m);
}
/* Override default styling from jQuery UI. */
@@ -74,7 +74,7 @@
#drupal-off-canvas .ui-widget-header .ui-state-default {
color: #333;
border: 0;
- font-size: 0.889rem;
+ font-size: var(--font-size-s);
font-weight: normal;
}
diff --git a/core/themes/claro/css/base/off-canvas.theme.pcss.css b/core/themes/claro/css/base/off-canvas.theme.pcss.css
index ef6ee19cf119415ea0286799f6d4ce1e60814697..ce6639e9e516ae51ee88de61b3bfa93ac52dde30 100644
--- a/core/themes/claro/css/base/off-canvas.theme.pcss.css
+++ b/core/themes/claro/css/base/off-canvas.theme.pcss.css
@@ -5,8 +5,6 @@
* Contains overrides for jQuery UI dialog.
*/
-@import "./variables.pcss.css";
-
/* Style the dialog-off-canvas container. */
.ui-dialog.ui-dialog-off-canvas {
/* Layer the dialog just under the toolbar. */
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index e6ff4efbd85712bf9576c87d5954312816833377..903b4a8850bf96cd7e2094a80f16a47b0266824e 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -8,52 +8,235 @@
/*
* Color Palette.
*/
+ --color-absolutezero: #003cc5;
+ --color-white: #fff;
+ --color-text: var(--color-gray);
+ --color-text-light: var(--color-gray-500);
+ --color-gray-050-o-40: rgba(243, 244, 249, 0.4);
/* Secondary. */
- /* Variations. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ --color-gray-200-o-80: rgba(212, 212, 218, 0.8);
+ --color-maximumred: #d72222;
+ --color-sunglow: #ffd23f;
+ --color-sunglow-shaded: #977405;
+ --color-lightninggreen: #26a769;
+ --color-focus: var(--color-lightninggreen);
+ /* Variations. */
+ --color-absolutezero-hover: #0036b1; /* 10% darker than base. */
+ --color-absolutezero-active: #00339a; /* 20% darker than base. */
+ --color-maximumred-hover: #c11f1f; /* 5% darker than base. */
+ --color-maximumred-active: #ab1b1b; /* 10% darker than base. */
+ --color-bgblue-hover: #f0f5fd; /* 5% darker than base. */
+ --color-bgblue-active: #e6ecf8; /* 10% darker than base. */
+ --color-bgred-hover: #fdf5f5; /* 5% darker than base. */
+ --color-bgred-active: #fceded; /* 10% darker than base. */
/* Gray variations. */
+ --color-gray: #232429;
+ --color-gray-900: #393a3f;
+ --color-gray-800: #55565b;
+ --color-gray-700: #75767b;
+ --color-gray-600: #828388;
+ --color-gray-500: #919297;
+ --color-gray-400: #adaeb3;
+ --color-gray-300: #c1c2c7;
+ --color-gray-200: #d3d4d9;
+ --color-gray-100: #dedfe4;
+ --color-gray-050: #f3f4f9;
+ --color-gray-025: #f9faff;
/*
* Base.
*/
+ --color-fg: var(--color-text);
+ --color-bg: var(--color-white);
+ --color-link: var(--color-absolutezero);
+ --color-link-hover: var(--color-absolutezero-hover);
+ --color-link-active: var(--color-absolutezero-active);
+ --color-divider: rgba(142, 146, 156, 0.5);
/*
* Typography.
- */ /* 18px */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ */
+ --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ --line-height: 1.5;
+ --line-height-heading: 1.3;
+ --line-height-form-label: 1.125rem; /* 18px */
+ --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
+ --font-size-h1: 2.027rem; /* ~32px */
+ --font-size-h2: 1.802rem; /* ~29px */
+ --font-size-h3: 1.602rem; /* ~26px */
+ --font-size-h4: 1.424rem; /* ~23px */
+ --font-size-h5: 1.266rem; /* ~20px */
+ --font-size-h6: 1.125rem; /* 18px */
+ --font-size-s: 0.889rem; /* ~14px */
+ --font-size-xs: 0.79rem; /* ~13px */
+ --font-size-xxs: 0.702rem; /* ~11px */
+ --font-size-label: var(--font-size-s);
+ --font-size-description: var(--font-size-xs);
/**
* Spaces.
- */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ */
+ --space-xl: 3rem; /* 3 * 16px = 48px */
+ --space-l: 1.5rem; /* 1.5 * 16px = 24px */
+ --space-m: 1rem; /* 1 * 16px = 16px */
+ --space-s: 0.75rem; /* 0.75 * 16px = 12px */
+ --space-xs: 0.5rem; /* 0.5 * 16px = 8px */
/*
* Common.
*/
+ --speed-transition: 0.2s;
+ --transition: all var(--speed-transition) ease-out;
+ --base-border-radius: 2px;
+ --focus-border-size: 0.1875rem;
+ --focus-border-offset-size: 2px;
+ --outline-size: 2px;
+ --focus-outline: var(--outline-size) dotted transparent;
+ --focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
/**
* Shadows.
*/
+ --shadow-z3: 0 0.875rem 1.875rem rgba(0, 0, 0, 0.1);
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */
+ --input-fg-color: var(--color-fg);
+ --input-bg-color: var(--color-bg);
+ --input-fg-color--description: var(--color-gray-800);
+ --input-fg-color--placeholder: var(--color-gray-500);
+ --input-border-color: var(--color-gray-500);
+ --input--hover-border-color: var(--color-text);
+ --input--focus-border-color: var(--color-absolutezero);
+ --input--focus-shadow-color: rgba(0, 74, 220, 0.3); /* Absolute zero with opacity. */
+ --input--error-color: var(--color-maximumred);
+ --input--error-border-color: var(--color-maximumred);
+ --input--disabled-color: rgba(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
+ --input--disabled-fg-color: var(--color-gray-600);
+ --input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */
+ --input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */
+ --input--disabled-border-opacity: 0.5;
+ --input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
+ --input-border-size: 1px; /* (1/16)em ~ 1px */
+ --input--error-border-size: 2px;
+ --input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
+ --input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
+ --input-font-size: var(--font-size-base);
+ --input-line-height: var(--space-l);
+ --input-padding-vertical--small: calc(var(--space-xs) - var(--input-border-size)*2);
+ --input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));
+ --input-font-size--small: var(--font-size-xs);
+ --input-line-height--small: 1.3125rem;
+ --input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
+ --input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
+ --input--extrasmall-font-size: var(--font-size-s);
+ --input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
+ --input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
+ --input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
/*
* Details.
*/
+ --details-bg-color: rgba(243, 244, 249, 0.4);
+ --details-border-color: var(--color-gray-100);
+ --details-summary-shadow-color: var(--color-focus);
+ --details-summary-focus-border-size: var(--focus-border-size);
+ --details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
+ --details-box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);
+ --details-border-size: 1px;
+ --details-border-size-radius: 2px;
+ --details-accordion-border-size-radius: var(--base-border-radius);
+ --details-spread-box-shadow-radius: 2px;
+ --details-bg-color-transition-duration: 0.12s;
+ --details-box-shadow-transition-duration: 0.2s;
+ --details-transform-transition-duration: 0.12s;
+ --details-line-height: 1.295rem;
/**
* Buttons.
*/
+ --button--focus-border-color: #5a8bed;
+ --button-border-radius-size: var(--base-border-radius);
+ --button-fg-color: var(--color-text);
+ --button-bg-color: var(--color-gray-200);
+ --button--hover-bg-color: var(--color-gray-300);
+ --button--active-bg-color: var(--color-gray-400);
+ --button--disabled-bg-color: #ebebed;
+ --button--disabled-fg-color: var(--color-gray-500);
+ --button-fg-color--primary: var(--color-white);
+ --button-bg-color--primary: var(--color-absolutezero);
+ --button--hover-bg-color--primary: var(--color-absolutezero-hover);
+ --button--active-bg-color--primary: var(--color-absolutezero-active);
+ --button--focus-bg-color--primary: var(--button-bg-color--primary);
+ --button--disabled-bg-color--primary: var(--color-gray-200);
+ --button--disabled-fg-color--primary: var(--color-gray-600);
+ --button-fg-color--danger: var(--color-white);
+ --button-bg-color--danger: var(--color-maximumred);
+ --button--hover-bg-color--danger: var(--color-maximumred-hover);
+ --button--active-bg-color--danger: var(--color-maximumred-active);
/**
* jQuery.UI dropdown.
- */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ */
+ --jui-dropdown-fg-color: var(--color-gray-800);
+ --jui-dropdown-bg-color: var(--color-white);
+ --jui-dropdown--active-fg-color: var(--color-white);
+ --jui-dropdown--active-bg-color: var(--color-absolutezero);
+ --jui-dropdown-border-color: rgba(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
+ --jui-dropdown-shadow-color: rgba(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
/**
* jQuery.UI dialog.
*/
+ --jui-dialog-title-color: var(--color-white);
+ --jui-dialog-title-bg-color: var(--color-text);
+ --jui-dialog-title-font-size: var(--font-size-h4);
+ --jui-dialog-close-button-size: calc(var(--space-m)*2);
+ --jui-dialog-close-button-border-radius: 50%;
+ --jui-dialog-close-button-reserved-space: calc(var(--space-m)*4);
+ --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m)*3);
+ --jui-dialog-border-radius: 0.25rem;
+ --jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m)/-4) var(--color-text);
+ --jui-dialog--focus-outline: 2px dotted transparent;
+ --jui-dialog--focus-box-shadow: 0 0 0 0.1875rem var(--color-focus);
+ --jui-dialog-z-index: 1260;
+ --jui-dialog-off-canvas-z-index: 501;
/**
* Progress bar.
*/
+ --progress-bar-border-size: 1px;
+ --progress-bar-small-size: calc(var(--space-xs) - var(--progress-bar-border-size)*2);
+ --progress-bar-small-size-radius: var(--space-xs);
+ --progress-bar-spacing-size: var(--space-xs);
+ --progress-bar-transition: width 0.5s ease-out;
+ --progress-bar-label-color: var(--color-text);
+ --progress-bar-description-color: var(--color-gray-800);
+ --progress-bar-description-font-size: var(--font-size-xs);
+ --progress-track-border-color: var(--color-gray-500);
+ --progress-track-bg-color: var(--color-gray-200);
/**
* Tabledrag icon size.
- */ /* 17px */
+ */
+ --tabledrag-handle-icon-size: 1.0625rem; /* 17px */
/**
* Ajax progress.
*/
+ --ajax-progress-margin-horizontal: var(--space-s);
/**
* Breadcrumb.
*/
+ --breadcrumb-height: 1.25rem;
/**
* Vertical Tabs.
*/
+ --vertical-tabs-margin-vertical: var(--space-s);
+ --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
+ --vertical-tabs-shadow: var(--details-box-shadow);
+ --vertical-tabs-border-color: var(--details-border-color);
+ --vertical-tabs-border-size: 1px;
+ --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
+ --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
+ --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace)*-2);
+ --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size)*-1);
+ --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace)*-1);
+ --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace)*-1);
+ --vertical-tabs-menu-separator-color: var(--color-gray-200);
+ --vertical-tabs-menu-separator-size: 1px;
+ --vertical-tabs-menu-width: 20em;
+ --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
+ --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
+ --vertical-tabs-menu-link--active-border-size: 0.25rem;
+ --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
+ --vertical-tabs-menu--z-index: 0;
}
diff --git a/core/themes/claro/css/components/accordion.css b/core/themes/claro/css/components/accordion.css
index 872e33888c65a6e33ee78c85444ec5f5985f06a2..47528e8e73d2aed1a16e7a672efaa5eab8d1fa4f 100644
--- a/core/themes/claro/css/components/accordion.css
+++ b/core/themes/claro/css/components/accordion.css
@@ -11,11 +11,11 @@
*/
.accordion {
- color: #232429;
- border: 1px solid #dedfe4;
- border-radius: 2px;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ color: var(--color-text);
+ border: var(--details-border-size) solid var(--details-border-color);
+ border-radius: var(--details-accordion-border-size-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--details-box-shadow);
}
.accordion__item {
@@ -25,8 +25,8 @@
.accordion__item:first-child {
margin-top: -1px;
- border-top-left-radius: 2px;
- border-top-right-radius: 2px;
+ border-top-left-radius: var(--details-accordion-border-size-radius);
+ border-top-right-radius: var(--details-accordion-border-size-radius);
}
.accordion__item + .accordion__item {
@@ -35,12 +35,12 @@
.accordion__item:last-child {
margin-bottom: -1px;
- border-bottom-right-radius: 2px;
- border-bottom-left-radius: 2px;
+ border-bottom-right-radius: var(--details-accordion-border-size-radius);
+ border-bottom-left-radius: var(--details-accordion-border-size-radius);
}
.accordion__item .claro-details__summary .summary {
display: block;
- color: #55565b;
+ color: var(--color-gray-800);
font-weight: normal;
}
diff --git a/core/themes/claro/css/components/accordion.pcss.css b/core/themes/claro/css/components/accordion.pcss.css
index d7fcaa6574057f48fb91cda904403303a30a8340..1d54647f8339219d07e5ce56ab57126f5e3c2967 100644
--- a/core/themes/claro/css/components/accordion.pcss.css
+++ b/core/themes/claro/css/components/accordion.pcss.css
@@ -3,8 +3,6 @@
* Accordion styles.
*/
-@import "../base/variables.pcss.css";
-
.accordion {
color: var(--color-text);
border: var(--details-border-size) solid var(--details-border-color);
diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css
index 0349f4627606fb39a0ca6204e5d0a318399763f9..109ec794d8696bfc8cdd8c8e8a4f6d2196031c93 100644
--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -18,7 +18,7 @@
.action-links,
[dir="rtl"] .action-links {
- margin: 1.5rem 0;
+ margin: var(--space-l) 0;
list-style: none;
}
@@ -27,20 +27,20 @@
}
.action-links__item + .action-links__item > .action-link {
- margin-left: 0.75rem; /* LTR */
+ margin-left: var(--space-s); /* LTR */
}
[dir="rtl"] .action-links__item + .action-links__item > .action-link {
- margin-right: 0.75rem;
+ margin-right: var(--space-s);
margin-left: 0;
}
.action-links__item + .action-links__item > .action-link--small {
- margin-left: 0.5rem; /* LTR */
+ margin-left: var(--space-xs); /* LTR */
}
[dir="rtl"] .action-links__item + .action-links__item > .action-link--small {
- margin-right: 0.5rem;
+ margin-right: var(--space-xs);
margin-left: 0;
}
@@ -50,49 +50,49 @@
.action-link {
display: inline-block;
- padding: 0.75rem 1rem;
+ padding: calc(var(--space-m) - var(--space-l)/2 + var(--space-m)/2) var(--space-m);
cursor: pointer;
text-decoration: none;
- color: #55565b;
- border-radius: 2px;
- background-color: #fff;
- font-size: 1rem;
+ color: var(--color-gray-800);
+ border-radius: var(--button-border-radius-size);
+ background-color: var(--color-bg);
+ font-size: var(--font-size-base);
font-weight: 700;
- line-height: 1.5rem; /* Bigger line-height needed to prevent the icon from increasing the height */
+ line-height: var(--space-l); /* Bigger line-height needed to prevent the icon from increasing the height */
-webkit-font-smoothing: antialiased;
}
/* Small variant. */
.no-touchevents .action-link--small {
- padding: 0.375rem 0.75rem;
- font-size: 0.889rem;
+ padding: calc(var(--space-s) - var(--space-l)/2 + var(--space-s)/2) var(--space-s);
+ font-size: var(--font-size-s);
}
/* Extra small variant. */
.no-touchevents .action-link--extrasmall {
- padding: 0 0.5rem;
- font-size: 0.889rem;
+ padding: 0 var(--space-xs);
+ font-size: var(--font-size-s);
}
.action-link + .action-link {
- margin-left: 0.75rem; /* LTR */
+ margin-left: var(--space-s); /* LTR */
}
[dir="rtl"] .action-link + .action-link {
- margin-right: 0.75rem;
+ margin-right: var(--space-s);
margin-left: 0;
}
.no-touchevents .action-link--small + .action-link--small,
.no-touchevents .action-link--extrasmall + .action-link--extrasmall {
- margin-left: 0.5rem; /* LTR */
+ margin-left: var(--space-xs); /* LTR */
}
[dir="rtl"] .no-touchevents .action-link--small + .action-link--small,
[dir="rtl"] .no-touchevents .action-link--extrasmall + .action-link--extrasmall {
- margin-right: 0.5rem;
+ margin-right: var(--space-xs);
margin-left: 0;
}
@@ -103,21 +103,21 @@
*/
.form-actions .action-link {
- margin-right: 0.75rem; /* LTR */
+ margin-right: var(--space-s); /* LTR */
margin-left: 0; /* LTR */
}
[dir="rtl"] .form-actions .action-link {
margin-right: 0;
- margin-left: 0.75rem;
+ margin-left: var(--space-s);
}
/* Action link states */
.action-link:hover {
text-decoration: none;
- color: #0036b1;
- background-color: #f0f5fd;
+ color: var(--color-absolutezero-hover);
+ background-color: var(--color-bgblue-hover);
}
.action-link:focus {
@@ -127,8 +127,8 @@
}
.action-link:active {
- color: #00339a;
- background-color: #e6ecf8;
+ color: var(--color-absolutezero-active);
+ background-color: var(--color-bgblue-active);
}
/**
@@ -138,17 +138,17 @@
/* Danger. */
.action-link--danger {
- color: #d72222;
+ color: var(--color-maximumred);
}
.action-link--danger:hover {
- color: #c11f1f;
- background-color: #fdf5f5;
+ color: var(--color-maximumred-hover);
+ background-color: var(--color-bgred-hover);
}
.action-link--danger:active {
- color: #ab1b1b;
- background-color: #fceded;
+ color: var(--color-maximumred-active);
+ background-color: var(--color-bgred-active);
}
/**
@@ -166,22 +166,22 @@
width: 1em;
height: 1em;
margin-right: 0.5em; /* LTR */
- margin-left: -0.25rem; /* LTR */
+ margin-left: calc(var(--space-s) - var(--space-m)); /* LTR */
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
[dir="rtl"] .action-link::before {
- margin-right: -0.25rem;
+ margin-right: calc(var(--space-s) - var(--space-m));
margin-left: 0.5em;
}
.no-touchevents .action-link--small::before,
.no-touchevents .action-link--extrasmall::before {
top: 0.0625rem; /* Set the proper vertical alignment */
- width: 0.75rem;
- height: 0.75rem;
+ width: var(--space-s);
+ height: var(--space-s);
}
.no-touchevents .action-link--extrasmall::before {
diff --git a/core/themes/claro/css/components/action-link.pcss.css b/core/themes/claro/css/components/action-link.pcss.css
index 389b88befde336865f992996b574ea207f8e4416..89c3b1efc52e253095a1b1126c01278521a59680 100644
--- a/core/themes/claro/css/components/action-link.pcss.css
+++ b/core/themes/claro/css/components/action-link.pcss.css
@@ -5,8 +5,6 @@
* Contains Action link component and the action-links layout styles.
*/
-@import "../base/variables.pcss.css";
-
/**
* Action links layout.
*/
diff --git a/core/themes/claro/css/components/ajax-progress.module.css b/core/themes/claro/css/components/ajax-progress.module.css
index bbabe17157c9708a81a8c0a78e7436612a2d7af3..ab06513e6eb217eb25fc39de3ac742725fa9bd10 100644
--- a/core/themes/claro/css/components/ajax-progress.module.css
+++ b/core/themes/claro/css/components/ajax-progress.module.css
@@ -32,7 +32,7 @@
display: inline-flex;
align-content: center;
height: 1.125rem;
- margin: -0.1875rem 0.75rem 0;
+ margin: -0.1875rem var(--ajax-progress-margin-horizontal) 0;
vertical-align: middle;
white-space: nowrap;
line-height: 1.125rem;
@@ -49,7 +49,7 @@
[dir="rtl"].js .button:not(.js-hide) + .ajax-progress--throbber {
margin-right: 0;
- margin-left: 0.75rem;
+ margin-left: var(--ajax-progress-margin-horizontal);
}
/**
@@ -58,13 +58,13 @@
.js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
.js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
- margin-left: 0.75rem; /* LTR */
+ margin-left: var(--ajax-progress-margin-horizontal); /* LTR */
}
[dir="rtl"].js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
[dir="rtl"].js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
- margin-right: 0.75rem;
- margin-left: 0.75rem;
+ margin-right: var(--ajax-progress-margin-horizontal);
+ margin-left: var(--ajax-progress-margin-horizontal);
}
.ajax-progress__throbber {
@@ -72,19 +72,19 @@
width: 1.125rem;
height: 1.125rem;
animation: claro-throbber 0.75s linear infinite;
- border: 2px solid #003cc5;
+ border: 2px solid var(--color-absolutezero);
border-right: 2px dotted transparent;
border-radius: 50%;
}
.ajax-progress__message {
display: inline-block;
- padding-left: 0.75rem;
- font-size: 0.889rem;
+ padding-left: var(--ajax-progress-margin-horizontal);
+ font-size: var(--font-size-label);
}
[dir="rtl"] .ajax-progress__message {
- padding-right: 0.75rem;
+ padding-right: var(--ajax-progress-margin-horizontal);
padding-left: 0;
}
@@ -102,10 +102,10 @@
width: 3.5rem; /* 56px */
height: 3.5rem;
margin: -1.75rem;
- border: 1px solid rgba(216, 217, 224, 0.8);
+ border: var(--input-border-size) solid var(--jui-dropdown-border-color);
border-radius: 3.5rem;
- background: #fff;
- box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
+ background: var(--color-white);
+ box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
}
.ajax-progress__throbber--fullscreen,
@@ -117,7 +117,7 @@
height: 1.75rem; /* 28px */
margin: -0.875rem;
content: "";
- border: 3px solid #003cc5;
+ border: 3px solid var(--color-absolutezero);
border-right: 3px dotted transparent;
}
diff --git a/core/themes/claro/css/components/ajax-progress.module.pcss.css b/core/themes/claro/css/components/ajax-progress.module.pcss.css
index 5047f3f2201dbdd7a660abdb7bacbd2f898e3721..f0617924b954d64dca81310a957b38aef3b903a5 100644
--- a/core/themes/claro/css/components/ajax-progress.module.pcss.css
+++ b/core/themes/claro/css/components/ajax-progress.module.pcss.css
@@ -3,8 +3,6 @@
* Throbber.
*/
-@import "../base/variables.pcss.css";
-
.ajax-progress {
display: inline-block;
}
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.css b/core/themes/claro/css/components/autocomplete-loading.module.css
index 61f21e93bf5731b93536b03bcfb048f790174df0..0c57f507c8e7798a2c36adcf2ea1fa97ed0ba256 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.css
@@ -87,8 +87,8 @@ _:-ms-fullscreen,
bottom: 100%;
max-width: 100%;
margin-bottom: 0.15rem;
- color: #003cc5;
- font-size: 0.702rem; /* ~11px */
+ color: var(--color-link);
+ font-size: var(--font-size-xxs); /* ~11px */
font-weight: bold;
line-height: 1.125rem; /* 18px */
}
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
index 2d8d8ca5e6ecbab6bc53ef39557e324ecf733664..64852712ab868c3ee30c4f824eaa50676cd5931c 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
@@ -5,8 +5,6 @@
* @see autocomplete.js
*/
-@import "../base/variables.pcss.css";
-
/**
* Since the autocomplete library is attached conditionally and not globally,
* we can be 99% sure that the default icon will be used.
diff --git a/core/themes/claro/css/components/breadcrumb.css b/core/themes/claro/css/components/breadcrumb.css
index b687386f19440bd5ee151e21826b6d065b3dc6e1..12df36c30482a00c6a4e2b9d2e47ff9b9f13b6af 100644
--- a/core/themes/claro/css/components/breadcrumb.css
+++ b/core/themes/claro/css/components/breadcrumb.css
@@ -12,7 +12,7 @@
.breadcrumb {
padding: 0;
- color: #232429;
+ color: var(--color-text);
font-size: 0.79rem;
}
@@ -27,7 +27,7 @@
.breadcrumb__link {
display: inline;
text-decoration: none;
- color: #232429;
+ color: var(--color-text);
font-weight: bold;
}
diff --git a/core/themes/claro/css/components/breadcrumb.pcss.css b/core/themes/claro/css/components/breadcrumb.pcss.css
index 0cd88135013abb687303f12c9491cb364688c9e6..227f755143864d34055968d498890565bc2a574e 100644
--- a/core/themes/claro/css/components/breadcrumb.pcss.css
+++ b/core/themes/claro/css/components/breadcrumb.pcss.css
@@ -3,8 +3,6 @@
* Breadcrumbs.
*/
-@import "../base/variables.pcss.css";
-
.breadcrumb {
padding: 0;
color: var(--color-text);
diff --git a/core/themes/claro/css/components/button.css b/core/themes/claro/css/components/button.css
index ac64cb4ec3c01f122674d4f557925032fc65a184..e57bd1323aebf5756080568c5e433bf306516ddf 100644
--- a/core/themes/claro/css/components/button.css
+++ b/core/themes/claro/css/components/button.css
@@ -37,16 +37,16 @@
.button {
display: inline-block;
- margin: 1rem 0.75rem 1rem 0; /* LTR */
- padding: calc(1rem - 1px) calc(1.5rem - 1px); /* 1 */
+ margin: var(--space-m) var(--space-s) var(--space-m) 0; /* LTR */
+ padding: calc(var(--space-m) - 1px) calc(var(--space-l) - 1px); /* 1 */
cursor: pointer;
text-align: center;
text-decoration: none;
- color: #232429;
+ color: var(--button-fg-color);
border: 1px solid transparent !important; /* 2 */
- border-radius: 2px;
- background-color: #d3d4d9;
- font-size: 1rem;
+ border-radius: var(--button-border-radius-size);
+ background-color: var(--button-bg-color);
+ font-size: var(--font-size-base);
font-weight: 700;
line-height: 1rem;
-webkit-appearance: none;
@@ -56,7 +56,7 @@
}
[dir="rtl"] .button {
- margin: 1rem 0 1rem 0.75rem;
+ margin: var(--space-m) 0 var(--space-m) var(--space-s);
}
.button:not(:focus) {
@@ -65,7 +65,7 @@
.button:hover {
text-decoration: none;
- background-color: #c1c2c7;
+ background-color: var(--button--hover-bg-color);
}
.button:focus {
@@ -73,29 +73,29 @@
}
.button:active {
- background-color: #adaeb3;
+ background-color: var(--button--active-bg-color);
}
/* Common styles for small buttons */
.no-touchevents .button--small {
- margin: 0.75rem 0.5rem 0.75rem 0; /* LTR */
- padding: calc(0.5rem - 1px) calc(1rem - 1px); /* 1 */
- font-size: 0.79rem;
+ margin: var(--space-s) var(--space-xs) var(--space-s) 0; /* LTR */
+ padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
+ font-size: var(--font-size-xs);
}
/* Common styles for extra small buttons */
.no-touchevents .button--extrasmall {
- margin: 0.5rem 0.5rem 0.5rem 0; /* LTR */
- padding: calc(0.25rem - 1px) calc(0.75rem - 1px); /* 1 */
- font-size: 0.79rem;
+ margin: var(--space-xs) var(--space-xs) var(--space-xs) 0; /* LTR */
+ padding: calc(var(--space-xs)/2 - 1px) calc(var(--space-s) - 1px); /* 1 */
+ font-size: var(--font-size-xs);
}
[dir="rtl"].no-touchevents .button--small,
[dir="rtl"].no-touchevents .button--extrasmall {
margin-right: 0;
- margin-left: 0.5rem;
+ margin-left: var(--space-xs);
}
/* Styles for action link buttons */
@@ -120,49 +120,49 @@
a.button:hover,
a.button:active {
- color: #232429;
+ color: var(--button-fg-color);
}
/* Primary button styles */
.button--primary {
- color: #fff;
- background-color: #003cc5;
+ color: var(--button-fg-color--primary);
+ background-color: var(--button-bg-color--primary);
}
.button--primary:hover {
- color: #fff;
- background-color: #0036b1;
+ color: var(--button-fg-color--primary);
+ background-color: var(--button--hover-bg-color--primary);
}
.button--primary:active {
- background-color: #00339a;
+ background-color: var(--button--active-bg-color--primary);
}
a.button--primary:hover,
a.button--primary:active {
- color: #fff;
+ color: var(--button-fg-color--primary);
}
/* Danger button styles */
.button--danger {
- color: #fff;
- background-color: #d72222;
+ color: var(--button-fg-color--danger);
+ background-color: var(--button-bg-color--danger);
}
.button--danger:hover {
- color: #fff;
- background-color: #c11f1f;
+ color: var(--button-fg-color--danger);
+ background-color: var(--button--hover-bg-color--danger);
}
.button--danger:active {
- background-color: #ab1b1b;
+ background-color: var(--button--active-bg-color--danger);
}
a.button--danger:hover,
a.button--danger:active {
- color: #fff;
+ color: var(--button-fg-color--danger);
}
/**
@@ -173,21 +173,20 @@ a.button--danger:active {
.button:disabled,
.button.is-disabled {
- color: #919297;
- background-color: #ebebed;
+ color: var(--button--disabled-fg-color);
+ background-color: var(--button--disabled-bg-color);
}
.button--primary:disabled,
.button--primary.is-disabled {
- color: #828388;
- background-color: #d3d4d9;
+ color: var(--button--disabled-fg-color--primary);
+ background-color: var(--button--disabled-bg-color--primary);
}
/* Make disabled <link> behave like a [disabled] <input> or <button> */
.button.is-disabled {
-webkit-user-select: none;
- -ms-user-select: none;
user-select: none;
pointer-events: none;
}
diff --git a/core/themes/claro/css/components/button.pcss.css b/core/themes/claro/css/components/button.pcss.css
index f1f95222bd2d83c1980cbfe8f309d61fc0315221..af4084370ed4d986fd19181dc05b3b83a47d2126 100644
--- a/core/themes/claro/css/components/button.pcss.css
+++ b/core/themes/claro/css/components/button.pcss.css
@@ -5,8 +5,6 @@
* Apply these classes to button elements (<button>, <input type="button" />).
*/
-@import "../base/variables.pcss.css";
-
/**
* Buttons.
*
diff --git a/core/themes/claro/css/components/card.css b/core/themes/claro/css/components/card.css
index 5508a913ae5c1d1b9834aaecd2d7c60b9949c885..7e65814d51bdda7bacaa32635a5752a1eb65d57b 100644
--- a/core/themes/claro/css/components/card.css
+++ b/core/themes/claro/css/components/card.css
@@ -10,16 +10,25 @@
* Card.
*/
+:root {
+ --card-bg-color: var(--color-white);
+ --card-border-size: 1px;
+ --card-border-color: var(--color-gray-200-o-80);
+ --card-border-radius-size: var(--base-border-radius);
+ --card-image-border-radius-size: calc(var(--card-border-radius-size) - var(--card-border-size));
+ --card-box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
+}
+
.card {
display: flex;
flex-direction: column;
align-items: stretch;
justify-items: flex-start;
padding: 0;
- border: 1px solid rgba(212, 212, 218, 0.8);
- border-radius: 2px;
- background-color: #fff;
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ border: var(--card-border-size) solid var(--card-border-color);
+ border-radius: var(--card-border-radius-size);
+ background-color: var(--card-bg-color);
+ box-shadow: var(--card-box-shadow);
}
/* 588px theme screenshot width */
@@ -48,17 +57,17 @@
.card__image {
overflow: hidden;
- border-radius: 1px 1px 0 0;
+ border-radius: var(--card-image-border-radius-size) var(--card-image-border-radius-size) 0 0;
line-height: 0;
}
@media screen and (min-width: 36.75rem) {
.card--horizontal .card__image {
flex-basis: 35%;
- border-radius: 1px 0 0 1px; /* LTR */
+ border-radius: var(--card-image-border-radius-size) 0 0 var(--card-image-border-radius-size); /* LTR */
}
[dir="rtl"] .card--horizontal .card__image {
- border-radius: 0 1px 1px 0;
+ border-radius: 0 var(--card-image-border-radius-size) var(--card-image-border-radius-size) 0;
}
}
@@ -90,7 +99,7 @@
flex-grow: 1;
flex-shrink: 0;
box-sizing: border-box;
- padding: 1.5rem;
+ padding: var(--space-l);
}
@media screen and (min-width: 36.75rem) {
@@ -100,11 +109,11 @@
/* Card content with image. */
.card--horizontal .card__image ~ .card__content-wrapper {
- padding-left: 1rem;
+ padding-left: var(--space-m);
}
[dir="rtl"] .card--horizontal .card__image ~ .card__content-wrapper {
- padding-right: 1rem;
- padding-left: 1.5rem;
+ padding-right: var(--space-m);
+ padding-left: var(--space-l);
}
}
@@ -134,7 +143,7 @@
.card__content-item {
margin-top: 0;
- margin-bottom: 1rem;
+ margin-bottom: var(--space-m);
}
.card__content-item:last-child {
@@ -152,7 +161,7 @@
*/
flex-shrink: 0;
order: 100;
- margin-top: 1.5rem;
+ margin-top: var(--space-l);
}
.card__footer .action-links,
diff --git a/core/themes/claro/css/components/card.pcss.css b/core/themes/claro/css/components/card.pcss.css
index bb5440d6f42e4c7f9d2dafbde1fd435119035ded..775d46ab04a31f6c4015fd4e1ef60cde41751847 100644
--- a/core/themes/claro/css/components/card.pcss.css
+++ b/core/themes/claro/css/components/card.pcss.css
@@ -3,8 +3,6 @@
* Card.
*/
-@import "../base/variables.pcss.css";
-
:root {
--card-bg-color: var(--color-white);
--card-border-size: 1px;
diff --git a/core/themes/claro/css/components/content-header.css b/core/themes/claro/css/components/content-header.css
index 814cfbb5341aa6c37e290d80251f61f483ab9a61..da17c58df60e3f94ea55a14814bfb13f1979894a 100644
--- a/core/themes/claro/css/components/content-header.css
+++ b/core/themes/claro/css/components/content-header.css
@@ -11,7 +11,7 @@
.content-header {
overflow: hidden;
- margin-bottom: 0.75rem;
- padding: 1.5rem 0 0;
- background-color: #f3f4f9;
+ margin-bottom: var(--space-s);
+ padding: var(--space-l) 0 0;
+ background-color: var(--color-gray-050);
}
diff --git a/core/themes/claro/css/components/content-header.pcss.css b/core/themes/claro/css/components/content-header.pcss.css
index 513f06faa12f268e02280ed20d58967c834d40be..e8376064a67a32a83eb74acf08b62f4189635530 100644
--- a/core/themes/claro/css/components/content-header.pcss.css
+++ b/core/themes/claro/css/components/content-header.pcss.css
@@ -2,8 +2,6 @@
* Content header.
*/
-@import "../base/variables.pcss.css";
-
.content-header {
overflow: hidden;
margin-bottom: var(--space-s);
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index cc0808bcd0b36809fa9a4e88e75b82b11629f099..c2de8eeb8ce5d946a9beeb7f1a55aadc60116a97 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -35,15 +35,21 @@
* element.
*/
+:root {
+ --size-summary-border-radius: calc(var(--details-border-size-radius) - var(--details-border-size));
+ --summary-accordion-padding-vertical: calc(var(--space-l) + var(--space-m)/2 - var(--space-l)/2);
+ --summary-accordion-line-height: var(--space-l);
+}
+
.claro-details {
display: block;
- margin-top: 1rem;
- margin-bottom: 1rem;
- color: #232429;
- border: 1px solid #dedfe4;
- border-radius: 2px;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
+ color: var(--color-text);
+ border: var(--details-border-size) solid var(--details-border-color);
+ border-radius: var(--details-border-size-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--details-box-shadow);
}
.claro-details--accordion-item,
@@ -55,13 +61,13 @@
}
.claro-details--accordion-item:first-of-type {
- border-top-left-radius: 2px;
- border-top-right-radius: 2px;
+ border-top-left-radius: var(--details-border-size-radius);
+ border-top-right-radius: var(--details-border-size-radius);
}
.claro-details--accordion-item:last-of-type {
- border-bottom-right-radius: 2px;
- border-bottom-left-radius: 2px;
+ border-bottom-right-radius: var(--details-border-size-radius);
+ border-bottom-left-radius: var(--details-border-size-radius);
}
/**
@@ -71,23 +77,22 @@
.claro-details__summary {
position: relative;
box-sizing: border-box;
- padding: 1rem 1rem 1rem 2.25rem; /* LTR */
+ padding: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
list-style: none;
cursor: pointer;
- transition: background-color 0.12s ease-in-out;
+ transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
word-wrap: break-word;
-webkit-hyphens: auto;
- -ms-hyphens: auto;
hyphens: auto;
- color: #55565b;
- border-radius: 1px;
+ color: var(--color-gray-800);
+ border-radius: var(--size-summary-border-radius);
background-color: transparent;
- line-height: 1rem;
+ line-height: var(--space-m);
}
[dir="rtl"] .claro-details__summary {
- padding-right: 2.25rem;
- padding-left: 1rem;
+ padding-right: var(--details-desktop-wrapper-padding-start);
+ padding-left: var(--space-m);
}
/* Modifiers */
@@ -95,16 +100,16 @@
.claro-details__summary--accordion,
.claro-details__summary--accordion-item,
.claro-details__summary--vertical-tabs-item {
- padding: 1.25rem 1.5rem 1.25rem 2.25rem; /* LTR */
- background: #fff;
- line-height: 1.5rem;
+ padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
+ background: var(--color-white);
+ line-height: var(--summary-accordion-line-height);
}
[dir="rtl"] .claro-details__summary--accordion,
[dir="rtl"] .claro-details__summary--accordion-item,
[dir="rtl"] .claro-details__summary--vertical-tabs-item {
- padding-right: 2.25rem;
- padding-left: 1.5rem;
+ padding-right: var(--details-desktop-wrapper-padding-start);
+ padding-left: var(--space-l);
}
/**
@@ -117,13 +122,13 @@
}
.claro-details--accordion-item:first-child .claro-details__summary--accordion-item {
- border-top-left-radius: 2px;
- border-top-right-radius: 2px;
+ border-top-left-radius: var(--details-border-size-radius);
+ border-top-right-radius: var(--details-border-size-radius);
}
.claro-details--accordion-item:last-child .claro-details__summary--accordion-item {
- border-bottom-right-radius: 2px;
- border-bottom-left-radius: 2px;
+ border-bottom-right-radius: var(--details-border-size-radius);
+ border-bottom-left-radius: var(--details-border-size-radius);
}
/**
@@ -139,13 +144,13 @@
.claro-details__summary::before {
position: absolute;
top: 50%;
- left: 0.75rem; /* LTR */
+ left: var(--space-s); /* LTR */
display: inline-block;
- width: 1rem;
- height: 1rem;
- margin-top: -0.5rem;
+ width: var(--space-m);
+ height: var(--space-m);
+ margin-top: calc(var(--space-m)/-2);
content: "";
- transition: transform 0.12s ease-in 0s;
+ transition: transform var(--details-transform-transition-duration) ease-in 0s;
transform: rotate(90deg); /* LTR */
text-align: center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%23545560'/%3e%3c/svg%3e");
@@ -153,7 +158,7 @@
}
[dir="rtl"] .claro-details__summary::before {
- right: 0.75rem;
+ right: var(--space-s);
left: auto;
transform: rotate(-270deg);
}
@@ -168,7 +173,7 @@
.claro-details__summary::before {
width: 0.5625rem;
height: 0.5625rem;
- transition: transform 0.12s ease-in 0s, margin 0.12s ease-in 0s;
+ transition: transform var(--details-transform-transition-duration) ease-in 0s, margin var(--details-transform-transition-duration) ease-in 0s;
transform: rotate(135deg); /* LTR */
border: 0.125rem solid;
border-bottom-color: transparent;
@@ -219,11 +224,11 @@
bottom: -1px;
left: -1px;
content: "";
- transition: opacity 0.2s ease-in-out;
+ transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
pointer-events: none;
opacity: 0;
- border-radius: 2px;
- box-shadow: inset 0 0 0 3px #26a769;
+ border-radius: var(--details-border-size-radius);
+ box-shadow: inset 0 0 0 var(--details-summary-focus-border-size) var(--details-summary-shadow-color);
}
.claro-details > .claro-details__summary--accordion-item::after,
@@ -233,14 +238,14 @@
.claro-details:first-child > .claro-details__summary--accordion-item::after,
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item::after {
- border-top-left-radius: 2px;
- border-top-right-radius: 2px;
+ border-top-left-radius: var(--details-border-size-radius);
+ border-top-right-radius: var(--details-border-size-radius);
}
.claro-details:last-child > .claro-details__summary--accordion-item::after,
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item::after {
- border-bottom-right-radius: 2px;
- border-bottom-left-radius: 2px;
+ border-bottom-right-radius: var(--details-border-size-radius);
+ border-bottom-left-radius: var(--details-border-size-radius);
}
/**
@@ -266,7 +271,7 @@
[open] .claro-details__summary--accordion,
[open] .claro-details__summary--accordion-item,
[open] .claro-details__summary--vertical-tabs-item {
- color: #003cc5;
+ color: var(--color-absolutezero);
}
.claro-details__summary:hover::before,
@@ -279,7 +284,7 @@
}
.claro-details[open] > .claro-details__summary {
- border-radius: 1px 1px 0 0;
+ border-radius: var(--size-summary-border-radius) var(--size-summary-border-radius) 0 0;
}
.claro-details[open] > .claro-details__summary::before {
@@ -308,8 +313,8 @@
}
.claro-details__summary:hover {
- color: #003cc5;
- background-color: #f0f5fd;
+ color: var(--color-absolutezero);
+ background-color: var(--color-bgblue-hover);
}
/**
@@ -328,8 +333,8 @@
[open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
opacity: 1;
- border: 3px solid #003cc5;
- border-width: 0 0 0 3px; /* LTR */
+ border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
+ border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
box-shadow: none;
}
@@ -339,7 +344,7 @@
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
- border-width: 0 3px 0 0;
+ border-width: 0 var(--details-summary-focus-border-size) 0 0;
}
.claro-details__summary:focus::after,
@@ -363,7 +368,7 @@
}
.claro-details[open] > .claro-details__summary:focus {
- color: #003cc5;
+ color: var(--color-absolutezero);
}
/**
@@ -382,7 +387,7 @@
.claro-details__wrapper,
.claro-details__content {
- margin: 1rem;
+ margin: var(--space-m);
}
.claro-details__wrapper--accordion,
@@ -405,13 +410,13 @@
.claro-details__wrapper--accordion,
.claro-details__wrapper--accordion-item,
.claro-details__wrapper--vertical-tabs-item {
- border-top: 1px solid #dedfe4;
- background-color: rgba(243, 244, 249, 0.4);
+ border-top: var(--details-border-size) solid var(--details-border-color);
+ background-color: var(--color-gray-050-o-40);
}
@media screen and (min-width: 48em) {
.claro-details__wrapper {
- margin: 1.5rem 2.25rem;
+ margin: var(--space-l) var(--details-desktop-wrapper-padding-start);
}
.claro-details__wrapper--accordion,
@@ -432,26 +437,26 @@
.claro-details__content--accordion,
.claro-details__content--accordion-item,
.claro-details__content--vertical-tabs-item {
- margin: 1rem 1rem 1.5rem;
+ margin: var(--space-m) var(--space-m) var(--space-l);
}
@media screen and (min-width: 85em) {
.vertical-tabs .claro-details__content--vertical-tabs-item {
- margin: 1.5rem;
+ margin: var(--space-l);
}
}
/* Description. */
.claro-details__description {
- margin-bottom: 1rem;
- color: #55565b;
- font-size: 0.79rem; /* ~13px */
+ margin-bottom: var(--space-m);
+ color: var(--input-fg-color--description);
+ font-size: var(--font-size-xs); /* ~13px */
line-height: 1.0625rem; /* 17px */
}
.claro-details__description.is-disabled {
- color: #828388;
+ color: var(--input--disabled-fg-color);
}
/**
@@ -469,28 +474,28 @@
.collapse-processed > .claro-details__summary .details-title {
position: relative;
display: block;
- padding: 1rem 1rem 1rem 2.25rem; /* LTR */
+ padding: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
text-decoration: none;
color: inherit;
- border-radius: 1px;
+ border-radius: var(--size-summary-border-radius);
}
[dir="rtl"] .collapse-processed > .claro-details__summary .details-title {
- padding-right: 2.25rem;
- padding-left: 1rem;
+ padding-right: var(--details-desktop-wrapper-padding-start);
+ padding-left: var(--space-m);
}
.collapse-processed > .claro-details__summary--accordion .details-title,
.collapse-processed > .claro-details__summary--accordion-item .details-title,
.collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
- padding: 1.25rem 1.5rem 1.25rem 2.25rem; /* LTR */
+ padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
}
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion .details-title,
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion-item .details-title,
[dir="rtl"] .collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
- padding-right: 2.25rem;
- padding-left: 1.5rem;
+ padding-right: var(--details-desktop-wrapper-padding-start);
+ padding-left: var(--space-l);
}
/* Focus and hover states. */
@@ -510,11 +515,11 @@
bottom: -1px;
left: -1px;
content: "";
- transition: opacity 0.2s ease-in-out;
+ transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
pointer-events: none;
opacity: 0;
- border: 3px solid #26a769;
- border-radius: 2px;
+ border: var(--details-summary-focus-border-size) solid var(--color-focus);
+ border-radius: var(--details-border-size-radius);
}
.collapse-processed > .claro-details__summary .details-title:focus::after {
@@ -530,14 +535,14 @@
.collapse-processed:first-child > .claro-details__summary--accordion-item .details-title::after,
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item .details-title::after {
- border-top-left-radius: 2px;
- border-top-right-radius: 2px;
+ border-top-left-radius: var(--details-border-size-radius);
+ border-top-right-radius: var(--details-border-size-radius);
}
.collapse-processed:last-child > .claro-details__summary--accordion-item .details-title::after,
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item .details-title::after {
- border-bottom-right-radius: 2px;
- border-bottom-left-radius: 2px;
+ border-bottom-right-radius: var(--details-border-size-radius);
+ border-bottom-left-radius: var(--details-border-size-radius);
}
.collapse-processed[open] > .claro-details__summary--accordion .details-title::after,
@@ -549,8 +554,8 @@
.claro-details__summary-summary {
display: block;
- color: #55565b;
- font-size: 0.889rem;
+ color: var(--color-gray-800);
+ font-size: var(--font-size-s);
font-weight: normal;
}
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index d34e44d9075f8fcfbce4587ca7d273f101ed7b9a..14aaebe1431993be4cfa3369b2a3fe08a96c910b 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -5,8 +5,6 @@
* @see collapse.js
*/
-@import "../base/variables.pcss.css";
-
/**
* Available modifiers are:
* - .claro-details--accordion
diff --git a/core/themes/claro/css/components/dialog.css b/core/themes/claro/css/components/dialog.css
index 3844591bfc84ea18ae6c812ea4c538f2970c1091..dd1b5f4dde0e13d9159ed2b4e43d318f5928f6c9 100644
--- a/core/themes/claro/css/components/dialog.css
+++ b/core/themes/claro/css/components/dialog.css
@@ -13,14 +13,14 @@
.ui-dialog {
padding: 0;
border: 0;
- border-radius: 0.25rem;
+ border-radius: var(--jui-dialog-border-radius);
background: transparent;
- box-shadow: 0 0 1rem -0.25rem #232429;
+ box-shadow: var(--jui-dialog-box-shadow);
}
.ui-dialog:focus {
- outline: 2px dotted transparent;
- box-shadow: 0 0 0 3px #26a769;
+ outline: var(--jui-dialog--focus-outline);
+ box-shadow: var(--jui-dialog--focus-box-shadow);
}
@media all and (max-width: 48em) { /* 768px */
@@ -33,22 +33,22 @@
.ui-dialog .ui-dialog-titlebar {
position: relative;
box-sizing: border-box;
- padding: 1rem 4rem 1rem 1.5rem; /* LTR */
- color: #fff;
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
- background: #232429;
- line-height: 2rem;
+ padding: var(--space-m) var(--jui-dialog-close-button-reserved-space) var(--space-m) var(--space-l); /* LTR */
+ color: var(--jui-dialog-title-color);
+ border-top-left-radius: var(--jui-dialog-border-radius);
+ border-top-right-radius: var(--jui-dialog-border-radius);
+ background: var(--jui-dialog-title-bg-color);
+ line-height: calc(var(--space-m)*2);
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
- padding-right: 1.5rem;
- padding-left: 4rem;
+ padding-right: var(--space-l);
+ padding-left: var(--jui-dialog-close-button-reserved-space);
}
.ui-dialog .ui-dialog-title {
-webkit-font-smoothing: antialiased;
- font-size: 1.424rem;
+ font-size: var(--jui-dialog-title-font-size);
font-weight: bold;
}
@@ -57,14 +57,14 @@
top: 50%;
right: 0; /* LTR */
box-sizing: border-box;
- width: 2rem;
- height: 2rem;
- margin: 0 1.5rem;
+ width: var(--jui-dialog-close-button-size);
+ height: var(--jui-dialog-close-button-size);
+ margin: 0 var(--space-l);
padding: 0;
transition: all 0.1s;
transform: translateY(-50%);
border: 2px solid transparent;
- border-radius: 50%;
+ border-radius: var(--jui-dialog-close-button-border-radius);
background: none;
}
@@ -74,12 +74,12 @@
}
.ui-dialog .ui-dialog-titlebar-close:hover {
- border-color: #fff;
+ border-color: var(--color-white);
}
.ui-dialog .ui-dialog-titlebar-close:focus {
- border-color: #26a769;
- outline: 2px dotted transparent;
+ border-color: var(--color-focus);
+ outline: var(--jui-dialog--focus-outline);
box-shadow: none;
}
@@ -93,21 +93,21 @@
.ui-dialog > .ui-dialog-content {
overflow: auto;
- padding: 1rem 1.5rem;
- color: #232429;
- background: #fff;
+ padding: var(--space-m) var(--space-l);
+ color: var(--color-text);
+ background: var(--color-white);
}
.ui-dialog > .ui-dialog-buttonpane {
- color: #232429;
- border-bottom-right-radius: 4px;
- border-bottom-left-radius: 4px;
- background: #f3f4f9;
+ color: var(--color-text);
+ border-bottom-right-radius: var(--jui-dialog-border-radius);
+ border-bottom-left-radius: var(--jui-dialog-border-radius);
+ background: var(--color-gray-050);
}
.ui-dialog-buttonpane .ui-dialog-buttonset {
justify-content: flex-end;
- margin: 0 0.75rem;
+ margin: 0 var(--space-s);
}
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
diff --git a/core/themes/claro/css/components/dialog.pcss.css b/core/themes/claro/css/components/dialog.pcss.css
index b0be947e86bc9b1de0051a12852c3bd83fb6001b..5a164ee158a9c72840e99e8cfbb012b51bb6a636 100644
--- a/core/themes/claro/css/components/dialog.pcss.css
+++ b/core/themes/claro/css/components/dialog.pcss.css
@@ -3,8 +3,6 @@
* Presentational styles for Drupal dialogs.
*/
-@import "../base/variables.pcss.css";
-
.ui-dialog {
padding: 0;
border: 0;
diff --git a/core/themes/claro/css/components/divider.css b/core/themes/claro/css/components/divider.css
index c5836b3f61b76d0b831a19c721f733d5c5ca2be1..68d1a7546fd1cfc808911bebc8d246574c955019 100644
--- a/core/themes/claro/css/components/divider.css
+++ b/core/themes/claro/css/components/divider.css
@@ -11,5 +11,5 @@
.divider {
height: 1px;
- background-color: rgba(142, 146, 156, 0.5);
+ background-color: var(--color-divider);
}
diff --git a/core/themes/claro/css/components/divider.pcss.css b/core/themes/claro/css/components/divider.pcss.css
index 0959b719371c3023f697f30567d4d3e371688a7a..7f9949ba801bd11c9f3f7edfee096a42791667fb 100644
--- a/core/themes/claro/css/components/divider.pcss.css
+++ b/core/themes/claro/css/components/divider.pcss.css
@@ -2,8 +2,6 @@
* Divider.
*/
-@import "../base/variables.pcss.css";
-
.divider {
height: 1px;
background-color: var(--color-divider);
diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index 7556948a02dc39565cd4dc4da2533c01d1904b2d..ebb884a868820a29a253783b477349f5df046fd3 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -18,23 +18,38 @@
/**
* Dropbutton
*/
+ --dropbutton-spacing-size: var(--space-m);
+ --dropbutton-font-size: var(--font-size-base);
+ --dropbutton-line-height: var(--space-m);
+ --dropbutton-toggle-size: 3rem;
+ --dropbutton-border-size: 1px;
+ --dropbutton-toggle-size-spacing: var(--dropbutton-border-size);
+ --dropbutton-border-radius-size: 2px;
/* Variant variables: small. */
+ --dropbutton-small-spacing-size: 0.625rem;
+ --dropbutton-small-font-size: var(--font-size-xs);
+ --dropbutton-small-line-height: 0.75rem;
+ --dropbutton-small-toggle-size: calc(var(--dropbutton-small-spacing-size)*2 + var(--dropbutton-small-line-height));
/* Variant variables: extra small. */
+ --dropbutton-extrasmall-spacing-size: 0.375rem;
+ --dropbutton-extrasmall-font-size: var(--font-size-xs);
+ --dropbutton-extrasmall-line-height: 0.75rem;
+ --dropbutton-extrasmall-toggle-size: calc(var(--dropbutton-extrasmall-spacing-size)*2 + var(--dropbutton-extrasmall-line-height));
}
.dropbutton-wrapper {
display: inline-flex;
- border-radius: 2px;
+ border-radius: var(--button-border-radius-size);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.form-actions .dropbutton-wrapper {
- margin: 0.5rem 1rem 0.5rem 0;
+ margin: var(--space-xs) var(--space-m) var(--space-xs) 0;
}
[dir="rtl"] .form-actions .dropbutton-wrapper {
margin-right: 0;
- margin-left: 1rem;
+ margin-left: var(--space-m);
}
.dropbutton-widget {
@@ -62,17 +77,17 @@
}
.js .dropbutton {
- height: 3rem;
+ height: var(--dropbutton-toggle-size);
}
/* Variants. */
.js.no-touchevents .dropbutton--small {
- height: 2rem;
+ height: var(--dropbutton-small-toggle-size);
}
.js.no-touchevents .dropbutton--extrasmall {
- height: 1.5rem;
+ height: var(--dropbutton-extrasmall-toggle-size);
}
/**
@@ -80,32 +95,32 @@
*/
.js .dropbutton--multiple .dropbutton__item:first-of-type {
- margin-right: calc(3rem + 1px); /* LTR */
+ margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
}
[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {
margin-right: 0;
- margin-left: calc(3rem + 1px);
+ margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
}
/* First dropbutton list item variants */
.js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
- margin-right: calc(2rem + 1px); /* LTR */
+ margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
}
[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
margin-right: 0;
- margin-left: calc(2rem + 1px);
+ margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
}
.js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
- margin-right: calc(1.5rem + 1px); /* LTR */
+ margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
}
[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
margin-right: 0;
- margin-left: calc(1.5rem + 1px);
+ margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));
}
/**
@@ -118,11 +133,11 @@
top: 0;
right: 0; /* LTR */
bottom: 0;
- width: 3rem;
- height: 3rem;
- border: 1px solid transparent !important; /* 1 */
- border-radius: 0 2px 2px 0; /* LTR */
- background: #d3d4d9;
+ width: var(--dropbutton-toggle-size);
+ height: var(--dropbutton-toggle-size);
+ border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
+ border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0; /* LTR */
+ background: var(--button-bg-color);
font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */
-webkit-appearance: none;
-moz-appearance: none;
@@ -132,7 +147,7 @@
[dir="rtl"] .dropbutton__toggle {
right: auto;
left: 0;
- border-radius: 2px 0 0 2px;
+ border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size);
}
.dropbutton__toggle::before {
@@ -150,8 +165,8 @@
/* Toggler states. */
.dropbutton__toggle:hover {
- color: #232429;
- background-color: #c1c2c7;
+ color: var(--button-fg-color);
+ background-color: var(--button--hover-bg-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
@@ -160,8 +175,8 @@
}
.dropbutton__toggle:active {
- color: #232429;
- background-color: #adaeb3;
+ color: var(--button-fg-color);
+ background-color: var(--button--active-bg-color);
}
.dropbutton-wrapper.open .dropbutton__toggle::before {
@@ -175,13 +190,13 @@
/* Toggler variants */
.no-touchevents .dropbutton--small .dropbutton__toggle {
- width: 2rem;
- height: 2rem;
+ width: var(--dropbutton-small-toggle-size);
+ height: var(--dropbutton-small-toggle-size);
}
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle {
- width: 1.5rem;
- height: 1.5rem;
+ width: var(--dropbutton-extrasmall-toggle-size);
+ height: var(--dropbutton-extrasmall-toggle-size);
}
.no-touchevents .dropbutton--small .dropbutton__toggle::before,
@@ -234,17 +249,17 @@
.dropbutton__item:first-of-type > * {
display: inline-block;
margin: 0;
- padding: calc(1rem - 1px) calc(1.5rem - 1px);
+ padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)) calc(var(--space-l) - var(--dropbutton-border-size));
cursor: pointer;
text-align: center;
text-decoration: none;
- color: #232429;
- border: 1px solid transparent !important; /* 1 */
- border-radius: 2px;
- background-color: #d3d4d9;
- font-size: 1rem;
+ color: var(--button-fg-color);
+ border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
+ border-radius: var(--button-border-radius-size);
+ background-color: var(--button-bg-color);
+ font-size: var(--dropbutton-font-size);
font-weight: 700;
- line-height: 1rem;
+ line-height: var(--dropbutton-line-height);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -252,37 +267,37 @@
}
.dropbutton--multiple .dropbutton__item:first-of-type > * {
- padding-right: calc(1rem - 1px);
- padding-left: calc(1rem - 1px);
+ padding-right: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
+ padding-left: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
}
/* Variants */
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {
- padding-top: calc(0.625rem - 1px);
- padding-bottom: calc(0.625rem - 1px);
- font-size: 0.79rem;
- line-height: 0.75rem;
+ padding-top: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
+ padding-bottom: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
+ font-size: var(--dropbutton-small-font-size);
+ line-height: var(--dropbutton-small-line-height);
}
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type > * {
- padding-top: calc(0.375rem - 1px);
- padding-bottom: calc(0.375rem - 1px);
- font-size: 0.79rem;
- line-height: 0.75rem;
+ padding-top: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
+ padding-bottom: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
+ font-size: var(--dropbutton-extrasmall-font-size);
+ line-height: var(--dropbutton-extrasmall-line-height);
}
.dropbutton__item:first-of-type > *:hover,
.dropbutton__item:first-of-type > .button:hover {
text-decoration: none;
- color: #232429;
- background-color: #c1c2c7;
+ color: var(--button-fg-color);
+ background-color: var(--button--hover-bg-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.dropbutton__item:first-of-type > *:focus:hover,
.dropbutton__item:first-of-type > .button:focus:hover {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
}
.dropbutton__item:first-of-type > *:focus {
@@ -290,8 +305,8 @@
}
.dropbutton__item:first-of-type > *:active {
- color: #232429;
- background-color: #adaeb3;
+ color: var(--button-fg-color);
+ background-color: var(--button--active-bg-color);
}
.dropbutton--multiple .dropbutton__item:first-of-type > * {
@@ -304,11 +319,11 @@
}
.js .dropbutton--multiple .dropbutton__item:first-of-type > * {
- border-radius: 2px 0 0 2px; /* LTR */
+ border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
}
[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type > * {
- border-radius: 0 2px 2px 0;
+ border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;
}
.dropbutton > .dropbutton__item > a,
@@ -334,7 +349,7 @@
*/
.dropbutton__item:first-of-type ~ .dropbutton__item {
- border: 1px solid #d3d4d9;
+ border: var(--dropbutton-border-size) solid var(--color-gray-200);
border-bottom: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
@@ -344,8 +359,8 @@
}
.dropbutton__item ~ .dropbutton__item:last-child {
- border-bottom: 1px solid #d3d4d9;
- border-radius: 0 0 2px 2px;
+ border-bottom: var(--dropbutton-border-size) solid var(--color-gray-200);
+ border-radius: 0 0 var(--dropbutton-border-radius-size) var(--dropbutton-border-radius-size);
}
/**
@@ -355,16 +370,16 @@
.dropbutton__item:first-of-type ~ .dropbutton__item > a,
.dropbutton__item:first-of-type ~ .dropbutton__item > .button {
position: relative;
- padding: calc(1rem - 1px);
+ padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
text-decoration: none;
- color: #55565b;
- border: 1px solid transparent !important; /* 1 */
- border-radius: 2px;
- background: #fff;
+ color: var(--color-gray-800);
+ border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
+ border-radius: var(--dropbutton-border-radius-size);
+ background: var(--color-white);
box-shadow: 0;
- font-size: 1rem;
+ font-size: var(--dropbutton-font-size);
font-weight: normal;
- line-height: 1rem;
+ line-height: var(--dropbutton-line-height);
-webkit-font-smoothing: antialiased;
}
@@ -389,18 +404,18 @@
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
- padding-top: 0.625rem;
- padding-bottom: 0.625rem;
- font-size: 0.79rem;
- line-height: 0.75rem;
+ padding-top: var(--dropbutton-small-spacing-size);
+ padding-bottom: var(--dropbutton-small-spacing-size);
+ font-size: var(--dropbutton-small-font-size);
+ line-height: var(--dropbutton-small-line-height);
}
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
- padding-top: 0.375rem;
- padding-bottom: 0.375rem;
- font-size: 0.79rem;
- line-height: 0.75rem;
+ padding-top: var(--dropbutton-extrasmall-spacing-size);
+ padding-bottom: var(--dropbutton-extrasmall-spacing-size);
+ font-size: var(--dropbutton-extrasmall-font-size);
+ line-height: var(--dropbutton-extrasmall-line-height);
}
/* States. */
@@ -411,8 +426,8 @@
}
.dropbutton__item:first-of-type ~ .dropbutton__item > *:hover {
- color: #232429;
- background: #f3f4f9;
+ color: var(--color-text);
+ background: var(--color-gray-050);
}
.dropbutton__item > .button:not(:focus) {
@@ -420,6 +435,6 @@
}
.dropbutton__item:first-of-type ~ .dropbutton__item > *:focus {
- border-color: #26a769 !important; /* 1 */
- box-shadow: inset 0 0 0 1px #26a769, 0 0 0 1px #26a769;
+ border-color: var(--color-focus) !important; /* 1 */
+ box-shadow: inset 0 0 0 1px var(--color-focus), 0 0 0 1px var(--color-focus);
}
diff --git a/core/themes/claro/css/components/dropbutton.pcss.css b/core/themes/claro/css/components/dropbutton.pcss.css
index 9fd1754ecdd86bc2fd9cf2f5140efcfc657c2b79..45e4425a361a928f7c72fb942972b9421d083fc3 100644
--- a/core/themes/claro/css/components/dropbutton.pcss.css
+++ b/core/themes/claro/css/components/dropbutton.pcss.css
@@ -7,8 +7,6 @@
* contrast mode Firefox.
*/
-@import "../base/variables.pcss.css";
-
:root {
/**
* Dropbutton
diff --git a/core/themes/claro/css/components/entity-meta.css b/core/themes/claro/css/components/entity-meta.css
index bdd1a97d143a63d8ee8970c5ec858a9041a2964c..b1a3413833ca67a07174cb4986bef47841cc9fec 100644
--- a/core/themes/claro/css/components/entity-meta.css
+++ b/core/themes/claro/css/components/entity-meta.css
@@ -10,23 +10,27 @@
* Entity meta.
*/
+:root {
+ --size-entity-meta-spacing: var(--space-xs);
+}
+
.entity-meta__header {
- padding: 0.5rem 1rem 1rem;
- color: #232429;
- border: 1px solid #dedfe4;
- border-radius: 2px;
- background-color: #fff;
+ padding: calc(var(--space-m) - var(--size-entity-meta-spacing)) var(--space-m) calc(var(--space-l) - var(--size-entity-meta-spacing));
+ color: var(--color-fg);
+ border: var(--details-border-size) solid var(--details-border-color);
+ border-radius: var(--details-accordion-border-size-radius);
+ background-color: var(--color-bg);
}
@media screen and (min-width: 48em) {
.entity-meta__header {
- padding: 1rem 1.5rem 1.5rem;
+ padding: calc(var(--space-l) - var(--size-entity-meta-spacing)) var(--space-l) var(--space-l);
}
}
.entity-meta__header .form-item {
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
+ margin-top: var(--size-entity-meta-spacing);
+ margin-bottom: var(--size-entity-meta-spacing);
}
.entity-meta__title {
@@ -37,13 +41,13 @@
}
.entity-meta__revision {
- margin-top: 1.5rem;
+ margin-top: var(--space-l);
}
.entity-meta__header .form-type--item .form-item__label {
display: inline-block;
margin: 0;
- font-size: 1rem;
+ font-size: var(--font-size-base);
}
.entity-meta__header .form-type--item .form-item__label::after {
diff --git a/core/themes/claro/css/components/entity-meta.pcss.css b/core/themes/claro/css/components/entity-meta.pcss.css
index 9615fbc1bfa71fdd73b7dd1045a79fbfc4c72e9e..877bfc978330abedd664b3a90c1dbb8bf54664ce 100644
--- a/core/themes/claro/css/components/entity-meta.pcss.css
+++ b/core/themes/claro/css/components/entity-meta.pcss.css
@@ -3,8 +3,6 @@
* Entity meta.
*/
-@import "../base/variables.pcss.css";
-
:root {
--size-entity-meta-spacing: var(--space-xs);
}
diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css
index 4f579e2990c2492956b57cd93ff0e64c25e5af4a..03f1036616083675c988f6c75e3a58b3cfec7a39 100644
--- a/core/themes/claro/css/components/fieldset.css
+++ b/core/themes/claro/css/components/fieldset.css
@@ -12,13 +12,13 @@
.fieldset {
min-width: 0;
- margin: 1rem 0;
+ margin: var(--space-m) 0;
padding: 0;
- color: #232429;
- border: 1px solid #dedfe4;
- border-radius: 2px;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ color: var(--color-text);
+ border: var(--details-border-size) solid var(--details-border-color);
+ border-radius: var(--base-border-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--details-box-shadow);
}
.fieldset--group {
@@ -48,14 +48,14 @@ _:-ms-fullscreen,
display: contents; /* For Firefox. */
float: left; /* iOS Safari, Android Chrome, Edge. */
width: 100%; /* iOS Safari, Android Chrome, Edge. */
- margin-bottom: 1rem;
- color: #55565b;
+ margin-bottom: var(--space-m);
+ color: var(--color-gray-800);
font-weight: bold;
}
@media screen and (min-width: 48em) {
.fieldset__legend {
- margin-bottom: 1.5rem;
+ margin-bottom: var(--space-l);
}
}
@@ -63,9 +63,9 @@ _:-ms-fullscreen,
float: none;
width: auto;
margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
- margin-bottom: 0.25rem; /* 4px */
+ margin-bottom: calc(var(--space-xs)/2); /* 4px */
color: inherit;
- font-size: 0.889rem; /* 14px */
+ font-size: var(--font-size-s); /* 14px */
line-height: 1.125rem; /* 18px */
}
@@ -78,14 +78,14 @@ _:-ms-fullscreen,
.fieldset__label {
display: block;
- padding: 1rem;
- line-height: 1rem;
+ padding: var(--space-m);
+ line-height: var(--space-m);
}
@media screen and (min-width: 48em) {
.fieldset__label {
- padding-right: 1.5rem;
- padding-left: 1.5rem;
+ padding-right: var(--space-l);
+ padding-left: var(--space-l);
}
}
@@ -95,23 +95,23 @@ _:-ms-fullscreen,
}
.fieldset__label.is-disabled {
- color: #828388;
+ color: var(--input--disabled-fg-color);
}
.fieldset__label.has-error {
- color: #d72222;
+ color: var(--input--error-color);
}
.fieldset__description {
margin-top: 0.375rem; /* 6px */
margin-bottom: 0.375rem; /* 6px */
- color: #55565b;
- font-size: 0.79rem; /* ~13px */
+ color: var(--input-fg-color--description);
+ font-size: var(--font-size-xs); /* ~13px */
line-height: 1.0625rem; /* 17px */
}
.fieldset__description.is-disabled {
- color: #828388;
+ color: var(--input--disabled-fg-color);
}
/* Error message (Inline form errors). */
@@ -119,19 +119,19 @@ _:-ms-fullscreen,
.fieldset__error-message {
margin-top: 0.375rem; /* 6px */
margin-bottom: 0.375rem; /* 6px */
- color: #d72222;
- font-size: 0.79rem; /* ~13px */
+ color: var(--input--error-color);
+ font-size: var(--font-size-xs); /* ~13px */
font-weight: normal;
line-height: 1.0625rem; /* 17px */
}
.fieldset__wrapper {
- margin: 1rem;
+ margin: var(--space-m);
}
@media screen and (min-width: 48em) {
.fieldset__wrapper {
- margin: 1.5rem 1.5rem 1.75rem;
+ margin: var(--space-l) var(--space-l) calc(var(--space-m) + var(--space-s));
}
}
diff --git a/core/themes/claro/css/components/fieldset.pcss.css b/core/themes/claro/css/components/fieldset.pcss.css
index 87669f06171b0715f7307764f9686967be6939b8..c1ef76c1cc906b1944002d93d3628abf30c9cf01 100644
--- a/core/themes/claro/css/components/fieldset.pcss.css
+++ b/core/themes/claro/css/components/fieldset.pcss.css
@@ -3,8 +3,6 @@
* Fieldset styles.
*/
-@import "../base/variables.pcss.css";
-
.fieldset {
min-width: 0;
margin: var(--space-m) 0;
diff --git a/core/themes/claro/css/components/file.css b/core/themes/claro/css/components/file.css
index 27bc76fb8acfcc41eec85b5c6dc28cd4dc8f9765..94923d6bd33de48474d19a813a9a9f347f2ad0d5 100644
--- a/core/themes/claro/css/components/file.css
+++ b/core/themes/claro/css/components/file.css
@@ -11,18 +11,18 @@
*/
.file {
- min-height: 1.0625rem;
- padding-left: 1.5rem; /* LTR */
+ min-height: calc(var(--space-m) + 0.0625rem);
+ padding-left: var(--space-l); /* LTR */
background-position: left 0.0625rem;
- background-size: 1rem 1rem;
- font-size: 0.889rem;
+ background-size: var(--space-m) var(--space-m);
+ font-size: var(--font-size-s);
line-height: 1.125rem;
}
[dir="rtl"] .file {
- padding-right: 1.5rem;
+ padding-right: var(--space-l);
}
.file__size {
- color: #55565b;
+ color: var(--color-gray-800);
}
diff --git a/core/themes/claro/css/components/file.pcss.css b/core/themes/claro/css/components/file.pcss.css
index 0c277eb557f8f8278fb88edbbca3b2b5405c4964..c3c437f05ce4bed9c487d2dd803a0b6a64a36760 100644
--- a/core/themes/claro/css/components/file.pcss.css
+++ b/core/themes/claro/css/components/file.pcss.css
@@ -3,8 +3,6 @@
* Extends styles of the file link.
*/
-@import "../base/variables.pcss.css";
-
.file {
min-height: calc(var(--space-m) + 0.0625rem);
padding-left: var(--space-l); /* LTR */
diff --git a/core/themes/claro/css/components/form--checkbox-radio--ie.css b/core/themes/claro/css/components/form--checkbox-radio--ie.css
index 44c46188de2436fa6120b0dd1baa5a1832e227b0..915fde1fa1caac4c7904b58ae05daafc2dda65ce 100644
--- a/core/themes/claro/css/components/form--checkbox-radio--ie.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css
@@ -17,9 +17,9 @@
height: 1.125rem;
vertical-align: text-bottom;
color: transparent; /* IE */
- border: 1px solid #919297;
+ border: 1px solid var(--input-border-color);
border-radius: 2px;
- background: #fff no-repeat 50% 50%;
+ background: var(--input-bg-color) no-repeat 50% 50%;
background-image: url("data:image/svg+xml,%3csvg width='12' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.182 6.966L1.977 4.649l-.182-.19-.18.19-.796.835-.164.173.164.172L4 9.172l.18.19.182-.19 6.818-7.164.164-.172-.164-.173-.795-.835-.181-.19-.182.19-5.841 6.138z' fill='%23FFF'/%3e%3c/svg%3e");
background-size: 100% 100%;
box-shadow: 0 0 0 4px transparent;
@@ -37,61 +37,61 @@
.form-boolean:active::-ms-check,
.form-boolean:hover::-ms-check {
- border-color: #232429;
- box-shadow: inset 0 0 0 1px #232429;
+ border-color: var(--input-fg-color);
+ box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean:focus:active::-ms-check,
.form-boolean:focus:hover::-ms-check {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-checkbox:checked::-ms-check {
color: transparent; /* IE */
- border-color: #003cc5;
- background-color: #003cc5;
+ border-color: var(--input--focus-border-color);
+ background-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
}
.form-boolean--type-checkbox:checked:active::-ms-check,
.form-boolean--type-checkbox:checked:hover::-ms-check {
- border-color: #232429;
- background-color: #232429;
+ border-color: var(--input-fg-color);
+ background-color: var(--input-fg-color);
}
.form-boolean--type-radio:checked::-ms-check {
color: transparent; /* IE */
- border-color: #003cc5;
+ border-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3e%3c/svg%3e");
- box-shadow: inset 0 0 0 1px #003cc5;
+ box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-checkbox:checked:active::-ms-check,
.form-boolean--type-checkbox:checked:hover::-ms-check {
- border-color: #232429;
- background-color: #232429;
+ border-color: var(--input-fg-color);
+ background-color: var(--input-fg-color);
}
.form-boolean--type-radio:checked::-ms-check {
- border-color: #003cc5;
+ border-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3e%3c/svg%3e");
- box-shadow: inset 0 0 0 1px #003cc5;
+ box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:focus::-ms-check {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:active::-ms-check,
.form-boolean--type-radio:checked:hover::-ms-check {
- border-color: #232429;
+ border-color: var(--input-fg-color);
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3e%3c/svg%3e");
- box-shadow: inset 0 0 0 1px #232429;
+ box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-radio:checked:focus:active::-ms-check,
.form-boolean--type-radio:checked:focus:hover::-ms-check {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
}
/**
@@ -99,32 +99,32 @@
*/
.form-boolean.error::-ms-check {
- border-color: #d72222;
- background-color: #fff;
- box-shadow: inset 0 0 0 1px #d72222;
+ border-color: var(--input--error-border-color);
+ background-color: var(--input-bg-color);
+ box-shadow: inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:active::-ms-check,
.form-boolean.error:hover::-ms-check {
- box-shadow: inset 0 0 0 1px #d72222;
+ box-shadow: inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:focus::-ms-check,
.form-boolean.error:focus:active::-ms-check,
.form-boolean.error:focus:hover::-ms-check {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:checked:active::-ms-check,
.form-boolean.error:checked:hover::-ms-check {
- border-color: #d72222;
- background-color: #fff;
+ border-color: var(--input--error-border-color);
+ background-color: var(--input-bg-color);
}
.form-boolean--type-checkbox.error:checked::-ms-check,
.form-boolean--type-checkbox.error:checked:active::-ms-check,
.form-boolean--type-checkbox.error:checked:hover::-ms-check {
- background-color: #d72222;
+ background-color: var(--input--error-border-color);
}
.form-boolean--type-radio.error:checked::-ms-check,
@@ -134,7 +134,7 @@
}
.form-boolean--type-radio.error:checked:focus::-ms-check {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
}
/**
@@ -148,8 +148,8 @@
.form-boolean--type-radio[disabled]:focus:active::-ms-check,
.form-boolean--type-radio[disabled]:active:hover::-ms-check,
.form-boolean--type-radio[disabled].error:active:hover::-ms-check {
- border-color: #bababf;
- background-color: #f2f2f3;
+ border-color: var(--input--disabled-border-color);
+ background-color: var(--input--disabled-bg-color);
background-image: none;
box-shadow: none;
}
diff --git a/core/themes/claro/css/components/form--checkbox-radio--ie.pcss.css b/core/themes/claro/css/components/form--checkbox-radio--ie.pcss.css
index 250deb0d5f5e500525c912e59a9daccb767c12a2..0fa2b0c310026c10be0866308bcb150f5aa1b381 100644
--- a/core/themes/claro/css/components/form--checkbox-radio--ie.pcss.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.pcss.css
@@ -3,8 +3,6 @@
* Checkbox and radio input elements styles for IE11 and below.
*/
-@import "../base/variables.pcss.css";
-
.form-boolean::-ms-check {
display: inline-block;
box-sizing: border-box;
diff --git a/core/themes/claro/css/components/form--checkbox-radio.css b/core/themes/claro/css/components/form--checkbox-radio.css
index f31467fa0e0d6d7ccb3dfa8643151a2f227549ea..dc1d2e36c4c428355ad8187561b5cdb5d4db8990 100644
--- a/core/themes/claro/css/components/form--checkbox-radio.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.css
@@ -15,12 +15,12 @@
*/
.form-type--boolean {
- margin-left: 1.6875rem; /* LTR */
- line-height: 1.5rem;
+ margin-left: var(--input--label-spacing); /* LTR */
+ line-height: var(--space-l);
}
[dir="rtl"] .form-type--boolean {
- margin-right: 1.6875rem;
+ margin-right: var(--input--label-spacing);
margin-left: 0;
}
@@ -30,15 +30,15 @@
.form-type--boolean .form-boolean {
position: relative;
- top: 0.75rem;
+ top: calc(var(--space-l)/2);
float: left; /* LTR */
- margin-left: -1.6875rem; /* LTR */
+ margin-left: calc(var(--input--label-spacing)*-1); /* LTR */
transform: translateY(-50%);
}
[dir="rtl"] .form-type--boolean .form-boolean {
float: right;
- margin-right: -1.6875rem;
+ margin-right: calc(var(--input--label-spacing)*-1);
margin-left: 0;
}
@@ -79,9 +79,9 @@
width: 1.125rem;
height: 1.125rem;
vertical-align: text-bottom;
- border: 1px solid #919297;
+ border: 1px solid var(--input-border-color);
border-radius: 2px;
- background: #fff no-repeat 50% 50%;
+ background: var(--input-bg-color) no-repeat 50% 50%;
background-image: url("data:image/svg+xml,%3csvg width='12' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.182 6.966L1.977 4.649l-.182-.19-.18.19-.796.835-.164.173.164.172L4 9.172l.18.19.182-.19 6.818-7.164.164-.172-.164-.173-.795-.835-.181-.19-.182.19-5.841 6.138z' fill='%23FFF'/%3e%3c/svg%3e");
background-size: 100% 100%;
box-shadow: 0 0 0 4px transparent;
@@ -98,47 +98,47 @@
.form-boolean:active,
.form-boolean:hover {
- border-color: #232429;
- box-shadow: inset 0 0 0 1px #232429;
+ border-color: var(--input-fg-color);
+ box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean:focus:active,
.form-boolean:focus:hover {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-checkbox:checked {
- border-color: #003cc5;
- background-color: #003cc5;
+ border-color: var(--input--focus-border-color);
+ background-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
}
.form-boolean--type-checkbox:checked:active,
.form-boolean--type-checkbox:checked:hover {
- border-color: #232429;
- background-color: #232429;
+ border-color: var(--input-fg-color);
+ background-color: var(--input-fg-color);
}
.form-boolean--type-radio:checked {
- border-color: #003cc5;
+ border-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3e%3c/svg%3e");
- box-shadow: inset 0 0 0 1px #003cc5;
+ box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:focus {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:active,
.form-boolean--type-radio:checked:hover {
- border-color: #232429;
+ border-color: var(--input-fg-color);
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3e%3c/svg%3e");
- box-shadow: inset 0 0 0 1px #232429;
+ box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-radio:checked:focus:active,
.form-boolean--type-radio:checked:focus:hover {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
}
/**
@@ -146,32 +146,32 @@
*/
.form-boolean.error {
- border-color: #d72222;
- background-color: #fff;
- box-shadow: inset 0 0 0 1px #d72222;
+ border-color: var(--input--error-border-color);
+ background-color: var(--input-bg-color);
+ box-shadow: inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:active,
.form-boolean.error:hover {
- box-shadow: inset 0 0 0 1px #d72222;
+ box-shadow: inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:focus,
.form-boolean.error:focus:active,
.form-boolean.error:focus:hover {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:checked:active,
.form-boolean.error:checked:hover {
- border-color: #d72222;
- background-color: #fff;
+ border-color: var(--input--error-border-color);
+ background-color: var(--input-bg-color);
}
.form-boolean--type-checkbox.error:checked,
.form-boolean--type-checkbox.error:checked:active,
.form-boolean--type-checkbox.error:checked:hover {
- background-color: #d72222;
+ background-color: var(--input--error-border-color);
}
.form-boolean--type-radio.error:checked,
@@ -181,7 +181,7 @@
}
.form-boolean--type-radio.error:checked:focus {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
}
/**
@@ -195,8 +195,8 @@
.form-boolean--type-radio[disabled]:focus:active,
.form-boolean--type-radio[disabled]:active:hover,
.form-boolean--type-radio[disabled].error:active:hover {
- border-color: #bababf;
- background-color: #f2f2f3;
+ border-color: var(--input--disabled-border-color);
+ background-color: var(--input--disabled-bg-color);
background-image: none;
box-shadow: none;
}
diff --git a/core/themes/claro/css/components/form--checkbox-radio.pcss.css b/core/themes/claro/css/components/form--checkbox-radio.pcss.css
index 55a879a08439ef29ed595a595e9fad404c8a02fc..a1fdbaa736451b4b0538da9ea600d6842a160464 100644
--- a/core/themes/claro/css/components/form--checkbox-radio.pcss.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.pcss.css
@@ -3,8 +3,6 @@
* Checkbox and radio input elements.
*/
-@import "../base/variables.pcss.css";
-
/**
* Form item modifiers.
*/
diff --git a/core/themes/claro/css/components/form--field-multiple.css b/core/themes/claro/css/components/form--field-multiple.css
index 6cc3337d961de298d8fbc7844536ae786c667585..eddb02b859f40c7909be86bf718d28710af96cf7 100644
--- a/core/themes/claro/css/components/form--field-multiple.css
+++ b/core/themes/claro/css/components/form--field-multiple.css
@@ -11,8 +11,8 @@
*/
.field-multiple-table {
- margin-top: 1rem;
- margin-bottom: 1rem;
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
}
.form-item--multiple .field-add-more-submit {
diff --git a/core/themes/claro/css/components/form--field-multiple.pcss.css b/core/themes/claro/css/components/form--field-multiple.pcss.css
index d7ed84cf8f007cccc5be72652fcede6f41496431..bfdc44dd5825d8745c99067a26d0d2745ae3c4ac 100644
--- a/core/themes/claro/css/components/form--field-multiple.pcss.css
+++ b/core/themes/claro/css/components/form--field-multiple.pcss.css
@@ -3,8 +3,6 @@
* Styles for multiple field tables.
*/
-@import "../base/variables.pcss.css";
-
.field-multiple-table {
margin-top: var(--space-m);
margin-bottom: var(--space-m);
diff --git a/core/themes/claro/css/components/form--managed-file.css b/core/themes/claro/css/components/form--managed-file.css
index f98245f21ea449d46623e5f4f839192f35a54f9f..1c534316d7ab80e1e470b00c3127d92be7fa836d 100644
--- a/core/themes/claro/css/components/form--managed-file.css
+++ b/core/themes/claro/css/components/form--managed-file.css
@@ -12,6 +12,11 @@
* This includes the styles for the file widgets and the image widgets.
*/
+:root {
+ --file-widget-form-item-min-width: 16rem;
+ --file-widget-form-item-max-width: 32rem;
+}
+
/**
* The root element of the file/image widget.
*/
@@ -55,7 +60,7 @@
/* Add some bottom margin for single widgets if no meta is present. */
.form-managed-file.is-single.has-value .form-managed-file__main:last-child {
- margin-bottom: 1rem;
+ margin-bottom: var(--space-m);
}
/**
@@ -77,7 +82,7 @@
display: flex;
flex-wrap: wrap;
align-items: flex-start;
- margin-top: 1rem; /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
+ margin-top: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
}
/**
@@ -113,18 +118,18 @@
.form-managed-file__image-preview {
flex: 0 0 auto;
max-width: 100%;
- margin-bottom: 1rem;
+ margin-bottom: var(--space-m);
}
/* Add some 'end' margin if there are other meta inputs. */
.form-managed-file.has-meta .form-managed-file__image-preview {
- margin-right: 1rem; /* LTR */
+ margin-right: var(--space-m); /* LTR */
}
[dir="rtl"] .form-managed-file.has-meta .form-managed-file__image-preview {
margin-right: 0;
- margin-left: 1rem;
+ margin-left: var(--space-m);
}
/**
@@ -133,7 +138,7 @@
*/
td .form-managed-file.no-meta .form-managed-file__image-preview {
- margin-bottom: 0.5rem;
+ margin-bottom: var(--space-xs);
}
/**
@@ -148,7 +153,7 @@ td .form-managed-file.no-meta .form-managed-file__image-preview {
*/
.form-managed-file__meta-items {
- flex: 1 1 16rem;
+ flex: 1 1 var(--file-widget-form-item-min-width);
max-width: 100%;
}
@@ -160,7 +165,7 @@ td .form-managed-file.no-meta .form-managed-file__image-preview {
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
*::-ms-backdrop,
.form-managed-file__meta-items {
- flex-basis: 32rem;
+ flex-basis: var(--file-widget-form-item-max-width);
}
}
@@ -190,7 +195,6 @@ td .form-managed-file.no-meta .form-managed-file__image-preview {
.form-managed-file .file {
word-break: break-all;
-webkit-hyphens: auto;
- -ms-hyphens: auto;
hyphens: auto;
}
@@ -200,12 +204,12 @@ td .form-managed-file.no-meta .form-managed-file__image-preview {
.form-managed-file__main .file {
flex: 1 1 auto;
- margin: 0.5rem 1rem 0.5rem 0; /* LTR */
+ margin: var(--space-xs) var(--space-m) var(--space-xs) 0; /* LTR */
}
[dir="rtl"] .form-managed-file__main .file {
margin-right: 0;
- margin-left: 1rem;
+ margin-left: var(--space-m);
}
/**
@@ -247,9 +251,9 @@ td .form-managed-file.no-meta .form-managed-file__image-preview {
*/
.form-managed-file__meta .form-item {
- max-width: 32rem;
+ max-width: var(--file-widget-form-item-max-width);
margin-top: 0; /* Top margin is added by the parent element */
- margin-bottom: 1rem;
+ margin-bottom: var(--space-m);
}
/**
@@ -258,7 +262,7 @@ td .form-managed-file.no-meta .form-managed-file__image-preview {
*/
.form-managed-file__meta .form-item:last-child {
- margin-bottom: 0.5rem;
+ margin-bottom: var(--space-xs);
}
.form-managed-file__meta .form-element {
@@ -270,6 +274,6 @@ td .form-managed-file.no-meta .form-managed-file__image-preview {
*/
.file-widget-multiple.has-table .form-type--managed-file {
- margin-right: 1rem;
- margin-left: 1rem;
+ margin-right: var(--space-m);
+ margin-left: var(--space-m);
}
diff --git a/core/themes/claro/css/components/form--managed-file.pcss.css b/core/themes/claro/css/components/form--managed-file.pcss.css
index 793813cc150519449c119d2aa0d50f83f4edf891..76efb20ea30d24aabc5edea8c4be6fb2a81ef989 100644
--- a/core/themes/claro/css/components/form--managed-file.pcss.css
+++ b/core/themes/claro/css/components/form--managed-file.pcss.css
@@ -5,8 +5,6 @@
* This includes the styles for the file widgets and the image widgets.
*/
-@import "../base/variables.pcss.css";
-
:root {
--file-widget-form-item-min-width: 16rem;
--file-widget-form-item-max-width: 32rem;
diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css
index f6edac5e758cf87c044672de581cc702f4d08cf6..96554eaf22074b3759a1e61a3c1f844ddb29328d 100644
--- a/core/themes/claro/css/components/form--password-confirm.css
+++ b/core/themes/claro/css/components/form--password-confirm.css
@@ -12,9 +12,17 @@
:root {
/* Weak */
+ --password-strength-bar--weak-bg-color: var(--color-maximumred);
+ --password-strength-bar--weak-border-color: var(--color-maximumred);
/* Fair */
+ --password-strength-bar--fair-bg-color: var(--color-sunglow);
+ --password-strength-bar--fair-border-color: #977405;
/* Good */
+ --password-strength-bar--good-bg-color: var(--color-lightninggreen);
+ --password-strength-bar--good-border-color: var(--color-lightninggreen);
/* Strong */
+ --password-strength-bar--strong-bg-color: var(--color-lightninggreen);
+ --password-strength-bar--strong-border-color: var(--color-lightninggreen);
}
/**
@@ -35,7 +43,7 @@
.js .password-confirm__confirm {
max-height: 10rem;
- transition: max-height 0.2s ease-in-out, margin 0.2s ease-in-out;
+ transition: max-height var(--speed-transition) ease-in-out, margin var(--speed-transition) ease-in-out;
}
@media screen and (prefers-reduced-motion: reduce) {
@@ -63,17 +71,17 @@
*/
.password-strength {
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
+ margin-top: var(--progress-bar-spacing-size);
+ margin-bottom: var(--progress-bar-spacing-size);
}
.password-strength__track {
- height: calc(0.5rem - 2px);
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
- border: 1px solid #919297;
- border-radius: 0.5rem;
- background-color: #d3d4d9;
+ height: var(--progress-bar-small-size);
+ margin-top: var(--progress-bar-spacing-size);
+ margin-bottom: var(--progress-bar-spacing-size);
+ border: var(--progress-bar-border-size) solid var(--progress-track-border-color);
+ border-radius: var(--progress-bar-small-size-radius);
+ background-color: var(--progress-track-bg-color);
}
.password-strength__track::after {
@@ -83,12 +91,12 @@
}
.password-strength__bar {
- min-width: calc(0.5rem - 2px);
- height: calc(0.5rem - 2px);
- margin: -1px;
- transition: width 0.5s ease-out;
- border: 1px solid transparent;
- border-radius: 0.5rem;
+ min-width: var(--progress-bar-small-size);
+ height: var(--progress-bar-small-size);
+ margin: calc(var(--progress-bar-border-size)*-1);
+ transition: var(--progress-bar-transition);
+ border: var(--progress-bar-border-size) solid transparent;
+ border-radius: var(--progress-bar-small-size-radius);
background-color: transparent;
}
@@ -111,38 +119,38 @@
.password-strength__title {
overflow: hidden;
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
- color: #55565b;
- font-size: 0.79rem;
- line-height: 1rem;
+ margin-top: var(--progress-bar-spacing-size);
+ margin-bottom: var(--progress-bar-spacing-size);
+ color: var(--progress-bar-description-color);
+ font-size: var(--progress-bar-description-font-size);
+ line-height: var(--space-m);
}
.password-strength__text {
- color: #232429;
+ color: var(--progress-bar-label-color);
font-weight: bold;
}
/* Password strength states */
.password-strength__bar.is-weak {
- border-color: #d72222;
- background-color: #d72222;
+ border-color: var(--password-strength-bar--weak-border-color);
+ background-color: var(--password-strength-bar--weak-bg-color);
}
.password-strength__bar.is-fair {
- border-color: #977405;
- background-color: #ffd23f;
+ border-color: var(--password-strength-bar--fair-border-color);
+ background-color: var(--password-strength-bar--fair-bg-color);
}
.password-strength__bar.is-good {
- border-color: #26a769;
- background-color: #26a769;
+ border-color: var(--password-strength-bar--good-border-color);
+ background-color: var(--password-strength-bar--good-bg-color);
}
.password-strength__bar.is-strong {
- border-color: #26a769;
- background-color: #26a769;
+ border-color: var(--password-strength-bar--strong-border-color);
+ background-color: var(--password-strength-bar--strong-bg-color);
}
.is-initial.is-password-empty .password-strength__title {
@@ -158,14 +166,14 @@
*/
.password-match-message {
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
- color: #55565b;
- font-size: 0.79rem;
+ margin-top: var(--progress-bar-spacing-size);
+ margin-bottom: var(--progress-bar-spacing-size);
+ color: var(--progress-bar-description-color);
+ font-size: var(--progress-bar-description-font-size);
}
.password-match-message__text {
- color: #232429;
+ color: var(--progress-bar-label-color);
font-weight: bold;
}
@@ -180,22 +188,22 @@
*/
.password-suggestions {
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
- padding: 1rem;
- color: #55565b;
- border: 1px solid #d3d4d9;
- border-radius: 2px;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- font-size: 0.79rem;
+ margin-top: var(--progress-bar-spacing-size);
+ margin-bottom: var(--space-xs);
+ padding: var(--space-m);
+ color: var(--progress-bar-description-color);
+ border: 1px solid var(--color-gray-200);
+ border-radius: var(--base-border-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--details-box-shadow);
+ font-size: var(--progress-bar-description-font-size);
}
.password-suggestions__tips {
- margin: 0.5rem 0 0 1.5rem; /* LTR */
+ margin: var(--space-xs) 0 0 var(--space-l); /* LTR */
}
[dir="rtl"] .password-suggestions__tips {
- margin-right: 1.5rem;
+ margin-right: var(--space-l);
margin-left: 0;
}
diff --git a/core/themes/claro/css/components/form--password-confirm.pcss.css b/core/themes/claro/css/components/form--password-confirm.pcss.css
index bdd5f816126b45cea8f9800b66a119e359f75e16..a14e88d6d890964635a2943c30bbef1d0987e274 100644
--- a/core/themes/claro/css/components/form--password-confirm.pcss.css
+++ b/core/themes/claro/css/components/form--password-confirm.pcss.css
@@ -3,8 +3,6 @@
* Visual styles for the Password widgets.
*/
-@import "../base/variables.pcss.css";
-
:root {
/* Weak */
--password-strength-bar--weak-bg-color: var(--color-maximumred);
diff --git a/core/themes/claro/css/components/form--select.css b/core/themes/claro/css/components/form--select.css
index 4d86e147898660a6327e1cc3263846d16852d91d..b2a64f6cd593a5ac702949a61b6b7ab773d63efa 100644
--- a/core/themes/claro/css/components/form--select.css
+++ b/core/themes/claro/css/components/form--select.css
@@ -11,7 +11,7 @@
*/
.form-element--type-select {
- padding-right: calc(2rem - 1px);
+ padding-right: calc(2rem - var(--input-border-size));
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: 100% 50%;
@@ -19,21 +19,21 @@
}
[dir="rtl"] .form-element--type-select {
- padding-right: calc(1rem - 1px);
- padding-left: calc(2rem - 1px);
+ padding-right: calc(1rem - var(--input-border-size));
+ padding-left: calc(2rem - var(--input-border-size));
background-position: 0 50%;
}
.no-touchevents .form-element--type-select.form-element--extrasmall,
.no-touchevents .form-element--type-select[name$="][_weight]"] {
- padding-right: calc(1.5rem - 1px);
+ padding-right: calc(1.5rem - var(--input-border-size));
background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
}
[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
- padding-right: calc(0.5rem - 1px);
- padding-left: calc(1.5rem - 1px);
+ padding-right: calc(0.5rem - var(--input-border-size));
+ padding-left: calc(1.5rem - var(--input-border-size));
}
.form-element--type-select::-ms-expand {
diff --git a/core/themes/claro/css/components/form--select.pcss.css b/core/themes/claro/css/components/form--select.pcss.css
index 70433a81dd49e29f3e73cbd288a2f59ace8977df..682c2639f52be38a47043c8ee4c5445b9be5d92d 100644
--- a/core/themes/claro/css/components/form--select.pcss.css
+++ b/core/themes/claro/css/components/form--select.pcss.css
@@ -3,8 +3,6 @@
* Select input elements.
*/
-@import "../base/variables.pcss.css";
-
.form-element--type-select {
padding-right: calc(2rem - var(--input-border-size));
background-image: url(../../images/icons/545560/chevron-down.svg);
diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css
index 2448b96675fffd2fa84d8a168a11e7515637c614..5b68fe8c04255882e9ce782229fb427c520d305f 100644
--- a/core/themes/claro/css/components/form--text.css
+++ b/core/themes/claro/css/components/form--text.css
@@ -13,14 +13,14 @@
.form-element {
box-sizing: border-box;
max-width: 100%;
- min-height: 3rem; /* iOS. */
- padding: calc(0.75rem - 1px) calc(1rem - 1px);
- color: #232429;
- border: 1px solid #919297;
- border-radius: 0.125rem;
- background: #fff;
- font-size: 1rem;
- line-height: 1.5rem;
+ min-height: calc(var(--input-padding-vertical)*2 + var(--input-border-size)*2 + var(--input-line-height)); /* iOS. */
+ padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+ color: var(--input-fg-color);
+ border: var(--input-border-size) solid var(--input-border-color);
+ border-radius: var(--input-border-radius-size);
+ background: var(--input-bg-color);
+ font-size: var(--input-font-size);
+ line-height: var(--input-line-height);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Being able to control inner box shadow on iOS. */
@@ -28,10 +28,10 @@
.no-touchevents .form-element--extrasmall,
.no-touchevents .form-element[name$="][_weight]"] {
- min-height: 1.5rem; /* iOS. */
- padding: calc(0.15rem - 1px) calc(0.5rem - 1px);
- font-size: 0.889rem;
- line-height: 1.2rem;
+ min-height: calc(var(--input--extrasmall-padding-vertical)*2 + var(--input-border-size)*2 + var(--input--extrasmall-line-height)); /* iOS. */
+ padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
+ font-size: var(--input--extrasmall-font-size);
+ line-height: var(--input--extrasmall-line-height);
}
/**
@@ -65,7 +65,7 @@
.form-element--type-color {
min-width: 3rem; /* Bigger input for webkit */
padding: 0; /* Bigger pickable area */
- text-indent: calc(0.75rem - 1px); /* Text-input fallback for non-supporting browsers like Safari */
+ text-indent: calc(0.75rem - var(--input-border-size)); /* Text-input fallback for non-supporting browsers like Safari */
}
/**
@@ -105,25 +105,25 @@ _:-ms-fullscreen,
*/
.form-element:active {
- border-color: #003cc5;
+ border-color: var(--input--focus-border-color);
}
.form-element:hover {
- border-color: #232429;
- box-shadow: inset 0 0 0 1px #232429;
+ border-color: var(--input--hover-border-color);
+ box-shadow: inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
}
.form-element:focus {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
}
.form-element:hover:focus {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
}
.form-element.error {
- border-width: 2px;
- border-color: #d72222;
+ border-width: var(--input--error-border-size);
+ border-color: var(--input--error-border-color);
}
.form-element.error:hover {
@@ -131,20 +131,20 @@ _:-ms-fullscreen,
}
.form-element.error:hover:focus {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
}
.form-element--type-textarea.error + .cke {
- border-color: #d72222;
+ border-color: var(--input--error-border-color);
}
.form-element[disabled] {
- color: #828388;
- border-color: #bababf;
- background-color: #f2f2f3;
+ color: var(--input--disabled-fg-color);
+ border-color: var(--input--disabled-border-color);
+ background-color: var(--input--disabled-bg-color);
box-shadow: none;
/* https://stackoverflow.com/q/262158#answer-23511280 */
- -webkit-text-fill-color: #828388;
+ -webkit-text-fill-color: var(--input--disabled-fg-color);
}
/**
diff --git a/core/themes/claro/css/components/form--text.pcss.css b/core/themes/claro/css/components/form--text.pcss.css
index d6d09b6f88c50a36dfeb14fd858e034c50e1ae97..e025048a7602dafdbd7f01752d9c361a2414dc2a 100644
--- a/core/themes/claro/css/components/form--text.pcss.css
+++ b/core/themes/claro/css/components/form--text.pcss.css
@@ -3,8 +3,6 @@
* Text and textarea input elements.
*/
-@import "../base/variables.pcss.css";
-
.form-element {
box-sizing: border-box;
max-width: 100%;
diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css
index 827e7f745ca85851ab093e2170636d6d1d66544e..9632d1e6b90afbc25b2d5a8e0cb7ffd919f9e16b 100644
--- a/core/themes/claro/css/components/form.css
+++ b/core/themes/claro/css/components/form.css
@@ -10,18 +10,14 @@
* Main form and form item styles.
*/
-:-ms-input-placeholder {
- color: #919297;
-}
-
::placeholder {
- color: #919297;
+ color: var(--input-fg-color--placeholder);
}
/* IE 10 and 11 needs this set as important. */
:-ms-input-placeholder {
- color: #919297 !important;
+ color: var(--input-fg-color--placeholder) !important;
}
/**
@@ -29,8 +25,8 @@
*/
.form-item {
- margin-top: 1.5rem;
- margin-bottom: 1.5rem;
+ margin-top: var(--space-l);
+ margin-bottom: var(--space-l);
}
/**
@@ -41,8 +37,8 @@
tr .form-item,
.container-inline .form-item {
- margin-top: 0.75rem;
- margin-bottom: 0.75rem;
+ margin-top: var(--space-s);
+ margin-bottom: var(--space-s);
}
/**
@@ -51,11 +47,11 @@ tr .form-item,
.form-item__label {
display: table;
- margin-top: 0.25rem; /* 4px */
- margin-bottom: 0.25rem; /* 4px */
- font-size: 0.889rem; /* ~14px */
+ margin-top: calc(var(--space-xs)/2); /* 4px */
+ margin-bottom: calc(var(--space-xs)/2); /* 4px */
+ font-size: var(--font-size-s); /* ~14px */
font-weight: bold;
- line-height: 1.125rem;
+ line-height: var(--line-height-form-label);
}
.form-item__label--multiple-value-form {
@@ -78,7 +74,7 @@ tr .form-item,
/* Label states. */
.form-item__label.has-error {
- color: #d72222;
+ color: var(--input--error-color);
}
.form-item__label.option.has-error {
@@ -87,7 +83,7 @@ tr .form-item,
.form-item__label.is-disabled {
cursor: default; /* @todo ...or auto? */
- color: #828388;
+ color: var(--input--disabled-fg-color);
}
.form-item__label.form-required::after,
@@ -96,7 +92,7 @@ tr .form-item,
margin-right: 0.15em;
margin-left: 0.15em;
content: "*";
- color: #d72222;
+ color: var(--color-maximumred);
font-size: 0.875rem;
}
@@ -107,15 +103,15 @@ tr .form-item,
.form-item__description {
margin-top: 0.375rem; /* 6px */
margin-bottom: 0.375rem; /* 6px */
- color: #55565b;
- font-size: 0.79rem; /* ~13px */
+ color: var(--input-fg-color--description);
+ font-size: var(--font-size-xs); /* ~13px */
line-height: 1.0625rem; /* 17px */
}
/* Description states. */
.form-item__description.is-disabled {
- color: #828388;
+ color: var(--input--disabled-fg-color);
}
/**
@@ -125,26 +121,26 @@ tr .form-item,
.form-item__error-message {
margin-top: 0.375rem; /* 6px */
margin-bottom: 0.375rem; /* 6px */
- color: #d72222;
- font-size: 0.79rem; /* ~13px */
+ color: var(--input--error-color);
+ font-size: var(--font-size-xs); /* ~13px */
font-weight: normal;
line-height: 1.0625rem; /* 17px */
}
.form-item__prefix.is-disabled,
.form-item__suffix.is-disabled {
- color: #828388;
+ color: var(--input--disabled-fg-color);
}
/* Add some spacing so that the focus ring and suffix don't overlap. */
@media screen and (min-width: 37.5625rem) {
.form-item__suffix {
- margin-left: 0.5rem; /* LTR */
+ margin-left: var(--space-xs); /* LTR */
}
[dir="rtl"] .form-item__suffix {
- margin-right: 0.5rem;
+ margin-right: var(--space-xs);
margin-left: 0;
}
}
@@ -157,18 +153,17 @@ tr .form-item,
display: flex;
flex-wrap: wrap;
align-items: flex-start;
- margin-top: 1rem;
- margin-bottom: 1rem;
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
}
.form-actions .button,
.form-actions .action-link {
- margin-top: 1rem;
- margin-bottom: 1rem;
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
}
.form-actions .ajax-progress--throbber {
- -ms-grid-row-align: center;
align-self: center;
}
@@ -211,14 +206,14 @@ tr .form-item,
.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix {
- margin-right: 0.5rem; /* LTR */
+ margin-right: var(--space-xs); /* LTR */
}
[dir="rtl"] .form-item--editor-format .form-item__label,
[dir="rtl"] .form-item--editor-format .form-item__prefix,
[dir="rtl"] .form-item--editor-format .form-item__suffix {
margin-right: 0;
- margin-left: 0.5rem;
+ margin-left: var(--space-xs);
}
.form-item--editor-format .form-item__description,
diff --git a/core/themes/claro/css/components/form.pcss.css b/core/themes/claro/css/components/form.pcss.css
index 75f49c943753072aaa82d3d917cefdfa05537f07..a8cf852c62cacf47da8b3830e694b4421640bb8b 100644
--- a/core/themes/claro/css/components/form.pcss.css
+++ b/core/themes/claro/css/components/form.pcss.css
@@ -3,8 +3,6 @@
* Main form and form item styles.
*/
-@import "../base/variables.pcss.css";
-
::placeholder {
color: var(--input-fg-color--placeholder);
}
diff --git a/core/themes/claro/css/components/icon-link.css b/core/themes/claro/css/components/icon-link.css
index d7f5a1f3d89222112c2ed92808a5998cdaf687c8..cdd3fd45dffac68e4cde73c47e3592b8c8668095 100644
--- a/core/themes/claro/css/components/icon-link.css
+++ b/core/themes/claro/css/components/icon-link.css
@@ -12,33 +12,39 @@
:root {
/* default */
+ --icon-link-bg-color: var(--color-white);
+ --icon-link-border-color: var(--color-gray-200);
/* active */
+ --icon-link--active-bg-color: var(--color-absolutezero);
+ --icon-link--active-border-color: var(--color-absolutezero);
/* hover */
+ --icon-link--hover-bg-color: var(--color-bgblue-hover);
+ --icon-link--hover-border-color: var(--color-gray-200-o-80);
}
.icon-link {
display: flex;
padding: 0;
- border: 1px solid #d3d4d9;
+ border: 1px solid var(--icon-link-border-color);
border-radius: 50%;
- background-color: #fff;
+ background-color: var(--icon-link-bg-color);
}
.icon-link:hover {
- border-color: rgba(212, 212, 218, 0.8);
- background-color: #f0f5fd;
+ border-color: var(--icon-link--hover-border-color);
+ background-color: var(--icon-link--hover-bg-color);
}
.icon-link:focus {
- box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #26a769;
+ box-shadow: 0 0 0 1.5px var(--color-white), 0 0 0 3.5px var(--color-focus);
}
.icon-link:active,
.open > .icon-link {
- border-color: #003cc5;
- background-color: #003cc5;
+ border-color: var(--icon-link--active-border-color);
+ background-color: var(--icon-link--active-bg-color);
}
.icon-link--small:focus {
- box-shadow: 0 0 0 1px #fff, 0 0 0 3px #26a769;
+ box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px var(--color-focus);
}
diff --git a/core/themes/claro/css/components/icon-link.pcss.css b/core/themes/claro/css/components/icon-link.pcss.css
index eb73ce4e7049d3f3ab04b524f3d75ebf21e0ebb7..46c69c62cc3e0fa0441da9e33dc10a6ee498fe72 100644
--- a/core/themes/claro/css/components/icon-link.pcss.css
+++ b/core/themes/claro/css/components/icon-link.pcss.css
@@ -3,8 +3,6 @@
* Icon link component.
*/
-@import "../base/variables.pcss.css";
-
:root {
/* default */
--icon-link-bg-color: var(--color-white);
diff --git a/core/themes/claro/css/components/image-preview.css b/core/themes/claro/css/components/image-preview.css
index 4d836c568e28ae72a0f7b0035538f927530e492f..b5c4f7dd25745a44c0ae72dfbfb5f3076836548f 100644
--- a/core/themes/claro/css/components/image-preview.css
+++ b/core/themes/claro/css/components/image-preview.css
@@ -10,6 +10,11 @@
* Image preview component.
*/
+:root {
+ --color-pattern: var(--color-gray-200);
+ --size-pattern-square: 0.4375rem;
+}
+
/**
* Image preview.
*/
@@ -21,22 +26,22 @@
.image-preview__img-wrapper {
display: inline-block;
max-width: 100%;
- background-color: #fff;
- box-shadow: inset 0 0 0.4375rem #d3d4d9;
+ background-color: var(--color-white);
+ box-shadow: inset 0 0 var(--size-pattern-square) var(--color-pattern);
}
.image-preview img {
background-image:
- linear-gradient(-45deg, #d3d4d9 25%, transparent 26%),
- linear-gradient(-45deg, #d3d4d9 25%, transparent 26%),
- linear-gradient(135deg, #d3d4d9 25%, transparent 26%),
- linear-gradient(135deg, #d3d4d9 25%, transparent 26%);
+ linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%),
+ linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%),
+ linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%),
+ linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);
background-position:
0 0,
- 0.4375rem 0.4375rem,
- 0.4375rem 0.4375rem,
+ var(--size-pattern-square) var(--size-pattern-square),
+ var(--size-pattern-square) var(--size-pattern-square),
0 0;
- background-size: 0.875rem 0.875rem;
+ background-size: calc(var(--size-pattern-square)*2) calc(var(--size-pattern-square)*2);
}
@media screen and (-ms-high-contrast: active) {
diff --git a/core/themes/claro/css/components/image-preview.pcss.css b/core/themes/claro/css/components/image-preview.pcss.css
index 2d65004aba09c90d9fa74d4d1572ab9762dd11c2..17d43610865b7577be36a02defab6ce0f414578e 100644
--- a/core/themes/claro/css/components/image-preview.pcss.css
+++ b/core/themes/claro/css/components/image-preview.pcss.css
@@ -3,8 +3,6 @@
* Image preview component.
*/
-@import "../base/variables.pcss.css";
-
:root {
--color-pattern: var(--color-gray-200);
--size-pattern-square: calc(7rem / 16);
diff --git a/core/themes/claro/css/components/jquery.ui/theme.css b/core/themes/claro/css/components/jquery.ui/theme.css
index 9db21952ce7cf6a00440e2b526ca608ab4d71861..9d92a4387ce150900e6fca1a92fdfabaf1dc2876 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.css
@@ -24,7 +24,7 @@
}
.ui-dialog {
- z-index: 1260;
+ z-index: var(--jui-dialog-z-index);
}
/**
@@ -544,9 +544,9 @@
*/
.ui-widget-overlay {
- z-index: 1259;
+ z-index: calc(var(--jui-dialog-z-index) - 1);
opacity: 0.7;
- background: #232429;
+ background: var(--color-text);
}
/**
@@ -597,12 +597,12 @@
.ui-autocomplete {
overflow: hidden;
- color: #55565b;
- border: 1px solid rgba(216, 217, 224, 0.8);
+ color: var(--jui-dropdown-fg-color);
+ border: var(--input-border-size) solid var(--jui-dropdown-border-color);
border-top: 0;
- border-radius: 0 0 0.125rem 0.125rem;
- background: #fff;
- box-shadow: 0 0.125rem 0.25rem rgba(34, 35, 48, 0.1);
+ border-radius: 0 0 var(--input-border-radius-size) var(--input-border-radius-size);
+ background: var(--jui-dropdown-bg-color);
+ box-shadow: 0 0.125rem 0.25rem var(--jui-dropdown-shadow-color);
}
/* Suggestion list */
@@ -625,8 +625,8 @@
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
margin: 0;
- color: #fff;
- background: #003cc5;
+ color: var(--jui-dropdown--active-fg-color);
+ background: var(--jui-dropdown--active-bg-color);
}
.ui-autocomplete .ui-menu-item.ui-state-focus,
diff --git a/core/themes/claro/css/components/jquery.ui/theme.pcss.css b/core/themes/claro/css/components/jquery.ui/theme.pcss.css
index 9d0f877635a3c6c586d707dcb4fdfaafe3db07c0..c9d5d5089cac363cdad1f64722d33674e7918f71 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.pcss.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.pcss.css
@@ -4,8 +4,6 @@
* Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
*/
-@import "../../base/variables.pcss.css";
-
/**
* Component containers
*/
diff --git a/core/themes/claro/css/components/media-library.ui.css b/core/themes/claro/css/components/media-library.ui.css
index 018271d1322c3cd8ccaa419a2330020261f5578a..9de6fac7eb04643fc4a397a28009088c7178f55b 100644
--- a/core/themes/claro/css/components/media-library.ui.css
+++ b/core/themes/claro/css/components/media-library.ui.css
@@ -11,5 +11,5 @@
*/
.media-library-selected-count {
- margin: 0 1.5rem;
+ margin: 0 var(--space-l);
}
diff --git a/core/themes/claro/css/components/media-library.ui.pcss.css b/core/themes/claro/css/components/media-library.ui.pcss.css
index b072d5765e73d71d4503a670568817bbb8fa6d75..bdf0f82eef1936aec63495ee3a7ef6b41e71da36 100644
--- a/core/themes/claro/css/components/media-library.ui.pcss.css
+++ b/core/themes/claro/css/components/media-library.ui.pcss.css
@@ -3,8 +3,6 @@
* Styles for the Media Library UI.
*/
-@import "../base/variables.pcss.css";
-
.media-library-selected-count {
margin: 0 var(--space-l);
}
diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css
index 979a2bc0e897d0a56ddaff168fa4cbf574a31dfe..3ae2d2adf750acf5b342fc44bfadacb8d85cdaa4 100644
--- a/core/themes/claro/css/components/messages.css
+++ b/core/themes/claro/css/components/messages.css
@@ -12,9 +12,23 @@
* has been resolved.
*/
+:root {
+ --messages-bg-color: #353641;
+ --messages-fg-color: var(--color-white);
+ --messages-border-radius: 2px;
+ --messages-border-width: 0.3125rem;
+ --messages--status-color: #42a877;
+ --messages--warning-color: #e0ac00;
+ --messages--error-color: #e34f4f;
+ --messages__link-color: var(--color-sunglow);
+ --messages__link--hover-color: var(--color-white);
+ --messages__icon-size: 1rem;
+ --messages__text-margin: calc(var(--messages__icon-size) + var(--space-l));
+}
+
.messages-list {
- margin-top: 2.5rem;
- margin-bottom: 2.5rem;
+ margin-top: calc(var(--space-m) + var(--space-l));
+ margin-bottom: calc(var(--space-m) + var(--space-l));
padding: 0;
list-style: none;
}
@@ -26,43 +40,43 @@
.messages {
box-sizing: border-box;
- margin-top: 1rem;
- margin-bottom: 1rem;
- padding: 1.5rem 1.5rem 2rem calc(1.5rem - 0.3125rem); /* LTR */
- color: #fff;
- border-width: 0 0 0 5px; /* LTR */
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
+ padding: var(--space-l) var(--space-l) 2rem calc(var(--space-l) - 0.3125rem); /* LTR */
+ color: var(--messages-fg-color);
+ border-width: 0 0 0 var(--messages-border-width); /* LTR */
border-style: solid;
- border-color: #353641;
- border-radius: 2px;
- background-color: #353641;
+ border-color: var(--messages-bg-color);
+ border-radius: var(--messages-border-radius);
+ background-color: var(--messages-bg-color);
}
[dir="rtl"] .messages {
- padding-right: calc(1.5rem - 0.3125rem);
- padding-left: 1.5rem;
- border-right-width: 5px;
+ padding-right: calc(var(--space-l) - 0.3125rem);
+ padding-left: var(--space-l);
+ border-right-width: var(--messages-border-width);
border-left-width: 0;
}
.messages--error {
- border-color: #e34f4f;
+ border-color: var(--messages--error-color);
}
.messages--status {
- border-color: #42a877;
+ border-color: var(--messages--status-color);
}
.messages--warning {
- border-color: #e0ac00;
+ border-color: var(--messages--warning-color);
}
.messages__title {
- margin: 0 0 0 2.5rem; /* LTR */
- font-size: 1rem;
+ margin: 0 0 0 var(--messages__text-margin); /* LTR */
+ font-size: var(--font-size-base);
}
[dir="rtl"] .messages__title {
- margin-right: 2.5rem;
+ margin-right: var(--messages__text-margin);
margin-left: 0;
}
@@ -93,27 +107,27 @@
.messages__header {
display: flex;
align-items: center;
- margin-bottom: 1rem;
+ margin-bottom: var(--space-m);
}
@media screen and (min-width: 48rem) {
.messages__content {
- margin-left: 2.5rem; /* LTR */
+ margin-left: var(--messages__text-margin); /* LTR */
}
[dir="rtl"] .messages__content {
- margin-right: 2.5rem;
+ margin-right: var(--messages__text-margin);
margin-left: 0;
}
}
.messages a {
text-decoration: underline;
- color: #ffd23f;
+ color: var(--messages__link-color);
}
.messages a:hover {
- color: #fff;
+ color: var(--messages__link--hover-color);
}
.messages pre {
@@ -127,15 +141,15 @@
}
.messages__item + .messages__item {
- margin-top: 0.75rem;
+ margin-top: var(--space-s);
}
@media screen and (-ms-high-contrast: active) {
.messages {
- border-width: 1px 1px 1px 5px; /* LTR */
+ border-width: 1px 1px 1px var(--messages-border-width); /* LTR */
}
[dir="rtl"] .messages {
- border-right-width: 5px;
+ border-right-width: var(--messages-border-width);
border-left-width: 1px;
}
.messages__header {
diff --git a/core/themes/claro/css/components/messages.pcss.css b/core/themes/claro/css/components/messages.pcss.css
index e03745f1711a52f75f2f8114e25b6c974ecbf266..ce1057efc423969bdb348a2fb7e51576cbcde82d 100644
--- a/core/themes/claro/css/components/messages.pcss.css
+++ b/core/themes/claro/css/components/messages.pcss.css
@@ -5,8 +5,6 @@
* has been resolved.
*/
-@import "../base/variables.pcss.css";
-
:root {
--messages-bg-color: #353641;
--messages-fg-color: var(--color-white);
diff --git a/core/themes/claro/css/components/page-title.css b/core/themes/claro/css/components/page-title.css
index 99b3612ccfcb88ef5690a8d8154febcd7c8f5b52..fcb0d7e9235882eac96606558e69f8be0f1dd0e1 100644
--- a/core/themes/claro/css/components/page-title.css
+++ b/core/themes/claro/css/components/page-title.css
@@ -11,11 +11,11 @@
*/
.block-page-title-block {
- margin-bottom: 0.75rem;
+ margin-bottom: var(--space-s);
}
.block-page-title-block:last-child {
- margin-bottom: 1.5rem;
+ margin-bottom: var(--space-l);
}
/**
@@ -25,13 +25,13 @@
*/
.region-header > .page-title {
- margin-top: 1.25rem;
- margin-bottom: 1.5rem;
+ margin-top: var(--breadcrumb-height);
+ margin-bottom: var(--space-l);
}
.page-title {
display: inline-block;
margin: 0;
- font-size: 2.027rem;
+ font-size: var(--font-size-h1);
-webkit-font-smoothing: antialiased;
}
diff --git a/core/themes/claro/css/components/page-title.pcss.css b/core/themes/claro/css/components/page-title.pcss.css
index 563450a8c284a688bc52f7471717467724ecd381..d5728d5c88e9c2c69127be0007d9733634c7a2fa 100644
--- a/core/themes/claro/css/components/page-title.pcss.css
+++ b/core/themes/claro/css/components/page-title.pcss.css
@@ -3,8 +3,6 @@
* Page title.
*/
-@import "../base/variables.pcss.css";
-
.block-page-title-block {
margin-bottom: var(--space-s);
}
diff --git a/core/themes/claro/css/components/pager.css b/core/themes/claro/css/components/pager.css
index 13296c604e54276344b8c47b37badeabbf94a2fd..3226309e9c5c661f200ef6a63c7c196fc2320f8f 100644
--- a/core/themes/claro/css/components/pager.css
+++ b/core/themes/claro/css/components/pager.css
@@ -13,12 +13,21 @@
:root {
/**
* Pager.
- */ /* --space-m × 2 */ /* 2px */
+ */
+ --pager-size: 2rem; /* --space-m × 2 */
+ --pager-border-width: 0.125rem; /* 2px */
+ --pager-fg-color: var(--color-gray-800);
+ --pager-bg-color: var(--color-white);
+ --pager--hover-bg-color: var(--color-bgblue-active);
+ --pager--focus-bg-color: var(--color-focus);
+ --pager--active-fg-color: var(--color-white);
+ --pager--active-bg-color: var(--color-absolutezero);
+ --pager-border-radius--action: var(--pager-border-width);
}
.pager {
- margin-top: 1rem;
- margin-bottom: 1rem;
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
}
.pager__items {
@@ -26,20 +35,20 @@
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
- margin: 1rem 0; /* LTR */
+ margin: var(--space-m) 0; /* LTR */
list-style: none;
text-align: center;
font-weight: bold;
}
[dir="rtl"] .pager__items {
- margin: 1rem 0;
+ margin: var(--space-m) 0;
}
.pager__item {
display: inline-block;
- margin-right: 0.25rem;
- margin-left: 0.25rem;
+ margin-right: calc(var(--space-xs)/2);
+ margin-left: calc(var(--space-xs)/2);
vertical-align: top;
}
@@ -49,14 +58,14 @@
align-items: center;
justify-content: center;
box-sizing: border-box;
- min-width: 2rem;
- height: 2rem;
- padding-right: 0.5rem;
- padding-left: 0.5rem;
+ min-width: var(--pager-size);
+ height: var(--pager-size);
+ padding-right: var(--space-xs);
+ padding-left: var(--space-xs);
text-decoration: none;
- color: #55565b;
- border-radius: 1rem; /* Pager size ÷ 2 */
- background: #fff; /* Make sure that the text is visible on dark background. */
+ color: var(--pager-fg-color);
+ border-radius: var(--space-m); /* Pager size ÷ 2 */
+ background: var(--pager-bg-color); /* Make sure that the text is visible on dark background. */
line-height: 1;
}
@@ -68,21 +77,21 @@
.pager__link:hover,
.pager__link.is-active:hover {
- color: #55565b;
- background: #e6ecf8;
+ color: var(--pager-fg-color);
+ background: var(--pager--hover-bg-color);
}
.pager__link--action-link {
- border-radius: 0.125rem;
+ border-radius: var(--pager-border-radius--action);
}
/* Active number link. */
.pager__link.is-active,
.pager__item--current {
- color: #fff;
- border: 0.125rem solid transparent;
- background: #003cc5;
+ color: var(--pager--active-fg-color);
+ border: var(--pager-border-width) solid transparent;
+ background: var(--pager--active-bg-color);
}
.pager__item--first .pager__link::before {
@@ -122,8 +131,8 @@
}
.pager__item--mini {
- margin-right: 0.5rem;
- margin-left: 0.5rem;
+ margin-right: calc(var(--space-m)/2);
+ margin-left: calc(var(--space-m)/2);
}
.pager__link--mini {
diff --git a/core/themes/claro/css/components/pager.pcss.css b/core/themes/claro/css/components/pager.pcss.css
index 2e166ccad7ab696452d772fce6a417760a3f64dd..93ff337ff111673c6412267952a86dd7fc678685 100644
--- a/core/themes/claro/css/components/pager.pcss.css
+++ b/core/themes/claro/css/components/pager.pcss.css
@@ -3,8 +3,6 @@
* Styles for Claro's Pagination.
*/
-@import "../base/variables.pcss.css";
-
:root {
/**
* Pager.
diff --git a/core/themes/claro/css/components/progress.css b/core/themes/claro/css/components/progress.css
index c11401e950b68de57b93d906f8f2b8f518e49f07..973f89cc55b02f240696a6a42eb1f78dde6fca7a 100644
--- a/core/themes/claro/css/components/progress.css
+++ b/core/themes/claro/css/components/progress.css
@@ -12,6 +12,15 @@
* @see progress.js
*/
+:root {
+ --progress-bar-bg-color: var(--color-absolutezero);
+ --progress-bar-border-color: var(--color-absolutezero);
+ --progress-bar-label-font-size: var(--font-size-base);
+ --progress-bar-small-label-font-size: var(--font-size-label);
+ --progress-bar-default-size: calc(var(--space-m) - var(--progress-bar-border-size)*2);
+ --progress-bar-default-size-radius: var(--space-m);
+}
+
.progress::after {
display: table;
clear: both;
@@ -19,41 +28,41 @@
}
.progress--small .progress__track {
- height: calc(0.5rem - 2px);
+ height: var(--progress-bar-small-size);
}
.progress--small .progress__bar {
- width: calc(0.5rem - 2px);
- min-width: calc(0.5rem - 2px);
- height: calc(0.5rem - 2px);
+ width: var(--progress-bar-small-size);
+ min-width: var(--progress-bar-small-size);
+ height: var(--progress-bar-small-size);
}
.progress--small .progress__label {
- font-size: 0.889rem;
+ font-size: var(--progress-bar-small-label-font-size);
}
.progress__track {
- height: calc(1rem - 2px);
+ height: var(--progress-bar-default-size);
margin-top: 0;
- border: 1px #919297 solid;
- border-radius: 1rem;
- background-color: #d3d4d9;
+ border: var(--progress-bar-border-size) var(--progress-track-border-color) solid;
+ border-radius: var(--progress-bar-default-size-radius);
+ background-color: var(--progress-track-bg-color);
}
.progress__bar {
- width: calc(1rem - 2px);
- min-width: calc(1rem - 2px);
- height: calc(1rem - 2px);
- margin-top: -1px;
- margin-left: -1px; /* LTR */
- transition: width 0.5s ease-out;
- border: 1px #003cc5 solid;
- border-radius: 1rem;
- background-color: #003cc5;
+ width: var(--progress-bar-default-size);
+ min-width: var(--progress-bar-default-size);
+ height: var(--progress-bar-default-size);
+ margin-top: calc(var(--progress-bar-border-size)*-1);
+ margin-left: calc(var(--progress-bar-border-size)*-1); /* LTR */
+ transition: var(--progress-bar-transition);
+ border: var(--progress-bar-border-size) var(--progress-bar-border-color) solid;
+ border-radius: var(--progress-bar-default-size-radius);
+ background-color: var(--progress-bar-bg-color);
}
[dir="rtl"] .progress__bar {
- margin-right: -1px;
+ margin-right: calc(var(--progress-bar-border-size)*-1);
margin-left: 0;
}
@@ -64,17 +73,17 @@
}
.progress__label {
- margin-bottom: 0.5rem;
- font-size: 1rem;
+ margin-bottom: var(--progress-bar-spacing-size);
+ font-size: var(--progress-bar-label-font-size);
font-weight: bold;
}
.progress__description,
.progress__percentage {
overflow: hidden;
- margin-top: 0.5rem;
- color: #55565b;
- font-size: 0.79rem;
+ margin-top: var(--progress-bar-spacing-size);
+ color: var(--progress-bar-description-color);
+ font-size: var(--progress-bar-description-font-size);
}
@media screen and (prefers-reduced-motion: reduce) {
diff --git a/core/themes/claro/css/components/progress.pcss.css b/core/themes/claro/css/components/progress.pcss.css
index 609e5c438982a1c8b811320657cdf774db614cd5..7c01a3439f00cba8cf9b84e51e879195e9060f19 100644
--- a/core/themes/claro/css/components/progress.pcss.css
+++ b/core/themes/claro/css/components/progress.pcss.css
@@ -5,8 +5,6 @@
* @see progress.js
*/
-@import "../base/variables.pcss.css";
-
:root {
--progress-bar-bg-color: var(--color-absolutezero);
--progress-bar-border-color: var(--color-absolutezero);
diff --git a/core/themes/claro/css/components/shortcut.css b/core/themes/claro/css/components/shortcut.css
index 2fac89d5f69b47234fd4933fe17cab0bbf1663a3..8883d980a1dcd26cc7185dd9f96b9c35782a2a57 100644
--- a/core/themes/claro/css/components/shortcut.css
+++ b/core/themes/claro/css/components/shortcut.css
@@ -14,6 +14,10 @@
/**
* Shortcut action.
*/
+ --shortcut-bg-color: var(--color-gray-800);
+ --shortcut-border-radius-size: var(--base-border-radius);
+ --shortcut-padding-size: calc(var(--space-xs)*0.5) var(--space-m);
+ --shortcut-icon-size: var(--space-l);
}
/**
@@ -22,31 +26,31 @@
.shortcut-action {
display: inline-block;
- margin-left: 0.5rem; /* LTR */
+ margin-left: var(--space-xs); /* LTR */
}
[dir="rtl"] .shortcut-action {
- margin-right: 0.5rem;
+ margin-right: var(--space-xs);
}
.shortcut-action__message {
display: inline-block;
- margin-left: 0.75rem; /* LTR */
- padding: 0.25rem 1rem;
- transition: all 0.2s ease-out;
- transform: translateY(-0.5rem);
+ margin-left: var(--space-s); /* LTR */
+ padding: var(--shortcut-padding-size);
+ transition: var(--transition);
+ transform: translateY(calc(var(--space-xs)*-1));
vertical-align: top;
opacity: 0;
- color: #fff;
- border-radius: 2px;
- background: #55565b;
- font-size: 0.889rem;
+ color: var(--color-white);
+ border-radius: var(--shortcut-border-radius-size);
+ background: var(--shortcut-bg-color);
+ font-size: var(--font-size-label);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
[dir="rtl"] .shortcut-action__message {
- margin-right: 0.75rem;
+ margin-right: var(--space-s);
margin-left: 0;
}
@@ -58,10 +62,10 @@
.shortcut-action__icon {
display: inline-block;
- width: 1.5rem;
- height: 1.5rem;
+ width: var(--shortcut-icon-size);
+ height: var(--shortcut-icon-size);
vertical-align: -0.0625rem;
- background: transparent url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m42.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") left top / 6rem 1.5rem no-repeat;
+ background: transparent url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m42.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") left top / calc(var(--shortcut-icon-size)*4) var(--shortcut-icon-size) no-repeat;
}
[dir="rtl"] .shortcut-action__icon {
@@ -70,14 +74,14 @@
.shortcut-action--add:hover .shortcut-action__icon,
.shortcut-action--add:focus .shortcut-action__icon {
- background-position: -1.5rem top;
+ background-position: calc(var(--shortcut-icon-size)*-1) top;
}
.shortcut-action--remove .shortcut-action__icon {
- background-position: -3rem top;
+ background-position: calc(var(--shortcut-icon-size)*-2) top;
}
.shortcut-action--remove:focus .shortcut-action__icon,
.shortcut-action--remove:hover .shortcut-action__icon {
- background-position: -4.5rem top;
+ background-position: calc(var(--shortcut-icon-size)*-3) top;
}
diff --git a/core/themes/claro/css/components/shortcut.pcss.css b/core/themes/claro/css/components/shortcut.pcss.css
index bdc7ee6fb44b7d26e41a5990ad4e05591f95abd6..93b676fdca7327864fc07807e3aaee7c1b48df0d 100644
--- a/core/themes/claro/css/components/shortcut.pcss.css
+++ b/core/themes/claro/css/components/shortcut.pcss.css
@@ -4,8 +4,6 @@
* Styling for the shortcut module.
*/
-@import "../base/variables.pcss.css";
-
:root {
/**
* Shortcut action.
diff --git a/core/themes/claro/css/components/system-admin--admin-list.css b/core/themes/claro/css/components/system-admin--admin-list.css
index 4a566870119d9b1a9284703ec6b8b6ebbeaec64b..30d1f3545bc85ee412b4f9db5767fdf1cc0c7555 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.css
@@ -38,7 +38,7 @@
}
.admin-item:not(:last-child) {
- border-bottom: 0.0625em solid #d3d4d9;
+ border-bottom: 0.0625em solid var(--color-gray-200);
}
.admin-item__title {
@@ -80,7 +80,7 @@
.admin-item__description {
margin: 0.5em 0 0.25em;
- color: #828388;
+ color: var(--color-gray-600);
}
[dir="rtl"] .admin-item__description {
diff --git a/core/themes/claro/css/components/system-admin--admin-list.pcss.css b/core/themes/claro/css/components/system-admin--admin-list.pcss.css
index fa5e225c6c649d7a5910bfb645440595f58befd8..c00bc8391fb15e7f042e0e7e10c2e14ab07b39a4 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.pcss.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.pcss.css
@@ -3,8 +3,6 @@
* Admin list and admin item modules.
*/
-@import "../base/variables.pcss.css";
-
/**
* Admin list (wrapper of admin items).
*/
diff --git a/core/themes/claro/css/components/system-admin--links.css b/core/themes/claro/css/components/system-admin--links.css
index 66876df4eb48a55ec17fe7e50cc91aba2376b67a..727bc9a5f340df9fb5c5619fbeff2c688ba31345 100644
--- a/core/themes/claro/css/components/system-admin--links.css
+++ b/core/themes/claro/css/components/system-admin--links.css
@@ -35,5 +35,5 @@ small .admin-link:after {
*/
.system-cron-settings__link {
- word-wrap: break-word;
+ overflow-wrap: break-word;
}
diff --git a/core/themes/claro/css/components/system-admin--modules.css b/core/themes/claro/css/components/system-admin--modules.css
index 622fe38b3dd82332b0d25664969bb5081225748a..73df3d81f5b3c7f1f6ef0e6d960bff2635356696 100644
--- a/core/themes/claro/css/components/system-admin--modules.css
+++ b/core/themes/claro/css/components/system-admin--modules.css
@@ -10,9 +10,14 @@
* System admin module: modules page.
*/
+:root {
+ --module-table-cell-padding-vertical: var(--space-m);
+ --module-table-cell-padding-horizontal: calc(var(--space-m) - var(--input-border-size)*2);
+}
+
.modules-table-filter {
- padding: 0.25rem 1.5rem;
- border: 1px solid #d3d4d9;
+ padding: 0.25rem var(--space-l);
+ border: 1px solid var(--color-gray-200);
border-radius: 2px 2px 0 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@@ -41,9 +46,9 @@
}
.claro-details__summary.claro-details__summary--package-listing {
- color: #232429;
+ color: var(--color-text);
border-radius: 0.25rem;
- background: #f3f4f9;
+ background: var(--color-gray-050);
font-size: 1.125rem; /* 18px */
line-height: 1.424rem; /* 23px */
}
@@ -53,8 +58,8 @@
}
.module-list__module {
- color: #232429;
- border-bottom: 1px solid #d3d4d9;
+ color: var(--color-text);
+ border-bottom: 1px solid var(--color-gray-200);
background: none;
}
@@ -64,7 +69,7 @@
.module-list__module td {
height: auto;
- padding: 1rem calc(1rem - 2px);
+ padding: var(--module-table-cell-padding-vertical) var(--module-table-cell-padding-horizontal);
vertical-align: top;
}
@@ -87,13 +92,13 @@
[dir="rtl"] .module-list__checkbox {
padding-right: 0.6875rem;
- padding-left: calc(1rem - 2px);
+ padding-left: var(--module-table-cell-padding-horizontal);
text-align: right;
}
.module-list__checkbox .form-type--checkbox {
margin: 0;
- line-height: 1.295rem;
+ line-height: var(--details-line-height);
}
.module-list__checkbox .form-checkbox:not([disabled]) {
@@ -115,18 +120,18 @@ td.module-list__description {
}
.claro-details__summary.module-list__module-summary {
- padding-top: 1rem;
- padding-bottom: 1rem;
+ padding-top: var(--module-table-cell-padding-vertical);
+ padding-bottom: var(--module-table-cell-padding-vertical);
font-weight: normal;
- line-height: 1.295rem;
+ line-height: var(--details-line-height);
}
.claro-details__summary.module-list__module-summary::before {
- top: 1.75rem;
+ top: calc(var(--space-m) + var(--space-s));
}
.module-details__description {
- font-size: 0.75rem;
+ font-size: var(--space-s);
line-height: 0.9375rem;
}
@@ -136,14 +141,14 @@ td.module-list__description {
}
.module-details__requirements {
- margin-bottom: 1rem;
+ margin-bottom: var(--space-m);
}
.module-details__links {
position: relative;
/* Negative margin matches the value of action link's top padding. */
- margin-top: -0.375rem;
- margin-bottom: 1rem;
+ margin-top: calc(var(--space-s)*-1 - var(--space-l)/2*-1 + var(--space-s)/2*-1);
+ margin-bottom: var(--space-m);
}
.module-details__links .action-link + .action-link {
@@ -155,7 +160,7 @@ td.module-list__description {
}
.claro-details .tableresponsive-toggle {
- padding: 1rem 1rem 1rem 0;
+ padding: var(--space-m) var(--space-m) var(--space-m) 0;
}
.claro-details .tableresponsive-toggle::before {
@@ -164,7 +169,7 @@ td.module-list__description {
position: relative;
top: -1px;
display: inline-block;
- width: 2rem;
+ width: calc(var(--space-m)*2);
height: 1.25rem;
content: "";
cursor: pointer;
@@ -174,8 +179,8 @@ td.module-list__description {
}
.claro-details .tableresponsive-toggle:hover {
- color: #0036b1;
- background-color: #f0f5fd;
+ color: var(--color-absolutezero-hover);
+ background-color: var(--color-bgblue-hover);
}
.claro-details .tableresponsive-toggle:hover::before {
@@ -183,8 +188,8 @@ td.module-list__description {
}
.claro-details .tableresponsive-toggle-columns button {
- margin-top: 0.5rem;
+ margin-top: var(--space-xs);
text-decoration: none;
- color: #55565b;
+ color: var(--color-gray-800);
font-weight: bold;
}
diff --git a/core/themes/claro/css/components/system-admin--modules.pcss.css b/core/themes/claro/css/components/system-admin--modules.pcss.css
index 01c24cd65f17ee43177cea1c388367e57dfca370..157b20ae307d5c7859cddbcd11234a0bc113604a 100644
--- a/core/themes/claro/css/components/system-admin--modules.pcss.css
+++ b/core/themes/claro/css/components/system-admin--modules.pcss.css
@@ -3,8 +3,6 @@
* System admin module: modules page.
*/
-@import "../base/variables.pcss.css";
-
:root {
--module-table-cell-padding-vertical: var(--space-m);
--module-table-cell-padding-horizontal: calc(var(--space-m) - (var(--input-border-size) * 2));
diff --git a/core/themes/claro/css/components/system-admin--panel.css b/core/themes/claro/css/components/system-admin--panel.css
index 4ca4e952cf0c3ccc04b03761ac5387bde098b7f9..dffa67a7f5b1f800e97a5521ff8132efcd56db78 100644
--- a/core/themes/claro/css/components/system-admin--panel.css
+++ b/core/themes/claro/css/components/system-admin--panel.css
@@ -14,13 +14,13 @@
margin-top: 1em;
margin-bottom: 3em;
padding: 0;
- border-bottom: 0.0625em solid #d3d4d9;
+ border-bottom: 0.0625em solid var(--color-gray-200);
}
.panel__title {
margin: 0;
padding: 0.66667em 1.33333em;
- background: #f3f4f9;
+ background: var(--color-gray-050);
font-size: 1.125em;
line-height: 1.33333em;
}
diff --git a/core/themes/claro/css/components/system-admin--panel.pcss.css b/core/themes/claro/css/components/system-admin--panel.pcss.css
index 947aff1c1f72ea438791e8e5d7bdfb526eb48431..5ef1e87111da40e77baab2ca439725c5df663095 100644
--- a/core/themes/claro/css/components/system-admin--panel.pcss.css
+++ b/core/themes/claro/css/components/system-admin--panel.pcss.css
@@ -3,8 +3,6 @@
* System admin module: Panel styling.
*/
-@import "../base/variables.pcss.css";
-
.panel {
margin-top: 1em;
margin-bottom: 3em;
diff --git a/core/themes/claro/css/components/system-admin--status-report.css b/core/themes/claro/css/components/system-admin--status-report.css
index 6e16019bcc3277bb8f633b95f512e2da482f42c2..d4ad2919483c10ce902c9d91b39fc97efabc1e78 100644
--- a/core/themes/claro/css/components/system-admin--status-report.css
+++ b/core/themes/claro/css/components/system-admin--status-report.css
@@ -19,12 +19,12 @@
.system-status-report {
position: relative;
- padding-top: 1rem;
+ padding-top: var(--space-m);
}
@media screen and (min-width: 38em) {
.system-status-report {
- padding-top: 1.5rem;
+ padding-top: var(--space-l);
}
}
diff --git a/core/themes/claro/css/components/system-admin--status-report.pcss.css b/core/themes/claro/css/components/system-admin--status-report.pcss.css
index f7317179eda59b6d832e0b79bb8434e0661a61d0..cd34ebb389f23c81a1391446c2aa54392b788f4a 100644
--- a/core/themes/claro/css/components/system-admin--status-report.pcss.css
+++ b/core/themes/claro/css/components/system-admin--status-report.pcss.css
@@ -10,8 +10,6 @@
* - system-status-report-counters.css
*/
-@import "../base/variables.pcss.css";
-
.system-status-report {
position: relative;
padding-top: var(--space-m);
diff --git a/core/themes/claro/css/components/system-status-counter.css b/core/themes/claro/css/components/system-status-counter.css
index a7e701c4ea3f09e68b44fca984fbcfe2ff6145d2..bc5159b0f8d73daf131486cda4cf6bb9a40dfe23 100644
--- a/core/themes/claro/css/components/system-status-counter.css
+++ b/core/themes/claro/css/components/system-status-counter.css
@@ -76,8 +76,8 @@
@media screen and (min-width: 61rem) {
.system-status-report-counters__item {
- padding-top: 0.75rem;
- padding-bottom: 0.75rem;
+ padding-top: var(--space-s);
+ padding-bottom: var(--space-s);
}
.system-status-counter__status-icon,
.system-status-counter {
diff --git a/core/themes/claro/css/components/system-status-counter.pcss.css b/core/themes/claro/css/components/system-status-counter.pcss.css
index b779e72bfe0b41eba2d36c90269349277fe485d7..f613508141d76b83ec94f3220ebd007dc316248a 100644
--- a/core/themes/claro/css/components/system-status-counter.pcss.css
+++ b/core/themes/claro/css/components/system-status-counter.pcss.css
@@ -3,8 +3,6 @@
* Styles for the system status counter component.
*/
-@import "../base/variables.pcss.css";
-
.system-status-counter {
display: inline-block;
overflow-y: hidden;
diff --git a/core/themes/claro/css/components/system-status-report-general-info.css b/core/themes/claro/css/components/system-status-report-general-info.css
index e0fe3e962a8ff0a26d4b2c2cea00b4b053778c7b..46c944db9aea74bfbef0b206c7ee988055031e79 100644
--- a/core/themes/claro/css/components/system-status-report-general-info.css
+++ b/core/themes/claro/css/components/system-status-report-general-info.css
@@ -11,7 +11,7 @@
*/
.system-status-general-info {
- padding-top: 1rem;
+ padding-top: var(--space-m);
}
.system-status-general-info__header {
@@ -23,7 +23,7 @@
display: block;
overflow-x: auto;
box-sizing: border-box;
- margin-bottom: 1.5rem;
+ margin-bottom: var(--space-l);
padding: 1.125rem;
}
diff --git a/core/themes/claro/css/components/system-status-report-general-info.pcss.css b/core/themes/claro/css/components/system-status-report-general-info.pcss.css
index 55c55358b2e833f7e81555c5153b9f4322e3ea21..eff22898e528fafdc9c474a7239bcf04098dda5b 100644
--- a/core/themes/claro/css/components/system-status-report-general-info.pcss.css
+++ b/core/themes/claro/css/components/system-status-report-general-info.pcss.css
@@ -3,8 +3,6 @@
* Claro styles for the System Status general info.
*/
-@import "../base/variables.pcss.css";
-
.system-status-general-info {
padding-top: var(--space-m);
}
diff --git a/core/themes/claro/css/components/system-status-report.css b/core/themes/claro/css/components/system-status-report.css
index 5d98c434de553931a284bba890d4860ba550a796..bbe9f77f5cf91c2e99bfc3243fab6002726f886c 100644
--- a/core/themes/claro/css/components/system-status-report.css
+++ b/core/themes/claro/css/components/system-status-report.css
@@ -39,7 +39,7 @@
.system-status-report .claro-details {
border: none;
- border-bottom: 1px solid #dedfe4;
+ border-bottom: var(--details-border-size) solid var(--details-border-color);
box-shadow: none;
}
@@ -116,7 +116,7 @@
}
.claro-details__summary--system-status-report {
- background: #f3f4f9;
+ background: var(--color-gray-050);
}
@media screen and (max-width: 48em) {
diff --git a/core/themes/claro/css/components/system-status-report.pcss.css b/core/themes/claro/css/components/system-status-report.pcss.css
index bb2099007304da8a4b717498064d48ac23fbd7c0..073999f333ca1fcafa71873fa09cfef4d7b69a4d 100644
--- a/core/themes/claro/css/components/system-status-report.pcss.css
+++ b/core/themes/claro/css/components/system-status-report.pcss.css
@@ -3,8 +3,6 @@
* Claro styles for the System Status Report.
*/
-@import "../base/variables.pcss.css";
-
.system-status-report__requirements-group {
padding-top: 20px;
}
diff --git a/core/themes/claro/css/components/table--file-multiple-widget.css b/core/themes/claro/css/components/table--file-multiple-widget.css
index 0759677fd5d6f256c03d5e2a57552e427ff3ee59..abf6c4637a628f98ac965fbc35b123ab67da3f99 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.css
@@ -38,7 +38,7 @@
.table-file-multiple-widget .tabledrag-changed {
float: left; /* LTR */
- line-height: 2.0625rem;
+ line-height: calc(var(--tabledrag-handle-icon-size) + var(--space-xs)*2);
}
[dir="rtl"] .table-file-multiple-widget .tabledrag-changed {
@@ -46,7 +46,7 @@
}
.table-file-multiple-widget td {
- height: 3rem;
+ height: calc(var(--space-m)*3);
}
.table-file-multiple-widget td > :first-child {
@@ -62,28 +62,28 @@
}
.table-file-multiple-widget th {
- height: 2rem;
- color: #55565b;
- background: #f3f4f9;
- font-size: 0.889rem;
+ height: calc(var(--space-m)*2);
+ color: var(--color-gray-800);
+ background: var(--color-gray-050);
+ font-size: var(--font-size-s);
}
.table-file-multiple-widget td {
- padding-top: 1rem;
- padding-bottom: 1rem;
+ padding-top: var(--space-m);
+ padding-bottom: var(--space-m);
}
.table-file-multiple-widget .tabledrag-cell {
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
+ padding-top: var(--space-xs);
+ padding-bottom: var(--space-xs);
}
.table-file-multiple-widget .checkbox .form-type--boolean {
- line-height: 3rem;
+ line-height: calc(var(--space-m)*3);
}
.no-touchevents .table-file-multiple-widget .checkbox .form-type--boolean {
- line-height: 1.5;
+ line-height: var(--line-height);
}
/**
@@ -110,12 +110,12 @@
@media screen and (max-width: 37.5em) {
.claro-details__wrapper .file-widget-multiple__table-wrapper {
- margin-right: -1rem;
- margin-left: -1rem;
+ margin-right: calc(var(--space-m)*-1);
+ margin-left: calc(var(--space-m)*-1);
}
.claro-details__wrapper .file-widget-multiple__table-wrapper > :not(table) {
- margin-right: 1rem;
- margin-left: 1rem;
+ margin-right: var(--space-m);
+ margin-left: var(--space-m);
}
}
diff --git a/core/themes/claro/css/components/table--file-multiple-widget.pcss.css b/core/themes/claro/css/components/table--file-multiple-widget.pcss.css
index e2dfb50803f6b461257e1197966d6ec31f16601a..19e1ce01362f7fd6df906292fc03950af2ea1753 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.pcss.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.pcss.css
@@ -3,8 +3,6 @@
* Styles for multiple file widget table.
*/
-@import "../base/variables.pcss.css";
-
.table-file-multiple-widget tbody {
vertical-align: top;
}
diff --git a/core/themes/claro/css/components/tabledrag.css b/core/themes/claro/css/components/tabledrag.css
index edc188d6eaffe31e145da59d67d6d6f11f4773c7..71610334e1629e16fd89e387ee2d16642a126240 100644
--- a/core/themes/claro/css/components/tabledrag.css
+++ b/core/themes/claro/css/components/tabledrag.css
@@ -14,6 +14,11 @@
* @see tabledrag.js
*/
+:root {
+ --table-row--dragging-bg-color: #fe7;
+ --table-row--last-dragged-bg-color: #ffb;
+}
+
body.drag {
cursor: move;
}
@@ -27,7 +32,7 @@ body.drag {
/* Empty region message row in table. */
.region-message {
- color: #828388;
+ color: var(--color-gray-600);
}
/* If the region is populated, we shouldn't display the empty message. */
@@ -53,17 +58,17 @@ body.drag {
.draggable .tabledrag-changed {
position: relative;
- left: -0.5rem; /* LTR */
+ left: calc(var(--space-xs)*-1); /* LTR */
}
[dir="rtl"] .draggable .tabledrag-changed {
- right: -0.5rem; /* LTR */
+ right: calc(var(--space-xs)*-1); /* LTR */
left: auto;
}
.tabledrag-cell--only-drag .tabledrag-changed {
- width: 1.5rem;
- min-width: 1.5rem;
+ width: var(--space-l);
+ min-width: var(--space-l);
}
/**
@@ -72,11 +77,11 @@ body.drag {
.draggable.drag,
.draggable.drag:focus {
- background-color: #fe7;
+ background-color: var(--table-row--dragging-bg-color);
}
.draggable.drag-previous {
- background-color: #ffb;
+ background-color: var(--table-row--last-dragged-bg-color);
}
/**
@@ -91,7 +96,7 @@ body.drag {
[dir="rtl"] .draggable-table td:first-child ~ td,
[dir="rtl"] .draggable-table th:first-child ~ th {
padding-right: 0;
- padding-left: 1rem;
+ padding-left: var(--space-m);
}
/* Auto width for weight selects and number inputs. */
@@ -117,17 +122,17 @@ body.drag {
.tabledrag-handle::after {
display: inline-block;
- width: 1.0625rem;
- height: 1.0625rem;
- margin-left: -1rem; /* LTR */
- padding: 0.5rem 1rem;
+ width: var(--tabledrag-handle-icon-size);
+ height: var(--tabledrag-handle-icon-size);
+ margin-left: calc(var(--space-m)*-1); /* LTR */
+ padding: var(--space-xs) var(--space-m);
content: "";
transition: transform 0.1s ease-in-out 0s;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16'%3e%3cpath fill='%23222330' d='M14.103 5.476a.5.5 0 00-.701-.053.526.526 0 00-.082.713l1.1 1.346H8.512V1.62l1.32 1.113a.501.501 0 00.732-.054.528.528 0 00-.085-.744L8.328.119a.5.5 0 00-.647 0L5.529 1.935a.527.527 0 00-.085.744.504.504 0 00.732.054l1.32-1.113v5.862H1.588L2.68 6.136a.526.526 0 00-.1-.68.5.5 0 00-.675.02L.117 7.67a.525.525 0 000 .66l1.788 2.194a.5.5 0 00.702.053.526.526 0 00.081-.713l-1.1-1.346h5.908v5.862l-1.32-1.113a.501.501 0 00-.698.082.526.526 0 00.051.716l2.152 1.817v-.001a.5.5 0 00.647 0l2.151-1.816a.526.526 0 00.052-.716.501.501 0 00-.699-.082l-1.32 1.113V8.518h5.908l-1.091 1.346a.527.527 0 00.022.776.504.504 0 00.752-.116l1.78-2.194a.527.527 0 000-.66z'/%3e%3c/svg%3e") no-repeat center;
}
[dir="rtl"] .tabledrag-handle::after {
- margin-right: -1rem;
+ margin-right: calc(var(--space-m)*-1);
margin-left: 0;
}
@@ -156,13 +161,13 @@ body.drag {
.tabledrag-handle:focus::before {
display: block;
- width: 2rem; /* Same as height. */
- height: 2rem; /* Hande svg height + its vertical padding */
- margin: 0 -0.5rem -2rem; /* Bottom: handle height as negative value. */
+ width: calc(var(--space-m) + var(--space-xs)*2); /* Same as height. */
+ height: calc(var(--space-m) + var(--space-xs)*2); /* Hande svg height + its vertical padding */
+ margin: 0 calc(var(--space-xs)*-1) calc(var(--space-m)*-1 + var(--space-xs)*2*-1); /* Bottom: handle height as negative value. */
content: "";
- border-radius: 2px;
- outline: 2px dotted transparent;
- box-shadow: 0 0 0 3px #26a769;
+ border-radius: var(--base-border-radius);
+ outline: var(--outline-size) dotted transparent;
+ box-shadow: 0 0 0 var(--focus-border-size) var(--color-focus);
}
/* Disabled tabledrag handle. */
@@ -185,13 +190,13 @@ body.drag {
*/
.touchevents .tabledrag-handle::after {
- padding-top: 0.75rem;
- padding-bottom: 0.75rem;
+ padding-top: var(--space-s);
+ padding-bottom: var(--space-s);
}
.touchevents .draggable .menu-item__link {
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
+ padding-top: var(--space-xs);
+ padding-bottom: var(--space-xs);
}
/**
@@ -234,7 +239,7 @@ body.drag {
}
[dir="rtl"] .tabledrag-cell--only-drag {
- padding-right: 1rem;
+ padding-right: var(--space-m);
padding-left: 0;
}
@@ -249,12 +254,12 @@ body.drag {
}
.tabledrag-cell-content__item {
- padding-right: 0.5rem; /* LTR */
+ padding-right: var(--space-xs); /* LTR */
}
[dir="rtl"] .tabledrag-cell-content__item {
padding-right: 0;
- padding-left: 0.5rem;
+ padding-left: var(--space-xs);
}
.tabledrag-cell-content__item:empty {
@@ -299,7 +304,7 @@ body.drag {
.indentation {
position: relative;
- left: -0.25rem; /* LTR */
+ left: calc(var(--space-xs)*-0.5); /* LTR */
float: left; /* LTR */
width: 1.5625rem; /* 25px */
height: 1.5625rem; /* 25px */
@@ -308,7 +313,7 @@ body.drag {
}
[dir="rtl"] .indentation {
- right: -0.25rem;
+ right: calc(var(--space-xs)*-0.5);
left: auto;
float: right;
}
diff --git a/core/themes/claro/css/components/tabledrag.pcss.css b/core/themes/claro/css/components/tabledrag.pcss.css
index 7ffd6160316c4396ce42014ae59f06c36e9d15e7..5cfd073d689fd157320880eb6dd0607014b97e24 100644
--- a/core/themes/claro/css/components/tabledrag.pcss.css
+++ b/core/themes/claro/css/components/tabledrag.pcss.css
@@ -7,8 +7,6 @@
* @see tabledrag.js
*/
-@import "../base/variables.pcss.css";
-
:root {
--table-row--dragging-bg-color: #fe7;
--table-row--last-dragged-bg-color: #ffb;
diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css
index 7bdcf31352a68d827950da16614f4e051b7f9034..8605298f2bea0c91d2ed8c51cd08bdc587a0353e 100644
--- a/core/themes/claro/css/components/tables.css
+++ b/core/themes/claro/css/components/tables.css
@@ -12,8 +12,8 @@
table {
width: 100%;
- margin-top: 1.5rem;
- margin-bottom: 1.5rem;
+ margin-top: var(--space-l);
+ margin-bottom: var(--space-l);
border-collapse: collapse;
}
@@ -32,11 +32,11 @@ caption {
th {
position: relative;
box-sizing: border-box;
- height: 3rem;
- padding: 0.5rem 1rem;
+ height: var(--space-xl);
+ padding: var(--space-xs) var(--space-m);
text-align: left; /* LTR */
- color: #232429;
- background: #f3f4f9;
+ color: var(--color-text);
+ background: var(--color-gray-050);
line-height: 1.25rem; /* 20px */
}
@@ -51,14 +51,14 @@ th {
/* Table head cell containing sort link. */
.sortable-heading {
- padding: 0 1rem;
+ padding: 0 var(--space-m);
}
/* The actual sort link. */
.sortable-heading > a {
display: block;
- padding: 0.5rem 1.5rem 0.5rem 0; /* LTR */
+ padding: var(--space-xs) 1.5rem var(--space-xs) 0; /* LTR */
text-decoration: none;
color: inherit;
}
@@ -146,11 +146,11 @@ _:-ms-fullscreen, /* Only IE 11 */
/* Sortable cell's active state. */
.sortable-heading.is-active > a {
- color: #003cc5;
+ color: var(--color-absolutezero);
}
.sortable-heading.is-active > a::before {
- border-bottom: 0.1875rem solid #003cc5;
+ border-bottom: 0.1875rem solid var(--color-absolutezero);
}
.sortable-heading.is-active > a::after {
@@ -158,13 +158,13 @@ _:-ms-fullscreen, /* Only IE 11 */
}
tr {
- border-bottom: 0.0625rem solid #d3d4d9;
+ border-bottom: 0.0625rem solid var(--color-gray-200);
}
tr,
.draggable-table.tabledrag-disabled tr {
- color: #232429;
- background: #fff;
+ color: var(--color-text);
+ background: var(--color-white);
}
thead tr {
@@ -173,26 +173,26 @@ thead tr {
tr:hover,
tr:focus {
- color: #232429;
- background: #f0f5fd;
+ color: var(--color-text);
+ background: var(--color-bgblue-hover);
}
tr.color-warning:hover,
tr.color-warning:focus {
- color: #232429;
+ color: var(--color-text);
background: #fdf8ed;
}
tr.color-error:hover,
tr.color-error:focus {
- color: #232429;
+ color: var(--color-text);
background: #fcf4f2;
}
td {
box-sizing: border-box;
height: 4rem;
- padding: 0.5rem 1rem;
+ padding: var(--space-xs) var(--space-m);
text-align: left; /* LTR */
}
@@ -227,7 +227,7 @@ td > .ajax-new-content > .form-item > .form-element {
/* Win over table-file-multiple-widget. */
th.is-disabled.is-disabled {
- color: #828388;
+ color: var(--input--disabled-fg-color);
}
/* Force browsers to calculate the width of a 'select all' <th> element. */
@@ -253,7 +253,7 @@ tfoot tr:last-child {
}
tfoot tr:first-child td {
- border-top: 0.0625rem solid #919297;
+ border-top: 0.0625rem solid var(--color-gray-500);
}
/**
@@ -282,7 +282,7 @@ td.priority-medium {
}
.tabledrag-toggle-weight-wrapper {
- margin-top: 1.5rem;
+ margin-top: var(--space-l);
line-height: 1.75rem;
}
diff --git a/core/themes/claro/css/components/tables.pcss.css b/core/themes/claro/css/components/tables.pcss.css
index 5b70ab75c837d207b625622cf5ee037573a67d00..72443780a96effad6fae1c404a864a11652e672b 100644
--- a/core/themes/claro/css/components/tables.pcss.css
+++ b/core/themes/claro/css/components/tables.pcss.css
@@ -3,8 +3,6 @@
* Claro styles for Tables.
*/
-@import "../base/variables.pcss.css";
-
table {
width: 100%;
margin-top: var(--space-l);
diff --git a/core/themes/claro/css/components/tableselect.css b/core/themes/claro/css/components/tableselect.css
index 0f5382b68dc37c1dcc740b1df23d88bb7537f796..8f9bdf2ad5ede60e4789a996db3534c28b6733ee 100644
--- a/core/themes/claro/css/components/tableselect.css
+++ b/core/themes/claro/css/components/tableselect.css
@@ -24,5 +24,5 @@ th.checkbox {
}
tr.selected td {
- background-color: #e6ecf8;
+ background-color: var(--color-bgblue-active);
}
diff --git a/core/themes/claro/css/components/tableselect.pcss.css b/core/themes/claro/css/components/tableselect.pcss.css
index efb4ea1392d5b60e62ec1d7267295e00958109b8..1f6a644764af908503579259ab1272a1ce6a5d40 100644
--- a/core/themes/claro/css/components/tableselect.pcss.css
+++ b/core/themes/claro/css/components/tableselect.pcss.css
@@ -5,8 +5,6 @@
* @see tableselect.js
*/
-@import "../base/variables.pcss.css";
-
td.checkbox,
th.checkbox {
text-align: center;
diff --git a/core/themes/claro/css/components/tabs.css b/core/themes/claro/css/components/tabs.css
index 189cf5bbebdec05e560ffbc9d83b8d44e23b2c9c..f43a52f0751a517697690e5be5ccff9abebbe29b 100644
--- a/core/themes/claro/css/components/tabs.css
+++ b/core/themes/claro/css/components/tabs.css
@@ -12,7 +12,17 @@
:root {
/**
* Tabs.
- */ /* 48px */ /* 40px */
+ */
+ --tabs-border-radius-size: var(--base-border-radius);
+ --tabs--hover-height: 0.1875rem;
+ --tabs--focus-height: 0.1875rem;
+ --tabs--active-height: 0.1875rem;
+ --tabs-link-height: 3rem; /* 48px */
+ --tabs-secondary-link-height: 2.5rem; /* 40px */
+ --tabs-base-border: 1px solid var(--color-gray-200);
+ --tabs-base-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);
+ --tabs-trigger-border: 1px solid rgba(216, 217, 224, 0.8);
+ --tabs--hover-bg-color: #e6ecf8;
}
.tabs-wrapper > nav {
@@ -23,21 +33,21 @@
display: flex;
flex-direction: column;
width: 100%;
- margin: 0 0 1.5rem 0;
- border: 1px solid #d3d4d9;
- border-radius: 2px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ margin: 0 0 var(--space-l) 0;
+ border: var(--tabs-base-border);
+ border-radius: var(--tabs-border-radius-size);
+ box-shadow: var(--tabs-base-shadow);
}
[dir="rtl"] .tabs {
- margin: 0 0 1.5rem 0;
+ margin: 0 0 var(--space-l) 0;
}
.tabs__tab {
position: relative;
- border-bottom: 1px solid #d3d4d9;
- background-color: #f9faff;
- font-size: 0.889rem;
+ border-bottom: var(--tabs-base-border);
+ background-color: var(--color-gray-025);
+ font-size: var(--font-size-s);
font-weight: bold;
}
@@ -48,8 +58,8 @@
.tabs__tab.is-active {
display: flex;
justify-content: space-between;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ background-color: var(--color-white);
+ box-shadow: var(--tabs-base-shadow);
}
.tabs__link {
@@ -59,45 +69,45 @@
flex-grow: 1;
align-items: center;
box-sizing: border-box;
- min-height: 3rem;
- padding: 0.75rem 1.5rem;
+ min-height: var(--tabs-link-height);
+ padding: var(--space-s) var(--space-l);
text-decoration: none;
- color: #55565b;
+ color: var(--color-gray-800);
line-height: 1.2rem;
}
.tabs__link:focus {
- min-height: calc(3rem + 2px);
+ min-height: calc(var(--tabs-link-height) + var(--tabs--focus-height) - 1px);
margin: -1px;
- padding-left: calc(1.5rem - 2px); /* LTR */
+ padding-left: calc(var(--space-l) - var(--tabs--focus-height) + 1px); /* LTR */
text-decoration: none;
- color: #55565b;
- border: 3px solid #26a769;
- border-radius: 2px;
+ color: var(--color-gray-800);
+ border: var(--tabs--focus-height) solid var(--color-focus);
+ border-radius: var(--tabs-border-radius-size);
outline: none;
box-shadow: none;
}
[dir="rtl"] .tabs__link:focus {
- padding-right: calc(1.5rem - 2px);
- padding-left: 1.5rem;
+ padding-right: calc(var(--space-l) - var(--tabs--focus-height) + 1px);
+ padding-left: var(--space-l);
}
.tabs__link:hover {
text-decoration: none;
- color: #232429;
+ color: var(--color-text);
}
.tabs__link.is-active {
z-index: 1;
flex-grow: 1;
- color: #003cc5;
+ color: var(--color-absolutezero);
}
.tabs__link.is-active:focus {
margin: -1px 0;
- padding-right: 1.5rem;
- padding-left: 1.5rem;
+ padding-right: var(--space-l);
+ padding-left: var(--space-l);
border-left: none; /* LTR */
border-radius: 0;
}
@@ -108,11 +118,11 @@
[dir="rtl"] .tabs__link.is-active:focus {
border-right: none;
- border-left: 3px solid #26a769;
+ border-left: var(--tabs--focus-height) solid var(--color-focus);
}
.tabs__link.is-active:hover {
- color: #232429;
+ color: var(--color-text);
}
/* Active and hover indicator. */
@@ -128,18 +138,18 @@
z-index: 2;
top: -1px;
left: -1px; /* LTR */
- width: 0.1875rem;
+ width: var(--tabs--active-height);
height: calc(100% + 2px);
- border-left: 3px solid #003cc5; /* LTR */
- border-top-left-radius: 2px; /* LTR */
+ border-left: var(--tabs--active-height) solid var(--color-absolutezero); /* LTR */
+ border-top-left-radius: var(--tabs-border-radius-size); /* LTR */
}
[dir="rtl"] .tabs__tab.is-active::before {
right: -1px;
left: auto;
- border-right: 3px solid #003cc5;
+ border-right: var(--tabs--focus-height) solid var(--color-absolutezero);
border-left: none;
- border-radius: 0 2px 0 2px;
+ border-radius: 0 var(--tabs-border-radius-size) 0 var(--tabs-border-radius-size);
}
.tabs.is-open .tabs__tab.is-active::before {
@@ -147,12 +157,12 @@
}
[dir="rtl"] .tabs.is-open .tabs__tab.is-active::before {
- border-bottom-right-radius: 2px;
+ border-bottom-right-radius: var(--tabs-border-radius-size);
}
.tabs__tab.is-active:focus::before {
- top: -0.1875rem;
- height: calc(3rem + 2px);
+ top: calc(var(--tabs--focus-height)*-1);
+ height: calc(var(--tabs-link-height) + 2px);
}
.tabs__tab:not(.is-active) {
@@ -172,21 +182,21 @@
flex-shrink: 0;
align-items: center;
justify-content: center;
- width: 3rem;
+ width: var(--tabs-link-height);
padding-right: 1px;
text-align: center;
- border-left: 1px solid rgba(216, 217, 224, 0.8); /* LTR */
+ border-left: var(--tabs-trigger-border); /* LTR */
}
[dir="rtl"] .tabs__trigger {
- border-right: 1px solid rgba(216, 217, 224, 0.8);
+ border-right: var(--tabs-trigger-border);
border-left: none;
}
.tabs__trigger:focus {
padding-right: 0;
- border: 3px solid #26a769;
- border-radius: 2px;
+ border: var(--tabs--focus-height) solid var(--color-focus);
+ border-radius: var(--tabs-border-radius-size);
box-shadow: none;
}
@@ -204,23 +214,23 @@
.is-horizontal .tabs--secondary {
overflow: hidden;
- margin: -0.375rem -0.375rem 0;
- padding: 0.375rem 0.375rem 0;
+ margin: calc(var(--tabs--focus-height)*-1 + -0.1875rem) calc(var(--tabs--focus-height)*-1 + -0.1875rem) 0;
+ padding: calc(var(--tabs--focus-height) + 0.1875rem) calc(var(--tabs--focus-height) + 0.1875rem) 0;
border-radius: 0;
}
.is-horizontal .tabs--secondary .tabs__tab {
- font-size: 0.889rem;
+ font-size: var(--font-size-s);
}
.is-horizontal .tabs--secondary .tabs__link {
- min-height: 2.5rem;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
+ min-height: var(--tabs-secondary-link-height);
+ padding-top: var(--space-xs);
+ padding-bottom: var(--space-xs);
}
.is-horizontal .tabs--secondary .tabs__link:focus {
- min-height: 2.5rem;
+ min-height: var(--tabs-secondary-link-height);
}
.is-horizontal .tabs--secondary::after {
@@ -230,14 +240,14 @@
display: block;
width: 100%;
content: "";
- border-bottom: 1px solid #d3d4d9;
+ border-bottom: 1px solid var(--color-gray-200);
}
.is-horizontal .tabs__tab {
border-top: none;
border-bottom: none;
background: none;
- font-size: 1rem;
+ font-size: var(--font-size-base);
}
.is-horizontal .tabs__tab.is-active {
order: 0;
@@ -260,30 +270,30 @@
.is-horizontal .tabs__link {
padding-right: 2rem;
padding-left: 2rem;
- border-radius: 2px 2px 0 0;
+ border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;
}
.is-horizontal .tabs__link:focus {
- min-height: 3rem;
+ min-height: var(--tabs-link-height);
margin: 0;
padding-right: 2rem;
padding-left: 2rem;
- color: #232429;
+ color: var(--color-text);
border: none;
- border-radius: 2px 2px 0 0;
+ border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;
outline: 2px dotted transparent;
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
}
[dir="rtl"] .is-horizontal .tabs__link:focus {
border: none;
}
.is-horizontal .tabs--primary .tabs__link:focus {
- box-shadow: 0 0 0 2px #f3f4f9, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px var(--color-gray-050), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
}
.is-horizontal .tabs__link:hover {
- color: #0036b1;
- background: #e6ecf8;
+ color: var(--color-absolutezero-hover);
+ background: var(--tabs--hover-bg-color);
}
.is-horizontal .tabs__link.is-active::before {
@@ -292,9 +302,9 @@
bottom: 0;
left: 0;
width: 100%;
- height: 0.1875rem;
+ height: var(--tabs--active-height);
border-right: none;
- border-bottom: 3px solid #003cc5;
+ border-bottom: var(--tabs--active-height) solid var(--color-absolutezero);
border-left: none;
}
}
diff --git a/core/themes/claro/css/components/tabs.pcss.css b/core/themes/claro/css/components/tabs.pcss.css
index 38248652d15caee21bb7770e868b8aa2aaf02924..6f5f5da2df44fe883020839f166edc4d8e775a5f 100644
--- a/core/themes/claro/css/components/tabs.pcss.css
+++ b/core/themes/claro/css/components/tabs.pcss.css
@@ -2,8 +2,6 @@
* Tabs.
*/
-@import "../base/variables.pcss.css";
-
:root {
/**
* Tabs.
diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css
index 44662185f08a1c3d86bccf334694faec5dc5a1b2..ab2ee7f48e04038ef5e43501ac82c5ba745092d3 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -18,8 +18,8 @@
*/
.vertical-tabs {
- margin-top: 0.75rem;
- margin-bottom: 0.75rem;
+ margin-top: var(--vertical-tabs-margin-vertical);
+ margin-bottom: var(--vertical-tabs-margin-vertical);
border-top: 1px solid transparent; /* Need to hide the pane wrapper clearfix's height */
}
@@ -37,11 +37,11 @@
position: relative;
display: none;
float: left; /* LTR */
- width: 20em;
+ width: var(--vertical-tabs-menu-width);
margin: 0;
- padding-top: 0.5rem;
+ padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
list-style: none;
- color: #232429;
+ color: var(--color-text);
}
[dir="rtl"] .vertical-tabs__menu {
@@ -52,7 +52,7 @@
@media screen and (min-width: 85em) {
.vertical-tabs__menu {
display: block;
- width: 20em;
+ width: var(--vertical-tabs-menu-width);
}
}
@@ -62,14 +62,14 @@
.vertical-tabs__menu-item {
overflow: hidden;
- margin: -1rem -1px -0.5rem -0.5rem; /* LTR */
- padding: 0.5rem 0 0.5rem 0.5rem; /* LTR */
+ margin: var(--vertical-tabs-menu-item--top-margin) var(--vertical-tabs-menu-item--right-margin) var(--vertical-tabs-menu-item--bottom-margin) var(--vertical-tabs-menu-item--left-margin); /* LTR */
+ padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0 var(--vertical-tabs-menu-item-shadow-extraspace) var(--vertical-tabs-menu-item-shadow-extraspace); /* LTR */
}
[dir="rtl"] .vertical-tabs__menu-item {
- margin-right: -0.5rem;
- margin-left: -1px;
- padding-right: 0.5rem;
+ margin-right: var(--vertical-tabs-menu-item--left-margin);
+ margin-left: var(--vertical-tabs-menu-item--right-margin);
+ padding-right: var(--vertical-tabs-menu-item-shadow-extraspace);
padding-left: 0;
}
@@ -84,8 +84,8 @@
z-index: 1; /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
display: block;
width: 100%;
- margin-top: -1px;
- border-top: 1px solid #d3d4d9;
+ margin-top: calc(var(--vertical-tabs-menu-separator-size)*-1);
+ border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
}
/**
@@ -100,7 +100,7 @@
.vertical-tabs__menu-item::after {
z-index: 2;
- border-color: #fff;
+ border-color: var(--color-white);
}
/**
@@ -136,24 +136,23 @@
.vertical-tabs__menu-link {
position: relative;
display: block;
- margin-top: -1px;
- padding: 0.75rem 0.75rem 0.75rem calc(1.5rem - 0.25rem); /* LTR */
+ margin-top: calc(var(--vertical-tabs-border-size)*-1);
+ padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
text-decoration: none;
word-wrap: break-word;
-webkit-hyphens: auto;
- -ms-hyphens: auto;
hyphens: auto;
- color: #232429;
- border: 1px solid transparent;
- border-width: 1px 0 1px 4px; /* LTR */
- border-radius: 2px 0 0 2px; /* LTR */
+ color: var(--color-text);
+ border: var(--vertical-tabs-border-size) solid transparent;
+ border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */
+ border-radius: var(--vertical-tabs-border-radius) 0 0 var(--vertical-tabs-border-radius); /* LTR */
}
[dir="rtl"] .vertical-tabs__menu-link {
- padding-right: calc(1.5rem - 0.25rem);
- padding-left: 0.75rem;
- border-width: 1px 4px 1px 0;
- border-radius: 0 2px 2px 0;
+ padding-right: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
+ padding-left: var(--space-s);
+ border-width: var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size) var(--vertical-tabs-border-size) 0;
+ border-radius: 0 var(--vertical-tabs-border-radius) var(--vertical-tabs-border-radius) 0;
}
@media screen and (-ms-high-contrast: active) {
@@ -172,7 +171,7 @@
.vertical-tabs__menu-link:hover {
text-decoration: none;
- color: #003cc5;
+ color: var(--color-absolutezero);
}
/* This pseudo element provides the background for the hover state. */
@@ -180,22 +179,22 @@
.vertical-tabs__menu-link::before {
position: absolute;
z-index: 0; /* This should be on a lower level than the menu-item separator lines. */
- top: -1px;
+ top: calc(var(--vertical-tabs-border-size)*-1);
right: 0; /* LTR */
- bottom: -1px;
- left: -0.25rem; /* LTR */
+ bottom: calc(var(--vertical-tabs-border-size)*-1);
+ left: calc(var(--vertical-tabs-menu-link--active-border-size)*-1); /* LTR */
content: "";
pointer-events: none;
background-clip: padding-box;
}
[dir="rtl"] .vertical-tabs__menu-link::before {
- right: -0.25rem;
+ right: calc(var(--vertical-tabs-menu-link--active-border-size)*-1);
left: 0;
}
.vertical-tabs__menu-link:hover::before {
- background: #f0f5fd;
+ background: var(--color-bgblue-hover);
}
.vertical-tabs__menu-link:focus::after {
@@ -204,36 +203,36 @@
right: 0;
bottom: 0;
left: 0;
- margin: -1px -0.25rem;
+ margin: calc(var(--vertical-tabs-border-size)*-1) calc(var(--vertical-tabs-menu-link--active-border-size)*-1);
content: "";
pointer-events: none;
- border: 3px solid #26a769;
- border-radius: 2px;
+ border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
+ border-radius: var(--vertical-tabs-border-radius);
}
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
z-index: 3; /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
- color: #003cc5;
- border-color: #dedfe4 transparent;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ color: var(--color-absolutezero);
+ border-color: var(--vertical-tabs-border-color) transparent;
+ background-color: var(--color-white);
+ box-shadow: var(--vertical-tabs-shadow);
}
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover {
- color: #0036b1;
- background-color: #f0f5fd;
+ color: var(--color-absolutezero-hover);
+ background-color: var(--color-bgblue-hover);
}
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
- border-left: 4px solid #003cc5; /* LTR */
- border-radius: 2px 0 0 2px; /* LTR */
+ border-left: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); /* LTR */
+ border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */
}
[dir=rtl] .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
- border-right: 4px solid #003cc5;
+ border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
border-left: 0;
- border-radius: 0 2px 2px 0;
+ border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
}
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover::before {
@@ -265,8 +264,8 @@
.vertical-tabs__menu-link-summary {
display: block;
- color: #55565b;
- font-size: 0.889rem;
+ color: var(--color-gray-800);
+ font-size: var(--font-size-s);
font-weight: normal;
}
@@ -276,13 +275,13 @@
.vertical-tabs__items {
box-sizing: border-box;
- margin-top: 0.75rem;
- margin-bottom: 0.75rem;
- color: #232429;
- border: 1px solid #dedfe4;
- border-radius: 2px;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ margin-top: var(--vertical-tabs-margin-vertical);
+ margin-bottom: var(--vertical-tabs-margin-vertical);
+ color: var(--color-text);
+ border: var(--vertical-tabs-border);
+ border-radius: var(--vertical-tabs-border-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--vertical-tabs-shadow);
}
/* This modifier is added by JavaScript (this is inherited from Drupal core). */
@@ -305,14 +304,14 @@
@media screen and (min-width: 85em) {
.vertical-tabs__items--processed {
- margin-left: 20em; /* LTR */
+ margin-left: var(--vertical-tabs-menu-width); /* LTR */
border-top-left-radius: 0; /* LTR */
}
.js[dir="rtl"] .vertical-tabs__items--processed {
- margin-right: 20em;
+ margin-right: var(--vertical-tabs-menu-width);
margin-left: 0;
- border-top-left-radius: 2px;
+ border-top-left-radius: var(--vertical-tabs-border-radius);
border-top-right-radius: 0;
}
}
@@ -326,19 +325,19 @@
.vertical-tabs__item {
/* Render on top of the border of vertical-tabs__items. */
- margin: -1px -1px 0;
+ margin: calc(var(--vertical-tabs-border-size)*-1) calc(var(--vertical-tabs-border-size)*-1) 0;
border-radius: 0;
}
.vertical-tabs__item--first {
- border-top-left-radius: 2px;
- border-top-right-radius: 2px;
+ border-top-left-radius: var(--details-accordion-border-size-radius);
+ border-top-right-radius: var(--details-accordion-border-size-radius);
}
.vertical-tabs__item--last {
- margin-bottom: -1px;
- border-bottom-right-radius: 2px;
- border-bottom-left-radius: 2px;
+ margin-bottom: calc(var(--vertical-tabs-border-size)*-1);
+ border-bottom-right-radius: var(--details-accordion-border-size-radius);
+ border-bottom-left-radius: var(--details-accordion-border-size-radius);
}
@media screen and (min-width: 85em) {
diff --git a/core/themes/claro/css/components/vertical-tabs.pcss.css b/core/themes/claro/css/components/vertical-tabs.pcss.css
index 08131f4f9c24e08a090e5e1db100dc77aeaec4cc..1d4a46c358b13d51dbc03161a5494899a26c3af9 100644
--- a/core/themes/claro/css/components/vertical-tabs.pcss.css
+++ b/core/themes/claro/css/components/vertical-tabs.pcss.css
@@ -5,8 +5,6 @@
* Replaces /core/misc/vertical-tabs.css.
*/
-@import "../base/variables.pcss.css";
-
/**
* Main wrapper of vertical tabs.
* This wrapper div is added by JavaScript.
diff --git a/core/themes/claro/css/components/views-exposed-form.css b/core/themes/claro/css/components/views-exposed-form.css
index 3b9cedbc88138a05fa773ae403e051354d6d1512..1dcd477e5631bc8afd0b2f92600b6b839e178414 100644
--- a/core/themes/claro/css/components/views-exposed-form.css
+++ b/core/themes/claro/css/components/views-exposed-form.css
@@ -27,13 +27,13 @@
.views-exposed-form.views-exposed-form {
display: flex;
flex-wrap: wrap;
- margin-top: 1.5rem;
- margin-bottom: 1.5rem;
- padding: 0.5rem 1.5rem 1.5rem 1.5rem;
- border: 1px solid #dedfe4;
- border-radius: 2px;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ margin-top: var(--space-l);
+ margin-bottom: var(--space-l);
+ padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
+ border: var(--details-border-size) solid var(--details-border-color);
+ border-radius: var(--details-border-size-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--details-box-shadow);
}
.views-exposed-form--preview.views-exposed-form--preview {
@@ -42,21 +42,21 @@
.views-exposed-form__item.views-exposed-form__item {
max-width: 100%;
- margin: 0.75rem 0.5rem 0 0; /* LTR */
+ margin: var(--space-s) var(--space-xs) 0 0; /* LTR */
}
[dir="rtl"] .views-exposed-form__item.views-exposed-form__item {
margin-right: 0;
- margin-left: 0.5rem;
+ margin-left: var(--space-xs);
}
.views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {
- margin-right: 1rem; /* LTR */
+ margin-right: var(--space-m); /* LTR */
}
[dir="rtl"] .views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {
margin-right: 0;
- margin-left: 1rem;
+ margin-left: var(--space-m);
}
.views-exposed-form__item--actions.views-exposed-form__item--actions .button {
@@ -75,5 +75,5 @@
.views-exposed-form .form-item--no-label,
.views-exposed-form__item.views-exposed-form__item.views-exposed-form__item--actions {
/* Line height of a label + existing margin for the element + margin for label */
- margin-top: 2.375rem;
+ margin-top: calc(var(--line-height-form-label) + var(--space-s) + var(--space-xs));
}
diff --git a/core/themes/claro/css/components/views-exposed-form.pcss.css b/core/themes/claro/css/components/views-exposed-form.pcss.css
index 796f53d08fce7e696d9d0def581b7ffce3589498..5a1b1dc18d22204be66c2d4cd620aa74e7083dad 100644
--- a/core/themes/claro/css/components/views-exposed-form.pcss.css
+++ b/core/themes/claro/css/components/views-exposed-form.pcss.css
@@ -3,8 +3,6 @@
* Visual styles for views exposed form.
*/
-@import "../base/variables.pcss.css";
-
/**
* Use flexbox and some margin resets to make the fields + actions go inline.
*
diff --git a/core/themes/claro/css/components/views-ui.css b/core/themes/claro/css/components/views-ui.css
index d1cfe47438b7fee659a60c4a3b17f5135def56f2..c92499cddbc22df2776b5548c5c53a680d16ac23 100644
--- a/core/themes/claro/css/components/views-ui.css
+++ b/core/themes/claro/css/components/views-ui.css
@@ -58,8 +58,8 @@ details.fieldset-no-legend {
}
.views-ui-dialog .form-item {
- margin-top: 1rem;
- margin-bottom: 1rem;
+ margin-top: var(--space-m);
+ margin-bottom: var(--space-m);
}
.views-ui-dialog .form-type--boolean {
@@ -85,9 +85,9 @@ details.fieldset-no-legend {
}
.views-ui-dialog .form-item:first-of-type.description {
- margin: 0 0 1.5rem 0;
- padding-bottom: 0.75rem;
- border-bottom: 0.0625rem solid #d3d4d9;
+ margin: 0 0 var(--space-l) 0;
+ padding-bottom: var(--space-s);
+ border-bottom: 0.0625rem solid var(--color-gray-200);
font-weight: bold;
}
@@ -99,14 +99,14 @@ details.fieldset-no-legend {
}
.views-ui-dialog .form-element {
- min-height: calc(2.3125rem - 2px); /* iOS. */
- padding: calc(0.5rem - 2px) calc(1rem - 1px);
- font-size: 0.79rem;
- line-height: 1.3125rem;
+ min-height: calc(var(--input-padding-vertical--small)*2 + var(--input-border-size)*2 + var(--input-line-height--small)); /* iOS. */
+ padding: var(--input-padding-vertical--small) var(--input-padding-horizontal--small);
+ font-size: var(--input-font-size--small);
+ line-height: var(--input-line-height--small);
}
.views-ui-dialog .form-element--type-select {
- padding-right: calc(2rem + 2px);
+ padding-right: calc(var(--space-m)*2 + var(--input-border-size)*2);
background-position: 100% 56%;
}
@@ -184,7 +184,7 @@ details.fieldset-no-legend {
}
.views-display-top__extra-actions-wrapper {
- margin: 0.25rem 0.5rem 0.5rem;
+ margin: calc(var(--space-xs)/2) var(--space-xs) var(--space-xs);
}
/* @end */
@@ -219,7 +219,7 @@ details.fieldset-no-legend {
display: flex;
overflow: visible;
flex-wrap: wrap;
- margin: 0 1.5rem 0 0; /* LTR */
+ margin: 0 var(--space-l) 0 0; /* LTR */
padding: 0;
list-style: none;
text-align: left; /* LTR */
@@ -228,7 +228,7 @@ details.fieldset-no-legend {
[dir="rtl"] .views-tabs {
margin-right: 0;
- margin-left: 1.5rem;
+ margin-left: var(--space-l);
text-align: right;
}
@@ -273,7 +273,7 @@ details.fieldset-no-legend {
.views-tabs a {
display: inline-block;
padding: 0.625rem;
- border: 1px solid #cbcbcb;
+ border: var(--input-border-size) solid #cbcbcb;
border-radius: 0.4375rem;
font-size: small;
line-height: 1.3333;
@@ -309,26 +309,26 @@ details.fieldset-no-legend {
.views-tabs .add a {
padding: 0.5625rem 0.8125rem 0.5625rem 0.5625rem;
- color: #55565b;
+ color: var(--color-gray-800);
border: none;
- border-radius: 2px;
+ border-radius: var(--base-border-radius);
background-color: transparent;
- font-size: 1rem;
+ font-size: var(--font-size-base);
font-weight: 700;
}
.views-tabs .add a::before {
display: inline-block;
width: 1em;
- height: calc(1em - 2px);
+ height: calc(1em - var(--input-border-size)*2);
content: "";
/* Copy of icon from .action-link--icon-plus */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23545560'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
}
.views-tabs .add a:hover {
- color: #0036b1;
- background-color: #f0f5fd;
+ color: var(--color-absolutezero-hover);
+ background-color: var(--color-bgblue-hover);
}
.views-tabs .add a:hover::before {
@@ -337,13 +337,13 @@ details.fieldset-no-legend {
}
.views-tabs .add a:focus {
- background-color: #e6ecf8;
+ background-color: var(--color-bgblue-active);
box-shadow: 0 0 0 3px #26a769;
}
.views-tabs .add.open a {
- color: #fff;
- background-color: #003cc5;
+ color: var(--color-white);
+ background-color: var(--color-absolutezero);
}
.views-tabs .add.open a::before {
@@ -362,7 +362,7 @@ details.fieldset-no-legend {
top: 2.375rem;
left: -2px; /* LTR */
margin: 0;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ box-shadow: var(--details-box-shadow);
}
[dir="rtl"] .views-tabs .action-list {
@@ -383,25 +383,25 @@ details.fieldset-no-legend {
.views-tabs .action-list li:first-child {
border-width: 1px 1px 0;
- border-radius: 0 2px 0 0; /* LTR */
+ border-radius: 0 var(--base-border-radius) 0 0; /* LTR */
}
[dir="rtl"] .views-tabs .action-list li:first-child {
- border-radius: 0 0 0 2px;
+ border-radius: 0 0 0 var(--base-border-radius);
}
.views-tabs .action-list li:last-child,
.views-displays .action-list li:last-child {
padding-bottom: 0.4rem;
border-width: 0 1px 1px;
- border-bottom-right-radius: 2px;
- border-bottom-left-radius: 2px;
+ border-bottom-right-radius: var(--button-border-radius-size);
+ border-bottom-left-radius: var(--button-border-radius-size);
}
.views-tabs__action-list-button {
width: 100%;
margin: 0;
- padding: 0.75rem 1.5rem;
+ padding: var(--space-s) var(--space-l);
text-align: left;
border: medium none;
border-radius: 0;
@@ -417,8 +417,8 @@ details.fieldset-no-legend {
.views-tabs__action-list-button.button:hover,
.views-tabs__action-list-button.button:focus {
- color: #fff;
- background-color: #003cc5;
+ color: var(--color-white);
+ background-color: var(--color-absolutezero);
}
/* Remove outline provided by default styling */
@@ -456,7 +456,7 @@ details.fieldset-no-legend {
}
.views-ui-rearrange-filter-form tr:first-of-type {
- border-top: 0.0625rem solid #d3d4d9;
+ border-top: 0.0625rem solid var(--color-gray-200);
}
.views-ui-rearrange-filter-form tr:not(.draggable):hover {
@@ -486,7 +486,6 @@ details.fieldset-no-legend {
}
[dir="rtl"] .views-ui-rearrange-filter-form tr td:last-child {
- border-right: 0;
border-right: initial;
border-left: medium none;
}
@@ -531,7 +530,6 @@ details.fieldset-no-legend {
}
[dir="rtl"] .views-query-info table tr td:last-child {
- border-right: 0;
border-right: initial;
border-left: 0 none;
}
@@ -576,26 +574,26 @@ details.fieldset-no-legend {
.views-config-group-region {
display: table;
- margin: 1.5rem 0;
- border: 0.0625rem solid #d3d4d9;
+ margin: var(--space-l) 0;
+ border: 0.0625rem solid var(--color-gray-200);
border-collapse: collapse;
}
.views-config-group-region .views-group-box {
position: relative;
display: table-cell;
- padding: 1.5rem;
- border: 0.0625rem solid #d3d4d9;
+ padding: var(--space-l);
+ border: 0.0625rem solid var(--color-gray-200);
}
.views-config-group-region .views-group-box--operator {
- padding-right: 3rem;
+ padding-right: var(--space-xl);
border-right-width: 0;
}
[dir="rtl"] .views-config-group-region .views-group-box--operator {
- padding-right: 1.5rem;
- padding-left: 3rem;
+ padding-right: var(--space-l);
+ padding-left: var(--space-xl);
border-right-width: 0.0625rem;
border-left-width: 0;
}
@@ -611,13 +609,13 @@ details.fieldset-no-legend {
}
.views-config-group-region .views-group-box--value > .form-item {
- margin-right: 1.5rem; /* LTR */
- margin-left: 3rem; /* LTR */
+ margin-right: var(--space-l); /* LTR */
+ margin-left: var(--space-xl); /* LTR */
}
[dir="rtl"] .views-config-group-region .views-group-box--value > .form-item {
- margin-right: 3rem; /* LTR */
- margin-left: 1.5rem; /* LTR */
+ margin-right: var(--space-xl); /* LTR */
+ margin-left: var(--space-l); /* LTR */
}
.views-config-group-region .views-group-box--value > .form-item::before {
@@ -627,7 +625,7 @@ details.fieldset-no-legend {
width: 0.0625rem;
height: 100%;
content: "";
- border-left: 0.0625rem solid #d3d4d9;
+ border-left: 0.0625rem solid var(--color-gray-200);
}
[dir="rtl"] .views-config-group-region .views-group-box--value > .form-item::before {
@@ -638,19 +636,19 @@ details.fieldset-no-legend {
position: absolute;
z-index: 1;
top: 3.8rem;
- left: -1rem; /* LTR */
+ left: calc(0 - var(--space-m)); /* LTR */
padding: 0 0.3rem 0.3rem 0.4rem; /* LTR */
content: ">";
- color: #828388;
- border: 0.0625rem solid #d3d4d9;
+ color: var(--color-gray-600);
+ border: 0.0625rem solid var(--color-gray-200);
background: #fff;
- font-size: 2.027rem;
+ font-size: var(--font-size-h1);
font-weight: bold;
- line-height: 2.027rem;
+ line-height: var(--font-size-h1);
}
[dir="rtl"] .views-config-group-region .views-group-box--value > .form-item::after {
- right: -1rem;
+ right: calc(0 - var(--space-m));
left: auto;
padding-right: 0.4rem;
padding-left: 0.3rem;
@@ -688,6 +686,6 @@ details.fieldset-no-legend {
}
[dir="rtl"] .views-display-top__extra-actions-wrapper {
margin-right: auto;
- margin-left: 0.25rem;
+ margin-left: calc(var(--space-xs)/2);
}
}
diff --git a/core/themes/claro/css/components/views-ui.pcss.css b/core/themes/claro/css/components/views-ui.pcss.css
index 8f9a95b17949fef3c80b4ca1a455cc99dccd79c4..3b5a4b0b231b1a1220b38b4803f27f77e784287d 100644
--- a/core/themes/claro/css/components/views-ui.pcss.css
+++ b/core/themes/claro/css/components/views-ui.pcss.css
@@ -2,8 +2,6 @@
* Views styling
*/
-@import "../base/variables.pcss.css";
-
/* @group Forms */
/**
diff --git a/core/themes/claro/css/layout/breadcrumb.css b/core/themes/claro/css/layout/breadcrumb.css
index 88524e82fac9b0bc13ce0a2dcc297a9310c02b99..4e4fc3720c1cee965b5bedf4d9cb7f6fa613210f 100644
--- a/core/themes/claro/css/layout/breadcrumb.css
+++ b/core/themes/claro/css/layout/breadcrumb.css
@@ -11,5 +11,5 @@
*/
.region-breadcrumb {
- min-height: 1.25rem;
+ min-height: var(--breadcrumb-height);
}
diff --git a/core/themes/claro/css/layout/breadcrumb.pcss.css b/core/themes/claro/css/layout/breadcrumb.pcss.css
index f587326346a598d0a51994c729cf11025d51816c..41d3079e6ecce1ead8c12cfd91312ff9421feedc 100644
--- a/core/themes/claro/css/layout/breadcrumb.pcss.css
+++ b/core/themes/claro/css/layout/breadcrumb.pcss.css
@@ -3,8 +3,6 @@
* Breadcrumb region.
*/
-@import "../base/variables.pcss.css";
-
.region-breadcrumb {
min-height: var(--breadcrumb-height);
}
diff --git a/core/themes/claro/css/layout/card-list.css b/core/themes/claro/css/layout/card-list.css
index 2a2bd4f65176a9d8617da575523b4056d378af87..a2e62741bd27c2bac24b08b23cf4f751e0c3b4c8 100644
--- a/core/themes/claro/css/layout/card-list.css
+++ b/core/themes/claro/css/layout/card-list.css
@@ -11,7 +11,11 @@
*/
:root {
+ --card-list-spacing: var(--space-m);
/* Using 100% as base causes issues in IE11. */
+ --cards-two-cols-width: calc(49.95% + var(--card-list-spacing)/2 - var(--card-list-spacing));
+ --cards-three-cols-width: calc(33.3% + var(--card-list-spacing)/3 - var(--card-list-spacing));
+ --cards-four-cols-width: calc(24.975% + var(--card-list-spacing)/4 - var(--card-list-spacing));
}
.card-list {
@@ -29,7 +33,7 @@
.card-list__item {
box-sizing: border-box;
- margin-bottom: 1rem;
+ margin-bottom: var(--card-list-spacing);
}
.card-list--two-cols .card-list__item,
@@ -41,16 +45,16 @@
@media screen and (min-width: 36.75rem) {
.card-list--four-cols .card-list__item {
- flex-basis: calc(49.95% - 0.5rem);
- max-width: calc(49.95% - 0.5rem);
+ flex-basis: var(--cards-two-cols-width);
+ max-width: var(--cards-two-cols-width);
}
.card-list--four-cols .card-list__item {
- margin-right: 1rem;
+ margin-right: var(--card-list-spacing);
}
[dir="rtl"] .card-list--four-cols .card-list__item {
margin-right: 0;
- margin-left: 1rem;
+ margin-left: var(--card-list-spacing);
}
.card-list--four-cols .card-list__item:nth-child(even) {
@@ -75,16 +79,16 @@
@media screen and (min-width: 70rem) {
.card-list--four-cols .card-list__item {
- flex-basis: calc(33.3% - 0.66667rem);
- max-width: calc(33.3% - 0.66667rem);
+ flex-basis: var(--cards-three-cols-width);
+ max-width: var(--cards-three-cols-width);
}
.card-list--four-cols .card-list__item:nth-child(even) {
- margin-right: 1rem;
+ margin-right: var(--card-list-spacing);
}
[dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
margin-right: 0;
- margin-left: 1rem;
+ margin-left: var(--card-list-spacing);
}
.card-list--four-cols .card-list__item:nth-child(3n) {
@@ -98,13 +102,13 @@
@media screen and (min-width: 85.375rem) {
.card-list--two-cols .card-list__item {
- flex-basis: calc(49.95% - 0.5rem);
- max-width: calc(49.95% - 0.5rem);
- margin-right: 1rem;
+ flex-basis: var(--cards-two-cols-width);
+ max-width: var(--cards-two-cols-width);
+ margin-right: var(--card-list-spacing);
}
[dir="rtl"] .card-list--two-cols .card-list__item {
margin-right: 0;
- margin-left: 1rem;
+ margin-left: var(--card-list-spacing);
}
.card-list--two-cols .card-list__item:nth-child(even) {
@@ -116,24 +120,24 @@
}
.card-list--four-cols .card-list__item {
- flex-basis: calc(24.975% - 0.75rem);
- max-width: calc(24.975% - 0.75rem);
+ flex-basis: var(--cards-four-cols-width);
+ max-width: var(--cards-four-cols-width);
}
.card-list--four-cols .card-list__item:nth-child(even) {
- margin-right: 1rem;
+ margin-right: var(--card-list-spacing);
}
[dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
margin-right: 0;
- margin-left: 1rem;
+ margin-left: var(--card-list-spacing);
}
.card-list--four-cols .card-list__item:nth-child(3n) {
- margin-right: 1rem;
+ margin-right: var(--card-list-spacing);
}
[dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
margin-right: 0;
- margin-left: 1rem;
+ margin-left: var(--card-list-spacing);
}
.card-list--four-cols .card-list__item:nth-child(4n) {
diff --git a/core/themes/claro/css/layout/card-list.pcss.css b/core/themes/claro/css/layout/card-list.pcss.css
index 040e09cd054cdeda533e606839e6110b5126c21c..e76106263a22e916917b757d6ce11a92ebab2038 100644
--- a/core/themes/claro/css/layout/card-list.pcss.css
+++ b/core/themes/claro/css/layout/card-list.pcss.css
@@ -3,8 +3,6 @@
* Cards list.
*/
-@import "../base/variables.pcss.css";
-
:root {
--card-list-spacing: var(--space-m);
/* Using 100% as base causes issues in IE11. */
diff --git a/core/themes/claro/css/layout/local-actions.css b/core/themes/claro/css/layout/local-actions.css
index 9fa0e3e46c47679a49b54fa5d63abe74bd8877b5..b1970d6a873ee2217e5abe9c7e4c1ea66a70c3f7 100644
--- a/core/themes/claro/css/layout/local-actions.css
+++ b/core/themes/claro/css/layout/local-actions.css
@@ -15,7 +15,7 @@
*/
.local-actions {
- margin: 1rem 0;
+ margin: var(--space-m) 0;
padding: 0;
list-style: none;
}
@@ -28,7 +28,7 @@
.local-actions__item {
display: inline-block;
- margin: 0 0.25rem;
+ margin: 0 calc(var(--space-xs)/2);
}
.local-actions__item:first-child {
@@ -37,7 +37,7 @@
[dir="rtl"] .local-actions__item:first-child {
margin-right: 0;
- margin-left: 0.25rem;
+ margin-left: calc(var(--space-xs)/2);
}
.local-actions__item:last-child {
@@ -45,7 +45,7 @@
}
[dir="rtl"] .local-actions__item:last-child {
- margin-right: 0.25rem;
+ margin-right: calc(var(--space-xs)/2);
margin-left: 0;
}
diff --git a/core/themes/claro/css/layout/local-actions.pcss.css b/core/themes/claro/css/layout/local-actions.pcss.css
index fed50edc802208ad0a50f655de14fa363291dd9d..4b136f7cd17dd7627ad672439a2c1e7f13667271 100644
--- a/core/themes/claro/css/layout/local-actions.pcss.css
+++ b/core/themes/claro/css/layout/local-actions.pcss.css
@@ -3,8 +3,6 @@
* Layout styles for local actions.
*/
-@import "../base/variables.pcss.css";
-
/**
* Action link layout styles.
*/
diff --git a/core/themes/claro/css/layout/node-add.css b/core/themes/claro/css/layout/node-add.css
index c45210c2531171f7d07b3113c2986a26e55adcde..b7c306fe88242a39a66f32c6296832c3561b4e6a 100644
--- a/core/themes/claro/css/layout/node-add.css
+++ b/core/themes/claro/css/layout/node-add.css
@@ -9,12 +9,16 @@
* Layout overrides for node add/edit form.
*/
+:root {
+ --node-meta-width: 22.5rem;
+}
+
.layout-region {
box-sizing: border-box;
}
.layout-region--node-footer .layout-region__content {
- margin-top: 1.5rem;
+ margin-top: var(--space-l);
}
/**
@@ -25,14 +29,14 @@
.layout-region--node-main,
.layout-region--node-footer {
float: left; /* LTR */
- width: calc(100% - 22.5rem);
- padding-right: 1.5rem; /* LTR */
+ width: calc(100% - var(--node-meta-width));
+ padding-right: var(--space-l); /* LTR */
}
[dir="rtl"] .layout-region--node-main,
[dir="rtl"] .layout-region--node-footer {
float: right;
padding-right: 0;
- padding-left: 1.5rem;
+ padding-left: var(--space-l);
}
.layout-region--node-main .layout-region__content,
@@ -43,12 +47,12 @@
}
.layout-region--node-footer .layout-region__content {
- margin-top: 0.5rem;
+ margin-top: var(--space-xs);
}
.layout-region--node-secondary {
float: right; /* LTR */
- width: 22.5rem;
+ width: var(--node-meta-width);
}
[dir="rtl"] .layout-region--node-secondary {
float: left;
@@ -56,6 +60,6 @@
/* Push sidebar down to horizontal align with form section */
.layout-region--node-secondary {
- margin-top: 1.5rem;
+ margin-top: var(--space-l);
}
}
diff --git a/core/themes/claro/css/layout/node-add.pcss.css b/core/themes/claro/css/layout/node-add.pcss.css
index d18672a221634d7e564d0ffea46f8747ec82db10..2f1353f0afb4dc2c72626dc3c9e5381314f0d71a 100644
--- a/core/themes/claro/css/layout/node-add.pcss.css
+++ b/core/themes/claro/css/layout/node-add.pcss.css
@@ -2,8 +2,6 @@
* Layout overrides for node add/edit form.
*/
-@import "../base/variables.pcss.css";
-
:root {
--node-meta-width: 22.5rem;
}
diff --git a/core/themes/claro/css/theme/ckeditor-dialog.css b/core/themes/claro/css/theme/ckeditor-dialog.css
index ced91ec58d75ef5c9c13dfec481f26d74d1a6922..06762b99a934d0225112609d738235dcffa9c14d 100644
--- a/core/themes/claro/css/theme/ckeditor-dialog.css
+++ b/core/themes/claro/css/theme/ckeditor-dialog.css
@@ -38,7 +38,7 @@
}
.cke_reset_all .cke_dialog_body * {
- font: 0.8125rem/1.538em BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font: 0.8125rem/1.538em var(--font-family);
}
/* Dialog's header. */
diff --git a/core/themes/claro/css/theme/ckeditor-dialog.pcss.css b/core/themes/claro/css/theme/ckeditor-dialog.pcss.css
index 3b3f951df4aa283e3106db24df473c62d7e66b79..266a69b06703a1a5c43d3597897bf75decdc03f5 100644
--- a/core/themes/claro/css/theme/ckeditor-dialog.pcss.css
+++ b/core/themes/claro/css/theme/ckeditor-dialog.pcss.css
@@ -3,8 +3,6 @@
* CKEditor-native dialogs theming.
*/
-@import "../base/variables.pcss.css";
-
.cke_dialog_background_cover {
display: none;
}
diff --git a/core/themes/claro/css/theme/ckeditor-editor.css b/core/themes/claro/css/theme/ckeditor-editor.css
index 05fadc971b45ce579469da0d7bf5ff87e59adb0e..397264eb2ddd9cdf6ed996bc59ae08ca47a18fc4 100644
--- a/core/themes/claro/css/theme/ckeditor-editor.css
+++ b/core/themes/claro/css/theme/ckeditor-editor.css
@@ -8,16 +8,20 @@
* @file
* CKEditor appearance overrides.
*/
-:root { /* 1px */
- /* Inner border size must be based on chrome border size. */ /* 1px */
+:root {
+ --ckeditor-chrome-border-size: var(--input-border-size); /* 1px */
+ --ckeditor-chrome-border-radius: var(--base-border-radius);
+ /* Inner border size must be based on chrome border size. */
+ --ckeditor-inner-border-size: calc(var(--input--error-border-size) - var(--ckeditor-chrome-border-size)); /* 1px */
/* Inner border radius must be based on chrome border radius and size. */
+ --ckeditor-inner-border-radius: calc(var(--ckeditor-chrome-border-radius) - var(--ckeditor-chrome-border-size));
}
.cke.cke_chrome {
- border-width: 1px;
- border-radius: 2px;
+ border-width: var(--ckeditor-chrome-border-size);
+ border-radius: var(--ckeditor-chrome-border-radius);
}
.cke .cke_inner {
- border-radius: 1px;
+ border-radius: var(--ckeditor-inner-border-radius);
}
.cke_path_empty:only-child::after {
position: absolute;
@@ -26,49 +30,49 @@
bottom: 0;
left: 0;
content: "";
- background: #fff;
+ background: var(--input-bg-color);
}
.cke .cke_top {
- border: 1px solid transparent;
+ border: var(--ckeditor-inner-border-size) solid transparent;
border-bottom: 0;
- border-radius: 1px 1px 0 0;
+ border-radius: var(--ckeditor-inner-border-size) var(--ckeditor-inner-border-size) 0 0;
}
.cke .cke_contents {
- border: 1px solid transparent;
+ border: var(--ckeditor-inner-border-size) solid transparent;
border-top: 0;
border-bottom: 0;
}
.cke .cke_bottom {
- border: 1px solid transparent;
+ border: var(--ckeditor-inner-border-size) solid transparent;
border-top: 0;
- border-radius: 0 0 1px 1px;
+ border-radius: 0 0 var(--ckeditor-inner-border-size) var(--ckeditor-inner-border-size);
}
/* Default */
.cke.cke_chrome {
- border-color: #919297;
+ border-color: var(--input-border-color);
}
/* Hover. */
.cke.cke_chrome:hover,
.cke:hover .cke_contents,
.cke:hover .cke_top,
.cke:hover .cke_bottom {
- border-color: #232429;
+ border-color: var(--input--hover-border-color);
}
/* Focus. */
.cke.cke_chrome.cke_focus {
- outline: 2px dotted transparent;
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ outline: var(--focus-outline);
+ box-shadow: var(--focus-box-shadow);
}
/* Error. */
.error + .cke.cke_chrome,
.error + .cke .cke_contents,
.error + .cke .cke_top,
.error + .cke .cke_bottom {
- border-color: #d72222;
+ border-color: var(--input--error-border-color);
}
/* Disabled. */
[disabled] + .cke.cke_chrome {
- border-color: #bababf;
+ border-color: var(--input--disabled-border-color);
}
[disabled] + .cke .cke_contents,
[disabled] + .cke .cke_top,
@@ -76,7 +80,7 @@
border-color: transparent;
}
[disabled] + .cke .cke_contents {
- border-color: #f2f2f3;
+ border-color: var(--input--disabled-bg-color);
background: hsl(240, 4%, 90%); /* Calculated from disabled input bg and iframe opacity. */
}
[disabled] + .cke iframe,
@@ -84,7 +88,7 @@
opacity: 0.505;
}
[disabled] + .cke .cke_bottom {
- background: #f2f2f3;
+ background: var(--input--disabled-bg-color);
}
[disabled] + .cke .cke_bottom > * {
/* Don't show element path dor disabled editor. */
diff --git a/core/themes/claro/css/theme/ckeditor-editor.pcss.css b/core/themes/claro/css/theme/ckeditor-editor.pcss.css
index 0ed93d4c70232ed89127c557f466aa847aea8585..cefd72fed4018f0f00da6ba808c19b528e9f11a7 100644
--- a/core/themes/claro/css/theme/ckeditor-editor.pcss.css
+++ b/core/themes/claro/css/theme/ckeditor-editor.pcss.css
@@ -2,8 +2,6 @@
* @file
* CKEditor appearance overrides.
*/
-@import "../base/variables.pcss.css";
-
:root {
--ckeditor-chrome-border-size: var(--input-border-size); /* 1px */
--ckeditor-chrome-border-radius: var(--base-border-radius);
diff --git a/core/themes/claro/css/theme/ckeditor-frame.css b/core/themes/claro/css/theme/ckeditor-frame.css
index fa25f18fd7094dde7d782e6753f654b2d4dbd453..58df273204f04127d9b1e38b71d9054499f49e4d 100644
--- a/core/themes/claro/css/theme/ckeditor-frame.css
+++ b/core/themes/claro/css/theme/ckeditor-frame.css
@@ -11,5 +11,5 @@
*/
.cke_editable:not(.cke_editable_inline) {
- margin: 1em calc(1em - 2px);
+ margin: 1em calc(1em - var(--input-border-size) - var(--input-border-size));
}
diff --git a/core/themes/claro/css/theme/ckeditor-frame.pcss.css b/core/themes/claro/css/theme/ckeditor-frame.pcss.css
index 9d97cdc8fa4672f91194e96c9000bdb7ef8c12bd..1e7f1d73431c4a01f9272bbda7870523b5c373ff 100644
--- a/core/themes/claro/css/theme/ckeditor-frame.pcss.css
+++ b/core/themes/claro/css/theme/ckeditor-frame.pcss.css
@@ -3,8 +3,6 @@
* CKEditor frame styles.
*/
-@import "../base/variables.pcss.css";
-
.cke_editable:not(.cke_editable_inline) {
margin: 1em calc(1em - var(--input-border-size) - var(--input-border-size));
}
diff --git a/core/themes/claro/css/theme/ckeditor.admin.css b/core/themes/claro/css/theme/ckeditor.admin.css
index 4fe3b997b11b37b4111db1bf96d64660c9581257..d4c38cff7029308854e3cc16d392d3e4989ffe0c 100644
--- a/core/themes/claro/css/theme/ckeditor.admin.css
+++ b/core/themes/claro/css/theme/ckeditor.admin.css
@@ -19,5 +19,5 @@
*/
.ckeditor-toolbar-disabled .ckeditor-buttons li a:focus {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ box-shadow: var(--focus-box-shadow);
}
diff --git a/core/themes/claro/css/theme/ckeditor.admin.pcss.css b/core/themes/claro/css/theme/ckeditor.admin.pcss.css
index 78440d689126004d9b58cf7dafd6fa525102bb8c..ab1cb1c137c8d01e2d88d37aaf16d90575cf2231 100644
--- a/core/themes/claro/css/theme/ckeditor.admin.pcss.css
+++ b/core/themes/claro/css/theme/ckeditor.admin.pcss.css
@@ -3,8 +3,6 @@
* Claro specific styling for CKEditor admin.
*/
-@import "../base/variables.pcss.css";
-
/*
* This rule is needed to provide Claro's green focus outline. There is a style
* in the CKEditor module CSS that adds a box-shadow at a higher specificity
diff --git a/core/themes/claro/css/theme/field-ui.admin.css b/core/themes/claro/css/theme/field-ui.admin.css
index 7b64fb5a95ed7f733849c4a12d054582b51aecc2..393b24bbbc82f76fcd34a2645bd9590d5d37fced 100644
--- a/core/themes/claro/css/theme/field-ui.admin.css
+++ b/core/themes/claro/css/theme/field-ui.admin.css
@@ -24,7 +24,7 @@
.field-plugin-summary {
float: left; /* LTR */
- font-size: 0.889rem;
+ font-size: var(--font-size-s);
}
[dir="rtl"] .field-plugin-summary {
@@ -52,7 +52,7 @@
}
.field-plugin-settings-edit {
- width: 1rem;
+ width: var(--space-m);
margin: 0;
padding: 1px 0.5rem;
}
diff --git a/core/themes/claro/css/theme/field-ui.admin.pcss.css b/core/themes/claro/css/theme/field-ui.admin.pcss.css
index b989d27cc10cb82df524cc0377be99fd0fa2fd33..f63649cb1cb814043ffebfd985df024617363653 100644
--- a/core/themes/claro/css/theme/field-ui.admin.pcss.css
+++ b/core/themes/claro/css/theme/field-ui.admin.pcss.css
@@ -3,8 +3,6 @@
* Replacement styles for Field UI admin.
*/
-@import "../base/variables.pcss.css";
-
/* 'Manage fields' and 'Manage display' overviews */
.field-ui-overview .region-title td {
font-weight: bold;
diff --git a/core/themes/claro/css/theme/filter.theme.css b/core/themes/claro/css/theme/filter.theme.css
index db62ffd5fee9e4e26502a0cc44eeb011a0e16739..98cd48316f9506d976d7af0c92f0495dd79ccae1 100644
--- a/core/themes/claro/css/theme/filter.theme.css
+++ b/core/themes/claro/css/theme/filter.theme.css
@@ -66,7 +66,7 @@
.filter-guidelines__item {
margin-top: 0.5em; /* (6 / 12) */
- color: #55565b;
+ color: var(--input-fg-color--description);
font-size: 0.75em; /* (12 / 16) */
}
diff --git a/core/themes/claro/css/theme/filter.theme.pcss.css b/core/themes/claro/css/theme/filter.theme.pcss.css
index 460cb7b2e8c728e27db6d058866716a816e57380..9b36c76a97d5e51235788005dba9c457a186d6a9 100644
--- a/core/themes/claro/css/theme/filter.theme.pcss.css
+++ b/core/themes/claro/css/theme/filter.theme.pcss.css
@@ -3,8 +3,6 @@
* Styling for the Filter module.
*/
-@import "../base/variables.pcss.css";
-
/**
* Filter information under field.
*/
diff --git a/core/themes/claro/css/theme/maintenance-page.css b/core/themes/claro/css/theme/maintenance-page.css
index e4602957de85a0c880c4405bc3aced9d81506836..2c8d005c2681be30c66f8dcd50dad87c75304783 100644
--- a/core/themes/claro/css/theme/maintenance-page.css
+++ b/core/themes/claro/css/theme/maintenance-page.css
@@ -12,24 +12,24 @@
.maintenance-page {
min-height: 100%;
- background-color: #dedfe4;
+ background-color: var(--color-gray-100);
}
.site-name {
- margin-top: 1rem;
+ margin-top: var(--space-m);
word-wrap: break-word;
- color: #55565b;
- font-size: 1.424rem;
+ color: var(--color-gray-800);
+ font-size: var(--font-size-h4);
}
.site-name,
.title {
- margin-bottom: 1.5rem;
+ margin-bottom: var(--space-l);
}
.content {
- margin-bottom: 1rem;
- color: #55565b;
+ margin-bottom: var(--space-m);
+ color: var(--color-gray-800);
}
.site-name,
@@ -121,10 +121,10 @@
width: auto;
margin-right: 1.25em;
margin-left: 1.25em;
- padding: 3rem;
+ padding: var(--space-xl);
border-radius: 0.5rem;
background: #fff;
- box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
+ box-shadow: var(--shadow-z3);
}
.layout-container:after { /* no reason for a clearfix in the markup */
@@ -136,7 +136,7 @@
@media all and (max-width: 48em) { /* 768px */
.layout-container {
margin: 1.25em;
- padding: 1rem 1.5rem;
+ padding: var(--space-m) var(--space-l);
}
}
diff --git a/core/themes/claro/css/theme/maintenance-page.pcss.css b/core/themes/claro/css/theme/maintenance-page.pcss.css
index 9cffc0dc5824ddb96658a337584fb8bf3980433b..a08886cc3704d3c7b3bb7f3015cd52628949571a 100644
--- a/core/themes/claro/css/theme/maintenance-page.pcss.css
+++ b/core/themes/claro/css/theme/maintenance-page.pcss.css
@@ -3,8 +3,6 @@
* Maintenance theming.
*/
-@import "../base/variables.pcss.css";
-
.maintenance-page {
min-height: 100%;
background-color: var(--color-gray-100);
diff --git a/core/themes/claro/css/theme/media-library.css b/core/themes/claro/css/theme/media-library.css
index f48499892138792822ebb9c70d3c7ad8ff5f6ec5..8c746aba286b1cef60236cd903bccd4dbb13df07 100644
--- a/core/themes/claro/css/theme/media-library.css
+++ b/core/themes/claro/css/theme/media-library.css
@@ -29,17 +29,17 @@
.media-library-wrapper .messages-list,
.media-library-wrapper .messages {
margin-top: 0;
- margin-bottom: 1.5rem;
+ margin-bottom: var(--space-l);
}
.media-library-menu {
position: relative;
display: block;
- width: 20em;
+ width: var(--vertical-tabs-menu-width);
margin: 0;
- padding-top: 0.5rem;
+ padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
list-style: none;
- color: #232429;
+ color: var(--color-text);
}
[dir="rtl"] .media-library-menu {
@@ -48,45 +48,44 @@
.media-library-menu__item {
overflow: hidden;
- margin: -1rem -1px -0.5rem -0.5rem; /* LTR */
- padding: 0.5rem 0;
+ margin: var(--vertical-tabs-menu-item--top-margin) var(--vertical-tabs-menu-item--right-margin) var(--vertical-tabs-menu-item--bottom-margin) var(--vertical-tabs-menu-item--left-margin); /* LTR */
+ padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0;
}
[dir="rtl"] .media-library-menu__item {
- margin-right: -0.5rem;
- margin-left: -1px;
+ margin-right: var(--vertical-tabs-menu-item--left-margin);
+ margin-left: var(--vertical-tabs-menu-item--right-margin);
}
.media-library-menu__item::before {
- z-index: 0; /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
+ z-index: var(--vertical-tabs-menu--z-index); /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
display: block;
width: 100%;
- margin-top: -1px;
+ margin-top: calc(var(--vertical-tabs-menu-separator-size)*-1);
content: "";
- border-top: 1px solid #d3d4d9;
+ border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
}
.media-library-menu__link {
position: relative;
display: block;
- margin-top: -1px;
- padding: 0.75rem 0.75rem 0.75rem calc(1.5rem - 0.25rem); /* LTR */
+ margin-top: calc(var(--vertical-tabs-border-size)*-1);
+ padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
text-decoration: none;
word-wrap: break-word;
-webkit-hyphens: auto;
- -ms-hyphens: auto;
hyphens: auto;
- color: #232429;
- border: 1px solid transparent;
- border-width: 1px 0 1px 4px; /* LTR */
- border-radius: 2px 0 0 2px; /* LTR */
+ color: var(--color-text);
+ border: var(--vertical-tabs-border-size) solid transparent;
+ border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */
+ border-radius: var(--vertical-tabs-border-radius) 0 0 var(--vertical-tabs-border-radius); /* LTR */
}
[dir="rtl"] .media-library-menu__link {
- padding-right: calc(1.5rem - 0.25rem);
- padding-left: 0.75rem;
- border-width: 1px 4px 1px 0;
- border-radius: 0 2px 2px 0;
+ padding-right: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
+ padding-left: var(--space-s);
+ border-width: var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size) var(--vertical-tabs-border-size) 0;
+ border-radius: 0 var(--vertical-tabs-border-radius) var(--vertical-tabs-border-radius) 0;
}
@media screen and (-ms-high-contrast: active) {
@@ -98,36 +97,36 @@
/* Menu link states. */
.media-library-menu__link:focus {
- z-index: 3; /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
+ z-index: calc(var(--vertical-tabs-menu--z-index) + 3); /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
text-decoration: none;
box-shadow: none;
}
.media-library-menu__link:hover {
text-decoration: none;
- color: #003cc5;
+ color: var(--color-absolutezero);
/* These borders are necessary to replace the dividing lines while in the hover state. */
- border-top: 1px solid #d3d4d9;
- border-bottom: 1px solid #d3d4d9;
- background: #f0f5fd;
+ border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
+ border-bottom: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
+ background: var(--color-bgblue-hover);
}
/* This pseudo element provides the background for the hover state. */
.media-library-menu__link::before {
position: absolute;
- z-index: -1; /* This should be on a lower level than the menu-item separator lines. */
- top: -1px;
+ z-index: calc(var(--vertical-tabs-menu--z-index) - 1); /* This should be on a lower level than the menu-item separator lines. */
+ top: calc(var(--vertical-tabs-border-size)*-1);
right: 0; /* LTR */
- bottom: -1px;
- left: -0.25rem; /* LTR */
+ bottom: calc(var(--vertical-tabs-border-size)*-1);
+ left: calc(var(--vertical-tabs-menu-link--active-border-size)*-1); /* LTR */
content: "";
pointer-events: none;
background-clip: padding-box;
}
[dir="rtl"] .media-library-menu__link::before {
- right: -0.25rem;
+ right: calc(var(--vertical-tabs-menu-link--active-border-size)*-1);
left: 0;
}
@@ -137,36 +136,36 @@
right: 0;
bottom: 0;
left: 0;
- margin: -1px -0.25rem;
+ margin: calc(var(--vertical-tabs-border-size)*-1) calc(var(--vertical-tabs-menu-link--active-border-size)*-1);
content: "";
pointer-events: none;
- border: 3px solid #26a769;
- border-radius: 2px;
+ border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
+ border-radius: var(--vertical-tabs-border-radius);
}
.media-library-menu__link.active {
- z-index: 2; /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
- color: #003cc5;
- border-color: #dedfe4 transparent;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ z-index: calc(var(--vertical-tabs-menu--z-index) + 2); /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
+ color: var(--color-absolutezero);
+ border-color: var(--vertical-tabs-border-color) transparent;
+ background-color: var(--color-white);
+ box-shadow: var(--vertical-tabs-shadow);
}
.media-library-menu__link.active:hover {
- color: #0036b1;
- background-color: #f0f5fd;
+ color: var(--color-absolutezero-hover);
+ background-color: var(--color-bgblue-hover);
}
.media-library-menu__link.active::before {
z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
- border-left: 4px solid #003cc5; /* LTR */
- border-radius: 2px 0 0 2px; /* LTR */
+ border-left: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); /* LTR */
+ border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */
}
[dir=rtl] .media-library-menu__link.active::before {
- border-right: 4px solid #003cc5;
+ border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
border-left: 0;
- border-radius: 0 2px 2px 0;
+ border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
}
.media-library-menu__link.active:hover::before {
@@ -180,13 +179,13 @@
}
.media-library-menu + .media-library-content {
- z-index: 0;
- border-left: 1px solid #dedfe4; /* LTR */
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ z-index: var(--vertical-tabs-menu--z-index);
+ border-left: var(--vertical-tabs-border); /* LTR */
+ box-shadow: var(--vertical-tabs-shadow);
}
[dir="rtl"] .media-library-menu + .media-library-content {
- border-right: 1px solid #dedfe4;
+ border-right: var(--vertical-tabs-border);
border-left: 0;
}
@@ -216,9 +215,9 @@
*/
.media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
- margin: 0.5rem 0; /* LTR */
+ margin: var(--space-xs) 0; /* LTR */
/* Left padding is double the background size of the button icon. */
- padding: calc(0.25rem - 1px) calc(0.75rem - 1px) calc(0.25rem - 1px) 1.5rem;
+ padding: calc(var(--space-xs)/2 - 1px) calc(var(--space-s) - 1px) calc(var(--space-xs)/2 - 1px) calc(var(--space-s)*2);
}
/* This is needed to override the default extrasmall button left margin. */
@@ -228,11 +227,11 @@
}
.media-library-add-form__input-wrapper {
- padding: 0.5rem 1.5rem 1.5rem 1.5rem;
- border: 1px solid #dedfe4;
- border-radius: 2px;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
+ border: var(--details-border-size) solid var(--details-border-color);
+ border-radius: var(--base-border-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--details-box-shadow);
}
/* Style the media add upload form. */
@@ -249,7 +248,7 @@
/* Adjust the focus border on this element so it is not too close to buttons. */
.media-library-add-form__added-media:focus {
- box-shadow: 0 0 0 4px #fff, 0 0 0 7px #26a769;
+ box-shadow: 0 0 0 calc(var(--focus-border-offset-size) + 2px) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px) var(--color-focus);
}
.media-library-add-form .file-upload-help {
@@ -260,10 +259,10 @@
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ui-dialog > .ui-dialog-content {
- padding-right: calc(0.75rem - 0.4375rem);
+ padding-right: calc(var(--space-s) - var(--focus-border-size) - var(--focus-border-offset-size) - 2px);
}
[dir="rtl"] .ui-dialog > .ui-dialog-content {
- padding-left: calc(0.75rem - 0.4375rem);
+ padding-left: calc(var(--space-s) - var(--focus-border-size) - var(--focus-border-offset-size) - 2px);
}
}
@@ -431,17 +430,17 @@
.media-library-item .ajax-progress.ajax-progress.ajax-progress {
position: absolute;
- z-index: 1;
+ z-index: calc(var(--vertical-tabs-menu--z-index) + 1);
top: 50%;
left: 50%;
box-sizing: border-box;
width: 3rem; /* 56px */
height: 3rem;
margin: -1.5rem;
- border: 1px solid rgba(216, 217, 224, 0.8);
+ border: var(--input-border-size) solid var(--jui-dropdown-border-color);
border-radius: 3.5rem;
- background: #fff;
- box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
+ background: var(--color-white);
+ box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
}
.media-library-item .ajax-progress__throbber {
@@ -451,7 +450,7 @@
width: 1.75rem;
height: 1.75rem;
margin: -0.875rem;
- border: 3px solid #003cc5;
+ border: 3px solid var(--color-absolutezero);
border-right: 3px dotted transparent;
}
@@ -480,7 +479,7 @@
pointer-events: none;
border: 1px solid #dbdbdb;
border-radius: 2px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ box-shadow: var(--details-box-shadow);
}
/**
@@ -494,8 +493,8 @@
}
.media-library-item--grid:focus .media-library-item__preview-wrapper {
- outline: 2px dotted transparent;
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ outline: var(--focus-outline);
+ box-shadow: var(--focus-box-shadow);
}
/* Media library widget weight field styles. */
@@ -602,20 +601,20 @@
.media-library-item--grid.is-hover:before,
.media-library-item--grid.checked.is-hover:before {
- border-color: #0036b1;
+ border-color: var(--color-absolutezero-hover);
}
.media-library-item--grid.is-focus:before {
- border-color: #26a769;
+ border-color: var(--color-focus);
}
.media-library-item--grid.checked:before {
- border-color: #5a8bed;
+ border-color: var(--button--focus-border-color);
}
.media-library-item--grid .form-boolean--type-checkbox:checked {
- border-color: #5a8bed;
- background-color: #5a8bed;
+ border-color: var(--button--focus-border-color);
+ background-color: var(--button--focus-border-color);
}
.media-library-item__click-to-select-checkbox {
@@ -703,7 +702,7 @@
.media-library-item__name {
display: block;
overflow: hidden;
- margin: 0.25rem 0.5rem;
+ margin: calc(var(--space-xs)/2) var(--space-xs);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.875rem;
@@ -733,14 +732,14 @@
.media-library-widget__toggle-weight.media-library-widget__toggle-weight {
position: absolute;
- top: 0.75rem;
- right: 1rem; /* LTR */
+ top: var(--space-s);
+ right: var(--space-m); /* LTR */
text-decoration: none;
}
[dir="rtl"] .media-library-widget__toggle-weight.media-library-widget__toggle-weight {
right: auto;
- left: 1rem;
+ left: var(--space-m);
}
/* Add negative margin for flex grid. */
@@ -803,7 +802,7 @@
.media-library-item__edit {
/* !important to override button class border. */
- border: 1px solid #d3d4d9 !important;
+ border: 1px solid var(--color-gray-200) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg fill='%23545560'%3e%3cpath d='M14.545 3.042l-1.586-1.585a1.003 1.003 0 00-1.414 0L10.252 2.75l3 3 1.293-1.293a1.004 1.004 0 000-1.415zM5.25 13.751l-3-3 6.998-6.998 3 3zM.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
@@ -822,7 +821,7 @@
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus {
/* !important to override button class border. */
- border: 1px solid #d3d4d9 !important;
+ border: 1px solid var(--color-gray-200) !important;
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.344 2.343l11.313 11.313M2.344 13.657L13.657 2.343' stroke='%2355565B' stroke-width='3'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
@@ -833,7 +832,7 @@
.media-library-item__remove.button:active,
.media-library-item__remove.button:disabled:active {
/* !important to override button class border. */
- border-color: #003cc5 !important;
+ border-color: var(--color-absolutezero) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
}
@@ -858,7 +857,7 @@
justify-content: center;
width: 13.75rem;
margin-right: 1.25rem; /* LTR */
- background: rgba(243, 244, 249, 0.4);
+ background: var(--color-gray-050-o-40);
}
[dir="rtl"] .media-library-add-form__preview {
@@ -875,8 +874,8 @@
right: 0; /* LTR */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
- background-position: 0.5rem center;
- background-size: 0.75rem;
+ background-position: var(--space-xs) center;
+ background-size: var(--space-s);
}
[dir="rtl"] .media-library-add-form__remove-button {
diff --git a/core/themes/claro/css/theme/media-library.pcss.css b/core/themes/claro/css/theme/media-library.pcss.css
index 6db92daad1d8038028cba6b1a69451ab0f0f1586..47ec4bf15985588d235aefe341176b01d2f5f81f 100644
--- a/core/themes/claro/css/theme/media-library.pcss.css
+++ b/core/themes/claro/css/theme/media-library.pcss.css
@@ -4,8 +4,6 @@
* Styling for Media Library.
*/
-@import "../base/variables.pcss.css";
-
/**
* Negative margins compensate for modal dialog padding and compensate for
* positioning that would otherwise hide the active tab indicator on the left.
diff --git a/core/themes/claro/css/theme/tour.theme.css b/core/themes/claro/css/theme/tour.theme.css
index f96d4e99c67f88b9a02bbea9e2f7b589e05bb68e..8292a4747b50c60ad92c8f3a97051849ebf2b185 100644
--- a/core/themes/claro/css/theme/tour.theme.css
+++ b/core/themes/claro/css/theme/tour.theme.css
@@ -21,7 +21,7 @@
.shepherd-element:focus {
outline: 2px dotted transparent;
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
}
/* Mobile */
@@ -96,5 +96,5 @@
.shepherd-content *:focus {
outline: 2px dotted transparent;
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+ box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
}
diff --git a/core/themes/claro/css/theme/tour.theme.pcss.css b/core/themes/claro/css/theme/tour.theme.pcss.css
index 4be6746694120cb57b0fe8cf49dad82a7b1ca526..177c12b16e802205a7277a86ea2ba1e42146c3a8 100644
--- a/core/themes/claro/css/theme/tour.theme.pcss.css
+++ b/core/themes/claro/css/theme/tour.theme.pcss.css
@@ -3,8 +3,6 @@
* Styles for Tour theme.
*/
-@import "../base/variables.pcss.css";
-
/* Default styles for the container */
.shepherd-element {
color: #fff;
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.css b/core/themes/claro/css/theme/views_ui.admin.theme.css
index b68bb848f18cac1795eb98bd015cd389bbb89233..43d13979ebde304fd87ba06843b4a8ef7c164471 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.css
@@ -292,7 +292,7 @@ td.group-title {
bottom: -0.8125rem;
padding: 0.5px 0.375rem;
text-transform: uppercase;
- border: 1px solid #d3d4d9;
+ border: 1px solid var(--color-gray-200);
background: #fff;
font-weight: bold;
font-style: italic;
@@ -314,9 +314,9 @@ td.group-title {
.views-displays {
padding-bottom: 2.25rem;
- border-top: 1px solid rgba(212, 212, 218, 0.8);
- border-right: 1px solid rgba(212, 212, 218, 0.8);
- border-left: 1px solid rgba(212, 212, 218, 0.8);
+ border-top: 1px solid var(--color-gray-200-o-80);
+ border-right: 1px solid var(--color-gray-200-o-80);
+ border-left: 1px solid var(--color-gray-200-o-80);
}
.views-display-top {
@@ -324,22 +324,22 @@ td.group-title {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
- padding: 0.75rem 0.75rem calc(0.75rem - 0.3125rem);
- border-bottom: 1px solid rgba(212, 212, 218, 0.8);
- background-color: #f3f4f9;
+ padding: var(--space-s) var(--space-s) calc(var(--space-s) - 0.3125rem);
+ border-bottom: 1px solid var(--color-gray-200-o-80);
+ background-color: var(--color-gray-050);
}
.form-edit .form-actions {
margin-top: 0;
- padding: 0.75rem 1rem;
- border-right: 1px solid rgba(212, 212, 218, 0.8);
- border-bottom: 1px solid rgba(212, 212, 218, 0.8);
- border-left: 1px solid rgba(212, 212, 218, 0.8);
- background-color: #f3f4f9;
+ padding: var(--space-s) var(--space-m);
+ border-right: 1px solid var(--color-gray-200-o-80);
+ border-bottom: 1px solid var(--color-gray-200-o-80);
+ border-left: 1px solid var(--color-gray-200-o-80);
+ background-color: var(--color-gray-050);
}
.edit-display-settings {
- margin: 1.5rem 1.5rem 0 1.5rem;
+ margin: var(--space-l) var(--space-l) 0 var(--space-l);
}
.edit-display-settings-top.views-ui-display-tab-bucket.views-ui-display-tab-bucket {
@@ -347,7 +347,7 @@ td.group-title {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
- margin: 0 0 1.5rem;
+ margin: 0 0 var(--space-l);
padding: 0;
border-bottom: none;
line-height: 1.25rem;
@@ -358,9 +358,9 @@ td.group-title {
}
.views-display-column {
- border: 1px solid rgba(212, 212, 218, 0.8);
- border-radius: 2px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ border: 1px solid var(--color-gray-200-o-80);
+ border-radius: var(--base-border-radius);
+ box-shadow: var(--details-box-shadow);
}
.views-display-column + .views-display-column {
@@ -377,13 +377,13 @@ td.group-title {
}
.view-preview-form .form-item--view-args {
- margin-top: 1rem;
+ margin-top: var(--space-m);
}
.view-preview-form .arguments-preview,
.view-preview-form .form-item--view-args {
- margin-right: 1rem;
- margin-left: 1rem;
+ margin-right: var(--space-m);
+ margin-left: var(--space-m);
}
.preview-submit-wrapper {
@@ -405,10 +405,10 @@ td.group-title {
.views-ui-display-tab-bucket.views-ui-display-tab-bucket {
position: relative;
- margin: 0 0 0.5rem;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
- border-bottom: 1px solid rgba(212, 212, 218, 0.8);
+ margin: 0 0 var(--space-xs);
+ padding-top: var(--space-xs);
+ padding-bottom: var(--space-xs);
+ border-bottom: 1px solid var(--color-gray-200-o-80);
line-height: 1.25rem;
}
@@ -426,12 +426,12 @@ td.group-title {
justify-content: space-between;
box-sizing: border-box;
width: 100%;
- padding: 0.75rem 1rem calc(0.75rem + 2px);
+ padding: var(--space-s) var(--space-m) calc(var(--space-s) + 2px);
}
.views-ui-display-tab-bucket__title {
margin: 0;
- font-size: 1rem;
+ font-size: var(--font-size-base);
}
.views-ui-display-tab-bucket.access {
@@ -459,9 +459,9 @@ td.group-title {
.views-ui-display-tab-bucket .views-display-setting {
display: flex;
flex-wrap: wrap;
- padding: 0.5rem 1rem;
+ padding: var(--space-xs) var(--space-m);
color: #666;
- font-size: 0.889rem;
+ font-size: var(--font-size-s);
}
.views-ui-display-tab-actions.views-ui-display-tab-bucket .views-display-setting {
@@ -474,27 +474,27 @@ td.group-title {
}
.views-ui-display-tab-bucket__actions {
- margin-left: 0.5rem; /* LTR */
+ margin-left: var(--space-xs); /* LTR */
}
[dir="rtl"] .views-ui-display-tab-bucket__actions {
- margin-right: 0.5rem;
+ margin-right: var(--space-xs);
margin-left: 0;
}
.views-display-setting .label {
- margin-right: 0.5rem; /* LTR */
+ margin-right: var(--space-xs); /* LTR */
white-space: nowrap;
}
[dir="rtl"] .views-display-setting .label {
margin-right: 0;
- margin-left: 0.5rem;
+ margin-left: var(--space-xs);
}
.label--separator.label--separator {
- margin-right: 0.5rem;
- margin-left: 0.5rem;
+ margin-right: var(--space-xs);
+ margin-left: var(--space-xs);
}
.views-edit-view {
@@ -573,8 +573,8 @@ td.group-title {
.views-ui-dialog .views-offset-top:not(:empty) {
position: relative;
- padding: 0.75rem 1rem 0.5rem;
- background-color: #f3f4f9;
+ padding: var(--space-s) var(--space-m) var(--space-xs);
+ background-color: var(--color-gray-050);
}
.views-ui-dialog .views-offset-top:not(:empty):after {
@@ -593,22 +593,22 @@ td.group-title {
.views-ui-dialog .views-offset-top .form-item {
max-width: 40%;
- margin: 0 0.75rem 0.75rem 0;
+ margin: 0 var(--space-s) var(--space-s) 0;
}
.views-ui-dialog .views-progress-indicator {
position: absolute;
z-index: 1;
top: 0;
- right: 4rem; /* LTR */
- color: #fff;
- font-size: 0.702rem;
- line-height: 4rem;
+ right: var(--jui-dialog-close-button-reserved-space); /* LTR */
+ color: var(--jui-dialog-title-color);
+ font-size: var(--font-size-xxs);
+ line-height: var(--jui-dialog-close-button-reserved-space);
}
[dir="rtl"] .views-ui-dialog .views-progress-indicator {
right: auto;
- left: 4rem;
+ left: var(--jui-dialog-close-button-reserved-space);
}
.views-ui-dialog .views-progress-indicator:before {
@@ -620,7 +620,7 @@ td.group-title {
}
.views-ui-dialog .tabledrag-toggle-weight-wrapper {
- margin: 0 0 1rem 0;
+ margin: 0 0 var(--space-m) 0;
}
.views-ui-dialog details .item-list {
@@ -641,7 +641,7 @@ td.group-title {
}
.views-ui-rearrange-filter-form tr td[rowspan] {
- border: 1px solid #d3d4d9;
+ border: 1px solid var(--color-gray-200);
}
.views-ui-rearrange-filter-form tr[id^="views-row"] {
@@ -654,7 +654,7 @@ td.group-title {
}
.views-ui-rearrange-filter-form .draggable td {
- border-bottom: 0.0625rem solid #d3d4d9;
+ border-bottom: 0.0625rem solid var(--color-gray-200);
}
.views-ui-rearrange-filter-form .group-empty {
@@ -690,26 +690,26 @@ td.group-title {
margin-top: 0;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #ccc;
- background-color: #f3f4f9;
+ background-color: var(--color-gray-050);
}
.view-preview-form .form-item--live-preview {
position: absolute;
top: 0.6875rem;
- right: 0.75rem;
+ right: var(--space-s);
margin-top: 2px;
margin-left: 2px; /* LTR */
}
[dir="rtl"] .view-preview-form .form-item--live-preview {
right: auto;
- left: 0.75rem;
+ left: var(--space-s);
margin-right: 2px;
margin-left: 0;
}
.views-live-preview {
- padding: 1rem;
+ padding: var(--space-m);
}
.views-live-preview .views-query-info {
@@ -727,7 +727,7 @@ td.group-title {
}
.views-live-preview .view > * {
- margin-top: 1rem;
+ margin-top: var(--space-m);
}
.views-live-preview .preview-section {
@@ -750,17 +750,17 @@ td.group-title {
margin: 0.625rem 0;
border-spacing: 0;
border-collapse: separate;
- border-color: #fff;
+ border-color: var(--color-bg);
}
.views-query-info table tr {
- background-color: #f3f4f9;
+ background-color: var(--color-gray-050);
}
.views-query-info table th,
.views-query-info table td {
- padding: 0.5rem 1.5rem;
- font-size: 0.889rem;
+ padding: var(--space-xs) var(--space-l);
+ font-size: var(--font-size-s);
}
.messages {
@@ -790,12 +790,12 @@ td.group-title {
.edit-display-settings-top.views-ui-display-tab-bucket .dropbutton-wrapper {
top: 0.8125rem;
- right: 0.75rem; /* LTR */
+ right: var(--space-s); /* LTR */
}
[dir="rtl"] .edit-display-settings-top.views-ui-display-tab-bucket .dropbutton-wrapper {
right: auto;
- left: 0.75rem;
+ left: var(--space-s);
}
.views-list-section {
@@ -818,9 +818,9 @@ td.group-title {
*/
html:not(.no-touchevents) .views-ui-display-tab-bucket__header--actions {
- padding: 1.5rem 0.5rem;
+ padding: var(--space-l) var(--space-xs);
}
html:not(.no-touchevents) .edit-display-settings-top.views-ui-display-tab-bucket {
- padding: 1rem 0.5rem;
+ padding: var(--space-m) var(--space-xs);
}
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
index 5c2215eb5fac77aab9fb4f00df6c32b242677f25..505b3c9bbfcbddb25ff915ac1fd1897d40605dfc 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
@@ -5,8 +5,6 @@
* Replaces the styles provided by the views_ui module.
*/
-@import "../base/variables.pcss.css";
-
.views-admin .links {
margin: 0;
list-style: none outside none;
diff --git a/core/themes/claro/js/ajax.js b/core/themes/claro/js/ajax.js
index c6c9054bdf584c011276e70aa327e9c3e795020d..c84b742914c7e51934332b18fb96344c75d853dd 100644
--- a/core/themes/claro/js/ajax.js
+++ b/core/themes/claro/js/ajax.js
@@ -5,18 +5,14 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.ajaxProgressIndicatorFullscreen = function () {
- return '<div class="ajax-progress ajax-progress--fullscreen"><div class="ajax-progress__throbber ajax-progress__throbber--fullscreen"> </div></div>';
- };
+(Drupal => {
+ Drupal.theme.ajaxProgressIndicatorFullscreen = () => '<div class="ajax-progress ajax-progress--fullscreen"><div class="ajax-progress__throbber ajax-progress__throbber--fullscreen"> </div></div>';
- Drupal.theme.ajaxProgressThrobber = function (message) {
- var messageMarkup = typeof message === 'string' ? Drupal.theme('ajaxProgressMessage', message) : '';
- var throbber = '<div class="ajax-progress__throbber"> </div>';
- return "<div class=\"ajax-progress ajax-progress--throbber\">".concat(throbber).concat(messageMarkup, "</div>");
+ Drupal.theme.ajaxProgressThrobber = message => {
+ const messageMarkup = typeof message === 'string' ? Drupal.theme('ajaxProgressMessage', message) : '';
+ const throbber = '<div class="ajax-progress__throbber"> </div>';
+ return `<div class="ajax-progress ajax-progress--throbber">${throbber}${messageMarkup}</div>`;
};
- Drupal.theme.ajaxProgressMessage = function (message) {
- return "<div class=\"ajax-progress__message\">".concat(message, "</div>");
- };
+ Drupal.theme.ajaxProgressMessage = message => `<div class="ajax-progress__message">${message}</div>`;
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/autocomplete.js b/core/themes/claro/js/autocomplete.js
index 79db89081fcb84fef2051cd889d9fc1c01510161..003c5de05ecf6a3022f28441bff5be94e50d0dab 100644
--- a/core/themes/claro/js/autocomplete.js
+++ b/core/themes/claro/js/autocomplete.js
@@ -5,20 +5,20 @@
* @preserve
**/
-(function ($, Drupal, once) {
+(($, Drupal, once) => {
Drupal.behaviors.claroAutoCompete = {
- attach: function attach(context) {
- once('claroAutoComplete', 'input.form-autocomplete', context).forEach(function (value) {
- var $input = $(value);
- var timeout = 400;
- var classRemoveTimeout;
+ attach(context) {
+ once('claroAutoComplete', 'input.form-autocomplete', context).forEach(value => {
+ const $input = $(value);
+ const timeout = 400;
+ let classRemoveTimeout;
- var classRemove = function classRemove($autoCompleteElem) {
+ const classRemove = $autoCompleteElem => {
$autoCompleteElem.removeClass('is-autocompleting');
$autoCompleteElem.siblings('[data-drupal-selector="autocomplete-message"]').addClass('hidden');
};
- $input.on('input autocompletesearch autocompleteresponses', function (event) {
+ $input.on('input autocompletesearch autocompleteresponses', event => {
if (event && event.type && event.type === 'autocompletesearch') {
$(event.target).addClass('is-autocompleting');
$(event.target).siblings('[data-drupal-selector="autocomplete-message"]').removeClass('hidden');
@@ -29,5 +29,6 @@
});
});
}
+
};
})(jQuery, Drupal, once);
\ No newline at end of file
diff --git a/core/themes/claro/js/checkbox.js b/core/themes/claro/js/checkbox.js
index 90d825cbee41ad588186ded39ff3f81dc114feeb..e2032acf910c1fd1d84ef732e60023ae0750c99e 100644
--- a/core/themes/claro/js/checkbox.js
+++ b/core/themes/claro/js/checkbox.js
@@ -5,8 +5,6 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.checkbox = function () {
- return '<input type="checkbox" class="form-checkbox form-boolean form-boolean--type-checkbox"/>';
- };
+(Drupal => {
+ Drupal.theme.checkbox = () => '<input type="checkbox" class="form-checkbox form-boolean form-boolean--type-checkbox"/>';
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/classy/media_embed_ckeditor.theme.js b/core/themes/claro/js/classy/media_embed_ckeditor.theme.js
index 0b9d95999e8e2bd85013524aa5443c9832cf7c4c..19cc4ff77763ccdea8407959894cab4a7aa27c73 100644
--- a/core/themes/claro/js/classy/media_embed_ckeditor.theme.js
+++ b/core/themes/claro/js/classy/media_embed_ckeditor.theme.js
@@ -5,8 +5,6 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.mediaEmbedPreviewError = function () {
- return "<div class=\"media-embed-error media-embed-error--preview-error\">".concat(Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.'), "</div>");
- };
+(Drupal => {
+ Drupal.theme.mediaEmbedPreviewError = () => `<div class="media-embed-error media-embed-error--preview-error">${Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.')}</div>`;
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/details.js b/core/themes/claro/js/details.js
index 853c99163fd171eddfaf58ce12fe0c2713437c1c..903bde189a4f57db8450022d50ba0d6776fda098 100644
--- a/core/themes/claro/js/details.js
+++ b/core/themes/claro/js/details.js
@@ -5,24 +5,25 @@
* @preserve
**/
-(function ($, Modernizr, Drupal) {
+(($, Modernizr, Drupal) => {
Drupal.behaviors.claroDetails = {
- attach: function attach(context) {
- $(once('claroDetails', context === document ? 'html' : context)).on('click', function (event) {
+ attach(context) {
+ $(once('claroDetails', context === document ? 'html' : context)).on('click', event => {
if (event.target.nodeName === 'SUMMARY') {
$(event.target).trigger('focus');
}
});
}
+
};
Drupal.behaviors.claroDetailsToggleShim = {
- attach: function attach(context) {
+ attach(context) {
if (Modernizr.details || !Drupal.CollapsibleDetails.instances.length) {
return;
}
- $(once('claroDetailsToggleShim', 'details .details-title', context)).on('keypress', function (event) {
- var keyCode = event.keyCode || event.charCode;
+ $(once('claroDetailsToggleShim', 'details .details-title', context)).on('keypress', event => {
+ const keyCode = event.keyCode || event.charCode;
if (keyCode === 32) {
$(event.target).closest('summary').trigger('click');
@@ -30,13 +31,10 @@
}
});
}
- };
- Drupal.theme.detailsSummarizedContentWrapper = function () {
- return "<span class=\"claro-details__summary-summary\"></span>";
};
- Drupal.theme.detailsSummarizedContentText = function (text) {
- return text || '';
- };
+ Drupal.theme.detailsSummarizedContentWrapper = () => `<span class="claro-details__summary-summary"></span>`;
+
+ Drupal.theme.detailsSummarizedContentText = text => text || '';
})(jQuery, Modernizr, Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/dropbutton.js b/core/themes/claro/js/dropbutton.js
index 39bb562b704c93d82c03bd596807712c23f0b9b9..108566a3eb0e221707cb8d2cf8b4a8245363fb22 100644
--- a/core/themes/claro/js/dropbutton.js
+++ b/core/themes/claro/js/dropbutton.js
@@ -5,8 +5,6 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.dropbuttonToggle = function (options) {
- return "<li class=\"dropbutton-toggle\"><button type=\"button\" class=\"dropbutton__toggle\"><span class=\"visually-hidden\">".concat(options.title, "</span></button></li>");
- };
+(Drupal => {
+ Drupal.theme.dropbuttonToggle = options => `<li class="dropbutton-toggle"><button type="button" class="dropbutton__toggle"><span class="visually-hidden">${options.title}</span></button></li>`;
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/media-library.ui.js b/core/themes/claro/js/media-library.ui.js
index 2a8e8a08b9ebf472e1dfd178dd1e0b42c9286f6e..72c32cdb254d811424916ac7c26f7459266b2387 100644
--- a/core/themes/claro/js/media-library.ui.js
+++ b/core/themes/claro/js/media-library.ui.js
@@ -5,32 +5,32 @@
* @preserve
**/
-(function ($, Drupal, window) {
+(($, Drupal, window) => {
Drupal.behaviors.MediaLibraryItemSelectionClaro = {
- attach: function attach() {
+ attach() {
if (!once('media-library-selection-info-claro-event', 'html').length) {
return;
}
- $(window).on('dialog:aftercreate', function (event, dialog, $element, settings) {
- var moveCounter = function moveCounter($selectedCount, $buttonPane) {
- var $moveSelectedCount = $selectedCount.detach();
+ $(window).on('dialog:aftercreate', (event, dialog, $element, settings) => {
+ const moveCounter = ($selectedCount, $buttonPane) => {
+ const $moveSelectedCount = $selectedCount.detach();
$buttonPane.prepend($moveSelectedCount);
};
- var $buttonPane = $element.closest('.media-library-widget-modal').find('.ui-dialog-buttonpane');
+ const $buttonPane = $element.closest('.media-library-widget-modal').find('.ui-dialog-buttonpane');
if (!$buttonPane.length) {
return;
}
- var $selectedCount = $buttonPane.find('.js-media-library-selected-count');
+ const $selectedCount = $buttonPane.find('.js-media-library-selected-count');
if ($selectedCount.length) {
moveCounter($selectedCount, $buttonPane);
} else {
- var selectedCountObserver = new MutationObserver(function () {
- var $selectedCountFind = $buttonPane.find('.js-media-library-selected-count');
+ const selectedCountObserver = new MutationObserver(() => {
+ const $selectedCountFind = $buttonPane.find('.js-media-library-selected-count');
if ($selectedCountFind.length) {
moveCounter($selectedCountFind, $buttonPane);
@@ -46,5 +46,6 @@
}
});
}
+
};
})(jQuery, Drupal, window);
\ No newline at end of file
diff --git a/core/themes/claro/js/messages.js b/core/themes/claro/js/messages.js
index 10eb94445d389c776848cd3badfadea997765031..ee8660605b28894105538d3b6727de81e91285cf 100644
--- a/core/themes/claro/js/messages.js
+++ b/core/themes/claro/js/messages.js
@@ -5,19 +5,30 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.message = function (_ref, _ref2) {
- var text = _ref.text;
- var type = _ref2.type,
- id = _ref2.id;
- var messagesTypes = Drupal.Message.getMessageTypeLabels();
- var messageWrapper = document.createElement('div');
- messageWrapper.setAttribute('class', "messages messages--".concat(type));
+(Drupal => {
+ Drupal.theme.message = ({
+ text
+ }, {
+ type,
+ id
+ }) => {
+ const messagesTypes = Drupal.Message.getMessageTypeLabels();
+ const messageWrapper = document.createElement('div');
+ messageWrapper.setAttribute('class', `messages messages--${type}`);
messageWrapper.setAttribute('role', type === 'error' || type === 'warning' ? 'alert' : 'status');
- messageWrapper.setAttribute('aria-labelledby', "".concat(id, "-title"));
+ messageWrapper.setAttribute('aria-labelledby', `${id}-title`);
messageWrapper.setAttribute('data-drupal-message-id', id);
messageWrapper.setAttribute('data-drupal-message-type', type);
- messageWrapper.innerHTML = "\n <div class=\"messages__header\">\n <h2 id=\"".concat(id, "-title\" class=\"messages__title\">\n ").concat(messagesTypes[type], "\n </h2>\n </div>\n <div class=\"messages__content\">\n ").concat(text, "\n </div>\n ");
+ messageWrapper.innerHTML = `
+ <div class="messages__header">
+ <h2 id="${id}-title" class="messages__title">
+ ${messagesTypes[type]}
+ </h2>
+ </div>
+ <div class="messages__content">
+ ${text}
+ </div>
+ `;
return messageWrapper;
};
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/mobile.install.js b/core/themes/claro/js/mobile.install.js
index 095fd11775483ca5353500f5aefa00289ef09a2c..2dc3ae79741af3252911d9298b2ec42e7e7420c4 100644
--- a/core/themes/claro/js/mobile.install.js
+++ b/core/themes/claro/js/mobile.install.js
@@ -5,9 +5,9 @@
* @preserve
**/
-(function () {
+(() => {
function findActiveStep(steps) {
- for (var i = 0; i < steps.length; i++) {
+ for (let i = 0; i < steps.length; i++) {
if (steps[i].className === 'is-active') {
return i + 1;
}
@@ -21,13 +21,13 @@
}
function installStepsSetup() {
- var steps = document.querySelectorAll('.task-list li');
+ const steps = document.querySelectorAll('.task-list li');
if (steps.length) {
- var header = document.querySelector('header[role="banner"]');
- var stepIndicator = document.createElement('div');
+ const header = document.querySelector('header[role="banner"]');
+ const stepIndicator = document.createElement('div');
stepIndicator.className = 'step-indicator';
- stepIndicator.innerHTML = "".concat(findActiveStep(steps), "/").concat(steps.length);
+ stepIndicator.innerHTML = `${findActiveStep(steps)}/${steps.length}`;
header.appendChild(stepIndicator);
}
}
diff --git a/core/themes/claro/js/nav-tabs.js b/core/themes/claro/js/nav-tabs.js
index 92e4655832686b8753fa47ec1354e9bfad241397..b714cc206f702d9798a364ab985df50d7b9e5819 100644
--- a/core/themes/claro/js/nav-tabs.js
+++ b/core/themes/claro/js/nav-tabs.js
@@ -5,30 +5,30 @@
* @preserve
**/
-(function ($, Drupal) {
+(($, Drupal) => {
function init(tab) {
- var $tab = $(tab);
- var $target = $tab.find('[data-drupal-nav-tabs-target]');
- var $active = $target.find('.js-active-tab');
+ const $tab = $(tab);
+ const $target = $tab.find('[data-drupal-nav-tabs-target]');
+ const $active = $target.find('.js-active-tab');
- var openMenu = function openMenu() {
+ const openMenu = () => {
$target.toggleClass('is-open');
};
- var toggleOrder = function toggleOrder(reset) {
- var current = $active.index();
- var original = $active.data('original-order');
+ const toggleOrder = reset => {
+ const current = $active.index();
+ const original = $active.data('original-order');
if (original === 0 || reset === (current === original)) {
return;
}
- var siblings = {
+ const siblings = {
first: '[data-original-order="0"]',
- previous: "[data-original-order=\"".concat(original - 1, "\"]")
+ previous: `[data-original-order="${original - 1}"]`
};
- var $first = $target.find(siblings.first);
- var $previous = $target.find(siblings.previous);
+ const $first = $target.find(siblings.first);
+ const $previous = $target.find(siblings.previous);
if (reset && current !== original) {
$active.insertAfter($previous);
@@ -37,17 +37,17 @@
}
};
- var toggleCollapsed = function toggleCollapsed() {
+ const toggleCollapsed = () => {
if (window.matchMedia('(min-width: 48em)').matches) {
if ($tab.hasClass('is-horizontal') && !$tab.attr('data-width')) {
- var width = 0;
- $target.find('.js-tabs-link').each(function (index, value) {
+ let width = 0;
+ $target.find('.js-tabs-link').each((index, value) => {
width += $(value).outerWidth();
});
$tab.attr('data-width', width);
}
- var isHorizontal = $tab.attr('data-width') <= $tab.outerWidth();
+ const isHorizontal = $tab.attr('data-width') <= $tab.outerWidth();
$tab.toggleClass('is-horizontal', isHorizontal);
toggleOrder(isHorizontal);
} else {
@@ -56,8 +56,8 @@
};
$tab.addClass('position-container is-horizontal-enabled');
- $target.find('.js-tab').each(function (index, element) {
- var $item = $(element);
+ $target.find('.js-tab').each((index, element) => {
+ const $item = $(element);
$item.attr('data-original-order', $item.index());
});
$tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu);
@@ -65,8 +65,9 @@
}
Drupal.behaviors.navTabs = {
- attach: function attach(context) {
+ attach(context) {
once('nav-tabs', '[data-drupal-nav-tabs].is-collapsible', context).forEach(init);
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/responsive-details.js b/core/themes/claro/js/responsive-details.js
index ec59b2afac219c6a9670a4908fac4fc0256a9074..4b4e6ba7fbe221baef0f9cd59aa904ad502b3a8d 100644
--- a/core/themes/claro/js/responsive-details.js
+++ b/core/themes/claro/js/responsive-details.js
@@ -5,17 +5,17 @@
* @preserve
**/
-(function ($, Drupal) {
+(($, Drupal) => {
Drupal.behaviors.responsiveDetails = {
- attach: function attach(context) {
- var details = once('responsive-details', 'details', context);
+ attach(context) {
+ const details = once('responsive-details', 'details', context);
if (!details.length) {
return;
}
- var $details = $(details);
- var $summaries = $details.find('> summary');
+ const $details = $(details);
+ const $summaries = $details.find('> summary');
function detailsToggle(matches) {
if (matches) {
@@ -23,7 +23,7 @@
$summaries.attr('aria-expanded', true);
$summaries.on('click.details-open', false);
} else {
- var $notPressed = $details.find('> summary[aria-pressed!=true]').attr('aria-expanded', false);
+ const $notPressed = $details.find('> summary[aria-pressed!=true]').attr('aria-expanded', false);
$notPressed.parent('details').attr('open', false);
$summaries.off('.details-open');
}
@@ -33,9 +33,10 @@
detailsToggle(event.matches);
}
- var mql = window.matchMedia('(min-width:48em)');
+ const mql = window.matchMedia('(min-width:48em)');
mql.addListener(handleDetailsMQ);
detailsToggle(mql.matches);
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/tabledrag.js b/core/themes/claro/js/tabledrag.js
index 3beafe0c77900a7e38ff37a5e96f3ec36437327f..2ff90e180ab25a131360c6bd665fcc4804e0d21b 100644
--- a/core/themes/claro/js/tabledrag.js
+++ b/core/themes/claro/js/tabledrag.js
@@ -5,54 +5,57 @@
* @preserve
**/
-(function ($, Drupal) {
+(($, Drupal) => {
Drupal.behaviors.claroTableDrag = {
- attach: function attach(context, settings) {
- var createItemWrapBoundaries = function createItemWrapBoundaries(row) {
- var $row = $(row);
- var $firstCell = $row.find('td:first-of-type').eq(0).wrapInner(Drupal.theme('tableDragCellContentWrapper')).wrapInner($(Drupal.theme('tableDragCellItemsWrapper')).addClass('js-tabledrag-cell-content'));
- var $targetElem = $firstCell.find('.js-tabledrag-cell-content');
+ attach(context, settings) {
+ const createItemWrapBoundaries = row => {
+ const $row = $(row);
+ const $firstCell = $row.find('td:first-of-type').eq(0).wrapInner(Drupal.theme('tableDragCellContentWrapper')).wrapInner($(Drupal.theme('tableDragCellItemsWrapper')).addClass('js-tabledrag-cell-content'));
+ const $targetElem = $firstCell.find('.js-tabledrag-cell-content');
$targetElem.eq(0).find('> .tabledrag-cell-content__item > .js-tabledrag-handle, > .tabledrag-cell-content__item > .js-indentation').prependTo($targetElem);
};
- Object.keys(settings.tableDrag || {}).forEach(function (base) {
- once('claroTabledrag', $(context).find("#".concat(base)).find('> tr.draggable, > tbody > tr.draggable')).forEach(createItemWrapBoundaries);
+ Object.keys(settings.tableDrag || {}).forEach(base => {
+ once('claroTabledrag', $(context).find(`#${base}`).find('> tr.draggable, > tbody > tr.draggable')).forEach(createItemWrapBoundaries);
});
}
+
};
$.extend(Drupal.tableDrag.prototype.row.prototype, {
- markChanged: function markChanged() {
- var marker = $(Drupal.theme('tableDragChangedMarker')).addClass('js-tabledrag-changed-marker');
- var cell = $(this.element).find('td:first-of-type');
+ markChanged() {
+ const marker = $(Drupal.theme('tableDragChangedMarker')).addClass('js-tabledrag-changed-marker');
+ const cell = $(this.element).find('td:first-of-type');
if (cell.find('.js-tabledrag-changed-marker').length === 0) {
cell.find('.js-tabledrag-handle').after(marker);
}
},
- onIndent: function onIndent() {
- $(this.table).find('.tabledrag-cell > .js-indentation').each(function (index, indentToMove) {
- var $indentToMove = $(indentToMove);
- var $cellContent = $indentToMove.siblings('.tabledrag-cell-content');
+
+ onIndent() {
+ $(this.table).find('.tabledrag-cell > .js-indentation').each((index, indentToMove) => {
+ const $indentToMove = $(indentToMove);
+ const $cellContent = $indentToMove.siblings('.tabledrag-cell-content');
$indentToMove.prependTo($cellContent);
});
}
+
});
$.extend(Drupal.theme, {
- tableDragIndentation: function tableDragIndentation() {
+ tableDragIndentation() {
return '<div class="js-indentation indentation"><svg xmlns="http://www.w3.org/2000/svg" class="tree" width="25" height="25" viewBox="0 0 25 25"><path class="tree__item tree__item-child-ltr tree__item-child-last-ltr tree__item-horizontal tree__item-horizontal-right" d="M12,12.5 H25" stroke="#888"/><path class="tree__item tree__item-child-rtl tree__item-child-last-rtl tree__item-horizontal tree__horizontal-left" d="M0,12.5 H13" stroke="#888"/><path class="tree__item tree__item-child-ltr tree__item-child-rtl tree__item-child-last-ltr tree__item-child-last-rtl tree__vertical tree__vertical-top" d="M12.5,12 v-99" stroke="#888"/><path class="tree__item tree__item-child-ltr tree__item-child-rtl tree__vertical tree__vertical-bottom" d="M12.5,12 v99" stroke="#888"/></svg></div>';
},
- tableDragChangedWarning: function tableDragChangedWarning() {
- return "<div class=\"tabledrag-changed-warning messages messages--warning\" role=\"alert\">".concat(Drupal.theme('tableDragChangedMarker'), " ").concat(Drupal.t('You have unsaved changes.'), "</div>");
- },
- tableDragHandle: function tableDragHandle() {
- return "<a href=\"#\" title=\"".concat(Drupal.t('Drag to re-order'), "\" class=\"tabledrag-handle js-tabledrag-handle\"></a>");
- },
- tableDragToggle: function tableDragToggle() {
- return "<div class=\"tabledrag-toggle-weight-wrapper\" data-drupal-selector=\"tabledrag-toggle-weight-wrapper\">\n <button type=\"button\" class=\"link action-link tabledrag-toggle-weight\" data-drupal-selector=\"tabledrag-toggle-weight\"></button>\n </div>";
+
+ tableDragChangedWarning() {
+ return `<div class="tabledrag-changed-warning messages messages--warning" role="alert">${Drupal.theme('tableDragChangedMarker')} ${Drupal.t('You have unsaved changes.')}</div>`;
},
- toggleButtonContent: function toggleButtonContent(show) {
- var classes = ['action-link', 'action-link--extrasmall', 'tabledrag-toggle-weight'];
- var text = '';
+
+ tableDragHandle: () => `<a href="#" title="${Drupal.t('Drag to re-order')}" class="tabledrag-handle js-tabledrag-handle"></a>`,
+ tableDragToggle: () => `<div class="tabledrag-toggle-weight-wrapper" data-drupal-selector="tabledrag-toggle-weight-wrapper">
+ <button type="button" class="link action-link tabledrag-toggle-weight" data-drupal-selector="tabledrag-toggle-weight"></button>
+ </div>`,
+ toggleButtonContent: show => {
+ const classes = ['action-link', 'action-link--extrasmall', 'tabledrag-toggle-weight'];
+ let text = '';
if (show) {
classes.push('action-link--icon-hide');
@@ -62,13 +65,16 @@
text = Drupal.t('Show row weights');
}
- return "<span class=\"".concat(classes.join(' '), "\">").concat(text, "</a>");
+ return `<span class="${classes.join(' ')}">${text}</a>`;
},
- tableDragCellContentWrapper: function tableDragCellContentWrapper() {
+
+ tableDragCellContentWrapper() {
return '<div class="tabledrag-cell-content__item"></div>';
},
- tableDragCellItemsWrapper: function tableDragCellItemsWrapper() {
+
+ tableDragCellItemsWrapper() {
return '<div class="tabledrag-cell-content"></div>';
}
+
});
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/user.theme.js b/core/themes/claro/js/user.theme.js
index f2e3b141d99315847d20a99be78ff1a541e65a01..b076992aa7f32992af28e97ba0c33179030e53c1 100644
--- a/core/themes/claro/js/user.theme.js
+++ b/core/themes/claro/js/user.theme.js
@@ -5,7 +5,7 @@
* @preserve
**/
-(function (Drupal) {
+(Drupal => {
Object.assign(Drupal.user.password.css, {
passwordWeak: 'is-weak',
widgetInitial: 'is-initial',
@@ -15,21 +15,27 @@
confirmFilled: 'is-confirm-filled'
});
- Drupal.theme.passwordConfirmMessage = function (_ref) {
- var confirmTitle = _ref.confirmTitle;
- var confirmTextWrapper = '<span class="password-match-message__text" data-drupal-selector="password-match-status-text"></span>';
- return "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"password-match-message\" data-drupal-selector=\"password-confirm-message\">".concat(confirmTitle, " ").concat(confirmTextWrapper, "</div>");
+ Drupal.theme.passwordConfirmMessage = ({
+ confirmTitle
+ }) => {
+ const confirmTextWrapper = '<span class="password-match-message__text" data-drupal-selector="password-match-status-text"></span>';
+ return `<div aria-live="polite" aria-atomic="true" class="password-match-message" data-drupal-selector="password-confirm-message">${confirmTitle} ${confirmTextWrapper}</div>`;
};
- Drupal.theme.passwordStrength = function (_ref2) {
- var strengthTitle = _ref2.strengthTitle;
- var strengthBar = '<div class="password-strength__bar" data-drupal-selector="password-strength-indicator"></div>';
- var strengthText = '<span class="password-strength__text" data-drupal-selector="password-strength-text"></span>';
- return "\n <div class=\"password-strength\">\n <div class=\"password-strength__track\" data-drupal-selector=\"password-strength-meter\">".concat(strengthBar, "</div>\n <div aria-live=\"polite\" aria-atomic=\"true\" class=\"password-strength__title\">").concat(strengthTitle, " ").concat(strengthText, "</div>\n </div>\n ");
+ Drupal.theme.passwordStrength = ({
+ strengthTitle
+ }) => {
+ const strengthBar = '<div class="password-strength__bar" data-drupal-selector="password-strength-indicator"></div>';
+ const strengthText = '<span class="password-strength__text" data-drupal-selector="password-strength-text"></span>';
+ return `
+ <div class="password-strength">
+ <div class="password-strength__track" data-drupal-selector="password-strength-meter">${strengthBar}</div>
+ <div aria-live="polite" aria-atomic="true" class="password-strength__title">${strengthTitle} ${strengthText}</div>
+ </div>
+ `;
};
- Drupal.theme.passwordSuggestions = function (_ref3, tips) {
- var hasWeaknesses = _ref3.hasWeaknesses;
- return "<div class=\"password-suggestions\">".concat(tips.length ? "".concat(hasWeaknesses, "<ul class=\"password-suggestions__tips\"><li class=\"password-suggestions__tip\">").concat(tips.join('</li><li class="password-suggestions__tip">'), "</li></ul>") : '', "</div>");
- };
+ Drupal.theme.passwordSuggestions = ({
+ hasWeaknesses
+ }, tips) => `<div class="password-suggestions">${tips.length ? `${hasWeaknesses}<ul class="password-suggestions__tips"><li class="password-suggestions__tip">${tips.join('</li><li class="password-suggestions__tip">')}</li></ul>` : ''}</div>`;
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/vertical-tabs.js b/core/themes/claro/js/vertical-tabs.js
index c0e55dfacca7e940c80f2f2aa2e4261d6b21317d..551964ac4118325b3d748316593f7ee4b65e6c82 100644
--- a/core/themes/claro/js/vertical-tabs.js
+++ b/core/themes/claro/js/vertical-tabs.js
@@ -5,31 +5,31 @@
* @preserve
**/
-(function ($, Drupal) {
- var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) {
- $target.parents('.js-vertical-tabs-pane').each(function (index, pane) {
+(($, Drupal) => {
+ const handleFragmentLinkClickOrHashChange = (e, $target) => {
+ $target.parents('.js-vertical-tabs-pane').each((index, pane) => {
$(pane).data('verticalTab').focus();
});
};
Drupal.behaviors.claroVerticalTabs = {
- attach: function attach(context) {
+ attach(context) {
$(once('vertical-tabs-fragments', 'body')).on('formFragmentLinkClickOrHashChange.verticalTabs', handleFragmentLinkClickOrHashChange);
- once('vertical-tabs', '[data-vertical-tabs-panes]', context).forEach(function (panes) {
- var $this = $(panes).addClass('vertical-tabs__items--processed');
- var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
- var tabFocus;
- var $details = $this.find('> details');
+ once('vertical-tabs', '[data-vertical-tabs-panes]', context).forEach(panes => {
+ const $this = $(panes).addClass('vertical-tabs__items--processed');
+ const focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
+ let tabFocus;
+ const $details = $this.find('> details');
if ($details.length === 0) {
return;
}
- var tabList = $(Drupal.theme.verticalTabListWrapper());
+ const tabList = $(Drupal.theme.verticalTabListWrapper());
$this.wrap($(Drupal.theme.verticalTabsWrapper()).addClass('js-vertical-tabs')).before(tabList);
$details.each(function initializeVerticalTabItems() {
- var $that = $(this);
- var verticalTab = new Drupal.verticalTab({
+ const $that = $(this);
+ const verticalTab = new Drupal.verticalTab({
title: $that.find('> summary').text(),
details: $that
});
@@ -42,7 +42,7 @@
});
if (!tabFocus) {
- var $locationHash = $this.find(window.location.hash);
+ const $locationHash = $this.find(window.location.hash);
if (window.location.hash && $locationHash.length) {
tabFocus = $locationHash.is('.js-vertical-tabs-pane') ? $locationHash : $locationHash.closest('.js-vertical-tabs-pane');
@@ -56,55 +56,55 @@
}
});
}
+
};
Drupal.verticalTab = function verticalTab(settings) {
- var self = this;
+ const self = this;
$.extend(this, settings, Drupal.theme('verticalTab', settings));
this.item.addClass('js-vertical-tabs-menu-item');
- this.link.attr('href', "#".concat(settings.details.attr('id')));
- this.link.on('click', function (event) {
+ this.link.attr('href', `#${settings.details.attr('id')}`);
+ this.link.on('click', event => {
event.preventDefault();
self.focus();
});
- this.details.on('toggle', function (event) {
+ this.details.on('toggle', event => {
event.preventDefault();
});
- this.details.find('> summary').on('click', function (event) {
+ this.details.find('> summary').on('click', event => {
event.preventDefault();
self.details.attr('open', true);
if (self.details.hasClass('collapse-processed')) {
- setTimeout(function () {
+ setTimeout(() => {
self.focus();
}, 10);
} else {
self.focus();
}
- }).on('keydown', function (event) {
+ }).on('keydown', event => {
if (event.keyCode === 13) {
- setTimeout(function () {
+ setTimeout(() => {
self.details.find(':input:visible:enabled').eq(0).trigger('focus');
}, 10);
}
});
- this.link.on('keydown', function (event) {
+ this.link.on('keydown', event => {
if (event.keyCode === 13) {
event.preventDefault();
self.focus();
self.details.find(':input:visible:enabled').eq(0).trigger('focus');
}
});
- this.details.on('summaryUpdated', function () {
+ this.details.on('summaryUpdated', () => {
self.updateSummary();
}).trigger('summaryUpdated');
};
Drupal.verticalTab.prototype = {
- focus: function focus() {
- var triggerFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+ focus(triggerFocus = true) {
this.details.siblings('.js-vertical-tabs-pane').each(function closeOtherTabs() {
- var tab = $(this).data('verticalTab');
+ const tab = $(this).data('verticalTab');
if (tab.details.attr('open')) {
tab.details.removeAttr('open').find('> summary').attr({
@@ -120,7 +120,7 @@
}).closest('.js-vertical-tabs').find('.js-vertical-tab-active').remove();
if (triggerFocus) {
- var $summary = this.details.find('> summary');
+ const $summary = this.details.find('> summary');
if ($summary.is(':visible')) {
$summary.trigger('focus');
@@ -130,11 +130,13 @@
this.item.addClass('is-selected');
this.title.after($(Drupal.theme.verticalTabActiveTabIndicator()).addClass('js-vertical-tab-active'));
},
- updateSummary: function updateSummary() {
- var summary = this.details.drupalGetSummary();
+
+ updateSummary() {
+ const summary = this.details.drupalGetSummary();
this.summary.html(summary);
},
- tabShow: function tabShow() {
+
+ tabShow() {
this.item.removeClass('vertical-tabs__menu-item--hidden').show();
this.item.closest('.js-form-type-vertical-tabs').show();
this.details.removeClass('vertical-tab--hidden js-vertical-tab-hidden').show();
@@ -143,12 +145,13 @@
this.focus(false);
return this;
},
- tabHide: function tabHide() {
+
+ tabHide() {
this.item.addClass('vertical-tabs__menu-item--hidden').hide();
this.details.addClass('vertical-tab--hidden js-vertical-tab-hidden').hide();
this.details.parent().children('.js-vertical-tabs-pane').removeClass('vertical-tabs__item--first vertical-tabs__item--last').filter(':visible').eq(0).addClass('vertical-tabs__item--first');
this.details.parent().children('.js-vertical-tabs-pane').filter(':visible').eq(-1).addClass('vertical-tabs__item--last');
- var $firstTab = this.details.siblings('.js-vertical-tabs-pane:not(.js-vertical-tab-hidden)').eq(0);
+ const $firstTab = this.details.siblings('.js-vertical-tabs-pane:not(.js-vertical-tab-hidden)').eq(0);
if ($firstTab.length) {
$firstTab.data('verticalTab').focus(false);
@@ -158,23 +161,18 @@
return this;
}
+
};
- Drupal.theme.verticalTab = function (settings) {
- var tab = {};
+ Drupal.theme.verticalTab = settings => {
+ const tab = {};
tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append($('<span class="vertical-tabs__menu-link-content"></span>').append(tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>'))));
return tab;
};
- Drupal.theme.verticalTabsWrapper = function () {
- return '<div class="vertical-tabs clearfix"></div>';
- };
+ Drupal.theme.verticalTabsWrapper = () => '<div class="vertical-tabs clearfix"></div>';
- Drupal.theme.verticalTabListWrapper = function () {
- return '<ul class="vertical-tabs__menu"></ul>';
- };
+ Drupal.theme.verticalTabListWrapper = () => '<ul class="vertical-tabs__menu"></ul>';
- Drupal.theme.verticalTabActiveTabIndicator = function () {
- return "<span class=\"visually-hidden\">".concat(Drupal.t('(active tab)'), "</span>");
- };
+ Drupal.theme.verticalTabActiveTabIndicator = () => `<span class="visually-hidden">${Drupal.t('(active tab)')}</span>`;
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/themes/classy/js/media_embed_ckeditor.theme.js b/core/themes/classy/js/media_embed_ckeditor.theme.js
index 0b9d95999e8e2bd85013524aa5443c9832cf7c4c..19cc4ff77763ccdea8407959894cab4a7aa27c73 100644
--- a/core/themes/classy/js/media_embed_ckeditor.theme.js
+++ b/core/themes/classy/js/media_embed_ckeditor.theme.js
@@ -5,8 +5,6 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.mediaEmbedPreviewError = function () {
- return "<div class=\"media-embed-error media-embed-error--preview-error\">".concat(Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.'), "</div>");
- };
+(Drupal => {
+ Drupal.theme.mediaEmbedPreviewError = () => `<div class="media-embed-error media-embed-error--preview-error">${Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.')}</div>`;
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/olivero/css/base/base.css b/core/themes/olivero/css/base/base.css
index c4df575fffea4b4c4d0ca77d94069587bc3b9390..24edd2f81c5ee7cf31da699e08b127842acabb0b 100644
--- a/core/themes/olivero/css/base/base.css
+++ b/core/themes/olivero/css/base/base.css
@@ -10,6 +10,19 @@
* Generic base elements.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
*,
*:before,
*:after {
@@ -17,17 +30,17 @@
}
html {
- font-family: "metropolis", sans-serif;
+ font-family: var(--font-sans);
font-size: 100%;
font-weight: normal;
font-style: normal;
- line-height: 1.6875rem;
+ line-height: var(--line-height-base);
}
body {
margin: 0;
- color: #313637;
- background-color: #f7f9fa;
+ color: var(--color--gray-10);
+ background-color: var(--color--gray-95);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");
background-position: top left /* LTR */
}
@@ -43,11 +56,11 @@ body.is-fixed {
}
a {
- color: #0d77b5
+ color: var(--color--blue-20)
}
a:hover {
- color: #2494db;
+ color: var(--color--blue-50);
}
a:focus {
@@ -74,57 +87,57 @@ audio {
h1 {
letter-spacing: -0.01em;
font-size: 1.75rem;
- line-height: 2.25rem
+ line-height: var(--sp2)
}
@media (min-width: 43.75rem) {
h1 {
font-size: 3.75rem;
- line-height: 4.5rem
+ line-height: var(--sp4)
}
}
h2 {
letter-spacing: -0.01em;
font-size: 1.5rem;
- line-height: 2.25rem
+ line-height: var(--sp2)
}
@media (min-width: 43.75rem) {
h2 {
font-size: 2.25rem;
- line-height: 3.375rem
+ line-height: var(--sp3)
}
}
h3 {
font-size: 1.25rem;
- line-height: 1.6875rem
+ line-height: var(--sp1-5)
}
@media (min-width: 43.75rem) {
h3 {
font-size: 1.5rem;
- line-height: 2.25rem
+ line-height: var(--sp2)
}
}
h4 {
font-size: 1.125rem;
- line-height: 1.6875rem;
+ line-height: var(--sp1-5);
}
h5 {
font-size: 1rem;
- line-height: 1.6875rem;
+ line-height: var(--sp1-5);
}
h6 {
font-size: 0.875rem;
- line-height: 1.125rem;
+ line-height: var(--sp);
}
h1,
@@ -133,10 +146,10 @@ h3,
h4,
h5,
h6 {
- margin-top: 1.125rem;
- margin-bottom: 1.125rem;
- color: #0d1214;
- font-family: "metropolis", sans-serif;
+ margin-top: var(--sp);
+ margin-bottom: var(--sp);
+ color: var(--color--gray-0);
+ font-family: var(--font-sans);
font-weight: bold
}
@@ -148,8 +161,8 @@ h3,
h4,
h5,
h6 {
- margin-top: 2.25rem;
- margin-bottom: 2.25rem
+ margin-top: var(--sp2);
+ margin-bottom: var(--sp2)
}
}
@@ -199,7 +212,7 @@ ul {
width: 100%;
height: 100vh;
opacity: 0.2;
- background: #0d77b5;
+ background: var(--color--blue-20);
}
.is-overlay-active .overlay {
diff --git a/core/themes/olivero/css/base/base.pcss.css b/core/themes/olivero/css/base/base.pcss.css
index c38b3c493d3d6c701f39e8c8b43d160cebfe605a..0ce27de7dddcbacdcacaf1bd1e91b61508d7097e 100644
--- a/core/themes/olivero/css/base/base.pcss.css
+++ b/core/themes/olivero/css/base/base.pcss.css
@@ -3,7 +3,7 @@
* Generic base elements.
*/
-@import "variables.pcss.css";
+@import "media-queries.pcss.css";
*,
*:before,
diff --git a/core/themes/olivero/css/base/fonts.css b/core/themes/olivero/css/base/fonts.css
index af11aa78431eb99c275c22fca09e42f9a2a866e4..0de877bec59a6c732dd799f9feb71627cf2e809c 100644
--- a/core/themes/olivero/css/base/fonts.css
+++ b/core/themes/olivero/css/base/fonts.css
@@ -10,6 +10,19 @@
* Base Fonts.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
@font-face {
font-family: "metropolis";
src:
diff --git a/core/themes/olivero/css/base/fonts.pcss.css b/core/themes/olivero/css/base/fonts.pcss.css
index b02073eadf839c56c6ee90a5f181dbc5541d09b6..80a78d23d9f2522d8a4c45500c6e1e2112397b87 100644
--- a/core/themes/olivero/css/base/fonts.pcss.css
+++ b/core/themes/olivero/css/base/fonts.pcss.css
@@ -3,7 +3,7 @@
* Base Fonts.
*/
-@import "variables.pcss.css";
+@import "media-queries.pcss.css";
@font-face {
font-family: "metropolis";
diff --git a/core/themes/olivero/css/base/media-queries.css b/core/themes/olivero/css/base/media-queries.css
new file mode 100644
index 0000000000000000000000000000000000000000..0e9fd4151e083a5b2b3f47be510fc8f9ff4b2e9b
--- /dev/null
+++ b/core/themes/olivero/css/base/media-queries.css
@@ -0,0 +1,19 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
diff --git a/core/themes/olivero/css/base/media-queries.pcss.css b/core/themes/olivero/css/base/media-queries.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..ec87de15f412985b739cc712d837ed91ea49ed8e
--- /dev/null
+++ b/core/themes/olivero/css/base/media-queries.pcss.css
@@ -0,0 +1,18 @@
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+@custom-media --sm (min-width: 500px);
+@custom-media --md (min-width: 700px);
+@custom-media --lg (min-width: 1000px);
+@custom-media --xl (min-width: 1300px);
+
+/* Navigation related breakpoints */
+@custom-media --nav-md (min-width: 500px);
+@custom-media --nav (min-width: 1200px);
+@custom-media --max-nav (max-width: 1200px);
+
+/* Grid related breakpoints */
+@custom-media --grid-md (min-width: 700px); /* Grid shifts from 6 to 14 columns. */
+@custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */
diff --git a/core/themes/olivero/css/base/utility.css b/core/themes/olivero/css/base/utility.css
index cd22028e85bf42532592e139484b4f19009fa406..742ca693ad5eda0d59767a4f3b9a977b8f9cd5c0 100644
--- a/core/themes/olivero/css/base/utility.css
+++ b/core/themes/olivero/css/base/utility.css
@@ -10,6 +10,19 @@
* Utility classes.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
/*
ie11-autorow
diff --git a/core/themes/olivero/css/base/utility.pcss.css b/core/themes/olivero/css/base/utility.pcss.css
index 2c9d8a71d6d8abbf215efc839ef287f8ee19dfe2..73bdb9f91895c39a66dd6038d7d0a5991c81c21a 100644
--- a/core/themes/olivero/css/base/utility.pcss.css
+++ b/core/themes/olivero/css/base/utility.pcss.css
@@ -3,7 +3,7 @@
* Utility classes.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
/*
ie11-autorow
diff --git a/core/themes/olivero/css/base/variables.css b/core/themes/olivero/css/base/variables.css
index 6297dd946bdf0cc7bd9a9fe5213d1d095bc82051..678751daf913945444f3a7b747a8e1974c771277 100644
--- a/core/themes/olivero/css/base/variables.css
+++ b/core/themes/olivero/css/base/variables.css
@@ -4,33 +4,37 @@
* https://www.drupal.org/node/3084859
* @preserve
*/
-
-/*
- Media query breakpoints.
- Processed by postcss/postcss-custom-media.
-*/
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
/*
Custom CSS properties.
These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
*/
-
:root {
+ --font-sans: "metropolis", sans-serif;
+ --font-serif: "Lora", "georgia", serif;
/* Typography */
+ --font-size-base: 1rem;
+ --font-size-l: 1.125rem;
+ --font-size-s: 0.875rem;
+ --font-size-xs: 0.8125rem;
+ --font-size-xxs: 0.75rem;
+ --line-height-base: 1.6875rem;
+ --line-height-s: 1.125rem;
/* Layout */
+ --max-width: 84.375rem;
+ --max-bg-color: 98.125rem;
+ --sp: 1.125rem;
+ --content-left: 5.625rem;
+ --container-padding: var(--sp);
+ --container-padding-nav: var(--sp2);
+ --site-header-height-wide: var(--sp10);
/* Drupal administrative toolbar heights and width. */
+ --toolbar-height: 2.4375rem;
+ --toolbar-tray-height: 2.5rem;
+ --toolbar-tray-vertical-width: 14.9375rem;
/*
Grid helpers.
@@ -42,23 +46,97 @@
as they are processed by postcss/postcss-custom-properties (for IE11 compatibility),
which does not support that functionality. Therefore, we need a separate custom
property for each breakpoint. ðŸ˜
- */ /* Approximate width of a scrollbar. Doesn't have to be perfect. */
+ */
+
+ --scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
/* Grid gap across various breakpoints. */
+ --grid-gap: var(--sp);
+ --grid-gap--md: var(--sp2);
+ --grid-gap--lg: var(--grid-gap--md);
+ --grid-gap--nav: var(--grid-gap--md);
+ --grid-gap--max: var(--grid-gap--md);
/* Column counts at various breakpoints. */
+ --grid-col-count: 6;
+ --grid-col-count--md: 14;
+ --grid-col-count--lg: var(--grid-col-count--md);
+ --grid-col-count--nav: var(--grid-col-count--md);
+ --grid-col-count--max: var(--grid-col-count--md);
/* Count of grid-gaps at various breakpoints. */
+ --grid-gap-count: calc(var(--grid-col-count) - 1);
+ --grid-gap-count--md: calc(var(--grid-col-count--md) - 1);
+ --grid-gap-count--lg: var(--grid-gap-count--md);
+ --grid-gap-count--nav: var(--grid-gap-count--md);
+ --grid-gap-count--max: var(--grid-gap-count--md);
/* Width of the entire grid at various breakpoints. */
+ --grid-full-width: calc(100vw - var(--sp2));
+ --grid-full-width--md: var(--grid-full-width);
+ --grid-full-width--lg: calc(var(--grid-full-width) - var(--scrollbar-width));
+ --grid-full-width--nav: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
+ --grid-full-width--max: calc(var(--max-width) - var(--sp4));
/* Width of a grid column at various breakpoints */
-
- /* Layout helpers */ /* Black */ /* Black 1 */ /* Black 2 */ /* Black 3 */ /* Gray Dark */ /* Gray Dark 2 */ /* Gray medium */ /* Gray medium 1 */ /* Gray medium 2 */ /* Black 4 */ /* Gray light */ /* Gray light 1 */ /* Gray light 2 */ /* Blue dark */ /* Blue dark 2 */ /* Blue medium */ /* Blue bright */ /* Blue bright 5 */ /* White */ /* Red */ /* Gold */ /* Green */
+ --grid-col-width: calc((var(--grid-full-width) - var(--grid-gap-count)*var(--grid-gap))/var(--grid-col-count));
+ --grid-col-width--md: calc((var(--grid-full-width--md) - var(--grid-gap-count--md)*var(--grid-gap--md))/var(--grid-col-count--md));
+ --grid-col-width--lg: calc((var(--grid-full-width--lg) - var(--grid-gap-count--lg)*var(--grid-gap--lg))/var(--grid-col-count--lg));
+ --grid-col-width--nav: calc((var(--grid-full-width--nav) - var(--grid-gap-count--nav)*var(--grid-gap--nav))/var(--grid-col-count--nav));
+ --grid-col-width--max: calc((var(--grid-full-width--max) - var(--grid-gap-count--max)*var(--grid-gap--max))/var(--grid-col-count--max));
+
+ /* Layout helpers */
+ --sp0-25: calc(var(--sp)*0.25);
+ --sp0-5: calc(var(--sp)*0.5);
+ --sp0-75: calc(var(--sp)*0.75);
+ --sp1: calc(var(--sp)*1);
+ --sp1-5: calc(var(--sp)*1.5);
+ --sp2: calc(var(--sp)*2);
+ --sp2-5: calc(var(--sp)*2.5);
+ --sp3: calc(var(--sp)*3);
+ --sp4: calc(var(--sp)*4);
+ --sp5: calc(var(--sp)*5);
+ --sp6: calc(var(--sp)*6);
+ --sp7: calc(var(--sp)*7);
+ --sp8: calc(var(--sp)*8);
+ --sp9: calc(var(--sp)*9);
+ --sp10: calc(var(--sp)*10);
+ --sp11: calc(var(--sp)*11);
+ --sp12: calc(var(--sp)*12);
+ --color--black: #000; /* Black */
+ --color--gray-0: #0d1214; /* Black 1 */
+ --color--gray-5: #0c0d0e;
+ --color--gray-8: #171e23;
+ --color--gray-10: #313637; /* Black 2 */
+ --color--gray-20: #6e7172; /* Black 3 */
+ --color--gray-25: #5d7585; /* Gray Dark */
+ --color--gray-28: #7d919d; /* Gray Dark 2 */
+ --color--gray-30: #7e96a7; /* Gray medium */
+ --color--gray-40: #98abb9; /* Gray medium 1 */
+ --color--gray-45: #afb8be; /* Gray medium 2 */
+ --color--gray-50: #9ea0a1; /* Black 4 */
+ --color--gray-70: #d7e1e8; /* Gray light */
+ --color--gray-75: #e3e3e5;
+ --color--gray-80: #e7edf1; /* Gray light 1 */
+ --color--gray-90: #f1f4f7;
+ --color--gray-95: #f7f9fa; /* Gray light 2 */
+ --color--blue-10: #0f6292;
+ --color--blue-20: #0d77b5; /* Blue dark */
+ --color--blue-30: #3d92c4; /* Blue dark 2 */
+ --color--blue-50: #2494db; /* Blue medium */
+ --color--blue-70: #53b0eb; /* Blue bright */
+ --color--blue-90: #ddeffb; /* Blue bright 5 */
+ --color--white: #fff; /* White */
+ --color--red: #e33f1e; /* Red */
+ --color--gold: #fdca40; /* Gold */
+ --color--green: #3fa21c; /* Green */
/* Header */
+ --header-height-wide-when-fixed: calc(var(--sp)*6);
/* Width of slide out navigation */
+ --mobile-nav-width: 31.25rem;
/* Border radius */
+ --border-radius: 0.1875rem;
}
diff --git a/core/themes/olivero/css/base/variables.pcss.css b/core/themes/olivero/css/base/variables.pcss.css
index fa21ec9ae685f7c38e7254ae079f9e6260fdc19a..61ad00b4d303918fe9813c172fb74a7e915fe641 100644
--- a/core/themes/olivero/css/base/variables.pcss.css
+++ b/core/themes/olivero/css/base/variables.pcss.css
@@ -1,22 +1,3 @@
-/*
- Media query breakpoints.
- Processed by postcss/postcss-custom-media.
-*/
-
-@custom-media --sm (min-width: 500px);
-@custom-media --md (min-width: 700px);
-@custom-media --lg (min-width: 1000px);
-@custom-media --xl (min-width: 1300px);
-
-/* Navigation related breakpoints */
-@custom-media --nav-md (min-width: 500px);
-@custom-media --nav (min-width: 1200px);
-@custom-media --max-nav (max-width: 1200px);
-
-/* Grid related breakpoints */
-@custom-media --grid-md (min-width: 700px); /* Grid shifts from 6 to 14 columns. */
-@custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */
-
/*
Custom CSS properties.
diff --git a/core/themes/olivero/css/components/action-links.css b/core/themes/olivero/css/components/action-links.css
index 35a25715c2b618f308759ee9664cb5ca2bb33551..b6e942ce60ae6acffff559d18457eb0813cc7fbf 100644
--- a/core/themes/olivero/css/components/action-links.css
+++ b/core/themes/olivero/css/components/action-links.css
@@ -8,6 +8,14 @@
* @file
* Styles for action links.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+/* Navigation related breakpoints */
+/* Grid related breakpoints */
+/* Grid shifts from 6 to 14 columns. */
+/* Width of the entire grid maxes out. */
[dir="ltr"] .action-links {
margin-left: 0
}
@@ -43,7 +51,7 @@
display: inline-block
}
.action-links li a {
- color: #0d77b5;
+ color: var(--color--blue-20);
}
.action-links-item {
display: inline-block;
diff --git a/core/themes/olivero/css/components/action-links.pcss.css b/core/themes/olivero/css/components/action-links.pcss.css
index 5d3a1d4644f9f8d9c25857a9e79e416d40a792bb..c025cadd8013b5965a56cd9df45593f0dddc9aca 100644
--- a/core/themes/olivero/css/components/action-links.pcss.css
+++ b/core/themes/olivero/css/components/action-links.pcss.css
@@ -2,7 +2,7 @@
* @file
* Styles for action links.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.action-links {
margin-block: 0;
diff --git a/core/themes/olivero/css/components/ajax-progress.module.css b/core/themes/olivero/css/components/ajax-progress.module.css
index b5292e05fa6f4fde32b1346b6492e6585b70cd11..6bacebbdc6e8a1a03a2a9789b8c01b62b1214006 100644
--- a/core/themes/olivero/css/components/ajax-progress.module.css
+++ b/core/themes/olivero/css/components/ajax-progress.module.css
@@ -10,6 +10,19 @@
* Visual styles for ajax-progress throbber.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.ajax-progress {
display: inline-block;
}
@@ -19,19 +32,19 @@
*/
[dir="ltr"] .ajax-progress-throbber {
- margin-left: 0.5625rem;
+ margin-left: var(--sp0-5);
}
[dir="rtl"] .ajax-progress-throbber {
- margin-right: 0.5625rem;
+ margin-right: var(--sp0-5);
}
[dir="ltr"] .ajax-progress-throbber {
- margin-right: 0.5625rem;
+ margin-right: var(--sp0-5);
}
[dir="rtl"] .ajax-progress-throbber {
- margin-left: 0.5625rem;
+ margin-left: var(--sp0-5);
}
.ajax-progress-throbber {
@@ -50,20 +63,20 @@
width: 1.125rem;
height: 1.125rem;
border-width: 2px;
- border-color: #2494db transparent #2494db #2494db;
+ border-color: var(--color--blue-50) transparent var(--color--blue-50) var(--color--blue-50);
}
[dir="ltr"] .ajax-progress-throbber .message {
- padding-left: 0.5625rem;
+ padding-left: var(--sp0-5);
}
[dir="rtl"] .ajax-progress-throbber .message {
- padding-right: 0.5625rem;
+ padding-right: var(--sp0-5);
}
.ajax-progress-throbber .message {
display: inline-block;
- font-size: 0.875rem;
+ font-size: var(--font-size-s);
font-weight: 400;
}
@@ -86,9 +99,9 @@
width: 3.5rem;
height: 3.5rem;
margin: -1.75rem;
- border: 1px solid #afb8be;
+ border: 1px solid var(--color--gray-45);
border-radius: 3.5rem;
- background-color: #fff;
+ background-color: var(--color--white);
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1) /* LTR */
}
@@ -122,7 +135,7 @@
.ajax-progress-fullscreen:before {
animation: olivero-throbber 0.75s linear infinite;
border-style: solid dotted solid solid;
- border-color: #2494db transparent #2494db #2494db;
+ border-color: var(--color--blue-50) transparent var(--color--blue-50) var(--color--blue-50);
border-radius: 50%;
}
diff --git a/core/themes/olivero/css/components/ajax-progress.module.pcss.css b/core/themes/olivero/css/components/ajax-progress.module.pcss.css
index c4f08590adc7305af0d576bc05b80d32a1797f9f..a003e1782c137b86f9e486c691c514304e92d501 100644
--- a/core/themes/olivero/css/components/ajax-progress.module.pcss.css
+++ b/core/themes/olivero/css/components/ajax-progress.module.pcss.css
@@ -3,7 +3,7 @@
* Visual styles for ajax-progress throbber.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.ajax-progress {
display: inline-block;
diff --git a/core/themes/olivero/css/components/autocomplete-loading.module.css b/core/themes/olivero/css/components/autocomplete-loading.module.css
index 4ba078a729ba81b334dca9002000140992611964..9139b65df32efdde63e3c9aea690a1c3ed4ab80f 100644
--- a/core/themes/olivero/css/components/autocomplete-loading.module.css
+++ b/core/themes/olivero/css/components/autocomplete-loading.module.css
@@ -10,45 +10,63 @@
* Visual styles for autocomplete input field.
*/
-:root { /* 18 18 */
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+:root {
+ --autocomplete-search-icon-url: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e");
+ --autocomplete-throbber-icon-url: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e");
+ --autocomplete-throbber-IE-icon-url: url("../../images/throbber.gif");
+ --autocomplete-throbber-IE-size: 1.125rem 1.125rem; /* 18 18 */
+ --autocomplete-icon-right-offset: var(--sp1);
}
html[dir="ltr"].js .form-autocomplete {
- padding-right: 3.375rem;
+ padding-right: var(--sp3);
}
html[dir="rtl"].js .form-autocomplete {
- padding-left: 3.375rem;
+ padding-left: var(--sp3);
}
html.js .form-autocomplete {
- background-color: #fff;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e");
+ background-color: var(--color--white);
+ background-image: var(--autocomplete-search-icon-url);
background-repeat: no-repeat;
- background-position: right 18px center /* LTR */
+ background-position: right var(--autocomplete-icon-right-offset) center /* LTR */
}
html.js .form-autocomplete:disabled {
- background-color: #f1f4f7;
+ background-color: var(--color--gray-90);
}
html.js .form-autocomplete.ui-autocomplete-loading {
- background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e") no-repeat right 1.125rem center;
+ background: var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center;
}
html.js[dir="rtl"] .form-autocomplete {
- background-color: #fff;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e");
+ background-color: var(--color--white);
+ background-image: var(--autocomplete-search-icon-url);
background-repeat: no-repeat;
- background-position: left 18px center
+ background-position: left var(--autocomplete-icon-right-offset) center
}
html.js[dir="rtl"] .form-autocomplete:disabled {
- background-color: #f1f4f7;
+ background-color: var(--color--gray-90);
}
html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading {
- background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e") no-repeat left 1.125rem center;
+ background: var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center;
}
/* IE11 does not animate inline SVG. */
@@ -59,12 +77,12 @@ html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading {
_:-ms-fullscreen,
html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading {
- background: url("../../images/throbber.gif") no-repeat right 1.125rem center / 1.125rem 1.125rem;
+ background: var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size);
}
/* stylelint-disable-next-line selector-type-no-unknown */
_:-ms-fullscreen,
html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading {
- background: url("../../images/throbber.gif") no-repeat left 1.125rem center / 1.125rem 1.125rem;
+ background: var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size);
}
diff --git a/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css b/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css
index 9dacf6696df40aade292a11fb2a02fa552ef6bb8..fcd3735702d56e5068a1397711be9672911b85ac 100644
--- a/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css
+++ b/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css
@@ -3,7 +3,7 @@
* Visual styles for autocomplete input field.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
:root {
--autocomplete-search-icon-url: url("../../images/magnifying-glass.svg");
diff --git a/core/themes/olivero/css/components/block.css b/core/themes/olivero/css/components/block.css
index 50855aff75d47ed72560fce49dc254e59276fd4e..8ff9a44674fd2c752f35bd6343e20e30faf8242e 100644
--- a/core/themes/olivero/css/components/block.css
+++ b/core/themes/olivero/css/components/block.css
@@ -10,15 +10,28 @@
* Block styling.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.block__title {
margin-top: 0;
- margin-bottom: 1.125rem;
+ margin-bottom: var(--sp);
letter-spacing: 0.02em;
- color: #6e7172;
- font-size: 0.875rem;
- line-height: 1.125rem;
+ color: var(--color--gray-20);
+ font-size: var(--font-size-s);
+ line-height: var(--sp);
}
.site-footer .block__title {
- color: #9ea0a1;
+ color: var(--color--gray-50);
}
diff --git a/core/themes/olivero/css/components/block.pcss.css b/core/themes/olivero/css/components/block.pcss.css
index 55ffdc7de0e36d5e47dbf7a9f34e85fb863ccbcc..393dde7f71466af492e2e3a770e0655909e07002 100644
--- a/core/themes/olivero/css/components/block.pcss.css
+++ b/core/themes/olivero/css/components/block.pcss.css
@@ -3,7 +3,7 @@
* Block styling.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.block__title {
margin-block: 0 var(--sp);
diff --git a/core/themes/olivero/css/components/book.css b/core/themes/olivero/css/components/book.css
index 9a7d297b269e1e77760bb66ccc622405d4b908f1..8e5d57892034f36de148d6c79e523278d65b7f59 100644
--- a/core/themes/olivero/css/components/book.css
+++ b/core/themes/olivero/css/components/book.css
@@ -10,6 +10,19 @@
* Book module styling.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .book-pager {
margin-left: 0;
}
@@ -45,11 +58,11 @@
.book-pager {
display: flex;
flex-wrap: wrap;
- margin-top: 0 1.125rem;
+ margin-top: 0 var(--sp);
padding-top: 0;
- padding-bottom: 1.125rem;
+ padding-bottom: var(--sp);
list-style: none;
- border-bottom: solid 1px #0d77b5;
+ border-bottom: solid 1px var(--color--blue-20);
}
.book-pager__item {
@@ -93,8 +106,8 @@
display: inline-flex;
align-items: center;
text-decoration: none;
- color: #0d77b5;
- font-family: "Lora", "georgia", serif;
+ color: var(--color--blue-20);
+ font-family: var(--font-serif);
font-size: 1.125rem;
font-weight: 600;
}
@@ -117,8 +130,8 @@
.book-pager__link--previous:before {
display: block;
- width: 0.5625rem;
- height: 0.5625rem;
+ width: var(--sp0-5);
+ height: var(--sp0-5);
content: "";
transform: rotate(-45deg);
border-top: solid 3px currentColor;
@@ -142,8 +155,8 @@
.book-pager__link--next:after {
display: block;
- width: 0.5625rem;
- height: 0.5625rem;
+ width: var(--sp0-5);
+ height: var(--sp0-5);
content: "";
transform: rotate(135deg);
border-top: solid 3px currentColor;
@@ -182,8 +195,8 @@
}
.book-navigation__menu {
- margin-top: 2.25rem;
- margin-bottom: 2.25rem;
+ margin-top: var(--sp2);
+ margin-bottom: var(--sp2);
padding-top: 0;
padding-bottom: 0;
list-style: none;
diff --git a/core/themes/olivero/css/components/book.pcss.css b/core/themes/olivero/css/components/book.pcss.css
index eb9db5b81e3ba35320f644155c9916e83cf77971..fb537ded8f3dea386568f9afd95653796cdf4849 100644
--- a/core/themes/olivero/css/components/book.pcss.css
+++ b/core/themes/olivero/css/components/book.pcss.css
@@ -3,7 +3,7 @@
* Book module styling.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.book-pager {
display: flex;
diff --git a/core/themes/olivero/css/components/breadcrumb.css b/core/themes/olivero/css/components/breadcrumb.css
index 8d77a65b0e81a2e0a3ffeec79884bb0814404c5a..a24391eb546341f2913bb1006121322aaca39848 100644
--- a/core/themes/olivero/css/components/breadcrumb.css
+++ b/core/themes/olivero/css/components/breadcrumb.css
@@ -10,30 +10,43 @@
* Breadcrumb region.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.breadcrumb {
position: relative;
font-size: 0.875rem;
font-weight: bold;
- line-height: 1.125rem
+ line-height: var(--sp1)
/* Shadow on the right side of breadcrumbs for narrow screens. */
}
[dir="ltr"] .breadcrumb:after {
- right: -1.125rem
+ right: calc(var(--sp1)*-1)
}
[dir="rtl"] .breadcrumb:after {
- left: -1.125rem
+ left: calc(var(--sp1)*-1)
}
.breadcrumb:after {
position: absolute;
top: 0;
- width: 3.375rem;
- height: 2.25rem;
+ width: var(--sp3);
+ height: var(--sp2);
content: "";
- background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%) /* LTR */
+ background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%) /* LTR */
}
@media (min-width: 62.5rem) {
@@ -51,39 +64,39 @@
}
[dir="rtl"] .breadcrumb:after {
- background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+ background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%);
}
[dir="ltr"] .breadcrumb__content {
- margin-left: -0.5625rem
+ margin-left: calc(var(--sp0-5)*-1)
}
[dir="rtl"] .breadcrumb__content {
- margin-right: -0.5625rem
+ margin-right: calc(var(--sp0-5)*-1)
}
[dir="ltr"] .breadcrumb__content {
- margin-right: -1.125rem
+ margin-right: calc(var(--sp1)*-1)
}
[dir="rtl"] .breadcrumb__content {
- margin-left: -1.125rem
+ margin-left: calc(var(--sp1)*-1)
}
[dir="ltr"] .breadcrumb__content {
- padding-left: 0.5625rem
+ padding-left: var(--sp0-5)
}
[dir="rtl"] .breadcrumb__content {
- padding-right: 0.5625rem
+ padding-right: var(--sp0-5)
}
.breadcrumb__content {
overflow: auto;
- margin-top: -0.5625rem;
- margin-bottom: -0.5625rem;
- padding-top: 0.5625rem;
- padding-bottom: 0.5625rem;
+ margin-top: calc(var(--sp0-5)*-1);
+ margin-bottom: calc(var(--sp0-5)*-1);
+ padding-top: var(--sp0-5);
+ padding-bottom: var(--sp0-5);
-webkit-overflow-scrolling: touch
}
@@ -99,27 +112,27 @@
}
[dir="ltr"] .breadcrumb__list {
- margin-left: -1.125rem
+ margin-left: calc(var(--sp1)*-1)
}
[dir="rtl"] .breadcrumb__list {
- margin-right: -1.125rem
+ margin-right: calc(var(--sp1)*-1)
}
[dir="ltr"] .breadcrumb__list {
- margin-right: -1.125rem
+ margin-right: calc(var(--sp1)*-1)
}
[dir="rtl"] .breadcrumb__list {
- margin-left: -1.125rem
+ margin-left: calc(var(--sp1)*-1)
}
[dir="ltr"] .breadcrumb__list {
- padding-left: 1.125rem
+ padding-left: var(--sp1)
}
[dir="rtl"] .breadcrumb__list {
- padding-right: 1.125rem
+ padding-right: var(--sp1)
}
[dir="ltr"] .breadcrumb__list {
@@ -136,7 +149,7 @@
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
- padding-bottom: 1.125rem;
+ padding-bottom: var(--sp1);
list-style: none;
white-space: nowrap
}
@@ -189,11 +202,11 @@
}
[dir="ltr"] .breadcrumb__item:nth-child(n+2):before {
- border-right: 2px solid #5d7585
+ border-right: 2px solid var(--color--gray-25)
}
[dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
- border-left: 2px solid #5d7585
+ border-left: 2px solid var(--color--gray-25)
}
.breadcrumb__item:nth-child(n+2):before {
@@ -202,15 +215,15 @@
height: 0.5rem;
content: "";
transform: rotate(45deg); /* LTR */
- border-top: 2px solid #5d7585;
+ border-top: 2px solid var(--color--gray-25);
}
[dir="ltr"] .breadcrumb__item:last-child {
- margin-right: 3.375rem
+ margin-right: var(--sp3)
}
[dir="rtl"] .breadcrumb__item:last-child {
- margin-left: 3.375rem
+ margin-left: var(--sp3)
}
@media (min-width: 62.5rem) {
@@ -230,7 +243,7 @@
.breadcrumb__link {
text-decoration: none;
- color: #0d77b5
+ color: var(--color--blue-20)
}
.breadcrumb__link:hover,
diff --git a/core/themes/olivero/css/components/breadcrumb.pcss.css b/core/themes/olivero/css/components/breadcrumb.pcss.css
index 5a5566df6a0ae1677cc6a5fb53943dfb9e8bc3b0..73573aab4ce4a54e9c84e60a9aeab1cb444befc8 100644
--- a/core/themes/olivero/css/components/breadcrumb.pcss.css
+++ b/core/themes/olivero/css/components/breadcrumb.pcss.css
@@ -3,7 +3,7 @@
* Breadcrumb region.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.breadcrumb {
position: relative;
diff --git a/core/themes/olivero/css/components/button.css b/core/themes/olivero/css/components/button.css
index b6b38eaf0cd4eecd16eebcdc7d1d28c170edec48..f156452103ed58956c9c082f8ed85c9d21cb4994 100644
--- a/core/themes/olivero/css/components/button.css
+++ b/core/themes/olivero/css/components/button.css
@@ -10,6 +10,19 @@
* Buttons.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .button {
margin-left: 0
}
@@ -19,31 +32,31 @@
}
[dir="ltr"] .button {
- margin-right: 1.125rem
+ margin-right: var(--sp1)
}
[dir="rtl"] .button {
- margin-left: 1.125rem
+ margin-left: var(--sp1)
}
.button {
display: inline-block;
- height: 3.375rem;
- margin-top: 1.125rem;
- margin-bottom: 1.125rem;
- padding-top: 1.125rem;
- padding-bottom: 1.125rem;
- padding-left: 1.6875rem;
- padding-right: 1.6875rem;
+ height: var(--sp3);
+ margin-top: var(--sp1);
+ margin-bottom: var(--sp1);
+ padding-top: calc(var(--sp3)/2 - var(--line-height-s)/2);
+ padding-bottom: calc(var(--sp3)/2 - var(--line-height-s)/2);
+ padding-left: var(--sp1-5);
+ padding-right: var(--sp1-5);
cursor: pointer;
text-align: center;
text-decoration: none;
- color: #0d77b5;
- border: solid 2px #0d77b5;
- border-radius: 0.1875rem;
- background-color: #fff;
+ color: var(--color--blue-20);
+ border: solid 2px var(--color--blue-20);
+ border-radius: var(--border-radius);
+ background-color: var(--color--white);
font-family: inherit;
- font-size: 1.125rem;
+ font-size: var(--font-size-l);
font-weight: 700;
-webkit-appearance: none;
-moz-appearance: none;
@@ -54,27 +67,27 @@
.button:hover,
.button:focus {
text-decoration: none;
- color: #0f6292;
- border: solid 2px #0f6292;
+ color: var(--color--blue-10);
+ border: solid 2px var(--color--blue-10);
background: none;
font-weight: 700;
}
.button:focus {
- outline: 2px solid #53b0eb;
+ outline: 2px solid var(--color--blue-70);
outline-offset: 2px;
}
.button:active {
- color: #0d77b5;
- border-color: #0d77b5;
+ color: var(--color--blue-20);
+ border-color: var(--color--blue-20);
}
.button:disabled,
.button.is-disabled {
cursor: default;
- color: #d7e1e8;
- border-color: #d7e1e8;
+ color: var(--color--gray-70);
+ border-color: var(--color--gray-70);
}
.button {
@@ -94,9 +107,9 @@
/* Top padding accounts for font not being vertically centered within line-height. */
padding-top: 1px;
padding-bottom: 0;
- padding-left: 1.6875rem;
- padding-right: 1.6875rem;
- line-height: 1.125rem
+ padding-left: var(--sp1-5);
+ padding-right: var(--sp1-5);
+ line-height: var(--line-height-s)
}
}
@@ -124,36 +137,36 @@
}
.button--small {
- height: 2.8125rem;
- padding-top: 0.84375rem;
- padding-bottom: 0.84375rem;
- padding-left: 1.125rem;
- padding-right: 1.125rem;
- font-size: 1rem;
+ height: var(--sp2-5);
+ padding-top: calc(var(--sp2-5)/2 - var(--line-height-s)/2);
+ padding-bottom: calc(var(--sp2-5)/2 - var(--line-height-s)/2);
+ padding-left: var(--sp);
+ padding-right: var(--sp);
+ font-size: var(--font-size-base);
line-height: normal;
}
.button--primary {
- color: #fff;
- background-color: #0d77b5
+ color: var(--color--white);
+ background-color: var(--color--blue-20)
}
.button--primary:hover,
.button--primary:focus {
- color: #fff;
- border-color: #0f6292;
- background-color: #0f6292;
+ color: var(--color--white);
+ border-color: var(--color--blue-10);
+ background-color: var(--color--blue-10);
}
.button--primary:active {
- color: #fff;
- background-color: #0d77b5;
+ color: var(--color--white);
+ background-color: var(--color--blue-20);
}
.button--primary:disabled,
.button--primary.is-disabled {
- color: #fff;
- background-color: #d7e1e8;
+ color: var(--color--white);
+ background-color: var(--color--gray-70);
}
.button--icon-back {
diff --git a/core/themes/olivero/css/components/button.pcss.css b/core/themes/olivero/css/components/button.pcss.css
index 1bb849c592723bb07ec4f9be06386b84a3d69f9e..79f2f6b21864cd8d1ddb706afd338ee2e92e9135 100644
--- a/core/themes/olivero/css/components/button.pcss.css
+++ b/core/themes/olivero/css/components/button.pcss.css
@@ -3,7 +3,7 @@
* Buttons.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.button {
display: inline-block;
diff --git a/core/themes/olivero/css/components/comments.css b/core/themes/olivero/css/components/comments.css
index 79c1a3ae1869d9edb03ba6ec2343ba590788c3a5..6216636eaf4049624b5e458f0d4ddcd2dca9e679 100644
--- a/core/themes/olivero/css/components/comments.css
+++ b/core/themes/olivero/css/components/comments.css
@@ -10,12 +10,30 @@
* Comment section and individual comments.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+:root {
+ --comment-indentation: var(--sp2);
+ --comment-indentation--md: var(--sp4);
+}
+
.comment--level-1 {
- border-top: 2px solid #e7edf1
+ border-top: 2px solid var(--color--gray-80)
}
.comment--level-1 ~ .comment--level-1 {
- margin-top: 2.25rem;
+ margin-top: var(--sp2);
}
.comments__title {
@@ -25,35 +43,35 @@
}
[dir="ltr"] .comments__count {
- margin-left: 1.125rem
+ margin-left: var(--sp);
}
[dir="rtl"] .comments__count {
- margin-right: 1.125rem
+ margin-right: var(--sp);
}
[dir="ltr"] .comments__count {
- margin-right: 1.125rem
+ margin-right: var(--sp);
}
[dir="rtl"] .comments__count {
- margin-left: 1.125rem
+ margin-left: var(--sp);
}
[dir="ltr"] .comments__count {
- padding-left: 0.3125rem
+ padding-left: 0.3125rem;
}
[dir="rtl"] .comments__count {
- padding-right: 0.3125rem
+ padding-right: 0.3125rem;
}
[dir="ltr"] .comments__count {
- padding-right: 0.3125rem
+ padding-right: 0.3125rem;
}
[dir="rtl"] .comments__count {
- padding-left: 0.3125rem
+ padding-left: 0.3125rem;
}
.comments__count {
@@ -61,31 +79,31 @@
display: inline-block;
min-width: 2.125rem;
margin-top: 0;
- margin-bottom: 0.5625rem;
+ margin-bottom: var(--sp0-5);
padding-top: 0;
padding-bottom: 0;
text-align: center;
- color: #fff;
+ color: var(--color--white);
border-radius: 2px;
- background-color: #0d77b5;
+ background-color: var(--color--blue-20);
font-size: 0.6875rem;
line-height: 1.3125rem
}
[dir="ltr"] .comments__count:after {
- left: 0.5rem
+ left: 0.5rem;
}
[dir="rtl"] .comments__count:after {
- right: 0.5rem
+ right: 0.5rem;
}
[dir="ltr"] .comments__count:after {
- border-right: 8px solid transparent
+ border-right: 8px solid transparent;
}
[dir="rtl"] .comments__count:after {
- border-left: 8px solid transparent
+ border-left: 8px solid transparent;
}
.comments__count:after {
@@ -94,42 +112,42 @@
width: 0;
height: 0;
content: "";
- border-top: 7px solid #0d77b5;
+ border-top: 7px solid var(--color--blue-20);
}
.comment-form {
- padding-bottom: 2.25rem;
+ padding-bottom: var(--sp2);
}
[dir="ltr"] .add-comment__form {
- padding-left: 0
+ padding-left: 0;
}
[dir="rtl"] .add-comment__form {
- padding-right: 0
+ padding-right: 0;
}
[dir="ltr"] .comment {
- padding-left: 3.375rem
+ padding-left: var(--sp3);
}
[dir="rtl"] .comment {
- padding-right: 3.375rem
+ padding-right: var(--sp3);
}
.comment {
position: relative;
- padding-top: 2.25rem
+ padding-top: var(--sp2)
}
@media (min-width: 43.75rem) {
[dir="ltr"] .comment {
- padding-left: 0
+ padding-left: 0;
}
[dir="rtl"] .comment {
- padding-right: 0
+ padding-right: 0;
}
}
@@ -139,7 +157,7 @@
.comment__text-content blockquote {
font-size: 1.3125rem;
- line-height: 2.25rem;
+ line-height: var(--sp2);
}
.comment__text-content {
@@ -152,7 +170,7 @@
}
.comment__links {
- margin-top: 1.125rem;
+ margin-top: var(--sp);
margin-bottom: 0;
}
@@ -160,7 +178,7 @@
text-decoration: none;
font-size: 0.875rem;
font-weight: bold;
- line-height: 1.125rem
+ line-height: var(--sp)
}
.comment__links-link:hover {
@@ -168,27 +186,27 @@
}
.add-comment__picture-wrapper {
- top: 2.25rem;
+ top: calc(var(--line-height-base) + var(--sp0-5));
}
[dir="ltr"] .add-comment__picture,[dir="ltr"]
.comment__picture {
- left: 0
+ left: 0;
}
[dir="rtl"] .add-comment__picture,[dir="rtl"]
.comment__picture {
- right: 0
+ right: 0;
}
.add-comment__picture,
.comment__picture {
position: absolute;
overflow: hidden;
- width: 2.25rem;
- height: 2.25rem;
+ width: var(--sp2);
+ height: var(--sp2);
border-radius: 50%;
- background-color: #e7edf1
+ background-color: var(--color--gray-80)
}
.add-comment__picture *:not(img), .comment__picture *:not(img) {
@@ -223,34 +241,34 @@
[dir="ltr"] .add-comment__picture,[dir="ltr"]
.comment__picture {
- left: -5.625rem
+ left: calc(var(--sp5)*-1);
}
[dir="rtl"] .add-comment__picture,[dir="rtl"]
.comment__picture {
- right: -5.625rem
+ right: calc(var(--sp5)*-1);
}
.add-comment__picture,
.comment__picture {
- width: 3.375rem;
- height: 3.375rem
+ width: var(--sp3);
+ height: var(--sp3)
}
}
@media (min-width: 43.75rem) {
[dir="ltr"] .indented .comment__picture {
- left: -4.5rem
+ left: calc(var(--sp4)*-1);
}
[dir="rtl"] .indented .comment__picture {
- right: -4.5rem
+ right: calc(var(--sp4)*-1);
}
.indented .comment__picture {
- width: 2.25rem;
- height: 2.25rem
+ width: var(--sp2);
+ height: var(--sp2)
}
}
@@ -259,18 +277,18 @@
}
[dir="ltr"] .comment__author {
- margin-right: 1.125rem
+ margin-right: var(--sp);
}
[dir="rtl"] .comment__author {
- margin-left: 1.125rem
+ margin-left: var(--sp);
}
.comment__author {
- font-family: "metropolis", sans-serif;
+ font-family: var(--font-sans);
font-size: 1rem;
font-weight: 700;
- line-height: 1.125rem
+ line-height: var(--sp)
}
.comment__author a {
@@ -279,39 +297,39 @@
.comment__time {
margin: 0;
- color: #6e7172;
- font-family: "metropolis", sans-serif;
+ color: var(--color--gray-20);
+ font-family: var(--font-sans);
font-size: 0.875rem;
- line-height: 1.125rem;
+ line-height: var(--sp);
}
[dir="ltr"] .indented {
- margin-left: 2.25rem
+ margin-left: var(--comment-indentation);
}
[dir="rtl"] .indented {
- margin-right: 2.25rem
+ margin-right: var(--comment-indentation);
}
[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
- left: -3.375rem
+ left: calc(var(--comment-indentation)*-1 - var(--sp));
}
[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
- right: -3.375rem
+ right: calc(var(--comment-indentation)*-1 - var(--sp));
}
[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
- border-left: solid 1px #e7edf1
+ border-left: solid 1px var(--color--gray-80);
}
[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
- border-right: solid 1px #e7edf1
+ border-right: solid 1px var(--color--gray-80);
}
.indented > .comment:not(:last-of-type):not(.has-children):before {
position: absolute;
- top: 2.25rem; /* Comment's padding-top */
+ top: var(--sp2); /* Comment's padding-top */
width: 0;
height: 100%;
content: ""
@@ -320,64 +338,64 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
- left: -3.375rem
+ left: calc(var(--comment-indentation--md)*-1 + var(--sp));
}
[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
- right: -3.375rem
+ right: calc(var(--comment-indentation--md)*-1 + var(--sp));
}
}
@media (min-width: 43.75rem) {
[dir="ltr"] .indented {
- margin-left: 4.5rem
+ margin-left: var(--comment-indentation--md);
}
[dir="rtl"] .indented {
- margin-right: 4.5rem
+ margin-right: var(--comment-indentation--md);
}
}
[dir="ltr"] .show-hide-btn {
- margin-left: 3.375rem
+ margin-left: var(--sp3);
}
[dir="rtl"] .show-hide-btn {
- margin-right: 3.375rem
+ margin-right: var(--sp3);
}
[dir="ltr"] .show-hide-btn {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .show-hide-btn {
- margin-left: 0
+ margin-left: 0;
}
[dir="ltr"] .show-hide-btn {
- padding-left: 0
+ padding-left: 0;
}
[dir="rtl"] .show-hide-btn {
- padding-right: 0
+ padding-right: 0;
}
[dir="ltr"] .show-hide-btn {
- padding-right: 0
+ padding-right: 0;
}
[dir="rtl"] .show-hide-btn {
- padding-left: 0
+ padding-left: 0;
}
.show-hide-btn {
- margin-top: 2.25rem;
+ margin-top: var(--sp2);
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
cursor: pointer;
- color: #313637;
+ color: var(--color--gray-10);
border: 0;
background: none;
font-size: 0.875rem;
@@ -399,10 +417,10 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .show-hide-btn {
- margin-left: 0
+ margin-left: 0;
}
[dir="rtl"] .show-hide-btn {
- margin-right: 0
+ margin-right: 0;
}
}
diff --git a/core/themes/olivero/css/components/comments.pcss.css b/core/themes/olivero/css/components/comments.pcss.css
index 11793bb2631eae2c3a98dac168769efdb3d4af40..8c9a082b4b650a284913ebff5731381cade2e50a 100644
--- a/core/themes/olivero/css/components/comments.pcss.css
+++ b/core/themes/olivero/css/components/comments.pcss.css
@@ -3,7 +3,7 @@
* Comment section and individual comments.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
:root {
--comment-indentation: var(--sp2);
diff --git a/core/themes/olivero/css/components/content-moderation.css b/core/themes/olivero/css/components/content-moderation.css
index 59cecb989c58dd845ff278f0b12cf932a9deecd5..3bba060bc0243a4808f7d2c04e82fc74dedf9169 100644
--- a/core/themes/olivero/css/components/content-moderation.css
+++ b/core/themes/olivero/css/components/content-moderation.css
@@ -10,31 +10,44 @@
* Styles for content moderation toolbar.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .entity-moderation-form {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
[dir="rtl"] .entity-moderation-form {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="ltr"] .entity-moderation-form {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="rtl"] .entity-moderation-form {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
.entity-moderation-form {
flex-direction: column;
- border: 1px solid #e7edf1;
- background-color: #f7f9fa
+ border: 1px solid var(--color--gray-80);
+ background-color: var(--color--gray-95)
}
.entity-moderation-form select,
.entity-moderation-form input:not([type="submit"]) {
- background-color: #fff;
+ background-color: var(--color--white);
}
@media (min-width: 43.75rem) {
@@ -45,11 +58,11 @@
}
[dir="ltr"] .entity-moderation-form__item {
- margin-right: 1.125rem
+ margin-right: var(--sp)
}
[dir="rtl"] .entity-moderation-form__item {
- margin-left: 1.125rem
+ margin-left: var(--sp)
}
.entity-moderation-form__item {
@@ -97,47 +110,47 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-left: -14.28571vw
+ margin-left: calc(var(--grid-col-width--md)*-2 + var(--grid-gap--md)*-2)
}
[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-right: -14.28571vw
+ margin-right: calc(var(--grid-col-width--md)*-2 + var(--grid-gap--md)*-2)
}
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
- width: calc(100vw - 2.25rem);
- margin-top: 2.25rem;
- margin-bottom: 4.5rem
+ width: calc(var(--grid-col-width--md)*14 + var(--grid-gap--md)*13);
+ margin-top: var(--sp2);
+ margin-bottom: var(--sp4)
}
}
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-left: calc(-7.14286vw - -1.07143px)
+ margin-left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
}
[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-right: calc(-7.14286vw - -1.07143px)
+ margin-right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
}
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
- width: calc(85.71429vw - 3.05357rem)
+ width: calc(var(--grid-col-width--lg)*12 + var(--grid-gap--lg)*11)
}
}
@media (min-width: 75rem) {
[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-left: calc(-7.14286vw - -0.62946rem)
+ margin-left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
}
[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-right: calc(-7.14286vw - -0.62946rem)
+ margin-right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
}
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
- width: calc(85.71429vw - 9.80357rem)
+ width: calc(var(--grid-col-width--nav)*12 + var(--grid-gap--nav)*11)
}
}
@@ -152,6 +165,6 @@
}
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
- width: 60.91071rem
+ width: calc(var(--grid-col-width--max)*10 + var(--grid-gap--max)*11)
}
}
diff --git a/core/themes/olivero/css/components/content-moderation.pcss.css b/core/themes/olivero/css/components/content-moderation.pcss.css
index 8b708ca05f676df84be304f04655f4b61b8c34e4..f22346f23cf4957a66cf6480b0c4e676629cc476 100644
--- a/core/themes/olivero/css/components/content-moderation.pcss.css
+++ b/core/themes/olivero/css/components/content-moderation.pcss.css
@@ -3,7 +3,7 @@
* Styles for content moderation toolbar.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.entity-moderation-form {
flex-direction: column;
diff --git a/core/themes/olivero/css/components/details.css b/core/themes/olivero/css/components/details.css
index 31bfc4138edd0e739f97e0f3be62eb19530f545c..b95ef741a4aeac79107425ddb9e346ed3a5d4f76 100644
--- a/core/themes/olivero/css/components/details.css
+++ b/core/themes/olivero/css/components/details.css
@@ -10,62 +10,79 @@
* Collapsible details.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+:root {
+ --details-border-width: 1px;
+ --details-summary-transition: background-color 0.12s ease-in-out;
+}
+
.olivero-details {
display: block;
- margin-top: 1.125rem;
- margin-bottom: 1.125rem;
+ margin-top: var(--sp1);
+ margin-bottom: var(--sp1);
color: inherit;
- border: 1px solid #e7edf1;
- border-radius: 0.1875rem;
- box-shadow: 0 1px 4px #d7e1e8;
+ border: var(--details-border-width) solid var(--color--gray-80);
+ border-radius: var(--border-radius);
+ box-shadow: 0 1px 4px var(--color--gray-70);
}
/* Details summary styles */
[dir="ltr"] .olivero-details__summary {
- padding-left: 2.25rem;
+ padding-left: var(--sp2);
}
[dir="rtl"] .olivero-details__summary {
- padding-right: 2.25rem;
+ padding-right: var(--sp2);
}
[dir="ltr"] .olivero-details__summary {
- padding-right: 1.125rem;
+ padding-right: var(--sp1);
}
[dir="rtl"] .olivero-details__summary {
- padding-left: 1.125rem;
+ padding-left: var(--sp1);
}
.olivero-details__summary {
position: relative;
- padding-top: 1.125rem;
- padding-bottom: 1.125rem;
+ padding-top: var(--sp1);
+ padding-bottom: var(--sp1);
list-style: none;
cursor: pointer;
- transition: background-color 0.12s ease-in-out;
+ transition: var(--details-summary-transition);
word-wrap: break-word;
-webkit-hyphens: auto;
- -ms-hyphens: auto;
hyphens: auto;
color: inherit;
- background-color: #f7f9fa;
- font-size: 1.125rem;
+ background-color: var(--color--gray-95);
+ font-size: var(--line-height-s);
font-weight: 700;
- line-height: 1.125rem;
+ line-height: var(--sp1);
}
/* Arrow icon */
[dir="ltr"] .olivero-details__summary:before,[dir="ltr"]
.collapse-processed > .olivero-details__summary .details-title:before {
- left: 0.84375rem;
+ left: var(--sp0-75);
}
[dir="rtl"] .olivero-details__summary:before,[dir="rtl"]
.collapse-processed > .olivero-details__summary .details-title:before {
- right: 0.84375rem;
+ right: var(--sp0-75);
}
.olivero-details__summary:before,
@@ -91,15 +108,15 @@
.olivero-details__summary:after,
.collapse-processed > .olivero-details__summary .details-title:after {
position: absolute;
- top: -1px;
- right: -1px;
- bottom: -1px;
- left: -1px;
+ top: calc(var(--details-border-width)*-1);
+ right: calc(var(--details-border-width)*-1);
+ bottom: calc(var(--details-border-width)*-1);
+ left: calc(var(--details-border-width)*-1);
content: "";
pointer-events: none;
opacity: 0;
- border-radius: 0.1875rem;
- box-shadow: inset 0 0 0 2px #53b0eb;
+ border-radius: var(--border-radius);
+ box-shadow: inset 0 0 0 2px var(--color--blue-70);
}
/* Hide the marker */
@@ -118,7 +135,7 @@
/* Details summary, hover state */
.olivero-details__summary:hover {
- background-color: #e7edf1;
+ background-color: var(--color--gray-80);
}
/* Details summary, focus and active states */
@@ -170,30 +187,30 @@
}
[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title {
- padding-left: 2.25rem;
+ padding-left: var(--sp2);
}
[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title {
- padding-right: 2.25rem;
+ padding-right: var(--sp2);
}
[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title {
- padding-right: 1.125rem;
+ padding-right: var(--sp1);
}
[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title {
- padding-left: 1.125rem;
+ padding-left: var(--sp1);
}
.collapse-processed > .olivero-details__summary .details-title {
position: relative;
display: block;
- padding-top: 1.125rem;
- padding-bottom: 1.125rem;
- transition: background-color 0.12s ease-in-out;
+ padding-top: var(--sp1);
+ padding-bottom: var(--sp1);
+ transition: var(--details-summary-transition);
text-decoration: none;
color: inherit;
- background-color: #f7f9fa;
+ background-color: var(--color--gray-95);
}
.collapse-processed > .olivero-details__summary .details-title:focus {
@@ -201,7 +218,7 @@
}
.collapse-processed > .olivero-details__summary .details-title:hover {
- background-color: #e7edf1;
+ background-color: var(--color--gray-80);
}
@media screen and (-ms-high-contrast: active) {
@@ -217,38 +234,38 @@
/* Details content wrapper */
.olivero-details__wrapper {
- margin: 1.125rem
+ margin: var(--sp1)
}
@media (min-width: 62.5rem) {
[dir="ltr"] .olivero-details__wrapper {
- margin-left: 2.25rem;
+ margin-left: var(--sp2);
}
[dir="rtl"] .olivero-details__wrapper {
- margin-right: 2.25rem;
+ margin-right: var(--sp2);
}
[dir="ltr"] .olivero-details__wrapper {
- margin-right: 2.25rem;
+ margin-right: var(--sp2);
}
[dir="rtl"] .olivero-details__wrapper {
- margin-left: 2.25rem;
+ margin-left: var(--sp2);
}
.olivero-details__wrapper {
- margin-top: 1.6875rem;
- margin-bottom: 1.6875rem
+ margin-top: var(--sp1-5);
+ margin-bottom: var(--sp1-5)
}
}
/* Description */
.olivero-details__description {
- margin-bottom: 1.125rem;
- color: #313637;
- font-size: 0.8125rem;
- line-height: 1.125rem;
+ margin-bottom: var(--sp1);
+ color: var(--color--gray-10);
+ font-size: var(--font-size-xs);
+ line-height: var(--line-height-s);
}
diff --git a/core/themes/olivero/css/components/details.pcss.css b/core/themes/olivero/css/components/details.pcss.css
index 73ed429b032d3d3d75648b9e2991eae57f2903d4..97821ef90e60a18ff024439fc53cf16e1c5c8df0 100644
--- a/core/themes/olivero/css/components/details.pcss.css
+++ b/core/themes/olivero/css/components/details.pcss.css
@@ -3,7 +3,7 @@
* Collapsible details.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
:root {
--details-border-width: 1px;
diff --git a/core/themes/olivero/css/components/dropbutton.css b/core/themes/olivero/css/components/dropbutton.css
index 5222a7dc5c123b0a0dbe9d2b76445872864d0640..954bb400093e498a388592250e814247b56b1824 100644
--- a/core/themes/olivero/css/components/dropbutton.css
+++ b/core/themes/olivero/css/components/dropbutton.css
@@ -10,25 +10,44 @@
* Dropbutton styles.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+:root {
+ --dropbutton--height: var(--sp1-5);
+ --dropbutton--bg-color: var(--color--gray-75);
+ --dropbutton--border-color: var(--color--blue-20);
+}
+
.dropbutton-wrapper.open {
position: relative;
z-index: 100; /* Ensure this appears above all other dropbuttons. */
- filter: drop-shadow(0 2px 2px #e3e3e5);
+ filter: drop-shadow(0 2px 2px var(--dropbutton--bg-color));
}
[dir="ltr"] .dropbutton-widget {
- padding-right: 1.6875rem;
+ padding-right: var(--dropbutton--height);
}
[dir="rtl"] .dropbutton-widget {
- padding-left: 1.6875rem;
+ padding-left: var(--dropbutton--height);
}
.dropbutton-widget {
position: relative;
width: 12.5rem;
- height: 1.6875rem;
- border-radius: 0.1875rem
+ height: var(--dropbutton--height);
+ border-radius: var(--border-radius)
}
@supports (width: max-content) {
@@ -63,11 +82,11 @@
}
.dropbutton {
- height: 1.6875rem;
+ height: var(--dropbutton--height);
margin-top: 0;
margin-bottom: 0;
list-style: none;
- font-size: 0.875rem;
+ font-size: var(--font-size-s);
}
[dir="ltr"] .dropbutton-toggle button {
@@ -84,32 +103,32 @@
display: flex;
align-items: center;
justify-content: center;
- width: 1.6875rem;
- height: 1.6875rem;
+ width: var(--dropbutton--height);
+ height: var(--dropbutton--height);
padding: 0;
cursor: pointer;
border-color: transparent;
- border-radius: 0 0.1875rem 0.1875rem 0; /* LTR */
- background: #e3e3e5
+ border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
+ background: var(--dropbutton--bg-color)
}
.dropbutton-toggle button:focus {
- outline: solid 2px #0d77b5;
+ outline: solid 2px var(--dropbutton--border-color);
outline-offset: -2px;
}
.dropbutton-toggle button:before {
display: block;
- width: 0.5625rem;
- height: 0.5625rem;
+ width: var(--sp0-5);
+ height: var(--sp0-5);
content: "";
transform: translateY(-25%) rotate(45deg);
- border-right: solid 2px #0d77b5;
- border-bottom: solid 2px #0d77b5;
+ border-right: solid 2px var(--dropbutton--border-color);
+ border-bottom: solid 2px var(--dropbutton--border-color);
}
[dir="rtl"] .dropbutton-toggle button {
- border-radius: 0.1875rem 0 0 0.1875rem;
+ border-radius: var(--border-radius) 0 0 var(--border-radius);
}
[dir="ltr"] .dropbutton-action:first-child {
@@ -122,8 +141,8 @@
.dropbutton-action:first-child {
border: solid 1px transparent;
- border-radius: 0.1875rem 0 0 0.1875rem; /* LTR */
- background: #e3e3e5;
+ border-radius: var(--border-radius) 0 0 var(--border-radius); /* LTR */
+ background: var(--dropbutton--bg-color);
}
.dropbutton-action a {
@@ -132,12 +151,12 @@
margin-bottom: -2px; /* Account for borders. */
padding: 0 0.5625rem;
text-decoration: none;
- color: #313637;
+ color: var(--color--gray-10);
font-weight: 600
}
.dropbutton-action a:focus {
- border: solid 2px #0d77b5;
+ border: solid 2px var(--dropbutton--border-color);
outline: 0
/* Negate specific IE rules. */
@@ -147,14 +166,14 @@
.dropbutton-action a:focus {
border: 0;
- outline: solid 2px #0d77b5;
+ outline: solid 2px var(--dropbutton--border-color);
outline-offset: -1px /* Overlap parent container by 1px. */
}
}
.dropbutton-single .dropbutton-action:first-child {
border-right: solid 1px transparent; /* LTR */
- border-radius: 0.1875rem;
+ border-radius: var(--border-radius);
}
.dropbutton-single .dropbutton-action a {
@@ -163,7 +182,7 @@
[dir="rtl"] .dropbutton-action:first-child {
border: solid 1px transparent;
- border-radius: 0 0.1875rem 0.1875rem 0;
+ border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
[dir="rtl"] .dropbutton-single .dropbutton-action:first-child {
@@ -172,14 +191,14 @@
.secondary-action {
visibility: hidden;
- width: calc(100% + 1.6875rem);
- border-right: 1px solid #e3e3e5;
- border-left: 1px solid #e3e3e5;
- background: #fff
+ width: calc(100% + var(--dropbutton--height));
+ border-right: 1px solid var(--dropbutton--bg-color);
+ border-left: 1px solid var(--dropbutton--bg-color);
+ background: var(--color--white)
}
.secondary-action:last-child {
- border-bottom: 1px solid #e3e3e5;
+ border-bottom: 1px solid var(--dropbutton--bg-color);
}
.dropbutton-wrapper.open .dropbutton-toggle button:before {
@@ -187,7 +206,7 @@
}
.dropbutton-wrapper.open .dropbutton-widget {
- border-radius: 0.1875rem 0.1875rem 0 0;
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.dropbutton-wrapper.open .secondary-action {
diff --git a/core/themes/olivero/css/components/dropbutton.pcss.css b/core/themes/olivero/css/components/dropbutton.pcss.css
index b217a67d1730b852e4a635040520e2335862a951..f58dfa988ec367184ce92c17c6bcae7968752168 100644
--- a/core/themes/olivero/css/components/dropbutton.pcss.css
+++ b/core/themes/olivero/css/components/dropbutton.pcss.css
@@ -3,7 +3,7 @@
* Dropbutton styles.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
:root {
--dropbutton--height: var(--sp1-5);
diff --git a/core/themes/olivero/css/components/embedded-media.css b/core/themes/olivero/css/components/embedded-media.css
index b3e564fba8a60d725041a42f82a126da4b0b2b52..d940ac710af5289e4201c162df5234dec837ceb2 100644
--- a/core/themes/olivero/css/components/embedded-media.css
+++ b/core/themes/olivero/css/components/embedded-media.css
@@ -10,58 +10,71 @@
* Embedded Media.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
figure {
- background: #f7f9fa;
+ background: var(--color--gray-95);
}
[dir="ltr"] figcaption {
- padding-left: 0.5625rem;
+ padding-left: var(--sp0-5);
}
[dir="rtl"] figcaption {
- padding-right: 0.5625rem;
+ padding-right: var(--sp0-5);
}
[dir="ltr"] figcaption {
- padding-right: 0.5625rem;
+ padding-right: var(--sp0-5);
}
[dir="rtl"] figcaption {
- padding-left: 0.5625rem;
+ padding-left: var(--sp0-5);
}
figcaption {
- padding-top: 0.5625rem;
- padding-bottom: 0.5625rem;
- color: #313637;
- background: #f7f9fa;
- font-family: "Lora", "georgia", serif;
+ padding-top: var(--sp0-5);
+ padding-bottom: var(--sp0-5);
+ color: var(--color--gray-10);
+ background: var(--color--gray-95);
+ font-family: var(--font-serif);
font-size: 0.875rem;
font-style: italic;
- line-height: 1.125rem
+ line-height: var(--sp)
}
@media (min-width: 31.25rem) {
[dir="ltr"] figcaption {
- padding-left: 1.125rem;
+ padding-left: var(--sp);
}
[dir="rtl"] figcaption {
- padding-right: 1.125rem;
+ padding-right: var(--sp);
}
[dir="ltr"] figcaption {
- padding-right: 1.125rem;
+ padding-right: var(--sp);
}
[dir="rtl"] figcaption {
- padding-left: 1.125rem;
+ padding-left: var(--sp);
}
figcaption {
- padding-top: 1.125rem;
- padding-bottom: 1.125rem
+ padding-top: var(--sp);
+ padding-bottom: var(--sp)
}
}
@@ -84,8 +97,8 @@ figcaption {
.align-right {
float: none; /* Override core's align.module.css. */
max-width: 100%;
- margin-top: 3.375rem;
- margin-bottom: 3.375rem
+ margin-top: var(--sp3);
+ margin-bottom: var(--sp3)
}
@media (min-width: 43.75rem) {
@@ -99,11 +112,11 @@ figcaption {
}
[dir="ltr"] .align-right {
- margin-left: 1.125rem;
+ margin-left: var(--sp);
}
[dir="rtl"] .align-right {
- margin-right: 1.125rem;
+ margin-right: var(--sp);
}
[dir="ltr"] .align-right {
@@ -116,8 +129,8 @@ figcaption {
.align-right {
max-width: 50%;
- margin-top: 1.125rem;
- margin-bottom: 1.125rem
+ margin-top: var(--sp);
+ margin-bottom: var(--sp)
}
}
@@ -127,12 +140,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
.layout--pass--content-narrow > * .align-right {
- margin-right: -7.14286vw;
+ margin-right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1);
}
[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
.layout--pass--content-narrow > * .align-right {
- margin-left: -7.14286vw;
+ margin-left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1);
}
}
@@ -140,12 +153,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
.layout--pass--content-narrow > * .align-right {
- margin-right: calc(-14.28571vw - -2.14286px);
+ margin-right: calc(var(--grid-col-width--lg)*-2 + var(--grid-gap--lg)*-2);
}
[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
.layout--pass--content-narrow > * .align-right {
- margin-left: calc(-14.28571vw - -2.14286px);
+ margin-left: calc(var(--grid-col-width--lg)*-2 + var(--grid-gap--lg)*-2);
}
}
@@ -153,12 +166,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
.layout--pass--content-narrow > * .align-right {
- margin-right: calc(-21.42857vw - -1.88839rem);
+ margin-right: calc(var(--grid-col-width--nav)*-3 + var(--grid-gap--nav)*-3);
}
[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
.layout--pass--content-narrow > * .align-right {
- margin-left: calc(-21.42857vw - -1.88839rem);
+ margin-left: calc(var(--grid-col-width--nav)*-3 + var(--grid-gap--nav)*-3);
}
}
@@ -166,12 +179,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
.layout--pass--content-narrow > * .align-right {
- margin-right: -17.59821rem;
+ margin-right: calc(var(--grid-col-width--max)*-3 + var(--grid-gap--max)*-3);
}
[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
.layout--pass--content-narrow > * .align-right {
- margin-left: -17.59821rem;
+ margin-left: calc(var(--grid-col-width--max)*-3 + var(--grid-gap--max)*-3);
}
}
@@ -194,8 +207,8 @@ figcaption {
.align-left {
float: none; /* Override core's align.module.css. */
max-width: 100%;
- margin-top: 3.375rem;
- margin-bottom: 3.375rem
+ margin-top: var(--sp3);
+ margin-bottom: var(--sp3)
}
@media (min-width: 43.75rem) {
@@ -217,17 +230,17 @@ figcaption {
}
[dir="ltr"] .align-left {
- margin-right: 2.25rem;
+ margin-right: var(--sp2);
}
[dir="rtl"] .align-left {
- margin-left: 2.25rem;
+ margin-left: var(--sp2);
}
.align-left {
max-width: 50%;
- margin-top: 1.125rem;
- margin-bottom: 1.125rem /* Extra right margins in case of aligning next to lists. */
+ margin-top: var(--sp);
+ margin-bottom: var(--sp) /* Extra right margins in case of aligning next to lists. */
}
}
@@ -237,12 +250,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"]
.layout--pass--content-narrow > * .align-left {
- margin-left: -7.14286vw;
+ margin-left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1);
}
[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"]
.layout--pass--content-narrow > * .align-left {
- margin-right: -7.14286vw;
+ margin-right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1);
}
}
@@ -250,12 +263,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"]
.layout--pass--content-narrow > * .align-left {
- margin-left: calc(-7.14286vw - -1.07143px);
+ margin-left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1);
}
[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"]
.layout--pass--content-narrow > * .align-left {
- margin-right: calc(-7.14286vw - -1.07143px);
+ margin-right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1);
}
}
@@ -263,12 +276,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"]
.layout--pass--content-narrow > * .align-left {
- margin-left: calc(-7.14286vw - -0.62946rem);
+ margin-left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1);
}
[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"]
.layout--pass--content-narrow > * .align-left {
- margin-right: calc(-7.14286vw - -0.62946rem);
+ margin-right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1);
}
}
@@ -276,12 +289,12 @@ figcaption {
[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"]
.layout--pass--content-narrow > * .align-left {
- margin-left: -5.86607rem;
+ margin-left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1);
}
[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"]
.layout--pass--content-narrow > * .align-left {
- margin-right: -5.86607rem;
+ margin-right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1);
}
}
diff --git a/core/themes/olivero/css/components/embedded-media.pcss.css b/core/themes/olivero/css/components/embedded-media.pcss.css
index fccc8c0d6b98b71b8843154f1849f9e8011a3111..8e0c54c51f95ae57472f979f81364ffee40abc52 100644
--- a/core/themes/olivero/css/components/embedded-media.pcss.css
+++ b/core/themes/olivero/css/components/embedded-media.pcss.css
@@ -3,7 +3,7 @@
* Embedded Media.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
figure {
background: var(--color--gray-95);
diff --git a/core/themes/olivero/css/components/feed.css b/core/themes/olivero/css/components/feed.css
index b631f7634e0670a19d2acedccaddf4ab41530126..4e66fb2c3c2999140ad42cb125475d446f4595bd 100644
--- a/core/themes/olivero/css/components/feed.css
+++ b/core/themes/olivero/css/components/feed.css
@@ -10,30 +10,43 @@
* RSS feed.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.feed-icon {
display: flex;
align-items: center;
text-decoration: none;
- color: #5d7585
+ color: var(--color--gray-25)
}
.feed-icon:hover {
- color: #2494db;
+ color: var(--color--blue-50);
}
.feed-icon__label {
flex-shrink: 0;
letter-spacing: 0.08em;
- font-size: 0.75rem;
+ font-size: var(--font-size-xxs);
font-weight: 600;
}
[dir="ltr"] .feed-icon__icon {
- margin-left: 0.5625rem
+ margin-left: var(--sp0-5)
}
[dir="rtl"] .feed-icon__icon {
- margin-right: 0.5625rem
+ margin-right: var(--sp0-5)
}
.feed-icon__icon {
@@ -41,10 +54,10 @@
flex-shrink: 0;
align-items: center;
justify-content: center;
- width: 1.6875rem;
- height: 1.6875rem;
- color: #fff;
- background-color: #2494db
+ width: var(--sp1-5);
+ height: var(--sp1-5);
+ color: var(--color--white);
+ background-color: var(--color--blue-50)
}
.feed-icon__icon svg {
diff --git a/core/themes/olivero/css/components/feed.pcss.css b/core/themes/olivero/css/components/feed.pcss.css
index b3324b131ec8bfe4ce2a758f310ddf4516867240..fa78eaa1f8f577f7c152014f4297f765a4f6a257 100644
--- a/core/themes/olivero/css/components/feed.pcss.css
+++ b/core/themes/olivero/css/components/feed.pcss.css
@@ -3,7 +3,7 @@
* RSS feed.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.feed-icon {
display: flex;
diff --git a/core/themes/olivero/css/components/field.css b/core/themes/olivero/css/components/field.css
index 858940c64c9044ffb6d716988fd9e15345d44bc2..4603241fc2382d49c452e81be50c35f7e1af5c75 100644
--- a/core/themes/olivero/css/components/field.css
+++ b/core/themes/olivero/css/components/field.css
@@ -10,12 +10,25 @@
* Visual styles for fields.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.field:not(:last-child) {
- margin-bottom: 2.25rem;
+ margin-bottom: var(--sp2);
}
.node--view-mode-teaser .field {
- margin-bottom: 1.125rem
+ margin-bottom: var(--sp)
}
.node--view-mode-teaser .field:last-child {
@@ -25,7 +38,7 @@
@media (min-width: 62.5rem) {
.node--view-mode-teaser .field {
- margin-bottom: 2.25rem
+ margin-bottom: var(--sp2)
}
}
diff --git a/core/themes/olivero/css/components/field.pcss.css b/core/themes/olivero/css/components/field.pcss.css
index bfe37b0cbbaa94b0c2cf97c825f080d8952ce47f..f1733b7aee9b63cf12238ff8388d77228374c20d 100644
--- a/core/themes/olivero/css/components/field.pcss.css
+++ b/core/themes/olivero/css/components/field.pcss.css
@@ -3,7 +3,7 @@
* Visual styles for fields.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.field:not(:last-child) {
margin-block-end: var(--sp2);
diff --git a/core/themes/olivero/css/components/fieldset.css b/core/themes/olivero/css/components/fieldset.css
index 679eb821d574868ba6914191e6b7f51793aec1a0..8969a3e5d097049ee714ca45bf1d9a3847217ef9 100644
--- a/core/themes/olivero/css/components/fieldset.css
+++ b/core/themes/olivero/css/components/fieldset.css
@@ -10,6 +10,19 @@
* Fieldset.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .fieldset {
margin-left: 0;
}
@@ -44,14 +57,14 @@
.fieldset {
min-width: 0;
- margin-top: 1.125rem;
- margin-bottom: 1.125rem;
+ margin-top: var(--sp1);
+ margin-bottom: var(--sp1);
padding-top: 0;
padding-bottom: 0;
color: inherit;
- border: solid 2px #5d7585;
- border-radius: 0.1875rem;
- background-color: #fff;
+ border: solid 2px var(--color--gray-25);
+ border-radius: var(--border-radius);
+ background-color: var(--color--white);
}
.fieldset--group {
@@ -76,12 +89,12 @@ _:-ms-fullscreen,
float: left; /* Prevent sticking out of top of fieldset. */
width: 100%;
color: inherit;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- background-color: #5d7585;
- font-size: 1.125rem;
+ border-top-left-radius: var(--border-radius);
+ border-top-right-radius: var(--border-radius);
+ background-color: var(--color--gray-25);
+ font-size: var(--font-size-l);
font-weight: 700;
- line-height: 1.6875rem
+ line-height: var(--line-height-base)
}
.fieldset__legend + * {
@@ -106,38 +119,38 @@ _:-ms-fullscreen,
}
[dir="ltr"] .fieldset__label {
- padding-left: 1.125rem;
+ padding-left: var(--sp1);
}
[dir="rtl"] .fieldset__label {
- padding-right: 1.125rem;
+ padding-right: var(--sp1);
}
[dir="ltr"] .fieldset__label {
- padding-right: 1.125rem;
+ padding-right: var(--sp1);
}
[dir="rtl"] .fieldset__label {
- padding-left: 1.125rem;
+ padding-left: var(--sp1);
}
.fieldset__label {
display: block;
- padding-top: 0.5625rem;
- padding-bottom: 0.5625rem;
- color: #fff;
- line-height: 1.125rem;
+ padding-top: var(--sp0-5);
+ padding-bottom: var(--sp0-5);
+ color: var(--color--white);
+ line-height: var(--line-height-s);
}
.fieldset__label.is-disabled {
- color: #5d7585;
+ color: var(--color--gray-25);
}
.fieldset__description {
- margin-top: 0.5625rem;
- margin-bottom: 0.5625rem;
- font-size: 0.8125rem;
- line-height: 1.125rem;
+ margin-top: var(--sp0-5);
+ margin-bottom: var(--sp0-5);
+ font-size: var(--font-size-xs);
+ line-height: var(--line-height-s);
}
.fieldset__description.is-disabled {
@@ -145,23 +158,23 @@ _:-ms-fullscreen,
}
[dir="ltr"] .fieldset__error-message {
- padding-left: 1.6875rem;
+ padding-left: var(--sp1-5);
}
[dir="rtl"] .fieldset__error-message {
- padding-right: 1.6875rem;
+ padding-right: var(--sp1-5);
}
.fieldset__error-message {
- margin-top: 0.5625rem;
- margin-bottom: 0.5625rem;
- color: #e33f1e;
+ margin-top: var(--sp0-5);
+ margin-bottom: var(--sp0-5);
+ color: var(--color--red);
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left top; /* LTR */
- background-size: 1.125rem 1.125rem;
- font-size: 0.875rem;
- line-height: 1.125rem
+ background-size: var(--sp1) var(--sp1);
+ font-size: var(--font-size-s);
+ line-height: var(--line-height-s)
}
@media screen and (-ms-high-contrast: active) {
@@ -176,7 +189,7 @@ _:-ms-fullscreen,
}
.fieldset__wrapper {
- padding: 1.125rem;
+ padding: var(--sp);
}
.fieldset__legend--invisible ~ .fieldset__wrapper {
@@ -185,9 +198,9 @@ _:-ms-fullscreen,
}
.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
- border: solid 2px #5d7585;
- border-bottom-right-radius: 3px;
- border-bottom-left-radius: 3px;
+ border: solid 2px var(--color--gray-25);
+ border-bottom-right-radius: var(--border-radius);
+ border-bottom-left-radius: var(--border-radius);
}
[dir="ltr"] .fieldset__wrapper--group {
diff --git a/core/themes/olivero/css/components/fieldset.pcss.css b/core/themes/olivero/css/components/fieldset.pcss.css
index 35a70b2738f3343c4a6e9ffd03a2e2828df84e8f..a126e8e5b3fe6e6aab59c8f67991c6d847f660bf 100644
--- a/core/themes/olivero/css/components/fieldset.pcss.css
+++ b/core/themes/olivero/css/components/fieldset.pcss.css
@@ -3,7 +3,7 @@
* Fieldset.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.fieldset {
min-width: 0;
diff --git a/core/themes/olivero/css/components/footer.css b/core/themes/olivero/css/components/footer.css
index e4e4119f0a4ef32505feba96af258f8a6e2d06d6..3ccc72dc886d441f30f71fd161c55bb4d484fb96 100644
--- a/core/themes/olivero/css/components/footer.css
+++ b/core/themes/olivero/css/components/footer.css
@@ -10,10 +10,23 @@
* Footer regions.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.site-footer {
position: relative; /* stack above left social bar */
- color: #9ea0a1;
- background: linear-gradient(180deg, #0c0d0e 0%, #171e23 100%)
+ color: var(--color--gray-50);
+ background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-8) 100%)
}
[dir="ltr"] .site-footer .menu {
@@ -29,15 +42,15 @@
}
[dir="ltr"] .site-footer .menu ul {
- margin-left: 1.125rem
+ margin-left: var(--sp)
}
[dir="rtl"] .site-footer .menu ul {
- margin-right: 1.125rem
+ margin-right: var(--sp)
}
.site-footer .menu li {
- margin-bottom: 0.5625rem;
+ margin-bottom: var(--sp0-5);
}
.site-footer a {
@@ -50,9 +63,9 @@
@media (min-width: 75rem) {
[dir="ltr"] body:not(.is-always-mobile-nav) .site-footer {
- border-left: solid 90px #000
+ border-left: solid var(--content-left) var(--color--black)
}
[dir="rtl"] body:not(.is-always-mobile-nav) .site-footer {
- border-right: solid 90px #000
+ border-right: solid var(--content-left) var(--color--black)
}
}
diff --git a/core/themes/olivero/css/components/footer.pcss.css b/core/themes/olivero/css/components/footer.pcss.css
index 898a130b2f9e96847e50ba73cc056b9509fb11ae..3be3eaf5bfb51ed4e41544dff2ddb22ce3080c92 100644
--- a/core/themes/olivero/css/components/footer.pcss.css
+++ b/core/themes/olivero/css/components/footer.pcss.css
@@ -3,7 +3,7 @@
* Footer regions.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.site-footer {
position: relative; /* stack above left social bar */
diff --git a/core/themes/olivero/css/components/form-boolean.css b/core/themes/olivero/css/components/form-boolean.css
index a8dcaf6b102ede46c78ff02936e99ebe81a4d53f..d551d2a7187ca2948c0a941020f70e7a0c4027af 100644
--- a/core/themes/olivero/css/components/form-boolean.css
+++ b/core/themes/olivero/css/components/form-boolean.css
@@ -10,27 +10,40 @@
* Checkbox and radio input elements.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
input[type="checkbox"],
input[type="radio"] {
display: inline-block;
- width: 1.6875rem;
- height: 1.6875rem;
+ width: var(--sp1-5);
+ height: var(--sp1-5);
margin: 0;
vertical-align: middle;
- border: 1px solid #7e96a7;
+ border: 1px solid var(--color--gray-30);
border-radius: 0.1875rem;
- background-color: #fff;
+ background-color: var(--color--white);
background-repeat: no-repeat;
background-position: 50% 50%;
- background-size: 1.125rem 1.125rem;
+ background-size: var(--sp1) var(--sp1);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
input[type="checkbox"]:focus, input[type="radio"]:focus {
- border: solid 2px #2494db;
- outline: solid 2px #2494db
+ border: solid 2px var(--color--blue-50);
+ outline: solid 2px var(--color--blue-50)
}
@supports (outline-style: double) {
@@ -44,15 +57,15 @@ input[type="checkbox"]:focus, input[type="radio"]:focus {
}
input[type="checkbox"]:hover, input[type="radio"]:hover {
- border-color: #53b0eb;
+ border-color: var(--color--blue-70);
}
input[type="checkbox"][disabled], input[type="radio"][disabled] {
- background-color: #f1f4f7
+ background-color: var(--color--gray-90)
}
input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover {
- border-color: #7e96a7;
+ border-color: var(--color--gray-30);
}
input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked {
@@ -64,11 +77,11 @@ input[type="checkbox"]:checked, input[type="radio"]:checked {
}
input[type="checkbox"].error, input[type="radio"].error {
- border: solid 2px #e33f1e
+ border: solid 2px var(--color--red)
}
input[type="checkbox"].error:focus, input[type="radio"].error:focus {
- outline-color: #e33f1e;
+ outline-color: var(--color--red);
outline-offset: -2px;
}
@@ -79,15 +92,15 @@ input[type="radio"] {
}
input[type="checkbox"].error::-ms-check, input[type="radio"].error::-ms-check {
- border: 1px solid #e33f1e;
+ border: 1px solid var(--color--red);
}
[dir="ltr"] input[type="checkbox"] + label,[dir="ltr"] input[type="radio"] + label {
- padding-left: 0.5625rem
+ padding-left: var(--sp0-5)
}
[dir="rtl"] input[type="checkbox"] + label,[dir="rtl"] input[type="radio"] + label {
- padding-right: 0.5625rem
+ padding-right: var(--sp0-5)
}
input[type="checkbox"] + label, input[type="radio"] + label {
@@ -109,17 +122,17 @@ input[type="radio"]:checked {
input[type="radio"]:focus {
border-width: 2px;
- border-color: #2494db;
+ border-color: var(--color--blue-50);
outline-color: transparent;
- box-shadow: 0 0 0 2px white, 0 0 0 4px #2494db;
+ box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--blue-50);
}
input[type="radio"].error:focus {
outline-color: transparent;
- box-shadow: 0 0 0 2px white, 0 0 0 4px #e33f1e;
+ box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red);
}
.form-type-boolean {
- margin-top: 1.125rem;
- margin-bottom: 1.125rem;
+ margin-top: var(--sp1);
+ margin-bottom: var(--sp1);
}
diff --git a/core/themes/olivero/css/components/form-boolean.pcss.css b/core/themes/olivero/css/components/form-boolean.pcss.css
index 47ce727a15362bff1f4b250dda2a56f70aef2e22..8210e3b7341dfdd60206c11e663861b0db7198a4 100644
--- a/core/themes/olivero/css/components/form-boolean.pcss.css
+++ b/core/themes/olivero/css/components/form-boolean.pcss.css
@@ -3,7 +3,7 @@
* Checkbox and radio input elements.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
input[type="checkbox"],
input[type="radio"] {
diff --git a/core/themes/olivero/css/components/form-select.css b/core/themes/olivero/css/components/form-select.css
index e51b026e5d7e2b3b2e60bedce250d6a6eb6e8912..9a0e1ea16865f0a4757ab59e0a9f739bc5e3b5e7 100644
--- a/core/themes/olivero/css/components/form-select.css
+++ b/core/themes/olivero/css/components/form-select.css
@@ -10,34 +10,51 @@
* Select input elements.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+:root {
+ --form-element-select-icon: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e");
+}
+
[dir="ltr"] select {
- padding-left: 1.125rem
+ padding-left: var(--sp);
}
[dir="rtl"] select {
- padding-right: 1.125rem
+ padding-right: var(--sp);
}
[dir="ltr"] select {
- padding-right: 3.375rem
+ padding-right: var(--sp3);
}
[dir="rtl"] select {
- padding-left: 3.375rem
+ padding-left: var(--sp3);
}
select {
max-width: 100%;
- height: 3.375rem;
+ height: var(--sp3);
padding-top: 0;
padding-bottom: 0;
- color: #0d1214;
- border: 1px solid #7e96a7;
- border-radius: 0.1875rem;
- background-color: #fff;
- background-image: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e");
+ color: var(--color--gray-0);
+ border: 1px solid var(--color--gray-30);
+ border-radius: var(--border-radius);
+ background-color: var(--color--white);
+ background-image: var(--form-element-select-icon);
background-repeat: no-repeat;
- background-position: right 18px center; /* LTR */
+ background-position: right var(--sp) center; /* LTR */
font-family: inherit;
font-size: inherit;
-webkit-appearance: none;
@@ -46,8 +63,8 @@ select {
}
select:focus {
- border: solid 2px #2494db;
- outline: solid 2px #2494db
+ border: solid 2px var(--color--blue-50);
+ outline: solid 2px var(--color--blue-50)
}
@supports (outline-style: double) {
@@ -70,31 +87,31 @@ select::-ms-expand {
}
select[disabled] {
- color: #7e96a7;
- background-color: #f1f4f7;
+ color: var(--color--gray-30);
+ background-color: var(--color--gray-90);
}
select.error {
- border: solid 2px #e33f1e
+ border: solid 2px var(--color--red)
}
select.error:focus {
- outline-color: #e33f1e;
+ outline-color: var(--color--red);
}
select[multiple] {
height: auto;
- padding: 0.5625rem;
+ padding: var(--sp0-5);
background-image: none;
line-height: 1 /* Needed by non-Chromium based MS Edge browsers. */
}
select[multiple] option {
- padding: 0.5625rem;
+ padding: var(--sp0-5);
}
select.form-element--small {
- height: 2.8125rem;
+ height: var(--sp2-5);
}
select {
@@ -105,11 +122,11 @@ select {
@media (forced-colors: active) {
[dir="ltr"] select {
- padding-right: 1.125rem
+ padding-right: var(--sp);
}
[dir="rtl"] select {
- padding-left: 1.125rem
+ padding-left: var(--sp);
}
select {
@@ -138,11 +155,11 @@ select {
@media screen and (-ms-high-contrast: active) {
[dir="ltr"] select {
- padding-right: 0
+ padding-right: 0;
}
[dir="rtl"] select {
- padding-left: 0
+ padding-left: 0;
}
select {
@@ -155,5 +172,5 @@ select {
}
[dir="rtl"] select {
- background-position: left 18px center;
+ background-position: left var(--sp) center;
}
diff --git a/core/themes/olivero/css/components/form-select.pcss.css b/core/themes/olivero/css/components/form-select.pcss.css
index 87eba9ab62790893fb012d3c8367070b63b10e30..218e383a7d3c4f890af7e3227dee7527495485e2 100644
--- a/core/themes/olivero/css/components/form-select.pcss.css
+++ b/core/themes/olivero/css/components/form-select.pcss.css
@@ -3,7 +3,7 @@
* Select input elements.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
:root {
--form-element-select-icon: url("../../images/chevron-down.svg");
diff --git a/core/themes/olivero/css/components/form-text.css b/core/themes/olivero/css/components/form-text.css
index 81f0ff005675f96b80feb34f2e829593d3257fc8..51f8050fdbb40a837ac5b75493e663419295f94a 100644
--- a/core/themes/olivero/css/components/form-text.css
+++ b/core/themes/olivero/css/components/form-text.css
@@ -10,6 +10,19 @@
* Text input elements.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[type="color"],
[type="date"],
[type="datetime-local"],
@@ -27,12 +40,12 @@
textarea {
width: 100%;
max-width: 100%;
- min-height: 3.375rem;
- padding: 0 1.125rem;
- color: #0d1214;
- border: 1px solid #7e96a7;
- border-radius: 0.1875rem;
- background-color: #fff;
+ min-height: var(--sp3);
+ padding: 0 var(--sp);
+ color: var(--color--gray-0);
+ border: 1px solid var(--color--gray-30);
+ border-radius: var(--border-radius);
+ background-color: var(--color--white);
font-family: inherit;
font-size: inherit;
-webkit-appearance: none;
@@ -41,8 +54,8 @@ textarea {
}
[type="color"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="email"]:focus, [type="file"]:focus, [type="month"]:focus, [type="number"]:focus, [type="password"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="text"]:focus, [type="time"]:focus, [type="url"]:focus, [type="week"]:focus, textarea:focus {
- border: solid 2px #2494db;
- outline: solid 2px #2494db
+ border: solid 2px var(--color--blue-50);
+ outline: solid 2px var(--color--blue-50)
}
@supports (outline-style: double) {
@@ -60,21 +73,21 @@ textarea {
}
[type="color"][disabled], [type="date"][disabled], [type="datetime-local"][disabled], [type="email"][disabled], [type="file"][disabled], [type="month"][disabled], [type="number"][disabled], [type="password"][disabled], [type="search"][disabled], [type="tel"][disabled], [type="text"][disabled], [type="time"][disabled], [type="url"][disabled], [type="week"][disabled], textarea[disabled] {
- color: #7e96a7;
- background-color: #f1f4f7;
+ color: var(--color--gray-30);
+ background-color: var(--color--gray-90);
}
[type="color"].error, [type="date"].error, [type="datetime-local"].error, [type="email"].error, [type="file"].error, [type="month"].error, [type="number"].error, [type="password"].error, [type="search"].error, [type="tel"].error, [type="text"].error, [type="time"].error, [type="url"].error, [type="week"].error, textarea.error {
- border: solid 2px #e33f1e
+ border: solid 2px var(--color--red)
}
[type="color"].error:focus, [type="date"].error:focus, [type="datetime-local"].error:focus, [type="email"].error:focus, [type="file"].error:focus, [type="month"].error:focus, [type="number"].error:focus, [type="password"].error:focus, [type="search"].error:focus, [type="tel"].error:focus, [type="text"].error:focus, [type="time"].error:focus, [type="url"].error:focus, [type="week"].error:focus, textarea.error:focus {
- outline-color: #e33f1e;
+ outline-color: var(--color--red);
outline-offset: -2px;
}
[type="color"].form-element--small, [type="date"].form-element--small, [type="datetime-local"].form-element--small, [type="email"].form-element--small, [type="file"].form-element--small, [type="month"].form-element--small, [type="number"].form-element--small, [type="password"].form-element--small, [type="search"].form-element--small, [type="tel"].form-element--small, [type="text"].form-element--small, [type="time"].form-element--small, [type="url"].form-element--small, [type="week"].form-element--small, textarea.form-element--small {
- min-height: 2.8125rem;
+ min-height: var(--sp2-5);
}
@media (min-width: 31.25rem) {
@@ -125,11 +138,11 @@ textarea {
[type="file"] {
height: auto;
- padding-top: 0.84375rem;
- padding-bottom: 0.84375rem;
+ padding-top: var(--sp0-75);
+ padding-bottom: var(--sp0-75);
}
[type="color"] {
- width: 3.375rem;
+ width: var(--sp3);
padding: 0;
}
diff --git a/core/themes/olivero/css/components/form-text.pcss.css b/core/themes/olivero/css/components/form-text.pcss.css
index 7c6c3523395e5db6dddef5d5c72bf301b7e5877a..3653dfa9b4f0ebab5baf5078cae18f7af1b93cc6 100644
--- a/core/themes/olivero/css/components/form-text.pcss.css
+++ b/core/themes/olivero/css/components/form-text.pcss.css
@@ -3,7 +3,7 @@
* Text input elements.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
[type="color"],
[type="date"],
diff --git a/core/themes/olivero/css/components/form-textarea.css b/core/themes/olivero/css/components/form-textarea.css
index 6af8ae07abd786f45063a648273350c90da62b0d..9efbb5cdf8addcc5c6bab29479cdf9def581067a 100644
--- a/core/themes/olivero/css/components/form-textarea.css
+++ b/core/themes/olivero/css/components/form-textarea.css
@@ -10,9 +10,22 @@
* Textarea.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
textarea {
display: block;
width: 100%;
- min-height: 9rem;
- padding: 1.125rem;
+ min-height: var(--sp8);
+ padding: var(--sp);
}
diff --git a/core/themes/olivero/css/components/form-textarea.pcss.css b/core/themes/olivero/css/components/form-textarea.pcss.css
index 89dbf12b4b6e076b1a19c7bb01d41958fc2f3a03..5ca1567e3f5b94e67b48166556419e0f5f778a48 100644
--- a/core/themes/olivero/css/components/form-textarea.pcss.css
+++ b/core/themes/olivero/css/components/form-textarea.pcss.css
@@ -3,7 +3,7 @@
* Textarea.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
textarea {
display: block;
diff --git a/core/themes/olivero/css/components/form.css b/core/themes/olivero/css/components/form.css
index 694cc81e172de2297d80234867b179b95a223000..70b3308e1629c89ad2175c63faf0aec1a364219c 100644
--- a/core/themes/olivero/css/components/form.css
+++ b/core/themes/olivero/css/components/form.css
@@ -10,18 +10,27 @@
* Main form and form item styles.
*/
-:-ms-input-placeholder {
- color: #7e96a7;
-}
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
::placeholder {
- color: #7e96a7;
+ color: var(--color--gray-30);
}
/* IE 10 and 11 needs this set as important. */
:-ms-input-placeholder {
- color: #7e96a7 !important;
+ color: var(--color--gray-30) !important;
}
/**
@@ -29,8 +38,8 @@
*/
.form-item {
- margin-top: 1.125rem;
- margin-bottom: 1.125rem;
+ margin-top: var(--sp1);
+ margin-bottom: var(--sp1);
}
.form-item__label--multiple-value-form {
@@ -49,8 +58,8 @@
tr .form-item,
.container-inline .form-item {
- margin-top: 0.5625rem;
- margin-bottom: 0.5625rem;
+ margin-top: var(--sp0-5);
+ margin-bottom: var(--sp0-5);
}
/**
@@ -59,8 +68,8 @@ tr .form-item,
.form-item__label {
display: block;
- margin-top: 0.5625rem;
- margin-bottom: 0.5625rem;
+ margin-top: var(--sp0-5);
+ margin-bottom: var(--sp0-5);
}
[dir="ltr"] .container-inline .form-item__label {
@@ -92,7 +101,7 @@ tr .form-item,
.form-item__label.is-disabled {
cursor: default;
- color: #afb8be;
+ color: var(--color--gray-45);
}
/* Form required star icon */
@@ -127,11 +136,11 @@ tr .form-item,
*/
.form-item__description {
- margin-top: 0.5625rem;
- margin-bottom: 0.5625rem;
+ margin-top: var(--sp0-5);
+ margin-bottom: var(--sp0-5);
max-width: 60ch;
- font-size: 0.875rem;
- line-height: 1.125rem;
+ font-size: var(--font-size-s);
+ line-height: var(--line-height-s);
}
.field-multiple-table + .form-item__description {
@@ -143,23 +152,23 @@ tr .form-item,
*/
[dir="ltr"] .form-item--error-message {
- padding-left: 1.6875rem;
+ padding-left: var(--sp1-5);
}
[dir="rtl"] .form-item--error-message {
- padding-right: 1.6875rem;
+ padding-right: var(--sp1-5);
}
.form-item--error-message {
- margin-top: 0.5625rem;
- margin-bottom: 0.5625rem;
- color: #e33f1e;
+ margin-top: var(--sp0-5);
+ margin-bottom: var(--sp0-5);
+ color: var(--color--red);
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left top; /* LTR */
- background-size: 1.125rem 1.125rem;
- font-size: 0.875rem;
- line-height: 1.125rem
+ background-size: var(--sp1) var(--sp1);
+ font-size: var(--font-size-s);
+ line-height: var(--line-height-s)
}
@media screen and (-ms-high-contrast: active) {
@@ -181,18 +190,17 @@ tr .form-item,
display: flex;
flex-wrap: wrap;
align-items: flex-start;
- margin-top: 0.5625rem;
- margin-bottom: 0.5625rem;
+ margin-top: var(--sp0-5);
+ margin-bottom: var(--sp0-5);
}
.form-actions .button,
.form-actions .action-link {
- margin-top: 0.5625rem;
- margin-bottom: 0.5625rem;
+ margin-top: var(--sp0-5);
+ margin-bottom: var(--sp0-5);
}
.form-actions .ajax-progress--throbber {
- -ms-grid-row-align: center;
align-self: center;
}
@@ -217,13 +225,13 @@ tr .form-item,
[dir="ltr"] .form-item--editor-format .form-item__label,[dir="ltr"]
.form-item--editor-format .form-item__prefix,[dir="ltr"]
.form-item--editor-format .form-item__suffix {
- margin-right: 0.5625rem;
+ margin-right: var(--sp0-5);
}
[dir="rtl"] .form-item--editor-format .form-item__label,[dir="rtl"]
.form-item--editor-format .form-item__prefix,[dir="rtl"]
.form-item--editor-format .form-item__suffix {
- margin-left: 0.5625rem;
+ margin-left: var(--sp0-5);
}
.form-item--editor-format .form-item__description,
@@ -238,7 +246,7 @@ tr .form-item,
.form--inline > * {
display: inline-block;
- margin-top: 0.5625rem;
+ margin-top: var(--sp0-5);
margin-bottom: 0;
vertical-align: top; /* Ensure proper alignment if description is present. */
}
@@ -248,5 +256,5 @@ tr .form-item,
}
.form--inline .form-actions {
- margin-top: 1.6875rem;
+ margin-top: var(--sp1-5);
}
diff --git a/core/themes/olivero/css/components/form.pcss.css b/core/themes/olivero/css/components/form.pcss.css
index 18b44e7d51ef7dc7e4b923bfc22360fafa012570..606968ac6c9649e057f969cbe787c3fa67970108 100644
--- a/core/themes/olivero/css/components/form.pcss.css
+++ b/core/themes/olivero/css/components/form.pcss.css
@@ -3,7 +3,7 @@
* Main form and form item styles.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
::placeholder {
color: var(--color--gray-30);
diff --git a/core/themes/olivero/css/components/forum.css b/core/themes/olivero/css/components/forum.css
index 9226d4e52f245c20e59be6b59423acd769d99e99..90ce2ea1bfc9c7c9cf4bcc384a11cea36ff3c02b 100644
--- a/core/themes/olivero/css/components/forum.css
+++ b/core/themes/olivero/css/components/forum.css
@@ -10,6 +10,19 @@
* Forum specific styles.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.forum table {
width: 100%;
}
@@ -17,6 +30,6 @@
.forum__name--link,
.forum__last-reply a,
.forum__title a {
- color: #0d77b5;
+ color: var(--color--blue-20);
font-weight: bold;
}
diff --git a/core/themes/olivero/css/components/forum.pcss.css b/core/themes/olivero/css/components/forum.pcss.css
index 23e1b0ff7c3ed0363075a55a631a220cdae1dbfa..dcef442d5c9661c74319d54659b8f451f994eda7 100644
--- a/core/themes/olivero/css/components/forum.pcss.css
+++ b/core/themes/olivero/css/components/forum.pcss.css
@@ -3,7 +3,7 @@
* Forum specific styles.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.forum {
& table {
diff --git a/core/themes/olivero/css/components/header-buttons-mobile.css b/core/themes/olivero/css/components/header-buttons-mobile.css
index 58793fda139ece60e8db6fc8c6c10ddbdeb4bc19..abf86796a97f23cbe6dae918358337cccbc4b205 100644
--- a/core/themes/olivero/css/components/header-buttons-mobile.css
+++ b/core/themes/olivero/css/components/header-buttons-mobile.css
@@ -10,6 +10,19 @@
* Header Mobile Buttons.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .mobile-buttons {
margin-left: auto
}
@@ -19,27 +32,27 @@
}
.mobile-buttons {
- margin-top: 0.5625rem
+ margin-top: var(--sp0-5)
}
@media (min-width: 31.25rem) {
.mobile-buttons {
- margin-top: 2.25rem
+ margin-top: var(--sp2)
}
}
@media (min-width: 43.75rem) {
.mobile-buttons {
- margin-top: 4.5rem
+ margin-top: var(--sp4)
}
}
@media (min-width: 75rem) {
.mobile-buttons {
- margin-top: 6.75rem
+ margin-top: var(--sp6)
}
}
diff --git a/core/themes/olivero/css/components/header-buttons-mobile.pcss.css b/core/themes/olivero/css/components/header-buttons-mobile.pcss.css
index 9958d80b1b748a5d8c986e51036135db71a3b633..4cf6bbe21167c8357da494b2981f3dcaff733960 100644
--- a/core/themes/olivero/css/components/header-buttons-mobile.pcss.css
+++ b/core/themes/olivero/css/components/header-buttons-mobile.pcss.css
@@ -3,7 +3,7 @@
* Header Mobile Buttons.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.mobile-buttons {
margin-block-start: var(--sp0-5);
diff --git a/core/themes/olivero/css/components/header-navigation.css b/core/themes/olivero/css/components/header-navigation.css
index 30b13511735cf1313cac86c1b1748931b8105e55..6154aa66126c44da89f35c7dcb46e284f89a8957 100644
--- a/core/themes/olivero/css/components/header-navigation.css
+++ b/core/themes/olivero/css/components/header-navigation.css
@@ -10,6 +10,19 @@
* Navigation in header.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .header-nav {
left: 100%
}
@@ -19,19 +32,19 @@
}
[dir="ltr"] .header-nav {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
[dir="rtl"] .header-nav {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="ltr"] .header-nav {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="rtl"] .header-nav {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
.header-nav {
@@ -45,12 +58,12 @@
flex-basis: 0;
flex-grow: 1; /* Necessary for IE11. */
width: 100%;
- max-width: 31.25rem;
+ max-width: var(--mobile-nav-width);
height: 100%;
padding-top: 0;
- padding-bottom: 1.125rem;
- border-top: solid #fff 54px; /* Create room for the "close" button. */
- background-color: #fff;
+ padding-bottom: var(--sp);
+ border-top: solid var(--color--white) var(--sp3); /* Create room for the "close" button. */
+ background-color: var(--color--white);
box-shadow: 0 0 72px rgba(0, 0, 0, 0.1)
}
@@ -69,31 +82,29 @@
@media (min-width: 31.25rem) {
.header-nav {
- border-top-width: 90px
+ border-top-width: var(--sp5)
}
}
@media (min-width: 43.75rem) {
[dir="ltr"] .header-nav {
- padding-left: 3.375rem
+ padding-left: var(--sp3)
}
[dir="rtl"] .header-nav {
- padding-right: 3.375rem
+ padding-right: var(--sp3)
}
.header-nav {
- padding-bottom: 3.375rem;
- border-top-width: 126px
+ padding-bottom: var(--sp3);
+ border-top-width: var(--sp7)
}
}
@media (min-width: 62.5rem) {
.header-nav {
- -ms-grid-column: 5;
- -ms-grid-column-span: 9;
grid-column: 5 / 14
}
}
@@ -110,13 +121,13 @@ html.js .header-nav {
/* Toolbar is fixed, and tray is vertical. */
body.toolbar-vertical .header-nav {
- border-top-width: 93px
+ border-top-width: calc(var(--toolbar-height) + var(--sp3))
}
@media (min-width: 31.25rem) {
body.toolbar-vertical .header-nav {
- border-top-width: 129px
+ border-top-width: calc(var(--toolbar-height) + var(--sp5))
}
}
@@ -126,7 +137,7 @@ body.toolbar-vertical .header-nav {
body.toolbar-vertical .header-nav,
body.toolbar-horizontal.toolbar-fixed .header-nav {
- border-top-width: 165px
+ border-top-width: calc(var(--toolbar-height) + var(--sp7))
}
}
@@ -135,7 +146,7 @@ body.toolbar-horizontal.toolbar-fixed .header-nav {
@media (min-width: 43.75rem) {
body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {
- border-top-width: 205px
+ border-top-width: calc(var(--toolbar-height) + var(--toolbar-tray-height) + var(--sp7))
}
}
@@ -162,13 +173,11 @@ body:not(.is-always-mobile-nav) .header-nav {
display: flex;
visibility: visible;
overflow: visible;
- -ms-grid-column: 5;
- -ms-grid-column-span: 10;
grid-column: 5 / 15;
align-items: center;
justify-content: flex-end;
max-width: none;
- height: 6.75rem;
+ height: var(--header-height-wide-when-fixed);
margin-top: auto;
padding-top: 0;
padding-bottom: 0;
@@ -187,7 +196,7 @@ body.is-always-mobile-nav {
body.is-always-mobile-nav.toolbar-vertical .header-nav,
body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed .header-nav {
- border-top-width: 237px
+ border-top-width: calc(var(--toolbar-height) + var(--sp11))
}
}
@@ -199,40 +208,40 @@ body.is-always-mobile-nav {
@media (min-width: 75rem) {
body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {
- border-top-width: 277px
+ border-top-width: calc(var(--toolbar-height) + var(--toolbar-tray-height) + var(--sp11))
}
}
@media (min-width: 75rem) {
[dir="ltr"] body.is-always-mobile-nav .header-nav {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="rtl"] body.is-always-mobile-nav .header-nav {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
body.is-always-mobile-nav .header-nav {
overflow: auto;
- max-width: calc(50vw - 4.40625rem);
+ max-width: calc(var(--grid-col-width--nav)*7 + var(--grid-gap--nav)*7);
transition: transform 0.2s, visibility 0.2s;
- border-top-width: 198px
+ border-top-width: var(--sp11)
}
}
@media (min-width: 90rem) {
[dir="ltr"] body.is-always-mobile-nav .header-nav {
- padding-right: calc(100vw - 88.875rem)
+ padding-right: calc(100vw - var(--max-width) - var(--content-left) + var(--sp))
}
[dir="rtl"] body.is-always-mobile-nav .header-nav {
- padding-left: calc(100vw - 88.875rem)
+ padding-left: calc(100vw - var(--max-width) - var(--content-left) + var(--sp))
}
body.is-always-mobile-nav .header-nav {
- max-width: calc(100vw - 48.9375rem)
+ max-width: calc(100vw - var(--max-width) - var(--content-left) + var(--grid-col-width--max)*7 + var(--grid-gap--max)*7)
}
}
diff --git a/core/themes/olivero/css/components/header-navigation.pcss.css b/core/themes/olivero/css/components/header-navigation.pcss.css
index 1171856b8cb74943fdd81d7ad0f9585adfce81c4..2e3814fc8e3b3595e08a313b3f145a3832d5c2f6 100644
--- a/core/themes/olivero/css/components/header-navigation.pcss.css
+++ b/core/themes/olivero/css/components/header-navigation.pcss.css
@@ -3,7 +3,7 @@
* Navigation in header.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.header-nav {
position: fixed;
diff --git a/core/themes/olivero/css/components/header-search-narrow.css b/core/themes/olivero/css/components/header-search-narrow.css
index a6dbf8b06b22745fcce82a497c89d4a952db3650..f8db0ab98ce3386f81619c29840e5b61978dc7e8 100644
--- a/core/themes/olivero/css/components/header-search-narrow.css
+++ b/core/themes/olivero/css/components/header-search-narrow.css
@@ -10,11 +10,24 @@
* Header Search Narrow Block.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.block-search-narrow {
- margin-left: -1.125rem;
- margin-right: -1.125rem;
- margin-bottom: 2.25rem;
- background: #000
+ margin-left: calc(var(--sp)*-1);
+ margin-right: calc(var(--sp)*-1);
+ margin-bottom: var(--sp2);
+ background: var(--color--black)
}
.block-search-narrow .search-block-form {
@@ -31,31 +44,31 @@
}
[dir="ltr"] .block-search-narrow input[type="search"] {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
[dir="rtl"] .block-search-narrow input[type="search"] {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="ltr"] .block-search-narrow input[type="search"] {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="rtl"] .block-search-narrow input[type="search"] {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
.block-search-narrow input[type="search"] {
- width: calc(100% + 2.25rem);
- height: 3.375rem;
+ width: calc(100% + var(--sp2));
+ height: calc(var(--sp)*3);
padding-top: 0;
padding-bottom: 0;
transition: background-size 0.4s;
- color: #fff;
+ color: var(--color--white);
border: solid 1px transparent;
background-color: transparent;
- background-image: linear-gradient(#2494db, #2494db); /* Two values are needed for IE11 support. */
+ background-image: linear-gradient(var(--color--blue-50), var(--color--blue-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat;
background-position: bottom left; /* LTR */
background-size: 0% 0.3125rem;
@@ -91,23 +104,23 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .block-search-narrow input[type="search"] {
- padding-left: 2.25rem
+ padding-left: var(--sp2)
}
[dir="rtl"] .block-search-narrow input[type="search"] {
- padding-right: 2.25rem
+ padding-right: var(--sp2)
}
[dir="ltr"] .block-search-narrow input[type="search"] {
- padding-right: 2.25rem
+ padding-right: var(--sp2)
}
[dir="rtl"] .block-search-narrow input[type="search"] {
- padding-left: 2.25rem
+ padding-left: var(--sp2)
}
.block-search-narrow input[type="search"] {
- height: 4.5rem
+ height: calc(var(--sp)*4)
}
}
@@ -146,9 +159,8 @@
.block-search-narrow .search-form__submit {
position: relative;
overflow: hidden;
- -ms-grid-row-align: stretch;
align-self: stretch;
- width: 3.375rem;
+ width: var(--sp3);
height: auto;
margin-top: 0;
margin-bottom: 0;
@@ -202,7 +214,7 @@
transition: transform 0.2s;
transform: scaleX(0);
transform-origin: left; /* LTR */
- border-top: solid 5px #2494db;
+ border-top: solid 5px var(--color--blue-50);
}
.block-search-narrow .search-form__submit:focus {
@@ -218,7 +230,7 @@
@media screen and (-ms-high-contrast: active) {
.block-search-narrow .search-form__submit:focus {
- border-bottom-width: 9px
+ border-bottom-width: var(--sp0-5)
}
.block-search-narrow .search-form__submit:focus span:after {
diff --git a/core/themes/olivero/css/components/header-search-narrow.pcss.css b/core/themes/olivero/css/components/header-search-narrow.pcss.css
index 4c32e22b41636cb91be7a2259040c818d1653c58..1099b59db37422352ee9025c17f07796733d34c5 100644
--- a/core/themes/olivero/css/components/header-search-narrow.pcss.css
+++ b/core/themes/olivero/css/components/header-search-narrow.pcss.css
@@ -3,7 +3,7 @@
* Header Search Narrow Block.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.block-search-narrow {
margin-inline: calc(-1 * var(--sp));
diff --git a/core/themes/olivero/css/components/header-search-wide.css b/core/themes/olivero/css/components/header-search-wide.css
index 53c9ac63524aa155ec9473ab68cd31e13c71e84b..1498a14015fc28b50106387af6c24e7a90c4f8bb 100644
--- a/core/themes/olivero/css/components/header-search-wide.css
+++ b/core/themes/olivero/css/components/header-search-wide.css
@@ -10,6 +10,19 @@
* Header Search Wide Block.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
/* Override contextual links so we can position against .site-header. */
.block-search-wide.contextual-region {
@@ -57,11 +70,11 @@
}
[dir="ltr"] .block-search-wide__wrapper {
- border-left: solid 90px #313637;
+ border-left: solid var(--content-left) var(--color--gray-10);
}
[dir="rtl"] .block-search-wide__wrapper {
- border-right: solid 90px #313637;
+ border-right: solid var(--content-left) var(--color--gray-10);
}
.block-search-wide__wrapper {
@@ -72,35 +85,33 @@
visibility: hidden;
overflow: hidden;
width: 100vw;
- max-width: 98.125rem;
- height: 9rem;
+ max-width: var(--max-bg-color);
+ height: var(--sp8);
max-height: 0;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
transition: all 0.2s;
- background: #000
+ background: var(--color--black)
}
.block-search-wide__wrapper.is-active {
visibility: visible;
- max-height: 9rem;
+ max-height: var(--sp8);
}
.block-search-wide__wrapper form {
display: flex;
- -ms-grid-column: 1;
- -ms-grid-column-span: 13;
grid-column: 1 / 14;
}
[dir="ltr"] .block-search-wide__wrapper input[type="search"] {
- padding-left: 13.5rem;
+ padding-left: var(--sp12);
}
[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
- padding-right: 13.5rem;
+ padding-right: var(--sp12);
}
[dir="ltr"] .block-search-wide__wrapper input[type="search"] {
@@ -112,12 +123,12 @@
}
.block-search-wide__wrapper input[type="search"] {
- width: calc(100% + 2.25rem);
- height: 9rem;
+ width: calc(100% + var(--sp2));
+ height: var(--sp8);
padding-top: 0;
padding-bottom: 0;
transition: background-size 0.4s;
- color: #fff;
+ color: var(--color--white);
border: solid 1px transparent;
box-shadow: none;
font-family: serif;
@@ -143,7 +154,7 @@
@media screen and (-ms-high-contrast: active) {
.block-search-wide__wrapper input[type="search"]:focus {
- border-bottom-width: 9px
+ border-bottom-width: var(--sp0-5)
}
}
@@ -192,7 +203,6 @@
.block-search-wide__wrapper .search-form__submit {
position: relative;
overflow: hidden;
- -ms-grid-row-align: stretch;
align-self: stretch;
width: 6.25rem;
height: auto;
@@ -248,7 +258,7 @@
transition: transform 0.2s;
transform: scaleX(0);
transform-origin: left;
- border-top: solid 9px #2494db;
+ border-top: solid var(--sp0-5) var(--color--blue-50);
}
.block-search-wide__wrapper .search-form__submit:focus {
@@ -264,7 +274,7 @@
@media screen and (-ms-high-contrast: active) {
.block-search-wide__wrapper .search-form__submit:focus {
- border-bottom-width: 9px
+ border-bottom-width: var(--sp0-5)
}
.block-search-wide__wrapper .search-form__submit:focus span:after {
@@ -296,23 +306,21 @@
}
[dir="ltr"] .block-search-wide__container {
- padding-right: 2.25rem;
+ padding-right: var(--sp2);
}
[dir="rtl"] .block-search-wide__container {
- padding-left: 2.25rem;
+ padding-left: var(--sp2);
}
.block-search-wide__container {
- max-width: 84.375rem;
+ max-width: var(--max-width);
}
.block-search-wide__grid {
- display: -ms-grid;
display: grid;
- -ms-grid-columns: (1fr)[14];
- grid-template-columns: repeat(14, 1fr);
- grid-column-gap: 2.25rem;
+ grid-template-columns: repeat(var(--grid-col-count--md), 1fr);
+ grid-column-gap: var(--grid-gap--md);
}
/* Override specificity from container-inline.module.css */
@@ -322,17 +330,16 @@
}
.container-inline .block-search-wide__grid {
- display: -ms-grid;
display: grid;
}
.block-search-wide__button {
position: relative;
display: none;
- width: 3.375rem;
- height: 6.75rem;
+ width: var(--sp3);
+ height: var(--sp6);
cursor: pointer;
- color: #0d1214; /* Affects SVG search icon. */
+ color: var(--color--gray-0); /* Affects SVG search icon. */
border: 0;
background: transparent;
-webkit-appearance: none
@@ -348,19 +355,19 @@
top: 50%;
left: 50%;
width: 80%;
- height: 3.375rem;
+ height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
- border: solid 2px #2494db;
+ border: solid 2px var(--color--blue-50);
border-radius: 0.25rem;
}
.block-search-wide__button[aria-expanded="true"] {
- background: #000
+ background: var(--color--black)
}
.block-search-wide__button[aria-expanded="true"]:focus:after {
- border-color: #fff;
+ border-color: var(--color--white);
}
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:before,
@@ -368,10 +375,10 @@
position: absolute;
top: 50%;
left: 50%;
- width: 1.6875rem;
+ width: var(--sp1-5);
height: 0;
content: "";
- border-top: solid 2px #fff;
+ border-top: solid 2px var(--color--white);
}
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:before {
@@ -417,21 +424,21 @@
html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
visibility: visible;
- max-height: 9rem;
+ max-height: var(--sp8);
}
/* Necessary to override specificity of transpiled PostCSS properties from default input focus styling. */
[dir] .block-search-wide__wrapper input[type="search"] {
background-color: transparent;
- background-image: linear-gradient(#2494db, #2494db); /* Two values are needed for IE11 support. */
+ background-image: linear-gradient(var(--color--blue-50), var(--color--blue-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat;
background-position: bottom left; /* LTR */
background-size: 0% 0.625rem
}
[dir] .block-search-wide__wrapper input[type="search"]:focus {
- background-size: 100% 0.5625rem;
+ background-size: 100% var(--sp0-5);
}
[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
diff --git a/core/themes/olivero/css/components/header-search-wide.pcss.css b/core/themes/olivero/css/components/header-search-wide.pcss.css
index bac07058c78a9e4aa445b047048aa261661de37b..d7c346812142369a1f97ffdba5646a5e6aebcb43 100644
--- a/core/themes/olivero/css/components/header-search-wide.pcss.css
+++ b/core/themes/olivero/css/components/header-search-wide.pcss.css
@@ -3,7 +3,7 @@
* Header Search Wide Block.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
/* Override contextual links so we can position against .site-header. */
.block-search-wide.contextual-region {
diff --git a/core/themes/olivero/css/components/header-site-branding.css b/core/themes/olivero/css/components/header-site-branding.css
index 66ab2f0ea39409a1ba35d5be028a061f6f73477d..9beff6257ac27e4c40be41c33d417ebe4fdc4bd1 100644
--- a/core/themes/olivero/css/components/header-site-branding.css
+++ b/core/themes/olivero/css/components/header-site-branding.css
@@ -10,96 +10,109 @@
* Site branding in header.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .site-branding {
- margin-left: -1.125rem;
- margin-right: 1.125rem
+ margin-left: calc(var(--container-padding)*-1);
+ margin-right: var(--sp)
}
[dir="rtl"] .site-branding {
- margin-right: -1.125rem;
- margin-left: 1.125rem
+ margin-right: calc(var(--container-padding)*-1);
+ margin-left: var(--sp)
}
[dir="ltr"] .site-branding {
- padding-left: 1.125rem
+ padding-left: var(--container-padding)
}
[dir="rtl"] .site-branding {
- padding-right: 1.125rem
+ padding-right: var(--container-padding)
}
[dir="ltr"] .site-branding {
- padding-right: 1.125rem
+ padding-right: var(--container-padding)
}
[dir="rtl"] .site-branding {
- padding-left: 1.125rem
+ padding-left: var(--container-padding)
}
.site-branding {
display: flex;
flex-shrink: 1;
align-items: flex-end;
- min-width: calc(33.33333vw + 0.75rem);
- min-height: 3.375rem;
+ min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding));
+ min-height: var(--sp3);
padding-top: 0;
- padding-bottom: 0.5625rem;
+ padding-bottom: var(--sp0-5);
/* @todo - #0d7ab8 isn't currently a variable. */
- background-image: linear-gradient(160deg, #2494db 0%, #0d7ab8 78.66%)
+ background-image: linear-gradient(160deg, var(--color--blue-50) 0%, #0d7ab8 78.66%)
}
@media (min-width: 31.25rem) {
.site-branding {
- min-height: 4.5rem
+ min-height: var(--sp4)
}
}
@media (min-width: 43.75rem) {
.site-branding {
- min-height: 6.75rem;
- padding-bottom: 1.125rem
+ min-height: var(--sp6);
+ padding-bottom: var(--sp)
}
}
@media (min-width: 62.5rem) {
.site-branding {
- min-width: calc(14.28571vw + 0.99107rem)
+ min-width: calc(var(--grid-col-width--lg)*2 + var(--grid-gap--lg)*2 + var(--container-padding))
}
}
@media (min-width: 75rem) {
[dir="ltr"] .site-branding {
- margin-left: -2.25rem
+ margin-left: calc(var(--container-padding-nav)*-1)
}
[dir="rtl"] .site-branding {
- margin-right: -2.25rem
+ margin-right: calc(var(--container-padding-nav)*-1)
}
[dir="ltr"] .site-branding {
- padding-left: 2.25rem
+ padding-left: var(--container-padding-nav)
}
[dir="rtl"] .site-branding {
- padding-right: 2.25rem
+ padding-right: var(--container-padding-nav)
}
[dir="ltr"] .site-branding {
- padding-right: 2.25rem
+ padding-right: var(--container-padding-nav)
}
[dir="rtl"] .site-branding {
- padding-left: 2.25rem
+ padding-left: var(--container-padding-nav)
}
.site-branding {
- min-width: calc(14.28571vw + 0.99107rem);
- min-height: 11.25rem;
+ min-width: calc(var(--grid-col-width--nav)*2 + var(--grid-gap--nav)*2 + var(--container-padding-nav));
+ min-height: var(--site-header-height-wide);
padding-top: 0;
padding-bottom: 0
}
@@ -108,20 +121,20 @@
@media (min-width: 90rem) {
.site-branding {
- min-width: 13.98214rem
+ min-width: calc(var(--grid-col-width--max)*2 + var(--grid-gap--max)*2 + var(--container-padding-nav))
}
}
[dir="rtl"] .site-branding {
- background-image: linear-gradient(-160deg, #2494db 0%, #0d7ab8 78.66%);
+ background-image: linear-gradient(-160deg, var(--color--blue-50) 0%, #0d7ab8 78.66%);
}
.site-branding--bg-gray {
- background: #f7f9fa;
+ background: var(--color--gray-95);
}
.site-branding--bg-white {
- background: #fff;
+ background: var(--color--white);
}
.site-branding__inner {
@@ -152,9 +165,9 @@
}
.site-branding__inner {
- height: 6.75rem;
- padding-top: 0.5625rem;
- padding-bottom: 0.5625rem
+ height: var(--header-height-wide-when-fixed);
+ padding-top: var(--sp0-5);
+ padding-bottom: var(--sp0-5)
}
}
@@ -166,32 +179,32 @@
.site-branding__logo img {
width: auto;
max-width: 100%;
- max-height: 2.25rem
+ max-height: var(--sp2)
}
@media (min-width: 31.25rem) {
.site-branding__logo img {
- max-height: 3.375rem
+ max-height: var(--sp3)
}
}
@media (min-width: 43.75rem) {
.site-branding__logo img {
- max-height: 4.5rem
+ max-height: var(--sp4)
}
}
@media (min-width: 75rem) {
.site-branding__logo img {
- max-height: 5.625rem
+ max-height: calc(var(--header-height-wide-when-fixed) - var(--sp))
}
}
.site-branding__text {
- color: #fff;
+ color: var(--color--white);
font-size: 1.125rem;
font-weight: bold
}
@@ -213,13 +226,13 @@
.site-branding__text {
letter-spacing: 0.02em;
font-size: 2rem;
- line-height: 2.25rem
+ line-height: var(--sp2)
}
}
.site-branding--bg-gray .site-branding__text,
.site-branding--bg-white .site-branding__text {
- color: #2494db;
+ color: var(--color--blue-50);
}
[dir="ltr"] .site-branding__logo + .site-branding__text {
diff --git a/core/themes/olivero/css/components/header-site-branding.pcss.css b/core/themes/olivero/css/components/header-site-branding.pcss.css
index 5bb4827e76da37eeeab5a11ac96bc965de2f3ef2..ecd5f37984ca535699ed45a96288e7b0b91f08f8 100644
--- a/core/themes/olivero/css/components/header-site-branding.pcss.css
+++ b/core/themes/olivero/css/components/header-site-branding.pcss.css
@@ -3,7 +3,7 @@
* Site branding in header.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.site-branding {
display: flex;
diff --git a/core/themes/olivero/css/components/header-sticky-toggle.css b/core/themes/olivero/css/components/header-sticky-toggle.css
index 1bcb87ec3564c27a9fe99f0e06bfeb5f2e7cb8d2..55278da92a600370f40d9902dde3f14c9ff3fe74 100644
--- a/core/themes/olivero/css/components/header-sticky-toggle.css
+++ b/core/themes/olivero/css/components/header-sticky-toggle.css
@@ -13,6 +13,19 @@
* toggles fixing the header to the top of the viewport.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.sticky-header-toggle {
display: none
}
@@ -24,20 +37,20 @@
flex-shrink: 0;
align-items: center;
justify-content: center;
- width: 5.625rem;
- height: 6.75rem;
+ width: var(--content-left);
+ height: var(--sp6);
pointer-events: none;
opacity: 0;
border: 0;
outline: 0;
- background-color: #2494db
+ background-color: var(--color--blue-50)
}
.sticky-header-toggle:focus {
cursor: pointer;
pointer-events: auto;
opacity: 1;
- outline: solid 2px #fff;
+ outline: solid 2px var(--color--white);
outline-offset: -4px;
}
}
@@ -58,7 +71,7 @@ body.is-always-mobile-nav .sticky-header-toggle {
.sticky-header-toggle__icon {
position: relative;
- width: 2.25rem;
+ width: var(--sp2);
height: 1.3125rem;
transition: opacity 0.2s;
pointer-events: none;
@@ -69,7 +82,7 @@ body.is-always-mobile-nav .sticky-header-toggle {
display: block;
height: 0;
/* Intentionally not using CSS logical properties. */
- border-top: solid 3px #fff
+ border-top: solid 3px var(--color--white)
}
[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(1) {
@@ -86,7 +99,7 @@ body.is-always-mobile-nav .sticky-header-toggle {
width: 100%;
height: 0;
transition: transform 0.2s;
- background-color: #fff;
+ background-color: var(--color--white);
}
[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(2) {
@@ -103,7 +116,7 @@ body.is-always-mobile-nav .sticky-header-toggle {
width: 100%;
height: 0;
transition: opacity 0.2s;
- background-color: #fff;
+ background-color: var(--color--white);
}
[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(3) {
@@ -121,7 +134,7 @@ body.is-always-mobile-nav .sticky-header-toggle {
width: 100%;
height: 0;
transition: transform 0.2s;
- background-color: #fff;
+ background-color: var(--color--white);
}
.is-fixed .sticky-header-toggle {
diff --git a/core/themes/olivero/css/components/header-sticky-toggle.pcss.css b/core/themes/olivero/css/components/header-sticky-toggle.pcss.css
index 04932fb959ed6e95847be3ff52d90e870ab0413a..47c39096a374f99c0f60b07d7f1cb4a87da09077 100644
--- a/core/themes/olivero/css/components/header-sticky-toggle.pcss.css
+++ b/core/themes/olivero/css/components/header-sticky-toggle.pcss.css
@@ -6,7 +6,7 @@
* toggles fixing the header to the top of the viewport.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.sticky-header-toggle {
display: none;
diff --git a/core/themes/olivero/css/components/hero.css b/core/themes/olivero/css/components/hero.css
index 6c29fe1d6f902db90f43aa96b9a1167fcbd4a88d..a3e81bc67ba93ca8428436cc28de8c18bc6a7c1b 100644
--- a/core/themes/olivero/css/components/hero.css
+++ b/core/themes/olivero/css/components/hero.css
@@ -10,17 +10,26 @@
* Main Hero.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.hero__content {
- -ms-grid-column: 1;
- -ms-grid-column-span: 6;
grid-column: 1 / 7
}
@media (min-width: 43.75rem) {
.hero__content { /* 700px */
- -ms-grid-column: 3;
- -ms-grid-column-span: 10;
grid-column: 3 / 13
}
}
@@ -28,18 +37,14 @@
@media (min-width: 62.5rem) {
.hero__content {
- -ms-grid-column: 3;
- -ms-grid-column-span: 8;
grid-column: 3 / 11
}
}
.hero__img {
- -ms-grid-column: 1;
- -ms-grid-column-span: 6;
grid-column: 1 / 7;
- margin-top: 2.25rem;
- margin-bottom: 2.25rem
+ margin-top: var(--sp2);
+ margin-bottom: var(--sp2)
}
.hero__img img {
@@ -49,27 +54,23 @@
@media (min-width: 31.25rem) {
.hero__img {
- margin-top: 3.375rem;
- margin-bottom: 3.375rem
+ margin-top: var(--sp3);
+ margin-bottom: var(--sp3)
}
}
@media (min-width: 43.75rem) {
.hero__img {
- -ms-grid-column: 1;
- -ms-grid-column-span: 14;
grid-column: 1 / 15;
- margin-top: 4.5rem;
- margin-bottom: 4.5rem
+ margin-top: var(--sp4);
+ margin-bottom: var(--sp4)
}
}
@media (min-width: 62.5rem) {
.hero__img {
- -ms-grid-column: 2;
- -ms-grid-column-span: 12;
grid-column: 2 / 14
}
}
diff --git a/core/themes/olivero/css/components/hero.pcss.css b/core/themes/olivero/css/components/hero.pcss.css
index b7943811e560e20eb19da036bd75dc58b7f6bb80..34ec1f4fb68236a9d92131df126734258446a487 100644
--- a/core/themes/olivero/css/components/hero.pcss.css
+++ b/core/themes/olivero/css/components/hero.pcss.css
@@ -3,7 +3,7 @@
* Main Hero.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.hero__content {
grid-column: 1 / 7;
diff --git a/core/themes/olivero/css/components/links.css b/core/themes/olivero/css/components/links.css
index c6f355291263ca9e85c29756d83305cf95700589..bba0f3b6fae343f236a6f43b96de3cf3dc53d122 100644
--- a/core/themes/olivero/css/components/links.css
+++ b/core/themes/olivero/css/components/links.css
@@ -10,6 +10,19 @@
* Links component.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .links.inline {
margin-left: 0
}
diff --git a/core/themes/olivero/css/components/links.pcss.css b/core/themes/olivero/css/components/links.pcss.css
index 9be266dcef870132d207104e21e60fa243543974..1848b799dd8c34ac3347d08ef1ddc669d1fe8c32 100644
--- a/core/themes/olivero/css/components/links.pcss.css
+++ b/core/themes/olivero/css/components/links.pcss.css
@@ -3,7 +3,7 @@
* Links component.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.links.inline {
margin-inline-start: 0;
diff --git a/core/themes/olivero/css/components/maintenance-page.css b/core/themes/olivero/css/components/maintenance-page.css
index 921860501b6f9f3bdeecc18aad7a96cd2e9b3244..a1c3ca01d7999b3e8e0d5d4914008076fe165699 100644
--- a/core/themes/olivero/css/components/maintenance-page.css
+++ b/core/themes/olivero/css/components/maintenance-page.css
@@ -10,11 +10,24 @@
* Maintenance page.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
@media (min-width: 75rem) {
.maintenance-page .site-header__initial {
flex-shrink: 0;
- width: 5.625rem
+ width: var(--content-left)
}
}
@@ -24,6 +37,6 @@
.maintenance-page-icon {
display: block;
- margin-top: 3.375rem;
- margin-bottom: 3.375rem;
+ margin-top: var(--sp3);
+ margin-bottom: var(--sp3);
}
diff --git a/core/themes/olivero/css/components/maintenance-page.pcss.css b/core/themes/olivero/css/components/maintenance-page.pcss.css
index 79c7b2bbf25cf844281e3b9d9bfe41f729d4dec1..824fbc9f13c235fb838092edc6aee696f61770da 100644
--- a/core/themes/olivero/css/components/maintenance-page.pcss.css
+++ b/core/themes/olivero/css/components/maintenance-page.pcss.css
@@ -3,7 +3,7 @@
* Maintenance page.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.maintenance-page {
& .site-header__initial {
diff --git a/core/themes/olivero/css/components/messages.css b/core/themes/olivero/css/components/messages.css
index 5febd0d6c0addd5bd72ccfb32b76d36f08a4abb0..c3d79a145d12f0b238cb6d563a2a8d57cbe4548f 100644
--- a/core/themes/olivero/css/components/messages.css
+++ b/core/themes/olivero/css/components/messages.css
@@ -10,6 +10,23 @@
* Messages.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+:root {
+ --messages-icon-size: 2rem;
+}
+
[dir="ltr"] .messages-list {
padding-left: 0;
}
@@ -27,36 +44,36 @@
}
.messages-list {
- margin-top: 1.125rem;
- margin-bottom: 1.125rem;
+ margin-top: var(--sp1);
+ margin-bottom: var(--sp1);
padding-top: 0;
padding-bottom: 0;
list-style: none;
}
[dir="ltr"] .messages {
- padding-left: 1.6875rem;
+ padding-left: var(--sp1-5);
}
[dir="rtl"] .messages {
- padding-right: 1.6875rem;
+ padding-right: var(--sp1-5);
}
[dir="ltr"] .messages {
- padding-right: 1.6875rem;
+ padding-right: var(--sp1-5);
}
[dir="rtl"] .messages {
- padding-left: 1.6875rem;
+ padding-left: var(--sp1-5);
}
.messages {
- min-height: 4.25rem;
- padding-top: 1.125rem;
- padding-bottom: 1.125rem;
- color: #fff;
+ min-height: calc(var(--messages-icon-size) + var(--sp1)*2);
+ padding-top: var(--sp1);
+ padding-bottom: var(--sp1);
+ color: var(--color--white);
outline: solid 1px transparent;
- background-color: #0d1214
+ background-color: var(--color--gray-0)
}
.messages * {
@@ -113,11 +130,11 @@
}
.messages:not(.hidden) ~ .messages {
- margin-top: 1.125rem;
+ margin-top: var(--sp1);
}
.messages__item + .messages__item {
- margin-top: 0.5625rem;
+ margin-top: var(--sp0-5);
}
.messages__container {
@@ -125,11 +142,11 @@
}
[dir="ltr"] .messages__header {
- margin-right: 1.125rem;
+ margin-right: var(--sp1);
}
[dir="rtl"] .messages__header {
- margin-left: 1.125rem;
+ margin-left: var(--sp1);
}
.messages__header {
@@ -151,11 +168,11 @@
}
[dir="ltr"] .messages__button {
- margin-left: 1.125rem;
+ margin-left: var(--sp1);
}
[dir="rtl"] .messages__button {
- margin-right: 1.125rem;
+ margin-right: var(--sp1);
}
.messages__button {
@@ -203,7 +220,7 @@
width: 2.0625rem;
height: 0;
content: "";
- border-top: solid 2px #7e96a7;
+ border-top: solid 2px var(--color--gray-30);
}
.messages__close:before {
@@ -216,11 +233,11 @@
.messages__close:hover::before,
.messages__close:hover::after {
- border-color: #fff;
+ border-color: var(--color--white);
}
.messages__close:focus {
- outline: 2px solid #53b0eb;
+ outline: 2px solid var(--color--blue-70);
outline-offset: 2px;
}
@@ -229,23 +246,23 @@
}
.messages--error .messages__icon svg {
- fill: #e33f1e;
+ fill: var(--color--red);
}
.messages--warning .messages__icon svg {
- fill: #fdca40;
+ fill: var(--color--gold);
}
.messages--status .messages__icon svg {
- fill: #3fa21c;
+ fill: var(--color--green);
}
.messages--info .messages__icon svg {
- fill: #53b0eb;
+ fill: var(--color--blue-70);
}
.messages a {
- color: #fff;
+ color: var(--color--white);
}
.messages pre {
@@ -253,13 +270,13 @@
}
[dir="ltr"] .js-form-managed-file .messages {
- border-left: solid 6px #e33f1e;
+ border-left: solid 6px var(--color--red);
}
[dir="rtl"] .js-form-managed-file .messages {
- border-right: solid 6px #e33f1e;
+ border-right: solid 6px var(--color--red);
}
.js-form-managed-file .messages {
- margin-bottom: 1.125rem;
+ margin-bottom: var(--sp1);
}
diff --git a/core/themes/olivero/css/components/messages.pcss.css b/core/themes/olivero/css/components/messages.pcss.css
index 3625aa5f3e4e0391b6f352cd23c65437b94f4773..be687fea537d467f25c5082661aa3423ed387c48 100644
--- a/core/themes/olivero/css/components/messages.pcss.css
+++ b/core/themes/olivero/css/components/messages.pcss.css
@@ -3,7 +3,7 @@
* Messages.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
:root {
--messages-icon-size: 32px;
diff --git a/core/themes/olivero/css/components/navigation/menu-sidebar.css b/core/themes/olivero/css/components/navigation/menu-sidebar.css
index 15ed877fd9eca540691ec76eaa8115c7c56a0daf..1830f425938fb08939392da27d5e0386d468a7b4 100644
--- a/core/themes/olivero/css/components/navigation/menu-sidebar.css
+++ b/core/themes/olivero/css/components/navigation/menu-sidebar.css
@@ -10,6 +10,19 @@
* Styles for menu placed in sidebar region.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.menu--sidebar {
list-style: none
}
@@ -41,9 +54,9 @@
.menu--sidebar .menu__link {
position: relative;
display: block;
- padding-top: 0.84375rem;
- padding-bottom: 0.84375rem;
- font-family: "Lora", "georgia", serif;
+ padding-top: var(--sp0-75);
+ padding-bottom: var(--sp0-75);
+ font-family: var(--font-serif);
font-size: 1.125rem
/* Bottom divider line. */
@@ -60,20 +73,20 @@
.menu--sidebar .menu__link:after {
position: absolute;
bottom: 0;
- width: 4.5rem;
+ width: var(--sp4);
height: 0;
content: "";
- border-top: solid 2px #e7edf1;
+ border-top: solid 2px var(--color--gray-80);
}
.menu--sidebar .menu__link--link {
text-decoration: none;
- color: #0d1214;
+ color: var(--color--gray-0);
font-weight: 600
}
.menu--sidebar .menu__link--link:hover {
- color: #2494db;
+ color: var(--color--blue-50);
}
.menu--sidebar {
diff --git a/core/themes/olivero/css/components/navigation/menu-sidebar.pcss.css b/core/themes/olivero/css/components/navigation/menu-sidebar.pcss.css
index de077db5abd7083b0f920b30837789edb37c302e..6d486dbc56cec85c4ea127aaf6474f3fb7b39059 100644
--- a/core/themes/olivero/css/components/navigation/menu-sidebar.pcss.css
+++ b/core/themes/olivero/css/components/navigation/menu-sidebar.pcss.css
@@ -3,7 +3,7 @@
* Styles for menu placed in sidebar region.
*/
-@import "../../base/variables.pcss.css";
+@import "../../base/media-queries.pcss.css";
.menu--sidebar {
list-style: none;
diff --git a/core/themes/olivero/css/components/navigation/nav-button-mobile.css b/core/themes/olivero/css/components/navigation/nav-button-mobile.css
index 706af56c0d20e71c829e4263de921f999411e1d5..87d539c8572fa3be5c4f411041e904470e23d64c 100644
--- a/core/themes/olivero/css/components/navigation/nav-button-mobile.css
+++ b/core/themes/olivero/css/components/navigation/nav-button-mobile.css
@@ -10,6 +10,19 @@
* Nav Button Mobile.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .mobile-nav-button {
margin-left: auto
}
@@ -47,10 +60,9 @@
z-index: 110; /* Appear above mobile nav. */
display: flex;
align-items: center;
- -ms-grid-row-align: center;
align-self: center;
- width: 2.25rem;
- height: 2.25rem;
+ width: var(--sp2);
+ height: var(--sp2);
padding-top: 0;
padding-bottom: 0;
cursor: pointer;
@@ -62,7 +74,7 @@
}
.mobile-nav-button:focus {
- outline: solid 2px #0d77b5;
+ outline: solid 2px var(--color--blue-20);
}
.mobile-nav-button:active {
@@ -72,11 +84,11 @@
@media (min-width: 31.25rem) {
[dir="ltr"] .mobile-nav-button {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
[dir="rtl"] .mobile-nav-button {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
.mobile-nav-button {
@@ -122,9 +134,9 @@
.mobile-nav-button__icon {
position: relative;
display: block;
- width: 2.25rem;
+ width: var(--sp2);
height: 0.1875rem;
- background-color: #2494db
+ background-color: var(--color--blue-50)
}
[dir="ltr"] .mobile-nav-button__icon:before {
@@ -142,7 +154,7 @@
height: 0.1875rem;
content: "";
transition: all 0.2s;
- background-color: #2494db;
+ background-color: var(--color--blue-50);
}
[dir="ltr"] .mobile-nav-button__icon:after {
@@ -161,7 +173,7 @@
height: 0.1875rem;
content: "";
transition: all 0.2s;
- background-color: #2494db;
+ background-color: var(--color--blue-50);
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
diff --git a/core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css b/core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css
index ac7709b310a11c0aca883b2c9009a883295477bd..04546464e67db72539f69c7d41cbbbb87f066904 100644
--- a/core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css
+++ b/core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css
@@ -3,7 +3,7 @@
* Nav Button Mobile.
*/
-@import "../../base/variables.pcss.css";
+@import "../../base/media-queries.pcss.css";
.mobile-nav-button {
position: relative;
diff --git a/core/themes/olivero/css/components/navigation/nav-primary-button.css b/core/themes/olivero/css/components/navigation/nav-primary-button.css
index 5f83bb161d8444d492e65e63a1ebf30b3631cc4a..cc3a72e43fdd13370fde5a24e629dfa5c08fd7ef 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-button.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-button.css
@@ -10,6 +10,19 @@
* Button that expands second level nav when clicked.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .primary-nav__button-toggle {
padding-left: 0
}
@@ -29,9 +42,9 @@
.primary-nav__button-toggle {
position: relative;
overflow: hidden;
- width: 2.25rem;
- height: 2.25rem;
- margin-top: 0.5625rem; /* Visually align button with menu link text. */
+ width: var(--sp2);
+ height: var(--sp2);
+ margin-top: var(--sp0-5); /* Visually align button with menu link text. */
padding-top: 0;
padding-bottom: 0;
cursor: pointer;
@@ -42,7 +55,7 @@
}
.primary-nav__button-toggle:focus {
- outline: auto 2px #2494db;
+ outline: auto 2px var(--color--blue-50);
outline-offset: 2px;
}
@@ -66,12 +79,12 @@
top: 50%;
left: 50%;
/* stylelint-enable csstools/use-logical */
- width: 1.125rem;
+ width: var(--sp);
height: 0;
content: "";
transform: translate(-50%, -50%);
/* Intentionally not using CSS logical properties. */
- border-top: solid 3px #2494db;
+ border-top: solid 3px var(--color--blue-50);
}
.primary-nav__button-toggle .icon--menu-toggle:after {
@@ -96,16 +109,15 @@
@media (min-width: 75rem) {
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
- margin-right: -2.25rem
+ margin-right: calc(var(--sp2)*-1)
}
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
- margin-left: -2.25rem
+ margin-left: calc(var(--sp2)*-1)
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
flex-shrink: 0;
- -ms-grid-row-align: stretch;
align-self: stretch;
- width: 2.75rem;
+ width: calc(var(--sp2) + 0.5rem);
height: auto;
margin-top: 0
}
@@ -116,7 +128,7 @@
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus .icon--menu-toggle {
- border: solid 2px #0d77b5;
+ border: solid 2px var(--color--blue-20);
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:active {
@@ -140,7 +152,7 @@
width: 1.125rem;
transform: translateY(-50%);
border-radius: 0.25rem;
- background-color: #fff
+ background-color: var(--color--white)
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle:before {
diff --git a/core/themes/olivero/css/components/navigation/nav-primary-button.pcss.css b/core/themes/olivero/css/components/navigation/nav-primary-button.pcss.css
index b31aeb149a613e54d583812ad108dd844ca453a2..99e20333fff734614f9dde3809c6438dffdd62b3 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-button.pcss.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-button.pcss.css
@@ -3,7 +3,7 @@
* Button that expands second level nav when clicked.
*/
-@import "../../base/variables.pcss.css";
+@import "../../base/media-queries.pcss.css";
.primary-nav__button-toggle {
position: relative;
diff --git a/core/themes/olivero/css/components/navigation/nav-primary-no-js.css b/core/themes/olivero/css/components/navigation/nav-primary-no-js.css
index 831a7cebbc48e9acc0a15952e106104c49690cf3..0ab196cca364ea703535e8c55e98adc268efc628 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-no-js.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-no-js.css
@@ -10,6 +10,24 @@
* Styles for primary navigation when JavaScript is disabled.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+:root {
+ --no-js-nav-column-width: 18.75rem;
+ --no-js-nav-column-gap: var(--sp2);
+}
+
html:not(.js) {
/**
* Mobile styles for primary navigation when JS is disabled.
@@ -18,8 +36,8 @@ html:not(.js) {
@media (max-width: 75rem) {
html:not(.js) .primary-nav__menu--level-1 {
- column-width: 18.75rem;
- grid-column-gap: 2.25rem;
+ column-width: var(--no-js-nav-column-width);
+ grid-column-gap: var(--no-js-nav-column-gap);
}
html:not(.js) .primary-nav__menu-item {
@@ -36,35 +54,35 @@ html:not(.js) {
}
html[dir="ltr"]:not(.js) .header-nav {
- margin-left: 2.25rem;
+ margin-left: var(--sp2);
}
html[dir="rtl"]:not(.js) .header-nav {
- margin-right: 2.25rem;
+ margin-right: var(--sp2);
}
html[dir="ltr"]:not(.js) .header-nav {
- margin-right: 2.25rem;
+ margin-right: var(--sp2);
}
html[dir="rtl"]:not(.js) .header-nav {
- margin-left: 2.25rem;
+ margin-left: var(--sp2);
}
html[dir="ltr"]:not(.js) .header-nav {
- padding-left: 2.25rem;
+ padding-left: var(--sp2);
}
html[dir="rtl"]:not(.js) .header-nav {
- padding-right: 2.25rem;
+ padding-right: var(--sp2);
}
html[dir="ltr"]:not(.js) .header-nav {
- padding-right: 2.25rem;
+ padding-right: var(--sp2);
}
html[dir="rtl"]:not(.js) .header-nav {
- padding-left: 2.25rem;
+ padding-left: var(--sp2);
}
html:not(.js) .header-nav {
@@ -73,13 +91,13 @@ html:not(.js) {
flex-basis: 100%;
width: 100%;
max-width: none;
- margin-top: 2.25rem;
+ margin-top: var(--sp2);
margin-bottom: 0;
- padding-top: 2.25rem;
+ padding-top: var(--sp2);
padding-bottom: 0;
transform: none;
- border: solid 1px #e7edf1 !important;
- box-shadow: 0 0 36px #d7e1e8;
+ border: solid 1px var(--color--gray-80) !important;
+ box-shadow: 0 0 36px var(--color--gray-70);
}
html[dir="ltr"]:not(.js) .primary-nav__menu--level-2 {
@@ -107,8 +125,8 @@ html:not(.js) {
*/
}
html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-1 {
- column-width: 18.75rem;
- grid-column-gap: 2.25rem;
+ column-width: var(--no-js-nav-column-width);
+ grid-column-gap: var(--no-js-nav-column-gap);
}
html:not(.js) body.is-always-mobile-nav .primary-nav__menu-item {
@@ -125,35 +143,35 @@ html:not(.js) {
}
html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-left: 2.25rem;
+ margin-left: var(--sp2);
}
html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-right: 2.25rem;
+ margin-right: var(--sp2);
}
html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-right: 2.25rem;
+ margin-right: var(--sp2);
}
html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-left: 2.25rem;
+ margin-left: var(--sp2);
}
html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-left: 2.25rem;
+ padding-left: var(--sp2);
}
html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-right: 2.25rem;
+ padding-right: var(--sp2);
}
html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-right: 2.25rem;
+ padding-right: var(--sp2);
}
html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-left: 2.25rem;
+ padding-left: var(--sp2);
}
html:not(.js) body.is-always-mobile-nav .header-nav {
@@ -162,13 +180,13 @@ html:not(.js) {
flex-basis: 100%;
width: 100%;
max-width: none;
- margin-top: 2.25rem;
+ margin-top: var(--sp2);
margin-bottom: 0;
- padding-top: 2.25rem;
+ padding-top: var(--sp2);
padding-bottom: 0;
transform: none;
- border: solid 1px #e7edf1 !important;
- box-shadow: 0 0 36px #d7e1e8;
+ border: solid 1px var(--color--gray-80) !important;
+ box-shadow: 0 0 36px var(--color--gray-70);
}
html[dir="ltr"]:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
diff --git a/core/themes/olivero/css/components/navigation/nav-primary-no-js.pcss.css b/core/themes/olivero/css/components/navigation/nav-primary-no-js.pcss.css
index 178df7ae09ccef1b0b2d5b2ade25b30cd6c9d9ea..ede4955d9c1b2fe16e7ca6176508526ff7bda18d 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-no-js.pcss.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-no-js.pcss.css
@@ -3,7 +3,7 @@
* Styles for primary navigation when JavaScript is disabled.
*/
-@import "../../base/variables.pcss.css";
+@import "../../base/media-queries.pcss.css";
:root {
--no-js-nav-column-width: 300px;
diff --git a/core/themes/olivero/css/components/navigation/nav-primary-wide.css b/core/themes/olivero/css/components/navigation/nav-primary-wide.css
index 9b5ef1b5c040753aa00cdc432ed010b724225909..4666c3b2d009aa8615b83a8146d1b2ea7f339a06 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-wide.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-wide.css
@@ -10,6 +10,19 @@
* Nav Primary (wide widths).
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .primary-nav__menu-item {
flex-wrap: nowrap /* Ensure that sub navigation toggle button doesn't wrap underneath link. */
@@ -30,7 +43,7 @@
body:not(.is-always-mobile-nav) .primary-nav__menu-link {
letter-spacing: 0.02em;
font-size: 1rem;
- line-height: 1.6875rem
+ line-height: var(--sp1-5)
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus {
@@ -42,11 +55,11 @@
position: absolute;
top: 50%;
left: 50%;
- width: calc(100% + 1.125rem);
- height: 3.375rem;
+ width: calc(100% + var(--sp));
+ height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
- border: solid 2px #2494db;
+ border: solid 2px var(--color--blue-50);
border-radius: 0.25rem;
}
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
@@ -60,7 +73,7 @@
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus:before {
- width: calc(100% + 1.6875rem);
+ width: calc(100% + var(--sp1-5));
content: "";
}
@@ -111,21 +124,21 @@
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
- padding-top: 2.25rem;
- padding-bottom: 2.25rem
+ padding-top: var(--sp2);
+ padding-bottom: var(--sp2)
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner:after {
transform-origin: center;
- border-top-width: 9px;
+ border-top-width: var(--sp0-5);
}
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
- margin-right: 1.125rem;
+ margin-right: var(--sp);
}
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
- margin-left: 1.125rem;
+ margin-left: var(--sp);
}
body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
@@ -160,11 +173,11 @@
}
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
- margin-right: 2.25rem;
+ margin-right: var(--sp2);
}
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
- margin-left: 2.25rem;
+ margin-left: var(--sp2);
}
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
@@ -176,25 +189,25 @@
}
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- padding-left: 2.25rem;
+ padding-left: var(--sp2);
}
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- padding-right: 2.25rem;
+ padding-right: var(--sp2);
}
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- padding-right: 2.25rem;
+ padding-right: var(--sp2);
}
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- padding-left: 2.25rem;
+ padding-left: var(--sp2);
}
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
position: absolute;
z-index: 105; /* Appear above search container. */
- top: calc(100% - 0.5625rem);
+ top: calc(100% - var(--sp)*0.5);
left: 50%;
visibility: hidden;
overflow: auto;
@@ -203,20 +216,20 @@
* Ensure that long level-2 menus will never overflow viewport (focused
* elements should always be in viewport per accessibility guidelines).
*/
- max-height: calc(100vh - 12.375rem);
+ max-height: calc(100vh - var(--site-header-height-wide) - var(--sp));
margin-top: 0;
- padding-top: 3.375rem;
- padding-bottom: 3.375rem;
+ padding-top: calc(var(--sp)*3);
+ padding-bottom: calc(var(--sp)*3);
transition: none;
transform: translate(-50%, -1.25rem);
opacity: 0;
/* Intentionally not using CSS logical properties. */
- border-top: solid #2494db 9px;
+ border-top: solid var(--color--blue-50) var(--sp0-5);
border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */
border-bottom: solid 1px transparent;
border-left: solid 1px transparent;
border-radius: 0 0 2px 2px;
- background: #fff;
+ background: var(--color--white);
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08)
}
@@ -233,7 +246,7 @@
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus:before {
top: 0;
- left: -0.5625rem;
+ left: calc(var(--sp0-5)*-1);
height: 100%;
transform: none;
}
@@ -255,8 +268,8 @@
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
- padding-top: 0.5625rem;
- padding-bottom: 0.5625rem
+ padding-top: var(--sp0-5);
+ padding-bottom: var(--sp0-5)
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after {
@@ -274,7 +287,7 @@ body:not(.is-always-mobile-nav) {
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
position: absolute;
z-index: 105; /* Match level 2 menus. */
- top: calc(100% - 1.125rem);
+ top: calc(100% - var(--sp));
left: 50%;
visibility: hidden;
width: 0;
@@ -283,7 +296,7 @@ body:not(.is-always-mobile-nav) {
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-right: solid 10px transparent;
- border-bottom: solid 10px #2494db;
+ border-bottom: solid 10px var(--color--blue-50);
border-left: solid 10px transparent
}
@@ -301,7 +314,7 @@ body:not(.is-always-mobile-nav) {
*/
}
body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {
- max-height: calc(100vh - 7.875rem);
+ max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) + var(--sp4));
}
}
@@ -315,22 +328,22 @@ body:not(.is-always-mobile-nav) {
/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
}
body:not(.is-always-mobile-nav).toolbar-vertical .primary-nav__menu--level-2, body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed .primary-nav__menu--level-2 {
- max-height: calc(100vh - 14.8125rem);
+ max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height));
}
body:not(.is-always-mobile-nav).toolbar-vertical .is-fixed .primary-nav__menu--level-2, body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed .is-fixed .primary-nav__menu--level-2 {
- max-height: calc(100vh - 10.3125rem);
+ max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) + var(--sp4));
}
body:not(.is-always-mobile-nav) {
/* Toolbar is horizontal fixed, and tray is open. */
}
body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .primary-nav__menu--level-2 {
- max-height: calc(100vh - 17.3125rem);
+ max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) - var(--toolbar-tray-height));
}
body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .is-fixed .primary-nav__menu--level-2 {
- max-height: calc(100vh - 12.8125rem);
+ max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) - var(--toolbar-tray-height) + var(--sp4));
}
}
diff --git a/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css b/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css
index 65c7019c0d7a4ced7297a95f713d5d42ccb1681a..27629f00f62d38685ae91e8202e1577385eb91c9 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css
@@ -3,7 +3,7 @@
* Nav Primary (wide widths).
*/
-@import "../../base/variables.pcss.css";
+@import "../../base/media-queries.pcss.css";
body:not(.is-always-mobile-nav) {
@media (--nav) {
diff --git a/core/themes/olivero/css/components/navigation/nav-primary.css b/core/themes/olivero/css/components/navigation/nav-primary.css
index c66931d62cc4f96a1e3e717ca6990f3c8e77102e..af3c14508652b2e3f31ba33ed7acc587e32532b9 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary.css
@@ -10,13 +10,26 @@
* Nav Primary.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.primary-nav__menu {
flex-wrap: wrap;
list-style: none;
}
.primary-nav__menu-item {
- margin-bottom: 0.5625rem
+ margin-bottom: var(--sp0-5)
}
.primary-nav__menu-item:last-child {
@@ -32,16 +45,16 @@
.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,
.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
/* Ensure that long text doesn't make the mobile expand button wrap. */
- flex-basis: calc(100% - 3.375rem);
+ flex-basis: calc(100% - var(--sp3));
}
.primary-nav__menu-link {
flex-grow: 1;
text-decoration: none;
- color: #0d1214;
+ color: var(--color--gray-0);
font-size: 1.75rem;
font-weight: bold;
- line-height: 2.25rem
+ line-height: var(--sp2)
}
.primary-nav__menu-link:hover {
@@ -49,7 +62,7 @@
}
.primary-nav__menu-link:focus {
- outline: auto 2px #2494db;
+ outline: auto 2px var(--color--blue-50);
outline-offset: 2px;
}
@@ -70,9 +83,9 @@
}
.primary-nav__menu-link--nolink {
- padding-top: 0.5625rem;
- padding-bottom: 0.5625rem;
- color: #6e7172;
+ padding-top: var(--sp0-5);
+ padding-bottom: var(--sp0-5);
+ color: var(--color--gray-20);
font-weight: normal;
}
@@ -112,11 +125,11 @@
}
[dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
- padding-right: 3.375rem;
+ padding-right: var(--sp3);
}
[dir="rtl"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
- padding-left: 3.375rem;
+ padding-left: var(--sp3);
}
.primary-nav__menu-link--button.primary-nav__menu-link--has-children { /* Ensure text does not overlap icon. */
@@ -135,12 +148,12 @@
.primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,
.primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
position: absolute;
- top: 1.625rem; /* Visually align button with menu link text. */
+ top: calc(var(--sp0-5) + 1.0625rem); /* Visually align button with menu link text. */
width: 1.125rem;
height: 0;
content: "";
/* Intentionally not using CSS logical properties. */
- border-top: solid 3px #2494db;
+ border-top: solid 3px var(--color--blue-50);
}
.primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
@@ -172,8 +185,8 @@
position: relative;
display: inline-flex;
align-items: center;
- padding-top: 0.5625rem;
- padding-bottom: 0.5625rem
+ padding-top: var(--sp0-5);
+ padding-bottom: var(--sp0-5)
}
[dir="ltr"] .primary-nav__menu-link-inner:after {
@@ -194,7 +207,7 @@
transform: scaleX(0);
transform-origin: left;
/* Intentionally not using CSS logical properties. */
- border-top: solid 5px #2494db;
+ border-top: solid 5px var(--color--blue-50);
}
.primary-nav__menu-link:hover .primary-nav__menu-link-inner:after {
@@ -255,27 +268,27 @@
*/
[dir="ltr"] .primary-nav__menu--level-2 {
- margin-left: -1.125rem;
+ margin-left: calc(var(--sp)*-1);
}
[dir="rtl"] .primary-nav__menu--level-2 {
- margin-right: -1.125rem;
+ margin-right: calc(var(--sp)*-1);
}
[dir="ltr"] .primary-nav__menu--level-2 {
- padding-left: 2.8125rem;
+ padding-left: var(--sp2-5);
}
[dir="rtl"] .primary-nav__menu--level-2 {
- padding-right: 2.8125rem;
+ padding-right: var(--sp2-5);
}
[dir="ltr"] .primary-nav__menu--level-2 {
- border-left: solid 18px #2494db;
+ border-left: solid var(--sp) var(--color--blue-50);
}
[dir="rtl"] .primary-nav__menu--level-2 {
- border-right: solid 18px #2494db;
+ border-right: solid var(--sp) var(--color--blue-50);
}
.primary-nav__menu--level-2 {
@@ -292,26 +305,26 @@
.primary-nav__menu--level-2.is-active-menu-parent {
visibility: visible;
max-height: none;
- margin-top: 1.6875rem;
+ margin-top: var(--sp1-5);
opacity: 1;
}
@media (min-width: 43.75rem) {
[dir="ltr"] .primary-nav__menu--level-2 {
- margin-left: -3.375rem;
+ margin-left: calc(var(--sp3)*-1);
}
[dir="rtl"] .primary-nav__menu--level-2 {
- margin-right: -3.375rem;
+ margin-right: calc(var(--sp3)*-1);
}
[dir="ltr"] .primary-nav__menu--level-2 {
- padding-left: 3.375rem;
+ padding-left: var(--sp3);
}
[dir="rtl"] .primary-nav__menu--level-2 {
- padding-right: 3.375rem;
+ padding-right: var(--sp3);
}
}
@@ -329,7 +342,7 @@
.primary-nav__menu-link--level-2 {
font-size: 1rem;
font-weight: normal;
- line-height: 1.125rem;
+ line-height: var(--sp);
}
html:not(.js) .primary-nav__menu--level-2 {
diff --git a/core/themes/olivero/css/components/navigation/nav-primary.pcss.css b/core/themes/olivero/css/components/navigation/nav-primary.pcss.css
index cc7550e9ae66c73094103017731d175b8d726729..051cac454199e9b8841106a97bf8c984a933f74a 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary.pcss.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary.pcss.css
@@ -3,7 +3,7 @@
* Nav Primary.
*/
-@import "../../base/variables.pcss.css";
+@import "../../base/media-queries.pcss.css";
.primary-nav__menu {
flex-wrap: wrap;
diff --git a/core/themes/olivero/css/components/navigation/nav-secondary.css b/core/themes/olivero/css/components/navigation/nav-secondary.css
index 5ccab88c1e685d63a33e72f65b31d9df7729eded..1a4cee1c79a8031a922c4a219268a58c6ab01054 100644
--- a/core/themes/olivero/css/components/navigation/nav-secondary.css
+++ b/core/themes/olivero/css/components/navigation/nav-secondary.css
@@ -10,9 +10,22 @@
* Secondary navigation styling.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.secondary-nav {
letter-spacing: 0.02em;
- font-size: 0.875rem;
+ font-size: var(--font-size-s);
font-weight: 600;
}
@@ -70,18 +83,18 @@
}
[dir="ltr"] .secondary-nav__menu-item:not(:last-child) {
- margin-right: 1.6875rem;
+ margin-right: var(--sp1-5);
}
[dir="rtl"] .secondary-nav__menu-item:not(:last-child) {
- margin-left: 1.6875rem;
+ margin-left: var(--sp1-5);
}
.secondary-nav__menu-link {
position: relative;
display: inline-flex;
align-items: center;
- height: 2.25rem;
+ height: var(--sp2);
text-decoration: none;
color: inherit
}
@@ -107,16 +120,16 @@
@media (min-width: 75rem) {
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
- margin-left: 1.125rem;
+ margin-left: var(--sp);
}
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
- margin-right: 1.125rem;
+ margin-right: var(--sp);
}
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
- padding-left: 2.25rem;
+ padding-left: var(--sp2);
}
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
- padding-right: 2.25rem;
+ padding-right: var(--sp2);
}
body:not(.is-always-mobile-nav) .secondary-nav {
position: relative;
@@ -135,18 +148,18 @@
position: absolute;
top: 50%;
width: 2px;
- height: 2.25rem;
+ height: var(--sp2);
content: "";
transform: translateY(-50%);
- background-color: #d7e1e8;
+ background-color: var(--color--gray-70);
}
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
- margin-right: 2.25rem;
+ margin-right: var(--sp2);
}
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
- margin-left: 2.25rem;
+ margin-left: var(--sp2);
}
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
position: relative;
@@ -157,11 +170,11 @@
position: absolute;
top: 50%;
left: 50%;
- width: calc(100% + 1.125rem);
- height: 3.375rem;
+ width: calc(100% + var(--sp));
+ height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
- border: solid 2px #2494db;
+ border: solid 2px var(--color--blue-50);
border-radius: 0.25rem;
}
}
diff --git a/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css b/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css
index 99290911b9b18465e193882dc99a76d408f101c9..281af511b570bfe94e0bb39ddb61d1a238606043 100644
--- a/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css
+++ b/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css
@@ -3,7 +3,7 @@
* Secondary navigation styling.
*/
-@import "../../base/variables.pcss.css";
+@import "../../base/media-queries.pcss.css";
.secondary-nav {
letter-spacing: 0.02em;
diff --git a/core/themes/olivero/css/components/navigation/wide-nav-expand.css b/core/themes/olivero/css/components/navigation/wide-nav-expand.css
index b0e00827911eb271b7caf12037159e0693db359c..f5abed20113ed9070b2e70a320b5986f33530d7e 100644
--- a/core/themes/olivero/css/components/navigation/wide-nav-expand.css
+++ b/core/themes/olivero/css/components/navigation/wide-nav-expand.css
@@ -10,6 +10,19 @@
* Button which expands the navigation at wide viewport widths.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.wide-nav-expand {
display: none
}
@@ -22,13 +35,13 @@
flex-shrink: 0;
align-items: center;
justify-content: center;
- width: 5.625rem;
- height: 6.75rem;
+ width: var(--content-left);
+ height: var(--sp6);
cursor: pointer;
pointer-events: auto;
- color: #fff;
+ color: var(--color--white);
border: 0;
- background-color: #2494db
+ background-color: var(--color--blue-50)
}
.wide-nav-expand:focus {
@@ -53,7 +66,7 @@ body.is-always-mobile-nav .wide-nav-expand {
.wide-nav-expand__icon {
position: relative;
- width: 2.25rem;
+ width: var(--sp2);
height: 1.3125rem;
transition: opacity 0.2s;
pointer-events: none;
diff --git a/core/themes/olivero/css/components/navigation/wide-nav-expand.pcss.css b/core/themes/olivero/css/components/navigation/wide-nav-expand.pcss.css
index d23be8aaea5eb84d5f60bd3061c9331462b98cbb..d821b498cb70e53a96a4e3908ca8ca040b881ffa 100644
--- a/core/themes/olivero/css/components/navigation/wide-nav-expand.pcss.css
+++ b/core/themes/olivero/css/components/navigation/wide-nav-expand.pcss.css
@@ -3,7 +3,7 @@
* Button which expands the navigation at wide viewport widths.
*/
-@import "../../base/variables.pcss.css";
+@import "../../base/media-queries.pcss.css";
.wide-nav-expand {
display: none;
diff --git a/core/themes/olivero/css/components/node-preview-container.css b/core/themes/olivero/css/components/node-preview-container.css
index 209ce40021e64906e88ec2981f165f922ecf1cda..ccc947bc036d388988a1465463d47a4b1822b283 100644
--- a/core/themes/olivero/css/components/node-preview-container.css
+++ b/core/themes/olivero/css/components/node-preview-container.css
@@ -10,26 +10,39 @@
* Node preview container styling.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .node-preview-container {
- padding-left: 0.5625rem;
+ padding-left: var(--sp0-5);
}
[dir="rtl"] .node-preview-container {
- padding-right: 0.5625rem;
+ padding-right: var(--sp0-5);
}
[dir="ltr"] .node-preview-container {
- padding-right: 0.5625rem;
+ padding-right: var(--sp0-5);
}
[dir="rtl"] .node-preview-container {
- padding-left: 0.5625rem;
+ padding-left: var(--sp0-5);
}
.node-preview-container {
padding-top: 0;
padding-bottom: 0;
- background: #fff;
+ background: var(--color--white);
box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
}
@@ -38,7 +51,7 @@
}
body.toolbar-vertical.toolbar-tray-open .node-preview-container {
- max-width: calc(100vw - 15.875rem);
+ max-width: calc(100vw - var(--toolbar-tray-vertical-width) - var(--scrollbar-width));
}
.node-preview-form-select {
@@ -64,6 +77,6 @@ body.toolbar-vertical.toolbar-tray-open .node-preview-container {
}
.node-preview-backlink {
- margin-top: 0.5625rem;
- margin-bottom: 0.5625rem;
+ margin-top: var(--sp0-5);
+ margin-bottom: var(--sp0-5);
}
diff --git a/core/themes/olivero/css/components/node-preview-container.pcss.css b/core/themes/olivero/css/components/node-preview-container.pcss.css
index 53e1f1d4033323ff9e50c40584317d5706b013f3..bc5708d2f7698fd994e67d8db98632aa32a74609 100644
--- a/core/themes/olivero/css/components/node-preview-container.pcss.css
+++ b/core/themes/olivero/css/components/node-preview-container.pcss.css
@@ -3,7 +3,7 @@
* Node preview container styling.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.node-preview-container {
padding-block: 0;
diff --git a/core/themes/olivero/css/components/node-teaser.css b/core/themes/olivero/css/components/node-teaser.css
index 09b63b683fb6eb338f779b77a0584ceb532fb83d..b87157cd8b31c0e27a0059b402d951a2183ea78e 100644
--- a/core/themes/olivero/css/components/node-teaser.css
+++ b/core/themes/olivero/css/components/node-teaser.css
@@ -10,27 +10,40 @@
* Node Teaser specific styles.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.node--view-mode-teaser {
position: relative; /* Anchor after pseudo-element. */
- margin-bottom: 1.6875rem
+ margin-bottom: var(--sp1-5)
}
.node--view-mode-teaser:after {
position: absolute;
bottom: 0;
- width: 3.375rem;
+ width: var(--sp3);
height: 0;
content: "";
/* Intentionally not using CSS logical properties. */
- border-top: solid 2px #e7edf1;
+ border-top: solid 2px var(--color--gray-80);
}
.node--view-mode-teaser .node__meta {
- margin-bottom: 1.125rem
+ margin-bottom: var(--sp)
}
.node--view-mode-teaser .node__meta a {
- color: #0d77b5;
+ color: var(--color--blue-20);
font-weight: bold;
}
@@ -49,23 +62,23 @@
}
[dir="ltr"] .node--view-mode-teaser .primary-image {
- margin-right: 1.125rem
+ margin-right: var(--sp1)
}
[dir="rtl"] .node--view-mode-teaser .primary-image {
- margin-left: 1.125rem
+ margin-left: var(--sp1)
}
.node--view-mode-teaser .primary-image {
flex-shrink: 0;
margin: 0;
- margin-bottom: 1.125rem
+ margin-bottom: var(--sp1)
/* Ensure title does not wrap under image until necessary. */
}
.node--view-mode-teaser .primary-image + .node__title {
- flex-basis: calc(100% - 5.0625rem)
+ flex-basis: calc(100% - var(--sp)*4.5)
}
@media (min-width: 62.5rem) {
@@ -80,8 +93,8 @@
}
.node--view-mode-teaser .primary-image img {
- width: 3.9375rem;
- height: 3.9375rem;
+ width: calc(var(--sp)*3.5);
+ height: calc(var(--sp)*3.5);
object-fit: cover;
border-radius: 50%
}
@@ -89,35 +102,35 @@
@media (min-width: 62.5rem) {
.node--view-mode-teaser .primary-image img {
- width: calc(7.14286vw - 2.31696rem);
- height: calc(7.14286vw - 2.31696rem)
+ width: var(--grid-col-width--lg);
+ height: var(--grid-col-width--lg)
}
}
@media (min-width: 75rem) {
.node--view-mode-teaser .primary-image img {
- width: calc(7.14286vw - 2.87946rem);
- height: calc(7.14286vw - 2.87946rem)
+ width: var(--grid-col-width--nav);
+ height: var(--grid-col-width--nav)
}
}
@media (min-width: 90rem) {
.node--view-mode-teaser .primary-image img {
- width: 3.61607rem;
- height: 3.61607rem
+ width: var(--grid-col-width--max);
+ height: var(--grid-col-width--max)
}
}
@media (min-width: 62.5rem) {
[dir="ltr"] .node--view-mode-teaser .primary-image {
- left: calc(-7.14286vw - -1.07143px)
+ left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
}
[dir="rtl"] .node--view-mode-teaser .primary-image {
- right: calc(-7.14286vw - -1.07143px)
+ right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
}
.node--view-mode-teaser .primary-image {
@@ -130,38 +143,38 @@
@media (min-width: 75rem) {
[dir="ltr"] .node--view-mode-teaser .primary-image {
- left: calc(-7.14286vw - -0.62946rem)
+ left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
}
[dir="rtl"] .node--view-mode-teaser .primary-image {
- right: calc(-7.14286vw - -0.62946rem)
+ right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
}
}
@media (min-width: 90rem) {
[dir="ltr"] .node--view-mode-teaser .primary-image {
- left: -5.86607rem
+ left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
}
[dir="rtl"] .node--view-mode-teaser .primary-image {
- right: -5.86607rem
+ right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
}
}
.node--view-mode-teaser .node__title {
margin: 0;
- margin-bottom: 1.125rem;
- color: #0d1214;
+ margin-bottom: var(--sp1);
+ color: var(--color--gray-0);
font-size: 1.5rem;
- line-height: 1.6875rem
+ line-height: var(--line-height-base)
}
@media (min-width: 62.5rem) {
.node--view-mode-teaser .node__title {
- font-size: 2.25rem;
- line-height: 3.375rem
+ font-size: var(--sp2);
+ line-height: var(--sp3)
}
}
@@ -198,7 +211,7 @@
}
.node--view-mode-teaser .field--tag-ref {
- margin-top: 1.125rem;
+ margin-top: var(--sp1);
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
@@ -208,14 +221,14 @@
@media (min-width: 62.5rem) {
.node--view-mode-teaser .field--tag-ref {
- margin-top: 2.25rem
+ margin-top: var(--sp2)
}
}
@media (min-width: 62.5rem) {
.node--view-mode-teaser {
- margin-bottom: 3.375rem
+ margin-bottom: var(--sp3)
}
}
diff --git a/core/themes/olivero/css/components/node-teaser.pcss.css b/core/themes/olivero/css/components/node-teaser.pcss.css
index 82335fa89a44f8d7c2a09169af6acd78ca8b8e7b..e20b39260772dc490e9f4f174bfbd4839c6b1cde 100644
--- a/core/themes/olivero/css/components/node-teaser.pcss.css
+++ b/core/themes/olivero/css/components/node-teaser.pcss.css
@@ -3,7 +3,7 @@
* Node Teaser specific styles.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.node--view-mode-teaser {
position: relative; /* Anchor after pseudo-element. */
diff --git a/core/themes/olivero/css/components/node.css b/core/themes/olivero/css/components/node.css
index 6fe21a532390593d61c46749f28f852250450e22..ba5a2a5bf0d42fe9d7269ce004675aa32bd134da 100644
--- a/core/themes/olivero/css/components/node.css
+++ b/core/themes/olivero/css/components/node.css
@@ -10,13 +10,26 @@
* Node specific styles.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.node__meta {
display: flex;
align-items: center;
- margin-bottom: 1.125rem;
- color: #6e7172;
+ margin-bottom: var(--sp1);
+ color: var(--color--gray-20);
font-size: 0.875rem;
- line-height: 1.125rem
+ line-height: var(--sp)
}
.node__meta a {
@@ -26,21 +39,21 @@
@media (min-width: 31.25rem) {
.node__meta {
- margin-bottom: 2.25rem
+ margin-bottom: var(--sp2)
}
}
[dir="ltr"] .node__author-image img {
- margin-right: 0.5625rem
+ margin-right: var(--sp0-5)
}
[dir="rtl"] .node__author-image img {
- margin-left: 0.5625rem
+ margin-left: var(--sp0-5)
}
.node__author-image img {
- width: 2.8125rem;
- height: 2.8125rem;
+ width: var(--sp2-5);
+ height: var(--sp2-5);
object-fit: cover;
border-radius: 50%;
}
@@ -49,9 +62,9 @@
padding-bottom: 0.1875rem;
transition: background-size 0.2s, color 0.2s;
text-decoration: none;
- color: #0d1214;
+ color: var(--color--gray-0);
background-color: transparent;
- background-image: linear-gradient(#2494db, #2494db); /* Two values are needed for IE11 support. */
+ background-image: linear-gradient(var(--color--blue-50), var(--color--blue-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat;
background-position: bottom left; /* LTR */
background-size: 0 0.1875rem
@@ -59,7 +72,7 @@
.node__title a:hover,
.node__title a:focus {
- color: #0d77b5;
+ color: var(--color--blue-20);
}
[dir="rtl"] .node__title {
@@ -67,13 +80,13 @@
}
.node__content {
- padding-bottom: 1.6875rem
+ padding-bottom: var(--sp1-5)
}
@media (min-width: 62.5rem) {
.node__content {
- padding-bottom: 3.375rem
+ padding-bottom: var(--sp3)
}
}
diff --git a/core/themes/olivero/css/components/node.pcss.css b/core/themes/olivero/css/components/node.pcss.css
index 920332afbb15715d19d0822aa6f1f06e64cffd53..e9a3dde2f3f0fbd52933c9cf58b31e0ff89f9e54 100644
--- a/core/themes/olivero/css/components/node.pcss.css
+++ b/core/themes/olivero/css/components/node.pcss.css
@@ -3,7 +3,7 @@
* Node specific styles.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.node__meta {
display: flex;
diff --git a/core/themes/olivero/css/components/off-canvas.css b/core/themes/olivero/css/components/off-canvas.css
index 2054b7516bbf179bd4dbcdfc3c5aa9cc625aa420..06f930538412603d9115e1d8e1903ad39d2b33c2 100644
--- a/core/themes/olivero/css/components/off-canvas.css
+++ b/core/themes/olivero/css/components/off-canvas.css
@@ -10,6 +10,19 @@
* Settings tray specific styles.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] #drupal-off-canvas .form-type-boolean {
margin-left: 0
}
@@ -19,14 +32,14 @@
}
#drupal-off-canvas .form-type-boolean {
- line-height: 1.125rem
+ line-height: var(--line-height-s)
}
#drupal-off-canvas .form-type-boolean input[type="checkbox"],
#drupal-off-canvas .form-type-boolean input[type="radio"] {
float: none;
- width: 0.84375rem;
- height: 0.84375rem;
+ width: var(--sp0-75);
+ height: var(--sp0-75);
transform: none;
vertical-align: middle;
}
@@ -61,7 +74,6 @@
#drupal-off-canvas .olivero-details__summary {
display: block;
- list-style: disc outside none;
list-style: initial
}
diff --git a/core/themes/olivero/css/components/off-canvas.pcss.css b/core/themes/olivero/css/components/off-canvas.pcss.css
index 5d0c05c491f9fd0722ce2248ea900e49f1a394d4..5d67cd381469ac74255c40486f45a701c42005db 100644
--- a/core/themes/olivero/css/components/off-canvas.pcss.css
+++ b/core/themes/olivero/css/components/off-canvas.pcss.css
@@ -3,7 +3,7 @@
* Settings tray specific styles.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
#drupal-off-canvas {
& .form-type-boolean {
diff --git a/core/themes/olivero/css/components/page-title.css b/core/themes/olivero/css/components/page-title.css
index e8549449f021c5eb4b065ac4202158337af3d4ea..4757231c06a03a97b262a4dae201a2d756b4076b 100644
--- a/core/themes/olivero/css/components/page-title.css
+++ b/core/themes/olivero/css/components/page-title.css
@@ -10,6 +10,19 @@
* Page title.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.page-title {
/*
Necessary to properly display the star icon from core's shortcut
diff --git a/core/themes/olivero/css/components/page-title.pcss.css b/core/themes/olivero/css/components/page-title.pcss.css
index 62b1336db8872db7b606eb0421e032f9771a91ed..1f66a2c1b99c38ff25769ed9a4bf452783592c2f 100644
--- a/core/themes/olivero/css/components/page-title.pcss.css
+++ b/core/themes/olivero/css/components/page-title.pcss.css
@@ -3,7 +3,7 @@
* Page title.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.page-title {
/*
diff --git a/core/themes/olivero/css/components/pager.css b/core/themes/olivero/css/components/pager.css
index 522da38c596111a714da7ee2b99c335bec52fb61..9a6cb28ecbb64305d8090df229460709edef8625 100644
--- a/core/themes/olivero/css/components/pager.css
+++ b/core/themes/olivero/css/components/pager.css
@@ -10,6 +10,19 @@
* Styles for pagination.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .pager__items {
margin-left: 0;
}
@@ -50,18 +63,18 @@
display: flex;
align-items: center;
justify-content: center;
- width: 2.8125rem;
- height: 2.8125rem;
+ width: var(--sp2-5);
+ height: var(--sp2-5);
cursor: default;
- color: #6e7172;
- background-color: #fff
+ color: var(--color--gray-20);
+ background-color: var(--color--white)
}
@media (min-width: 31.25rem) {
.pager__item {
- width: 3.375rem;
- height: 3.375rem
+ width: var(--sp3);
+ height: var(--sp3)
}
}
@@ -70,8 +83,8 @@
}
.pager__item--active {
- color: #fff;
- background-color: #0d77b5;
+ color: var(--color--white);
+ background-color: var(--color--blue-20);
}
.pager__link {
@@ -81,16 +94,16 @@
width: 100%;
height: 100%;
text-decoration: none;
- color: #6e7172;
+ color: var(--color--gray-20);
}
.pager__link:hover {
- background-color: #e7edf1;
+ background-color: var(--color--gray-80);
}
.pager__link:focus {
- color: #0d77b5;
- outline: solid 2px #0d77b5;
+ color: var(--color--blue-20);
+ outline: solid 2px var(--color--blue-20);
outline-offset: -2px;
}
diff --git a/core/themes/olivero/css/components/pager.pcss.css b/core/themes/olivero/css/components/pager.pcss.css
index 9aac50ba61126d28fb4fb93d1394f79f9f4b8f43..c60ea0abb7c213990771398f58391c7a3f45f4b5 100644
--- a/core/themes/olivero/css/components/pager.pcss.css
+++ b/core/themes/olivero/css/components/pager.pcss.css
@@ -3,7 +3,7 @@
* Styles for pagination.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.pager__items {
display: flex;
diff --git a/core/themes/olivero/css/components/powered-by-block.css b/core/themes/olivero/css/components/powered-by-block.css
index 478d23fd06ebec53eeb4796b67fa7b8ec66dcecc..a312435f18ee632d8e6847555ada531bafd1c488 100644
--- a/core/themes/olivero/css/components/powered-by-block.css
+++ b/core/themes/olivero/css/components/powered-by-block.css
@@ -10,10 +10,23 @@
* Powered by block specific styles.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.block-system-powered-by-block {
letter-spacing: 0.02em;
font-size: 0.875rem;
- line-height: 1.125rem
+ line-height: var(--sp)
}
.block-system-powered-by-block a {
@@ -26,16 +39,16 @@
}
[dir="ltr"] .block-system-powered-by-block .drupal-logo {
- margin-left: 0.28125rem
+ margin-left: calc(var(--sp)/4)
}
[dir="rtl"] .block-system-powered-by-block .drupal-logo {
- margin-right: 0.28125rem
+ margin-right: calc(var(--sp)/4)
}
.block-system-powered-by-block .drupal-logo {
display: inline-block;
- margin-top: -0.28125rem;
+ margin-top: calc(var(--sp)*-1/4);
}
.block-system-powered-by-block svg {
@@ -49,9 +62,9 @@
}
.site-footer .block-system-powered-by-block a {
- color: #fff;
+ color: var(--color--white);
}
.site-footer .block-system-powered-by-block svg path {
- fill: #fff;
+ fill: var(--color--white);
}
diff --git a/core/themes/olivero/css/components/powered-by-block.pcss.css b/core/themes/olivero/css/components/powered-by-block.pcss.css
index 1de64e6d019ff13752d9a2ef0c6d2a1a83e80217..879ec4e07a688db159ebe36c63e4b4f5da2dbc61 100644
--- a/core/themes/olivero/css/components/powered-by-block.pcss.css
+++ b/core/themes/olivero/css/components/powered-by-block.pcss.css
@@ -3,7 +3,7 @@
* Powered by block specific styles.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.block-system-powered-by-block {
letter-spacing: 0.02em;
diff --git a/core/themes/olivero/css/components/progress.css b/core/themes/olivero/css/components/progress.css
index be11dfd575fa8580e76cc20a1b074b2ecdf9dd2e..b2f9116b12fed4013192019621da8b0756a1843f 100644
--- a/core/themes/olivero/css/components/progress.css
+++ b/core/themes/olivero/css/components/progress.css
@@ -10,14 +10,27 @@
* Progress bar specific styles.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.progress__track {
overflow: hidden;
- height: 1.125rem;
- border: 1px solid #0d77b5;
- border-radius: 0.1875rem;
+ height: var(--sp);
+ border: 1px solid var(--color--blue-20);
+ border-radius: var(--border-radius);
}
.progress__bar {
- height: 1.125rem;
- background-color: #0d77b5;
+ height: var(--sp);
+ background-color: var(--color--blue-20);
}
diff --git a/core/themes/olivero/css/components/progress.pcss.css b/core/themes/olivero/css/components/progress.pcss.css
index a5f300263fc5d359944967155671b1a5814e43ac..ccfdf1afe55f0a75d3080dcd523a52b6b30ffe08 100644
--- a/core/themes/olivero/css/components/progress.pcss.css
+++ b/core/themes/olivero/css/components/progress.pcss.css
@@ -3,7 +3,7 @@
* Progress bar specific styles.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.progress__track {
overflow: hidden;
diff --git a/core/themes/olivero/css/components/search-results.css b/core/themes/olivero/css/components/search-results.css
index 54a2a8bcc70289c65c6bfca4f6c4c7c713db37b6..53b41600f405150571b65b05c881a71f9dcfe26a 100644
--- a/core/themes/olivero/css/components/search-results.css
+++ b/core/themes/olivero/css/components/search-results.css
@@ -10,6 +10,19 @@
* Search results specific styles.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .search-results {
padding-left: 0
}
@@ -27,7 +40,7 @@
}
.search-results {
- margin-bottom: 2.25rem;
+ margin-bottom: var(--sp2);
padding-top: 0;
padding-bottom: 0;
list-style: none
@@ -36,7 +49,7 @@
@media (min-width: 43.75rem) {
.search-results {
- margin-bottom: 3.375rem
+ margin-bottom: var(--sp3)
}
}
@@ -59,9 +72,9 @@
.search-result__title {
margin-top: 0;
margin-bottom: 0;
- color: #0d1214;
+ color: var(--color--gray-0);
font-size: 1.25rem;
- line-height: 1.6875rem
+ line-height: var(--line-height-base)
}
.search-result__title a {
@@ -69,22 +82,22 @@
transition: background-size 0.2s, color 0.2s;
text-decoration: none;
background-color: transparent;
- background-image: linear-gradient(#2494db, #2494db); /* Two values are needed for IE11 support. */
+ background-image: linear-gradient(var(--color--blue-50), var(--color--blue-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat;
background-position: bottom left; /* LTR */
background-size: 0 0.1875rem
}
.search-result__title a:hover {
- color: #0d77b5;
+ color: var(--color--blue-20);
}
@media (min-width: 62.5rem) {
.search-result__title {
- margin-bottom: 1.125rem;
+ margin-bottom: var(--sp1);
font-size: 1.875rem;
- line-height: 3.375rem
+ line-height: var(--sp3)
}
}
@@ -93,43 +106,43 @@
}
.search-result__snippet {
- padding-bottom: 1.5625rem
+ padding-bottom: calc(var(--sp1-5) - 2px)
}
@media (min-width: 62.5rem) {
.search-result__snippet {
- padding-bottom: 3.375rem
+ padding-bottom: var(--sp3)
}
}
.search-result__meta {
display: flex;
align-items: center;
- margin-bottom: 1.125rem;
- color: #6e7172;
+ margin-bottom: var(--sp1);
+ color: var(--color--gray-20);
font-size: 0.875rem;
- line-height: 1.125rem
+ line-height: var(--sp)
}
.search-result__meta a {
- color: #0d77b5;
+ color: var(--color--blue-20);
font-weight: bold;
}
.search-results__item {
position: relative; /* Anchor after pseudo-element. */
- margin-bottom: 1.6875rem
+ margin-bottom: var(--sp1-5)
}
.search-results__item:after {
position: absolute;
bottom: 0;
- width: 3.375rem;
+ width: var(--sp3);
height: 0;
content: "";
/* Intentionally not using CSS logical properties. */
- border-top: solid 2px #e7edf1;
+ border-top: solid 2px var(--color--gray-80);
}
.search-results__item:last-child {
@@ -139,6 +152,6 @@
@media (min-width: 62.5rem) {
.search-results__item {
- margin-bottom: 3.375rem
+ margin-bottom: var(--sp3)
}
}
diff --git a/core/themes/olivero/css/components/search-results.pcss.css b/core/themes/olivero/css/components/search-results.pcss.css
index b485a5d59df7cec4f0c7baebb8b47a054e3a5f2b..6829d527722bacd4173e536312454c744b649a6d 100644
--- a/core/themes/olivero/css/components/search-results.pcss.css
+++ b/core/themes/olivero/css/components/search-results.pcss.css
@@ -3,7 +3,7 @@
* Search results specific styles.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.search-results {
margin-block-end: var(--sp2);
diff --git a/core/themes/olivero/css/components/site-header.css b/core/themes/olivero/css/components/site-header.css
index bc9a9fdd1e6feecc2af42a0769fef8c7923e3ac4..caad8094b75606865ac062a7594455934f24225a 100644
--- a/core/themes/olivero/css/components/site-header.css
+++ b/core/themes/olivero/css/components/site-header.css
@@ -10,6 +10,19 @@
* Site header.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.site-header {
position: relative
}
@@ -18,7 +31,7 @@
.site-header {
/* Necessary to keep the content from jumping up when header transitions to fixed. */
- min-height: 11.25rem;
+ min-height: var(--site-header-height-wide);
border-bottom: solid 1px transparent /* Will show in Windows high contrast mode. */
}
}
@@ -28,9 +41,8 @@
z-index: 102;
display: flex;
align-items: flex-end;
- -ms-grid-row-align: stretch;
align-self: stretch;
- background-color: #2494db;
+ background-color: var(--color--blue-50);
}
.site-header__fixable {
@@ -49,29 +61,29 @@
body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
position: fixed;
z-index: 102; /* Appear above body content that is position: relative */
- top: -4.5rem;
- max-width: 98.125rem;
+ top: calc(var(--sp4)*-1);
+ max-width: var(--max-bg-color);
}
body:not(.is-always-mobile-nav) {
/* Toolbar is fixed, and tray is either vertical or closed and horizontal. */
}
body:not(.is-always-mobile-nav).toolbar-vertical.toolbar-fixed .site-header__fixable.is-fixed, body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed .site-header__fixable.is-fixed {
- top: -2.0625rem;
+ top: calc(var(--toolbar-height) - var(--sp4));
}
body:not(.is-always-mobile-nav) {
/* Toolbar is fixed, and tray is open and horizontal. */
}
body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .site-header__fixable.is-fixed {
- top: 0.4375rem;
+ top: calc(var(--toolbar-tray-height) + var(--toolbar-height) - var(--sp4));
}
}
.site-header__inner {
z-index: 1; /* Appear in front of Drupal's tabs. */
flex-grow: 1;
- width: calc(100vw - 5.625rem);
- background: #fff;
+ width: calc(100vw - var(--content-left));
+ background: var(--color--white);
}
/*
diff --git a/core/themes/olivero/css/components/site-header.pcss.css b/core/themes/olivero/css/components/site-header.pcss.css
index 7bc651315c4a18ad8822d1845b35e07c29878939..f3c386b3fe2f78f7bbdf939c8a9e47e7542c726d 100644
--- a/core/themes/olivero/css/components/site-header.pcss.css
+++ b/core/themes/olivero/css/components/site-header.pcss.css
@@ -3,7 +3,7 @@
* Site header.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.site-header {
position: relative;
diff --git a/core/themes/olivero/css/components/skip-link.css b/core/themes/olivero/css/components/skip-link.css
index 258a7271fe775f72bae272947e62362b5e23d49f..e2804495e7092b52e1f7a1c820fe96eb6371319d 100644
--- a/core/themes/olivero/css/components/skip-link.css
+++ b/core/themes/olivero/css/components/skip-link.css
@@ -12,37 +12,50 @@
* Allows keyboard users to quickly skip to the main content of the page.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .skip-link {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
[dir="rtl"] .skip-link {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="ltr"] .skip-link {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="rtl"] .skip-link {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
.skip-link {
display: block;
width: 100%;
- max-width: 98.125rem;
- padding-top: 0.5625rem;
- padding-bottom: 0.5625rem;
+ max-width: var(--max-bg-color);
+ padding-top: var(--sp0-5);
+ padding-bottom: var(--sp0-5);
text-decoration: none;
- color: #fff;
+ color: var(--color--white);
outline: 0;
- background-color: #0d1214
+ background-color: var(--color--gray-0)
}
.skip-link:hover {
text-decoration: underline;
- color: #fff;
+ color: var(--color--white);
}
.skip-link:after {
diff --git a/core/themes/olivero/css/components/skip-link.pcss.css b/core/themes/olivero/css/components/skip-link.pcss.css
index ca8a0dc7acacdc4dfe8cd5f854f5f8c2c26046fb..28741bea2b48a3d48a6aaa73d8298f050aa27817 100644
--- a/core/themes/olivero/css/components/skip-link.pcss.css
+++ b/core/themes/olivero/css/components/skip-link.pcss.css
@@ -5,7 +5,7 @@
* Allows keyboard users to quickly skip to the main content of the page.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.skip-link {
display: block;
diff --git a/core/themes/olivero/css/components/table.css b/core/themes/olivero/css/components/table.css
index dd6b748b6f8bec090dadc734b85df11eb0982b9c..4dda446a46a55de1367611d48a19514b22734a56 100644
--- a/core/themes/olivero/css/components/table.css
+++ b/core/themes/olivero/css/components/table.css
@@ -10,19 +10,32 @@
* User generated tables.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.forum table,
.text-content table,
.views-table,
.draggable-table {
- margin-top: 2.25rem;
- margin-bottom: 2.25rem;
+ margin-top: var(--sp2);
+ margin-bottom: var(--sp2);
border-spacing: 0;
- color: #313637;
+ color: var(--color--gray-10);
border: 0;
border-collapse: collapse;
- font-family: "metropolis", sans-serif;
+ font-family: var(--font-sans);
font-size: 1rem;
- line-height: 1.6875rem
+ line-height: var(--sp1-5)
}
[dir="ltr"] .forum table caption,[dir="ltr"] .text-content table caption,[dir="ltr"] .views-table caption,[dir="ltr"] .draggable-table caption {
@@ -34,12 +47,12 @@
}
.forum table caption, .text-content table caption, .views-table caption, .draggable-table caption {
- margin-bottom: 1.125rem;
- color: #313637;
- font-family: "Lora", "georgia", serif;
+ margin-bottom: var(--sp1);
+ color: var(--color--gray-10);
+ font-family: var(--font-serif);
font-size: 0.875rem;
font-style: italic;
- line-height: 1.125rem;
+ line-height: var(--sp);
}
.forum table tr:last-child td, .text-content table tr:last-child td, .views-table tr:last-child td, .draggable-table tr:last-child td {
@@ -76,7 +89,7 @@
.views-table th,[dir="ltr"]
.draggable-table td,[dir="ltr"]
.draggable-table th {
- padding-right: 1.125rem
+ padding-right: var(--sp1)
}
[dir="rtl"] .forum table td,[dir="rtl"]
@@ -87,7 +100,7 @@
.views-table th,[dir="rtl"]
.draggable-table td,[dir="rtl"]
.draggable-table th {
- padding-left: 1.125rem
+ padding-left: var(--sp1)
}
.forum table td,
@@ -98,8 +111,8 @@
.views-table th,
.draggable-table td,
.draggable-table th {
- padding-top: 1.125rem;
- padding-bottom: 1.125rem;
+ padding-top: var(--sp1);
+ padding-bottom: var(--sp1);
vertical-align: top;
}
@@ -131,11 +144,11 @@
margin-top: 0;
margin-bottom: 0;
letter-spacing: 0.02em;
- color: #0d1214;
- border-bottom: 2px solid #2494db;
- font-family: "metropolis", sans-serif;
+ color: var(--color--gray-0);
+ border-bottom: 2px solid var(--color--blue-50);
+ font-family: var(--font-sans);
font-size: 0.875rem;
- line-height: 1.125rem
+ line-height: var(--sp)
/**
* Fixes for styles injected by CKEditor
@@ -168,7 +181,7 @@
.forum table td, .text-content table td, .views-table td, .draggable-table td {
white-space: normal;
- border-bottom: 2px solid #98abb9;
+ border-bottom: 2px solid var(--color--gray-40);
}
.forum table th.checkbox,
@@ -197,7 +210,7 @@
.sticky-header {
z-index: 0;
margin: 0;
- border-bottom: 4px solid #2494db;
+ border-bottom: 4px solid var(--color--blue-50);
}
/* Properly align VBO checkboxes. */
diff --git a/core/themes/olivero/css/components/table.pcss.css b/core/themes/olivero/css/components/table.pcss.css
index 8d4d3c53cb670a8869b72b17434543e19e82b482..886c24408dc180a16663f4938222f5059c4f1b2e 100644
--- a/core/themes/olivero/css/components/table.pcss.css
+++ b/core/themes/olivero/css/components/table.pcss.css
@@ -3,7 +3,7 @@
* User generated tables.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.forum table,
.text-content table,
diff --git a/core/themes/olivero/css/components/tabledrag.css b/core/themes/olivero/css/components/tabledrag.css
index ee42174ec10c76b7d9244543a41224f6433e98f3..0eeccc399d7f05b3ffc8844aad54efad71dc41dc 100644
--- a/core/themes/olivero/css/components/tabledrag.css
+++ b/core/themes/olivero/css/components/tabledrag.css
@@ -10,20 +10,33 @@
* Styles for tabledrag.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.draggable:hover {
- background-color: #f7f9fa;
+ background-color: var(--color--gray-95);
}
.draggable.drag {
- background-color: #f1f4f7;
+ background-color: var(--color--gray-90);
}
.draggable.drag-previous {
- background-color: #e7edf1;
+ background-color: var(--color--gray-80);
}
.drag-previous a {
- color: #313637; /* Ensure proper contrast. */
+ color: var(--color--gray-10); /* Ensure proper contrast. */
}
a.tabledrag-handle,
@@ -41,14 +54,14 @@ a.tabledrag-handle,
}
a.tabledrag-handle .handle {
- width: 2.25rem;
- height: 2.25rem;
+ width: var(--sp2);
+ height: var(--sp2);
margin: 0;
background-position: 50% 5px;
}
.touchevents a.tabledrag-handle .handle {
- height: 2.25rem;
+ height: var(--sp2);
background-position: 50% 5px;
}
@@ -61,16 +74,16 @@ a.tabledrag-handle .handle {
}
[dir="ltr"] .touchevents .draggable td {
- padding-right: 0.5625rem;
+ padding-right: var(--sp0-5);
}
[dir="rtl"] .touchevents .draggable td {
- padding-left: 0.5625rem;
+ padding-left: var(--sp0-5);
}
.touchevents .draggable td {
- padding-top: 0.5625rem;
- padding-bottom: 0.5625rem;
+ padding-top: var(--sp0-5);
+ padding-bottom: var(--sp0-5);
}
.touchevents .draggable .menu-item__link {
diff --git a/core/themes/olivero/css/components/tabledrag.pcss.css b/core/themes/olivero/css/components/tabledrag.pcss.css
index 2a377224d6b8f41d051b85fab722af9c82cefa2d..32dc8a2b86ec57e335de4eff6d09554284428e05 100644
--- a/core/themes/olivero/css/components/tabledrag.pcss.css
+++ b/core/themes/olivero/css/components/tabledrag.pcss.css
@@ -3,7 +3,7 @@
* Styles for tabledrag.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.draggable:hover {
background-color: var(--color--gray-95);
diff --git a/core/themes/olivero/css/components/tabs.css b/core/themes/olivero/css/components/tabs.css
index 18f516e172f4aa814e49538e90949662f56b67c4..f15a2224cb1829866b5e93395413ae6fca2375f6 100644
--- a/core/themes/olivero/css/components/tabs.css
+++ b/core/themes/olivero/css/components/tabs.css
@@ -4,30 +4,56 @@
* https://www.drupal.org/node/3084859
* @preserve
*/
+
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+:root {
+ --tab-active-border-size: 0.375rem;
+}
+
[dir="ltr"] .tabs {
- margin-left: 0
+ margin-left: 0;
}
+
[dir="rtl"] .tabs {
- margin-right: 0
+ margin-right: 0;
}
+
[dir="ltr"] .tabs {
- margin-right: 0
+ margin-right: 0;
}
+
[dir="rtl"] .tabs {
- margin-left: 0
+ margin-left: 0;
}
+
[dir="ltr"] .tabs {
- padding-left: 0
+ padding-left: 0;
}
+
[dir="rtl"] .tabs {
- padding-right: 0
+ padding-right: 0;
}
+
[dir="ltr"] .tabs {
- padding-right: 0
+ padding-right: 0;
}
+
[dir="rtl"] .tabs {
- padding-left: 0
+ padding-left: 0;
}
+
.tabs {
display: flex;
flex-direction: column;
@@ -38,70 +64,88 @@
padding-bottom: 0;
list-style: none
}
+
@media (min-width: 43.75rem) {
+
.tabs {
flex-direction: row;
flex-wrap: wrap
}
}
+
.tabs__tab {
display: none;
margin: 0;
margin-bottom: -1px
}
+
.tabs__tab.is-active {
display: flex;
}
+
@media (min-width: 43.75rem) {
+
.tabs__tab {
display: flex;
margin: 0;
margin-bottom: -1px
}
}
+
html:not(.js) .tabs__tab,
.tabs.is-expanded .tabs__tab {
display: flex;
}
+
.tabs--secondary .tabs__tab {
display: block
}
+
@media (min-width: 43.75rem) {
+
.tabs--secondary .tabs__tab {
display: flex
}
}
+
[dir="ltr"] .tabs__link {
- padding-left: 1.6875rem
+ padding-left: var(--sp1-5);
}
+
[dir="rtl"] .tabs__link {
- padding-right: 1.6875rem
+ padding-right: var(--sp1-5);
}
+
[dir="ltr"] .tabs__link {
- padding-right: 1.6875rem
+ padding-right: var(--sp1-5);
}
+
[dir="rtl"] .tabs__link {
- padding-left: 1.6875rem
+ padding-left: var(--sp1-5);
}
+
.tabs__link {
display: flex;
flex-grow: 1;
align-items: center;
- height: 3.375rem;
+ height: var(--sp3);
padding-top: 0;
padding-bottom: 0;
transition: background-color 0.2s;
text-decoration: none;
letter-spacing: 1px;
- color: #6e7172;
- border: 1px solid #e7edf1;
- background-color: #f7f9fa;
- font-size: 0.875rem;
+ color: var(--color--gray-20);
+ border: 1px solid var(--color--gray-80);
+ background-color: var(--color--gray-95);
+ font-size: var(--font-size-s);
}
+
.tabs--secondary .tabs__link {
text-transform: none
}
+
@media (min-width: 43.75rem) {
+
.tabs--secondary .tabs__link {
border-top-color: transparent;
border-right-color: transparent;
@@ -109,131 +153,160 @@ html:not(.js) .tabs__tab,
background-color: transparent
}
}
+
.tabs__link:focus {
position: relative;
- outline: solid 3px #2494db;
+ outline: solid 3px var(--color--blue-50);
outline-offset: -3px;
}
+
.tabs__link:hover {
- background-color: #e7edf1;
+ background-color: var(--color--gray-80);
}
+
.tabs__link.is-active {
position: relative;
- color: #0d1214;
+ color: var(--color--gray-0);
font-weight: 600
}
+
[dir="ltr"] .tabs__link.is-active:after {
- left: -1px
+ left: -1px;
}
+
[dir="rtl"] .tabs__link.is-active:after {
- right: -1px
+ right: -1px;
}
+
[dir="ltr"] .tabs__link.is-active:after {
- border-left: 6px solid #2494db
+ border-left: var(--tab-active-border-size) solid var(--color--blue-50);
}
+
[dir="rtl"] .tabs__link.is-active:after {
- border-right: 6px solid #2494db
+ border-right: var(--tab-active-border-size) solid var(--color--blue-50);
}
+
.tabs__link.is-active:after {
position: absolute;
bottom: -1px;
height: calc(100% + 2px);
content: "";
}
+
@media (min-width: 43.75rem) {
[dir="ltr"] .tabs__link.is-active:after {
- left: 0
+ left: 0;
}
[dir="rtl"] .tabs__link.is-active:after {
- right: 0
+ right: 0;
}
[dir="ltr"] .tabs__link.is-active:after {
- border-left: 0
+ border-left: 0;
}
[dir="rtl"] .tabs__link.is-active:after {
- border-right: 0
+ border-right: 0;
}
.tabs__link.is-active:after {
width: 100%;
height: auto;
- border-top: 6px solid #2494db;
+ border-top: var(--tab-active-border-size) solid var(--color--blue-50);
}
}
+
[dir="ltr"] .tabs__trigger {
- margin-left: -1px
+ margin-left: -1px;
}
+
[dir="rtl"] .tabs__trigger {
- margin-right: -1px
+ margin-right: -1px;
}
+
[dir="ltr"] .tabs__trigger {
- margin-right: 0
+ margin-right: 0;
}
+
[dir="rtl"] .tabs__trigger {
- margin-left: 0
+ margin-left: 0;
}
+
.tabs__trigger {
display: flex;
align-items: center;
justify-content: center;
- width: 3.375rem;
+ width: var(--sp3);
margin-top: 0;
margin-bottom: 0;
cursor: pointer;
- border: solid 1px #e7edf1;
- background-color: #f7f9fa
+ border: solid 1px var(--color--gray-80);
+ background-color: var(--color--gray-95)
}
+
.tabs__trigger:hover {
- background-color: #e7edf1;
+ background-color: var(--color--gray-80);
}
+
.tabs__trigger:focus {
position: relative;
- border-color: #2494db;
+ border-color: var(--color--blue-50);
outline: none;
}
+
@media (min-width: 43.75rem) {
+
.tabs__trigger {
display: none
}
}
+
html:not(.js) .tabs__trigger {
display: none;
}
+
.tabs__trigger-icon {
position: relative;
display: block;
- width: 1.125rem;
+ width: var(--sp);
height: 0.625rem;
margin-top: -2px
}
+
[dir="ltr"] .tabs__trigger-icon > span {
- left: 0
+ left: 0;
}
+
[dir="rtl"] .tabs__trigger-icon > span {
- right: 0
+ right: 0;
}
+
.tabs__trigger-icon > span {
position: absolute;
display: block;
width: 100%;
transition: transform 0.2s, opacity 0.2s, top 0.2s;
- border-top: solid 2px #2494db
+ border-top: solid 2px var(--color--blue-50)
}
+
.tabs__trigger-icon > span:nth-child(1) {
top: 0;
}
+
.tabs__trigger-icon > span:nth-child(2) {
top: calc(50% + 1px);
}
+
.tabs__trigger-icon > span:nth-child(3) {
top: calc(100% + 2px);
}
+
.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(1) {
top: calc(50% + 1px);
transform: rotate(45deg);
}
+
.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(2) {
opacity: 0;
}
+
.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(3) {
top: calc(50% + 1px);
transform: rotate(-45deg);
diff --git a/core/themes/olivero/css/components/tabs.pcss.css b/core/themes/olivero/css/components/tabs.pcss.css
index 5549b5ed19576efe83df2166e7506e8d4872c0c0..15c4ff98dc869030968d0f1760845ab19dcdc78f 100644
--- a/core/themes/olivero/css/components/tabs.pcss.css
+++ b/core/themes/olivero/css/components/tabs.pcss.css
@@ -1,4 +1,4 @@
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
:root {
--tab-active-border-size: 6px;
diff --git a/core/themes/olivero/css/components/tags.css b/core/themes/olivero/css/components/tags.css
index 8920ed2d43a5aa83af669ec2566a0167879b48c2..b5d4d642ce35e7c65b1ed2251100f7295873fa81 100644
--- a/core/themes/olivero/css/components/tags.css
+++ b/core/themes/olivero/css/components/tags.css
@@ -10,24 +10,37 @@
* Tags field styling.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.field--tags {
display: flex;
- font-family: "metropolis", sans-serif;
+ font-family: var(--font-sans);
}
[dir="ltr"] .field--tags__label {
- margin-right: 1.40625rem;
+ margin-right: calc(var(--sp1-5) - var(--sp0-5)/2);
}
[dir="rtl"] .field--tags__label {
- margin-left: 1.40625rem;
+ margin-left: calc(var(--sp1-5) - var(--sp0-5)/2);
}
.field--tags__label {
margin: 0;
letter-spacing: 0.02em;
- color: #6e7172;
- font-size: 0.875rem;
+ color: var(--color--gray-20);
+ font-size: var(--font-size-s);
font-weight: 600;
line-height: 1.6
}
@@ -65,19 +78,19 @@
}
[dir="ltr"] .field--tags__items {
- margin-left: -0.28125rem;
+ margin-left: calc(var(--sp0-5)/2*-1);
}
[dir="rtl"] .field--tags__items {
- margin-right: -0.28125rem;
+ margin-right: calc(var(--sp0-5)/2*-1);
}
[dir="ltr"] .field--tags__items {
- margin-right: -0.28125rem;
+ margin-right: calc(var(--sp0-5)/2*-1);
}
[dir="rtl"] .field--tags__items {
- margin-left: -0.28125rem;
+ margin-left: calc(var(--sp0-5)/2*-1);
}
[dir="ltr"] .field--tags__items {
@@ -99,38 +112,38 @@
.field--tags__items {
display: flex;
flex-wrap: wrap;
- margin-top: -0.28125rem;
- margin-bottom: -0.28125rem;
+ margin-top: calc(var(--sp0-5)/2*-1);
+ margin-bottom: calc(var(--sp0-5)/2*-1);
padding-top: 0;
padding-bottom: 0;
list-style: none;
}
[dir="ltr"] .field--tags__item {
- margin-left: 0.28125rem;
+ margin-left: calc(var(--sp0-5)/2);
}
[dir="rtl"] .field--tags__item {
- margin-right: 0.28125rem;
+ margin-right: calc(var(--sp0-5)/2);
}
[dir="ltr"] .field--tags__item {
- margin-right: 0.28125rem;
+ margin-right: calc(var(--sp0-5)/2);
}
[dir="rtl"] .field--tags__item {
- margin-left: 0.28125rem;
+ margin-left: calc(var(--sp0-5)/2);
}
.field--tags__item {
display: flex;
- margin-top: 0.28125rem;
- margin-bottom: 0.28125rem;
+ margin-top: calc(var(--sp0-5)/2);
+ margin-bottom: calc(var(--sp0-5)/2);
}
.field--tags__item:nth-last-child(n+2):after {
content: ",";
- font-size: 1rem;
+ font-size: var(--font-size-base);
line-height: 1.5;
}
@@ -140,32 +153,32 @@
align-items: center;
text-decoration: none;
letter-spacing: 0.02em;
- color: #0d77b5;
- font-size: 1rem;
+ color: var(--color--blue-20);
+ font-size: var(--font-size-base);
font-weight: 700;
line-height: 1.5;
}
[dir="ltr"] .node--view-mode-full .field--tags {
- padding-left: 2.25rem;
+ padding-left: var(--sp2);
}
[dir="rtl"] .node--view-mode-full .field--tags {
- padding-right: 2.25rem;
+ padding-right: var(--sp2);
}
[dir="ltr"] .node--view-mode-full .field--tags {
- padding-right: 2.25rem;
+ padding-right: var(--sp2);
}
[dir="rtl"] .node--view-mode-full .field--tags {
- padding-left: 2.25rem;
+ padding-left: var(--sp2);
}
.node--view-mode-full .field--tags {
- margin-top: 4.5rem;
- margin-bottom: 4.5rem;
- padding-top: 1.6875rem;
- padding-bottom: 1.6875rem;
- background-color: #f7f9fa;
+ margin-top: var(--sp4);
+ margin-bottom: var(--sp4);
+ padding-top: var(--sp1-5);
+ padding-bottom: var(--sp1-5);
+ background-color: var(--color--gray-95);
}
diff --git a/core/themes/olivero/css/components/tags.pcss.css b/core/themes/olivero/css/components/tags.pcss.css
index 2017acb2bf3dada47f998334bc16485bc3a4fe6a..887f911d65766d41d9652ee2bd01f49250c64fce 100644
--- a/core/themes/olivero/css/components/tags.pcss.css
+++ b/core/themes/olivero/css/components/tags.pcss.css
@@ -3,7 +3,7 @@
* Tags field styling.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.field--tags {
display: flex;
diff --git a/core/themes/olivero/css/components/text-content.css b/core/themes/olivero/css/components/text-content.css
index dd7d1ad8e20c2e07540407173d1ad27eed61f9c7..1f4eb17b1e9c5217df025e446d69715851453d25 100644
--- a/core/themes/olivero/css/components/text-content.css
+++ b/core/themes/olivero/css/components/text-content.css
@@ -10,11 +10,24 @@
* Text Content.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.text-content,
.cke_editable {
- color: #313637;
- font-family: "Lora", "georgia", serif;
- line-height: 1.6875rem
+ color: var(--color--gray-10);
+ font-family: var(--font-serif);
+ line-height: var(--sp1-5)
/*
@todo
@@ -27,11 +40,11 @@
}
.text-content a, .cke_editable a {
- color: #0d77b5;
- -webkit-text-decoration-color: #0d77b5;
- text-decoration-color: #0d77b5;
+ color: var(--color--blue-20);
+ -webkit-text-decoration-color: var(--color--blue-20);
+ text-decoration-color: var(--color--blue-20);
text-decoration-thickness: 2px;
- word-wrap: break-word
+ overflow-wrap: break-word
}
@supports (box-shadow: none) {
@@ -39,12 +52,12 @@
.text-content a, .cke_editable a {
transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
text-decoration: none;
- box-shadow: inset 0 -2px 0 0 #2494db
+ box-shadow: inset 0 -2px 0 0 var(--color--blue-50)
}
.text-content a:hover, .cke_editable a:hover {
text-decoration: underline;
- color: #000;
+ color: var(--color--black);
/* @todo - #d9ecfa isn't currently a variable. */
box-shadow: inset 0 -2em 0 0 #d9ecfa;
@@ -54,8 +67,8 @@
}
.text-content p, .cke_editable p {
- margin-top: 1.125rem;
- margin-bottom: 1.125rem
+ margin-top: var(--sp);
+ margin-bottom: var(--sp)
}
.text-content p:first-child, .cke_editable p:first-child {
@@ -69,37 +82,37 @@
@media (min-width: 43.75rem) {
.text-content p, .cke_editable p {
- margin-top: 2.25rem;
- margin-bottom: 2.25rem
+ margin-top: var(--sp2);
+ margin-bottom: var(--sp2)
}
}
.text-content code, .cke_editable code {
- background-color: #f7f9fa;
+ background-color: var(--color--gray-95);
}
[dir="ltr"] .text-content pre code,[dir="ltr"] .cke_editable pre code {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
[dir="rtl"] .text-content pre code,[dir="rtl"] .cke_editable pre code {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="ltr"] .text-content pre code,[dir="ltr"] .cke_editable pre code {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="rtl"] .text-content pre code,[dir="rtl"] .cke_editable pre code {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
.text-content pre code, .cke_editable pre code {
display: block;
overflow: auto;
- padding-top: 1.125rem;
- padding-bottom: 1.125rem;
- color: #6e7172;
+ padding-top: var(--sp);
+ padding-bottom: var(--sp);
+ color: var(--color--gray-20);
}
[dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote {
@@ -119,21 +132,21 @@
}
[dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote {
- padding-left: 2.25rem
+ padding-left: var(--sp2)
}
[dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote {
- padding-right: 2.25rem
+ padding-right: var(--sp2)
}
.text-content blockquote, .cke_editable blockquote {
position: relative;
- margin-top: 2.25rem;
- margin-bottom: 2.25rem;
+ margin-top: var(--sp2);
+ margin-bottom: var(--sp2);
letter-spacing: -0.01em;
- font-family: "Lora", "georgia", serif;
+ font-family: var(--font-serif);
font-size: 1.3125rem;
- line-height: 2.25rem
+ line-height: var(--sp2)
}
[dir="ltr"] .text-content blockquote:before,[dir="ltr"] .cke_editable blockquote:before {
@@ -148,7 +161,7 @@
position: absolute;
top: 0;
content: "“";
- color: #53b0eb;
+ color: var(--color--blue-70);
font-size: 3.375rem;
}
@@ -171,17 +184,17 @@
.text-content blockquote:after, .cke_editable blockquote:after {
position: absolute;
bottom: 0;
- width: 0.5625rem;
+ width: var(--sp0-5);
height: calc(100% - 1.875rem);
content: "";
- background: #f7f9fa;
+ background: var(--color--gray-95);
}
@media (min-width: 43.75rem) {
.text-content blockquote, .cke_editable blockquote {
font-size: 2rem;
- line-height: 3.375rem
+ line-height: var(--sp3)
}
}
@@ -189,7 +202,7 @@
.text-content blockquote, .cke_editable blockquote {
font-size: 2.5rem;
- line-height: 3.9375rem
+ line-height: calc(var(--sp)*3.5)
}
}
@@ -198,7 +211,7 @@
.text-content,
.cke_editable {
font-size: 1.125rem;
- line-height: 2.25rem
+ line-height: var(--sp2)
}
}
@@ -216,13 +229,13 @@
.site-footer .text-content a {
text-decoration: underline;
- color: #fff;
+ color: var(--color--white);
box-shadow: none
}
.site-footer .text-content a:hover {
text-decoration: none;
- color: #fff;
+ color: var(--color--white);
box-shadow: none;
}
@@ -234,6 +247,6 @@
.region--sidebar .text-content blockquote {
font-size: 1.5rem;
- line-height: 2.25rem
+ line-height: var(--sp2)
}
}
diff --git a/core/themes/olivero/css/components/text-content.pcss.css b/core/themes/olivero/css/components/text-content.pcss.css
index 70bdd2bf7f50f1fac545a4913cd37006f652bf22..e443c341b3cfcc3661ceee7e258820b92966ac8e 100644
--- a/core/themes/olivero/css/components/text-content.pcss.css
+++ b/core/themes/olivero/css/components/text-content.pcss.css
@@ -3,7 +3,7 @@
* Text Content.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.text-content,
.cke_editable {
diff --git a/core/themes/olivero/css/components/vertical-tabs.css b/core/themes/olivero/css/components/vertical-tabs.css
index 588be625dab2166ed7cf9b3037a01c367eccd16c..3cf5a55d5513c474798394e194b94997e4a3cbd3 100644
--- a/core/themes/olivero/css/components/vertical-tabs.css
+++ b/core/themes/olivero/css/components/vertical-tabs.css
@@ -10,6 +10,24 @@
* Vertical Tabs.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+:root {
+ --vertical-tabs-menu-width: 15rem;
+ --vertical-tabs-menu-border-width: 1px;
+}
+
@media (min-width: 62.5rem) {
.vertical-tabs {
@@ -18,19 +36,19 @@
}
[dir="ltr"] .vertical-tabs__menu {
- margin-left: 0
+ margin-left: 0;
}
[dir="rtl"] .vertical-tabs__menu {
- margin-right: 0
+ margin-right: 0;
}
[dir="ltr"] .vertical-tabs__menu {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .vertical-tabs__menu {
- margin-left: 0
+ margin-left: 0;
}
.vertical-tabs__menu {
@@ -38,27 +56,27 @@
align-self: flex-start;
margin: 0;
list-style: none;
- border-width: 1px;
+ border-width: var(--vertical-tabs-menu-border-width);
border-style: solid;
- border-color: #e7edf1
+ border-color: var(--color--gray-80)
}
@media (min-width: 62.5rem) {
.vertical-tabs__menu {
- width: 15rem;
- border-width: 1px 0 1px 1px
+ width: var(--vertical-tabs-menu-width);
+ border-width: var(--vertical-tabs-menu-border-width) 0 var(--vertical-tabs-menu-border-width) var(--vertical-tabs-menu-border-width)
}
}
.vertical-tabs__panes {
- margin-top: -1px
+ margin-top: calc(var(--vertical-tabs-menu-border-width)*-1)
}
@media (min-width: 62.5rem) {
.vertical-tabs__panes {
- width: calc(100% - 15rem);
+ width: calc(100% - var(--vertical-tabs-menu-width));
margin-top: 0
}
}
@@ -81,61 +99,61 @@
}
.vertical-tabs__menu-item:nth-child(n+2) {
- border-top: 1px solid #e7edf1;
+ border-top: var(--vertical-tabs-menu-border-width) solid var(--color--gray-80);
}
[dir="ltr"] .vertical-tabs__menu-item a {
- padding-left: 0.84375rem
+ padding-left: var(--sp0-75);
}
[dir="rtl"] .vertical-tabs__menu-item a {
- padding-right: 0.84375rem
+ padding-right: var(--sp0-75);
}
[dir="ltr"] .vertical-tabs__menu-item a {
- padding-right: 0.84375rem
+ padding-right: var(--sp0-75);
}
[dir="rtl"] .vertical-tabs__menu-item a {
- padding-left: 0.84375rem
+ padding-left: var(--sp0-75);
}
.vertical-tabs__menu-item a {
display: block;
- padding-top: 0.5625rem;
- padding-bottom: 0.5625rem;
+ padding-top: var(--sp0-5);
+ padding-bottom: var(--sp0-5);
text-decoration: none;
- color: #0f6292;
- background-color: #e7edf1
+ color: var(--color--blue-10);
+ background-color: var(--color--gray-80)
}
.vertical-tabs__menu-item a:focus,
.vertical-tabs__menu-item a:hover,
.vertical-tabs__menu-item a:active {
- background-color: #f7f9fa;
+ background-color: var(--color--gray-95);
}
.vertical-tabs__menu-item.is-selected {
- background-color: #fff
+ background-color: var(--color--white)
}
@media (min-width: 62.5rem) {
[dir="ltr"] .vertical-tabs__menu-item.is-selected {
- margin-right: -1px
-}
+ margin-right: calc(var(--vertical-tabs-menu-border-width)*-1);
+ }
[dir="rtl"] .vertical-tabs__menu-item.is-selected {
- margin-left: -1px
-}
+ margin-left: calc(var(--vertical-tabs-menu-border-width)*-1);
+ }
[dir="ltr"] .vertical-tabs__menu-item.is-selected {
- padding-right: 1px
-}
+ padding-right: var(--vertical-tabs-menu-border-width);
+ }
[dir="rtl"] .vertical-tabs__menu-item.is-selected {
- padding-left: 1px
-}
+ padding-left: var(--vertical-tabs-menu-border-width);
+ }
}
.vertical-tabs__menu-item.is-selected a {
@@ -144,6 +162,6 @@
.vertical-tabs__menu-item-summary {
display: block;
- font-size: 0.875rem;
- line-height: 1.125rem;
+ font-size: var(--font-size-s);
+ line-height: var(--line-height-s);
}
diff --git a/core/themes/olivero/css/components/vertical-tabs.pcss.css b/core/themes/olivero/css/components/vertical-tabs.pcss.css
index be8f2d9d5b1551dd936f5cff101e0b5fa7185043..98eb4eeaae1b4315320b3c93d627863026acaf9a 100644
--- a/core/themes/olivero/css/components/vertical-tabs.pcss.css
+++ b/core/themes/olivero/css/components/vertical-tabs.pcss.css
@@ -3,7 +3,7 @@
* Vertical Tabs.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
:root {
--vertical-tabs-menu-width: 15rem;
diff --git a/core/themes/olivero/css/components/wide-image.css b/core/themes/olivero/css/components/wide-image.css
index 868a0ad1c734cc7417f99d49e54c0dd719439d22..1090ff48356ec94aa82a576350014d3c4ae8cb7c 100644
--- a/core/themes/olivero/css/components/wide-image.css
+++ b/core/themes/olivero/css/components/wide-image.css
@@ -10,6 +10,19 @@
* Wide image component.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
[dir="ltr"] .wide-image {
margin-left: 0
}
@@ -27,69 +40,69 @@
}
.wide-image {
- margin-top: 0.5625rem;
- margin-bottom: 2.25rem
+ margin-top: var(--sp0-5);
+ margin-bottom: var(--sp2)
}
@media (min-width: 43.75rem) {
[dir="ltr"] .wide-image {
- margin-left: -7.14286vw
+ margin-left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
}
[dir="rtl"] .wide-image {
- margin-right: -7.14286vw
+ margin-right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
}
.wide-image {
- width: calc(100vw - 2.25rem);
- margin-top: 2.25rem;
- margin-bottom: 4.5rem
+ width: calc(var(--grid-col-width--md)*14 + var(--grid-gap--md)*13);
+ margin-top: var(--sp2);
+ margin-bottom: var(--sp4)
}
}
@media (min-width: 62.5rem) {
[dir="ltr"] .wide-image {
- margin-left: calc(-7.14286vw - -1.07143px)
+ margin-left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
}
[dir="rtl"] .wide-image {
- margin-right: calc(-7.14286vw - -1.07143px)
+ margin-right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
}
.wide-image {
- width: calc(85.71429vw - 3.05357rem)
+ width: calc(var(--grid-col-width--lg)*12 + var(--grid-gap--lg)*11)
}
}
@media (min-width: 75rem) {
[dir="ltr"] .wide-image {
- margin-left: calc(-7.14286vw - -0.62946rem)
+ margin-left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
}
[dir="rtl"] .wide-image {
- margin-right: calc(-7.14286vw - -0.62946rem)
+ margin-right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
}
.wide-image {
- width: calc(85.71429vw - 9.80357rem)
+ width: calc(var(--grid-col-width--nav)*12 + var(--grid-gap--nav)*11)
}
}
@media (min-width: 90rem) {
[dir="ltr"] .wide-image {
- margin-left: -5.86607rem
+ margin-left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
}
[dir="rtl"] .wide-image {
- margin-right: -5.86607rem
+ margin-right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
}
.wide-image {
- width: 68.14286rem
+ width: calc(var(--grid-col-width--max)*12 + var(--grid-gap--max)*11)
}
}
@@ -98,28 +111,28 @@
@media (min-width: 62.5rem) {
.sidebar-grid .wide-image {
- width: calc(64.28571vw - 2.85268rem)
+ width: calc(var(--grid-col-width--lg)*9 + var(--grid-gap--lg)*8)
}
}
@media (min-width: 75rem) {
.sidebar-grid .wide-image {
- width: calc(64.28571vw - 7.91518rem)
+ width: calc(var(--grid-col-width--nav)*9 + var(--grid-gap--nav)*8)
}
}
@media (min-width: 81.25rem) {
.sidebar-grid .wide-image {
- width: calc(71.42857vw - 8.54464rem)
+ width: calc(var(--grid-col-width--nav)*10 + var(--grid-gap--nav)*9)
}
}
@media (min-width: 90rem) {
.sidebar-grid .wide-image {
- width: 56.41071rem
+ width: calc(var(--grid-col-width--max)*10 + var(--grid-gap--max)*9)
}
}
diff --git a/core/themes/olivero/css/components/wide-image.pcss.css b/core/themes/olivero/css/components/wide-image.pcss.css
index bcd2df2384024aa1afc168465218397885a9ac90..74f95016160903fe7d783ab37ee1a3bf1aece3fe 100644
--- a/core/themes/olivero/css/components/wide-image.pcss.css
+++ b/core/themes/olivero/css/components/wide-image.pcss.css
@@ -3,7 +3,7 @@
* Wide image component.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.wide-image {
margin-block-start: var(--sp0-5);
diff --git a/core/themes/olivero/css/layout/grid.css b/core/themes/olivero/css/layout/grid.css
index 028cefda8223b54a140ca15da75ae336c90cd813..3041568acc143dcfcd3b8756c4f75fa2b770d632 100644
--- a/core/themes/olivero/css/layout/grid.css
+++ b/core/themes/olivero/css/layout/grid.css
@@ -10,14 +10,24 @@
* Grid system.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.grid-full {
- display: -ms-grid;
display: grid;
- -ms-grid-rows: 1fr;
grid-template-rows: 1fr;
- -ms-grid-columns: (minmax(0, 1fr))[6];
- grid-template-columns: repeat(6, minmax(0, 1fr));
- grid-column-gap: 1.125rem
+ grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
+ grid-column-gap: var(--grid-gap)
/* .grid-full classes nested 3 or more deep go full width. */
}
@@ -29,9 +39,8 @@
@media (min-width: 43.75rem) {
.grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[14];
- grid-template-columns: repeat(14, minmax(0, 1fr));
- grid-column-gap: 2.25rem
+ grid-template-columns: repeat(var(--grid-col-count--md), minmax(0, 1fr));
+ grid-column-gap: var(--grid-gap--md)
}
}
@@ -45,8 +54,7 @@
.layout--content-narrow .grid-full,
.layout--pass--content-narrow > * .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[ 12 ];
- grid-template-columns: repeat(12, minmax(0, 1fr))
+ grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr))
}
}
@@ -54,8 +62,7 @@
.layout--content-narrow .grid-full,
.layout--pass--content-narrow > * .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[ 8 ];
- grid-template-columns: repeat(8, minmax(0, 1fr))
+ grid-template-columns: repeat(calc(var(--grid-col-count--lg) - 6), minmax(0, 1fr))
}
}
@@ -69,8 +76,7 @@
.layout--content-medium .grid-full,
.layout--pass--content-medium > * .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[ 12 ];
- grid-template-columns: repeat(12, minmax(0, 1fr))
+ grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr))
}
}
@@ -78,7 +84,6 @@
.layout--content-medium .grid-full,
.layout--pass--content-medium > * .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[ 10 ];
- grid-template-columns: repeat(10, minmax(0, 1fr))
+ grid-template-columns: repeat(calc(var(--grid-col-count--md) - 4), minmax(0, 1fr))
}
}
diff --git a/core/themes/olivero/css/layout/grid.pcss.css b/core/themes/olivero/css/layout/grid.pcss.css
index 7299bfec5e06d425f7c2268e537477575ec8bc6d..7880c392b54d8d17875e28e7642e114a1ad16019 100644
--- a/core/themes/olivero/css/layout/grid.pcss.css
+++ b/core/themes/olivero/css/layout/grid.pcss.css
@@ -3,7 +3,7 @@
* Grid system.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.grid-full {
display: grid;
diff --git a/core/themes/olivero/css/layout/layout-builder-fourcol-section.css b/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
index b996a99baaf52d7c6568b11e814e65427df7ca2e..7253ae22cac971bcd9de20e21a9b19bcea598807 100644
--- a/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
@@ -10,6 +10,19 @@
* Provides the layout styles for four-column layout section.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.layout--fourcol-section {
display: flex;
flex-wrap: wrap
@@ -17,13 +30,13 @@
.layout--fourcol-section > .layout__region {
flex: 1 0 100%;
- margin-bottom: 1.125rem
+ margin-bottom: var(--grid-gap)
}
@media (min-width: 43.75rem) {
.layout--fourcol-section > .layout__region {
- flex-basis: calc(50% - 1.125rem);
+ flex-basis: calc(50% - var(--grid-gap--md)*0.5);
flex-grow: 0;
flex-shrink: 0;
margin-bottom: 0
@@ -38,27 +51,27 @@
@media (min-width: 43.75rem) {
.layout--fourcol-section > .layout__region--first,
.layout--fourcol-section > .layout__region--second {
- margin-bottom: 2.25rem;
+ margin-bottom: var(--grid-gap--md);
}
[dir="ltr"] .layout--fourcol-section > .layout__region--first,[dir="ltr"]
.layout--fourcol-section > .layout__region--third {
- margin-right: 1.125rem
+ margin-right: calc(var(--grid-gap--md)*0.5)
}
[dir="rtl"] .layout--fourcol-section > .layout__region--first,[dir="rtl"]
.layout--fourcol-section > .layout__region--third {
- margin-left: 1.125rem
+ margin-left: calc(var(--grid-gap--md)*0.5)
}
[dir="ltr"] .layout--fourcol-section > .layout__region--second,[dir="ltr"]
.layout--fourcol-section > .layout__region--fourth {
- margin-left: 1.125rem
+ margin-left: calc(var(--grid-gap--md)*0.5)
}
[dir="rtl"] .layout--fourcol-section > .layout__region--second,[dir="rtl"]
.layout--fourcol-section > .layout__region--fourth {
- margin-right: 1.125rem
+ margin-right: calc(var(--grid-gap--md)*0.5)
}
}
@@ -69,7 +82,7 @@
@media (min-width: 62.5rem) {
.layout--fourcol-section > .layout__region {
- flex-basis: calc(25% - 1.6875rem);
+ flex-basis: calc(25% - var(--grid-gap--md)*0.75);
}
.layout--fourcol-section > .layout__region--first,
@@ -78,24 +91,24 @@
}
[dir="ltr"] .layout--fourcol-section > .layout__region--first {
- margin-right: 1.125rem
+ margin-right: calc(var(--grid-gap--md)*0.5)
}
[dir="rtl"] .layout--fourcol-section > .layout__region--first {
- margin-left: 1.125rem
+ margin-left: calc(var(--grid-gap--md)*0.5)
}
.layout--fourcol-section > .layout__region--second,
.layout--fourcol-section > .layout__region--third {
- margin-left: 1.125rem;
- margin-right: 1.125rem;
+ margin-left: calc(var(--grid-gap--md)*0.5);
+ margin-right: calc(var(--grid-gap--md)*0.5);
}
[dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
- margin-left: 1.125rem
+ margin-left: calc(var(--grid-gap--md)*0.5)
}
[dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
- margin-right: 1.125rem
+ margin-right: calc(var(--grid-gap--md)*0.5)
}
}
diff --git a/core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css b/core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
index 7f4c6553905075dd689e809c993f98f8ca234f06..cd7a73583110252385dd5f1903ca98a0338a1a12 100644
--- a/core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
+++ b/core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
@@ -3,7 +3,7 @@
* Provides the layout styles for four-column layout section.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.layout--fourcol-section {
display: flex;
diff --git a/core/themes/olivero/css/layout/layout-builder-threecol-section.css b/core/themes/olivero/css/layout/layout-builder-threecol-section.css
index d95f04b8f40580da89d180d33189de2afe96d94a..9a670c2f66ce9aa535eff65e9b5bbd9a38577105 100644
--- a/core/themes/olivero/css/layout/layout-builder-threecol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-threecol-section.css
@@ -10,6 +10,19 @@
* Provides the layout styles for three-column layout section.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.layout--threecol-section {
display: flex;
flex-wrap: wrap
@@ -17,7 +30,7 @@
.layout--threecol-section > .layout__region {
flex: 1 0 100%;
- margin-bottom: 1.125rem
+ margin-bottom: var(--grid-gap)
}
@media (min-width: 62.5rem) {
@@ -31,51 +44,51 @@
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--threecol-section > .layout__region--first {
- margin-right: 1.125rem
+ margin-right: calc(var(--grid-gap--md)*0.5)
}
[dir="rtl"] .layout--threecol-section > .layout__region--first {
- margin-left: 1.125rem
+ margin-left: calc(var(--grid-gap--md)*0.5)
}
.layout--threecol-section > .layout__region--second {
- margin-left: 1.125rem;
- margin-right: 1.125rem;
+ margin-left: calc(var(--grid-gap--md)*0.5);
+ margin-right: calc(var(--grid-gap--md)*0.5);
}
[dir="ltr"] .layout--threecol-section > .layout__region--third {
- margin-left: 1.125rem
+ margin-left: calc(var(--grid-gap--md)*0.5)
}
[dir="rtl"] .layout--threecol-section > .layout__region--third {
- margin-right: 1.125rem
+ margin-right: calc(var(--grid-gap--md)*0.5)
}
.layout--threecol-section--25-50-25 > .layout__region--first,
.layout--threecol-section--25-50-25 > .layout__region--third {
- flex-basis: calc(25% - 1.125rem);
+ flex-basis: calc(25% - var(--grid-gap--md)*0.5);
}
.layout--threecol-section--25-50-25 > .layout__region--second {
- flex-basis: calc(50% - 2.25rem);
+ flex-basis: calc(50% - var(--grid-gap--md));
}
.layout--threecol-section--25-25-50 > .layout__region--first,
.layout--threecol-section--25-25-50 > .layout__region--second {
- flex-basis: calc(25% - 1.125rem);
+ flex-basis: calc(25% - var(--grid-gap--md)*0.5);
}
.layout--threecol-section--25-25-50 > .layout__region--third {
- flex-basis: calc(50% - 2.25rem);
+ flex-basis: calc(50% - var(--grid-gap--md));
}
.layout--threecol-section--50-25-25 > .layout__region--first {
- flex-basis: calc(50% - 2.25rem);
+ flex-basis: calc(50% - var(--grid-gap--md));
}
.layout--threecol-section--50-25-25 > .layout__region--second,
.layout--threecol-section--50-25-25 > .layout__region--third {
- flex-basis: calc(25% - 1.125rem);
+ flex-basis: calc(25% - var(--grid-gap--md)*0.5);
}
.layout--threecol-section--33-34-33 > .layout__region--first,
.layout--threecol-section--33-34-33 > .layout__region--second,
.layout--threecol-section--33-34-33 > .layout__region--third {
- flex-basis: calc(33.33% - 1.50075rem);
+ flex-basis: calc(33.33% - var(--grid-gap--md)*0.667);
}
}
diff --git a/core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css b/core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css
index 3664e5d259dc63b858e34e98db505113c4625f1f..b9bb2c4b059b21f29077c6758b952ed58155d09d 100644
--- a/core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css
+++ b/core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css
@@ -3,7 +3,7 @@
* Provides the layout styles for three-column layout section.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.layout--threecol-section {
display: flex;
diff --git a/core/themes/olivero/css/layout/layout-builder-twocol-section.css b/core/themes/olivero/css/layout/layout-builder-twocol-section.css
index 3016c821e87c1a0d82a2c473288df78b330e207f..f7179d5af736324add40eb85e8dbba9aaef42716 100644
--- a/core/themes/olivero/css/layout/layout-builder-twocol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-twocol-section.css
@@ -10,6 +10,19 @@
* Provides the layout styles for two-column layout section.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.layout--twocol-section {
display: flex;
flex-wrap: wrap
@@ -17,7 +30,7 @@
.layout--twocol-section > .layout__region {
flex: 1 0 100%;
- margin-bottom: 1.125rem
+ margin-bottom: var(--grid-gap)
}
@media (min-width: 43.75rem) {
@@ -31,108 +44,108 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first {
- margin-right: 1.125rem
+ margin-right: calc(var(--grid-gap--md)*0.5)
}
[dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first {
- margin-left: 1.125rem
+ margin-left: calc(var(--grid-gap--md)*0.5)
}
.layout--twocol-section--50-50 > .layout__region--first {
- flex-basis: calc(50% - 1.125rem);
+ flex-basis: calc(50% - var(--grid-gap--md)*0.5);
}
[dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {
- margin-left: 1.125rem
+ margin-left: calc(var(--grid-gap--md)*0.5)
}
[dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second {
- margin-right: 1.125rem
+ margin-right: calc(var(--grid-gap--md)*0.5)
}
.layout--twocol-section--50-50 > .layout__region--second {
- flex-basis: calc(50% - 1.125rem);
+ flex-basis: calc(50% - var(--grid-gap--md)*0.5);
}
[dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {
- margin-right: 0.74993rem
+ margin-right: calc(var(--grid-gap--md)*0.3333)
}
[dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first {
- margin-left: 0.74993rem
+ margin-left: calc(var(--grid-gap--md)*0.3333)
}
.layout--twocol-section--33-67 > .layout__region--first {
- flex-basis: calc(33.33% - 0.74993rem);
+ flex-basis: calc(33.33% - var(--grid-gap--md)*0.3333);
}
[dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {
- margin-left: 1.49985rem
+ margin-left: calc(var(--grid-gap--md)*0.6666)
}
[dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second {
- margin-right: 1.49985rem
+ margin-right: calc(var(--grid-gap--md)*0.6666)
}
.layout--twocol-section--33-67 > .layout__region--second {
- flex-basis: calc(66.66% - 1.49985rem);
+ flex-basis: calc(66.66% - var(--grid-gap--md)*0.6666);
}
[dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {
- margin-right: 1.49985rem
+ margin-right: calc(var(--grid-gap--md)*0.6666)
}
[dir="rtl"] .layout--twocol-section--67-33 > .layout__region--first {
- margin-left: 1.49985rem
+ margin-left: calc(var(--grid-gap--md)*0.6666)
}
.layout--twocol-section--67-33 > .layout__region--first {
- flex-basis: calc(66.66% - 1.49985rem);
+ flex-basis: calc(66.66% - var(--grid-gap--md)*0.6666);
}
[dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {
- margin-left: 0.74993rem
+ margin-left: calc(var(--grid-gap--md)*0.3333)
}
[dir="rtl"] .layout--twocol-section--67-33 > .layout__region--second {
- margin-right: 0.74993rem
+ margin-right: calc(var(--grid-gap--md)*0.3333)
}
.layout--twocol-section--67-33 > .layout__region--second {
- flex-basis: calc(33.33% - 0.74993rem);
+ flex-basis: calc(33.33% - var(--grid-gap--md)*0.3333);
}
[dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {
- margin-right: 0.5625rem
+ margin-right: calc(var(--grid-gap--md)*0.25)
}
[dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first {
- margin-left: 0.5625rem
+ margin-left: calc(var(--grid-gap--md)*0.25)
}
.layout--twocol-section--25-75 > .layout__region--first {
- flex-basis: calc(25% - 0.5625rem);
+ flex-basis: calc(25% - var(--grid-gap--md)*0.25);
}
[dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {
- margin-left: 1.6875rem
+ margin-left: calc(var(--grid-gap--md)*0.75)
}
[dir="rtl"] .layout--twocol-section--25-75 > .layout__region--second {
- margin-right: 1.6875rem
+ margin-right: calc(var(--grid-gap--md)*0.75)
}
.layout--twocol-section--25-75 > .layout__region--second {
- flex-basis: calc(75% - 1.6875rem);
+ flex-basis: calc(75% - var(--grid-gap--md)*0.75);
}
[dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {
- margin-right: 1.6875rem
+ margin-right: calc(var(--grid-gap--md)*0.75)
}
[dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first {
- margin-left: 1.6875rem
+ margin-left: calc(var(--grid-gap--md)*0.75)
}
.layout--twocol-section--75-25 > .layout__region--first {
- flex-basis: calc(75% - 1.6875rem);
+ flex-basis: calc(75% - var(--grid-gap--md)*0.75);
}
[dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {
- margin-left: 0.5625rem
+ margin-left: calc(var(--grid-gap--md)*0.25)
}
[dir="rtl"] .layout--twocol-section--75-25 > .layout__region--second {
- margin-right: 0.5625rem
+ margin-right: calc(var(--grid-gap--md)*0.25)
}
.layout--twocol-section--75-25 > .layout__region--second {
- flex-basis: calc(25% - 0.5625rem);
+ flex-basis: calc(25% - var(--grid-gap--md)*0.25);
}
}
diff --git a/core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css b/core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css
index 8e851211c0c6c501ec72c5973786afb13bee86fd..59014f16f6d3fdcf7dbb75087c46d23cf43238a5 100644
--- a/core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css
+++ b/core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css
@@ -3,7 +3,7 @@
* Provides the layout styles for two-column layout section.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.layout--twocol-section {
display: flex;
diff --git a/core/themes/olivero/css/layout/layout-content-medium.css b/core/themes/olivero/css/layout/layout-content-medium.css
index ceb1489a95cd9881fdbe5ee10c3398652d7a8e08..1395e02149db511200bb9b566949c832ce99de92 100644
--- a/core/themes/olivero/css/layout/layout-content-medium.css
+++ b/core/themes/olivero/css/layout/layout-content-medium.css
@@ -10,10 +10,21 @@
* Grid system definition for the content wide layout.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.layout--content-medium,
.layout--pass--content-medium > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 6;
grid-column: 1 / 7;
width: 100%
}
@@ -22,8 +33,6 @@
.layout--content-medium,
.layout--pass--content-medium > * {
- -ms-grid-column: 2;
- -ms-grid-column-span: 12;
grid-column: 2 / 14
}
}
@@ -32,8 +41,6 @@
.layout--content-medium,
.layout--pass--content-medium > * {
- -ms-grid-column: 3;
- -ms-grid-column-span: 10;
grid-column: 3 / 13
}
}
@@ -50,8 +57,6 @@
.layout--pass--content-medium > * .layout--pass--content-medium > *,
.layout--content-medium .layout--content-medium,
.layout--content-medium .layout--pass--content-medium > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 12;
grid-column: 1 / 13
}
}
@@ -62,8 +67,6 @@
.layout--pass--content-medium > * .layout--pass--content-medium > *,
.layout--content-medium .layout--content-medium,
.layout--content-medium .layout--pass--content-medium > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 10;
grid-column: 1 / 11
}
}
diff --git a/core/themes/olivero/css/layout/layout-content-medium.pcss.css b/core/themes/olivero/css/layout/layout-content-medium.pcss.css
index 0721c2c1b6b3af07841de04b6a623aa780928f47..fc9be63415671e9b6f77099f31b61853bde4d45e 100644
--- a/core/themes/olivero/css/layout/layout-content-medium.pcss.css
+++ b/core/themes/olivero/css/layout/layout-content-medium.pcss.css
@@ -3,7 +3,7 @@
* Grid system definition for the content wide layout.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.layout--content-medium,
.layout--pass--content-medium > * {
diff --git a/core/themes/olivero/css/layout/layout-content-narrow.css b/core/themes/olivero/css/layout/layout-content-narrow.css
index 3d080daf093101bb3d38ed7cc4e9f3568c2b5b5e..5b392b301d9d0346bb91f190428b3829957e85fb 100644
--- a/core/themes/olivero/css/layout/layout-content-narrow.css
+++ b/core/themes/olivero/css/layout/layout-content-narrow.css
@@ -10,10 +10,21 @@
* Grid system definition for the content narrow layout.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.layout--content-narrow,
.layout--pass--content-narrow > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 6;
grid-column: 1 / 7;
width: 100%
}
@@ -22,8 +33,6 @@
.layout--content-narrow,
.layout--pass--content-narrow > * {
- -ms-grid-column: 2;
- -ms-grid-column-span: 12;
grid-column: 2 / 14
}
}
@@ -32,8 +41,6 @@
.layout--content-narrow,
.layout--pass--content-narrow > * {
- -ms-grid-column: 3;
- -ms-grid-column-span: 8;
grid-column: 3 / 11
}
}
@@ -57,8 +64,6 @@
.layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--content-narrow,
.layout--pass--content-medium > * .layout--pass--content-narrow > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 12;
grid-column: 1 / 13
}
}
@@ -73,8 +78,6 @@
.layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--content-narrow,
.layout--pass--content-medium > * .layout--pass--content-narrow > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 8;
grid-column: 1 / 9
}
}
@@ -87,55 +90,55 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"] .layout--content-narrow .text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
- left: -7.14286vw
+ left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"] .layout--content-narrow .text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
- right: -7.14286vw
+ right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
}
}
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"] .layout--content-narrow .text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
- left: calc(-7.14286vw - -1.07143px)
+ left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"] .layout--content-narrow .text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
- right: calc(-7.14286vw - -1.07143px)
+ right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
}
}
@media (min-width: 75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"] .layout--content-narrow .text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
- left: calc(-7.14286vw - -0.62946rem)
+ left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"] .layout--content-narrow .text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
- right: calc(-7.14286vw - -0.62946rem)
+ right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
}
}
@media (min-width: 90rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"] .layout--content-narrow .text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
- left: -5.86607rem
+ left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"] .layout--content-narrow .text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
- right: -5.86607rem
+ right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
}
}
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
- left: -7.14286vw
+ left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
- right: -7.14286vw
+ right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
}
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
@@ -147,7 +150,7 @@
}
.layout--content-narrow.text-content blockquote:after, .layout--content-narrow .text-content blockquote:after, .layout--pass--content-narrow > *.text-content blockquote:after, .layout--pass--content-narrow > * .text-content blockquote:after {
- width: 1.125rem;
+ width: var(--sp);
height: calc(100% - 2.8125rem)
}
}
@@ -155,33 +158,33 @@
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
- left: calc(-7.14286vw - -1.07143px)
+ left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
- right: calc(-7.14286vw - -1.07143px)
+ right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
}
}
@media (min-width: 75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
- left: calc(-7.14286vw - -0.62946rem)
+ left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
- right: calc(-7.14286vw - -0.62946rem)
+ right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
}
}
@media (min-width: 90rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
- left: -5.86607rem
+ left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
- right: -5.86607rem
+ right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
}
}
@@ -196,68 +199,68 @@
}
.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
- width: calc(71.42857vw - 2.25rem);
- margin-top: 3.375rem;
- margin-bottom: 3.375rem
+ width: calc(var(--grid-col-width--md)*10 + var(--grid-gap--md)*9);
+ margin-top: var(--sp3);
+ margin-bottom: var(--sp3)
}
}
@media (min-width: 62.5rem) {
.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
- width: calc(71.42857vw - 2.91964rem)
+ width: calc(var(--grid-col-width--lg)*10 + var(--grid-gap--lg)*9)
}
}
@media (min-width: 75rem) {
.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
- width: calc(71.42857vw - 8.54464rem)
+ width: calc(var(--grid-col-width--nav)*10 + var(--grid-gap--nav)*9)
}
}
@media (min-width: 90rem) {
.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
- width: 56.41071rem
+ width: calc(var(--grid-col-width--max)*10 + var(--grid-gap--max)*9)
}
}
@media (min-width: 43.75rem) {
.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
- width: calc(71.42857vw - 2.25rem);
- margin-top: 3.375rem;
- margin-bottom: 3.375rem
+ width: calc(var(--grid-col-width--md)*10 + var(--grid-gap--md)*9);
+ margin-top: var(--sp3);
+ margin-bottom: var(--sp3)
}
}
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow.text-content pre,[dir="ltr"] .layout--content-narrow .text-content pre,[dir="ltr"] .layout--pass--content-narrow > *.text-content pre,[dir="ltr"] .layout--pass--content-narrow > * .text-content pre {
- margin-left: calc(-7.14286vw - -1.07143px)
+ margin-left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
}
[dir="rtl"] .layout--content-narrow.text-content pre,[dir="rtl"] .layout--content-narrow .text-content pre,[dir="rtl"] .layout--pass--content-narrow > *.text-content pre,[dir="rtl"] .layout--pass--content-narrow > * .text-content pre {
- margin-right: calc(-7.14286vw - -1.07143px)
+ margin-right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
}
.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
- width: calc(85.71429vw - 3.05357rem)
+ width: calc(var(--grid-col-width--lg)*12 + var(--grid-gap--lg)*11)
}
}
@media (min-width: 75rem) {
.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
- width: calc(85.71429vw - 9.80357rem)
+ width: calc(var(--grid-col-width--nav)*12 + var(--grid-gap--nav)*11)
}
}
@media (min-width: 90rem) {
.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
- width: 68.14286rem
+ width: calc(var(--grid-col-width--max)*12 + var(--grid-gap--max)*11)
}
}
diff --git a/core/themes/olivero/css/layout/layout-content-narrow.pcss.css b/core/themes/olivero/css/layout/layout-content-narrow.pcss.css
index 350250c1476cb70c8a914d2144ce2924b17beaad..825b5ffb041b589853d7a36b745e79c517e1e967 100644
--- a/core/themes/olivero/css/layout/layout-content-narrow.pcss.css
+++ b/core/themes/olivero/css/layout/layout-content-narrow.pcss.css
@@ -3,7 +3,7 @@
* Grid system definition for the content narrow layout.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.layout--content-narrow,
.layout--pass--content-narrow > * {
diff --git a/core/themes/olivero/css/layout/layout-discovery-section-layout.css b/core/themes/olivero/css/layout/layout-discovery-section-layout.css
index 0ddcb86cf40b146f8b5dd8b8b47d1fcb7e7ba36e..934d59a298a98da42b3eb3d398df8c1cdf2193c1 100644
--- a/core/themes/olivero/css/layout/layout-discovery-section-layout.css
+++ b/core/themes/olivero/css/layout/layout-discovery-section-layout.css
@@ -10,20 +10,33 @@
* Provides default layout styles for all layout sections.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.layout {
- margin-bottom: 1.125rem
+ margin-bottom: var(--sp)
}
@media (min-width: 43.75rem) {
.layout {
- margin-bottom: 2.25rem
+ margin-bottom: var(--sp2)
}
}
@media (min-width: 62.5rem) {
.layout {
- margin-bottom: 3.375rem
+ margin-bottom: var(--sp3)
}
}
diff --git a/core/themes/olivero/css/layout/layout-discovery-section-layout.pcss.css b/core/themes/olivero/css/layout/layout-discovery-section-layout.pcss.css
index d3217daade9d8edcedad5f00e588c566e50d36f7..d5d33532c088d1c3e7841e765ac4c85f249a3d2d 100644
--- a/core/themes/olivero/css/layout/layout-discovery-section-layout.pcss.css
+++ b/core/themes/olivero/css/layout/layout-discovery-section-layout.pcss.css
@@ -3,7 +3,7 @@
* Provides default layout styles for all layout sections.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.layout {
margin-block-end: var(--sp);
diff --git a/core/themes/olivero/css/layout/layout-footer.css b/core/themes/olivero/css/layout/layout-footer.css
index e2f5c5f875544c6a144ffe1e183ea4a570710bc7..c1ba887af0765c4f3d4cd4869e9ea9ce4e68e7c4 100644
--- a/core/themes/olivero/css/layout/layout-footer.css
+++ b/core/themes/olivero/css/layout/layout-footer.css
@@ -10,21 +10,34 @@
* Grid system definition for the footer top and footer bottom layouts.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.site-footer__inner {
- padding-top: 2.25rem;
- padding-bottom: 2.25rem
+ padding-top: var(--sp2);
+ padding-bottom: var(--sp2)
}
@media (min-width: 75rem) {
.site-footer__inner {
- padding-top: 4.5rem;
- padding-bottom: 14.625rem
+ padding-top: var(--sp4);
+ padding-bottom: calc(var(--sp)*13)
}
}
.region--footer_top__inner > *, .region--footer_bottom__inner > * {
- margin-bottom: 2.25rem
+ margin-bottom: var(--sp2)
}
@media (min-width: 43.75rem) {
@@ -35,11 +48,11 @@
}
[dir="ltr"] .region--footer_top__inner > *:not(:last-child),[dir="ltr"] .region--footer_bottom__inner > *:not(:last-child) {
- margin-right: 2.25rem
+ margin-right: var(--sp2)
}
[dir="rtl"] .region--footer_top__inner > *:not(:last-child),[dir="rtl"] .region--footer_bottom__inner > *:not(:last-child) {
- margin-left: 2.25rem
+ margin-left: var(--sp2)
}
}
diff --git a/core/themes/olivero/css/layout/layout-footer.pcss.css b/core/themes/olivero/css/layout/layout-footer.pcss.css
index 9a36e16c961c3ebdf348e1fb96124f8acf3fe80b..310b9081814b0c4e7974e851c084d8179b6b8221 100644
--- a/core/themes/olivero/css/layout/layout-footer.pcss.css
+++ b/core/themes/olivero/css/layout/layout-footer.pcss.css
@@ -3,7 +3,7 @@
* Grid system definition for the footer top and footer bottom layouts.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.site-footer__inner {
padding-block: var(--sp2);
diff --git a/core/themes/olivero/css/layout/layout-sidebar.css b/core/themes/olivero/css/layout/layout-sidebar.css
index f71663c48080e9401eee242f080853a961056622..560dcd0305dce075e01c4ff45167ad77f8490da7 100644
--- a/core/themes/olivero/css/layout/layout-sidebar.css
+++ b/core/themes/olivero/css/layout/layout-sidebar.css
@@ -10,9 +10,20 @@
* Special grid system for sidebar.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.sidebar-grid > .site-main {
- -ms-grid-column: 1;
- -ms-grid-column-span: 6;
grid-column: 1 / 7;
align-self: flex-start;
-ms-grid-row-align: start
@@ -21,8 +32,6 @@
@media (min-width: 43.75rem) {
.sidebar-grid > .site-main {
- -ms-grid-column: 1;
- -ms-grid-column-span: 14;
grid-column: 1 / 15
}
}
@@ -30,21 +39,14 @@
@media (min-width: 62.5rem) {
.sidebar-grid > .site-main {
- display: -ms-grid;
display: grid;
- -ms-grid-columns: (minmax(0, 1fr))[8];
grid-template-columns: repeat(8, minmax(0, 1fr));
- -ms-grid-column: 3;
- -ms-grid-column-span: 8;
grid-column: 3 / 11
}
.sidebar-grid > .site-main > .region--content-above,
.sidebar-grid > .site-main > .region--content {
- -ms-grid-columns: (minmax(0, 1fr))[8];
grid-template-columns: repeat(8, minmax(0, 1fr));
- -ms-grid-column: 1;
- -ms-grid-column-span: 8;
grid-column: 1 / 9;
}
@@ -52,24 +54,18 @@
.sidebar-grid > .site-main .layout--pass--content-narrow > *,
.sidebar-grid > .site-main .layout--content-medium,
.sidebar-grid > .site-main .layout--pass--content-medium > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 8;
grid-column: 1 / 9;
}
}
.sidebar-grid .region--sidebar {
-ms-grid-row: 2;
- -ms-grid-column: 1;
- -ms-grid-column-span: 6;
grid-column: 1 / 7
}
@media (min-width: 43.75rem) {
.sidebar-grid .region--sidebar {
- -ms-grid-column: 3;
- -ms-grid-column-span: 10;
grid-column: 3 / 13
}
}
@@ -78,8 +74,6 @@
.sidebar-grid .region--sidebar {
-ms-grid-row: 1;
- -ms-grid-column: 12;
- -ms-grid-column-span: 3;
grid-column: 12 / 15
}
}
diff --git a/core/themes/olivero/css/layout/layout-sidebar.pcss.css b/core/themes/olivero/css/layout/layout-sidebar.pcss.css
index 2a28d01e591a7af51f9b045d25fa336547174b57..17b8f0719fe868f70277778b4ccf077d35f63eff 100644
--- a/core/themes/olivero/css/layout/layout-sidebar.pcss.css
+++ b/core/themes/olivero/css/layout/layout-sidebar.pcss.css
@@ -3,7 +3,7 @@
* Special grid system for sidebar.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.sidebar-grid {
& > .site-main {
diff --git a/core/themes/olivero/css/layout/layout-views-grid-horizontal.css b/core/themes/olivero/css/layout/layout-views-grid-horizontal.css
index 0e2c47eb98a1c2415e198e6dcddd05e02ad2c469..b9ec62be7af5a0cb12fd11e42c2e4d493deb1b61 100644
--- a/core/themes/olivero/css/layout/layout-views-grid-horizontal.css
+++ b/core/themes/olivero/css/layout/layout-views-grid-horizontal.css
@@ -10,17 +10,34 @@
* Responsive styles for views grid horizontal layout.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+:root {
+ --views-grid-layout-gap: var(--sp);
+}
+
.views-view-grid--horizontal {
display: flex;
flex-wrap: wrap
}
[dir="ltr"] .views-view-grid--horizontal.cols-1 > * {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-1 > * {
- margin-left: 0
+ margin-left: 0;
}
.views-view-grid--horizontal.cols-1 > * {
@@ -28,11 +45,11 @@
}
[dir="ltr"] .views-view-grid--horizontal.cols-2 > * {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-2 > * {
- margin-left: 0
+ margin-left: 0;
}
.views-view-grid--horizontal.cols-2 > * {
@@ -44,32 +61,32 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-2 > * {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-2 > * {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
.views-view-grid--horizontal.cols-2 > * {
- flex-basis: calc(50% - 0.5625rem)
+ flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
}
[dir="ltr"] .views-view-grid--horizontal.cols-2 > *:nth-child(2n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-2 > *:nth-child(2n) {
- margin-left: 0
+ margin-left: 0;
}
}
[dir="ltr"] .views-view-grid--horizontal.cols-3 > * {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-3 > * {
- margin-left: 0
+ margin-left: 0;
}
.views-view-grid--horizontal.cols-3 > * {
@@ -81,23 +98,23 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-3 > * {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-3 > * {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
.views-view-grid--horizontal.cols-3 > * {
- flex-basis: calc(50% - 0.5625rem)
+ flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
}
[dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
- margin-left: 0
+ margin-left: 0;
}
}
@@ -109,32 +126,32 @@
@media (min-width: 62.5rem) {
.views-view-grid--horizontal.cols-3 > * {
- flex-basis: calc(33.33333% - 0.75rem)
+ flex-basis: calc(33.33333% - var(--views-grid-layout-gap)*0.66667)
}
[dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
[dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(3n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(3n) {
- margin-left: 0
+ margin-left: 0;
}
}
[dir="ltr"] .views-view-grid--horizontal.cols-4 > * {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-4 > * {
- margin-left: 0
+ margin-left: 0;
}
.views-view-grid--horizontal.cols-4 > * {
@@ -146,23 +163,23 @@
@media (min-width: 43.75rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-4 > * {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-4 > * {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
.views-view-grid--horizontal.cols-4 > * {
- flex-basis: calc(50% - 0.5625rem)
+ flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
}
[dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
- margin-left: 0
+ margin-left: 0;
}
}
@@ -174,32 +191,32 @@
@media (min-width: 62.5rem) {
.views-view-grid--horizontal.cols-4 > * {
- flex-basis: calc(25% - 0.84375rem)
+ flex-basis: calc(25% - var(--views-grid-layout-gap)*0.75)
}
[dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
[dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(4n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(4n) {
- margin-left: 0
+ margin-left: 0;
}
}
[dir="ltr"] .views-view-grid--horizontal.cols-5 > * {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > * {
- margin-left: 0
+ margin-left: 0;
}
.views-view-grid--horizontal.cols-5 > * {
@@ -211,23 +228,23 @@
@media (min-width: 31.25rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-5 > * {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > * {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
.views-view-grid--horizontal.cols-5 > * {
- flex-basis: calc(50% - 0.5625rem)
+ flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
}
[dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
- margin-left: 0
+ margin-left: 0;
}
}
@@ -239,23 +256,23 @@
@media (min-width: 43.75rem) {
.views-view-grid--horizontal.cols-5 > * {
- flex-basis: calc(33.33333% - 0.75rem)
+ flex-basis: calc(33.33333% - var(--views-grid-layout-gap)*0.66667)
}
[dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
[dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
- margin-left: 0
+ margin-left: 0;
}
}
@@ -267,32 +284,32 @@
@media (min-width: 62.5rem) {
.views-view-grid--horizontal.cols-5 > * {
- flex-basis: calc(20% - 0.9rem)
+ flex-basis: calc(20% - var(--views-grid-layout-gap)*0.8)
}
[dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
[dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(5n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(5n) {
- margin-left: 0
+ margin-left: 0;
}
}
[dir="ltr"] .views-view-grid--horizontal.cols-6 > * {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > * {
- margin-left: 0
+ margin-left: 0;
}
.views-view-grid--horizontal.cols-6 > * {
@@ -304,23 +321,23 @@
@media (min-width: 31.25rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-6 > * {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > * {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
.views-view-grid--horizontal.cols-6 > * {
- flex-basis: calc(50% - 0.5625rem)
+ flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
}
[dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
- margin-left: 0
+ margin-left: 0;
}
}
@@ -332,23 +349,23 @@
@media (min-width: 43.75rem) {
.views-view-grid--horizontal.cols-6 > * {
- flex-basis: calc(33.33333% - 0.75rem)
+ flex-basis: calc(33.33333% - var(--views-grid-layout-gap)*0.66667)
}
[dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
[dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
- margin-left: 0
+ margin-left: 0;
}
}
@@ -360,32 +377,32 @@
@media (min-width: 62.5rem) {
.views-view-grid--horizontal.cols-6 > * {
- flex-basis: calc(16.66667% - 0.9375rem)
+ flex-basis: calc(16.66667% - var(--views-grid-layout-gap)*0.83333)
}
[dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
[dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(6n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(6n) {
- margin-left: 0
+ margin-left: 0;
}
}
[dir="ltr"] .views-view-grid--horizontal.cols-7 > * {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > * {
- margin-left: 0
+ margin-left: 0;
}
.views-view-grid--horizontal.cols-7 > * {
@@ -397,23 +414,23 @@
@media (min-width: 31.25rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-7 > * {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > * {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
.views-view-grid--horizontal.cols-7 > * {
- flex-basis: calc(50% - 0.5625rem)
+ flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
}
[dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
- margin-left: 0
+ margin-left: 0;
}
}
@@ -425,23 +442,23 @@
@media (min-width: 43.75rem) {
.views-view-grid--horizontal.cols-7 > * {
- flex-basis: calc(33.33333% - 0.75rem)
+ flex-basis: calc(33.33333% - var(--views-grid-layout-gap)*0.66667)
}
[dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
[dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
- margin-left: 0
+ margin-left: 0;
}
}
@@ -453,32 +470,32 @@
@media (min-width: 62.5rem) {
.views-view-grid--horizontal.cols-7 > * {
- flex-basis: calc(14.28571% - 0.96429rem)
+ flex-basis: calc(14.28571% - var(--views-grid-layout-gap)*0.85714)
}
[dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
[dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(7n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(7n) {
- margin-left: 0
+ margin-left: 0;
}
}
[dir="ltr"] .views-view-grid--horizontal.cols-8 > * {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > * {
- margin-left: 0
+ margin-left: 0;
}
.views-view-grid--horizontal.cols-8 > * {
@@ -490,23 +507,23 @@
@media (min-width: 31.25rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-8 > * {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > * {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
.views-view-grid--horizontal.cols-8 > * {
- flex-basis: calc(50% - 0.5625rem)
+ flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
}
[dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
- margin-left: 0
+ margin-left: 0;
}
}
@@ -518,23 +535,23 @@
@media (min-width: 43.75rem) {
.views-view-grid--horizontal.cols-8 > * {
- flex-basis: calc(25% - 0.84375rem)
+ flex-basis: calc(25% - var(--views-grid-layout-gap)*0.75)
}
[dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
[dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
- margin-left: 0
+ margin-left: 0;
}
}
@@ -546,28 +563,28 @@
@media (min-width: 62.5rem) {
.views-view-grid--horizontal.cols-8 > * {
- flex-basis: calc(12.5% - 0.98438rem)
+ flex-basis: calc(12.5% - var(--views-grid-layout-gap)*0.875)
}
[dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
- margin-right: 1.125rem
+ margin-right: var(--views-grid-layout-gap);
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
- margin-left: 1.125rem
+ margin-left: var(--views-grid-layout-gap);
}
[dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(8n) {
- margin-right: 0
+ margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(8n) {
- margin-left: 0
+ margin-left: 0;
}
}
.views-view-grid--horizontal > * {
flex-grow: 0;
flex-shrink: 0;
- margin-bottom: 1.125rem;
+ margin-bottom: var(--views-grid-layout-gap);
}
diff --git a/core/themes/olivero/css/layout/layout-views-grid-horizontal.pcss.css b/core/themes/olivero/css/layout/layout-views-grid-horizontal.pcss.css
index 64ad3cad26498399c9c35ca33d45b813d5adaf1f..fa6104d2e0385bb016eb92e5f18bf7efef018562 100644
--- a/core/themes/olivero/css/layout/layout-views-grid-horizontal.pcss.css
+++ b/core/themes/olivero/css/layout/layout-views-grid-horizontal.pcss.css
@@ -3,7 +3,7 @@
* Responsive styles for views grid horizontal layout.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
:root {
--views-grid-layout-gap: var(--sp);
diff --git a/core/themes/olivero/css/layout/layout-views-grid-vertical.css b/core/themes/olivero/css/layout/layout-views-grid-vertical.css
index 75cb14b933a5e7efee91767df65cbc9ab45cd428..1ab279c60b3202c7a4aa68135824e57775f5d41a 100644
--- a/core/themes/olivero/css/layout/layout-views-grid-vertical.css
+++ b/core/themes/olivero/css/layout/layout-views-grid-vertical.css
@@ -10,9 +10,26 @@
* Responsive styles for views grid vertical layout.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+:root {
+ --views-grid-layout-gap: var(--sp);
+}
+
.views-view-grid--vertical {
- margin-bottom: -1.125rem; /* Offset the bottom row's padding. */
- grid-column-gap: 1.125rem
+ margin-bottom: calc(var(--views-grid-layout-gap)*-1); /* Offset the bottom row's padding. */
+ grid-column-gap: var(--views-grid-layout-gap)
}
@media (min-width: 31.25rem) {
@@ -142,7 +159,7 @@
}
.views-view-grid--vertical .views-view-grid__item > * {
- padding-bottom: 1.125rem;
+ padding-bottom: var(--views-grid-layout-gap);
page-break-inside: avoid;
break-inside: avoid;
}
diff --git a/core/themes/olivero/css/layout/layout-views-grid-vertical.pcss.css b/core/themes/olivero/css/layout/layout-views-grid-vertical.pcss.css
index 5d7a922aa4ec6d67f2583c359477b1c0fa8d6e73..3bbdbc071955eff7fc0d17680d6f2f4ae6c0b3a9 100644
--- a/core/themes/olivero/css/layout/layout-views-grid-vertical.pcss.css
+++ b/core/themes/olivero/css/layout/layout-views-grid-vertical.pcss.css
@@ -3,7 +3,7 @@
* Responsive styles for views grid vertical layout.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
:root {
--views-grid-layout-gap: var(--sp);
diff --git a/core/themes/olivero/css/layout/layout.css b/core/themes/olivero/css/layout/layout.css
index b884232ca4c864a60533d9bac9b17c9f7167a994..6c82f8f8d6bd1579101d81b0fb8f6eec0fe1a200 100644
--- a/core/themes/olivero/css/layout/layout.css
+++ b/core/themes/olivero/css/layout/layout.css
@@ -10,24 +10,37 @@
* Base Layout.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.container {
width: 100%;
- max-width: 84.375rem;
- padding-left: 1.125rem;
- padding-right: 1.125rem
+ max-width: var(--max-width);
+ padding-left: var(--container-padding);
+ padding-right: var(--container-padding)
}
@media (min-width: 75rem) {
.container {
- padding-left: 2.25rem;
- padding-right: 2.25rem
+ padding-left: var(--container-padding-nav);
+ padding-right: var(--container-padding-nav)
}
}
.page-wrapper {
- max-width: 98.125rem;
- background: #fff;
+ max-width: var(--max-bg-color);
+ background: var(--color--white);
}
/* Contains the social sidebar, and the primary content area. */
@@ -52,17 +65,17 @@
}
.main-content {
- width: calc(100% - 5.625rem)
+ width: calc(100% - var(--content-left))
}
}
.main-content__container {
- padding-top: 3.375rem
+ padding-top: var(--sp3)
}
@media (min-width: 43.75rem) {
.main-content__container {
- padding-top: 5.625rem
+ padding-top: var(--sp5)
}
}
diff --git a/core/themes/olivero/css/layout/layout.pcss.css b/core/themes/olivero/css/layout/layout.pcss.css
index 60e89204ebe63beb9b600907f50a20baee17b3a6..e4eac76d5a268798ff362ecf5d4c6733ed4f31d9 100644
--- a/core/themes/olivero/css/layout/layout.pcss.css
+++ b/core/themes/olivero/css/layout/layout.pcss.css
@@ -3,7 +3,7 @@
* Base Layout.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.container {
width: 100%;
diff --git a/core/themes/olivero/css/layout/region-content-below.css b/core/themes/olivero/css/layout/region-content-below.css
index feee2289b73bc1c45233d3b7ef7cd2a296457ae5..27eb5c890cec1d091eaaad3db6c3aea6e5d2814e 100644
--- a/core/themes/olivero/css/layout/region-content-below.css
+++ b/core/themes/olivero/css/layout/region-content-below.css
@@ -10,6 +10,19 @@
* Content below region layout.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
@media (min-width: 43.75rem) {
.region--content-below {
@@ -18,15 +31,15 @@
}
[dir="ltr"] .region--content-below > * {
- margin-right: 2.25rem
+ margin-right: var(--grid-gap--md)
}
[dir="rtl"] .region--content-below > * {
- margin-left: 2.25rem
+ margin-left: var(--grid-gap--md)
}
.region--content-below > * {
- flex-basis: calc(50% - 1.125rem);
+ flex-basis: calc(50% - var(--grid-gap--md)/2);
flex-grow: 1;
flex-shrink: 0
}
@@ -44,17 +57,17 @@
@media (min-width: 43.75rem) {
.region--content-below > * {
- flex-basis: calc(33.33% - 1.50075rem)
+ flex-basis: calc(33.33% - var(--grid-gap--md)*0.667)
}
[dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"]
.region--content-below > *:last-child {
- margin-right: 2.25rem
+ margin-right: var(--grid-gap--md)
}
[dir="rtl"] .region--content-below > *:nth-child(2n),[dir="rtl"]
.region--content-below > *:last-child {
- margin-left: 2.25rem
+ margin-left: var(--grid-gap--md)
}
[dir="ltr"] .region--content-below > *:nth-child(3n),[dir="ltr"]
diff --git a/core/themes/olivero/css/layout/region-content-below.pcss.css b/core/themes/olivero/css/layout/region-content-below.pcss.css
index ab12c6d34796d7b1624d4f5fbaf2ce729eab71d0..6d16436bb956ac0485b1a6c29e6de6d1e5a8abf1 100644
--- a/core/themes/olivero/css/layout/region-content-below.pcss.css
+++ b/core/themes/olivero/css/layout/region-content-below.pcss.css
@@ -3,7 +3,7 @@
* Content below region layout.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.region--content-below {
@media (--md) {
diff --git a/core/themes/olivero/css/layout/region-content.css b/core/themes/olivero/css/layout/region-content.css
index 494a6f49b03a1acd0c4d38aa92a1e818059d8dc3..bc8e12d3e141acef48cb7bf39d255a030a35e765 100644
--- a/core/themes/olivero/css/layout/region-content.css
+++ b/core/themes/olivero/css/layout/region-content.css
@@ -10,20 +10,33 @@
* Content region layout.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.region--content {
- margin-bottom: 1.125rem
+ margin-bottom: var(--sp)
}
@media (min-width: 43.75rem) {
.region--content {
- margin-bottom: 2.25rem
+ margin-bottom: var(--sp2)
}
}
@media (min-width: 62.5rem) {
.region--content {
- margin-bottom: 3.375rem
+ margin-bottom: var(--sp3)
}
}
diff --git a/core/themes/olivero/css/layout/region-content.pcss.css b/core/themes/olivero/css/layout/region-content.pcss.css
index 05ee1ec3c0d1218b5a38521621070cb6dded23ac..4e1fddb048ffaf36abaf3a46f12260bdd6ffded9 100644
--- a/core/themes/olivero/css/layout/region-content.pcss.css
+++ b/core/themes/olivero/css/layout/region-content.pcss.css
@@ -3,7 +3,7 @@
* Content region layout.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.region--content {
margin-block-end: var(--sp);
diff --git a/core/themes/olivero/css/layout/region-hero.css b/core/themes/olivero/css/layout/region-hero.css
index 875812816d5e4dcab8b90ded08bf57e36196a7ed..86b1c6866de6affd2a55b1549a18c2d775b7e1d0 100644
--- a/core/themes/olivero/css/layout/region-hero.css
+++ b/core/themes/olivero/css/layout/region-hero.css
@@ -10,6 +10,19 @@
* Region default layout.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.region--hero > *:last-child {
margin-bottom: 0;
}
diff --git a/core/themes/olivero/css/layout/region-hero.pcss.css b/core/themes/olivero/css/layout/region-hero.pcss.css
index d7c10620e76b26a7828f2442c5f138ce4a467f87..4e2526a39358c6a28fc650a6e7b4c9b8f1013556 100644
--- a/core/themes/olivero/css/layout/region-hero.pcss.css
+++ b/core/themes/olivero/css/layout/region-hero.pcss.css
@@ -3,7 +3,7 @@
* Region default layout.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.region--hero {
& > *:last-child {
diff --git a/core/themes/olivero/css/layout/region-secondary-menu.css b/core/themes/olivero/css/layout/region-secondary-menu.css
index e187d2b19825550ac9b62ce34ca3f105dd747e72..d2088db10f1aac6ac3ad4cd87b8461dc614fd2c2 100644
--- a/core/themes/olivero/css/layout/region-secondary-menu.css
+++ b/core/themes/olivero/css/layout/region-secondary-menu.css
@@ -10,10 +10,23 @@
* Secondary menu region layout styling.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.region--secondary-menu {
display: flex;
- margin-top: 2.25rem;
- margin-bottom: 2.25rem
+ margin-top: var(--sp2);
+ margin-bottom: var(--sp2)
}
.region--secondary-menu > * {
diff --git a/core/themes/olivero/css/layout/region-secondary-menu.pcss.css b/core/themes/olivero/css/layout/region-secondary-menu.pcss.css
index d1d88e0f1561954446e937a610fa9cdb274204b0..7d495cbcbff083e4f2361a805926edf47f547a8e 100644
--- a/core/themes/olivero/css/layout/region-secondary-menu.pcss.css
+++ b/core/themes/olivero/css/layout/region-secondary-menu.pcss.css
@@ -3,7 +3,7 @@
* Secondary menu region layout styling.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.region--secondary-menu {
display: flex;
diff --git a/core/themes/olivero/css/layout/region.css b/core/themes/olivero/css/layout/region.css
index 4732ec89494333e01ceb8c4475c651d3342f20dc..e11590f238acbae1643919aed0a26202abd0cbd3 100644
--- a/core/themes/olivero/css/layout/region.css
+++ b/core/themes/olivero/css/layout/region.css
@@ -10,20 +10,33 @@
* Region default layout.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.region > * {
- margin-bottom: 1.125rem
+ margin-bottom: var(--sp)
}
@media (min-width: 43.75rem) {
.region > * {
- margin-bottom: 2.25rem
+ margin-bottom: var(--sp2)
}
}
@media (min-width: 62.5rem) {
.region > * {
- margin-bottom: 3.375rem
+ margin-bottom: var(--sp3)
}
}
diff --git a/core/themes/olivero/css/layout/region.pcss.css b/core/themes/olivero/css/layout/region.pcss.css
index bc02691f2300a0d016d02d9caeec36902551a8b8..c04a060616615a063178d92dedff027f33bc03e4 100644
--- a/core/themes/olivero/css/layout/region.pcss.css
+++ b/core/themes/olivero/css/layout/region.pcss.css
@@ -3,7 +3,7 @@
* Region default layout.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.region > * {
margin-block-end: var(--sp);
diff --git a/core/themes/olivero/css/layout/social-bar.css b/core/themes/olivero/css/layout/social-bar.css
index bb2aa5a27e19cce630de89a8ec94a405f465f869..dc6aec3ef2948c3a7422b2fbc3ebab6485f6acbf 100644
--- a/core/themes/olivero/css/layout/social-bar.css
+++ b/core/themes/olivero/css/layout/social-bar.css
@@ -11,35 +11,48 @@
.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
@media (min-width: 75rem) {
.social-bar {
flex-shrink: 0;
- width: 5.625rem;
- background-color: #f7f9fa
+ width: var(--content-left);
+ background-color: var(--color--gray-95)
}
}
[dir="ltr"] .social-bar__inner {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
[dir="rtl"] .social-bar__inner {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="ltr"] .social-bar__inner {
- padding-right: 1.125rem
+ padding-right: var(--sp)
}
[dir="rtl"] .social-bar__inner {
- padding-left: 1.125rem
+ padding-left: var(--sp)
}
.social-bar__inner {
position: relative;
- padding-top: 0.5625rem;
- padding-bottom: 0.5625rem
+ padding-top: var(--sp0-5);
+ padding-bottom: var(--sp0-5)
}
@media (min-width: 75rem) {
@@ -62,9 +75,9 @@
.social-bar__inner {
position: relative;
- width: 5.625rem;
- padding-top: 5.625rem;
- padding-bottom: 5.625rem
+ width: var(--content-left);
+ padding-top: calc(var(--sp)*5);
+ padding-bottom: calc(var(--sp)*5)
}
[dir="ltr"] .social-bar__inner.is-fixed {
@@ -77,13 +90,13 @@
.social-bar__inner.is-fixed {
position: fixed;
- top: 6.75rem;
- height: calc(100vh - 6.75rem);
+ top: var(--sp6);
+ height: calc(100vh - var(--sp)*6);
}
}
.rotate > * {
- margin-bottom: 2.25rem
+ margin-bottom: var(--sp2)
}
@media (min-width: 75rem) {
@@ -95,11 +108,11 @@
}
[dir="ltr"] .rotate > *:not(:first-child) {
- margin-right: 2.25rem
+ margin-right: var(--sp2)
}
[dir="rtl"] .rotate > *:not(:first-child) {
- margin-left: 2.25rem
+ margin-left: var(--sp2)
}
}
diff --git a/core/themes/olivero/css/layout/social-bar.pcss.css b/core/themes/olivero/css/layout/social-bar.pcss.css
index 858b3e78f93f6a0d43393aecd41f5e8ace6022d7..1dc3712ab33ae7808c3eafcc88a282efc2b512b8 100644
--- a/core/themes/olivero/css/layout/social-bar.pcss.css
+++ b/core/themes/olivero/css/layout/social-bar.pcss.css
@@ -4,7 +4,7 @@
.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.social-bar {
@media (--nav) {
diff --git a/core/themes/olivero/css/layout/views.css b/core/themes/olivero/css/layout/views.css
index e7129ffb32bdc5affa4224e2fd162a07989d6918..175272d7c69e6faa1c4b8f379dc6dd93a6348a30 100644
--- a/core/themes/olivero/css/layout/views.css
+++ b/core/themes/olivero/css/layout/views.css
@@ -10,8 +10,21 @@
* Styles for views.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
.view > * {
- margin-bottom: 2.25rem
+ margin-bottom: var(--sp2)
}
.view > *:last-child {
@@ -21,6 +34,6 @@
@media (min-width: 43.75rem) {
.view > * {
- margin-bottom: 3.375rem
+ margin-bottom: var(--sp3)
}
}
diff --git a/core/themes/olivero/css/layout/views.pcss.css b/core/themes/olivero/css/layout/views.pcss.css
index 2c3fd66936f8b2ffa38771084cfdf8a170235f41..cbc6f03f479b098ea91fcee7fef2bbc43da1bdd8 100644
--- a/core/themes/olivero/css/layout/views.pcss.css
+++ b/core/themes/olivero/css/layout/views.pcss.css
@@ -3,7 +3,7 @@
* Styles for views.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.view {
& > * {
diff --git a/core/themes/olivero/css/theme/ckeditor-frame.css b/core/themes/olivero/css/theme/ckeditor-frame.css
index e644b01568fa25d2286dffca58d47064b18d2241..5482670186a75162952bad54e6a1cd2aaf925d14 100644
--- a/core/themes/olivero/css/theme/ckeditor-frame.css
+++ b/core/themes/olivero/css/theme/ckeditor-frame.css
@@ -9,12 +9,20 @@
* CKEditor frame styles.
*/
/** cspell:ignore grouptitle */
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+/* Navigation related breakpoints */
+/* Grid related breakpoints */
+/* Grid shifts from 6 to 14 columns. */
+/* Width of the entire grid maxes out. */
.cke_editable {
- margin: 1.125rem;
+ margin: var(--sp1);
background-image: none;
}
[dir].cke_panel_container body {
- background: #fff;
+ background: var(--color--white);
}
.cke_panel_listItem a > * {
margin-top: 0;
@@ -24,10 +32,10 @@
margin: 0;
}
[dir="ltr"] .cke_editable blockquote {
- margin-left: 3.375rem;
+ margin-left: var(--sp3);
}
[dir="rtl"] .cke_editable blockquote {
- margin-right: 3.375rem;
+ margin-right: var(--sp3);
}
[dir="ltr"] .cke_editable .align-right {
margin-right: 0;
@@ -48,7 +56,7 @@ figure.cke_widget_element {
margin: 0;
}
figcaption.cke_widget_editable {
- background-color: #fff;
+ background-color: var(--color--white);
}
[dir="ltr"] .cke_panel_list {
margin-left: 0;
diff --git a/core/themes/olivero/css/theme/ckeditor-frame.pcss.css b/core/themes/olivero/css/theme/ckeditor-frame.pcss.css
index d492c1adda6fc08989ff47aa8c889ada495be9e4..4baab7d9d3caa4f0d421559a2da3325715843bab 100644
--- a/core/themes/olivero/css/theme/ckeditor-frame.pcss.css
+++ b/core/themes/olivero/css/theme/ckeditor-frame.pcss.css
@@ -4,7 +4,7 @@
*/
/** cspell:ignore grouptitle */
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
.cke_editable {
margin: var(--sp1);
diff --git a/core/themes/olivero/css/theme/filter.theme.css b/core/themes/olivero/css/theme/filter.theme.css
index 20139539bc0c585661b08fd048db45c30928b553..c7987c77565d0c3e3ce80655af8052c4117fd917 100644
--- a/core/themes/olivero/css/theme/filter.theme.css
+++ b/core/themes/olivero/css/theme/filter.theme.css
@@ -10,6 +10,19 @@
* Styling for the Filter module.
*/
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
/**
* Filter information under field.
*/
@@ -23,8 +36,8 @@
}
.filter-wrapper {
- margin-top: 1.125rem;
- margin-bottom: 0.5625rem;
+ margin-top: var(--sp1);
+ margin-bottom: var(--sp0-5);
}
.filter-wrapper .form-item {
@@ -40,9 +53,9 @@
}
.filter-help {
- padding-top: 0.5625rem;
- padding-bottom: 0.5625rem;
- font-size: 0.75rem;
+ padding-top: var(--sp0-5);
+ padding-bottom: var(--sp0-5);
+ font-size: var(--font-size-xxs);
}
/**
@@ -52,8 +65,8 @@
*/
.compose-tips__item {
- margin-top: 1.6875rem;
- margin-bottom: 1.6875rem;
+ margin-top: var(--sp1-5);
+ margin-bottom: var(--sp1-5);
}
/**
@@ -61,13 +74,13 @@
*/
.filter-guidelines__item {
- margin-top: 1.125rem;
- font-size: 0.875rem;
- line-height: 1.125rem;
+ margin-top: var(--sp1);
+ font-size: var(--font-size-s);
+ line-height: var(--line-height-s);
}
.filter-guidelines p {
- margin-top: 0.28125rem;
+ margin-top: var(--sp0-25);
margin-bottom: 0;
}
@@ -79,16 +92,16 @@
*/
.filter-tips--long {
- margin-bottom: 1.6875rem;
+ margin-bottom: var(--sp1-5);
}
.filter-tips__item,
.filter-tips--long p {
- margin-top: 0.84375rem;
- margin-bottom: 0.84375rem;
+ margin-top: var(--sp0-75);
+ margin-bottom: var(--sp0-75);
}
.filter-tips__item--short {
- margin-top: 0.28125rem;
+ margin-top: var(--sp0-25);
margin-bottom: 0;
}
diff --git a/core/themes/olivero/css/theme/filter.theme.pcss.css b/core/themes/olivero/css/theme/filter.theme.pcss.css
index 1b5281270eab11140f4c0b554b794f3c9775ae53..3bc0aa2dfd6643ae2f29a2b666439802430c63e7 100644
--- a/core/themes/olivero/css/theme/filter.theme.pcss.css
+++ b/core/themes/olivero/css/theme/filter.theme.pcss.css
@@ -3,7 +3,7 @@
* Styling for the Filter module.
*/
-@import "../base/variables.pcss.css";
+@import "../base/media-queries.pcss.css";
/**
* Filter information under field.
diff --git a/core/themes/olivero/js/checkbox.js b/core/themes/olivero/js/checkbox.js
index 90d825cbee41ad588186ded39ff3f81dc114feeb..e2032acf910c1fd1d84ef732e60023ae0750c99e 100644
--- a/core/themes/olivero/js/checkbox.js
+++ b/core/themes/olivero/js/checkbox.js
@@ -5,8 +5,6 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.checkbox = function () {
- return '<input type="checkbox" class="form-checkbox form-boolean form-boolean--type-checkbox"/>';
- };
+(Drupal => {
+ Drupal.theme.checkbox = () => '<input type="checkbox" class="form-checkbox form-boolean form-boolean--type-checkbox"/>';
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/olivero/js/comments.js b/core/themes/olivero/js/comments.js
index ba0af97b61a2eb3f04e8161adec41a5295aeefbe..2e5ca5bab658e46dba91b3c416f4a27d3648b1b5 100644
--- a/core/themes/olivero/js/comments.js
+++ b/core/themes/olivero/js/comments.js
@@ -5,24 +5,24 @@
* @preserve
**/
-(function (Drupal, once) {
+((Drupal, once) => {
function init(comments) {
- comments.querySelectorAll('[data-drupal-selector="comment"]').forEach(function (comment) {
+ comments.querySelectorAll('[data-drupal-selector="comment"]').forEach(comment => {
if (comment.nextElementSibling != null && comment.nextElementSibling.matches('.indented')) {
comment.classList.add('has-children');
}
});
- comments.querySelectorAll('.indented').forEach(function (commentGroup) {
- var showHideWrapper = document.createElement('div');
+ comments.querySelectorAll('.indented').forEach(commentGroup => {
+ const showHideWrapper = document.createElement('div');
showHideWrapper.setAttribute('class', 'show-hide-wrapper');
- var toggleCommentsBtn = document.createElement('button');
+ const toggleCommentsBtn = document.createElement('button');
toggleCommentsBtn.setAttribute('type', 'button');
toggleCommentsBtn.setAttribute('aria-expanded', 'true');
toggleCommentsBtn.setAttribute('class', 'show-hide-btn');
toggleCommentsBtn.innerText = Drupal.t('Replies');
commentGroup.parentNode.insertBefore(showHideWrapper, commentGroup);
showHideWrapper.appendChild(toggleCommentsBtn);
- toggleCommentsBtn.addEventListener('click', function (e) {
+ toggleCommentsBtn.addEventListener('click', e => {
commentGroup.classList.toggle('hidden');
e.currentTarget.setAttribute('aria-expanded', commentGroup.classList.contains('hidden') ? 'false' : 'true');
});
@@ -30,8 +30,9 @@
}
Drupal.behaviors.comments = {
- attach: function attach(context) {
+ attach(context) {
once('comments', '[data-drupal-selector="comments"]', context).forEach(init);
}
+
};
})(Drupal, once);
\ No newline at end of file
diff --git a/core/themes/olivero/js/messages.js b/core/themes/olivero/js/messages.js
index e2c4deb9e56b43cdf7bb29345b8c2cdf0b09548b..8ea472c0d5b498a9197428ac629fdff239ac420f 100644
--- a/core/themes/olivero/js/messages.js
+++ b/core/themes/olivero/js/messages.js
@@ -5,38 +5,40 @@
* @preserve
**/
-(function (Drupal, once) {
- var closeMessage = function closeMessage(message) {
- var messageContainer = message.querySelector('[data-drupal-selector="messages-container"]');
- var closeBtnWrapper = document.createElement('div');
+((Drupal, once) => {
+ const closeMessage = message => {
+ const messageContainer = message.querySelector('[data-drupal-selector="messages-container"]');
+ const closeBtnWrapper = document.createElement('div');
closeBtnWrapper.setAttribute('class', 'messages__button');
- var closeBtn = document.createElement('button');
+ const closeBtn = document.createElement('button');
closeBtn.setAttribute('type', 'button');
closeBtn.setAttribute('class', 'messages__close');
- var closeBtnText = document.createElement('span');
+ const closeBtnText = document.createElement('span');
closeBtnText.setAttribute('class', 'visually-hidden');
closeBtnText.innerText = Drupal.t('Close message');
messageContainer.appendChild(closeBtnWrapper);
closeBtnWrapper.appendChild(closeBtn);
closeBtn.appendChild(closeBtnText);
- closeBtn.addEventListener('click', function () {
+ closeBtn.addEventListener('click', () => {
message.classList.add('hidden');
});
};
- Drupal.theme.message = function (_ref, _ref2) {
- var text = _ref.text;
- var type = _ref2.type,
- id = _ref2.id;
- var messagesTypes = Drupal.Message.getMessageTypeLabels();
- var messageWrapper = document.createElement('div');
- messageWrapper.setAttribute('class', "messages-list__item messages messages--".concat(type));
+ Drupal.theme.message = ({
+ text
+ }, {
+ type,
+ id
+ }) => {
+ const messagesTypes = Drupal.Message.getMessageTypeLabels();
+ const messageWrapper = document.createElement('div');
+ messageWrapper.setAttribute('class', `messages-list__item messages messages--${type}`);
messageWrapper.setAttribute('data-drupal-selector', 'messages');
messageWrapper.setAttribute('role', type === 'error' || type === 'warning' ? 'alert' : 'status');
- messageWrapper.setAttribute('aria-labelledby', "".concat(id, "-title"));
+ messageWrapper.setAttribute('aria-labelledby', `${id}-title`);
messageWrapper.setAttribute('data-drupal-message-id', id);
messageWrapper.setAttribute('data-drupal-message-type', type);
- var svg = '';
+ let svg = '';
if (['error', 'warning', 'status', 'info'].includes(type)) {
svg = '<div class="messages__icon"><svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">';
@@ -56,14 +58,25 @@
svg += '</svg></div>';
}
- messageWrapper.innerHTML = "\n <div class=\"messages__container\" data-drupal-selector=\"messages-container\">\n <div class=\"messages__header".concat(!svg ? ' no-icon' : '', "\">\n <h2 class=\"visually-hidden\">").concat(messagesTypes[type], "</h2>\n ").concat(svg, "\n </div>\n <div class=\"messages__content\">\n ").concat(text, "\n </div>\n </div>\n ");
+ messageWrapper.innerHTML = `
+ <div class="messages__container" data-drupal-selector="messages-container">
+ <div class="messages__header${!svg ? ' no-icon' : ''}">
+ <h2 class="visually-hidden">${messagesTypes[type]}</h2>
+ ${svg}
+ </div>
+ <div class="messages__content">
+ ${text}
+ </div>
+ </div>
+ `;
closeMessage(messageWrapper);
return messageWrapper;
};
Drupal.behaviors.messages = {
- attach: function attach(context) {
+ attach(context) {
once('messages', '[data-drupal-selector="messages"]', context).forEach(closeMessage);
}
+
};
})(Drupal, once);
\ No newline at end of file
diff --git a/core/themes/olivero/js/navigation-utils.js b/core/themes/olivero/js/navigation-utils.js
index abdc3c5c53b2ad90aac2a6a86024b661400fd161..fb22bee3eafa81ed58d81f3c5c05e1919f4005c6 100644
--- a/core/themes/olivero/js/navigation-utils.js
+++ b/core/themes/olivero/js/navigation-utils.js
@@ -5,25 +5,25 @@
* @preserve
**/
-(function (Drupal) {
+(Drupal => {
Drupal.olivero = {};
function isDesktopNav() {
- var navButtons = document.querySelector('[data-drupal-selector="mobile-buttons"]');
+ const navButtons = document.querySelector('[data-drupal-selector="mobile-buttons"]');
return navButtons ? window.getComputedStyle(navButtons).getPropertyValue('display') === 'none' : false;
}
Drupal.olivero.isDesktopNav = isDesktopNav;
- var stickyHeaderToggleButton = document.querySelector('[data-drupal-selector="sticky-header-toggle"]');
- var siteHeaderFixable = document.querySelector('[data-drupal-selector="site-header-fixable"]');
+ const stickyHeaderToggleButton = document.querySelector('[data-drupal-selector="sticky-header-toggle"]');
+ const siteHeaderFixable = document.querySelector('[data-drupal-selector="site-header-fixable"]');
function stickyHeaderIsEnabled() {
return stickyHeaderToggleButton.getAttribute('aria-checked') === 'true';
}
function setStickyHeaderStorage(expandedState) {
- var now = new Date();
- var item = {
+ const now = new Date();
+ const item = {
value: expandedState,
expiry: now.getTime() + 20160000
};
@@ -44,10 +44,10 @@
}
function getStickyHeaderStorage() {
- var stickyHeaderState = localStorage.getItem('Drupal.olivero.stickyHeaderState');
+ const stickyHeaderState = localStorage.getItem('Drupal.olivero.stickyHeaderState');
if (!stickyHeaderState) return false;
- var item = JSON.parse(stickyHeaderState);
- var now = new Date();
+ const item = JSON.parse(stickyHeaderState);
+ const now = new Date();
if (now.getTime() > item.expiry) {
localStorage.removeItem('Drupal.olivero.stickyHeaderState');
@@ -58,27 +58,24 @@
}
if ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
- var fixableElements = document.querySelectorAll('[data-drupal-selector="site-header-fixable"], [data-drupal-selector="social-bar-inner"]');
+ const fixableElements = document.querySelectorAll('[data-drupal-selector="site-header-fixable"], [data-drupal-selector="social-bar-inner"]');
function toggleDesktopNavVisibility(entries) {
if (!isDesktopNav()) return;
- entries.forEach(function (entry) {
+ entries.forEach(entry => {
if (entry.intersectionRatio < 1) {
- fixableElements.forEach(function (el) {
- return el.classList.add('is-fixed');
- });
+ fixableElements.forEach(el => el.classList.add('is-fixed'));
} else {
- fixableElements.forEach(function (el) {
- return el.classList.remove('is-fixed');
- });
+ fixableElements.forEach(el => el.classList.remove('is-fixed'));
}
});
}
function getRootMargin() {
- var rootMarginTop = 72;
- var _document = document,
- body = _document.body;
+ let rootMarginTop = 72;
+ const {
+ body
+ } = document;
if (body.classList.contains('toolbar-fixed')) {
rootMarginTop -= 39;
@@ -88,16 +85,16 @@
rootMarginTop -= 40;
}
- return "".concat(rootMarginTop, "px 0px 0px 0px");
+ return `${rootMarginTop}px 0px 0px 0px`;
}
function monitorNavPosition() {
- var primaryNav = document.querySelector('[data-drupal-selector="site-header"]');
- var options = {
+ const primaryNav = document.querySelector('[data-drupal-selector="site-header"]');
+ const options = {
rootMargin: getRootMargin(),
threshold: [0.999, 1]
};
- var observer = new IntersectionObserver(toggleDesktopNavVisibility, options);
+ const observer = new IntersectionObserver(toggleDesktopNavVisibility, options);
if (primaryNav) {
observer.observe(primaryNav);
@@ -105,19 +102,19 @@
}
if (stickyHeaderToggleButton) {
- stickyHeaderToggleButton.addEventListener('click', function () {
+ stickyHeaderToggleButton.addEventListener('click', () => {
toggleStickyHeaderState(!stickyHeaderIsEnabled());
});
}
- var siteHeaderInner = document.querySelector('[data-drupal-selector="site-header-inner"]');
+ const siteHeaderInner = document.querySelector('[data-drupal-selector="site-header-inner"]');
if (siteHeaderInner) {
- siteHeaderInner.addEventListener('focusin', function () {
+ siteHeaderInner.addEventListener('focusin', () => {
if (isDesktopNav() && !stickyHeaderIsEnabled()) {
- var header = document.querySelector('[data-drupal-selector="site-header"]');
- var headerNav = header.querySelector('[data-drupal-selector="header-nav"]');
- var headerMargin = header.clientHeight - headerNav.clientHeight;
+ const header = document.querySelector('[data-drupal-selector="site-header"]');
+ const headerNav = header.querySelector('[data-drupal-selector="header-nav"]');
+ const headerMargin = header.clientHeight - headerNav.clientHeight;
if (window.scrollY > headerMargin) {
window.scrollTo(0, headerMargin);
diff --git a/core/themes/olivero/js/navigation.js b/core/themes/olivero/js/navigation.js
index fe85f53fd846123febea3f82e0b900a058dc4b83..f60a84575c0a84947ac3c280dbefff62789994c8 100644
--- a/core/themes/olivero/js/navigation.js
+++ b/core/themes/olivero/js/navigation.js
@@ -5,13 +5,13 @@
* @preserve
**/
-(function (Drupal, once, tabbable) {
+((Drupal, once, tabbable) => {
function isNavOpen(navWrapper) {
return navWrapper.classList.contains('is-active');
}
function toggleNav(props, state) {
- var value = !!state;
+ const value = !!state;
props.navButton.setAttribute('aria-expanded', value);
if (value) {
@@ -28,10 +28,10 @@
function init(props) {
props.navButton.setAttribute('aria-controls', props.navWrapperId);
props.navButton.setAttribute('aria-expanded', 'false');
- props.navButton.addEventListener('click', function () {
+ props.navButton.addEventListener('click', () => {
toggleNav(props, !isNavOpen(props.navWrapper));
});
- document.addEventListener('keyup', function (e) {
+ document.addEventListener('keyup', e => {
if (e.key === 'Escape' || e.key === 'Esc') {
if (props.olivero.areAnySubNavsOpen()) {
props.olivero.closeAllSubNav();
@@ -40,18 +40,18 @@
}
}
});
- props.overlay.addEventListener('click', function () {
+ props.overlay.addEventListener('click', () => {
toggleNav(props, false);
});
- props.overlay.addEventListener('touchstart', function () {
+ props.overlay.addEventListener('touchstart', () => {
toggleNav(props, false);
});
- props.header.addEventListener('keydown', function (e) {
+ props.header.addEventListener('keydown', e => {
if (e.key === 'Tab' && isNavOpen(props.navWrapper)) {
- var tabbableNavElements = tabbable.tabbable(props.navWrapper);
+ const tabbableNavElements = tabbable.tabbable(props.navWrapper);
tabbableNavElements.unshift(props.navButton);
- var firstTabbableEl = tabbableNavElements[0];
- var lastTabbableEl = tabbableNavElements[tabbableNavElements.length - 1];
+ const firstTabbableEl = tabbableNavElements[0];
+ const lastTabbableEl = tabbableNavElements[tabbableNavElements.length - 1];
if (e.shiftKey) {
if (document.activeElement === firstTabbableEl && !props.olivero.isDesktopNav()) {
@@ -64,7 +64,7 @@
}
}
});
- window.addEventListener('resize', function () {
+ window.addEventListener('resize', () => {
if (props.olivero.isDesktopNav()) {
toggleNav(props, false);
props.body.classList.remove('is-overlay-active');
@@ -73,35 +73,38 @@
Drupal.olivero.closeAllSubNav();
});
- props.navWrapper.addEventListener('click', function (e) {
- if (e.target.matches("[href*=\"".concat(window.location.pathname, "#\"], [href*=\"").concat(window.location.pathname, "#\"] *, [href^=\"#\"], [href^=\"#\"] *"))) {
+ props.navWrapper.addEventListener('click', e => {
+ if (e.target.matches(`[href*="${window.location.pathname}#"], [href*="${window.location.pathname}#"] *, [href^="#"], [href^="#"] *`)) {
toggleNav(props, false);
}
});
}
Drupal.behaviors.oliveroNavigation = {
- attach: function attach(context) {
- var headerId = 'header';
- var header = once('navigation', "#".concat(headerId), context).shift();
- var navWrapperId = 'header-nav';
+ attach(context) {
+ const headerId = 'header';
+ const header = once('navigation', `#${headerId}`, context).shift();
+ const navWrapperId = 'header-nav';
if (header) {
- var navWrapper = header.querySelector("#".concat(navWrapperId));
- var olivero = Drupal.olivero;
- var navButton = context.querySelector('[data-drupal-selector="mobile-nav-button"]');
- var body = context.querySelector('body');
- var overlay = context.querySelector('[data-drupal-selector="overlay"]');
+ const navWrapper = header.querySelector(`#${navWrapperId}`);
+ const {
+ olivero
+ } = Drupal;
+ const navButton = context.querySelector('[data-drupal-selector="mobile-nav-button"]');
+ const body = context.querySelector('body');
+ const overlay = context.querySelector('[data-drupal-selector="overlay"]');
init({
- olivero: olivero,
- header: header,
- navWrapperId: navWrapperId,
- navWrapper: navWrapper,
- navButton: navButton,
- body: body,
- overlay: overlay
+ olivero,
+ header,
+ navWrapperId,
+ navWrapper,
+ navButton,
+ body,
+ overlay
});
}
}
+
};
})(Drupal, once, tabbable);
\ No newline at end of file
diff --git a/core/themes/olivero/js/search.js b/core/themes/olivero/js/search.js
index 2d96deb2203067ce56377bc35d47abf24b436409..7db869bfcf3d1d157d3712ac2c068a7df7e6c522 100644
--- a/core/themes/olivero/js/search.js
+++ b/core/themes/olivero/js/search.js
@@ -5,9 +5,9 @@
* @preserve
**/
-(function (Drupal) {
- var searchWideButton = document.querySelector('[data-drupal-selector="block-search-wide-button"]');
- var searchWideWrapper = document.querySelector('[data-drupal-selector="block-search-wide-wrapper"]');
+(Drupal => {
+ const searchWideButton = document.querySelector('[data-drupal-selector="block-search-wide-button"]');
+ const searchWideWrapper = document.querySelector('[data-drupal-selector="block-search-wide-wrapper"]');
function searchIsVisible() {
return searchWideWrapper.classList.contains('is-active');
@@ -38,24 +38,25 @@
}
Drupal.olivero.toggleSearchVisibility = toggleSearchVisibility;
- document.addEventListener('keyup', function (e) {
+ document.addEventListener('keyup', e => {
if (e.key === 'Escape' || e.key === 'Esc') {
toggleSearchVisibility(false);
}
});
- searchWideButton.addEventListener('click', function () {
+ searchWideButton.addEventListener('click', () => {
toggleSearchVisibility(!searchIsVisible());
});
Drupal.behaviors.searchWide = {
- attach: function attach(context) {
- var searchWideButton = once('search-wide', '[data-drupal-selector="block-search-wide-button"]', context).shift();
+ attach(context) {
+ const searchWideButton = once('search-wide', '[data-drupal-selector="block-search-wide-button"]', context).shift();
if (searchWideButton) {
searchWideButton.setAttribute('aria-expanded', 'false');
}
}
+
};
- document.querySelector('[data-drupal-selector="search-block-form-2"]').addEventListener('focusout', function (e) {
+ document.querySelector('[data-drupal-selector="search-block-form-2"]').addEventListener('focusout', e => {
if (!e.currentTarget.contains(e.relatedTarget)) {
toggleSearchVisibility(false);
}
diff --git a/core/themes/olivero/js/second-level-navigation.js b/core/themes/olivero/js/second-level-navigation.js
index 8575af8ec5e3aa5ec2106dc2fe19fad09f1fadfe..01a12da4079777c138acab4c4aa29a983dfc0b80 100644
--- a/core/themes/olivero/js/second-level-navigation.js
+++ b/core/themes/olivero/js/second-level-navigation.js
@@ -5,18 +5,20 @@
* @preserve
**/
-(function (Drupal) {
- var isDesktopNav = Drupal.olivero.isDesktopNav;
- var secondLevelNavMenus = document.querySelectorAll('[data-drupal-selector="primary-nav-menu-item-has-children"]');
+(Drupal => {
+ const {
+ isDesktopNav
+ } = Drupal.olivero;
+ const secondLevelNavMenus = document.querySelectorAll('[data-drupal-selector="primary-nav-menu-item-has-children"]');
function toggleSubNav(topLevelMenuItem, toState) {
- var buttonSelector = '[data-drupal-selector="primary-nav-submenu-toggle-button"]';
- var button = topLevelMenuItem.querySelector(buttonSelector);
- var state = toState !== undefined ? toState : button.getAttribute('aria-expanded') !== 'true';
+ const buttonSelector = '[data-drupal-selector="primary-nav-submenu-toggle-button"]';
+ const button = topLevelMenuItem.querySelector(buttonSelector);
+ const state = toState !== undefined ? toState : button.getAttribute('aria-expanded') !== 'true';
if (state) {
if (isDesktopNav()) {
- secondLevelNavMenus.forEach(function (el) {
+ secondLevelNavMenus.forEach(el => {
el.querySelector(buttonSelector).setAttribute('aria-expanded', 'false');
el.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.remove('is-active-menu-parent');
el.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.remove('is-active-menu-parent');
@@ -38,8 +40,8 @@
function handleBlur(e) {
if (!Drupal.olivero.isDesktopNav()) return;
- setTimeout(function () {
- var menuParentItem = e.target.closest('[data-drupal-selector="primary-nav-menu-item-has-children"]');
+ setTimeout(() => {
+ const menuParentItem = e.target.closest('[data-drupal-selector="primary-nav-menu-item-has-children"]');
if (!menuParentItem.contains(document.activeElement)) {
toggleSubNav(menuParentItem, false);
@@ -47,30 +49,30 @@
}, 200);
}
- secondLevelNavMenus.forEach(function (el) {
- var button = el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]');
+ secondLevelNavMenus.forEach(el => {
+ const button = el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]');
button.removeAttribute('aria-hidden');
button.removeAttribute('tabindex');
- el.addEventListener('touchstart', function () {
+ el.addEventListener('touchstart', () => {
el.classList.add('is-touch-event');
}, {
passive: true
});
- el.addEventListener('mouseover', function () {
+ el.addEventListener('mouseover', () => {
if (isDesktopNav() && !el.classList.contains('is-touch-event')) {
el.classList.add('is-active-mouseover-event');
toggleSubNav(el, true);
- setTimeout(function () {
+ setTimeout(() => {
el.classList.remove('is-active-mouseover-event');
}, 500);
}
});
- button.addEventListener('click', function () {
+ button.addEventListener('click', () => {
if (!el.classList.contains('is-active-mouseover-event')) {
toggleSubNav(el);
}
});
- el.addEventListener('mouseout', function () {
+ el.addEventListener('mouseout', () => {
if (isDesktopNav() && !document.activeElement.matches('[aria-expanded="true"], .is-active-menu-parent *')) {
toggleSubNav(el, false);
}
@@ -79,7 +81,7 @@
});
function closeAllSubNav() {
- secondLevelNavMenus.forEach(function (el) {
+ secondLevelNavMenus.forEach(el => {
if (el.contains(document.activeElement)) {
el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]').focus();
}
@@ -91,10 +93,10 @@
Drupal.olivero.closeAllSubNav = closeAllSubNav;
function areAnySubNavsOpen() {
- var subNavsAreOpen = false;
- secondLevelNavMenus.forEach(function (el) {
- var button = el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]');
- var state = button.getAttribute('aria-expanded') === 'true';
+ let subNavsAreOpen = false;
+ secondLevelNavMenus.forEach(el => {
+ const button = el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]');
+ const state = button.getAttribute('aria-expanded') === 'true';
if (state) {
subNavsAreOpen = true;
@@ -104,12 +106,12 @@
}
Drupal.olivero.areAnySubNavsOpen = areAnySubNavsOpen;
- document.addEventListener('keyup', function (e) {
+ document.addEventListener('keyup', e => {
if (e.key === 'Escape' || e.key === 'Esc') {
if (isDesktopNav()) closeAllSubNav();
}
});
- document.addEventListener('touchstart', function (e) {
+ document.addEventListener('touchstart', e => {
if (areAnySubNavsOpen() && !e.target.matches('[data-drupal-selector="header-nav"], [data-drupal-selector="header-nav"] *')) {
closeAllSubNav();
}
diff --git a/core/themes/olivero/js/tabs.js b/core/themes/olivero/js/tabs.js
index 81d7475d1af38b086b2d30ea996ba5f20dcb5a49..418b2e45e1a96dca028b04bda0ab34a4125c561b 100644
--- a/core/themes/olivero/js/tabs.js
+++ b/core/themes/olivero/js/tabs.js
@@ -5,11 +5,11 @@
* @preserve
**/
-(function (Drupal, once) {
+((Drupal, once) => {
function init(el) {
- var tabs = el.querySelector('.tabs');
- var expandedClass = 'is-expanded';
- var activeTab = tabs.querySelector('.is-active');
+ const tabs = el.querySelector('.tabs');
+ const expandedClass = 'is-expanded';
+ const activeTab = tabs.querySelector('.is-active');
function isTabsMobileLayout() {
return tabs.querySelector('.tabs__trigger').clientHeight > 0;
@@ -26,8 +26,8 @@
}
if (isTabsMobileLayout() && !activeTab.matches('.tabs__tab:first-child')) {
- var newActiveTab = activeTab.cloneNode(true);
- var firstTab = tabs.querySelector('.tabs__tab:first-child');
+ const newActiveTab = activeTab.cloneNode(true);
+ const firstTab = tabs.querySelector('.tabs__tab:first-child');
tabs.insertBefore(newActiveTab, firstTab);
tabs.removeChild(activeTab);
}
@@ -36,8 +36,9 @@
}
Drupal.behaviors.primaryTabs = {
- attach: function attach(context) {
+ attach(context) {
once('olivero-tabs', '[data-drupal-nav-primary-tabs]', context).forEach(init);
}
+
};
})(Drupal, once);
\ No newline at end of file
diff --git a/core/themes/seven/js/classy/media_embed_ckeditor.theme.js b/core/themes/seven/js/classy/media_embed_ckeditor.theme.js
index 0b9d95999e8e2bd85013524aa5443c9832cf7c4c..19cc4ff77763ccdea8407959894cab4a7aa27c73 100644
--- a/core/themes/seven/js/classy/media_embed_ckeditor.theme.js
+++ b/core/themes/seven/js/classy/media_embed_ckeditor.theme.js
@@ -5,8 +5,6 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.mediaEmbedPreviewError = function () {
- return "<div class=\"media-embed-error media-embed-error--preview-error\">".concat(Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.'), "</div>");
- };
+(Drupal => {
+ Drupal.theme.mediaEmbedPreviewError = () => `<div class="media-embed-error media-embed-error--preview-error">${Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.')}</div>`;
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/seven/js/mobile.install.js b/core/themes/seven/js/mobile.install.js
index 095fd11775483ca5353500f5aefa00289ef09a2c..5f5a9758dce30ea23621464ee54c81c9a8758bdd 100644
--- a/core/themes/seven/js/mobile.install.js
+++ b/core/themes/seven/js/mobile.install.js
@@ -7,7 +7,7 @@
(function () {
function findActiveStep(steps) {
- for (var i = 0; i < steps.length; i++) {
+ for (let i = 0; i < steps.length; i++) {
if (steps[i].className === 'is-active') {
return i + 1;
}
@@ -21,13 +21,13 @@
}
function installStepsSetup() {
- var steps = document.querySelectorAll('.task-list li');
+ const steps = document.querySelectorAll('.task-list li');
if (steps.length) {
- var header = document.querySelector('header[role="banner"]');
- var stepIndicator = document.createElement('div');
+ const header = document.querySelector('header[role="banner"]');
+ const stepIndicator = document.createElement('div');
stepIndicator.className = 'step-indicator';
- stepIndicator.innerHTML = "".concat(findActiveStep(steps), "/").concat(steps.length);
+ stepIndicator.innerHTML = `${findActiveStep(steps)}/${steps.length}`;
header.appendChild(stepIndicator);
}
}
diff --git a/core/themes/seven/js/nav-tabs.js b/core/themes/seven/js/nav-tabs.js
index 029a4be8198e1557d87607bb503508b68179f920..d5f8cb9ecc1a168a95382ef5a3f4ccc4470101d7 100644
--- a/core/themes/seven/js/nav-tabs.js
+++ b/core/themes/seven/js/nav-tabs.js
@@ -7,9 +7,9 @@
(function ($, Drupal) {
function init(tab) {
- var $tab = $(tab);
- var $target = $tab.find('[data-drupal-nav-tabs-target]');
- var isCollapsible = $tab.hasClass('is-collapsible');
+ const $tab = $(tab);
+ const $target = $tab.find('[data-drupal-nav-tabs-target]');
+ const isCollapsible = $tab.hasClass('is-collapsible');
function openMenu(e) {
$target.toggleClass('is-open');
@@ -17,8 +17,8 @@
function handleResize(e) {
$tab.addClass('is-horizontal');
- var $tabs = $tab.find('.tabs');
- var isHorizontal = $tabs.outerHeight() <= $tabs.find('.tabs__tab').outerHeight();
+ const $tabs = $tab.find('.tabs');
+ const isHorizontal = $tabs.outerHeight() <= $tabs.find('.tabs__tab').outerHeight();
$tab.toggleClass('is-horizontal', isHorizontal);
if (isCollapsible) {
@@ -36,12 +36,13 @@
}
Drupal.behaviors.navTabs = {
- attach: function attach(context, settings) {
- var notSmartPhone = window.matchMedia('(min-width: 300px)');
+ attach(context, settings) {
+ const notSmartPhone = window.matchMedia('(min-width: 300px)');
if (notSmartPhone.matches) {
once('nav-tabs', '[data-drupal-nav-tabs]', context).forEach(init);
}
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/themes/seven/js/responsive-details.js b/core/themes/seven/js/responsive-details.js
index ec59b2afac219c6a9670a4908fac4fc0256a9074..40d427b0a51b371c1ea0a9d3d8209716fbf96e5d 100644
--- a/core/themes/seven/js/responsive-details.js
+++ b/core/themes/seven/js/responsive-details.js
@@ -7,15 +7,15 @@
(function ($, Drupal) {
Drupal.behaviors.responsiveDetails = {
- attach: function attach(context) {
- var details = once('responsive-details', 'details', context);
+ attach(context) {
+ const details = once('responsive-details', 'details', context);
if (!details.length) {
return;
}
- var $details = $(details);
- var $summaries = $details.find('> summary');
+ const $details = $(details);
+ const $summaries = $details.find('> summary');
function detailsToggle(matches) {
if (matches) {
@@ -23,7 +23,7 @@
$summaries.attr('aria-expanded', true);
$summaries.on('click.details-open', false);
} else {
- var $notPressed = $details.find('> summary[aria-pressed!=true]').attr('aria-expanded', false);
+ const $notPressed = $details.find('> summary[aria-pressed!=true]').attr('aria-expanded', false);
$notPressed.parent('details').attr('open', false);
$summaries.off('.details-open');
}
@@ -33,9 +33,10 @@
detailsToggle(event.matches);
}
- var mql = window.matchMedia('(min-width:48em)');
+ const mql = window.matchMedia('(min-width:48em)');
mql.addListener(handleDetailsMQ);
detailsToggle(mql.matches);
}
+
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/themes/stable/css/core/dialog/off-canvas.reset.css b/core/themes/stable/css/core/dialog/off-canvas.reset.css
index 1c67de4c15ecef0aee1300edefe0f94df3ca20f9..099317d4fab41768feac2863e16c7cb642f64d1a 100644
--- a/core/themes/stable/css/core/dialog/off-canvas.reset.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.reset.css
@@ -104,93 +104,6 @@
#drupal-off-canvas input,
#drupal-off-canvas select,
#drupal-off-canvas textarea {
- animation: none 0s ease 0s 1 normal none running;
- -webkit-backface-visibility: visible;
- backface-visibility: visible;
- background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
- border: medium none currentColor;
- border-collapse: separate;
- border-image: none;
- border-radius: 0;
- border-spacing: 0;
- bottom: auto;
- box-shadow: none;
- box-sizing: content-box;
- caption-side: top;
- clear: none;
- clip: auto;
- color: #000;
- columns: auto;
- column-count: auto;
- column-fill: balance;
- grid-column-gap: normal;
- column-rule: medium none currentColor;
- column-span: 1;
- column-width: auto;
- content: normal;
- counter-increment: none;
- counter-reset: none;
- cursor: auto;
- direction: ltr;
- display: inline;
- empty-cells: show;
- float: none;
- font-family: serif;
- font-size: medium;
- font-style: normal;
- font-feature-settings: normal;
- font-variant: normal;
- font-weight: normal;
- font-stretch: normal;
- line-height: normal;
- height: auto;
- -webkit-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
- left: auto;
- letter-spacing: normal;
- list-style: disc outside none;
- margin: 0;
- max-height: none;
- max-width: none;
- min-height: 0;
- min-width: 0;
- opacity: 1;
- orphans: 2;
- outline: medium none invert;
- overflow: visible;
- overflow-x: visible;
- overflow-y: visible;
- padding: 0;
- page-break-after: auto;
- page-break-before: auto;
- page-break-inside: auto;
- perspective: none;
- perspective-origin: 50% 50%;
- position: static;
- right: auto;
- -moz-tab-size: 8;
- tab-size: 8;
- table-layout: auto;
- text-align: left;
- text-align-last: auto;
- text-decoration: none;
- text-indent: 0;
- text-shadow: none;
- text-transform: none;
- top: auto;
- transform: none;
- transform-origin: 50% 50% 0;
- transform-style: flat;
- transition: none 0s ease 0s;
- unicode-bidi: normal;
- vertical-align: baseline;
- visibility: visible;
- white-space: normal;
- widows: 2;
- width: auto;
- word-spacing: normal;
- z-index: auto;
all: initial;
box-sizing: border-box;
text-shadow: none;
@@ -368,93 +281,6 @@
#drupal-off-canvas select:before,
#drupal-off-canvas textarea:after,
#drupal-off-canvas textarea:before {
- animation: none 0s ease 0s 1 normal none running;
- -webkit-backface-visibility: visible;
- backface-visibility: visible;
- background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
- border: medium none currentColor;
- border-collapse: separate;
- border-image: none;
- border-radius: 0;
- border-spacing: 0;
- bottom: auto;
- box-shadow: none;
- box-sizing: content-box;
- caption-side: top;
- clear: none;
- clip: auto;
- color: #000;
- columns: auto;
- column-count: auto;
- column-fill: balance;
- grid-column-gap: normal;
- column-rule: medium none currentColor;
- column-span: 1;
- column-width: auto;
- content: normal;
- counter-increment: none;
- counter-reset: none;
- cursor: auto;
- direction: ltr;
- display: inline;
- empty-cells: show;
- float: none;
- font-family: serif;
- font-size: medium;
- font-style: normal;
- font-feature-settings: normal;
- font-variant: normal;
- font-weight: normal;
- font-stretch: normal;
- line-height: normal;
- height: auto;
- -webkit-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
- left: auto;
- letter-spacing: normal;
- list-style: disc outside none;
- margin: 0;
- max-height: none;
- max-width: none;
- min-height: 0;
- min-width: 0;
- opacity: 1;
- orphans: 2;
- outline: medium none invert;
- overflow: visible;
- overflow-x: visible;
- overflow-y: visible;
- padding: 0;
- page-break-after: auto;
- page-break-before: auto;
- page-break-inside: auto;
- perspective: none;
- perspective-origin: 50% 50%;
- position: static;
- right: auto;
- -moz-tab-size: 8;
- tab-size: 8;
- table-layout: auto;
- text-align: left;
- text-align-last: auto;
- text-decoration: none;
- text-indent: 0;
- text-shadow: none;
- text-transform: none;
- top: auto;
- transform: none;
- transform-origin: 50% 50% 0;
- transform-style: flat;
- transition: none 0s ease 0s;
- unicode-bidi: normal;
- vertical-align: baseline;
- visibility: visible;
- white-space: normal;
- widows: 2;
- width: auto;
- word-spacing: normal;
- z-index: auto;
all: initial;
box-sizing: border-box;
text-shadow: none;
@@ -794,7 +620,6 @@
#drupal-off-canvas textarea[disabled] {
cursor: default;
-webkit-user-select: none;
- -ms-user-select: none;
user-select: none;
box-shadow: none;
}
diff --git a/core/themes/stable/js/ajax.js b/core/themes/stable/js/ajax.js
index 2892ed913d6eda85defd3f8f0d339a10fb414885..2f9546f12a7d508d9336a0acddcec48a882d9f49 100644
--- a/core/themes/stable/js/ajax.js
+++ b/core/themes/stable/js/ajax.js
@@ -5,8 +5,6 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.ajaxProgressBar = function ($element) {
- return $element.addClass('ajax-progress ajax-progress-bar');
- };
+(Drupal => {
+ Drupal.theme.ajaxProgressBar = $element => $element.addClass('ajax-progress ajax-progress-bar');
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/stable/js/tour.js b/core/themes/stable/js/tour.js
index 20eda20a167f5c3928b2e88b2b945d47ee4e1e25..fb554afbae3a6953607d152dad3a42a27d8018de 100644
--- a/core/themes/stable/js/tour.js
+++ b/core/themes/stable/js/tour.js
@@ -5,40 +5,26 @@
* @preserve
**/
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-(function (Drupal) {
- Drupal.tour.convertToJoyrideMarkup = function (shepherdTour) {
- var changeTag = function changeTag(element, tag) {
+(Drupal => {
+ Drupal.tour.convertToJoyrideMarkup = shepherdTour => {
+ const changeTag = (element, tag) => {
if (element) {
- var newTagElement = document.createElement(tag);
-
- _toConsumableArray(element.attributes).forEach(function (attr) {
+ const newTagElement = document.createElement(tag);
+ [...element.attributes].forEach(attr => {
newTagElement.setAttribute(attr.name, attr.value);
});
-
newTagElement.innerHTML = element.innerHTML;
element.parentNode.replaceChild(newTagElement, element);
}
};
- var shepherdElement = shepherdTour.currentStep.el;
- var shepherdContent = shepherdElement.querySelector('.shepherd-content');
- var shepherdCancel = shepherdElement.querySelector('.shepherd-cancel-icon');
- var shepherdTitle = shepherdElement.querySelector('.shepherd-title');
- var shepherdText = shepherdElement.querySelector('.shepherd-text');
- var shepherdNext = shepherdElement.querySelector('footer .button');
- var tourProgress = shepherdElement.querySelector('.tour-progress');
+ const shepherdElement = shepherdTour.currentStep.el;
+ const shepherdContent = shepherdElement.querySelector('.shepherd-content');
+ const shepherdCancel = shepherdElement.querySelector('.shepherd-cancel-icon');
+ const shepherdTitle = shepherdElement.querySelector('.shepherd-title');
+ const shepherdText = shepherdElement.querySelector('.shepherd-text');
+ const shepherdNext = shepherdElement.querySelector('footer .button');
+ const tourProgress = shepherdElement.querySelector('.tour-progress');
shepherdElement.classList.add('joyride-tip-guide');
shepherdContent.classList.add('joyride-content-wrapper');
shepherdNext.classList.add('joyride-next-tip');
@@ -56,7 +42,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
shepherdText.appendChild(shepherdNext);
shepherdText.appendChild(shepherdCancel);
shepherdContent.querySelector('.shepherd-header').remove();
- Array.from(shepherdText.children).forEach(function (node) {
+ Array.from(shepherdText.children).forEach(node => {
if (node.tagName === 'P' && node.textContent === '' && node.classList.length === 0) {
node.remove();
}
@@ -76,13 +62,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
changeTag(shepherdElement.querySelector('.joyride-close-tip'), 'a');
changeTag(shepherdElement.querySelector('.joyride-next-tip'), 'a');
- var shepherdArrow = shepherdElement.querySelector('.shepherd-arrow');
+ const shepherdArrow = shepherdElement.querySelector('.shepherd-arrow');
if (shepherdArrow) {
shepherdArrow.classList.add('joyride-nub');
if (shepherdTour.currentStep.options.attachTo.on) {
- var stepToTipPosition = {
+ const stepToTipPosition = {
bottom: 'top',
top: 'bottom',
left: 'right',
@@ -93,17 +79,17 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
changeTag(shepherdArrow, 'span');
} else {
- var nub = document.createElement('span');
+ const nub = document.createElement('span');
nub.classList.add('joyride-nub');
nub.setAttribute('style', 'display: none;');
shepherdElement.insertBefore(nub, shepherdElement.firstChild);
}
- shepherdElement.querySelector('.joyride-next-tip').addEventListener('click', function (e) {
+ shepherdElement.querySelector('.joyride-next-tip').addEventListener('click', e => {
e.preventDefault();
shepherdTour.next();
});
- shepherdElement.querySelector('.joyride-close-tip').addEventListener('click', function (e) {
+ shepherdElement.querySelector('.joyride-close-tip').addEventListener('click', e => {
e.preventDefault();
shepherdTour.cancel();
});
diff --git a/core/themes/stable/js/user.theme.js b/core/themes/stable/js/user.theme.js
index 2c76f6f1d238d155238995c87372d9d2af7a1d8b..38e0ef4f5bf9eed8314402ba6386ebf201730f70 100644
--- a/core/themes/stable/js/user.theme.js
+++ b/core/themes/stable/js/user.theme.js
@@ -5,15 +5,19 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.passwordConfirmMessage = function (translate) {
- return "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"password-confirm js-password-confirm js-password-confirm-message\" data-drupal-selector=\"password-confirm-message\">".concat(translate.confirmTitle, " <span data-drupal-selector=\"password-match-status-text\"></span></div>");
- };
+(Drupal => {
+ Drupal.theme.passwordConfirmMessage = translate => `<div aria-live="polite" aria-atomic="true" class="password-confirm js-password-confirm js-password-confirm-message" data-drupal-selector="password-confirm-message">${translate.confirmTitle} <span data-drupal-selector="password-match-status-text"></span></div>`;
- Drupal.theme.passwordStrength = function (_ref) {
- var strengthTitle = _ref.strengthTitle;
- var strengthIndicator = '<div class="password-strength__indicator js-password-strength__indicator" data-drupal-selector="password-strength-indicator"></div>';
- var strengthText = '<span class="password-strength__text js-password-strength__text" data-drupal-selector="password-strength-text"></span>';
- return "\n <div class=\"password-strength\">\n <div class=\"password-strength__meter\" data-drupal-selector=\"password-strength-meter\">".concat(strengthIndicator, "</div>\n <div aria-live=\"polite\" aria-atomic=\"true\" class=\"password-strength__title\">").concat(strengthTitle, " ").concat(strengthText, "</div>\n </div>\n ");
+ Drupal.theme.passwordStrength = ({
+ strengthTitle
+ }) => {
+ const strengthIndicator = '<div class="password-strength__indicator js-password-strength__indicator" data-drupal-selector="password-strength-indicator"></div>';
+ const strengthText = '<span class="password-strength__text js-password-strength__text" data-drupal-selector="password-strength-text"></span>';
+ return `
+ <div class="password-strength">
+ <div class="password-strength__meter" data-drupal-selector="password-strength-meter">${strengthIndicator}</div>
+ <div aria-live="polite" aria-atomic="true" class="password-strength__title">${strengthTitle} ${strengthText}</div>
+ </div>
+ `;
};
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.reset.css b/core/themes/stable9/css/core/dialog/off-canvas.reset.css
index 1c67de4c15ecef0aee1300edefe0f94df3ca20f9..099317d4fab41768feac2863e16c7cb642f64d1a 100644
--- a/core/themes/stable9/css/core/dialog/off-canvas.reset.css
+++ b/core/themes/stable9/css/core/dialog/off-canvas.reset.css
@@ -104,93 +104,6 @@
#drupal-off-canvas input,
#drupal-off-canvas select,
#drupal-off-canvas textarea {
- animation: none 0s ease 0s 1 normal none running;
- -webkit-backface-visibility: visible;
- backface-visibility: visible;
- background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
- border: medium none currentColor;
- border-collapse: separate;
- border-image: none;
- border-radius: 0;
- border-spacing: 0;
- bottom: auto;
- box-shadow: none;
- box-sizing: content-box;
- caption-side: top;
- clear: none;
- clip: auto;
- color: #000;
- columns: auto;
- column-count: auto;
- column-fill: balance;
- grid-column-gap: normal;
- column-rule: medium none currentColor;
- column-span: 1;
- column-width: auto;
- content: normal;
- counter-increment: none;
- counter-reset: none;
- cursor: auto;
- direction: ltr;
- display: inline;
- empty-cells: show;
- float: none;
- font-family: serif;
- font-size: medium;
- font-style: normal;
- font-feature-settings: normal;
- font-variant: normal;
- font-weight: normal;
- font-stretch: normal;
- line-height: normal;
- height: auto;
- -webkit-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
- left: auto;
- letter-spacing: normal;
- list-style: disc outside none;
- margin: 0;
- max-height: none;
- max-width: none;
- min-height: 0;
- min-width: 0;
- opacity: 1;
- orphans: 2;
- outline: medium none invert;
- overflow: visible;
- overflow-x: visible;
- overflow-y: visible;
- padding: 0;
- page-break-after: auto;
- page-break-before: auto;
- page-break-inside: auto;
- perspective: none;
- perspective-origin: 50% 50%;
- position: static;
- right: auto;
- -moz-tab-size: 8;
- tab-size: 8;
- table-layout: auto;
- text-align: left;
- text-align-last: auto;
- text-decoration: none;
- text-indent: 0;
- text-shadow: none;
- text-transform: none;
- top: auto;
- transform: none;
- transform-origin: 50% 50% 0;
- transform-style: flat;
- transition: none 0s ease 0s;
- unicode-bidi: normal;
- vertical-align: baseline;
- visibility: visible;
- white-space: normal;
- widows: 2;
- width: auto;
- word-spacing: normal;
- z-index: auto;
all: initial;
box-sizing: border-box;
text-shadow: none;
@@ -368,93 +281,6 @@
#drupal-off-canvas select:before,
#drupal-off-canvas textarea:after,
#drupal-off-canvas textarea:before {
- animation: none 0s ease 0s 1 normal none running;
- -webkit-backface-visibility: visible;
- backface-visibility: visible;
- background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
- border: medium none currentColor;
- border-collapse: separate;
- border-image: none;
- border-radius: 0;
- border-spacing: 0;
- bottom: auto;
- box-shadow: none;
- box-sizing: content-box;
- caption-side: top;
- clear: none;
- clip: auto;
- color: #000;
- columns: auto;
- column-count: auto;
- column-fill: balance;
- grid-column-gap: normal;
- column-rule: medium none currentColor;
- column-span: 1;
- column-width: auto;
- content: normal;
- counter-increment: none;
- counter-reset: none;
- cursor: auto;
- direction: ltr;
- display: inline;
- empty-cells: show;
- float: none;
- font-family: serif;
- font-size: medium;
- font-style: normal;
- font-feature-settings: normal;
- font-variant: normal;
- font-weight: normal;
- font-stretch: normal;
- line-height: normal;
- height: auto;
- -webkit-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
- left: auto;
- letter-spacing: normal;
- list-style: disc outside none;
- margin: 0;
- max-height: none;
- max-width: none;
- min-height: 0;
- min-width: 0;
- opacity: 1;
- orphans: 2;
- outline: medium none invert;
- overflow: visible;
- overflow-x: visible;
- overflow-y: visible;
- padding: 0;
- page-break-after: auto;
- page-break-before: auto;
- page-break-inside: auto;
- perspective: none;
- perspective-origin: 50% 50%;
- position: static;
- right: auto;
- -moz-tab-size: 8;
- tab-size: 8;
- table-layout: auto;
- text-align: left;
- text-align-last: auto;
- text-decoration: none;
- text-indent: 0;
- text-shadow: none;
- text-transform: none;
- top: auto;
- transform: none;
- transform-origin: 50% 50% 0;
- transform-style: flat;
- transition: none 0s ease 0s;
- unicode-bidi: normal;
- vertical-align: baseline;
- visibility: visible;
- white-space: normal;
- widows: 2;
- width: auto;
- word-spacing: normal;
- z-index: auto;
all: initial;
box-sizing: border-box;
text-shadow: none;
@@ -794,7 +620,6 @@
#drupal-off-canvas textarea[disabled] {
cursor: default;
-webkit-user-select: none;
- -ms-user-select: none;
user-select: none;
box-shadow: none;
}
diff --git a/core/themes/stable9/js/tour.js b/core/themes/stable9/js/tour.js
index 20eda20a167f5c3928b2e88b2b945d47ee4e1e25..fb554afbae3a6953607d152dad3a42a27d8018de 100644
--- a/core/themes/stable9/js/tour.js
+++ b/core/themes/stable9/js/tour.js
@@ -5,40 +5,26 @@
* @preserve
**/
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-(function (Drupal) {
- Drupal.tour.convertToJoyrideMarkup = function (shepherdTour) {
- var changeTag = function changeTag(element, tag) {
+(Drupal => {
+ Drupal.tour.convertToJoyrideMarkup = shepherdTour => {
+ const changeTag = (element, tag) => {
if (element) {
- var newTagElement = document.createElement(tag);
-
- _toConsumableArray(element.attributes).forEach(function (attr) {
+ const newTagElement = document.createElement(tag);
+ [...element.attributes].forEach(attr => {
newTagElement.setAttribute(attr.name, attr.value);
});
-
newTagElement.innerHTML = element.innerHTML;
element.parentNode.replaceChild(newTagElement, element);
}
};
- var shepherdElement = shepherdTour.currentStep.el;
- var shepherdContent = shepherdElement.querySelector('.shepherd-content');
- var shepherdCancel = shepherdElement.querySelector('.shepherd-cancel-icon');
- var shepherdTitle = shepherdElement.querySelector('.shepherd-title');
- var shepherdText = shepherdElement.querySelector('.shepherd-text');
- var shepherdNext = shepherdElement.querySelector('footer .button');
- var tourProgress = shepherdElement.querySelector('.tour-progress');
+ const shepherdElement = shepherdTour.currentStep.el;
+ const shepherdContent = shepherdElement.querySelector('.shepherd-content');
+ const shepherdCancel = shepherdElement.querySelector('.shepherd-cancel-icon');
+ const shepherdTitle = shepherdElement.querySelector('.shepherd-title');
+ const shepherdText = shepherdElement.querySelector('.shepherd-text');
+ const shepherdNext = shepherdElement.querySelector('footer .button');
+ const tourProgress = shepherdElement.querySelector('.tour-progress');
shepherdElement.classList.add('joyride-tip-guide');
shepherdContent.classList.add('joyride-content-wrapper');
shepherdNext.classList.add('joyride-next-tip');
@@ -56,7 +42,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
shepherdText.appendChild(shepherdNext);
shepherdText.appendChild(shepherdCancel);
shepherdContent.querySelector('.shepherd-header').remove();
- Array.from(shepherdText.children).forEach(function (node) {
+ Array.from(shepherdText.children).forEach(node => {
if (node.tagName === 'P' && node.textContent === '' && node.classList.length === 0) {
node.remove();
}
@@ -76,13 +62,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
changeTag(shepherdElement.querySelector('.joyride-close-tip'), 'a');
changeTag(shepherdElement.querySelector('.joyride-next-tip'), 'a');
- var shepherdArrow = shepherdElement.querySelector('.shepherd-arrow');
+ const shepherdArrow = shepherdElement.querySelector('.shepherd-arrow');
if (shepherdArrow) {
shepherdArrow.classList.add('joyride-nub');
if (shepherdTour.currentStep.options.attachTo.on) {
- var stepToTipPosition = {
+ const stepToTipPosition = {
bottom: 'top',
top: 'bottom',
left: 'right',
@@ -93,17 +79,17 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
changeTag(shepherdArrow, 'span');
} else {
- var nub = document.createElement('span');
+ const nub = document.createElement('span');
nub.classList.add('joyride-nub');
nub.setAttribute('style', 'display: none;');
shepherdElement.insertBefore(nub, shepherdElement.firstChild);
}
- shepherdElement.querySelector('.joyride-next-tip').addEventListener('click', function (e) {
+ shepherdElement.querySelector('.joyride-next-tip').addEventListener('click', e => {
e.preventDefault();
shepherdTour.next();
});
- shepherdElement.querySelector('.joyride-close-tip').addEventListener('click', function (e) {
+ shepherdElement.querySelector('.joyride-close-tip').addEventListener('click', e => {
e.preventDefault();
shepherdTour.cancel();
});
diff --git a/core/themes/stable9/js/user.theme.js b/core/themes/stable9/js/user.theme.js
index 4324b8cc3c667217abe5af5180f3bf88c98ca57a..2e1a537305238b7010e557f83893705d84353048 100644
--- a/core/themes/stable9/js/user.theme.js
+++ b/core/themes/stable9/js/user.theme.js
@@ -5,17 +5,24 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.passwordConfirmMessage = function (_ref) {
- var confirmTitle = _ref.confirmTitle;
- var confirmTextWrapper = '<span data-drupal-selector="password-match-status-text"></span>';
- return "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"password-confirm-message js-password-confirm-message\" data-drupal-selector=\"password-confirm-message\">".concat(confirmTitle, " ").concat(confirmTextWrapper, "</div>");
+(Drupal => {
+ Drupal.theme.passwordConfirmMessage = ({
+ confirmTitle
+ }) => {
+ const confirmTextWrapper = '<span data-drupal-selector="password-match-status-text"></span>';
+ return `<div aria-live="polite" aria-atomic="true" class="password-confirm-message js-password-confirm-message" data-drupal-selector="password-confirm-message">${confirmTitle} ${confirmTextWrapper}</div>`;
};
- Drupal.theme.passwordStrength = function (_ref2) {
- var strengthTitle = _ref2.strengthTitle;
- var strengthIndicator = '<div class="password-strength__indicator js-password-strength__indicator" data-drupal-selector="password-strength-indicator"></div>';
- var strengthText = '<span class="password-strength__text js-password-strength__text" data-drupal-selector="password-strength-text"></span>';
- return "\n <div class=\"password-strength\">\n <div class=\"password-strength__meter\" data-drupal-selector=\"password-strength-meter\">".concat(strengthIndicator, "</div>\n <div aria-live=\"polite\" aria-atomic=\"true\" class=\"password-strength__title\">").concat(strengthTitle, " ").concat(strengthText, "</div>\n </div>\n ");
+ Drupal.theme.passwordStrength = ({
+ strengthTitle
+ }) => {
+ const strengthIndicator = '<div class="password-strength__indicator js-password-strength__indicator" data-drupal-selector="password-strength-indicator"></div>';
+ const strengthText = '<span class="password-strength__text js-password-strength__text" data-drupal-selector="password-strength-text"></span>';
+ return `
+ <div class="password-strength">
+ <div class="password-strength__meter" data-drupal-selector="password-strength-meter">${strengthIndicator}</div>
+ <div aria-live="polite" aria-atomic="true" class="password-strength__title">${strengthTitle} ${strengthText}</div>
+ </div>
+ `;
};
})(Drupal);
\ No newline at end of file
diff --git a/core/themes/starterkit_theme/js/media_embed_ckeditor.theme.js b/core/themes/starterkit_theme/js/media_embed_ckeditor.theme.js
index 0b9d95999e8e2bd85013524aa5443c9832cf7c4c..19cc4ff77763ccdea8407959894cab4a7aa27c73 100644
--- a/core/themes/starterkit_theme/js/media_embed_ckeditor.theme.js
+++ b/core/themes/starterkit_theme/js/media_embed_ckeditor.theme.js
@@ -5,8 +5,6 @@
* @preserve
**/
-(function (Drupal) {
- Drupal.theme.mediaEmbedPreviewError = function () {
- return "<div class=\"media-embed-error media-embed-error--preview-error\">".concat(Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.'), "</div>");
- };
+(Drupal => {
+ Drupal.theme.mediaEmbedPreviewError = () => `<div class="media-embed-error media-embed-error--preview-error">${Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.')}</div>`;
})(Drupal);
\ No newline at end of file