✨ Add "Toggle background" button to the ql-qr-code context menu

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

element/qr_code_element.js

@@ -84,7 +84,7 @@ QrCode.setAttribute('qr-error-correction');
  *
  * @author   Jelle De Loecker   <[email protected]>
  * @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   <[email protected]>
  * @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   <[email protected]>
+ * @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   <[email protected]>
+ * @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   <[email protected]>
  * @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,

package.json

@@ -2,7 +2,7 @@
 	"name"            : "alchemy-shortlink",
 	"description"     : "A shortlink plugin for AlchemyMVC projects",
 	"author"          : "Jelle De Loecker <[email protected]>",
-	"version"         : "0.2.3",
+	"version"         : "0.2.4",
 	"repository"      : "11ways/alchemy-shortlink",
 	"license"         : "MIT",
 	"keywords"        : ["skeleton", "boilerplate", "alchemymvc"],