forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
84 lines
6.2 KiB
JavaScript
84 lines
6.2 KiB
JavaScript
((Drupal, drupalSettings, once) => {
|
|
Drupal.behaviors.ginAccent = {
|
|
attach: function(context) {
|
|
once("ginAccent", "body", context).forEach((() => {
|
|
Drupal.ginAccent.checkDarkmode(), Drupal.ginAccent.setAccentColor(), Drupal.ginAccent.setFocusColor();
|
|
}));
|
|
}
|
|
}, Drupal.ginAccent = {
|
|
setAccentColor: function() {
|
|
let preset = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null, color = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
|
|
const accentColorPreset = null != preset ? preset : drupalSettings.gin.preset_accent_color;
|
|
document.body.setAttribute("data-gin-accent", accentColorPreset), "custom" === accentColorPreset && this.setCustomAccentColor(color);
|
|
},
|
|
setCustomAccentColor: function() {
|
|
let color = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null, element = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : document.body;
|
|
const accentColor = null != color ? color : drupalSettings.gin.accent_color;
|
|
if (accentColor) {
|
|
this.clearAccentColor(element);
|
|
const strippedAccentColor = accentColor.replace("#", ""), darkAccentColor = this.mixColor("ffffff", strippedAccentColor, 65).replace("#", ""), style = document.createElement("style");
|
|
style.className = "gin-custom-colors", style.innerHTML = `\n [data-gin-accent="custom"] {\n --gin-color-primary-rgb: ${this.hexToRgb(accentColor)};\n --gin-color-primary-hover: ${this.shadeColor(accentColor, -10)};\n --gin-color-primary-active: ${this.shadeColor(accentColor, -15)};\n --gin-bg-app-rgb: ${this.hexToRgb(this.mixColor("ffffff", strippedAccentColor, 97))};\n --gin-bg-header: ${this.mixColor("ffffff", strippedAccentColor, 85)};\n --gin-color-sticky-rgb: ${this.hexToRgb(this.mixColor("ffffff", strippedAccentColor, 92))};\n }\n .gin--dark-mode[data-gin-accent="custom"],\n .gin--dark-mode [data-gin-accent="custom"] {\n --gin-color-primary-rgb: ${this.hexToRgb(darkAccentColor)};\n --gin-color-primary-hover: ${this.mixColor("ffffff", strippedAccentColor, 55)};\n --gin-color-primary-active: ${this.mixColor("ffffff", strippedAccentColor, 50)};\n --gin-bg-header: ${this.mixColor("2A2A2D", darkAccentColor, 88)};\n }\n `,
|
|
element.append(style);
|
|
}
|
|
},
|
|
clearAccentColor: function() {
|
|
let element = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : document.body;
|
|
if (element.querySelectorAll(".gin-custom-colors").length > 0) {
|
|
const removeElement = element.querySelector(".gin-custom-colors");
|
|
removeElement.parentNode.removeChild(removeElement);
|
|
}
|
|
},
|
|
setFocusColor: function() {
|
|
let preset = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null, color = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
|
|
const focusColorPreset = null != preset ? preset : drupalSettings.gin.preset_focus_color;
|
|
document.body.setAttribute("data-gin-focus", focusColorPreset), "custom" === focusColorPreset && this.setCustomFocusColor(color);
|
|
},
|
|
setCustomFocusColor: function() {
|
|
let color = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null, element = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : document.body;
|
|
const accentColor = null != color ? color : drupalSettings.gin.focus_color;
|
|
if (accentColor) {
|
|
this.clearFocusColor(element);
|
|
const strippedAccentColor = accentColor.replace("#", ""), darkAccentColor = this.mixColor("ffffff", strippedAccentColor, 65), style = document.createElement("style");
|
|
style.className = "gin-custom-focus", style.innerHTML = `\n [data-gin-focus="custom"] {\n --gin-color-focus: ${accentColor};\n }\n .gin--dark-mode[data-gin-focus="custom"],\n .gin--dark-mode [data-gin-focus="custom"] {\n --gin-color-focus: ${darkAccentColor};\n }`,
|
|
element.append(style);
|
|
}
|
|
},
|
|
clearFocusColor: function() {
|
|
let element = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : document.body;
|
|
if (element.querySelectorAll(".gin-custom-focus").length > 0) {
|
|
const removeElement = element.querySelector(".gin-custom-focus");
|
|
removeElement.parentNode.removeChild(removeElement);
|
|
}
|
|
},
|
|
checkDarkmode: () => {
|
|
const darkmodeClass = drupalSettings.gin.darkmode_class;
|
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e => {
|
|
e.matches && "auto" === localStorage.getItem("Drupal.gin.darkmode") && document.querySelector("html").classList.add(darkmodeClass);
|
|
})), window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", (e => {
|
|
e.matches && "auto" === localStorage.getItem("Drupal.gin.darkmode") && document.querySelector("html").classList.remove(darkmodeClass);
|
|
}));
|
|
},
|
|
hexToRgb: hex => {
|
|
hex = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (function(m, r, g, b) {
|
|
return r + r + g + g + b + b;
|
|
}));
|
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : null;
|
|
},
|
|
mixColor: (color_1, color_2, weight) => {
|
|
function h2d(h) {
|
|
return parseInt(h, 16);
|
|
}
|
|
weight = void 0 !== weight ? weight : 50;
|
|
for (var color = "#", i = 0; i <= 5; i += 2) {
|
|
for (var v1 = h2d(color_1.substr(i, 2)), v2 = h2d(color_2.substr(i, 2)), val = Math.floor(v2 + weight / 100 * (v1 - v2)).toString(16); val.length < 2; ) val = "0" + val;
|
|
color += val;
|
|
}
|
|
return color;
|
|
},
|
|
shadeColor: (color, percent) => {
|
|
const num = parseInt(color.replace("#", ""), 16), amt = Math.round(2.55 * percent), R = (num >> 16) + amt, B = (num >> 8 & 255) + amt, G = (255 & num) + amt;
|
|
return `#${(16777216 + 65536 * (R < 255 ? R < 1 ? 0 : R : 255) + 256 * (B < 255 ? B < 1 ? 0 : B : 255) + (G < 255 ? G < 1 ? 0 : G : 255)).toString(16).slice(1)}`;
|
|
}
|
|
};
|
|
})(Drupal, drupalSettings, once); |