@kasko/fe-loading-indicator 1.3.2 → 2.0.1

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,18 +1,16 @@
-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";
 
-  if (!config.colors) {
-    config.colors = ['#ebbb2a', '#fff', '#a07c0f'];
-  }
-
-  if (!config.overlayColor) {
-    config.overlayColor = '#222';
-  }
-
-  config.colors.forEach((color, index) => {
-    result = result.replace('\"@color' + (index + 1) + '\"', color);
+/**
+ * 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 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 a(o){var t=RegExp("[?&]".concat(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=a("loader_background_color"),n=a("loader_animation_colors"),r=document.getElementById("kasko-loader-wrapper");n&&o.setAnimationColors(n),t&&o.setBackdropColor(t),r&&r.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){n("#kasko-loader{border-top-color:".concat(o[0],"!important;}")),n("#kasko-loader::before{border-top-color:".concat(o[1],"!important;}")),n("#kasko-loader::after{border-top-color:".concat(o[2],"!important;}"))},this.setBackdropColor=function(o){n("#kasko-loader-wrapper:not(.li-loaded){background:".concat(o,"!important;}")),n(".li-loaded .loader-section{background:".concat(o,"!important;}"))}}var loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
+  var colors = config.colors || ['#ebbb2a', '#fff', '#a07c0f'];
+  colors.forEach(function (color, index) {
+    result = result.replace("\"@color".concat(index + 1, "\""), color);
   });
-
-  result = result.replace(/\"@overlaycolor\"/g, config.overlayColor);
+  result = result.replace(/"@overlaycolor"/g, config.overlayColor || '#222');
   return result;
-}
+};

package/dist/spinner/spinner.js

@@ -0,0 +1,12 @@
+"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 a(o){var t=RegExp("[?&]".concat(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=a("loader_background_color"),n=a("loader_animation_colors"),r=document.getElementById("kasko-loader-wrapper");if(n){var e="string"==typeof n?n:n[0];o.setAnimationColors(e)}t&&o.setBackdropColor(t),r&&r.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:".concat(o,"!important;}")),n("#kasko-loader-wrapper svg circle{fill:".concat(o,"!important;}"))},this.setBackdropColor=function(o){n("#kasko-loader-wrapper:not(.li-loaded){background:".concat(o,"!important;}"))}}var loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
+  result = result.replace(/"@overlaycolor"/g, config.overlayColor || '#222');
+  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.1",
   "description": "Kasko frontend loading indicator",
   "license": "UNLICENSED",
   "main": "index.js",
@@ -15,16 +15,29 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "gulp": "^3.9.1",
-    "gulp-clean": "^0.4.0",
+    "@babel/core": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "axios": "^0.19.0",
+    "del": "^5.0.0",
+    "eslint": "^6.1.0",
+    "eslint-config-kasko-base": "^1.1.1",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
     "gulp-csso": "^3.0.0",
-    "gulp-less": "^3.3.2",
-    "gulp-minify": "^2.1.0",
-    "gulp-replace": "^0.6.1",
-    "run-sequence": "^2.2.0"
+    "gulp-less": "^4.0.1",
+    "gulp-minify": "^3.1.0",
+    "gulp-replace": "^1.0.0"
   },
   "scripts": {
     "build": "gulp",
-    "test": "echo 'No tests for this project!'"
-  }
+    "test": "yarn lint",
+    "lint": "yarn lint:src && yarn lint:other",
+    "lint:src": "eslint src/ --env browser",
+    "lint:other": "eslint . --ignore-pattern src --ignore-pattern dist --ignore-pattern index.js --env node"
+  },
+  "files": [
+    "dist/*",
+    "index.js",
+    "README.md"
+  ]
 }

package/src/loader.html

@@ -1,7 +0,0 @@
-<link rel="stylesheet" href="loader.css">
-<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 href="loader.js"></script>

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();

package/src/loader.less

@@ -1,134 +0,0 @@
-@keyframes spinner-loader {
-  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: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::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 {
-  content: "";
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: "@color3";
-  animation: spin 1.5s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-#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;
-}
-
-/* Loaded */
-
-#kasko-loader-wrapper.li-loaded .loader-section.section-left {
-  transform: translateX(-100%);
-  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-#kasko-loader-wrapper.li-loaded .loader-section.section-right {
-  transform: translateX(100%);
-  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-.li-loaded #kasko-loader {
-  opacity: 0;
-  transition: all 0.3s ease-out;
-}
-
-#kasko-loader-wrapper.li-loaded {
-  visibility: hidden;
-}
-
-.spinner-loader:not(:requigray) {
-  animation: spinner-loader 1500ms infinite linear;
-  border-radius: 0.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%;
-}