feat: other elements changes for sifrr 0.0.7

sifrr · Oct 29, 2019 · b1892b0 · b1892b0
1 parent a954a9e
commit b1892b0
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 60 deletions.
diff --git a/elements/sifrr-carousel/src/sifrrcarousel.js b/elements/sifrr-carousel/src/sifrrcarousel.js
@@ -16,7 +16,7 @@ const template = SifrrDom.template`<style media="screen">
   <sifrr-tab-container>
     <slot name="content"></slot>
   </sifrr-tab-container>
-  <span id="count"></span>
+  <span id="count">\${\`\${this.container.active + 1}/\${this.container.total}\`}</span>
 </div>
 <div id="preview">
   <div class="arrow l">

diff --git a/elements/sifrr-code-editor/src/sifrrcodeeditor.js b/elements/sifrr-code-editor/src/sifrrcodeeditor.js
@@ -9,21 +9,13 @@ const template = SifrrDom.template`
 <style media="screen">
   ${style}
 </style>
-<textarea></textarea>`;
+<textarea value="\${this.value}" _input="\${this.input}"></textarea>`;
 
 class SifrrCodeEditor extends SifrrDom.Element {
   static get template() {
     return template;
   }
 
-  static observedAttrs() {
-    return ['value', 'theme', 'lang'];
-  }
-
-  static syncedAttrs() {
-    return ['theme'];
-  }
-
   static cm() {
     this._cm =
       this._cm ||
@@ -33,11 +25,12 @@ class SifrrCodeEditor extends SifrrDom.Element {
     return this._cm;
   }
 
-  onAttributeChange(n, _, v) {
+  onPropsChange(props) {
     if (this._cmLoaded) {
-      if (n === 'theme') this.cm.setOption('theme', v);
-      if (n === 'lang') this.cm.setOption('mode', this.getTheme());
+      if (props.indexOf('theme') > -1) this.cm.setOption('theme', this.getTheme());
+      if (props.indexOf('lang') > -1) this.cm.setOption('mode', this.lang || 'xml');
     }
+    if (['value', 'theme', 'lang'].filter(p => props.indexOf(p) > -1).length > 0) this.update();
   }
 
   onConnect() {
@@ -46,10 +39,12 @@ class SifrrCodeEditor extends SifrrDom.Element {
 
   input() {
     SifrrDom.Event.trigger(this, 'input');
+    this.value = this.getValue();
     this.update();
   }
 
   cmLoaded() {
+    this.lang = this.lang || 'xml';
     SifrrDom.Loader.executeJS(
       `https://cdn.jsdelivr.net/npm/codemirror@${CM_VERSION}/mode/${this.lang}/${this.lang}.js`
     ).then(() => {
@@ -71,7 +66,7 @@ class SifrrCodeEditor extends SifrrDom.Element {
     return this.theme ? this.theme.split(' ')[0] : 'dracula';
   }
 
-  get value() {
+  getValue() {
     if (this._cmLoaded) return this.cm.getValue();
     else return this.$('textarea').value;
   }
@@ -81,12 +76,6 @@ class SifrrCodeEditor extends SifrrDom.Element {
     if (this._cmLoaded) return this.cm.setValue(v);
     else this.$('textarea').value = v;
   }
-
-  get lang() {
-    const attr = this.getAttribute('lang');
-    if (!attr || attr === 'html') return 'xml';
-    return attr;
-  }
 }
 
 SifrrDom.register(SifrrCodeEditor);

diff --git a/elements/sifrr-include/src/sifrrinclude.js b/elements/sifrr-include/src/sifrrinclude.js
@@ -1,10 +1,6 @@
 import SifrrDom from '@sifrr/dom';
 
 class SifrrInclude extends SifrrDom.Element {
-  static syncedAttrs() {
-    return ['url', 'type', 'selector'];
-  }
-
   onConnect() {
     let preffix = '',
       suffix = '';

diff --git a/elements/sifrr-progress-round/src/sifrrprogressround.js b/elements/sifrr-progress-round/src/sifrrprogressround.js
@@ -8,12 +8,9 @@ class SifrrProgressRound extends SifrrDom.Element {
     return SifrrDom.template(`<style>${style}</style>${template}`);
   }
 
-  static syncedAttrs() {
-    return ['progress', 'stroke', 'stroke-width'];
-  }
-
-  onAttributeChange(n, _, v) {
-    if (n === 'progress' || n === 'stroke' || n === 'stroke-width') this.state = { [n]: Number(v) };
+  onPropsChange(props) {
+    if (['progress', 'stroke', 'stroke-width'].filter(p => props.indexOf(p) > -1).length > 0)
+      this.update();
   }
 }
 

diff --git a/elements/sifrr-progress-round/src/template.html b/elements/sifrr-progress-round/src/template.html
@@ -11,17 +11,17 @@
     r="28"
     fill="none"
     stroke="rgba(255, 255, 255, 0.6)"
-    stroke-width="${this.state['stroke-width']}"
+    stroke-width="${this['stroke-width']}"
   />
   <circle
     id="top"
     cx="30"
     cy="30"
     r="28"
     fill="none"
-    stroke="${this.state.stroke}"
-    stroke-width="${this.state['stroke-width']}"
+    stroke="${this.stroke}"
+    stroke-width="${this['stroke-width']}"
     stroke-dasharray="188.5"
-    stroke-dashoffset="${(100 - this.state.progress) / 100 * 188.5}"
+    stroke-dashoffset="${(100 - this.progress) / 100 * 188.5}"
   />
 </svg>
diff --git a/elements/sifrr-progress-round/test/browser/state.test.js b/elements/sifrr-progress-round/test/browser/state.test.js
@@ -14,7 +14,7 @@ describe('state managements', () => {
 
   it('not change state twice on other attribute change', async () => {
     await page.$eval('sifrr-progress-round', el =>
-      el.setAttribute('data-sifrr-state', '{"progress": 55}')
+      el.setAttribute(':sifrr-state', '{"progress": 55}')
     );
     assert.equal(await page.$eval('sifrr-progress-round', el => el.state.progress), 55);
   });

diff --git a/elements/sifrr-shimmer/src/sifrrshimmer.js b/elements/sifrr-shimmer/src/sifrrshimmer.js
@@ -35,19 +35,20 @@ function rgbToHsl(r = 0, g = 0, b = 0) {
 }
 
 class SifrrShimmer extends SifrrDom.Element {
-  static syncedAttrs() {
-    return ['color', 'bg-color', 'fg-color'];
+  onPropsChange(props) {
+    if (['color', 'bg-color', 'fg-color'].filter(p => props.indexOf(p) > -1).length > 0)
+      this.update();
   }
 
   static get template() {
     return SifrrDom.template(`<style>${properStyle}</style>`);
   }
 
-  get bgColor() {
+  getBgColor() {
     return this['bg-color'] || this.colora(0.15);
   }
 
-  get fgColor() {
+  getFgColor() {
     return this['fg-color'] || this.colora(0);
   }
 

diff --git a/elements/sifrr-shimmer/src/style.css b/elements/sifrr-shimmer/src/style.css
@@ -1,9 +1,9 @@
 :host {
   background: linear-gradient(
     to right,
-    '${this.bgColor}' 4%,
-    '${this.fgColor}' 25%,
-    '${this.bgColor}' 36%
+    '${this.getBgColor()}' 4%,
+    '${this.getFgColor()}' 25%,
+    '${this.getBgColor()}' 36%
   );
   display: inline-block;
   animation: shimmer 2.5s linear 0s infinite;

diff --git a/elements/sifrr-tab-container/src/sifrrtabcontainer.js b/elements/sifrr-tab-container/src/sifrrtabcontainer.js
@@ -21,8 +21,8 @@ class SifrrTabContainer extends SifrrDom.Element {
     return template;
   }
 
-  static observedAttrs() {
-    return ['options'];
+  onPropsChange(props) {
+    if (props.indexOf('options') > -1) this.refresh();
   }
 
   onConnect() {
@@ -33,13 +33,6 @@ class SifrrTabContainer extends SifrrDom.Element {
     this.setScrollEvent();
   }
 
-  onAttributeChange(n, _, v) {
-    if (n === 'options') {
-      this._attrOptions = JSON.parse(v || '{}');
-      if (this._connected) this.refresh();
-    }
-  }
-
   refresh(options) {
     this._options = Object.assign(
       {

diff --git a/elements/sifrr-tab-header/src/sifrrtabheader.js b/elements/sifrr-tab-header/src/sifrrtabheader.js
@@ -19,8 +19,8 @@ class SifrrTabHeader extends SifrrDom.Element {
     return template;
   }
 
-  static observedAttrs() {
-    return ['options'];
+  onPropsChange(props) {
+    if (props.indexOf('options') > -1) this.refresh();
   }
 
   onConnect() {
@@ -29,13 +29,6 @@ class SifrrTabHeader extends SifrrDom.Element {
     this.refresh();
   }
 
-  onAttributeChange(n, _, v) {
-    if (n === 'options') {
-      this._attrOptions = JSON.parse(v || '{}');
-      if (this._connected) this.refresh();
-    }
-  }
-
   refresh(options) {
     this._options = Object.assign(
       {