@appius-fr/apx 2.2.2

package/modules/dialog/dialog.mjs

@@ -0,0 +1,211 @@
+// Importing the CSS and HTML templates
+import './css/dialog.css';
+import dialogTemplate from './html/dialog.html?raw';
+
+const createDialog = (options) => {
+    const dialogDefaults = {
+        title: '',
+        content: '',
+        contentURI: '',
+        buttons: [],
+        size: 'medium',
+        showLoadingIndicator: false
+    };
+
+    const { title, content, contentURI, buttons, size, showLoadingIndicator } = { ...dialogDefaults, ...options };
+
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = dialogTemplate.trim();
+    const dialogElement = wrapper.firstChild;
+
+    // Lifecycle event management
+    const lifecycleResolvers = {};
+    const lifecycleEvents = {};
+
+    // Define lifecycle promises as properties
+    ['opening', 'opened', 'closing', 'closed', 'contentLoading', 'contentLoaded'].forEach((event) => {
+        lifecycleEvents[event] = new Promise((resolve) => {
+            lifecycleResolvers[event] = resolve;
+        });
+    });
+
+    const triggerEvent = (event) => {
+        if (lifecycleResolvers[event]) {
+            lifecycleResolvers[event]();
+        } else {
+            console.warn(`No resolver found for lifecycle event: ${event}`);
+        }
+    };
+
+    const dialog = {
+        element: dialogElement,
+        buttons: {},
+        isClosed: false,
+        lifecycle: lifecycleEvents, // Lifecycle promises directly exposed here
+        open: async () => {
+            try {
+                triggerEvent('opening');
+                await dialog.lifecycle.opening;
+
+                // If loading indicator is enabled and we're fetching content, show dialog first
+                if (showLoadingIndicator && contentURI) {
+                    // Append dialog to the DOM and display it first
+                    document.body.appendChild(dialogElement);
+                    dialogElement.style.display = "flex";
+                    
+                    // Show loading indicator
+                    dialogElement.querySelector(".APX-dialog-dynamic-content").innerHTML = '<div class="APX-dialog-loading-indicator"></div>';
+                    
+                    // Load content after dialog is visible
+                    await fetchAndInsertContent();
+                } else {
+                    // Default behavior: load content first, then show dialog
+                    await fetchAndInsertContent();
+                    
+                    // Append dialog to the DOM and display it
+                    document.body.appendChild(dialogElement);
+                    dialogElement.style.display = "flex";
+                }
+
+                triggerEvent('opened');
+                await dialog.lifecycle.opened;
+            } catch (error) {
+                console.error('Error opening dialog:', error);
+            }
+            return dialog; // Return for daisy-chaining
+        },
+        close: async () => {
+            try {
+                triggerEvent('closing');
+                await dialog.lifecycle.closing;
+
+                // Cleanup and remove dialog
+                closeDialogAndCleanup();
+
+                triggerEvent('closed');
+                await dialog.lifecycle.closed;
+            } catch (error) {
+                console.error('Error during dialog closing:', error);
+            }
+            return dialog; // Return for daisy-chaining
+        }
+    };
+
+    const closeDialogAndCleanup = () => {
+        if (dialog.isClosed) return;
+
+        dialog.isClosed = true;
+        dialogElement.style.display = "none";
+        if (document.body.contains(dialogElement)) {
+            document.body.removeChild(dialogElement);
+        }
+    };
+
+    const setDialogSize = () => {
+        const dialogContent = dialogElement.querySelector(".APX-dialog-content");
+        const sizes = {
+            small: { width: '300px', height: '200px' },
+            medium: { width: '500px', height: '400px' },
+            large: { width: '800px', height: '600px' }
+        };
+
+        if (size === 'auto') return;
+
+        const selectedSize = sizes[size] || (typeof size === 'object' && size);
+        if (selectedSize) {
+            dialogContent.style.minWidth = selectedSize.width || '500px';
+            dialogContent.style.minHeight = selectedSize.height || '400px';
+        }
+    };
+
+    const addButtons = () => {
+        const buttonContainer = dialogElement.querySelector(".APX-dialog-button-container");
+
+        buttons.forEach(({ key, label, order = 0, align = 'flex-end', closeOnClick = true }) => {
+            const button = document.createElement('button');
+            button.textContent = label;
+            button.style.order = order;
+
+            if (closeOnClick) {
+                // Handle as a one-time Promise
+                let firstClickResolved = false;
+
+                const firstClickPromise = new Promise((resolve) => {
+                    button.onclick = () => {
+                        if (!firstClickResolved) {
+                            firstClickResolved = true;
+                            resolve(dialog); // Resolve the Promise
+                            dialog.close(); // Close the dialog
+                        }
+                    };
+                });
+
+                // Assign the promise for chaining with `.then`
+                dialog.buttons[key] = firstClickPromise;
+            } else {
+                // Handle as a repeated event handler
+                let handlers = []; // Store handlers for `.then()`
+
+                const clickPromise = {
+                    then: (callback) => {
+                        if (typeof callback === 'function') {
+                            handlers.push(callback); // Add to handlers
+                        }
+                        return clickPromise; // Allow chaining
+                    },
+                };
+
+                button.onclick = () => {
+                    handlers.forEach((handler) => handler(dialog)); // Call all registered handlers
+                };
+
+                dialog.buttons[key] = clickPromise; // Assign the "fake" promise
+            }
+
+            buttonContainer.appendChild(button);
+            buttonContainer.style.justifyContent = align;
+        });
+    };
+
+    const fetchAndInsertContent = async () => {
+        const originalCursor = document.body.style.cursor;
+        document.body.style.cursor = 'wait';
+        const dynamicContent = dialogElement.querySelector(".APX-dialog-dynamic-content");
+        
+        try {
+            triggerEvent('contentLoading');
+            await dialog.lifecycle.contentLoading;
+
+            const contentHtml = contentURI
+                ? await fetchContent(contentURI)
+                : content;
+
+            dynamicContent.innerHTML = contentHtml;
+
+            triggerEvent('contentLoaded');
+            await dialog.lifecycle.contentLoaded;
+        } catch (error) {
+            console.error('Error loading content:', error);
+        } finally {
+            document.body.style.cursor = originalCursor;
+        }
+    };
+
+    const fetchContent = async (uri) => {
+        const response = await fetch(uri);
+        if (!response.ok) throw new Error(`Failed to fetch content: ${response.statusText}`);
+        return response.text();
+    };
+
+    // Initialize dialog
+    setDialogSize();
+    addButtons();
+
+    // Set title and close button handler
+    dialogElement.querySelector(".APX-dialog-title").textContent = title;
+    dialogElement.querySelector('.APX-close-dialog').onclick = dialog.close;
+
+    return dialog;
+};
+
+export default createDialog;

package/modules/dialog/html/dialog.html

@@ -0,0 +1,8 @@
+<div class="APX-dialog">
+    <div class="APX-dialog-content">
+        <span class="APX-close-dialog">&times;</span>
+        <h2 class="APX-dialog-title"></h2>
+        <div class="APX-dialog-dynamic-content"></div>
+        <div class="APX-dialog-button-container"></div>
+    </div>
+</div>

package/modules/listen/listen.mjs

@@ -0,0 +1,166 @@
+let counter = 0;
+const doCallbacks = {};
+const timeouts = {};
+
+/**
+ * This function adds an event listener to the elements and returns an object with a do method to add callback functions.
+ * @param {Object} apx - The apx object to augment with the listen function.
+ * @returns {Object} - The augmented apx object.
+ */
+export default function (apx) {
+    let elements = apx.elements;
+
+    /**
+     * Adds an event listener to the elements and returns an object with a do method to add callback functions.
+     * @param {string} eventType - The type of event to listen for (e.g. 'click', 'keydown', etc.).
+     * @param {string} [selector] - The CSS selector to use for event delegation (optional).
+     * @returns {Object} - An object with a do method to add callback functions.
+     * @example
+     * apx.listen('click', '.my-button').do((event) => {
+     *   console.log('Button clicked!', event.target);
+     * });
+     */
+    apx.listen = function (eventTypes, secondArgument, thirdArgument) {
+        let selector;
+        let options = {};
+        // Determine if the second argument is a selector or options
+        if (typeof secondArgument === 'string') {
+            selector = secondArgument;
+            options = thirdArgument || {};
+        } else {
+            options = secondArgument || {};
+        }
+
+        const uniqueId = generateUniqueId();
+        const timeoutDuration = options.timeout || 0;
+        
+        if (!Array.isArray(eventTypes)) {
+            eventTypes = [eventTypes]; // Ensure eventTypes is an array
+        }
+        
+        eventTypes.forEach((eventType) => {
+            elements.forEach((element) => {
+                element.addEventListener(eventType, (event) => {
+                    executeCallbacks(event, uniqueId, timeoutDuration, selector, element);
+                });
+            });
+        });
+
+        return {
+            /**
+             * Adds a callback function to the doCallbacks object for the current event listener.
+             * @param {Function} doCallback - The callback function to execute when the event is triggered.
+             * @returns {Object} - Returns the current object to allow for chained calls.
+             * @example
+             * apx.listen('click', '.my-button').do((event) => {
+             *   console.log('Button clicked!', event.target);
+             * }).do((event) => {
+             *   console.log('Another callback function!');
+             * });
+             */
+            do: function (doCallback) {
+                if (!doCallbacks[uniqueId]) {
+                    doCallbacks[uniqueId] = [];
+                }
+                doCallbacks[uniqueId].push(doCallback);
+                return this; // Return the object to allow for chained calls
+            },
+        };
+    };
+
+    /**
+     * Manually triggers the registered callbacks for a given event type on all elements or creates a new event if a string is provided.
+     * @param {string|Event} event - The event to trigger. This can be an event type string (like 'click') or an actual Event object.
+     */
+    apx.trigger = function (event) {
+        let eventType;
+        if (typeof event === 'string') {
+            eventType = event;
+            event = new Event(event, { bubbles: true, cancelable: true });
+        } else if (event instanceof Event) {
+            eventType = event.type;
+        } else {
+            console.error('Invalid event type provided to apx.trigger. It must be either a string or Event object.');
+            return;
+        }
+
+        apx.elements.forEach((element) => {
+            element.dispatchEvent(event);  // This will allow the event to bubble up naturally.
+        });
+
+        // Handle event delegation manually by executing callbacks if the target matches the selector
+        Object.keys(doCallbacks).forEach((uniqueId) => {
+            const callbackDetails = doCallbacks[uniqueId];
+            if (callbackDetails && callbackDetails.eventType === eventType) {
+                // Check if the event target matches the selector used during listener registration
+                const { selector } = callbackDetails;
+                if (!selector || event.target.matches(selector)) {
+                    executeCallbacks(event, uniqueId, 0, selector, event.target);  // Immediate execution, no timeout
+                }
+            }
+        });
+    };
+    
+    return apx;
+};
+
+
+function executeCallbacks(event, uniqueId, timeoutDuration, selector = '', element) {
+    const matchedElement = selector ? closest(event.target, selector) : element;
+    if (!matchedElement) {
+        return;
+    }
+
+    // Clear any previous timeout for this uniqueId to prevent unintended behavior
+    clearTimeout(timeouts[uniqueId]);
+
+    // Function to handle the execution of callbacks
+    function handleCallbackExecution() {
+        if (doCallbacks[uniqueId]) {
+            doCallbacks[uniqueId].reduce((prevPromise, doCallback) => {
+                return prevPromise.then(() => {
+                    return new Promise((resolve, reject) => {
+                        try {
+                            const result = doCallback.bind(matchedElement)(event);
+                            if (result instanceof Promise) {
+                                result.then(resolve).catch(reject);
+                            } else {
+                                resolve(result);
+                            }
+                        } catch (error) {
+                            reject(error);
+                        }
+                    });
+                });
+            }, Promise.resolve()).catch(error => {
+                console.error('Error in callback chain:', error);
+            });
+        }
+    }
+
+    // Check if timeoutDuration is zero to decide whether to delay the callback execution or not
+    if (timeoutDuration === 0) {
+        handleCallbackExecution();
+    } else {
+        timeouts[uniqueId] = setTimeout(handleCallbackExecution, timeoutDuration);
+    }
+}
+
+
+function generateUniqueId() {
+    const randomPart = Math.random().toString(36).substr(2, 9); // More randomness
+    const uniqueId = `${Date.now()}_${randomPart}_${counter}`;
+    counter = (counter + 1) % 1000; // Reset counter to avoid overflow
+
+    return uniqueId;
+}
+
+function closest(element, selector) {
+    while (element && element.nodeType === 1) {
+        if (element.matches(selector)) {
+            return element;
+        }
+        element = element.parentNode;
+    }
+    return null;
+}

package/modules/tristate/README.md

@@ -0,0 +1,95 @@
+# APX Tri-State Checkbox Module
+
+The APX Tri-State Checkbox module provides an augmentation to the `APX` object. This functionality allows you to easily transform standard checkboxes within an `APX` object into tri-state checkboxes.
+
+## Installation
+
+Ensure you have the core `APX` object integrated into your project.
+
+Next, to use this augmentation, make sure you've imported and added the `tristate` module to your project:
+
+```javascript
+import APX from 'path-to-APX';
+// Assuming tristate is part of APX's module structure
+```
+
+Also, link the required CSS:
+
+```html
+<link rel="stylesheet" href="path-to-css/tristate.css">
+```
+
+## Usage
+
+To transform a group of checkboxes into tri-state checkboxes using the `APX` object, first create an `APX` object containing the checkboxes you wish to transform, then simply call the `tristate` method:
+
+```javascript
+const myApxCheckboxes = APX('.my-checkbox-class');
+myApxCheckboxes.tristate();
+```
+
+### Parameters
+
+The `tristate` method accepts an `options` parameter which can have the following properties:
+
+- `size`: An object that defines the `width` and `height` of the tri-state checkbox.
+  - `width`: Width of the checkbox in pixels (e.g., `50` for 50px width).
+  - `height`: Height of the checkbox in pixels.
+  
+- `classes`: A string or an array of strings representing classes to be added to the custom checkbox. The string can contain class names separated by spaces or commas.
+
+- `defaultState`: A string that defines the default state of the tri-state checkbox. Possible values are 'checked', 'unchecked', and 'crossed'.
+
+- `callbacks`: An object that contains callback functions.
+  - `after`: A function that is called after the tri-state checkbox is created.
+  - `change`: A function that is called when the tri-state checkbox state changes.
+
+- `bubbleEvents`: A boolean that determines whether events (`click`, `keyup`, `change`) on the custom checkbox should bubble up to the original checkbox.
+
+Example:
+
+```javascript
+const options = {
+    size: {
+        width: 50,
+        height: 30
+    },
+    classes: 'myClass1 myClass2',
+    defaultState: 'checked',
+    callbacks: {
+        after: function(originalCheckbox, tristateDom, hiddenInput) {
+            console.log("Checkbox created!");
+        },
+        change: function(originalCheckbox, tristateDom, hiddenInput) {
+            console.log("Checkbox state changed!");
+        }
+    },
+    bubbleEvents: true
+};
+
+const myApxCheckboxes = APX('.my-checkbox-class');
+myApxCheckboxes.tristate(options);
+```
+
+## Features
+
+### Tri-State Logic
+
+The checkbox will cycle through three states:
+
+1. Checked (represented by a tick)
+2. Crossed (represented by a cross)
+3. Unchecked (default checkbox state)
+
+### Accessibility
+
+The tri-state checkbox retains the `tabIndex` property of the original checkbox, ensuring the accessibility of the control.
+
+### Event Bubbling
+
+Any `click`, `keyup`, or `change` events attached to the original checkbox will be bubbled up from the custom checkbox if the `bubbleEvents` option is set to true. This ensures that your existing event listeners will still work as expected and that custom callbacks can also be executed.
+
+
+## License
+
+Copyright Appius SARL

package/modules/tristate/css/tristate.css

@@ -0,0 +1,25 @@
+.apx-tristate {
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    min-width:13px;
+    min-height:13px;
+    background-size: contain;
+    background-color: white;
+    border-radius:3px;
+}
+.apx-tristate.unchecked {
+    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20%20fill%3D%22%23cccccc%22%20d%3D%22M25.107%2032.030h-18.214c-3.456%200-6.268-2.81-6.268-6.264v-19.529c0-3.456%202.812-6.268%206.268-6.268h18.214c3.456%200%206.268%202.812%206.268%206.268v19.529c0%203.452-2.812%206.264-6.268%206.264zM6.893%201.85c-2.419%200-4.386%201.967-4.386%204.386v19.529c0%202.417%201.967%204.382%204.386%204.382h18.214c2.419%200%204.386-1.965%204.386-4.382v-19.529c0-2.419-1.967-4.386-4.386-4.386h-18.214z%22%3E%3C/path%3E%3C/svg%3E');
+}
+.apx-tristate.checked {
+    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705zM5.313%2017.587l7.039%206.839%2013.831-13.439-2.636-2.561-10.929%2010.62-4.442-4.317-2.862%202.858z%22%3E%3C/path%3E%3C/svg%3E');
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.apx-tristate.crossed {
+    background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705z%22%20fill%3D%22%23f00%22%2F%3E%3Cpath%20d%3D%22m8%208%2016%2016%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M24%208L8%2024%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E');
+    background-repeat: no-repeat;
+    background-position: center;
+}

package/modules/tristate/tristate.mjs

@@ -0,0 +1,172 @@
+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();
+    }
+}