@kasko/fe-loading-indicator 1.3.2 → 2.0.0

package/README.md

@@ -15,7 +15,7 @@ yarn add @kasko/fe-loading-indicator
 Requiring `@kasko/fe-loading-indicator` will return string that could be injected in
 HTML using 'HtmlWebpackPlugin'.
 ```js
-const loader = require('@kasko/fe-loading-indicator')();
+const loader = require('@kasko/fe-loading-indicator').kaskoLoader();
 ```
 
 Module accepts configuration object, where custom CSS loading colors could be provided e.g.

package/dist/{loader.js → kasko-loader/kasko-loader.js}

@@ -1,5 +1,13 @@
-module.exports = function (config = {}) {
-  let result = '<style title="li-loader">@keyframes spinner-loader{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.hidden{display:none}#kasko-loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500}#kasko-loader-wrapper:not(.li-loaded){background:"@overlaycolor";opacity:1}#kasko-loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:"@color1";animation:spin 2s linear infinite;z-index:1501}#kasko-loader::after,#kasko-loader::before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:"@color2";animation:spin 3s linear infinite}#kasko-loader::after{top:15px;left:15px;right:15px;bottom:15px;border-top-color:"@color3";animation:spin 1.5s linear infinite}#kasko-loader-wrapper .loader-section{position:fixed;top:0;width:50%;height:100%;z-index:1500;transform:translateX(0)}.li-loaded .loader-section{background:"@overlaycolor";opacity:.9}#kasko-loader-wrapper .loader-section.section-left{left:0}#kasko-loader-wrapper .loader-section.section-right{right:0}#kasko-loader-wrapper.li-loaded .loader-section.section-left{transform:translateX(-100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}#kasko-loader-wrapper.li-loaded .loader-section.section-right{transform:translateX(100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}.li-loaded #kasko-loader{opacity:0;transition:all .3s ease-out}#kasko-loader-wrapper.li-loaded{visibility:hidden}.spinner-loader:not(:requigray){animation:spinner-loader 1500ms infinite linear;border-radius:.5em;box-shadow:#025983 1.5em 0 0 0,#025983 1.1em 1.1em 0 0,#025983 0 1.5em 0 0,#025983 -1.1em 1.1em 0 0,#025983 -1.5em 0 0 0,#025983 -1.1em -1.1em 0 0,#025983 0 -1.5em 0 0,#025983 1.1em -1.1em 0 0;display:inline-block;font-size:10px;width:1em;height:1em;margin:1.5em;overflow:hidden;text-indent:100%}</style> <div id="kasko-loader-wrapper" class="hidden">   <div id="kasko-loader"></div>   <div class="loader-section section-left"></div>   <div class="loader-section section-right"></div> </div> <script>function LoadingIndicator(){this.init=function(){var o=document.getElementById("kasko-loader-wrapper");o&&o.classList.remove("hidden")},this.hide=function(){const o=document.getElementById("kasko-loader-wrapper");o&&o.classList.add("li-loaded")},this.setColors=function(o){for(var t,e=0;e<document.styleSheets.length;e++){var n=document.styleSheets.item(e);if("li-loader"===n.title){t=n;break}}t&&(t.insertRule("#loader { border-top-color:"+o[0]+"!important;}"),t.insertRule("#loader::before { border-top-color:"+o[1]+"!important;}"),t.insertRule("#loader::after { border-top-color:"+o[2]+"!important;}"))}}const loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
+'use strict';
+
+/**
+ * This function is used by gulp to replace LESS variables
+ * with actual values.
+ */
+module.exports = function () {
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var result = '<style title="li-loader">@keyframes spinner-loader{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.hidden{display:none}#kasko-loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500}#kasko-loader-wrapper:not(.li-loaded){background:"@overlaycolor";opacity:1}#kasko-loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:"@color1";animation:spin 2s linear infinite;z-index:1501}#kasko-loader::after,#kasko-loader::before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:"@color2";animation:spin 3s linear infinite}#kasko-loader::after{top:15px;left:15px;right:15px;bottom:15px;border-top-color:"@color3";animation:spin 1.5s linear infinite}#kasko-loader-wrapper .loader-section{position:fixed;top:0;width:50%;height:100%;z-index:1500;transform:translateX(0)}.li-loaded .loader-section{background:"@overlaycolor";opacity:.9}#kasko-loader-wrapper .loader-section.section-left{left:0}#kasko-loader-wrapper .loader-section.section-right{right:0}#kasko-loader-wrapper.li-loaded .loader-section.section-left{transform:translateX(-100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}#kasko-loader-wrapper.li-loaded .loader-section.section-right{transform:translateX(100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}.li-loaded #kasko-loader{opacity:0;transition:all .3s ease-out}#kasko-loader-wrapper.li-loaded{visibility:hidden}.spinner-loader:not(:requigray){animation:spinner-loader 1500ms infinite linear;border-radius:.5em;box-shadow:#025983 1.5em 0 0 0,#025983 1.1em 1.1em 0 0,#025983 0 1.5em 0 0,#025983 -1.1em 1.1em 0 0,#025983 -1.5em 0 0 0,#025983 -1.1em -1.1em 0 0,#025983 0 -1.5em 0 0,#025983 1.1em -1.1em 0 0;display:inline-block;font-size:10px;width:1em;height:1em;margin:1.5em;overflow:hidden;text-indent:100%}</style> <div id="kasko-loader-wrapper" class="hidden">   <div id="kasko-loader"></div>   <div class="loader-section section-left"></div>   <div class="loader-section section-right"></div> </div> <script>"use strict";function LoadingIndicator(){var o=this,t=null;function r(o){t||function(){for(var o=0;o<document.styleSheets.length;o+=1){var r=document.styleSheets.item(o);if("li-loader"===r.title){t=r;break}}}(),t&&t.insertRule(o)}function e(o){var t=RegExp("[?&]"+o+"=([^&]*)").exec(window.location.search);if(!t)return"";var r=decodeURIComponent(t[1].replace(/[+]/g," "));try{r=JSON.parse(r)}catch(o){}return r}this.init=function(){var t=e("loader_background_color"),r=e("loader_animation_colors"),n=document.getElementById("kasko-loader-wrapper");r&&o.setAnimationColors(r),t&&o.setBackdropColor(t),n&&n.classList.remove("hidden")},this.hide=function(){var o=document.getElementById("kasko-loader-wrapper");o&&o.classList.add("li-loaded")},this.setColors=function(t){o.setAnimationColors(t)},this.setAnimationColors=function(o){r("#kasko-loader{border-top-color:"+o[0]+"!important;}"),r("#kasko-loader::before{border-top-color:"+o[1]+"!important;}"),r("#kasko-loader::after{border-top-color:"+o[2]+"!important;}")},this.setBackdropColor=function(o){r("#kasko-loader-wrapper:not(.li-loaded){background:"+o+"!important;}"),r(".li-loaded .loader-section{background:"+o+"!important;}")}}var loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
 
   if (!config.colors) {
     config.colors = ['#ebbb2a', '#fff', '#a07c0f'];
@@ -9,10 +17,10 @@ module.exports = function (config = {}) {
     config.overlayColor = '#222';
   }
 
-  config.colors.forEach((color, index) => {
+  config.colors.forEach(function (color, index) {
     result = result.replace('\"@color' + (index + 1) + '\"', color);
   });
 
   result = result.replace(/\"@overlaycolor\"/g, config.overlayColor);
   return result;
-}
+};

package/dist/spinner/spinner.js

@@ -0,0 +1,18 @@
+'use strict';
+
+/**
+ * This function is used by gulp to replace LESS variables
+ * with actual values.
+ */
+module.exports = function () {
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var result = '<style title="li-loader">@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.hidden{display:none}#kasko-loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500}#kasko-loader-wrapper svg{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;z-index:1501;animation:spin 1s linear infinite}#kasko-loader-wrapper:not(.li-loaded){background:"@overlaycolor";opacity:1}.li-loaded svg{opacity:0;transition:all .3s ease-out}#kasko-loader-wrapper.li-loaded{visibility:hidden}</style>  <div id="kasko-loader-wrapper" class="hidden">   <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->   <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">     <defs>       <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">         <stop stop-color="#fff" stop-opacity="0" offset="0%"/>         <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>         <stop stop-color="#fff" offset="100%"/>       </linearGradient>     </defs>     <g fill="none" fill-rule="evenodd">       <g transform="translate(1 1)">         <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2"></path>         <circle fill="#fff" cx="36" cy="18" r="1"></circle>       </g>     </g>   </svg> </div>  <script>"use strict";function LoadingIndicator(){var o=this,t=null;function n(o){t||function(){for(var o=0;o<document.styleSheets.length;o+=1){var n=document.styleSheets.item(o);if("li-loader"===n.title){t=n;break}}}(),t&&t.insertRule(o)}function r(o){var t=RegExp("[?&]"+o+"=([^&]*)").exec(window.location.search);if(!t)return"";var n=decodeURIComponent(t[1].replace(/[+]/g," "));try{n=JSON.parse(n)}catch(o){}return n}this.init=function(){var t=r("loader_background_color"),n=r("loader_animation_colors"),a=document.getElementById("kasko-loader-wrapper");if(n){var e="string"==typeof n?n:n[0];o.setAnimationColors(e)}t&&o.setBackdropColor(t),a&&a.classList.remove("hidden")},this.hide=function(){var o=document.getElementById("kasko-loader-wrapper");o&&o.classList.add("li-loaded")},this.setAnimationColors=function(o){n("#kasko-loader-wrapper svg stop{stop-color:"+o+"!important;}"),n("#kasko-loader-wrapper svg circle{fill:"+o+"!important;}")},this.setBackdropColor=function(o){n("#kasko-loader-wrapper:not(.li-loaded){background:"+o+"!important;}")}}var loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
+
+  if (!config.overlayColor) {
+    config.overlayColor = '#222';
+  }
+
+  result = result.replace(/\"@overlaycolor\"/g, config.overlayColor);
+  return result;
+};

package/index.js

@@ -1 +1,4 @@
-module.exports = require('./dist/loader.js');
+module.exports = {
+  kaskoLoader: require('./dist/kasko-loader/kasko-loader.js'),
+  spinner: require('./dist/spinner/spinner.js'),
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kasko/fe-loading-indicator",
   "shortname": "fe-loading-indicator",
-  "version": "1.3.2",
+  "version": "2.0.0",
   "description": "Kasko frontend loading indicator",
   "license": "UNLICENSED",
   "main": "index.js",
@@ -15,8 +15,13 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-preset-env": "^1.7.0",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-plugin-import": "^2.12.0",
     "gulp": "^3.9.1",
-    "gulp-clean": "^0.4.0",
+    "gulp-babel": "^7.0.1",
     "gulp-csso": "^3.0.0",
     "gulp-less": "^3.3.2",
     "gulp-minify": "^2.1.0",
@@ -25,6 +30,7 @@
   },
   "scripts": {
     "build": "gulp",
-    "test": "echo 'No tests for this project!'"
+    "test": "npm run lint",
+    "lint": "eslint src/"
   }
 }

package/src/kasko-loader/loader.js

@@ -0,0 +1,88 @@
+function LoadingIndicator() {
+  let styleSheet = null;
+
+  function loadStyleSheet() {
+    for (let i = 0; i < document.styleSheets.length; i += 1) {
+      const styleSheetItem = document.styleSheets.item(i);
+
+      if (styleSheetItem.title === 'li-loader') {
+        styleSheet = styleSheetItem;
+        break;
+      }
+    }
+  }
+
+  function insertRule(rule) {
+    if (!styleSheet) {
+      loadStyleSheet();
+    }
+
+    if (styleSheet) {
+      styleSheet.insertRule(rule);
+    }
+  }
+
+  function getParameterByName(name) {
+    const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
+
+    if (!match) {
+      return '';
+    }
+
+    let decoded = decodeURIComponent(match[1].replace(/[+]/g, ' '));
+
+    // Attempt to json-decode
+    try {
+      decoded = JSON.parse(decoded);
+    } catch (e) {
+      // Do nothing..
+    }
+
+    return decoded;
+  }
+
+  this.init = () => {
+    const backdropColor = getParameterByName('loader_background_color');
+    const animationColors = getParameterByName('loader_animation_colors');
+    const elementById = document.getElementById('kasko-loader-wrapper');
+
+    if (animationColors) {
+      this.setAnimationColors(animationColors);
+    }
+
+    if (backdropColor) {
+      this.setBackdropColor(backdropColor);
+    }
+
+    if (elementById) {
+      elementById.classList.remove('hidden');
+    }
+  };
+
+  this.hide = () => {
+    const elementById = document.getElementById('kasko-loader-wrapper');
+
+    if (elementById) {
+      elementById.classList.add('li-loaded');
+    }
+  };
+
+  this.setColors = (colors) => {
+    this.setAnimationColors(colors);
+  };
+
+  this.setAnimationColors = (colors) => {
+    insertRule(`#kasko-loader{border-top-color:${colors[0]}!important;}`);
+    insertRule(`#kasko-loader::before{border-top-color:${colors[1]}!important;}`);
+    insertRule(`#kasko-loader::after{border-top-color:${colors[2]}!important;}`);
+  };
+
+  this.setBackdropColor = (color) => {
+    insertRule(`#kasko-loader-wrapper:not(.li-loaded){background:${color}!important;}`);
+    insertRule(`.li-loaded .loader-section{background:${color}!important;}`);
+  };
+}
+
+const loadingIndicator = new LoadingIndicator();
+window.LoadingIndicator = loadingIndicator;
+window.LoadingIndicator.init();

package/src/spinner/loader.html

@@ -0,0 +1,22 @@
+<link rel="stylesheet" href="loader.css">
+
+<div id="kasko-loader-wrapper" class="hidden">
+  <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+  <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+        <stop stop-color="#fff" stop-opacity="0" offset="0%"/>
+        <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
+        <stop stop-color="#fff" offset="100%"/>
+      </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+      <g transform="translate(1 1)">
+        <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2"></path>
+        <circle fill="#fff" cx="36" cy="18" r="1"></circle>
+      </g>
+    </g>
+  </svg>
+</div>
+
+<script href="loader.js"></script>

package/src/spinner/loader.js

@@ -0,0 +1,83 @@
+function LoadingIndicator() {
+  let styleSheet = null;
+
+  function loadStyleSheet() {
+    for (let i = 0; i < document.styleSheets.length; i += 1) {
+      const styleSheetItem = document.styleSheets.item(i);
+
+      if (styleSheetItem.title === 'li-loader') {
+        styleSheet = styleSheetItem;
+        break;
+      }
+    }
+  }
+
+  function insertRule(rule) {
+    if (!styleSheet) {
+      loadStyleSheet();
+    }
+
+    if (styleSheet) {
+      styleSheet.insertRule(rule);
+    }
+  }
+
+  function getParameterByName(name) {
+    const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
+
+    if (!match) {
+      return '';
+    }
+
+    let decoded = decodeURIComponent(match[1].replace(/[+]/g, ' '));
+
+    // Attempt to json-decode
+    try {
+      decoded = JSON.parse(decoded);
+    } catch (e) {
+      // Do nothing..
+    }
+
+    return decoded;
+  }
+
+  this.init = () => {
+    const backdropColor = getParameterByName('loader_background_color');
+    const animationColors = getParameterByName('loader_animation_colors');
+    const elementById = document.getElementById('kasko-loader-wrapper');
+
+    if (animationColors) {
+      const color = typeof animationColors === 'string' ? animationColors : animationColors[0];
+      this.setAnimationColors(color);
+    }
+
+    if (backdropColor) {
+      this.setBackdropColor(backdropColor);
+    }
+
+    if (elementById) {
+      elementById.classList.remove('hidden');
+    }
+  };
+
+  this.hide = () => {
+    const elementById = document.getElementById('kasko-loader-wrapper');
+
+    if (elementById) {
+      elementById.classList.add('li-loaded');
+    }
+  };
+
+  this.setAnimationColors = (color) => {
+    insertRule(`#kasko-loader-wrapper svg stop{stop-color:${color}!important;}`);
+    insertRule(`#kasko-loader-wrapper svg circle{fill:${color}!important;}`);
+  };
+
+  this.setBackdropColor = (color) => {
+    insertRule(`#kasko-loader-wrapper:not(.li-loaded){background:${color}!important;}`);
+  };
+}
+
+const loadingIndicator = new LoadingIndicator();
+window.LoadingIndicator = loadingIndicator;
+window.LoadingIndicator.init();

package/src/spinner/loader.less

@@ -0,0 +1,48 @@
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+#kasko-loader-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1500;
+}
+
+#kasko-loader-wrapper svg {
+  display: block;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  width: 150px;
+  height: 150px;
+  margin: -75px 0 0 -75px;
+  z-index: 1501;
+  animation: spin 1s linear infinite;
+}
+
+#kasko-loader-wrapper:not(.li-loaded) {
+  background: "@overlaycolor";
+  opacity: 1;
+}
+
+.li-loaded svg {
+  opacity: 0;
+  transition: all 0.3s ease-out;
+}
+
+#kasko-loader-wrapper.li-loaded {
+  visibility: hidden;
+}

package/src/loader.js

@@ -1,40 +0,0 @@
-function LoadingIndicator() {
-  this.init = function () {
-    var elementById = document.getElementById('kasko-loader-wrapper');
-
-    if (elementById) {
-      elementById.classList.remove('hidden');
-    }
-  };
-
-  this.hide = function () {
-    const elementById = document.getElementById('kasko-loader-wrapper');
-
-    if (elementById) {
-      elementById.classList.add('li-loaded');
-    }
-  };
-
-  this.setColors = function (colors) {
-    var styleSheet;
-
-    for (var i = 0; i < document.styleSheets.length; i++) {
-      var styleSheetItem = document.styleSheets.item(i);
-
-      if (styleSheetItem.title === 'li-loader') {
-        styleSheet = styleSheetItem;
-        break;
-      }
-    }
-
-    if (styleSheet) {
-      styleSheet.insertRule('#loader { border-top-color:' + colors[0] + '!important;}');
-      styleSheet.insertRule('#loader::before { border-top-color:' + colors[1] + '!important;}');
-      styleSheet.insertRule('#loader::after { border-top-color:' + colors[2] + '!important;}');
-    }
-  };
-}
-
-const loadingIndicator = new LoadingIndicator();
-window.LoadingIndicator = loadingIndicator;
-window.LoadingIndicator.init();