feat(sifrr-shimmer): add color property

sifrr · May 12, 2019 · c0f5634 · c0f5634
1 parent f4cba6c
commit c0f5634
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 19 deletions.
diff --git a/dist/sifrr.elements.js b/dist/sifrr.elements.js
diff --git a/dist/sifrr.elements.min.js b/dist/sifrr.elements.min.js
diff --git a/dist/sifrr.elements.module.js b/dist/sifrr.elements.module.js
diff --git a/elements/sifrr-shimmer/README.md b/elements/sifrr-shimmer/README.md
@@ -5,9 +5,10 @@
 After loading JS file as instructed in [main readme](../../README.md). Put this in your html file:
 
 ```html
-<sifrr-shimmer></sifrr-shimmer>
+<sifrr-shimmer color="125, 45, 78"></sifrr-shimmer>
 ```
 
 Set height/width as needed with CSS.
+colot is RGB value, default is `0, 0, 0`.
 
 This shows shimmering element, can be used as a placeholder when elements/data are loading.
diff --git a/elements/sifrr-shimmer/dist/sifrrshimmer.js b/elements/sifrr-shimmer/dist/sifrrshimmer.js
diff --git a/elements/sifrr-shimmer/dist/sifrrshimmer.min.js b/elements/sifrr-shimmer/dist/sifrrshimmer.min.js
diff --git a/elements/sifrr-shimmer/dist/sifrrshimmer.module.js b/elements/sifrr-shimmer/dist/sifrrshimmer.module.js
diff --git a/elements/sifrr-shimmer/src/style.css b/elements/sifrr-shimmer/src/style.css
@@ -1,7 +1,7 @@
 :host {
   background: linear-gradient(to right, "${this.colora(0.7)}" 4%, "${this.colora(0.5)}" 25%, "${this.colora(0.7)}" 36%);
   display: inline-block;
-  animation: shimmer 2.2s linear 0s infinite;
+  animation: shimmer 2.5s linear 0s infinite;
   background-size: 2000px 100%;
 }
 @keyframes shimmer{

diff --git a/showcase/showcases.json b/showcase/showcases.json
@@ -1,5 +1,5 @@
 {
-  "current": 4,
+  "current": 5,
   "showcases": [
     {
       "id": 1,
@@ -213,22 +213,29 @@
       "element": "sifrr-progress-round",
       "elementUrl": "",
       "isjs": true,
-      "variantName": "with image progress",
-      "variantId": 3,
-      "style": "#element div {\n  width: 500px;\n  background-color: white;\n}\n\n#element .lazy {\n  position: relative;\n  height: 500px;\n  background-color: black;\n}\n\n.lazy > * {\n  position: absolute;\n  height: 500px;\n  width: 500px;\n}\n.lazy > sifrr-progress-round {\n  width: 50px;\n  height: 50px;\n  top: 225px;\n  left: 225px;\n}",
-      "code": "<div style=\"height: 1000px\">Scroll down</div>\n<div class=\"lazy\">\n  <img is=\"sifrr-lazy-img\" data-src=\"https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg\">\n  <sifrr-progress-round progress=\"0\"></sifrr-progress-round>\n</div>\n<div id=\"speed\">speed in kbps</div>\n",
-      "elState": "const speedEl = this.parentNode.$('#speed').firstChild;\nfunction lazyProgress(el) {\n  const progress = el.$('sifrr-progress-round');\n  const img = el.$('img');\n  img.reload()\n  const src = img.dataset.src;\n  img.dataset.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';\n  img.beforeLoad = () => {\n    Sifrr.Fetch.get(src, {\n      onProgress: (p, speed) => {\n        progress.progress = p;\n        if (speed) speedEl.data = Math.round(speed) + ' kbps'; \n        if (p >= 100) {\n          speedEl.data = '';\n          progress.remove();\n        }\n      }\n    }).then(r => r.blob()).then(b => {\n      img.src = URL.createObjectURL(b);\n    })\n  }\n}\n\nlazyProgress(this.parentNode.$('.lazy'));"
+      "variantName": "state",
+      "variantId": 1,
+      "style": "#element > * {\n  height: 200px;\n  width: 200px;\n  margin: auto;\n}",
+      "code": "<sifrr-progress-round></sifrr-progress-round>",
+      "elState": "return {\n  progress: 40\n}"
     },
     {
       "name": "sifrr-shimmer",
       "variants": [
         {
           "variantId": 1,
           "variantName": "normal",
-          "code": "<sifrr-shimmer></sifrr-shimmer>",
+          "code": "<sifrr-shimmer color=\"255,255,255\"></sifrr-shimmer>",
           "style": "#element > * {\n  height: 50px;\n  width: 250px;\n}",
           "elState": "return {\n\n}"
         },
+        {
+          "variantId": 4,
+          "variantName": "different color",
+          "style": "#element > * {\n  height: 50px;\n  width: 200px;\n}",
+          "code": "<sifrr-shimmer color=\"124, 56, 90\"></sifrr-shimmer>",
+          "elState": "return {\n\n}"
+        },
         {
           "variantId": 2,
           "variantName": "profile",
@@ -245,10 +252,10 @@
         }
       ],
       "element": "sifrr-shimmer",
-      "code": "<div>\n<sifrr-shimmer id=\"pic\"></sifrr-shimmer>\n<sifrr-shimmer id=\"name\"></sifrr-shimmer>\n<sifrr-shimmer id=\"name2\"></sifrr-shimmer>\n<sifrr-shimmer id=\"des\"></sifrr-shimmer>\n</div>",
-      "variantName": "profile",
-      "variantId": 2,
-      "style": "#element > div {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n#element sifrr-shimmer {\n  position: absolute;\n}\n\n#element #pic {\n  height: 150px;\n  width: 150px;\n  left: 0;\n  top: 0;\n}\n\n#element #name {\n  height: 30px;\n  width: 200px;\n  left: 166px;\n  top: 0;\n}\n\n#element #name2 {\n  height: 16px;\n  width: 200px;\n  left: 166px;\n  top: 38px;\n}\n\n#element #des {\n  height: 84px;\n  width: 200px;\n  left: 166px;\n  top: 66px;\n}",
+      "code": "<sifrr-shimmer color=\"255,255,255\"></sifrr-shimmer>",
+      "variantName": "normal",
+      "variantId": 1,
+      "style": "#element > * {\n  height: 50px;\n  width: 250px;\n}",
       "elState": "return {\n\n}"
     },
     {