chore: setup prettier and lint all files

sifrr · Jun 26, 2019 · 4751a4a · 4751a4a
1 parent 8a1430e
commit 4751a4a
Show file tree

Hide file tree

Showing 31 changed files with 585 additions and 279 deletions.
diff --git a/README.md b/README.md
@@ -11,19 +11,19 @@
 
 ## List of Elements:
 
-| Elements                                                | Description                                                                                        | Size                                                                                                                                                                                                                                  |                        Test                       |
+| Elements                                                | Description                                                                                        | Size                                                                                                                                                                                                                                  |                       Test                        |
 | :------------------------------------------------------ | :------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-----------------------------------------------: |
 | [sifrr-stater](./elements/sifrr-stater)                 | State manager for sifrr elements, save them to storage, replay state changes, travel to past state | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-stater/dist/sifrrstater.min.js?compression=gzip&maxAge=60)](./elements/sifrr-stater/dist/sifrrstater.min.js)                               |                       [WIP]                       |
-| [sifrr-tab-container](./elements/sifrr-tab-container)   | Scrollable tabs container                                                                          | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-tab-container/dist/sifrrtabcontainer.min.js?compression=gzip&maxAge=60)](./elements/sifrr-tab-container/dist/sifrrtabcontainer.min.js)     |  [OK](./elements/sifrr-tab-container/test/public) |
+| [sifrr-tab-container](./elements/sifrr-tab-container)   | Scrollable tabs container                                                                          | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-tab-container/dist/sifrrtabcontainer.min.js?compression=gzip&maxAge=60)](./elements/sifrr-tab-container/dist/sifrrtabcontainer.min.js)     | [OK](./elements/sifrr-tab-container/test/public)  |
 | [sifrr-tab-header](./elements/sifrr-tab-header)         | Scrollable tabs header that can be used with container                                             | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-tab-header/dist/sifrrtabheader.min.js?compression=gzip&maxAge=60)](./elements/sifrr-tab-header/dist/sifrrtabheader.min.js)                 |   [OK](./elements/sifrr-tab-header/test/public)   |
-| [sifrr-carousel](./elements/sifrr-carousel)             | Simple carousel with preview using tabs                                                            | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-carousel/dist/sifrrcarousel.min.js?compression=gzip&maxAge=60)](./elements/sifrr-carousel/dist/sifrrcarousel.min.js)                       |    [WIP](./elements/sifrr-carousel/test/public)    |
+| [sifrr-carousel](./elements/sifrr-carousel)             | Simple carousel with preview using tabs                                                            | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-carousel/dist/sifrrcarousel.min.js?compression=gzip&maxAge=60)](./elements/sifrr-carousel/dist/sifrrcarousel.min.js)                       |   [WIP](./elements/sifrr-carousel/test/public)    |
 | [sifrr-lazy-picture](./elements/sifrr-lazy-picture)     | Lazy loading pictures when in view                                                                 | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-lazy-picture/dist/sifrrlazypicture.min.js?compression=gzip&maxAge=60)](./elements/sifrr-lazy-picture/dist/sifrrlazypicture.min.js)         |  [OK](./elements/sifrr-lazy-picture/test/public)  |
 | [sifrr-lazy-img](./elements/sifrr-lazy-img)             | Lazy loading images when in view                                                                   | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-lazy-img/dist/sifrrlazyimg.min.js?compression=gzip&maxAge=60)](./elements/sifrr-lazy-img/dist/sifrrlazyimg.min.js)                         |    [OK](./elements/sifrr-lazy-img/test/public)    |
 | [sifrr-progress-round](./elements/sifrr-progress-round) | Circular progress circle                                                                           | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-progress-round/dist/sifrrprogressround.min.js?compression=gzip&maxAge=60)](./elements/sifrr-progress-round/dist/sifrrprogressround.min.js) | [OK](./elements/sifrr-progress-round/test/public) |
 | [sifrr-code-editor](./elements/sifrr-code-editor)       | Code editor with syntax highlighting using highlight.js                                            | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-code-editor/dist/sifrrcodeeditor.min.js?compression=gzip&maxAge=60)](./elements/sifrr-code-editor/dist/sifrrcodeeditor.min.js)             |                       [WIP]                       |
 | [sifrr-showcase](./elements/sifrr-showcase)             | Showcase sifrr-dom elements                                                                        | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-showcase/dist/sifrrshowcase.min.js?compression=gzip&maxAge=60)](./elements/sifrr-showcase/dist/sifrrshowcase.min.js)                       |                       [WIP]                       |
-| [sifrr-include](./elements/sifrr-include)               | Async include html/js/css with url                                                                 | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-include/dist/sifrrinclude.min.js?compression=gzip&maxAge=60)](./elements/sifrr-include/dist/sifrrinclude.min.js)                           |     [OK](./elements/sifrr-include/test/public)    |
-| [sifrr-shimmer](./elements/sifrr-shimmer)               | Facebook like Shimmer used as loading screen                                                       | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-shimmer/dist/sifrrshimmer.min.js?compression=gzip&maxAge=60)](./elements/sifrr-shimmer/dist/sifrrshimmer.min.js)                           |     [WIP](./elements/sifrr-shimmer/test/public)    |
+| [sifrr-include](./elements/sifrr-include)               | Async include html/js/css with url                                                                 | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-include/dist/sifrrinclude.min.js?compression=gzip&maxAge=60)](./elements/sifrr-include/dist/sifrrinclude.min.js)                           |    [OK](./elements/sifrr-include/test/public)     |
+| [sifrr-shimmer](./elements/sifrr-shimmer)               | Facebook like Shimmer used as loading screen                                                       | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-shimmer/dist/sifrrshimmer.min.js?compression=gzip&maxAge=60)](./elements/sifrr-shimmer/dist/sifrrshimmer.min.js)                           |    [WIP](./elements/sifrr-shimmer/test/public)    |
 
 ## View examples
 
@@ -49,16 +49,25 @@ Examples as showcase: <https://sifrr.github.io/sifrr-elements/showcase/> (only d
 
 ```html
 // load sifrr-dom
-<script src="https://unpkg.com/@sifrr/sifrr@{version}/packages/browser/sifrr-dom/dist/sifrr.dom.module.js" type="module"></script>
+<script
+  src="https://unpkg.com/@sifrr/sifrr@{version}/packages/browser/sifrr-dom/dist/sifrr.dom.module.js"
+  type="module"
+></script>
 // load element you want to add
-<script src="https://unpkg.com/@sifrr/elements@{version}/elements/element-name/dist/elementname.module.js" type="module"></script>
+<script
+  src="https://unpkg.com/@sifrr/elements@{version}/elements/element-name/dist/elementname.module.js"
+  type="module"
+></script>
 // for v0.0.3, version = 0.0.3
 ```
 
 #### Sifrr.Dom.load
 
 ```js
-Sifrr.Dom.load('element-name', { url: "https://unpkg.com/@sifrr/elements@{version}/elements/element-name/dist/elementname.min.js" })
+Sifrr.Dom.load('element-name', {
+  url:
+    'https://unpkg.com/@sifrr/elements@{version}/elements/element-name/dist/elementname.min.js'
+});
 ```
 
 ### NPM module
@@ -94,7 +103,9 @@ usage:
 
 import { LazyLoader } from '@sifrr/elements';
 
-const lazyLoader = new LazyLoader(rootMargin /* same as mutation observer's rootMargin, default: '0px 0px 0px 0px' */);
+const lazyLoader = new LazyLoader(
+  rootMargin /* same as mutation observer's rootMargin, default: '0px 0px 0px 0px' */
+);
 
 lazyLoader.observe(document.querySelector('.lazy'));
 

diff --git a/babel.config.js b/babel.config.js
@@ -1,10 +1,13 @@
-module.exports = function (api) {
+module.exports = function(api) {
   api.cache(true);
   const presets = [
-    ['@babel/env', {
-      modules: false,
-      targets: require('./package.json').browserslist
-    }]
+    [
+      '@babel/env',
+      {
+        modules: false,
+        targets: require('./package.json').browserslist
+      }
+    ]
   ];
 
   return {

diff --git a/elements/sifrr-carousel/src/sifrrcarousel.js b/elements/sifrr-carousel/src/sifrrcarousel.js
@@ -48,16 +48,26 @@ class SifrrCarousel extends SifrrDom.Element {
 
     // refresh when images are loaded
     this._rel = this._rel || this.refresh.bind(this);
-    Array.from(this.$$('img', false)).forEach(img => img.addEventListener('load', this._rel));
+    Array.from(this.$$('img', false)).forEach(img =>
+      img.addEventListener('load', this._rel)
+    );
 
     SifrrDom.Event.addListener('click', this, (e, t) => {
-      if ((t.matches('[slot=content]') || t.matches('[slot=content] *')) && !t.matches('.fullscreen *')) this.fullScreen(true);
+      if (
+        (t.matches('[slot=content]') || t.matches('[slot=content] *')) &&
+        !t.matches('.fullscreen *')
+      )
+        this.fullScreen(true);
       else if (t.matches('#bg') || t.matches('#bg *')) this.fullScreen(false);
-      else if (t.matches('.arrow.l') || t.matches('.arrow.l span')) this.container.prev();
-      else if (t.matches('.arrow.r') || t.matches('.arrow.r span')) this.container.next();
+      else if (t.matches('.arrow.l') || t.matches('.arrow.l span'))
+        this.container.prev();
+      else if (t.matches('.arrow.r') || t.matches('.arrow.r span'))
+        this.container.next();
     });
     this.container._update = () => {
-      this.$('#count').textContent = `${this.container.active + 1}/${this.container.total}`;
+      this.$('#count').textContent = `${this.container.active + 1}/${
+        this.container.total
+      }`;
     };
   }
 

diff --git a/elements/sifrr-carousel/src/style.scss b/elements/sifrr-carousel/src/style.scss
@@ -3,7 +3,8 @@
   width: 100%;
 }
 
-#preview, #content {
+#preview,
+#content {
   position: relative;
 }
 
@@ -19,14 +20,14 @@
 #count {
   bottom: 6px;
   right: 6px;
-  background: rgba(255,255,255,0.7);
+  background: rgba(255, 255, 255, 0.7);
   border-radius: 10px;
   font-size: 14px;
   padding: 4px 6px;
 }
 
 #bg {
-  background: rgba(255,255,255,0.9);
+  background: rgba(255, 255, 255, 0.9);
   display: none;
   height: 100%;
   width: 100%;
@@ -83,20 +84,21 @@
 }
 
 /* drop shadow */
-.arrow > *, #cross {
+.arrow > *,
+#cross {
   filter: drop-shadow(-1px -1px 3px #000);
   user-select: none;
   color: white;
   z-index: 3;
 }
 
 /* slot elements css */
-slot[name=preview]::slotted(*) {
+slot[name='preview']::slotted(*) {
   height: 64px;
   opacity: 0.5;
 }
 
-slot[name=preview]::slotted(*.active) {
+slot[name='preview']::slotted(*.active) {
   border: 1px solid white;
   opacity: 1;
 }
@@ -119,7 +121,8 @@ sifrr-tab-header {
     z-index: 1;
   }
 
-  #preview, #content {
+  #preview,
+  #content {
     position: absolute;
     left: 0;
     right: 0;

diff --git a/elements/sifrr-code-editor/src/sifrrcodeeditor.js b/elements/sifrr-code-editor/src/sifrrcodeeditor.js
@@ -25,7 +25,11 @@ class SifrrCodeEditor extends SifrrDom.Element {
   }
 
   static cm() {
-    this._cm = this._cm || SifrrDom.Loader.executeJS(`https://cdn.jsdelivr.net/npm/codemirror@${CM_VERSION}/lib/codemirror.js`);
+    this._cm =
+      this._cm ||
+      SifrrDom.Loader.executeJS(
+        `https://cdn.jsdelivr.net/npm/codemirror@${CM_VERSION}/lib/codemirror.js`
+      );
     return this._cm;
   }
 
@@ -46,20 +50,23 @@ class SifrrCodeEditor extends SifrrDom.Element {
   }
 
   cmLoaded() {
-    SifrrDom.Loader.executeJS(`https://cdn.jsdelivr.net/npm/codemirror@${CM_VERSION}/mode/${this.lang}/${this.lang}.js`)
-      .then(() => {
-        this.cm = window.CodeMirror.fromTextArea(this.$('textarea'), {
-          value: this.$('textarea').value,
-          mode: this.lang,
-          htmlMode: true,
-          theme: this.getTheme(),
-          indentUnit: 2,
-          tabSize: 2,
-          lineNumbers: true
-        });
-        this.cm.on('change', this.input.bind(this));
-        this._cmLoaded = true;
+    SifrrDom.Loader.executeJS(
+      `https://cdn.jsdelivr.net/npm/codemirror@${CM_VERSION}/mode/${
+        this.lang
+      }/${this.lang}.js`
+    ).then(() => {
+      this.cm = window.CodeMirror.fromTextArea(this.$('textarea'), {
+        value: this.$('textarea').value,
+        mode: this.lang,
+        htmlMode: true,
+        theme: this.getTheme(),
+        indentUnit: 2,
+        tabSize: 2,
+        lineNumbers: true
       });
+      this.cm.on('change', this.input.bind(this));
+      this._cmLoaded = true;
+    });
   }
 
   getTheme() {

diff --git a/elements/sifrr-code-editor/src/style.scss b/elements/sifrr-code-editor/src/style.scss
@@ -12,7 +12,8 @@ textarea {
   border: none;
 }
 
-textarea, .CodeMirror {
+textarea,
+.CodeMirror {
   height: 100%;
   width: 100%;
 }
diff --git a/elements/sifrr-include/src/sifrrinclude.js b/elements/sifrr-include/src/sifrrinclude.js
@@ -6,7 +6,8 @@ class SifrrInclude extends SifrrDom.Element {
   }
 
   onConnect() {
-    let preffix = '', suffix = '';
+    let preffix = '',
+      suffix = '';
     if (this.type === 'js') {
       preffix = '<script>';
       suffix = '</script>';
@@ -16,9 +17,11 @@ class SifrrInclude extends SifrrDom.Element {
     }
 
     if (this.url) {
-      fetch(this.url).then(r => r.text()).then(text => {
-        this.innerHTML = preffix + text + suffix;
-      });
+      fetch(this.url)
+        .then(r => r.text())
+        .then(text => {
+          this.innerHTML = preffix + text + suffix;
+        });
     }
   }
 }

diff --git a/elements/sifrr-progress-round/src/sifrrprogressround.js b/elements/sifrr-progress-round/src/sifrrprogressround.js
@@ -13,11 +13,16 @@ class SifrrProgressRound extends SifrrDom.Element {
   }
 
   onAttributeChange(n, _, v) {
-    if (n === 'progress' || n === 'stroke' || n === 'stroke-width') this.state = { [n]: Number(v) };
+    if (n === 'progress' || n === 'stroke' || n === 'stroke-width')
+      this.state = { [n]: Number(v) };
   }
 }
 
-SifrrProgressRound.defaultState = { progress: 0, 'stroke-width': 2, stroke: '#fff' };
+SifrrProgressRound.defaultState = {
+  progress: 0,
+  'stroke-width': 2,
+  stroke: '#fff'
+};
 SifrrDom.register(SifrrProgressRound);
 
 export default SifrrProgressRound;
diff --git a/elements/sifrr-progress-round/src/template.html b/elements/sifrr-progress-round/src/template.html
@@ -1,4 +1,27 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="0 0 60 60">
-  <circle cx="30" cy="30" r="28" fill="none" stroke="rgba(255, 255, 255, 0.6)" stroke-width="${this.state['stroke-width']}" />
-  <circle id="top" cx="30" cy="30" r="28" fill="none" stroke="${this.state.stroke}" stroke-width="${this.state['stroke-width']}" stroke-dasharray="188.5" stroke-dashoffset="${(100 - this.state.progress) / 100 * 188.5}" />
-</svg>
+<svg
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  preserveAspectRatio="xMinYMin meet"
+  width="100%"
+  height="100%"
+  viewBox="0 0 60 60"
+>
+  <circle
+    cx="30"
+    cy="30"
+    r="28"
+    fill="none"
+    stroke="rgba(255, 255, 255, 0.6)"
+    stroke-width="${this.state['stroke-width']}"
+  />
+  <circle
+    id="top"
+    cx="30"
+    cy="30"
+    r="28"
+    fill="none"
+    stroke="${this.state.stroke}"
+    stroke-width="${this.state['stroke-width']}"
+    stroke-dasharray="188.5"
+    stroke-dashoffset="${(100 - this.state.progress) / 100 * 188.5}"
+  />
+</svg>
diff --git a/elements/sifrr-shimmer/src/sifrrshimmer.js b/elements/sifrr-shimmer/src/sifrrshimmer.js
@@ -5,19 +5,28 @@ import style from './style.css';
 const properStyle = style.replace(/"(\${[^"]*})"/g, '$1');
 
 function rgbToHsl(r = 0, g = 0, b = 0) {
-  r /= 255, g /= 255, b /= 255;
-  let max = Math.max(r, g, b), min = Math.min(r, g, b);
-  let h, s, l = (max + min) / 2;
+  (r /= 255), (g /= 255), (b /= 255);
+  let max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  let h,
+    s,
+    l = (max + min) / 2;
 
   if (max == min) {
     h = s = 0; // achromatic
   } else {
     let d = max - min;
     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch(max) {
-    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
-    case g: h = (b - r) / d + 2; break;
-    case b: h = (r - g) / d + 4; break;
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
     }
     h /= 6;
   }
@@ -43,7 +52,12 @@ class SifrrShimmer extends SifrrDom.Element {
   }
 
   colora(point) {
-    const hsl = rgbToHsl(...(this.color || '170, 170, 170').replace(/ /g, '').split(',').map(Number));
+    const hsl = rgbToHsl(
+      ...(this.color || '170, 170, 170')
+        .replace(/ /g, '')
+        .split(',')
+        .map(Number)
+    );
     const l = Math.min(hsl[2] + (this.isLight() ? point : -1 * point), 1);
     return `hsl(${hsl[0] * 359}, ${hsl[1] * 100}%, ${l * 100}%)`;
   }

diff --git a/elements/sifrr-shimmer/src/style.css b/elements/sifrr-shimmer/src/style.css
@@ -1,10 +1,19 @@
 :host {
-  background: linear-gradient(to right, "${this.bgColor}" 4%, "${this.fgColor}" 25%, "${this.bgColor}" 36%);
+  background: linear-gradient(
+    to right,
+    '${this.bgColor}' 4%,
+    '${this.fgColor}' 25%,
+    '${this.bgColor}' 36%
+  );
   display: inline-block;
   animation: shimmer 2.5s linear 0s infinite;
   background-size: 2000px 100%;
 }
-@keyframes shimmer{
-  0% { background-position: -2000px 0 }
-  100% { background-position: 2000px 0 }
+@keyframes shimmer {
+  0% {
+    background-position: -2000px 0;
+  }
+  100% {
+    background-position: 2000px 0;
+  }
 }