chore: bug fixes and new format

elements/sifrr-showcase/src/sifrrshowcase.js

@@ -22,7 +22,7 @@ const template = SifrrDom.template`<style media="screen">
       </span>
       <button class="font" type="button" name="saveFile" _click="\${this.saveFile}">Save to File</button>
       <h3 class="font head">Showcases</h3>
-      <input style="width: 100%" id="showcaseName" type="text" name="showcase" _input="\${(v) => this.store.setActiveValue({ name: v })}" value="\${this.store.getActiveValue().name}">
+      <input style="width: 100%" id="showcaseName" type="text" name="showcase" :sifrr-bind="\${this.store.bindUpdate('name')}" value="\${this.store.getActiveValue().name}">
       <button style="width: 100%" class="font" type="button" name="createVariant" _click="\${this.createShowcase}">Create new showcase</button>
       <div id="showcases" :sifrr-repeat="\${this.store.getValues()}">
         <li class="font showcase small \${this.state.active ? 'current' : ''}" draggable="true">\${this.state.name}<span>X</span></li>
@@ -61,6 +61,7 @@ class SifrrShowcase extends SifrrDom.Element {
       if (el.matches('.showcase')) this.store.setActive(this.getChildIndex(el));
       if (el.matches('.showcase span')) this.store.delete(this.getChildIndex(el.parentNode));
     });
+    this.store.fetchStore(this.url, this.onStatus.bind(this));
     if (window.Sortable) {
       const me = this;
       new window.Sortable(this.$('#showcases'), {
@@ -118,7 +119,7 @@ class SifrrShowcase extends SifrrDom.Element {
     const file = el.files[0];
     const fr = new FileReader();
     fr.onload = () => {
-      this.store.setValues(JSON.parse(fr.result).showcases);
+      this.store.setValues(JSON.parse(fr.result).values);
       this.store.setActive(JSON.parse(fr.result).active || 0);
       this.onStatus('loaded from file!');
     };

elements/sifrr-showcase/src/singleshowcase.js

@@ -68,11 +68,20 @@ class SifrrSingleShowcase extends SifrrDom.Element {
   }
 
   onUpdate() {
+    const currentTime = Date.now();
     if (this._stateFxnTimeout) clearTimeout(this._stateFxnTimeout);
-    this._stateFxnTimeout = setTimeout(this.runStateFunction.bind(this), 500);
+    if (this._lastStateRun && currentTime - this._lastStateRun < 500) {
+      this._stateFxnTimeout = setTimeout(
+        this.runStateFunction.bind(this),
+        currentTime - this._lastStateRun
+      );
+    } else {
+      this.runStateFunction();
+    }
   }
 
   runStateFunction() {
+    this._lastStateRun = Date.now();
     let state;
     try {
       state = new Function(this.$('#elState').value).call(this.element());
@@ -86,7 +95,6 @@ class SifrrSingleShowcase extends SifrrDom.Element {
 
   createNewVariant() {
     this.store.add({
-      variantId: id,
       variantName: this.state.variantName,
       style: this.state.style || '',
       code: this.state.code || '',
@@ -96,7 +104,7 @@ class SifrrSingleShowcase extends SifrrDom.Element {
 
   updateHtml(e, el) {
     const html = `<${el.value}></${el.value}>`;
-    this.state = { code: html, element: el.value };
+    this.store.setActiveValue({ code: html, element: el.value });
   }
 
   element() {

elements/sifrr-showcase/src/stores.js

@@ -20,46 +20,49 @@ showcaseStore.fetchStore = function(url, onStatus) {
       onStatus(e.message);
       storage.all().then(v => {
         onStatus('failed to load from url, loaded from storage!');
-        if (Array.isArray(v.showcases)) {
-          this.setValues(v.showcases);
+        if (Array.isArray(v.values)) {
+          this.setValues(v.values);
           this.setActive(v.active || 0);
         }
       });
     })
     .finally(() => {
       this._loaded = true;
-      this.setActiveShowcase(
-        getParam('showcase') === undefined ? v.activeShowcase : getParam('showcase')
-      );
+      this.setActive(getParam('showcase') === undefined ? 0 : getParam('showcase'));
     });
 };
 
 showcaseStore.save = function(onUpdate) {
   storage.set(this.value).then(onUpdate);
 };
 
+const saveFxn = showcaseStore.save.bind(
+  showcaseStore,
+  () => showcaseStore.onStatus('saved locally!'),
+  (showcaseStore._timeout = null)
+);
 showcaseStore.onUpdate = function() {
-  setParam('showcase', this.value.active);
-  console.log(this.getActiveValue().variants);
+  if (getParam('showcase') != this.value.active) setParam('showcase', this.value.active);
   if (
     this.getActiveValue().variants &&
     this.getActiveValue().variants !== variantStore.getValues()
   ) {
-    variantStore.setValues(this.getActiveValue().variants);
+    variantStore.setValues(this.getActiveValue().variants, this.getActiveValue().activeVariant);
   }
 
+  if (this.getActiveValue().activeVariant !== variantStore.value.active) {
+    this.getActiveValue().activeVariant = variantStore.value.active;
+  }
+
+  if (!this.getValues() || this.getValues().length < 1) return;
+
   this.onStatus('saving locally!');
   if (this._timeout) clearTimeout(this._timeout);
-  this._timeout = setTimeout(() => {
-    this._timeout = null;
-    storage.set(this.value).then(() => {
-      this.onStatus('saved locally!');
-    });
-  }, 500);
+  this._timeout = setTimeout(saveFxn, 500);
 };
 
 variantStore.onUpdate = function() {
-  setParam('variant', this.value.active);
+  if (getParam('variant') != this.value.active) setParam('variant', this.value.active);
   showcaseStore.onUpdate();
 };
 

elements/sifrr-showcase/src/switchingstore.js

@@ -8,8 +8,9 @@ class ShowcaseStore extends Store {
     });
   }
 
-  setValues(values) {
-    this.set({ values: values || [] });
+  setValues(values, active) {
+    this.value.values = values || [];
+    this.setActive(active || 0);
   }
 
   getValues() {
@@ -28,8 +29,7 @@ class ShowcaseStore extends Store {
 
   add(v) {
     this.value.values.splice(this.value.active + 1, 0, v);
-    this.value.active = this.value.active + 1;
-    this.update();
+    this.setActive(this.value.active + 1);
   }
 
   setActive(active) {
@@ -48,8 +48,6 @@ class ShowcaseStore extends Store {
     if (this.value.values[this.value.active]) {
       Object.assign(this.value.values[this.value.active], v);
       this.update();
-    } else {
-      this.addValue(v);
     }
   }
 }