{"version":3,"sources":["https://lively-kernel.org/lively4/swd21-particles/src/components/widgets/lively-change-indicator.js"],"names":["Morph","LivelyChangeIndicator","initialize","contentChangedDelay","update","debounce","getContent","element","getTargetElement","innerHTML","getContext","parentNode","querySelector","target","getAttribute","attachedCallback","startObserving","mutationObserver","disconnect","MutationObserver","mutations","observer","onMutation","observe","childList","subtree","characterData","attributes","forEach","record","indicator","style","backgroundColor","source","lastContent","contentChanged","updateChangeIndicator","reset","livelyExample","parent","parentElement","pane","appendChild"],"mappings":";;;;;;;;;;;;;;;AACOA,W;;;;;;;;;;;AAAAA,gD;;;;;;;AAEQ,YAAMC,qBAAN,SAAoCD,KAApC,CAA0C;AACvD,cAAME,UAAN,GAAmB;AACjB,eAAKC,mBAAL,GAA2B,CAAC,MAAM;AAChC,iBAAKC,MAAL;AACD,WAF0B,EAExBC,QAFwB,CAEf,IAFe,CAA3B;AAGD;;AAED;AACAC,qBAAa;AACX,cAAIC,UAAU,KAAKC,gBAAL,EAAd;AACA,iBAAOD,WAAWA,QAAQE,SAA1B;AACD;;AAEDC,qBAAa;AACX,iBAAO,KAAKC,UAAZ;AACD;;AAEDH,2BAAmB;AACjB,cAAID,UAAU,KAAKG,UAAL,EAAd;AACA,iBAAOH,WAAWA,QAAQK,aAAR,CAAsB,MAAM,KAAKC,MAAjC,CAAlB;AACD;;AAED,YAAIA,MAAJ,GAAa;AACX,iBAAO,KAAKC,YAAL,CAAkB,QAAlB,KAA+B,SAAtC;AACD;;AAEDC,2BAAmB;AACjB,cAAG,KAAKP,gBAAL,EAAH,EAA4B;AAC1B,iBAAKQ,cAAL;AACD;AACF;;AAEDA,yBAAiB;AACf,cAAI,KAAKC,gBAAT,EAA2B,KAAKA,gBAAL,CAAsBC,UAAtB;AAC3B,cAAIX,UAAU,KAAKC,gBAAL,EAAd;AACA,cAAI,CAACD,OAAL,EAAc;AACd,eAAKU,gBAAL,GAAwB,IAAIE,gBAAJ,CAAqB,CAACC,SAAD,EAAYC,QAAZ,KAAyB;AAClE,iBAAKC,UAAL,CAAgBF,SAAhB,EAA2BC,QAA3B;AACH,WAFuB,CAAxB;AAGA,eAAKJ,gBAAL,CAAsBM,OAAtB,CAA8BhB,OAA9B,EAAuC;AACrCiB,uBAAW,IAD0B;AAErCC,qBAAS,IAF4B;AAGrCC,2BAAe,IAHsB;AAIrCC,wBAAY,IAJyB,EAAvC;AAKD;;AAEDL,mBAAWF,SAAX,EAAsB;AACpBA,oBAAUQ,OAAV,CAAkBC,UAAU;AAC1B,gBAAIC,YAAY,IAAhB;AACA,gBAAIA,SAAJ,EAAgB;AACdA,wBAAUC,KAAV,CAAgBC,eAAhB,GAAkC,gBAAlC;AACD;AACD,iBAAK7B,mBAAL;AACD,WAND;AAOD;;AAEDC,iBAAS;AACP,cAAI6B,SAAS,KAAK3B,UAAL,EAAb;AACA,cAAI2B,WAAW,KAAKC,WAApB,EAAiC;AAC/B,iBAAKC,cAAL,GAAsB,IAAtB;AACD,WAFD,MAEO;AACL,iBAAKA,cAAL,GAAsB,KAAtB;AACD;AACD,eAAKC,qBAAL;AACD;;AAEDC,gBAAQ;AACN,eAAKH,WAAL,GAAqB,KAAK5B,UAAL,EAArB;AACA,eAAK6B,cAAL,GAAsB,KAAtB;AACA,eAAKC,qBAAL;AACD;;AAEDA,gCAAwB;AACtB,cAAIN,YAAY,IAAhB;AACA,cAAIA,aAAa,KAAKK,cAAtB,EAAsC;AACpCL,sBAAUC,KAAV,CAAgBC,eAAhB,GAAkC,gBAAlC;AACD,WAFD,MAEO;AACLF,sBAAUC,KAAV,CAAgBC,eAAhB,GAAkC,kBAAlC;AACD;AACF;;AAED,cAAMM,aAAN,GAAsB;AACpB,cAAIC,SAAS,KAAKC,aAAlB;AACA,cAAIC,6FACG,IADH,uGAEU,SAFV,8CAEoC,MAFpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAJ;AAIAF,iBAAOG,WAAP,CAAmBD,IAAnB;AACA,eAAKJ,KAAL;AACD;AAzFsD;;yBAApCpC,qB;;;;;;;;6BAAAA,sD","file":"lively-change-indicator.js","sourcesContent":["\nimport Morph from 'src/components/widgets/lively-morph.js';\n\nexport default class LivelyChangeIndicator extends Morph {\n  async initialize() {\n    this.contentChangedDelay = (() => {\n      this.update()\n    }).debounce(1000)\n  }\n  \n  // override this method to customize it! \n  getContent() {\n    var element = this.getTargetElement()\n    return element && element.innerHTML\n  }\n  \n  getContext() {\n    return this.parentNode\n  }\n  \n  getTargetElement() {\n    var element = this.getContext()\n    return element && element.querySelector(\"#\" + this.target)\n  }\n  \n  get target() {\n    return this.getAttribute(\"target\") || \"content\"\n  }\n  \n  attachedCallback() {\n    if(this.getTargetElement()) {\n      this.startObserving()  \n    }\n  }\n  \n  startObserving() {\n    if (this.mutationObserver) this.mutationObserver.disconnect()\n    var element = this.getTargetElement()\n    if (!element) return\n    this.mutationObserver = new MutationObserver((mutations, observer) => {\n        this.onMutation(mutations, observer)\n    });\n    this.mutationObserver.observe(element, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n      attributes: true});\n  }\n  \n  onMutation(mutations) {\n    mutations.forEach(record => {\n      var indicator = this\n      if (indicator ) {\n        indicator.style.backgroundColor = \"rgb(250,250,0)\";\n      }\n      this.contentChangedDelay()\n    })\n  }\n  \n  update() {\n    var source = this.getContent()\n    if (source !== this.lastContent) {\n      this.contentChanged = true    \n    } else {\n      this.contentChanged = false\n    }\n    this.updateChangeIndicator()\n  }\n  \n  reset() {\n    this.lastContent  =  this.getContent();\n    this.contentChanged = false\n    this.updateChangeIndicator()\n  }\n  \n  updateChangeIndicator() {\n    var indicator = this\n    if (indicator && this.contentChanged) {\n      indicator.style.backgroundColor = \"rgb(220,30,30)\";\n    } else {\n      indicator.style.backgroundColor = \"rgb(200,200,200)\";\n    }\n  }\n  \n  async livelyExample() {\n    var parent = this.parentElement\n    var pane = <div>\n          {this}\n          <div id=\"content\" contentEditable=\"true\">Hello</div>\n        </div>\n    parent.appendChild(pane)\n    this.reset()\n  }\n}"]}