@appius-fr/apx 2.6.1 → 2.7.0

package/modules/tristate/tristate.mjs

@@ -1,172 +1,293 @@
-import './css/tristate.css';
-
-/**
- * Creates a tri-state checkbox for each checkbox element in the apx.elements array.
- * @param {Array<HTMLElement>} apx - An array of HTMLElements which is returned by APX()
- * @example
- * // Call the tristate function on an array of checkbox elements
- * apx.tristate();
- */
-export default function (apx) {
-    apx.tristate = function (options = {}){
-        apx.elements.forEach((element) => {
-            if (element.type === 'checkbox') {
-                const [originalCheckbox, tristateDom, hiddenInput] = createTriStateCheckbox(element,options);
-                //If there is a "options.callbacks.after" callback in options call it
-                if(options.callbacks && options.callbacks.after && typeof options.callbacks.after === 'function') {
-                    options.callbacks.after(originalCheckbox, tristateDom, hiddenInput);
-                }               
-            }
-        });
-    }
-}
-
-function toggleTriStateCheckboxState(customCheckbox, actualCheckbox, hiddenInput) {
-    if (customCheckbox.classList.contains('checked')) {
-        customCheckbox.classList.remove('checked');
-        customCheckbox.classList.add('crossed');
-        actualCheckbox.checked = false;
-        hiddenInput.value = 'false';
-    } else if (customCheckbox.classList.contains('crossed')) {
-        customCheckbox.classList.remove('crossed');
-        customCheckbox.classList.add('unchecked');
-        hiddenInput.removeAttribute('name'); // Ensure the hidden input doesn't post any value
-        hiddenInput.removeAttribute('value'); // Ensure the hidden input doesn't post any value
-    } else {
-        customCheckbox.classList.remove('unchecked');
-        customCheckbox.classList.add('checked');
-        actualCheckbox.checked = true;
-        hiddenInput.value = 'true';
-        hiddenInput.setAttribute('name', actualCheckbox.dataset.name); // Restore the name for posting
-    }
-}
-
-function createTriStateCheckbox(checkboxElement, options) {
-    
-    //get the checkbox margins including browser default
-    const checkboxStyle = window.getComputedStyle(checkboxElement);
-    // Hide the original checkbox
-    checkboxElement.style.display = 'none';
-
-    // Create the custom checkbox div and set its initial state
-    const tristateDom = document.createElement('div');
-    tristateDom.classList.add('apx-tristate');
-    if (options.size) {
-        if (options.size.width) {
-            tristateDom.style.width = options.size.width + 'px';
-        }
-        if (options.size.height) {
-            tristateDom.style.height = options.size.height + 'px';
-        }
-    }
-    if(options.classes) tristateDom.classList.add(...computeClasses(options.classes));
-
-    tristateDom.style.margin = checkboxStyle.margin;
-
-    if (checkboxElement.checked) {
-        tristateDom.classList.add('checked');
-    } else {
-        tristateDom.classList.add('unchecked');
-    }
-
-    // Create the hidden input field
-    const hiddenInput = document.createElement('input');
-    hiddenInput.type = 'hidden';
-    hiddenInput.name = checkboxElement.name; // Copy the name from the original checkbox
-    checkboxElement.dataset.name = checkboxElement.name; // Store the name in a data attribute for later use
-    checkboxElement.removeAttribute('name'); // Remove the name from the original checkbox to avoid double posting
-
-    if (options.defaultState) setDefaultState(options, tristateDom, hiddenInput);
-    else{
-        // Set the initial value for the hidden input based on the checkbox's state
-        if (checkboxElement.checked) {
-            hiddenInput.value = 'true';
-        } else {
-            hiddenInput.name = ''; // Ensure the hidden input doesn't post any value
-            hiddenInput.value = '';
-        }
-    }
-
-    //handle accessibility, set the tabindex to the same as the checkbox
-    tristateDom.tabIndex = checkboxElement.tabIndex;
-
-    // Insert the hidden input inside the custom checkbox div
-    tristateDom.appendChild(hiddenInput);
-
-    // Insert it next to the actual checkbox
-    checkboxElement.parentNode.insertBefore(tristateDom, checkboxElement.nextSibling);
-
-    // Add event listener
-    tristateDom.addEventListener('click', function (e) {
-        toggleTriStateCheckboxState(tristateDom, checkboxElement, hiddenInput);
-        bubbleEventsToOriginalCheckbox(options, checkboxElement, tristateDom, hiddenInput, e);
-    });
-    tristateDom.addEventListener('keyup', onkeyup.bind(null, checkboxElement));
-
-    return [checkboxElement, tristateDom, hiddenInput];
-}
-
-function setDefaultState(options, tristateDom, hiddenInput) {
-    //for all values possible for defaultState, set the initial state of the checkbox
-    if (options.defaultState === 'checked') {
-        tristateDom.classList.remove('unchecked');
-        tristateDom.classList.add('checked');
-        hiddenInput.value = 'true';
-    }
-    else if (options.defaultState === 'unchecked') {
-        tristateDom.classList.remove('checked');
-        tristateDom.classList.add('unchecked');
-        hiddenInput.removeAttribute('name'); // Ensure the hidden input doesn't post any value
-        hiddenInput.removeAttribute('value'); // Ensure the hidden input doesn't post any value
-    }
-    else if (options.defaultState === 'crossed') {
-        tristateDom.classList.remove('checked');
-        tristateDom.classList.add('crossed');
-        hiddenInput.value = 'false';
-    }
-}
-
-function computeClasses(classes) {
-    let computedClasses = [];
-    if(typeof classes === 'string') {
-        //replace multiple white spaces with a single space
-        classes = classes.replace(/\s\s+/g, ' ');
-        if(classes.indexOf(' ') > -1)
-            computedClasses = classes.split(' ');
-        else if(classes.indexOf(',') > -1)
-            computedClasses = classes.split(',');
-        else
-            computedClasses = [classes];
-    }
-    else if(Array.isArray(classes)) {
-        computedClasses = classes;
-    }
-    return computedClasses;
-}
-
-function bubbleEventsToOriginalCheckbox(options, checkboxElement, tristateDom, hiddenInput, event) {
-    //if options.callbacks.change is set, call it
-    if(options.callbacks && options.callbacks.change && typeof options.callbacks.change === 'function') {
-        options.callbacks.change(checkboxElement, tristateDom, hiddenInput);
-    }
-
-    if(!options.bubbleEvents) return;
-
-    if(event.type === 'click') {
-        checkboxElement.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
-    }
-    else if(event.type === 'keyup') {
-        checkboxElement.dispatchEvent(new KeyboardEvent('keyup', { key: ' ', bubbles: true, cancelable: true }));
-    }
-    else if(event.type === 'change') {
-        checkboxElement.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
-    }
-}
-
-function onkeyup(checkboxElement, event) {
-    if (event.keyCode === 32) {
-        bubbleEventsToOriginalCheckbox(checkboxElement, event);
-        event.preventDefault();
-        event.target.click();
-    }
+import './css/tristate.css';
+
+/**
+ * Creates a tri-state checkbox for each checkbox element in the apx.elements array.
+ * @param {Array<HTMLElement>} apx - An array of HTMLElements which is returned by APX()
+ * @example
+ * // Call the tristate function on an array of checkbox elements
+ * apx.tristate();
+ */
+export default function (apx) {
+    apx.tristate = function (options = {}){
+        apx.elements.forEach((element) => {
+            if (element.type === 'checkbox') {
+                const [originalCheckbox, tristateDom, hiddenInput] = createTriStateCheckbox(element, options);
+                originalCheckbox._apxTristate = { dom: tristateDom, hiddenInput };
+                if (options.callbacks && options.callbacks.after && typeof options.callbacks.after === 'function') {
+                    options.callbacks.after(originalCheckbox, tristateDom, hiddenInput);
+                }
+            }
+        });
+        return {
+            setChildren(childrenApx) {
+                return setChildren(apx, childrenApx, options);
+            }
+        };
+    };
+}
+
+/**
+ * Link parent tristate(s) to child checkboxes. When exactly one parent: that parent gets
+ * indeterminate-dash automatically and shows dash when children are mixed; click parent to apply its state to all children.
+ * @param {Object} parentApx - APX instance whose elements are the parent checkbox(es)
+ * @param {Object} childrenApx - APX instance whose elements are the child checkbox(es)
+ * @param {Object} options - Options used for the parent (and applied to children when initializing them)
+ */
+function setChildren(parentApx, childrenApx, options) {
+    const parents = parentApx.all().filter((el) => el.type === 'checkbox');
+    if (parents.length === 0) return;
+    if (parents.length > 1) {
+        console.warn('APX tristate setChildren: only the first parent is linked to all children.');
+    }
+    const parentCheckbox = parents[0];
+    const parentRef = parentCheckbox._apxTristate;
+    if (!parentRef) return;
+
+    const parentDom = parentRef.dom;
+    const parentHiddenInput = parentRef.hiddenInput;
+
+    // Automatically enable indeterminate (dash) on parent when it has children: dash shows only when children are mixed (--mixed)
+    parentDom.classList.add('apx-tristate--unchecked-indeterminate', 'apx-tristate--indeterminate-dash');
+
+    const childCheckboxes = childrenApx.all().filter((el) => el.type === 'checkbox');
+    const childRefs = [];
+
+    function syncParentFromChildren() {
+        if (childRefs.length === 0) return;
+        const states = childRefs.map((ref) => getTristateState(ref.dom));
+        const allChecked = states.every((s) => s === 'checked');
+        const allCrossed = states.every((s) => s === 'crossed');
+        const allUnchecked = states.every((s) => s === 'unchecked');
+        const mixed = !allChecked && !allCrossed && !allUnchecked;
+
+        parentDom.classList.remove('unchecked', 'checked', 'crossed');
+        if (mixed) parentDom.classList.add('apx-tristate--mixed');
+        else parentDom.classList.remove('apx-tristate--mixed');
+
+        if (allChecked) {
+            parentDom.classList.add('checked');
+            parentHiddenInput.value = 'true';
+        } else if (allCrossed) {
+            parentDom.classList.add('crossed');
+            parentHiddenInput.value = 'false';
+        } else {
+            parentDom.classList.add('unchecked');
+            parentHiddenInput.removeAttribute('name');
+            parentHiddenInput.removeAttribute('value');
+        }
+    }
+
+    function applyParentToChildren() {
+        const parentState = getTristateState(parentDom);
+        childRefs.forEach((ref) => setTristateState(ref.checkbox, ref.dom, ref.hiddenInput, parentState));
+    }
+
+    const childOptions = {
+        ...options,
+        callbacks: {
+            after(checkbox, dom, hiddenInput) {
+                childRefs.push({ checkbox, dom, hiddenInput });
+            },
+            change: syncParentFromChildren
+        }
+    };
+
+    childrenApx.tristate(childOptions);
+
+    syncParentFromChildren();
+    parentDom.addEventListener('click', () => setTimeout(applyParentToChildren, 0));
+}
+
+function getTristateState(dom) {
+    if (dom.classList.contains('checked')) return 'checked';
+    if (dom.classList.contains('crossed')) return 'crossed';
+    return 'unchecked';
+}
+
+function setTristateState(checkbox, dom, hiddenInput, state) {
+    dom.classList.remove('unchecked', 'checked', 'crossed');
+    dom.classList.add(state);
+    const name = checkbox.dataset.name || checkbox.getAttribute('data-name') || checkbox.name || '';
+    if (state === 'checked') {
+        hiddenInput.value = 'true';
+        if (name) hiddenInput.setAttribute('name', name);
+        checkbox.checked = true;
+    } else if (state === 'crossed') {
+        hiddenInput.value = 'false';
+        if (name) hiddenInput.setAttribute('name', name);
+        checkbox.checked = false;
+    } else {
+        hiddenInput.removeAttribute('name');
+        hiddenInput.removeAttribute('value');
+        checkbox.checked = false;
+    }
+}
+
+function toggleTriStateCheckboxState(customCheckbox, actualCheckbox, hiddenInput) {
+    const wasChecked = customCheckbox.classList.contains('checked');
+    const wasCrossed = customCheckbox.classList.contains('crossed');
+    customCheckbox.classList.remove('unchecked', 'checked', 'crossed');
+    if (wasChecked) {
+        customCheckbox.classList.add('crossed');
+        actualCheckbox.checked = false;
+        hiddenInput.value = 'false';
+    } else if (wasCrossed) {
+        customCheckbox.classList.add('unchecked');
+        hiddenInput.removeAttribute('name'); // Ensure the hidden input doesn't post any value
+        hiddenInput.removeAttribute('value'); // Ensure the hidden input doesn't post any value
+    } else {
+        customCheckbox.classList.add('checked');
+        actualCheckbox.checked = true;
+        hiddenInput.value = 'true';
+        hiddenInput.setAttribute('name', actualCheckbox.dataset.name); // Restore the name for posting
+    }
+}
+
+function createTriStateCheckbox(checkboxElement, options) {
+    
+    //get the checkbox margins including browser default
+    const checkboxStyle = window.getComputedStyle(checkboxElement);
+    // Hide the original checkbox
+    checkboxElement.style.display = 'none';
+
+    // Create the custom checkbox div and set its initial state
+    const tristateDom = document.createElement('div');
+    tristateDom.classList.add('apx-tristate');
+    if (options.size) {
+        if (options.size.width != null) {
+            const w = options.size.width;
+            if (typeof w !== 'number' && typeof w !== 'string') {
+                throw new TypeError('tristate size.width must be a number (px) or a string (CSS length).');
+            }
+            tristateDom.style.width = typeof w === 'number' ? w + 'px' : String(w);
+        }
+        if (options.size.height != null) {
+            const h = options.size.height;
+            if (typeof h !== 'number' && typeof h !== 'string') {
+                throw new TypeError('tristate size.height must be a number (px) or a string (CSS length).');
+            }
+            tristateDom.style.height = typeof h === 'number' ? h + 'px' : String(h);
+        }
+    }
+    if(options.classes) tristateDom.classList.add(...computeClasses(options.classes));
+    const colors = resolveColors(options);
+    if (colors.tick != null) tristateDom.style.setProperty('--apx-tristate-tick-color', String(colors.tick));
+    if (colors.checked != null) tristateDom.style.setProperty('--apx-tristate-checked-color', String(colors.checked));
+    if (colors.crossed != null) tristateDom.style.setProperty('--apx-tristate-crossed-color', String(colors.crossed));
+
+    tristateDom.style.margin = checkboxStyle.margin;
+
+    if (checkboxElement.checked) {
+        tristateDom.classList.add('checked');
+    } else {
+        tristateDom.classList.add('unchecked');
+    }
+
+    // Create the hidden input field
+    const hiddenInput = document.createElement('input');
+    hiddenInput.type = 'hidden';
+    hiddenInput.name = checkboxElement.name; // Copy the name from the original checkbox
+    checkboxElement.dataset.name = checkboxElement.name; // Store the name in a data attribute for later use
+    checkboxElement.removeAttribute('name'); // Remove the name from the original checkbox to avoid double posting
+
+    if (options.defaultState) setDefaultState(options, tristateDom, hiddenInput);
+    else{
+        // Set the initial value for the hidden input based on the checkbox's state
+        if (checkboxElement.checked) {
+            hiddenInput.value = 'true';
+        } else {
+            hiddenInput.name = ''; // Ensure the hidden input doesn't post any value
+            hiddenInput.value = '';
+        }
+    }
+
+    //handle accessibility, set the tabindex to the same as the checkbox
+    tristateDom.tabIndex = checkboxElement.tabIndex;
+
+    // Insert the hidden input inside the custom checkbox div
+    tristateDom.appendChild(hiddenInput);
+
+    // Insert it next to the actual checkbox
+    checkboxElement.parentNode.insertBefore(tristateDom, checkboxElement.nextSibling);
+
+    // Add event listener
+    tristateDom.addEventListener('click', function (e) {
+        toggleTriStateCheckboxState(tristateDom, checkboxElement, hiddenInput);
+        bubbleEventsToOriginalCheckbox(options, checkboxElement, tristateDom, hiddenInput, e);
+    });
+    tristateDom.addEventListener('keyup', onkeyup.bind(null, checkboxElement));
+
+    return [checkboxElement, tristateDom, hiddenInput];
+}
+
+function setDefaultState(options, tristateDom, hiddenInput) {
+    // Ensure only one state class is set (uncheckedAppearance modifiers must not affect checked/crossed)
+    tristateDom.classList.remove('unchecked', 'checked', 'crossed');
+    if (options.defaultState === 'checked') {
+        tristateDom.classList.add('checked');
+        hiddenInput.value = 'true';
+    }
+    else if (options.defaultState === 'unchecked') {
+        tristateDom.classList.add('unchecked');
+        hiddenInput.removeAttribute('name'); // Ensure the hidden input doesn't post any value
+        hiddenInput.removeAttribute('value'); // Ensure the hidden input doesn't post any value
+    }
+    else if (options.defaultState === 'crossed') {
+        tristateDom.classList.add('crossed');
+        hiddenInput.value = 'false';
+    }
+}
+
+function computeClasses(classes) {
+    let computedClasses = [];
+    if(typeof classes === 'string') {
+        //replace multiple white spaces with a single space
+        classes = classes.replace(/\s\s+/g, ' ');
+        if(classes.indexOf(' ') > -1)
+            computedClasses = classes.split(' ');
+        else if(classes.indexOf(',') > -1)
+            computedClasses = classes.split(',');
+        else
+            computedClasses = [classes];
+    }
+    else if(Array.isArray(classes)) {
+        computedClasses = classes;
+    }
+    return computedClasses;
+}
+
+function resolveColors(options) {
+    const c = options.colors || {};
+    return {
+        tick: c.tick != null ? c.tick : options.tickColor,
+        checked: c.checked != null ? c.checked : options.checkedColor,
+        crossed: c.crossed != null ? c.crossed : options.crossedColor
+    };
+}
+
+function bubbleEventsToOriginalCheckbox(options, checkboxElement, tristateDom, hiddenInput, event) {
+    //if options.callbacks.change is set, call it
+    if(options.callbacks && options.callbacks.change && typeof options.callbacks.change === 'function') {
+        options.callbacks.change(checkboxElement, tristateDom, hiddenInput);
+    }
+
+    if(!options.bubbleEvents) return;
+
+    if(event.type === 'click') {
+        checkboxElement.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+    }
+    else if(event.type === 'keyup') {
+        checkboxElement.dispatchEvent(new KeyboardEvent('keyup', { key: ' ', bubbles: true, cancelable: true }));
+    }
+    else if(event.type === 'change') {
+        checkboxElement.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+    }
+}
+
+function onkeyup(checkboxElement, event) {
+    if (event.keyCode === 32) {
+        bubbleEventsToOriginalCheckbox(checkboxElement, event);
+        event.preventDefault();
+        event.target.click();
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appius-fr/apx",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "Appius Extended JS - A powerful JavaScript extension library",
   "main": "dist/APX.prod.mjs",
   "module": "dist/APX.prod.mjs",
@@ -9,6 +9,10 @@
       "import": "./dist/APX.prod.mjs",
       "require": "./dist/APX.prod.mjs"
     },
+    "./source": {
+      "import": "./APX.mjs",
+      "require": "./APX.mjs"
+    },
     "./dev": {
       "import": "./dist/APX.dev.mjs",
       "require": "./dist/APX.dev.mjs"