{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-bp2019/src/client/reactive/components/rewritten/matches-in-shadow.js"],"names":["Morph","select","View","PausableLoop","ReactiveSelector","selectorByNode","node","constructor","MatchesInShadow","initialize","addEventListener","event","keyframeHack","registerButtons","evt","onDblClick","attachedCallback","detachedCallback","attributeChangedCallback","attrName","oldVal","newVal","notify","showElement","onKeyDown","onFirstButton","b","get","warn","matches","livelyPreMigrate","livelyMigrate","other","livelyInspect","contentNode","inspector","livelyPrepareSave","livelyExample","createElement","appendChild","domSelectors","selectorID","undefined","selector","view","styles","keyframes","head","key","createTextNode","targetElement","safeAdd","add","matchesSelector","inDOM","getRootNode","composed","document","removeElement","safeRemove","ensureRunning","stopMatchingDetectors","Set","removeObsoleteListeners","from","detector","delete","pause","stopMatchingLoop","__unload__"],"mappings":"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","file":"matches-in-shadow.js","sourcesContent":["\"enable aexpr\";\n\nimport Morph from 'src/components/widgets/lively-morph.js';\nimport select, { View} from 'active-group';\nimport { PausableLoop } from 'utils';\n\nclass ReactiveSelector {\n  static selectorByNode(node) {\n    return;\n  }\n  constructor() {\n    \n  }\n}\n\nexport default class MatchesInShadow extends Morph {\n  async initialize() {\n    this.windowTitle = \"MatchesInShadow\";\n    this.__selectorID__ = 1;\n    this.addEventListener('animationstart', event => {\n      if(event.animationName === 'MyKeyframes' || event.animationName === 'MyKeyframes2') {\n        event.selector = 'button:hover';\n        this.keyframeHack(event);\n      }\n    }, false);\n    this.registerButtons()\n\n    lively.html.registerKeys(this); // automatically installs handler for some methods\n    \n    lively.addEventListener(\"template\", this, \"dblclick\", \n      evt => this.onDblClick(evt))\n  }\n  attachedCallback() {\n    // lively.warn('ADDED')\n  }\n  detachedCallback() {\n    // lively.warn('REMOVED')\n  }\n  attributeChangedCallback(attrName, oldVal, newVal) {\n    // lively.warn('CHANGED ' + attrName, oldVal + ' -> ' + newVal);\n  }\n  keyframeHack(event) {\n    lively.notify(event.animationName, event.selector);\n    if (event.path && event.path[0]) {\n      lively.showElement(event.path[0])\n    }\n  }\n  \n  // this method is autmatically registered through the ``registerKeys`` method\n  onKeyDown(evt) {\n    lively.notify(\"Key Down!\" + evt.charCode)\n  }\n  \n  // this method is automatically registered as handler through ``registerButtons``\n  onFirstButton() {\n    lively.notify(\"hello\")\n    const b = this.get('#firstButton');\n    lively.warn('shadow match2?', b.matches('lively-window #firstButton'));\n  }\n\n  /* Lively-specific API */\n\n  livelyPreMigrate() {\n    // is called on the old object before the migration\n  }\n  \n  livelyMigrate(other) {\n    // whenever a component is replaced with a newer version during development\n    // this method is called on the new object during migration, but before initialization\n    this.someJavaScriptProperty = other.someJavaScriptProperty\n  }\n  \n  livelyInspect(contentNode, inspector) {\n    // do nothing\n  }\n  \n  livelyPrepareSave() {\n    \n  }\n  \n  async livelyExample() {\n    // this customizes a default instance to a pretty example\n    // this is used by the \n    this.style.backgroundColor = \"red\"\n    this.someJavaScriptProperty = 42;\n    const b = document.createElement('button');\n    b.innerHTML = 'Child'\n    b.id = 'button1';\n    b.addEventListener('click', evt => {\n      lively.warn('child match?', b.matches('lively-window #button1'));\n\n    })\n    this.appendChild(b)\n  }\n  \n  get domSelectors() {\n    return this._domSelectors = this._domSelectors || {\n      \n    };\n  }\n  // hasDOMSelectors() {}\n  \n  // #TODO: refactor to class/module\n  // \n  get selectorID() {\n    if(this.__selectorID__ === undefined) {\n      \n    }\n    return\n  }\n  select(selector) {\n    \n    const view = new View();\n    \n    // to Morph.select child elements\n    const styles = document.createElement('style');\n    const keyframes = document.createElement('style');\n    const head = this.shadowRoot;\n    \n    styles.type = keyframes.type = 'text/css';\n    head.appendChild(styles);\n    head.appendChild(keyframes);\n\n    let key = 'SelectorListener-' + this.__selectorID__++;\n    `@keyframes ${key} {\n      from { outline-color: #fff; }\n      to { outline-color: #000; }\n    }`\n    let node = document.createTextNode(`@keyframes ${key} {\n      from { perspective: 1px; }\n      to { perspective: 2px; }\n    }`);\n    keyframes.appendChild(node);\n    styles.sheet.insertRule(`${selector} {\n      animation-duration: 0.001s;\n      animation-name: ${key} !important;\n    }`, 0);\n\n    this.shadowRoot.addEventListener('animationstart', event => {\n      if(event.animationName === key) {\n        event.selector = selector;\n        if (event.path && event.path[0]) { // #TODO: use event.target\n          const targetElement = event.path[0];\n          view.safeAdd(targetElement);\n          \n          stopMatchingDetectors.add({\n            matchesSelector() {\n              const inDOM = targetElement.getRootNode({ composed: true }) === document;\n              // return inDOM && this.getAllSubmorphs(selector).includes(targetElement);\n              return inDOM && targetElement.matches(selector);\n            },\n            removeElement() { view.safeRemove(targetElement); }\n          });\n          stopMatchingLoop.ensureRunning();\n        }\n      }\n    }, false);\n\n    return view;\n  }\n}\n\n/**\n * chrome does not support the animationcancel event, so we have to resort back to other means, namely polling\n */\nconst stopMatchingDetectors = new Set();\n\nfunction removeObsoleteListeners() {\n  Array.from(stopMatchingDetectors).forEach(detector => {\n    if(!detector.matchesSelector()) {\n      detector.removeElement();\n      stopMatchingDetectors.delete(detector);\n    }\n  });\n  if(stopMatchingDetectors.size === 0) {\n    stopMatchingLoop.pause();\n  }\n}\n\nconst stopMatchingLoop = new PausableLoop(() => {\n  lively.warn('check stop matching (Morph)');\n  removeObsoleteListeners();\n});\n\n\nexport function __unload__() {\n  // styles.remove();\n  // keyframes.remove();\n  // roots.forEach(root => root.removeEventListener(startName, startEvent, false));\n  \n  stopMatchingLoop.pause();\n}\n"]}