{"version":3,"file":"cubism.min.js","sources":["../../../javascript/elements/index.js","../../../javascript/elements/cubicle.js","../../../../cable_ready/javascript/utils.js"],"sourcesContent":["/* global customElements */\n\nimport { Cubicle } from './cubicle'\n\nexport * from './cubicle'\n\ncustomElements.define('cubicle-element', Cubicle)\n","/* eslint-disable no-undef */\nimport CableReady, { SubscribingElement } from 'cable_ready'\nimport { debounce } from 'cable_ready/javascript/utils'\n\nexport class Cubicle extends SubscribingElement {\n  constructor () {\n    super()\n    const shadowRoot = this.attachShadow({ mode: 'open' })\n    shadowRoot.innerHTML = `\n<style>\n  :host {\n    display: block;\n  }\n</style>\n<slot></slot>\n`\n\n    this.triggerRoot = this\n    this.present = false\n  }\n\n  async connectedCallback () {\n    if (this.preview) return\n\n    this.appear = debounce(this.appear.bind(this), 50)\n\n    this.appearTriggers = this.getAttribute('appear-trigger')\n      ? this.getAttribute('appear-trigger').split(',')\n      : []\n    this.disappearTriggers = this.getAttribute('disappear-trigger')\n      ? this.getAttribute('disappear-trigger').split(',')\n      : []\n    this.triggerRootSelector = this.getAttribute('trigger-root')\n\n    this.consumer = await CableReady.cable.getConsumer()\n\n    this.channel = this.createSubscription()\n\n    this.appearanceIntersectionObserver = new IntersectionObserver(\n      (entries, observer) => {\n        entries.forEach(entry => {\n          if (entry.target !== this.triggerRoot) return\n          if (entry.isIntersecting) {\n            if (!this.present) {\n              this.appear()\n            }\n          } else {\n            if (this.present) {\n              this.disappear()\n            }\n          }\n        })\n      },\n      { threshold: 0 }\n    )\n\n    this.mutationObserver = new MutationObserver((mutationsList, observer) => {\n      if (this.triggerRootSelector) {\n        // eslint-disable-next-line no-unused-vars\n        for (const mutation of mutationsList) {\n          const root = document.querySelector(this.triggerRootSelector)\n          if (root) {\n            this.uninstall()\n            this.triggerRoot = root\n            this.install()\n          }\n        }\n      }\n      this.mutationObserver.disconnect()\n    })\n\n    this.mutationObserver.observe(document, {\n      subtree: true,\n      childList: true\n    })\n  }\n\n  disconnectedCallback () {\n    this.disappear()\n    super.disconnectedCallback()\n  }\n\n  install () {\n    if (this.appearTriggers.includes('connect')) {\n      this.appear()\n    }\n\n    this.appearTriggers\n      .filter(eventName => eventName === 'intersect')\n      .forEach(() => {\n        this.appearanceIntersectionObserver.observe(this.triggerRoot)\n      })\n\n    this.appearTriggers\n      .filter(eventName => eventName !== 'connect' && eventName !== 'intersect')\n      .forEach(eventName => {\n        this.triggerRoot.addEventListener(eventName, this.appear.bind(this))\n      })\n\n    this.disappearTriggers\n      .filter(\n        eventName => eventName !== 'disconnect' && eventName !== 'intersect'\n      )\n      .forEach(eventName => {\n        this.triggerRoot.addEventListener(eventName, this.disappear.bind(this))\n      })\n\n    this.disappearTriggers\n      .filter(eventName => eventName === 'intersect')\n      .forEach(() => {})\n  }\n\n  uninstall () {\n    this.appearTriggers\n      .filter(eventName => eventName === 'intersect')\n      .forEach(() => {\n        this.appearanceIntersectionObserver.unobserve(this.triggerRoot)\n      })\n\n    this.appearTriggers\n      .filter(eventName => eventName !== 'connect' && eventName !== 'intersect')\n      .forEach(eventName => {\n        this.triggerRoot.removeEventListener(eventName, this.appear.bind(this))\n      })\n\n    this.disappearTriggers\n      .filter(eventName => eventName === 'intersect')\n      .forEach(() => {})\n\n    this.disappearTriggers\n      .filter(\n        eventName => eventName !== 'disconnect' && eventName !== 'intersect'\n      )\n      .forEach(eventName => {\n        this.triggerRoot.removeEventListener(\n          eventName,\n          this.disappear.bind(this)\n        )\n      })\n  }\n\n  appear () {\n    if (this.channel) {\n      this.present = true\n      this.channel.perform('appear')\n    }\n  }\n\n  disappear () {\n    if (this.channel) {\n      this.present = false\n      this.channel.perform('disappear')\n    }\n  }\n\n  performOperations (data) {\n    if (data.cableReady) {\n      CableReady.perform(data.operations)\n    }\n  }\n\n  createSubscription () {\n    if (!this.consumer) {\n      console.error(\n        'The `cubicle-element` helper cannot connect without an ActionCable consumer.'\n      )\n      return\n    }\n\n    return this.consumer.subscriptions.create(\n      {\n        channel: this.channelName,\n        identifier: this.getAttribute('identifier'),\n        element_id: this.id,\n        scope: this.getAttribute('scope'),\n        exclude_current_user:\n          this.getAttribute('exclude-current-user') === 'true'\n      },\n      {\n        connected: () => {\n          this.install()\n        },\n        disconnected: () => {\n          this.disappear()\n          this.uninstall()\n        },\n        rejected: () => {\n          this.uninstall()\n        },\n        received: this.performOperations.bind(this)\n      }\n    )\n  }\n\n  get channelName () {\n    return 'Cubism::PresenceChannel'\n  }\n}\n","import { inputTags, textInputTypes } from './enums'\nimport ActiveElement from './active_element'\n\n// Indicates if the passed element is considered a text input.\n//\nconst isTextInput = element => {\n  return inputTags[element.tagName] && textInputTypes[element.type]\n}\n\n// Assigns focus to the appropriate element... preferring the explicitly passed selector\n//\n// * selector - a CSS selector for the element that should have focus\n//\nconst assignFocus = selector => {\n  const element =\n    selector && selector.nodeType === Node.ELEMENT_NODE\n      ? selector\n      : document.querySelector(selector)\n  const focusElement = element || ActiveElement.element\n  if (focusElement && focusElement.focus) focusElement.focus()\n}\n\n// Dispatches an event on the passed element\n//\n// * element - the element\n// * name - the name of the event\n// * detail - the event detail\n//\nconst dispatch = (element, name, detail = {}) => {\n  const init = { bubbles: true, cancelable: true, detail }\n  const event = new CustomEvent(name, init)\n  element.dispatchEvent(event)\n  if (window.jQuery) window.jQuery(element).trigger(name, detail)\n}\n\n// Accepts an xPath query and returns the element found at that position in the DOM\n//\nconst xpathToElement = xpath => {\n  return document.evaluate(\n    xpath,\n    document,\n    null,\n    XPathResult.FIRST_ORDERED_NODE_TYPE,\n    null\n  ).singleNodeValue\n}\n\n// Accepts an xPath query and returns all matching elements in the DOM\n//\nconst xpathToElementArray = (xpath, reverse = false) => {\n  const snapshotList = document.evaluate(\n    xpath,\n    document,\n    null,\n    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,\n    null\n  )\n  const snapshots = []\n\n  for (let i = 0; i < snapshotList.snapshotLength; i++) {\n    snapshots.push(snapshotList.snapshotItem(i))\n  }\n\n  return reverse ? snapshots.reverse() : snapshots\n}\n\n// Return an array with the class names to be used\n//\n// * names - could be a string or an array of strings for multiple classes.\n//\nconst getClassNames = names => Array.from(names).flat()\n\n// Perform operation for either the first or all of the elements returned by CSS selector\n//\n// * operation - the instruction payload from perform\n// * callback - the operation function to run for each element\n//\nconst processElements = (operation, callback) => {\n  Array.from(\n    operation.selectAll ? operation.element : [operation.element]\n  ).forEach(callback)\n}\n\n// convert string to kebab-case\n// most other implementations (lodash) are focused on camelCase to kebab-case\n// instead, this uses word token boundaries to produce readable URL slugs and keys\n// this implementation will not support Emoji or other non-ASCII characters\n//\nconst kebabize = createCompounder(function (result, word, index) {\n  return result + (index ? '-' : '') + word.toLowerCase()\n})\n\nfunction createCompounder (callback) {\n  return function (str) {\n    return words(str).reduce(callback, '')\n  }\n}\n\nconst words = str => {\n  str = str == null ? '' : str\n  return str.match(/([A-Z]{2,}|[0-9]+|[A-Z]?[a-z]+|[A-Z])/g) || []\n}\n\n// Provide a standardized pipeline of checks and modifications to all operations based on provided options\n// Currently skips execution if cancelled and implements an optional delay\n//\nconst operate = (operation, callback) => {\n  if (!operation.cancel) {\n    operation.delay ? setTimeout(callback, operation.delay) : callback()\n    return true\n  }\n  return false\n}\n\n// Dispatch life-cycle events with standardized naming\nconst before = (target, operation) =>\n  dispatch(\n    target,\n    `cable-ready:before-${kebabize(operation.operation)}`,\n    operation\n  )\n\nconst after = (target, operation) =>\n  dispatch(\n    target,\n    `cable-ready:after-${kebabize(operation.operation)}`,\n    operation\n  )\n\nfunction debounce (fn, delay = 250) {\n  let timer\n  return (...args) => {\n    const callback = () => fn.apply(this, args)\n    if (timer) clearTimeout(timer)\n    timer = setTimeout(callback, delay)\n  }\n}\n\nfunction handleErrors (response) {\n  if (!response.ok) throw Error(response.statusText)\n  return response\n}\n\nfunction safeScalar (val) {\n  if (\n    val !== undefined &&\n    !['string', 'number', 'boolean'].includes(typeof val)\n  )\n    console.warn(\n      `Operation expects a string, number or boolean, but got ${val} (${typeof val})`\n    )\n  return val != null ? val : ''\n}\n\nfunction safeString (str) {\n  if (str !== undefined && typeof str !== 'string')\n    console.warn(`Operation expects a string, but got ${str} (${typeof str})`)\n\n  return str != null ? String(str) : ''\n}\n\nfunction safeArray (arr) {\n  if (arr !== undefined && !Array.isArray(arr))\n    console.warn(`Operation expects an array, but got ${arr} (${typeof arr})`)\n  return arr != null ? Array.from(arr) : []\n}\n\nfunction safeObject (obj) {\n  if (obj !== undefined && typeof obj !== 'object')\n    console.warn(`Operation expects an object, but got ${obj} (${typeof obj})`)\n  return obj != null ? Object(obj) : {}\n}\n\nfunction safeStringOrArray (elem) {\n  if (elem !== undefined && !Array.isArray(elem) && typeof elem !== 'string')\n    console.warn(`Operation expects an Array or a String, but got ${elem} (${typeof elem})`)\n\n  return elem == null ? '' : Array.isArray(elem) ? Array.from(elem) : String(elem)\n}\n\nfunction fragmentToString (fragment) {\n  return new XMLSerializer().serializeToString(fragment)\n}\n\n// A proxy method to wrap a fetch call in error handling\n//\n// * url - the URL to fetch\n// * additionalHeaders - an object of additional headers passed to fetch\n//\nasync function graciouslyFetch (url, additionalHeaders) {\n  try {\n    const response = await fetch(url, {\n      headers: {\n        'X-REQUESTED-WITH': 'XmlHttpRequest',\n        ...additionalHeaders\n      }\n    })\n    if (response == undefined) return\n\n    handleErrors(response)\n\n    return response\n  } catch (e) {\n    console.error(`Could not fetch ${url}`)\n  }\n}\n\nclass BoundedQueue {\n  constructor (maxSize) {\n    this.maxSize = maxSize\n    this.queue = []\n  }\n\n  push (item) {\n    if (this.isFull()) {\n      // Remove the oldest item to make space for the new one\n      this.shift()\n    }\n    this.queue.push(item)\n  }\n\n  shift () {\n    return this.queue.shift()\n  }\n\n  isFull () {\n    return this.queue.length === this.maxSize\n  }\n}\n\nexport {\n  isTextInput,\n  assignFocus,\n  dispatch,\n  xpathToElement,\n  xpathToElementArray,\n  getClassNames,\n  processElements,\n  operate,\n  before,\n  after,\n  debounce,\n  handleErrors,\n  graciouslyFetch,\n  kebabize,\n  safeScalar,\n  safeString,\n  safeArray,\n  safeObject,\n  safeStringOrArray,\n  fragmentToString,\n  BoundedQueue\n}\n"],"names":["customElements","define","SubscribingElement","constructor","super","this","attachShadow","mode","innerHTML","triggerRoot","present","async","preview","appear","fn","delay","timer","args","clearTimeout","setTimeout","apply","debounce","bind","appearTriggers","getAttribute","split","disappearTriggers","triggerRootSelector","consumer","CableReady","cable","getConsumer","channel","createSubscription","appearanceIntersectionObserver","IntersectionObserver","entries","observer","forEach","entry","target","isIntersecting","disappear","threshold","mutationObserver","MutationObserver","mutationsList","mutation","root","document","querySelector","uninstall","install","disconnect","observe","subtree","childList","disconnectedCallback","includes","filter","eventName","addEventListener","unobserve","removeEventListener","perform","performOperations","data","cableReady","operations","subscriptions","create","channelName","identifier","element_id","id","scope","exclude_current_user","connected","disconnected","rejected","received","console","error"],"mappings":"oDAMAA,eAAeC,OAAO,kBCFf,cAAsBC,EAC3BC,cACEC,QACmBC,KAAKC,aAAa,CAAEC,KAAM,SAClCC,UAAY,4EASvBH,KAAKI,YAAcJ,KACnBA,KAAKK,SAAU,EAGjBC,0BACMN,KAAKO,UAETP,KAAKQ,OCyGT,SAAmBC,EAAIC,EAAQ,KAC7B,IAAIC,EACJ,MAAO,IAAIC,KAELD,GAAOE,aAAaF,GACxBA,EAAQG,YAFS,IAAML,EAAGM,MAAMf,KAAMY,IAETF,ID9GfM,CAAShB,KAAKQ,OAAOS,KAAKjB,MAAO,IAE/CA,KAAKkB,eAAiBlB,KAAKmB,aAAa,kBACpCnB,KAAKmB,aAAa,kBAAkBC,MAAM,KAC1C,GACJpB,KAAKqB,kBAAoBrB,KAAKmB,aAAa,qBACvCnB,KAAKmB,aAAa,qBAAqBC,MAAM,KAC7C,GACJpB,KAAKsB,oBAAsBtB,KAAKmB,aAAa,gBAE7CnB,KAAKuB,eAAiBC,EAAWC,MAAMC,cAEvC1B,KAAK2B,QAAU3B,KAAK4B,qBAEpB5B,KAAK6B,+BAAiC,IAAIC,sBACxC,CAACC,EAASC,KACRD,EAAQE,SAAQC,IACVA,EAAMC,SAAWnC,KAAKI,cACtB8B,EAAME,eACHpC,KAAKK,SACRL,KAAKQ,SAGHR,KAAKK,SACPL,KAAKqC,kBAKb,CAAEC,UAAW,IAGftC,KAAKuC,iBAAmB,IAAIC,kBAAiB,CAACC,EAAeT,KAC3D,GAAIhC,KAAKsB,oBAEP,IAAK,MAAMoB,KAAYD,EAAe,CACpC,MAAME,EAAOC,SAASC,cAAc7C,KAAKsB,qBACrCqB,IACF3C,KAAK8C,YACL9C,KAAKI,YAAcuC,EACnB3C,KAAK+C,WAIX/C,KAAKuC,iBAAiBS,gBAGxBhD,KAAKuC,iBAAiBU,QAAQL,SAAU,CACtCM,SAAS,EACTC,WAAW,KAIfC,uBACEpD,KAAKqC,YACLtC,MAAMqD,uBAGRL,UACM/C,KAAKkB,eAAemC,SAAS,YAC/BrD,KAAKQ,SAGPR,KAAKkB,eACFoC,QAAOC,GAA2B,cAAdA,IACpBtB,SAAQ,KACPjC,KAAK6B,+BAA+BoB,QAAQjD,KAAKI,gBAGrDJ,KAAKkB,eACFoC,QAAOC,GAA2B,YAAdA,GAAyC,cAAdA,IAC/CtB,SAAQsB,IACPvD,KAAKI,YAAYoD,iBAAiBD,EAAWvD,KAAKQ,OAAOS,KAAKjB,UAGlEA,KAAKqB,kBACFiC,QACCC,GAA2B,eAAdA,GAA4C,cAAdA,IAE5CtB,SAAQsB,IACPvD,KAAKI,YAAYoD,iBAAiBD,EAAWvD,KAAKqC,UAAUpB,KAAKjB,UAGrEA,KAAKqB,kBACFiC,QAAOC,GAA2B,cAAdA,IACpBtB,SAAQ,SAGba,YACE9C,KAAKkB,eACFoC,QAAOC,GAA2B,cAAdA,IACpBtB,SAAQ,KACPjC,KAAK6B,+BAA+B4B,UAAUzD,KAAKI,gBAGvDJ,KAAKkB,eACFoC,QAAOC,GAA2B,YAAdA,GAAyC,cAAdA,IAC/CtB,SAAQsB,IACPvD,KAAKI,YAAYsD,oBAAoBH,EAAWvD,KAAKQ,OAAOS,KAAKjB,UAGrEA,KAAKqB,kBACFiC,QAAOC,GAA2B,cAAdA,IACpBtB,SAAQ,SAEXjC,KAAKqB,kBACFiC,QACCC,GAA2B,eAAdA,GAA4C,cAAdA,IAE5CtB,SAAQsB,IACPvD,KAAKI,YAAYsD,oBACfH,EACAvD,KAAKqC,UAAUpB,KAAKjB,UAK5BQ,SACMR,KAAK2B,UACP3B,KAAKK,SAAU,EACfL,KAAK2B,QAAQgC,QAAQ,WAIzBtB,YACMrC,KAAK2B,UACP3B,KAAKK,SAAU,EACfL,KAAK2B,QAAQgC,QAAQ,cAIzBC,kBAAmBC,GACbA,EAAKC,YACPtC,EAAWmC,QAAQE,EAAKE,YAI5BnC,qBACE,GAAK5B,KAAKuB,SAOV,OAAOvB,KAAKuB,SAASyC,cAAcC,OACjC,CACEtC,QAAS3B,KAAKkE,YACdC,WAAYnE,KAAKmB,aAAa,cAC9BiD,WAAYpE,KAAKqE,GACjBC,MAAOtE,KAAKmB,aAAa,SACzBoD,qBACgD,SAA9CvE,KAAKmB,aAAa,yBAEtB,CACEqD,UAAW,KACTxE,KAAK+C,WAEP0B,aAAc,KACZzE,KAAKqC,YACLrC,KAAK8C,aAEP4B,SAAU,KACR1E,KAAK8C,aAEP6B,SAAU3E,KAAK4D,kBAAkB3C,KAAKjB,QA1BxC4E,QAAQC,MACN,gFA8BFX,kBACF,MAAO"}