Merge branch 'master' into feature/kicad-enhancements

assets/controllers/common/toast_controller.js

@@ -20,6 +20,10 @@
 import { Controller } from '@hotwired/stimulus';
 import { Toast } from 'bootstrap';
 
+/**
+ * The purpose of this controller, is to show all containers.
+ * They should already be added via turbo-streams, but have to be called for to show them.
+ */
 export default class extends Controller {
     connect() {
         //Move all toasts from the page into our toast container and show them
@@ -33,4 +37,4 @@ export default class extends Controller {
         const toast = new Toast(this.element);
         toast.show();
     }
-}
+}

assets/controllers/elements/nonprintable_char_input_controller.js

@@ -0,0 +1,106 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ *  Copyright (C) 2019 - 2026 Jan Böhmer (https://github.com/jbtronics)
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published
+ *  by the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Controller} from "@hotwired/stimulus";
+
+/**
+ * Purpose of this controller is to allow users to input non-printable characters like EOT, FS, etc. in a form field and submit them correctly with the form.
+ * The visible input field encodes non-printable characters via their Unicode Control picture representation, e.g. \n becomes ␊ and \t becomes ␉, so that they can be displayed in the input field without breaking the form submission.
+ * The actual value of the field, which is submitted with the form, is stored in a hidden input and contains the non-printable characters in their original form.
+ */
+export default class extends Controller {
+
+    _hiddenInput;
+
+    connect() {
+        this.element.addEventListener("input", this._update.bind(this));
+
+        // We use a hidden input to store the actual value of the field, which is submitted with the form.
+        // The visible input is just for user interaction and can contain non-printable characters, which are not allowed in the hidden input.
+        this._hiddenInput = document.createElement("input");
+        this._hiddenInput.type = "hidden";
+        this._hiddenInput.name = this.element.name;
+        this.element.removeAttribute("name");
+        this.element.parentNode.insertBefore(this._hiddenInput, this.element.nextSibling);
+
+        this.element.addEventListener("keypress", this._onKeyPress.bind(this));
+    }
+
+    /**
+     * Ensures that non-printable characters like EOT, FS, etc. gets added to the input value when the user types them
+     * @param event
+     * @private
+     */
+    _onKeyPress(event) {
+        const ALLOWED_INPUT_CODES = [4, 28, 29, 30, 31]; //EOT, FS, GS, RS, US
+
+        if (!ALLOWED_INPUT_CODES.includes(event.keyCode)) {
+            return;
+        }
+
+        event.preventDefault();
+
+        const char = String.fromCharCode(event.keyCode);
+        this.element.value += char;
+
+        this._update();
+
+
+    }
+
+    _update() {
+        //Chrome workaround: Remove a leading ∠ character (U+2220) that appears when the user types a non-printable character at the beginning of the input field.
+        if (this.element.value.startsWith("∠")) {
+            this.element.value = this.element.value.substring(1);
+        }
+
+        // Remove non-printable characters from the input value and store them in the hidden input
+        const normalizedValue = this.decodeNonPrintableChars(this.element.value);
+        this._hiddenInput.value = normalizedValue;
+
+        // Encode non-printable characters in the visible input to their Unicode Control picture representation
+        const encodedValue = this.encodeNonPrintableChars(normalizedValue);
+        if (encodedValue !== this.element.value) {
+            this.element.value = encodedValue;
+        }
+    }
+
+    /**
+     * Encodes non-printable characters in the given string via their Unicode Control picture representation, e.g. \n becomes ␊ and \t becomes ␉.
+     * This allows us to display non-printable characters in the input field without breaking the form submission.
+     * @param str
+     */
+    encodeNonPrintableChars(str) {
+        return str.replace(/[\x00-\x1F\x7F]/g, (char) => {
+            const code = char.charCodeAt(0);
+            return String.fromCharCode(0x2400 + code);
+        });
+    }
+
+    /**
+     * Decodes the Unicode Control picture representation of non-printable characters back to their original form, e.g. ␊ becomes \n and ␉ becomes \t.
+     * @param str
+     */
+    decodeNonPrintableChars(str) {
+        return str.replace(/[\u2400-\u241F\u2421]/g, (char) => {
+            const code = char.charCodeAt(0) - 0x2400;
+            return String.fromCharCode(code);
+        });
+    }
+}

assets/controllers/helpers/scan_special_char_controller.js

@@ -0,0 +1,136 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ *  Copyright (C) 2019 - 2026 Jan Böhmer (https://github.com/jbtronics)
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published
+ *  by the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * This controller listens for a special non-printable character (SOH / ASCII 1) to be entered anywhere on the page,
+ * which is then used as a trigger to submit the following characters as a barcode / scan input.
+ */
+export default class extends Controller {
+    connect() {
+        // Optional: Log to confirm global attachment
+        console.log("Scanner listener active")
+
+        this.isCapturing = false
+        this.buffer = ""
+
+        window.addEventListener("keypress", this.handleKeydown.bind(this))
+    }
+
+    initialize() {
+        this.isCapturing = false
+        this.buffer = ""
+        this.timeoutId = null
+    }
+
+    handleKeydown(event) {
+
+        // Ignore if the user is typing in a form field
+        const isInput = ["INPUT", "TEXTAREA", "SELECT"].includes(event.target.tagName) ||
+            event.target.isContentEditable;
+        if (isInput) return
+
+        // 1. Detect Start of Header (SOH / Ctrl+A)
+        if (event.key === "\x01" || event.keyCode === 1) {
+            this.startCapturing(event)
+            return
+        }
+
+        // 2. Process characters if in capture mode
+        if (this.isCapturing) {
+            this.resetTimeout() // Push the expiration back with every keypress
+
+            if (event.key === "Enter" || event.keyCode === 13) {
+
+                this.finishCapturing(event)
+            } else if (event.key.length === 1) {
+                this.buffer += event.key
+            }
+        }
+    }
+
+    startCapturing(event) {
+        this.isCapturing = true
+        this.buffer = ""
+        this.resetTimeout()
+        event.preventDefault()
+        console.debug("Scan character detected. Capture started...")
+    }
+
+    finishCapturing(event) {
+        event.preventDefault()
+        const data = this.buffer;
+        this.stopCapturing()
+        this.processCapture(data)
+    }
+
+    stopCapturing() {
+        this.isCapturing = false
+        this.buffer = ""
+        if (this.timeoutId) clearTimeout(this.timeoutId)
+        console.debug("Capture cleared/finished.")
+    }
+
+    resetTimeout() {
+        if (this.timeoutId) clearTimeout(this.timeoutId)
+
+        this.timeoutId = setTimeout(() => {
+            if (this.isCapturing) {
+                console.warn("Capture timed out. Resetting buffer.")
+                this.stopCapturing()
+            }
+        }, 500)
+    }
+
+    processCapture(data) {
+        if (!data) return
+
+        console.debug("Captured scan data: " + data)
+
+        const scanInput = document.getElementById("scan_dialog_input");
+        if (scanInput) { //When we are on the scan dialog page, submit the form there
+            this._submitScanForm(data);
+        } else {  //Otherwise use our own form (e.g. on the part list page)
+            this.element.querySelector("input[name='input']").value = data;
+            this.element.requestSubmit();
+        }
+
+
+    }
+
+    _submitScanForm(data) {
+        const scanInput = document.getElementById("scan_dialog_input");
+        if (!scanInput) {
+            console.error("Scan input field not found!")
+            return;
+        }
+
+        scanInput.value = data;
+        scanInput.dispatchEvent(new Event('input', { bubbles: true }));
+
+        const form = document.getElementById("scan_dialog_form");
+        if (!form) {
+            console.error("Scan form not found!")
+            return;
+        }
+
+        form.requestSubmit();
+    }
+}

assets/controllers/pages/barcode_scan_controller.js

@@ -21,17 +21,31 @@ import {Controller} from "@hotwired/stimulus";
 //import * as ZXing from "@zxing/library";
 
 import {Html5QrcodeScanner, Html5Qrcode} from "@part-db/html5-qrcode";
+import { generateCsrfToken, generateCsrfHeaders } from "../csrf_protection_controller";
 
 /* stimulusFetch: 'lazy' */
+
 export default class extends Controller {
-
-    //codeReader = null;
-
     _scanner = null;
-
+    _submitting = false;
+    _lastDecodedText = "";
+    _onInfoChange = null;
 
     connect() {
-        console.log('Init Scanner');
+
+        // Prevent double init if connect fires twice
+        if (this._scanner) return;
+
+        // clear last decoded barcode when state changes on info box
+        const info = document.getElementById("scan_dialog_info_mode");
+        if (info) {
+            this._onInfoChange = () => {
+                this._lastDecodedText = "";
+            };
+            info.addEventListener("change", this._onInfoChange);
+        }
+
+        const isMobile = window.matchMedia("(max-width: 768px)").matches;
 
         //This function ensures, that the qrbox is 70% of the total viewport
         let qrboxFunction = function(viewfinderWidth, viewfinderHeight) {
@@ -45,30 +59,66 @@ export default class extends Controller {
         }
 
         //Try to get the number of cameras. If the number is 0, then the promise will fail, and we show the warning dialog
-        Html5Qrcode.getCameras().catch((devices) => {
-                document.getElementById('scanner-warning').classList.remove('d-none');
+        Html5Qrcode.getCameras().catch(() => {
+            document.getElementById("scanner-warning")?.classList.remove("d-none");
         });
 
         this._scanner = new Html5QrcodeScanner(this.element.id, {
             fps: 10,
             qrbox: qrboxFunction,
+            // Key change: shrink preview height on mobile
+            ...(isMobile ? { aspectRatio: 1.0 } : {}),
             experimentalFeatures: {
                 //This option improves reading quality on android chrome
-                useBarCodeDetectorIfSupported: true
-            }
+                useBarCodeDetectorIfSupported: true,
+            },
         }, false);
 
         this._scanner.render(this.onScanSuccess.bind(this));
     }
 
     disconnect() {
-        this._scanner.pause();
-        this._scanner.clear();
+
+        // If we already stopped/cleared before submit, nothing to do.
+        const scanner = this._scanner;
+        this._scanner = null;
+        this._lastDecodedText = "";
+
+        // Unbind info-mode change handler (always do this, even if scanner is null)
+        const info = document.getElementById("scan_dialog_info_mode");
+        if (info && this._onInfoChange) {
+            info.removeEventListener("change", this._onInfoChange);
+        }
+        this._onInfoChange = null;
+
+        if (!scanner) return;
+
+        try {
+            const p = scanner.clear?.();
+            if (p && typeof p.then === "function") p.catch(() => {});
+        } catch (_) {
+            // ignore
+        }
     }
 
-    onScanSuccess(decodedText, decodedResult) {
-        //Put our decoded Text into the input box
-        document.getElementById('scan_dialog_input').value = decodedText;
+
+    onScanSuccess(decodedText) {
+        if (!decodedText) return;
+
+        const normalized = String(decodedText).trim();
+        if (!normalized) return;
+
+        // scan once per barcode
+        if (normalized === this._lastDecodedText) return;
+
+        // Mark as handled immediately (prevents spam even if callback fires repeatedly)
+        this._lastDecodedText = normalized;
+
+        const input = document.getElementById('scan_dialog_input');
+        input.value = decodedText;
+        //Trigger nonprintable char input controller to update the hidden input value
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+
         //Submit form
         document.getElementById('scan_dialog_form').requestSubmit();
     }

assets/controllers/turbo/global_reload_controller.js

@@ -1,27 +0,0 @@
-/*
- * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
- *
- *  Copyright (C) 2019 - 2022 Jan Böhmer (https://github.com/jbtronics)
- *
- *  This program is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU Affero General Public License as published
- *  by the Free Software Foundation, either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  This program is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU Affero General Public License for more details.
- *
- *  You should have received a copy of the GNU Affero General Public License
- *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import { Controller } from '@hotwired/stimulus';
-
-export default class extends Controller {
-    connect() {
-        //If we encounter an element with global reload controller, then reload the whole page
-        window.location.reload();
-    }
-}

assets/controllers/turbo/locale_menu_controller.js

@@ -1,27 +0,0 @@
-/*
- * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
- *
- *  Copyright (C) 2019 - 2022 Jan Böhmer (https://github.com/jbtronics)
- *
- *  This program is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU Affero General Public License as published
- *  by the Free Software Foundation, either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  This program is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU Affero General Public License for more details.
- *
- *  You should have received a copy of the GNU Affero General Public License
- *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import { Controller } from '@hotwired/stimulus';
-
-export default class extends Controller {
-    connect() {
-        const menu = document.getElementById('locale-select-menu');
-        menu.innerHTML = this.element.innerHTML;
-    }
-}

assets/controllers/turbo/title_controller.js

@@ -1,31 +0,0 @@
-/*
- * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
- *
- *  Copyright (C) 2019 - 2022 Jan Böhmer (https://github.com/jbtronics)
- *
- *  This program is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU Affero General Public License as published
- *  by the Free Software Foundation, either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  This program is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU Affero General Public License for more details.
- *
- *  You should have received a copy of the GNU Affero General Public License
- *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import { Controller } from '@hotwired/stimulus';
-
-export default class extends Controller {
-    connect() {
-        //If we encounter an element with this, then change the title of our document according to data-title
-        this.changeTitle(this.element.dataset.title);
-    }
-
-    changeTitle(title) {
-        document.title = title;
-    }
-}

assets/css/app/images.css

@@ -58,6 +58,12 @@
     object-fit: contain;
 }
 
+@media (max-width: 768px) {
+    .part-info-image {
+        max-height: 100px;
+    }
+}
+
 .object-fit-cover {
     object-fit: cover;
 }

assets/js/register_events.js

@@ -27,7 +27,12 @@ class RegisterEventHelper {
     constructor() {
         this.registerTooltips();
         this.configureDropdowns();
-        this.registerSpecialCharInput();
+        
+        // Only register special character input if enabled in configuration
+        const keybindingsEnabled = document.body.dataset.keybindingsSpecialCharacters !== 'false';
+        if (keybindingsEnabled) {
+            this.registerSpecialCharInput();
+        }
 
         //Initialize ClipboardJS
         this.registerLoadHandler(() => {