src/StartPlatz/Bundle/StyleBundle/Resources/views/Bootstrap4/_javascript.ajax-helpers.html.twig line 1

Open in your IDE?
  1. <style>
  2.     [data-template] {
  3.         display: none;
  4.     }
  6.     [data-filtered-out-by] {
  7.         display: none;
  8.     }
  9. </style>
  10. <script type="text/javascript">
  11.     "use strict";
  13.     if (window.ajaxHelpers) {
  14.         throw Error('Ajax helpers loaded multiple times.');
  15.     }
  17.     /*
  18.     * maps toast types to their html classes
  19.     */
  20.     const toastClasses = {
  21.         ERROR: 'ajax-toast-error',
  22.         SUCCESS: 'ajax-toast-success'
  23.     };
  25.     /*
  26.     * Reads the data attributes
  27.     */
  28.     const readDataAttributes = function (elem) {
  29.         const outmap = {};
  30.         const attrs = elem.attributes;
  31.         for (let i = 0; i < attrs.length; i++) {
  32.             outmap[attrs[i].name] = attrs[i].value;
  33.         }
  34.         return outmap;
  35.     };
  37.     /* 
  38.     * Converts from a snake_case string to regex that matches _MACRO_CASE
  39.     * Importantly, the regex will have three capture groups, one just before the match, the match, and one just after
  40.     * e.g. varName -> _VAR_NAME
  41.     */
  42.     const toVarReg = function (str) {
  43.         const reg = '\\b_' + camelToSnake(str).toUpperCase() + '\\b';
  44.         return new RegExp(reg, 'g');
  45.     };
  47.     /* 
  48.     * Projections that can be called from data-use or before actions are taken
  49.     * e.g. <input type="checkbox" data-on-change="..." data-use="checked|toBool" />
  50.     * e.g. <input type="checkbox" data-on-ajax-success="toSuccessToast|addToast" />
  51.     */
  52.     const projections = {};
  53.     projections.not = (val) => !val;
  54.     projections.toBool = function (val) {
  55.         const res = val === "on" || val === "true" || val === 1 || val === true;
  56.         return res;
  57.     };
  58.     projections.toValue = (inputEvent) => inputEvent.target.value;
  59.     projections.toSetUnset = function (val) {
  60.         if (typeof val !== 'boolean') {
  61.             val = projections.toBool(val);
  62.         }
  63.         if (val) {
  64.             return "set";
  65.         }
  66.         return "unset";
  67.     };
  68.     projections.falseyToNullString = (str) => str || 'null';
  69.     projections.toData = function (val) {
  70.         if (typeof val === 'string') {
  71.             return val;
  72.         }
  73.         if (typeof val === 'object') {
  74.             if (val.length != null) {
  75.                 // Typical jQuery response (data, textStatus, request) or (request, textStatus, errorThrown)
  76.                 if (typeof val[2] === 'string' && val[2]) {
  77.                     return val[2];
  78.                 }
  79.                 if (typeof val[0] === 'string' && val[0]) {
  80.                     return val[0];
  81.                 }
  82.             }
  83.         }
  84.         return null;
  85.     };
  86.     projections.toHeaderNotice = function (val) {
  87.         if (typeof val === 'object' && val.length != null) {
  88.             let xhr;
  89.             if (val[0] && val[0].getResponseHeader) {
  90.                 xhr = val[0];
  91.             } else if (val[2] && val[2].getResponseHeader) {
  92.                 xhr = val[2];
  93.             }
  94.             if (xhr != null && xhr.getResponseHeader('X-Notice')) {
  95.                 return xhr.getResponseHeader('X-Notice');
  96.             }
  97.         }
  98.         return null;
  99.     };
  100.     projections.toMessage = function (val) {
  101.         if (typeof val === 'string') {
  102.             return val;
  103.         }
  104.         const hNotice = projections.toHeaderNotice(val);
  105.         if (hNotice != null) {
  106.             return hNotice;
  107.         }
  108.         if (typeof val === 'object') {
  109.             if (val.length != null) {
  110.                 // Typical jQuery response (data, textStatus, request) or (request, textStatus, errorThrown)
  111.                 if (typeof val[0] === 'object'
  112.                     && val[0].responseText) {
  113.                     return val[0].responseText;
  114.                 }
  115.                 if (typeof val[2] === 'string' && val[2]) {
  116.                     return val[2];
  117.                 }
  118.                 if (typeof val[0] === 'string' && val[0]) {
  119.                     return val[0];
  120.                 }
  121.                 if (val[1] === 'error') {
  122.                     return 'Error: Unable to connect to server.';
  123.                 }
  124.                 if (typeof val[1] === 'string' && val[1]) {
  125.                     return val[1];
  126.                 }
  127.             }
  128.             /* Here we could further expand on our standard success/error message format.
  129.             E.g.
  130.                 if (val[0].message) { val.message; }
  131.                 if (val[0].success) { "Success"; }
  132.                 if (val[0].error) { "Error"; }
  133.             */
  134.         }
  135.         return null; // Null/undefined messages will get ignored
  136.     }
  137.     projections.toErrorToast = function (val) {
  138.         let message = projections.toMessage(val);
  139.         if (message == null) {
  140.             message = 'Error';
  141.         }
  142.         return {
  143.             message: message,
  144.             className: toastClasses.ERROR
  145.         };
  146.     }
  147.     projections.toSuccessToast = function (val) {
  148.         let message = projections.toMessage(val);
  149.         if (message == null) {
  150.             message = 'Success';
  151.         }
  152.         return {
  153.             message: message,
  154.             className: toastClasses.SUCCESS
  155.         };
  156.     }
  157.     projections.toStyledToast = function (val) {
  158.         // If is ajax response
  159.         let non200 = false;
  160.         if (typeof val === 'object' && val[0] != null && val[0].status != null) {
  161.             non200 = val[0].status < 200 || val[0].status >= 300;
  162.         }
  163.         let message = projections.toMessage(val);
  164.         if (message == null) {
  165.             return null;
  166.         } // Pass nulls through
  167.         let className = '';
  168.         const lowercase = message.toLowerCase();
  169.         if (non200 || lowercase.startsWith('error') || lowercase.startsWith('internal server error')) {
  170.             className = toastClasses.ERROR;
  171.         } else if (lowercase.startsWith('success')) {
  172.             className = toastClasses.SUCCESS;
  173.         }
  174.         return {
  175.             message: message,
  176.             className: className
  177.         };
  178.     }
  179.     projections.encodeURI = function (val) {
  180.         return encodeURIComponent(val);
  181.     };
  183.     const applyProjections = function (inVal, selectedProjections) {
  184.         return selectedProjections.reduce(function (val, projection) {
  185.             if (!(projection in projections)) {
  186.                 throw Error('Invalid data- projection: '
  187.                     + projection
  188.                     + '. Available projections: '
  189.                     + Object.keys(projections).join(', ')
  190.                 );
  191.             }
  192.             // Run the value through the projection
  193.             return projections[projection](val);
  194.         }, inVal);
  195.     };
  197.     {# /*
  198.     * Convert a kebab-case string to a camelCase one
  199.     * e.g. class-name -> className
  200.     *      inner-html -> innerHTML
  201.     *      namespace-uri -> namespaceURI
  202.     */ #}
  203.     const kebabToCamel = function (str) {
  204.         const acronyms = ['html', 'uri'];
  205.         const parts = str.split('-');
  206.         const tail = parts.slice(1).map(function (t) {
  207.             if (t === '') {
  208.                 return t;
  209.             }
  210.             if (t in acronyms) {
  211.                 return t.toUpperCase();
  212.             }
  213.             return t.charAt(0).toUpperCase() + t.slice(1);
  214.         });
  215.         return parts[0] + tail.join('');
  216.     };
  218.     {# /*
  219.     * Convert a camelCase string to a kebab-case one
  220.     * e.g. className -> class-name
  221.     *      innerHTML -> inner-html
  222.     *      namespaceURI -> namespace-uri
  223.     */ #}
  224.     const camelToKebab = function (str) {
  225.         return str.replace(/([a-z][A-Z])/g, function (_match, p1) {
  226.             return p1.charAt(0) + '-' + p1.charAt(1);
  227.         }).toLowerCase();
  228.     };
  230.     {# /* 
  231.     * Converts kebab-case strings to snake_case ones
  232.     * e.g. class-name -> class_name
  233.     */ #}
  234.     const kebabToSnake = function (str) {
  235.         return str.replace(/\-/g, '_');
  236.     }
  238.     {# /*
  239.     * Convert a camelCase string to a snake_case one
  240.     * e.g. className -> class_name
  241.     *      innerHTML -> inner_html
  242.     *      namespaceURI -> namespace_uri
  243.     */ #}
  244.     const camelToSnake = function (str) {
  245.         return kebabToSnake(camelToKebab(str));
  246.     };
  248.     {# /*
  249.     * Convert all keys of an objects keys to another case
  250.     * e.g. { className: 'someVal' } -> { class_name: 'someVal' }
  251.     */ #}
  252.     const convertObjCase = function (obj, conversion) {
  253.         return Object.keys(obj).reduce(function (newObj, key) {
  254.             newObj[conversion(key)] = obj[key];
  255.             return newObj;
  256.         }, {});
  257.     };
  259.     const parseAction = function (actionNames, actions, attr) {
  260.         const reducedActions = actionNames.split(',').reduce(function (projectedActions, actionName) {
  261.             actionName = actionName.trim();
  262.             if (!actionName) {
  263.                 return  projectedActions;
  264.             }
  265.             const parts = actionName.split('|');
  266.             const name = parts[parts.length - 1]; // Select the last one
  267.             const action = actions[name]
  268.             if (!action) {
  269.                 console.error('Error in data-on-: action "' + name + '" doesn\'t exist! Available actions: ' + Object.keys(actions));
  270.                 return projectedActions;
  271.             }
  273.             const projections = parts.slice(0, -1);
  275.             let usableAttr = attr;
  276.             if (!usableAttr) {
  277.                 usableAttr = 'data-for-' + camelToKebab(name);
  278.             }
  279.             const newProjectedAction = function (e, elem, ctx, eventHandlers) {
  280.                 const attrs = readDataAttributes(elem);
  281.                 const primaryArg = attrs[usableAttr];
  283.                 const updatedPrimary = applyProjections(primaryArg || e, projections);
  284.                 const newPrimaryArg = actionArgs(name, elem, updatedPrimary, attrs);
  285.                 action(newPrimaryArg, elem, ctx, eventHandlers);
  286.             };
  288.             // Check if we should create a toast element
  289.             return projectedActions.concat(newProjectedAction);
  290.         }, []);
  292.         // Return the object
  293.         return function (primaryArg, elem, ctx, eventHandlers) {
  294.             reducedActions.forEach(function (action) {
  295.                 action(primaryArg, elem, ctx, eventHandlers);
  296.             });
  297.         };
  298.     }
  300.     {# /* 
  301.     * Extract data from attributes and element to send to server
  302.     * If you want to request the url https://example.com/add/234
  303.     * You can use the element attributes:
  304.     *       data-on-change-get="https://example.com/_ID" 
  305.     *       data-add-id="234" 
  306.     * Similarly you can use "data-use" to extract something from the element itself:
  307.     *       data-on-change-get="https://example.com/_PROP/_VALUE" 
  308.     *       data-use="value" 
  309.     *       data-use-as-prop="innerHTML" 
  310.     * Finally, if the context is of type form, then the inputs will be read (name / value)
  311.     * and used as a basis for the context
  312.     */ #}
  313.     const getContextData = function (elem) {
  314.         const attrs = readDataAttributes(elem);
  315.         let initialContext = {}
  316.         if (elem.tagName === 'FORM') {
  317.             initialContext = $(elem) // Select the form
  318.                 .serializeArray() //  Serialize inputs
  319.                 .reduce((iCtx, nameVal) => {
  320.                     iCtx[nameVal.name] = nameVal.value;
  321.                     return iCtx;
  322.                 }, {}); // Convert array to obj
  323.         }
  324.         return Object.keys(attrs).reduce(function (data, key) {
  325.             if (key.indexOf('data-use') === 0) {
  326.                 const propParts = attrs[key].split('|');
  327.                 const prop = propParts[0]; // property name
  328.                 const selProjections = propParts.slice(1); // selected projections
  329.                 let varName = prop;
  330.                 if (key.indexOf('data-use-as-') === 0) { // Use an alias
  331.                     varName = key.replace(/^data\-use\-as\-/, '');
  332.                     varName = kebabToCamel(varName);
  333.                 } else if (key !== 'data-use') {
  334.                     throw Error('Invalid data-use property: ' + key);
  335.                 }
  336.                 if (!(prop in elem)) {
  337.                     throw Error('Invalid data-use value: ' + prop);
  338.                 }
  340.                 // Apply all projections
  341.                 const val = applyProjections(elem[prop], selProjections);
  343.                 return writeVar(data, varName, val);
  344.             }
  345.             if (key.indexOf('data-add-') === 0) {
  346.                 let varName = key.replace(/^data\-add\-/, '');
  347.                 const value = attrs[key];
  348.                 varName = kebabToCamel(varName);
  349.                 return writeVar(data, varName, value);
  350.             }
  351.             return data;
  352.         }, initialContext);
  353.     };
  355.     const writeVar = (data, varName, val) => {
  356.         const locationChain = varName.split(/[\[\]]/).filter((t) => t);
  357.         const updatedData = Object.assign({}, data);
  358.         let currentLevel = updatedData;
  359.         locationChain.forEach((name, index) => {
  360.             if (index === locationChain.length-1) {
  361.                 currentLevel[name] = val;
  362.                 return;
  363.             }
  364.             if (!currentLevel[name]) {
  365.                 currentLevel[name]={};
  366.             } else {
  367.                 currentLevel[name]=Object.assign({}, currentLevel[name]);
  368.             }
  369.             currentLevel = currentLevel[name];
  370.         });
  371.         return updatedData;
  372.     }
  374.     /* 
  375.     * "Enhance" the URL by replacing parts of the URL
  376.     * If you want to request the URL https://example.com/add/234
  377.     * You can used the context: { id: 234 }, and URL: https://example.com/add/_ID
  378.     */
  379.     const formatURL = function (url, data) {
  380.         return Object.keys(data).reduce(function (url, key) {
  381.             let val = data[key];
  382.             if (typeof val !== 'string') {
  383.                 val = JSON.stringify(val);
  384.             }
  385.             const newURL = url.replace(toVarReg(key), encodeURIComponent(val));
  386.             return newURL;
  387.         }, url);
  388.     }
  390.     /* 
  391.     * Instantiate a template by replacing parameters in the URL
  392.     * If you want the html: <div>Your ID is: 123</div>
  393.     * You can used the context: { id: 123 }, and template string: "<div>Your ID is: _ID</div>"
  394.     */
  395.     const formatHTML = function (html, data) {
  396.         return Object.keys(data).reduce(function (html, key) {
  397.             let val = data[key];
  398.             if (typeof val !== 'string') {
  399.                 val = JSON.stringify(val);
  400.             }
  401.             const newHTML = html.replace(toVarReg(key), val);
  402.             return newHTML;
  403.         }, html);
  404.     }
  406.     {# /* 
  407.     * Prepares the argument(s) to be passed to actions 
  408.     * When calling actions, often all you need is a single argument and some context
  409.     * However, sometimes you need more than one argument. 
  410.     * This can be accomplished by adding more properties. 
  411.     * E.g. data-for-create-elem-to="..." data-for-create-elem-insert-by=""
  412.     */ #}
  413.     const actionArgs = function (actionName, elem, primaryValue, attrs) {
  414.         const dataFor = 'data-for-' + camelToKebab(actionName) + '-';
  415.         const dataForLen = dataFor.split('-').length - 1;
  416.         const otherKeys = Object.keys(attrs)
  417.             .filter((t) => t.startsWith('data-for-'))
  418.             .map((t) => {
  419.                 if (t.startsWith(dataFor)) {
  420.                     return {attr: t, rep: dataFor};
  421.                 }
  422.                 // Allow for * matches
  423.                 const matchStart = t.split('-').slice(0, dataForLen).join('-');
  424.                 const regex = new RegExp(matchStart.replaceAll('*', '[\\w|-|\\*]*') + '-?');
  425.                 return {attr: t, rep: regex};
  426.             })
  427.             .filter((t) => dataFor.match(t.rep));
  429.         if (otherKeys.length === 0) {
  430.             return primaryValue;
  431.         }
  432.         const args = {0: primaryValue};
  433.         for (let i = 0; i < otherKeys.length; i++) {
  434.             const attrRep = otherKeys[i];
  435.             const shortName = attrRep.attr.replace(attrRep.rep, '');
  436.             const camelName = shortName === '' ? 0 : kebabToCamel(shortName);
  437.             args[camelName] = attrs[attrRep.attr];
  438.         }
  439.         if (Object.keys(args).length === 1 && args[0] != null) {
  440.             return args[0];
  441.         }
  442.         return args;
  443.     };
  445.     {# /* 
  446.     * Creates an event handler for secondary events (e.g. response, ajax-success, ajax-error).
  447.     * It returns a function that receives one (or more) arguments, 
  448.     * and wraps it with the other arguments provided.
  449.     * This allows us to bind to an event like: 
  450.     *   $.get(...).done(secondaryHandler(actionName, elem, _ctx, _eventHandlers))
  451.     */ #}
  452.     const secondaryHandler = function (actionName, elem, ctx, eventHandlers) {
  453.         return function () {
  454.             const action = eventHandlers[actionName];
  455.             if (!action) {
  456.                 return;
  457.             }
  459.             let wrappedVal = arguments;
  460.             if (arguments.length <= 1) {
  461.                 wrappedVal = arguments[0];
  462.             }
  464.             return action(wrappedVal, elem, ctx, eventHandlers);
  465.         };
  466.     }
  468.     const getChangeClassOptions = function (arg, elem, actionName) {
  469.         if (typeof arg === 'string') {
  470.             if (!arg) {
  471.                 throw new Error('Invalid action ' + actionName + ', class name is empty!');
  472.             }
  473.             return {operateOn: elem, className: arg};
  474.         }
  475.         if (arg.select && !$(arg.select)[0]) {
  476.             throw new Error('Invalid action '
  477.                 + actionName
  478.                 + ', selected element (from data-for-*-select: '
  479.                 + arg.select
  480.                 + ') doesn\'t exist!');
  481.         }
  482.         return {
  483.             operateOn: arg.select || elem,
  484.             className: arg[0]
  485.         };
  486.     }
  488.     {# /*
  489.     * Virtual Filter - Decide what should be filtered without modifying the DOM
  490.     * returns attributes to be set or removed 
  491.     */ #}
  492.     const filterAttr = 'data-filtered-out-by';
  493.     const vFilter = function (options, elem) {
  494.         if (typeof options !== 'object') {
  495.             throw Error('Invalid filter action. No named arguments (' + options + ') specified. Did you forget a "data-for-filter-by" attribute?');
  496.         }
  497.         const filterValue = options[0] || options.value;
  498.         const name = options.name || 'general';
  499.         const select = options.select || $(elem).children();
  500.         const by = options.by;
  501.         if (!by && options.byText == null) {
  502.             throw Error('Invalid filter action. No filterBy specified. Did you forget a "data-for-filter-by" attribute?');
  503.         }
  505.         const totalList = $(select);
  506.         const startVisibleLength = totalList.toArray().filter(t => !t.hasAttribute(filterAttr)).length;
  508.         // The filter is being cleared
  509.         if (!filterValue) {
  510.             const setRemove = totalList.toArray().reduce((setRem, item) => {
  511.                 const names = item.getAttribute(filterAttr);
  512.                 if (names == null) {
  513.                     return setRem;
  514.                 }
  515.                 const newNames = names.split(',').filter((t) => t !== name);
  516.                 if (newNames.length === 0) {
  517.                     setRem.remove = setRem.remove.concat({attr: filterAttr, item: item});
  518.                     return setRem;
  519.                 }
  520.                 setRem.set = setRem.set.concat({attr: filterAttr, item: item, value: newNames.join(','), isNew: false});
  521.                 return setRem;
  522.             }, {remove: [], set: []});
  523.             return {
  524.                 totalLength: totalList.length,
  525.                 setRemove: setRemove,
  526.                 startVisibleLength: startVisibleLength,
  527.             };
  528.         }
  530.         // The filter should be added or removed
  531.         let match = 'like';
  532.         const matchFunctions = {
  533.             startsWith: (q, v) => v.startsWith(q),
  534.             like: (q, v) => v.includes(q),
  535.             exact: (q, v) => q === v,
  536.             gt: (q, v) => q > v,
  537.             gte: (q, v) => q >= v,
  538.             lt: (q, v) => q < v,
  539.             lte: (q, v) => q <= v
  540.         };
  541.         const matchOptions = {
  542.             like: options.like,
  543.             exact: options.exact,
  544.             gt: options.gt,
  545.             gte: options.gte,
  546.             lt: options.lt,
  547.             lte: options.lte,
  548.             startsWith: options.startsWith
  549.         };
  550.         const activeMatchOptions = Object.keys(matchOptions).filter((t) => matchOptions[t] != null);
  551.         if (activeMatchOptions.length > 1) {
  552.             throw Error('Invalid filter action. Conflicting match options (' + activeMatchOptions.join(', ') + ')');
  553.         }
  554.         if (activeMatchOptions.length === 1) {
  555.             match = activeMatchOptions[0];
  556.         }
  557.         const lowerFilterValue = options.asInt != null
  558.             ? parseInt(filterValue, 10)
  559.             : filterValue.toLowerCase();
  561.         const setRemove = totalList.toArray().reduce((setRem, item) => {
  562.             let itemVal;
  563.             if (options.byText == null) {
  564.                 const itemCtx = getContextData(item);
  565.                 if (itemCtx[by] == null) {
  566.                     throw Error('Filter error. Item (' + item.outerHTML + ') is missing data context attribute ' + by + '. Did you forget a "data-add-" attribute?');
  567.                 }
  568.                 itemVal = itemCtx[by].toLowerCase();
  569.             } else {
  570.                 itemVal = $(item).text().toLowerCase();
  571.             }
  573.             const names = item.getAttribute(filterAttr);
  574.             if (!matchFunctions[match](lowerFilterValue, itemVal)) {
  575.                 const isNew = names == null;
  576.                 const oldNames = isNew ? [] : names.split(',');
  577.                 if (oldNames.includes(name)) {
  578.                     return setRem;
  579.                 }
  580.                 const newNames = oldNames.concat(name);
  581.                 setRem.set = setRem.set.concat({attr: filterAttr, item: item, value: newNames.join(','), isNew: isNew});
  582.                 return setRem;
  583.             } else {
  584.                 if (names == null) {
  585.                     return setRem;
  586.                 }
  587.                 const newNames = names.split(',').filter((t) => t !== name);
  588.                 if (newNames.length === 0) {
  589.                     setRem.remove = setRem.remove.concat({attr: filterAttr, item: item});
  590.                     return setRem;
  591.                 }
  592.                 setRem.set = setRem.set.concat({attr: filterAttr, item: item, value: newNames.join(','), isNew: false});
  593.                 return setRem;
  594.             }
  595.         }, {set: [], remove: []});
  597.         return {
  598.             totalLength: totalList.length,
  599.             setRemove: setRemove,
  600.             startVisibleLength: startVisibleLength,
  601.         };
  602.     };
  605.     // Primary HTML Events we can listen for
  606.     const events = ['change', 'click', 'mouseover', 'mouseenter', 'mouseout', 'input', 'submit'];
  608.     {# /* 
  609.     * Actions we can take
  610.     * Each action must handle both it's primary duty (e.g. a get request), 
  611.     * and calling secondary event handlers (e.g. the on response event)
  612.     */ #}
  613.     const actions = {};
  615.     actions.call = function (arg, elem, ctx, eventHandlers) {
  616.         if (typeof arg !== 'string') {
  617.             throw Error('No function specified for action call (' + JSON.stringify(arg) + '). Did you forget a "data-for-call" attribute?');
  618.         }
  619.         arg.split(',').forEach((arg) => {
  620.             const funcName = arg.trim();
  621.             if (!funcName) {
  622.                 return;
  623.             }
  625.             // Call globally defined function
  626.             window[funcName]({arg: arg, elem: elem});
  627.         });
  628.     };
  629.     actions.confirm = function (arg, elem, ctx, eventHandlers) {
  630.         // Confirm is synchronous
  631.         if (confirm(arg)) {
  632.             secondaryHandler('confirmed', elem, ctx, eventHandlers)(arg);
  633.             return;
  634.         }
  635.         // Else
  636.         secondaryHandler('not-confirmed', elem, ctx, eventHandlers)(arg);
  637.     };
  638.     actions.consoleLog = function (arg, elem, ctx, eventHandlers) {
  639.         console.log('Log', {
  640.             arg: arg,
  641.             elem: elem,
  642.             ctx: ctx,
  643.             eventHandlers: eventHandlers
  644.         });
  645.     };
  646.     const debounceTimers = {}; // These are global 
  647.     actions.debounce = function (args, elem, ctx, eventHandlers) {
  648.         let name = 'default';
  649.         let time = 1500; // default to 1.5s
  650.         if (typeof args === 'object') {
  651.             name = args.name || elem.getAttribute('id') || elem.getAttribute('name') || name;
  652.             time = args.time || time;
  653.         }
  654.         clearTimeout(debounceTimers[name]);
  655.         debounceTimers[name] = setTimeout(secondaryHandler('debounced', elem, ctx, eventHandlers), time);
  656.     };
  657.     actions.disableInput = function(args, elem, ctx, eventHandlers) { 
  658.         let select = args;
  659.         if (typeof select !== 'string') {
  660.             if (inputTagNames.includes(elem.tagName) || ['BUTTON', 'SUBMIT'].includes(elem.tagName)) {
  661.                 select = elem;
  662.             } else {
  663.                 throw Error('Invalid action disableInput. No selector specified. Did you forget a data-for-disable-input?');
  664.             }
  665.         }
  666.         $(select).prop('disabled', true);
  667.     };
  668.     actions.enableInput = function(args, elem, ctx, eventHandlers) { 
  669.         let select = args;
  670.         if (typeof select !== 'string') {
  671.             if (inputTagNames.includes(elem.tagName) || ['BUTTON', 'SUBMIT'].includes(elem.tagName)) {
  672.                 select = elem;
  673.             } else {
  674.                 throw Error('Invalid action enableInput. No selector specified. Did you forget a data-for-enable-input attribute?');
  675.             }
  676.         }
  677.         $(select).prop('disabled', false);
  678.     };
  679.     actions.get = function (args, elem, ctx, eventHandlers) {
  680.         if (!args) {
  681.             throw Error('No arguments found for ajax get. Did you forget a "data-for-get" attribute?');
  682.         }
  683.         const url = typeof args === 'string' ? args : (args[0] || args.url);
  684.         if (!url) {
  685.             throw Error('No URL found for ajax get. Did you forget a "data-for-get" attribute?');
  686.         }
  688.         const accept = args.accept || 'text/plain';
  689.         $.ajax({
  690.             method: 'get',
  691.             url: formatURL(url, ctx),
  692.             headers: {Accept: accept}
  693.         }).done(secondaryHandler('ajax-success', elem, ctx, eventHandlers))
  694.             .fail(secondaryHandler('ajax-error', elem, ctx, eventHandlers))
  695.             .always(secondaryHandler('response', elem, ctx, eventHandlers));
  696.     };
  697.     actions.post = function (args, elem, ctx, eventHandlers) {
  698.         if (!args) {
  699.             throw Error('No arguments found for ajax post. Did you forget a "data-for-post" attribute?');
  700.         }
  701.         const url = typeof args === 'string' ? args : (args[0] || args.url);
  702.         if (!url) {
  703.             throw Error('No URL found for ajax post. Did you forget a "data-for-post" attribute?');
  704.         }
  706.         const accept = args.accept || 'text/plain';
  707.         const reqData = ctx;
  708.         $.ajax({
  709.             method: 'POST',
  710.             url: url,
  711.             data: reqData,
  712.             headers: {Accept: accept}
  713.         }).done(secondaryHandler('ajax-success', elem, ctx, eventHandlers))
  714.             .fail(secondaryHandler('ajax-error', elem, ctx, eventHandlers))
  715.             .always(secondaryHandler('response', elem, ctx, eventHandlers));
  716.     };
  717.     actions.toggleModal = function(args, elem, _ctx, _eventHandlers) {
  718.         let modal = elem;
  719.         if (args && typeof args === 'string') {
  720.             modal = args;
  721.         }
  722.         $(args).modal('toggle');
  723.     };
  724.     actions.showModal = function(args, elem, _ctx, _eventHandlers) {
  725.         let modal = elem;
  726.         if (args && typeof args === 'string') {
  727.             modal = args;
  728.         }
  729.         $(args).modal('show');
  730.     };
  731.     actions.hideModal = function(args, elem, _ctx, _eventHandlers) {
  732.         let modal = elem;
  733.         if (args && typeof args === 'string') {
  734.             modal = args;
  735.         }
  736.         $(args).modal('hide');
  737.     };
  738.     actions.toggleClass = function (args, elem, _ctx, _eventHandlers) {
  739.         const options = getChangeClassOptions(args, elem, 'toggleClass');
  740.         $(options.operateOn).toggleClass(options.className);
  741.     };
  742.     actions.addClass = function (args, elem, _ctx, _eventHandlers) {
  743.         const options = getChangeClassOptions(args, elem, 'addClass');
  744.         $(options.operateOn).addClass(options.className);
  745.     };
  746.     actions.removeClass = function (args, elem, _ctx, _eventHandlers) {
  747.         const options = getChangeClassOptions(args, elem, 'removeClass');
  748.         $(options.operateOn).removeClass(options.className);
  749.     };
  750.     actions.addToast = function (message, elem, _ctx, _eventHandlers) {
  751.         if (!message) {
  752.             return;
  753.         }
  754.         addToast(message);
  755.     };
  756.     actions.removeEl = function (selector, elem, _ctx, _eventHandlers) {
  757.         $(selector || elem).remove();
  758.     };
  759.     actions.createEl = function (toFrom, elem, ctx, _eventHandlers) {
  760.         let to;
  761.         let from;
  762.         let id;
  763.         let template;
  764.         if (typeof toFrom === "string") {
  765.             from = $(toFrom);
  766.         } else {
  767.             from = $(toFrom.from || toFrom[0]);
  768.             to = toFrom.to;
  769.             id = toFrom.id;
  770.             template = toFrom.template;
  771.         }
  773.         if ((!from || from.length == 0) && !template) {
  774.             throw Error('No template found for createEl. Did you forget a "data-for-create-el" attribute?');
  775.         }
  777.         // It's possible that data-for-create-el-from is set
  778.         //  and not data-for-create-el-to
  779.         if (!to || to.length == 0) {
  780.             if (from) {
  781.                 to = $(from).parent(); // Default to parent of template
  782.             } else {
  783.                 to = $(elem).parent(); // Default to parent of calling
  784.             }
  785.         }
  787.         // Read Template 
  788.         const html = template || from.html();
  789.         if (!html.trim()) {
  790.             throw Error('No template found for createEl. Targeted element is empty!');
  791.         }
  792.         const formattedElements = $.parseHTML(formatHTML(html, ctx));
  794.         // We can insert in a particular place
  795.         const insertBy = toFrom.insertBy || toFrom.byInv;
  796.         if (toFrom.insertFirst != null) {
  797.             if (insertBy) {
  798.                 throw Error('Invalid data-for(s) for createEl. You cannot specify both "insert-first" and "insert-by".');
  799.             }
  800.             $(to).prepend(formattedElements);
  801.             return;
  802.         }
  803.         if (insertBy) {
  804.             // Search for an element
  805.             const valueToInsert = ctx[insertBy];
  806.             if (valueToInsert == null) {
  807.                 throw Error('Insert by property (' + insertBy + ') isn\'t present in the current context! Did you for get a data-add or data-use?');
  808.             }
  809.             const children = $(to).children().toArray();
  811.             // If the insertion is inverted
  812.             let comp = function (a, b) {
  813.                 return a > b;
  814.             };
  815.             if (toFrom.insertByInv) {
  816.                 comp = function (a, b) {
  817.                     return a < b;
  818.                 };
  819.             }
  821.             const insertBefore = children.find((elem) => {
  822.                 const elemCtx = getContextData(elem);
  823.                 // This comparison should (mostly) work for strings and numbers.
  824.                 return elemCtx[toFrom.insertBy] != null && comp(elemCtx[toFrom.insertBy].toLowerCase(), valueToInsert.toLowerCase());
  825.             });
  827.             // If we find a place to insert, insert it
  828.             if (insertBefore != null) {
  829.                 $(formattedElements).id = id;
  830.                 $(formattedElements).insertBefore(insertBefore);
  831.                 return;
  832.             }
  833.         }
  834.         // Insert at end of target's children
  835.         $(to).append(formattedElements);
  836.     };
  837.     actions.updateEl = function (selected, elem, ctx, _eventHandlers) {
  838.         selected = selected || elem;
  839.         if ($(selected).length === 0) {
  840.             throw Error('Invalid updateEl action. Element to update (' + selected + ') not found.');
  841.         }
  842.         selected = $(selected);
  843.         const template = selected.attr('data-render-template');
  844.         if (template == null || $(template).length === 0) {
  845.             throw Error(
  846.                 'Invalid updateEl action. Template (' + template + ') not found. '
  847.                 + 'Does this element have a "data-render-template" attribute?'
  848.             );
  849.         }
  850.         const html = $(template).html().trim();
  851.         const oldContext = getContextData(selected[0]);
  852.         const newContext = Object.assign(oldContext, ctx);
  853.         // Render to the target
  854.         const formattedHTML = formatHTML(html, newContext)
  855.         const formattedElements = $.parseHTML(formattedHTML);
  857.         // Update the context / attributes
  858.         // As long as we're rending to the same typeof object, we can just update it
  859.         if (selected[0].type === formattedElements[0].type) {
  860.             const oldAttrs = readDataAttributes(selected[0]);
  861.             const newAttrs = readDataAttributes(formattedElements[0]);
  862.             selected[0].innerHTML = formattedElements[0].innerHTML;
  863.             // Remove Old
  864.             Object.keys(oldAttrs).forEach(function (key) {
  865.                 if (newAttrs[key] != null) {
  866.                     return;
  867.                 }
  868.                 // These keys are held over
  869.                 if (key === 'id' || key === 'data-render-template') {
  870.                     return;
  871.                 }
  872.                 selected.removeAttr(key);
  873.             });
  874.             // Add new
  875.             Object.keys(newAttrs).forEach(function (key) {
  876.                 selected.attr(key, newAttrs[key]);
  877.             });
  878.         } else { // Here we actually just replace the element
  879.             selected[0].outerHTML = formattedHTML;
  880.         }
  881.     };
  882.     actions.freshEl = function (args, elem, ctx, _eventHandlers) {
  883.         let responseOrHTML = args;
  884.         if (args[0] != null && args.length == null && typeof args !== 'string') {
  885.             responseOrHTML = args[0];
  886.         }
  887.         const html = projections.toData(responseOrHTML);
  888.         const createArgs = Object.assign(args, {template: html});
  889.         actions.createEl(createArgs, elem, ctx, _eventHandlers);
  890.     };
  891.     actions.refreshEl = function (args, elem, ctx, _eventHandlers) {
  892.         let responseOrHTML = args;
  893.         let target = elem;
  894.         if (args.select != null) {
  895.             responseOrHTML = args[0];
  896.             target = $(args.select)[0];
  897.         }
  898.         const html = projections.toData(responseOrHTML);
  899.         target.outerHTML = html;
  900.     };
  901.     actions.grayOut = function (sel, elem, ctx, _eventHandlers) {
  902.         let target = elem;
  903.         if (typeof sel === 'string') {
  904.             target = $(sel)[0] || elem;
  905.         }
  906.         $(target).addClass('grayout');
  907.         $('input, textarea, select', target).prop('disabled', true);
  908.         $('label, [role="button"]', target).addClass('disabled');
  909.     };
  910.     actions.filter = function (options, elem, ctx, _eventHandlers) {
  911.         // Get info on what should be modified
  912.         const filterData = vFilter(options, elem).setRemove;
  913.         // Set the attributes
  914.         filterData.set.forEach((s) => {
  915.             s.item.setAttribute(s.attr, s.value);
  916.         });
  917.         // Remove the attributes
  918.         filterData.remove.forEach((r) => {
  919.             r.item.removeAttribute(r.attr);
  920.         });
  921.     };
  922.     actions.sendForm = function (arg, elem, ctx, eventHandlers) {
  923.         let options = {};
  924.         if (arg != null) {
  925.             if (arg instanceof Event) {
  926.                 arg.preventDefault();
  927.             } else if (arg[0] instanceof Event && !arg.allowDefault) {
  928.                 arg.preventDefault();
  929.                 options = arg;
  930.             }
  931.         }
  932.         const method = (options.method || elem.getAttribute('method') || 'get').toLowerCase();
  933.         const action = options.action || elem.getAttribute('action') || window.location.href;
  934.         if (method === 'get') {
  935.             actions.get(action, elem, ctx, eventHandlers);
  936.         } else {
  937.             actions.post(action, elem, ctx, eventHandlers);
  938.         }
  939.         // Call secondary event handler for submit
  940.         secondaryHandler('form-sent', elem, ctx, eventHandlers)(arg);
  941.     };
  942.     actions.validateForm = function (arg, elem, ctx, eventHandlers) {
  943.         let target = elem;
  944.         if (arg != null) {
  945.             if (arg instanceof Event) {
  946.                 arg.preventDefault();
  947.             } else if (arg[0] instanceof Event && !arg.allowDefault) {
  948.                 arg.preventDefault();
  949.             }
  950.             if (typeof arg === 'string') {
  951.                 target = $(arg)[0];
  952.             } else if (arg.select != null) {
  953.                 target = $(arg.select)[0];
  954.             }
  955.         }
  956.         if (target.checkValidity()) {
  957.             secondaryHandler('valid', elem, ctx, eventHandlers)(arg);
  958.             return;
  959.         }
  960.         secondaryHandler('invalid', elem, ctx, eventHandlers)(arg);
  961.     };
  962.     actions.showFormValidation = function (arg, elem, ctx, eventHandlers) {
  963.         let target = $(elem);
  964.         if (arg != null) {
  965.             if (typeof arg === 'string') {
  966.                 target = $(arg)[0];
  967.             } else if (arg.select != null) {
  968.                 target = $(arg.select)[0];
  969.             }
  970.         }
  971.         $(target).addClass('was-validated');
  972.     };
  973.     actions.resetForm = function (arg, elem, ctx, eventHandlers) {
  974.         let target = elem;
  975.         if (arg != null) {
  976.             if (typeof arg === 'string') {
  977.                 target = $(arg)[0];
  978.             } else if (arg.select != null) {
  979.                 target = $(arg.select)[0];
  980.             }
  981.         }
  982.         if (!target || !target.reset) {
  983.             throw Error('Invalid resetForm action. Target element ' + (target && target.tagName) + ' is not a form and cannot be reset.');
  984.         }
  985.         target.reset();
  986.         $(target).removeClass('was-validated');
  987.     }
  988.     actions.fireTrigger = function (arg, elem, ctx, eventHandlers) {
  989.         const name = arg;
  990.         const triggerActions = triggers[name];
  991.         if (!triggerActions) {
  992.             throw Error('Invalid trigger action. Trigger (' + name + ') not found in: ' + Object.keys(triggers).join(', '));
  993.         }
  994.         for(let i = 0; i < triggerActions.length; i++) {
  995.             const ta= triggerActions[i];
  996.             const context = getContextData(ta.elem);
  997.             ta.action(null, ta.elem, context, ta.moreEvents);
  998.         }
  999.     }
  1000.     let triggers = {};
  1002.     {# /*
  1003.     * Here is the code for actually showing toasts on screen
  1004.     */ #}
  1005.     const toastQueues = {}; // Keep track of our queues
  1006.     const displayToastFor = 5000; // Five seconds
  1007.     const nextToasts = function (next) {
  1008.         if (next.queue.length === 0) { // Begin hiding the toast
  1009.             return;
  1010.         }
  1011.         let message = next.queue.shift();
  1012.         let className = '';
  1013.         if (typeof message === 'object') {
  1014.             className = message.className || '';
  1015.             message = message.message;
  1016.         }
  1017.         next.slots--;
  1019.     // create toast container on the fly
  1020.         if (!toastContainer) { createToastContainer(); }
  1021.         // Set message and show
  1022.         const newToast = createToastElement(message, className);
  1023.         $(newToast).css('opacity', 0);
  1024.         $(newToast).css('display', 'block');
  1025.         toastContainer.appendChild(newToast);
  1026.         setTimeout(() => {
  1027.             $(newToast).css('opacity', 1);
  1028.         }, 100);
  1030.         setTimeout(function () {
  1031.             $(newToast).css('opacity', 0);
  1032.             setTimeout(function () {
  1033.                 toastContainer.removeChild(newToast);
  1034.             }, 500); // transition time
  1035.             next.slots++;
  1036.             nextToasts(next);
  1037.         }, displayToastFor);
  1038.     };
  1039.     const addToast = function (message) {
  1040.         let queueName = 'info';
  1041.         if (typeof message === 'object' && message.className) {
  1042.             queueName = message.className;
  1043.         }
  1044.         if (!toastQueues[queueName]) {
  1045.             toastQueues[queueName] = {
  1046.                 queue: [],
  1047.                 slots: 3,
  1048.             };
  1049.         }
  1050.         const next = toastQueues[queueName];
  1051.         next.queue.push(message);
  1052.         // Only start if it isn't already processing enough
  1053.         if (next.slots > 0) {
  1054.             nextToasts(next);
  1055.         }
  1056.     };
  1057.     let toastContainer = null;
  1058.     const createToastContainer = function () {
  1059.         if (toastContainer != null) {
  1060.             return;
  1061.         }
  1062.         toastContainer = document.createElement('div');
  1063.         toastContainer.setAttribute('class', 'ajax-toast-container');
  1064.         document.body.appendChild(toastContainer);
  1065.     };
  1066.     const createToastElement = function (message, className) {
  1067.         const el = document.createElement('div');
  1068.         el.setAttribute('role', 'alert');
  1069.         el.setAttribute('aria-live', 'assertive');
  1070.         el.setAttribute('aria-atomic', 'true');
  1071.         el.setAttribute('class', 'ajax-toast ' + className);
  1072.         el.innerHTML = message;
  1073.         return el;
  1074.     };
  1076.     {#
  1077.     // As action x events need to be searched for to be bound,
  1078.     // and searching for them might cause some performance issues, 
  1079.     // only use these shortcuts, the rest can use normal syntax
  1080.     #}
  1081.     const commonPrimaryActions = [
  1082.         {event: 'click', attr: 'data-on-click-confirm', act: 'confirm'},
  1083.         {event: 'click', attr: 'data-on-click-get', act: 'get'},
  1084.         {event: 'click', attr: 'data-on-click-post', act: 'post'},
  1085.         {event: 'click', attr: 'data-on-click-add-class', act: 'addClass'},
  1086.         {event: 'click', attr: 'data-on-click-remove-class', act: 'removeClass'},
  1087.         {event: 'click', attr: 'data-on-click-toggle-class', act: 'toggleClass'},
  1088.         {event: 'click', attr: 'data-on-click-show-modal', act: 'showModal'},
  1089.         {event: 'click', attr: 'data-on-click-hide-modal', act: 'hideModal'},
  1090.         {event: 'click', attr: 'data-on-click-toggle-modal', act: 'toggleModal'},
  1091.         {event: 'click', attr: 'data-on-click-create-el', act: 'createEl'},
  1092.         {event: 'click', attr: 'data-on-click-update-el', act: 'updateEl'},
  1093.         {event: 'click', attr: 'data-on-click-fire-trigger', act: 'fireTrigger'},
  1094.         {event: 'change', attr: 'data-on-change-get', act: 'get'},
  1095.         {event: 'change', attr: 'data-on-change-post', act: 'post'},
  1096.         {event: 'change', attr: 'data-on-change-toggle-class', act: 'toggleClass'},
  1097.         {event: 'change', attr: 'data-on-change-add-class', act: 'addClass'},
  1098.         {event: 'change', attr: 'data-on-change-remove-class', act: 'removeClass'},
  1099.         {event: 'change', attr: 'data-on-change-create-el', act: 'createEl'},
  1100.         {event: 'change', attr: 'data-on-change-update-el', act: 'updateEl'},
  1101.         {event: 'change', attr: 'data-on-change-fire-trigger', act: 'fireTrigger'},
  1102.         {event: 'submit', attr: 'data-on-submit-confirm', act: 'confirm'},
  1103.     ];
  1104.     const commonSecondaryActions = [
  1105.         {event: 'response', attr: 'data-on-response-update-el', act: 'updateEl'},
  1106.         {event: 'response', attr: 'data-on-response-toast', act: 'toStyledToast|addToast'},
  1107.         {event: 'response', attr: 'data-on-response-header-toast', act: 'toHeaderNotice|toStyledToast|addToast'},
  1108.         {event: 'ajax-success', attr: 'data-on-ajax-success-fresh-el', act: 'freshEl'},
  1109.         {event: 'ajax-success', attr: 'data-on-ajax-success-refresh-el', act: 'refreshEl'},
  1110.         {event: 'ajax-success', attr: 'data-on-ajax-success-fire-trigger', act: 'fireTrigger'},
  1111.         {event: 'ajax-fail', attr: 'data-on-ajax-fail-toast', act: 'toErrorToast|addToast'},
  1112.     ];
  1113.     // Events that can happen as a result of something else
  1114.     const secondaryEvents = ['response', 'ajax-success', 'ajax-error', 'form-sent', 'debounced', 'confirmed', 'not-confirmed', 'valid', 'invalid'];
  1115.     const allSecondaryActions = commonSecondaryActions.concat(secondaryEvents.map(function (eventName) {
  1116.         return {event: eventName, attr: 'data-on-' + eventName, act: null};
  1117.     }));
  1119.     {# /* 
  1120.     * Parses the secondary events from the attributes and turns them 
  1121.     * map a functions that can be called
  1122.     * e.g. data-on-response="get" -> { 'on-response': function(...) { ... } }
  1123.     */ #}
  1124.     const getSecondaryEvents = function (elem) {
  1125.         const attrs = readDataAttributes(elem);
  1126.         return allSecondaryActions.reduce(function (eventMap, eventActionPair) {
  1127.             if (attrs[eventActionPair.attr] == null) {
  1128.                 return eventMap;
  1129.             }
  1130.             const eventName = eventActionPair.event;
  1131.             let actionNames = eventActionPair.act;
  1133.             // If not a shortcut
  1134.             if (!actionNames) {
  1135.                 actionNames = attrs[eventActionPair.attr];
  1136.             }
  1137.             if (!actionNames) {
  1138.                 return eventMap;
  1139.             }
  1140.             const parsed = parseAction(actionNames, actions, eventActionPair.act && eventActionPair.attr);
  1141.             let newAction = parsed;
  1142.             const oldAction = eventMap[eventName];
  1143.             if (oldAction) {
  1144.                 newAction = (e, elem, ctx, eventHandlers) => {
  1145.                     parsed(e, elem, ctx, eventHandlers);
  1146.                     oldAction(e, elem, ctx, eventHandlers);
  1147.                 };
  1148.             }
  1149.             eventMap[eventName] = newAction;
  1150.             return eventMap;
  1151.         }, {});
  1152.     };
  1154.     const attrActionEvents = commonPrimaryActions.concat(
  1155.         events.map(function (e) {
  1156.             // Formal def (e.g. data-on-click="get" data-for-get="...")
  1157.             return {event: e, attr: 'data-on-' + e, act: null};
  1158.         })
  1159.     );
  1161.     const primarySel = attrActionEvents.map(function (t) {
  1162.         return '[' + t.attr + ']';
  1163.     }).concat('[data-ajax]').join(', ');
  1165.     let mutationObserver;
  1166.     const bindToDOMChanges = function (onNodesAdded) {
  1167.         if (mutationObserver) {
  1168.             mutationObserver.disconnect();
  1169.             mutationObserver = null;
  1170.         }
  1172.         // Options for the observer (which mutations to observe)
  1173.         const config = {attributes: false, childList: true, subtree: true};
  1175.         // Callback function to execute when mutations are observed
  1176.         const callback = function (mutationsList, observer) {
  1177.             let changed = [];
  1178.             for (let i = 0; i < mutationsList.length; i++) {
  1179.                 const mutation = mutationsList[i];
  1180.                 if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
  1181.                     changed = changed.concat(
  1182.                         $(mutation.addedNodes).add(primarySel, mutation.addedNodes).toArray()
  1183.                     );
  1184.                 }
  1185.             }
  1187.             // Remove duplicates
  1188.             changed = changed.filter(function (elem, index, self) {
  1189.                 return self.indexOf(elem) === index;
  1190.             });
  1191.             onNodesAdded(changed);
  1192.         };
  1194.         // Create an observer instance linked to the callback function
  1195.         mutationObserver = new MutationObserver(callback);
  1197.         // Start observing the target node for configured mutations
  1198.         mutationObserver.observe(document, config);
  1199.     };
  1201.     const inputTagNames = ['TEXTAREA', 'INPUT', 'SELECT']
  1202.     const bindToEvents = function (elements) {
  1203.         // By default don't create the toast element
  1204.         elements = $(elements);
  1205.         elements.each(function (_index, elem) {
  1207.             // We're only able to bind to elements
  1208.             if (elem.nodeType !== Node.ELEMENT_NODE) {
  1209.                 return;
  1210.             }
  1212.             const moreEvents = getSecondaryEvents(elem);
  1213.             
  1214.             // Iterate through action-event pairings, find elements, and bind to them
  1215.             for (let i = 0; i < attrActionEvents.length; i++) {
  1216.                 const attrActEv = attrActionEvents[i];
  1218.                 // If the element doesn't have the attribute, it's a pass
  1219.                 if (!elem.hasAttribute(attrActEv.attr)) {
  1220.                     continue;
  1221.                 }
  1223.                 const eventName = attrActEv.event;
  1224.                 const attrName = attrActEv.attr;
  1225.                 let actionNames = attrActEv.act;
  1227.                 // If this is a "normal" binding (e.g. data-on-change="post"), lookup the action name
  1228.                 if (actionNames == null) {
  1229.                     actionNames = elem.getAttribute(attrName);
  1230.                 }
  1232.                 // Action not found
  1233.                 if (actionNames == null) {
  1234.                     console.error("No action found to call when binding to event: " + attrName, elem);
  1235.                     continue;
  1236.                 }
  1237.                 const parsedAction = parseAction(actionNames, actions, attrActEv.act && attrName);
  1239.                 // If someone tries to listen to changes in an empty <span>, error 
  1240.                 // If someone tries to listen to changes in a <span> with <inputs> inside,
  1241.                 // bind to each input
  1242.                 let elems = $(elem);
  1243.                 let formContext = false;
  1244.                 if (['change', 'input'].includes(eventName) && !inputTagNames.includes(elem.tagName)) {
  1245.                     elems = $(inputTagNames.join(', '), elem);
  1246.                     if (elems.length === 0) {
  1247.                         console.error('Attempted to bind to input event:',
  1248.                             eventName + '.',
  1249.                             'With an element (',
  1250.                             elem.tagName,
  1251.                             ') that isn\'t an input, and does\'t have any child inputs.',
  1252.                             elem);
  1253.                         return;
  1254.                     }
  1255.                     formContext = true;
  1256.                 }
  1258.                 // We might listen to more than one element
  1259.                 elems.each(function (_in, childElem) {
  1260.                     // Bind to a primary event - add an event listener
  1261.                     childElem.addEventListener(eventName, function (e) {
  1262.                         let context = getContextData(elem);
  1263.                         // If we've bound to a different element that was included in the attribute
  1264.                         // Apply that child's properties on top of ours
  1265.                         if (childElem !== elem) {
  1266.                             const addContext = getContextData(childElem);
  1267.                             context = Object.assign(context, addContext);
  1268.                         }
  1269.                         parsedAction(e, elem, context, moreEvents);
  1270.                     });
  1272.                     // By default remove browser cached values on input
  1273.                     if ((inputTagNames.includes(childElem.tagName))
  1274.                         && !childElem.hasAttribute('data-no-reset')
  1275.                         && !elem.hasAttribute('data-no-reset')) {
  1276.                         switch (childElem.tagName) {
  1277.                             case 'SELECT':
  1278.                                 let index = $('option', childElem).toArray().findIndex((t) => t.hasAttribute('selected'));
  1279.                                 if (index < 0) {
  1280.                                     index = null;
  1281.                                 }
  1282.                                 childElem.selectedIndex = index;
  1283.                                 break;
  1284.                             default:
  1285.                                 if (['checkbox', 'radio'].includes(childElem.type)) {
  1286.                                     childElem.checked = childElem.hasAttribute('checked');
  1287.                                 } else {
  1288.                                     childElem.value = childElem.getAttribute('value');
  1289.                                 }
  1290.                                 break;
  1291.                         }
  1292.                     }
  1293.                 });
  1294.                 if ('FORM' === elem.tagName && !elem.hasAttribute('data-no-reset')) {
  1295.                     elem.reset();
  1296.                 }
  1297.             } 
  1298.             
  1299.             // Bind to triggers, they have 'dynamic' names
  1300.             const attrs = readDataAttributes(elem);
  1301.             const newTriggers = Object.keys(attrs)
  1302.                 .filter((name) => name.startsWith('data-on-trigger-'))
  1303.                 .map((attrName) => {
  1304.                     const parsed = parseAction(elem.getAttribute(attrName), actions, attrName);
  1305.                     const name = attrName.replace(/^data\-on\-trigger\-?/, '') || 'default';
  1306.                     return {
  1307.                         name: name,
  1308.                         action: parsed,
  1309.                         elem: elem,
  1310.                         moreEvents: moreEvents
  1311.                     };
  1312.                 });
  1313.             for (let i = 0; i < newTriggers.length; i++) {
  1314.                 const trigger = newTriggers[i];
  1315.                 const actionList = triggers[trigger.name] || [];
  1316.                 triggers[trigger.name] = actionList.concat(trigger);
  1317.             }
  1318.         });
  1319.     };
  1321.     // Bind to events in the whole document
  1322.     bindToEvents($(primarySel));
  1323.     // When there's additions to the DOM, bind to those too
  1324.     bindToDOMChanges(bindToEvents);
  1326.     // Export to allow testing/debugging
  1327.     window.ajaxHelpers = {
  1328.         kebabToSnake: kebabToSnake,
  1329.         kebabToCamel: kebabToCamel,
  1330.         camelToKebab: camelToKebab,
  1331.         bindToEvents: bindToEvents,
  1332.         toastContainer: toastContainer,
  1333.         applyProjections: applyProjections,
  1334.         actionArgs: actionArgs,
  1335.         vFilter: vFilter,
  1336.         filterAttr: filterAttr,
  1337.         projections: projections,
  1338.         formatURL: formatURL,
  1339.         formatHTML: formatHTML,
  1340.         getContextData: getContextData,
  1341.         readDataAttributes: readDataAttributes,
  1342.         createToastContainer: createToastContainer,
  1343.         createToastElement: createToastElement,
  1344.         addToast: addToast,
  1345.         toastClasses: toastClasses,
  1346.         triggers: triggers
  1347.     };
  1349.     // Can be used to post changes to single fields to the database. Made to post single fields like in allmeda_pages_set_toggle_ajax_with_data, also compatible with any ajax responding paths.
  1350.     function ajaxPostUpdate(pathUrl, id, field, action, sendToast = true) {
  1351.         $.ajax({
  1352.             url: pathUrl,
  1353.             method: 'Post',
  1354.             data: {
  1355.                 'id' : id,
  1356.                 'field' : field,
  1357.                 'action' : action,
  1358.             },
  1359.             headers: { 'Accept': 'application/json, text/plain' }
  1360.         }).done((data, textStatus, request) => {
  1361.             // Typical jQuery response (data, textStatus, request)
  1362.             if(sendToast) addToast(projections.toStyledToast([data, textStatus, request]));
  1363.             if (data && data.success && data.redirect) {
  1364.                 window.location.href = data.redirect;
  1365.             }
  1366.         })
  1367.             .fail((request, textStatus, errorThrown) => {
  1368.                 // Typical jQuery response (request, textStatus, errorThrown)
  1369.                if(sendToast) addToast(projections.toStyledToast([request, textStatus, errorThrown]));
  1370.             })
  1371.        if(sendToast) createToastContainer();
  1372.     }
  1373. </script>