From e06fa47c96875b6e66e6ce84bd3a4ba945161ad5 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Wed, 13 Dec 2023 17:40:48 +0100 Subject: [PATCH] Implement customizable buttons via env vars (fixes #214) --- public/index.html | 48 ++++++++++++++++++++++++++++++++++++------ public/scripts/main.js | 1 + public/scripts/ui.js | 47 +++++++++++++++++++++++++++++++++++++++++ server/index.js | 32 ++++++++++++++++++++++++++++ server/server.js | 3 ++- 5 files changed, 124 insertions(+), 7 deletions(-) diff --git a/public/index.html b/public/index.html index aaab31e..b2417c4 100644 --- a/public/index.html +++ b/public/index.html @@ -586,16 +586,36 @@ - + - + - + + + + + @@ -643,7 +663,7 @@ - + @@ -693,9 +713,25 @@ - + + + + + + + + + + + + + + + + + + - diff --git a/public/scripts/main.js b/public/scripts/main.js index 133e5ec..e6ff259 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -155,6 +155,7 @@ class PairDrop { } async hydrate() { + this.aboutUI = new AboutUI(); this.peersUI = new PeersUI(); this.languageSelectDialog = new LanguageSelectDialog(); this.receiveFileDialog = new ReceiveFileDialog(); diff --git a/public/scripts/ui.js b/public/scripts/ui.js index 46b7793..52fecbc 100644 --- a/public/scripts/ui.js +++ b/public/scripts/ui.js @@ -2275,6 +2275,53 @@ class Base64Dialog extends Dialog { } } +class AboutUI { + constructor() { + this.$donationBtn = $('donation-btn'); + this.$twitterBtn = $('twitter-btn'); + this.$mastodonBtn = $('mastodon-btn'); + this.$blueskyBtn = $('bluesky-btn'); + this.$customBtn = $('custom-btn'); + this.$privacypolicyBtn = $('privacypolicy-btn'); + Events.on('config', e => this._onConfig(e.detail.buttons)); + } + + async _onConfig(btnConfig) { + await this._evaluateBtnConfig(this.$donationBtn, btnConfig.donation_button); + await this._evaluateBtnConfig(this.$twitterBtn, btnConfig.twitter_button); + await this._evaluateBtnConfig(this.$mastodonBtn, btnConfig.mastodon_button); + await this._evaluateBtnConfig(this.$blueskyBtn, btnConfig.bluesky_button); + await this._evaluateBtnConfig(this.$customBtn, btnConfig.custom_button); + await this._evaluateBtnConfig(this.$privacypolicyBtn, btnConfig.privacypolicy_button); + } + + async _evaluateBtnConfig($btn, config) { + // if config is not set leave everything as default + if (!Object.keys(config).length) return; + + if (config.active === "false") { + $btn.setAttribute('hidden', true); + } else { + if (config.link) { + $btn.setAttribute('href', config.link); + } + if (config.title) { + $btn.setAttribute('title', config.title); + // prevent overwriting of custom title when setting different language + $btn.removeAttribute('data-i18n-key'); + $btn.removeAttribute('data-i18n-attrs'); + } + if (config.icon) { + $btn.setAttribute('title', config.title); + // prevent overwriting of custom title when setting different language + $btn.removeAttribute('data-i18n-key'); + $btn.removeAttribute('data-i18n-attrs'); + } + $btn.removeAttribute('hidden'); + } + } +} + class Toast extends Dialog { constructor() { super('toast'); diff --git a/server/index.js b/server/index.js index 9868b31..2134c67 100644 --- a/server/index.js +++ b/server/index.js @@ -61,6 +61,38 @@ else { } } conf.rateLimit = rateLimit; +conf.buttons = { + "donation_button": { + "active": process.env.DONATION_BUTTON_ACTIVE, + "link": process.env.DONATION_BUTTON_LINK, + "title": process.env.DONATION_BUTTON_TITLE + }, + "twitter_button": { + "active": process.env.TWITTER_BUTTON_ACTIVE, + "link": process.env.TWITTER_BUTTON_LINK, + "title": process.env.TWITTER_BUTTON_TITLE + }, + "mastodon_button": { + "active": process.env.MASTODON_BUTTON_ACTIVE, + "link": process.env.MASTODON_BUTTON_LINK, + "title": process.env.MASTODON_BUTTON_TITLE + }, + "bluesky_button": { + "active": process.env.BLUESKY_BUTTON_ACTIVE, + "link": process.env.BLUESKY_BUTTON_LINK, + "title": process.env.BLUESKY_BUTTON_TITLE + }, + "custom_button": { + "active": process.env.CUSTOM_BUTTON_ACTIVE, + "link": process.env.CUSTOM_BUTTON_LINK, + "title": process.env.CUSTOM_BUTTON_TITLE + }, + "privacypolicy_button": { + "active": process.env.PRIVACYPOLICY_BUTTON_ACTIVE, + "link": process.env.PRIVACYPOLICY_BUTTON_LINK, + "title": process.env.PRIVACYPOLICY_BUTTON_TITLE + } +}; // Evaluate arguments for deployment with Node.js only conf.autoStart = process.argv.includes('--auto-restart'); diff --git a/server/server.js b/server/server.js index 9b3d340..d249189 100644 --- a/server/server.js +++ b/server/server.js @@ -49,7 +49,8 @@ export default class PairDropServer { // By using `WS_SERVER`, you can host an instance that uses another signaling server. app.get('/config', (req, res) => { res.send({ - signalingServer: conf.signalingServer + signalingServer: conf.signalingServer, + buttons: conf.buttons }); });