@artisfy/inputjs

DESCRIPTION

This library handles input of data and syncs it with other element's data attributes.

EXAMPLE ORDER OF EVENTS

1. use switch.js to open an inline edit popover
2. data is synced from the source element to the popover (inputElementEventListener.js)
3. input is written and synced with a parent (inputElementEventListener.js)
4. choices are made and synced with a parent (choiceEventListener.js)
5. form is submitted and data is synced back to the source element (saveEventListener.js)

FILES AND THEIR RESPONSIBILITIES

• choiceEventListener.js
  • listens for click event on [data-i-key][data-i-value] elements and sets the value to a data attribute on a parent element
• createFlatObject.js
  • flattens a nested object/array into an object. duplicate keys are overwritten.
• fileUploadEventListener.js
  • handles ajax file upload of images to a popover inline edit area
• inboundDataSyncEventListener.js
  • this is weirdly named. when an inline edit popover is activated, this syncs the data from the source element to the popover's data
• index.js
  • initializes all the code. runs all the watch functions on page load.
• inputElementEventListener.js
  • syncs data from a text input to its parent component's data attribute
• optionsData.js
  • an empty object that can be loaded from any component here. it's loaded into init functions inside index.js
• onSave.js
  • stores functions passed into onSave() in an array. calls these functions whenever data is synced AND has been flagged as a save-worthy event. also contains a helper function callSaveFunction for manually triggering the save of an element.
• removeEventListener.js
  • listens for click on a [data-i-remove] element (which will be inside an inline edit popover) and removes the associated source element (i.e. the element that triggered and syncs with the popover)
• saveEventListener.js
  • listens for a submit event on a [data-i-sync] form (which will be inside an inline edit popover) and syncs the data from this form to the source element (i.e. the element that triggered and syncs with the popover)
• syncData.js
  • the most important functions in this library. syncDataToElement takes an object of flat data and syncs it to the data attributes of a passed in element. syncDataBetweenElements extracts the data from one element and syncs it to another element.
• watchHelpers.js
  • callMultipleWatchFunctions allows passing in elements with data-w attributes that can have special functions on them that need to be called every time their data is updated. these functions are also called inside syncDataToElement, which means the watch functions are all triggered whenever data is synced into their corresponding data attribute