Implement bulk edit (#101)

bookmarks/static/bulk_edit.js

@@ -0,0 +1,86 @@
+(function () {
+    const bulkEditToggle = document.getElementById('bulk-edit-mode')
+    const bulkEditBar = document.querySelector('.bulk-edit-bar')
+    const singleToggles = document.querySelectorAll('.bulk-edit-toggle input')
+    const allToggle = document.querySelector('.bulk-edit-all-toggle input')
+
+    function isAllSelected() {
+        let result = true
+
+        singleToggles.forEach(function (toggle) {
+            result = result && toggle.checked
+        })
+
+        return result
+    }
+
+    function selectAll() {
+        singleToggles.forEach(function (toggle) {
+            toggle.checked = true
+        })
+    }
+
+    function deselectAll() {
+        singleToggles.forEach(function (toggle) {
+            toggle.checked = false
+        })
+    }
+
+    // Toggle all
+    allToggle.addEventListener('change', function (e) {
+        if (e.target.checked) {
+            selectAll()
+        } else {
+            deselectAll()
+        }
+    })
+
+    // Toggle single
+    singleToggles.forEach(function (toggle) {
+        toggle.addEventListener('change', function () {
+            allToggle.checked = isAllSelected()
+        })
+    })
+
+    // Allow overflow when bulk edit mode is active to be able to display tag auto complete menu
+    let bulkEditToggleTimeout
+    if (bulkEditToggle.checked) {
+        bulkEditBar.style.overflow = 'visible';
+    }
+    bulkEditToggle.addEventListener('change', function (e) {
+        if (bulkEditToggleTimeout) {
+            clearTimeout(bulkEditToggleTimeout);
+            bulkEditToggleTimeout = null;
+        }
+        if (e.target.checked) {
+            bulkEditToggleTimeout = setTimeout(function () {
+                bulkEditBar.style.overflow = 'visible';
+            }, 500);
+        } else {
+            bulkEditBar.style.overflow = 'hidden';
+        }
+    });
+
+    // Init tag auto-complete
+    function initTagAutoComplete() {
+        const wrapper = document.createElement('div');
+        const tagInput = document.getElementById('bulk-edit-tags-input');
+        const apiBaseUrl = document.documentElement.dataset.apiBaseUrl || '';
+        const apiClient = new linkding.ApiClient(apiBaseUrl)
+
+        new linkding.TagAutoComplete({
+            target: wrapper,
+            props: {
+                id: 'bulk-edit-tags-input',
+                name: tagInput.name,
+                value: tagInput.value,
+                apiClient: apiClient,
+                variant: 'small'
+            }
+        });
+
+        tagInput.parentElement.replaceChild(wrapper, tagInput);
+    }
+
+    initTagAutoComplete();
+})()

bookmarks/static/shared.js

@@ -0,0 +1,45 @@
+(function () {
+
+    function initConfirmationButtons() {
+        const buttonEls = document.querySelectorAll('.btn-confirmation');
+
+        function showConfirmation(buttonEl) {
+            const cancelEl = document.createElement(buttonEl.nodeName);
+            cancelEl.innerText = 'Cancel';
+            cancelEl.className = 'btn btn-link btn-sm btn-confirmation-action mr-1';
+            cancelEl.addEventListener('click', function () {
+                container.remove();
+                buttonEl.style = '';
+            });
+
+            const confirmEl = document.createElement(buttonEl.nodeName);
+            confirmEl.innerText = 'Confirm';
+            confirmEl.className = 'btn btn-link btn-delete btn-sm btn-confirmation-action';
+
+            if (buttonEl.nodeName === 'BUTTON') {
+                confirmEl.type = buttonEl.type;
+                confirmEl.name = buttonEl.name;
+            }
+            if (buttonEl.nodeName === 'A') {
+                confirmEl.href = buttonEl.href;
+            }
+
+            const container = document.createElement('span');
+            container.className = 'confirmation'
+            container.appendChild(cancelEl);
+            container.appendChild(confirmEl);
+            buttonEl.parentElement.insertBefore(container, buttonEl);
+            buttonEl.style = 'display: none';
+        }
+
+        buttonEls.forEach(function (linkEl) {
+            linkEl.addEventListener('click', function (e) {
+                e.preventDefault();
+                showConfirmation(linkEl);
+            });
+        });
+    }
+
+
+    initConfirmationButtons()
+})()