finallycoffee/nextcloud-pride-flags
5
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases 10 Wiki Activity

refactor(javascript): wrap in IIFE, rebuild to respect none-variant

Browse Source
This commit is contained in:
transcaffeine
2025-03-30 13:23:52 +02:00
parent 744077f0fd
commit 9f6ef213a3
1 changed files with 96 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
js/pride.js
View File

@@ -1,4 +1,5 @@
const flags = [
(function(window) {
const flags = [
{
id: 'pride',
colors: ['#E04641', '#DE7E41', '#E4D56F', '#55B85F', '#2473B5', '#6F5DA5'],
@@ -17,7 +18,7 @@ const flags = [
transform: 'rotate(90)'
}, {
id: 'bi',
// colors: ['#C42A6F', '#915392', '#1437A1'],
// colors: ['#C42A6F', '#915392', '#1437A1'],
colors: ['#D60270', '#9B4F96', '#0038A8'],
transform: 'rotate(90)'
}, {
@@ -29,23 +30,23 @@ const flags = [
colors: ['#D52D00', '#EF7627', '#FF9A56', '#FFFFFF', '#D162A4', '#B55690', '#A30262'],
transform: 'rotate(90)'
}
];
];
const generateGradient = colors => {
const generateGradient = colors => {
const steps = colors.length;
return colors.map((color, index) => { return [
[color, (index / steps)],
[color, (index + 1) / steps]
]}).flat();
};
};
const generateStops = (colors, opacity) => {
const generateStops = (colors, opacity) => {
return generateGradient(colors).map(([color, offset]) => {
return `<stop stop-color="${color}" stop-opacity="${opacity}" offset="${offset * 100}%"></stop>`;
});
};
};
const makeLinearGradientSvg = (id, colors, opacity, transform) => {
const makeLinearGradientSvg = (id, colors, opacity, transform) => {
return `<svg xmlns="http://www.w3.org/2000/svg" id="svg-${id}" preserveAspectRatio="none" width="100%" height="100%">
<defs>
<linearGradient id="gradient-${id}" gradientTransform="${transform}">
@@ -57,9 +58,14 @@ const makeLinearGradientSvg = (id, colors, opacity, transform) => {
</style>
<rect fill="url(#gradient-${id})" width="100%" height="100%" />
</svg>`;
};
};
flags.forEach(flag => {
const generateCssBackgroundRules = (type, variant) => `
--image-background-pride-${type}: var(--image-background-pride-${variant});
--image-background-pride-${type}-gradient: var(--image-background-pride-gradient-${variant});
`;
flags.forEach(flag => {
const svg_html = makeLinearGradientSvg(flag.id, flag.colors, flag.opacity ?? '0.8', flag.transform ?? 'rotate(0)');
const container = document.createElement('div');
container.classList.add('hidden-visually');
@@ -74,9 +80,9 @@ flags.forEach(flag => {
`;
document.body.prepend(container);
document.head.prepend(style_c);
});
});
fetch(OC.generateUrl('/apps/pride_flags/settings'))
fetch(OC.generateUrl('/apps/pride_flags/settings'))
.then(response => response.json())
.then(({folderVariant, buttonVariant}) => {
if (document.querySelector('head > style#pride_flag_settings') == null) {
@@ -85,12 +91,10 @@ fetch(OC.generateUrl('/apps/pride_flags/settings'))
document.head.prepend(node);
}
const style_settings = document.querySelector('head > style#pride_flag_settings');
style_settings.textContent = `
body {
--image-background-pride-button: var(--image-background-pride-${buttonVariant});
--image-background-pride-folder: var(--image-background-pride-${folderVariant});
--image-background-pride-button-gradient: var(--image-background-pride-gradient-${buttonVariant});
--image-background-pride-folder-gradient: var(--image-background-pride-gradient-${folderVariant});
}
`;
const rules = `body {
${(folderVariant !== 'none') ? generateCssBackgroundRules('folder', folderVariant) : ''}
${(buttonVariant !== 'none') ? generateCssBackgroundRules('button', buttonVariant) : ''}
}`;
style_settings.textContent = rules;
});
})(window);