From 6e55ed83c1212da8b6df66ae46f377fbcc3cb8d7 Mon Sep 17 00:00:00 2001 From: Jelle De Loecker Date: Thu, 19 Oct 2023 14:08:07 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20"Toggle=20background"=20butto?= =?UTF-8?q?n=20to=20the=20`ql-qr-code`=20context=20menu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 4 ++ element/qr_code_element.js | 77 ++++++++++++++++++++++++++++++++++---- package.json | 2 +- 3 files changed, 74 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 977a9e9..732ab63 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 0.2.4 (2023-10-19) + +* Add "Toggle background" button to the `ql-qr-code` context menu + ## 0.2.3 (2023-10-18) * Add custom download options to the `al-qr-code` element diff --git a/element/qr_code_element.js b/element/qr_code_element.js index ae73021..93f4151 100644 --- a/element/qr_code_element.js +++ b/element/qr_code_element.js @@ -84,7 +84,7 @@ QrCode.setAttribute('qr-error-correction'); * * @author Jelle De Loecker * @since 0.2.0 - * @version 0.2.3 + * @version 0.2.4 */ QrCode.setMethod(async function introduced() { @@ -114,24 +114,40 @@ QrCode.setMethod(async function introduced() { this.qr_options = qr_options; - const qrCode = new QRCodeStyling(qr_options); - - qrCode.append(this); - - this.qr_code_instance = qrCode; + this.recreateQrCode(); this.addEventListener('contextmenu', e => { this.showContextMenu(e); }); + + this.background_is_on = true; + this.previous_background = null; }); /** - * Force a download of the current QR code + * Recreate the QR code * * @author Jelle De Loecker * @since 0.2.3 * @version 0.2.3 */ +QrCode.setMethod(function recreateQrCode(e) { + + Hawkejs.removeChildren(this); + + const qrCode = new QRCodeStyling(this.qr_options); + qrCode.append(this); + + this.qr_code_instance = qrCode; +}); + +/** + * Force a download of the current QR code + * + * @author Jelle De Loecker + * @since 0.2.3 + * @version 0.2.4 + */ QrCode.setMethod(async function downloadAsFile(type, width, height, dot_color) { await hawkejs.require('qr-code-styling'); @@ -180,17 +196,62 @@ QrCode.setMethod(async function downloadAsFile(type, width, height, dot_color) { instance.download(download_options); }); +/** + * Get the current toggle-background title + * + * @author Jelle De Loecker + * @since 0.2.3 + * @version 0.2.4 + */ +QrCode.setMethod(function getToggleBackgroundTitle() { + + let result = 'Toggle background'; + let color = this.qr_options?.backgroundOptions?.color; + + if (color) { + result += ' (is now ' + color + ')'; + } + + return result; +}); + /** * Show the context menu * * @author Jelle De Loecker * @since 0.2.3 - * @version 0.2.3 + * @version 0.2.4 */ QrCode.setMethod(function showContextMenu(e) { let menu = this.createElement('he-context-menu'); + menu.addEntry(this.getToggleBackgroundTitle(), () => { + + if (!this.qr_options) { + this.qr_options = {}; + } + + if (!this.qr_options.backgroundOptions) { + this.qr_options.backgroundOptions = {}; + } + + if (this.background_is_on) { + // Remember the current background color + this.previous_background = this.qr_options?.backgroundOptions?.color; + + // Set it to transparent + this.qr_options.backgroundOptions.color = 'transparent'; + + this.background_is_on = false; + } else { + this.qr_options.backgroundOptions.color = this.previous_background; + this.background_is_on = true; + } + + this.recreateQrCode(); + }); + if (!this.qr_logo) { // Logos are somehow always drawn horribly // (They are included in the file with a set width & height, and then scaled, diff --git a/package.json b/package.json index 831a61b..bde7436 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name" : "alchemy-shortlink", "description" : "A shortlink plugin for AlchemyMVC projects", "author" : "Jelle De Loecker ", - "version" : "0.2.3", + "version" : "0.2.4", "repository" : "11ways/alchemy-shortlink", "license" : "MIT", "keywords" : ["skeleton", "boilerplate", "alchemymvc"],