diff --git a/bin/nextcloud-app-release.sh b/bin/nextcloud-app-release.sh index c890d77..c90b2b9 100755 --- a/bin/nextcloud-app-release.sh +++ b/bin/nextcloud-app-release.sh @@ -21,7 +21,10 @@ traperr() { } trap traperr ERR -mv .git ../nextcloud-pride-flags-git +mkdir ../nextcloud-pride-flags-tmp +mv .git ../nextcloud-pride-flags-tmp/.git +mv bin ../nextcloud-pride-flags-tmp/bin +mv vendor-bin ../nextcloud-pride-flags-tmp/vendor-bin sudo docker run --hostname nc31.local \ -e NEXTCLOUD_ADMIN_USER=admin \ @@ -41,12 +44,14 @@ sudo docker exec -it ${CONTAINER_NAME} php occ integrity:sign-app \ sudo docker stop "${CONTAINER_NAME}" sudo docker rm "${CONTAINER_NAME}" -mv ../nextcloud-pride-flags-git .git +mv ../nextcloud-pride-flags-tmp/.git .git +mv ../nextcloud-pride-flags-tmp/bin bin +mv ../nextcloud-pride-flags-tmp/vendor-bin vendor-bin echo "App $APP_NAME signed @ ${VERSION}. Commit the appinfo/signatures.json now and press enter." read -p "Press Enter to continue" < /dev/tty -tar --exclude-vcs -czvf "${TARBALL}" "$REPO" +tar --exclude-vcs --exclude='./bin' --exclude='./vendor-bin' -czvf "${TARBALL}" "$REPO" # verify content echo "Tarball '${TARBALL}' content:" diff --git a/js/pride-settings-global.js b/js/pride-settings-global.js index c62b11b..4f47ba1 100644 --- a/js/pride-settings-global.js +++ b/js/pride-settings-global.js @@ -3,18 +3,25 @@ const button_selector = document.querySelectorAll('.pride_flags_server_settings .server-settings.button-flavour select')[0]; const submit_button = document.querySelectorAll('.pride_flags_server_settings .settings-pride-submit'); const container = document.querySelector('.pride_flags_server_settings .settings-section'); + const inputs = [ + folder_selector, + button_selector, + ]; function load() { + window.pride_flags.util.settings.blockInputs(inputs); fetch(OC.generateUrl('/apps/pride_flags/settings/global')) .then(res => res.json()) .then(({folderVariant, buttonVariant}) => { folder_selector.value = folderVariant; button_selector.value = buttonVariant; + window.pride_flags.util.settings.unblockInputs(inputs); container.classList.remove('hidden'); }); } function save() { + window.pride_flags.util.settings.blockInputs(inputs); const payload = { folderVariant: folder_selector.value, buttonVariant: button_selector.value, @@ -30,7 +37,10 @@ if (response.ok) { window.location.reload(); } - }) + }).catch(err => { + console.err(err); + window.pride_flags.util.settings.unblockInputs(inputs); + }); } submit_button.forEach(node => node.addEventListener('click', e => save())); diff --git a/js/pride-settings.js b/js/pride-settings.js index adcba88..13b707a 100644 --- a/js/pride-settings.js +++ b/js/pride-settings.js @@ -3,18 +3,25 @@ const button_selector = document.querySelectorAll('.pride_flags_user_settings .user-settings.button-flavour select')[0]; const submit_button = document.querySelectorAll('.pride_flags_user_settings .settings-pride-submit'); const container = document.querySelector('.pride_flags_user_settings .settings-section'); + const inputs = [ + folder_selector, + button_selector, + ]; function load() { + window.pride_flags.util.settings.blockInputs(inputs); fetch(OC.generateUrl('/apps/pride_flags/settings')) .then(res => res.json()) .then(({folderVariant, buttonVariant}) => { folder_selector.value = folderVariant; button_selector.value = buttonVariant; + window.pride_flags.util.settings.unblockInputs(inputs); container.classList.remove('hidden'); }); } function save() { + window.pride_flags.util.settings.blockInputs(inputs); const payload = { folderVariant: folder_selector.value, buttonVariant: button_selector.value, @@ -30,7 +37,10 @@ if (response.ok) { window.location.reload(); } - }) + }).catch(err => { + window.pride_flags.util.settings.unblockInputs(inputs); + console.err(err); + }); } submit_button.forEach(node => node.addEventListener('click', e => save())); diff --git a/js/pride.js b/js/pride.js index f9aaa2d..bcc390a 100644 --- a/js/pride.js +++ b/js/pride.js @@ -1,96 +1,112 @@ -const flags = [ - { - id: 'pride', - colors: ['#E04641', '#DE7E41', '#E4D56F', '#55B85F', '#2473B5', '#6F5DA5'], - transform: 'rotate(90)' - }, { - id: 'trans', - colors: ['#55CDFC', '#F7A8B8', '#FFFFFF', '#F7A8B8', '#55CDFC'], - transform: 'rotate(90)' - }, { - id: 'pan', - colors: ['#FE218C', '#FFD800', '#21B1FF'], - transform: 'rotate(90)' - }, { - id: 'nonbinary', - colors: ['#FCF434', '#FFFFFF', '#9C59D1', '#2C2C2C'], - transform: 'rotate(90)' - }, { - id: 'bi', -// colors: ['#C42A6F', '#915392', '#1437A1'], - colors: ['#D60270', '#9B4F96', '#0038A8'], - transform: 'rotate(90)' - }, { - id: 'asexual', - colors: ['#000000', '#9F9F9F', '#FFFFFF', '#5E1984'], - transform: 'rotate(90)' - }, { - id: 'lesbian', - colors: ['#D52D00', '#EF7627', '#FF9A56', '#FFFFFF', '#D162A4', '#B55690', '#A30262'], - transform: 'rotate(90)' - } -]; - -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) => { - return generateGradient(colors).map(([color, offset]) => { - return ``; - }); -}; - -const makeLinearGradientSvg = (id, colors, opacity, transform) => { - return ` - - - ${generateStops(colors, opacity).join('\n')} - - - - - `; -}; - -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'); - container.ariaHidden = true; - container.innerHTML = svg_html; - const style_c = document.createElement('style'); - style_c.textContent = ` - body { - --image-background-pride-${flag.id}: url('data:image/svg+xml;base64,${btoa(svg_html)}'); - --image-background-pride-gradient-${flag.id}: url("#gradient-${flag.id}"); - } - `; - document.body.prepend(container); - document.head.prepend(style_c); -}); - -fetch(OC.generateUrl('/apps/pride_flags/settings')) - .then(response => response.json()) - .then(({folderVariant, buttonVariant}) => { - if (document.querySelector('head > style#pride_flag_settings') == null) { - const node = document.createElement('style'); - node.id = 'pride_flag_settings'; - document.head.prepend(node); +(function(window) { + const flags = [ + { + id: 'pride', + colors: ['#E04641', '#DE7E41', '#E4D56F', '#55B85F', '#2473B5', '#6F5DA5'], + transform: 'rotate(90)' + }, { + id: 'trans', + colors: ['#55CDFC', '#F7A8B8', '#FFFFFF', '#F7A8B8', '#55CDFC'], + transform: 'rotate(90)' + }, { + id: 'pan', + colors: ['#FE218C', '#FFD800', '#21B1FF'], + transform: 'rotate(90)' + }, { + id: 'nonbinary', + colors: ['#FCF434', '#FFFFFF', '#9C59D1', '#2C2C2C'], + transform: 'rotate(90)' + }, { + id: 'bi', + colors: ['#D60270', '#9B4F96', '#0038A8'], + transform: 'rotate(90)' + }, { + id: 'asexual', + colors: ['#000000', '#9F9F9F', '#FFFFFF', '#5E1984'], + transform: 'rotate(90)' + }, { + id: 'lesbian', + colors: ['#D52D00', '#EF7627', '#FF9A56', '#FFFFFF', '#D162A4', '#B55690', '#A30262'], + transform: 'rotate(90)' } - 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 generateGradient = colors => { + const steps = colors.length; + return colors.map((color, index) => { return [ + [color, (index / steps)], + [color, (index + 1) / steps] + ]}).flat(); + }; + + const generateStops = (colors, opacity) => { + return generateGradient(colors).map(([color, offset]) => { + return ``; + }); + }; + + const makeLinearGradientSvg = (id, colors, opacity, transform) => { + return ` + + + ${generateStops(colors, opacity).join('\n')} + + + + + `; + }; + + const generateCssBackgroundRules = (type, variant) => ` + --image-background-pride-${type}: var(--image-background-pride-${variant}); + --image-background-pride-${type}-gradient: var(--image-background-pride-gradient-${variant}); + `; + const setDisabledState = (nodes, state) => nodes.forEach(node => node.disabled = !!state); + const blockInputs = nodes => setDisabledState(nodes, true); + const blockInputs = nodes => setDisabledState(nodes, false); + + 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'); + container.ariaHidden = true; + container.innerHTML = svg_html; + const style_c = document.createElement('style'); + style_c.textContent = ` + body { + --image-background-pride-${flag.id}: url('data:image/svg+xml;base64,${btoa(svg_html)}'); + --image-background-pride-gradient-${flag.id}: url("#gradient-${flag.id}"); } `; + document.body.prepend(container); + document.head.prepend(style_c); }); + + fetch(OC.generateUrl('/apps/pride_flags/settings')) + .then(response => response.json()) + .then(({folderVariant, buttonVariant}) => { + if (document.querySelector('head > style#pride_flag_settings') == null) { + const node = document.createElement('style'); + node.id = 'pride_flag_settings'; + document.head.prepend(node); + } + const style_settings = document.querySelector('head > style#pride_flag_settings'); + const rules = `body { + ${(folderVariant !== 'none') ? generateCssBackgroundRules('folder', folderVariant) : ''} + ${(buttonVariant !== 'none') ? generateCssBackgroundRules('button', buttonVariant) : ''} + }`; + style_settings.textContent = rules; + }); + window.pride_flags = { + flags, + "util" : { + "settings": { + blockInputs, + unblockInputs, + "_setDisabledState": setDisabledState, + }, + }, + }; +})(window); diff --git a/lib/AppConstants.php b/lib/AppConstants.php index e2be724..dbd34d7 100644 --- a/lib/AppConstants.php +++ b/lib/AppConstants.php @@ -6,4 +6,14 @@ namespace OCA\PrideFlags; abstract class AppConstants { public const APP_ID = 'pride_flags'; + public enum Variants: string { + case PRIDE = "Pride"; + case TRANS = "Trans Pride"; + case PAN = "Pansexual Pride"; + case BI = "Bisexual Pride"; + case ASEXUAL = "Asexual Pride"; + case LESBIAN = "Lesbian Pride"; + case NONBINARY = "Non-binary Pride"; + case NONE = "No customisation"; + } } diff --git a/lib/Settings/AppSettings.php b/lib/Settings/AppSettings.php index 158112b..cb1cd6b 100644 --- a/lib/Settings/AppSettings.php +++ b/lib/Settings/AppSettings.php @@ -18,11 +18,16 @@ class AppSettings { } public function setStringSetting($userId, string $key, string $value): void { - $this->config->setUserValue(AppConstants::APP_ID, $userId, $key, $value); + // Check for valid Variant here + if (AppConstants\Variants::tryFrom($value) != null) { + $this->config->setUserValue(AppConstants::APP_ID, $userId, $key, $value); + } } public function setAppStringSetting(string $key, string $value): void { - $this->config->setAppValue(AppConstants::APP_ID, $key, $value); + if (AppConstants\Variants::tryFrom($value) != null) { + $this->config->setAppValue(AppConstants::APP_ID, $key, $value); + } } public function getAll($userId): array { diff --git a/templates/settings.php b/templates/settings.php index 91529d7..1182d08 100644 --- a/templates/settings.php +++ b/templates/settings.php @@ -1,5 +1,8 @@