@kasko/fe-loading-indicator 1.0.3 → 1.1.1

package/README.md

@@ -1 +1,30 @@
-# fe-loading-indicator-lib
+# FE loading indicator library
+
+## Installation
+```sh
+yarn install
+yarn build
+```
+
+## Installing in other projects
+```sh
+yarn add @kasko/fe-loading-indicator
+```
+
+### Using in other projects
+Requiring `@kasko/fe-loading-indicator` will return string that could be injected in 
+HTML using 'HtmlWebpackPlugin'.
+```js
+const loader = require('@kasko/fe-loading-indicator')();
+```
+
+Module accepts configuration object, where custom CSS loading colors could be provided e.g.
+```js
+{
+  colors: ['red', 'green', 'white']
+}
+```
+Loader adds global `LoadingIndicator` instance, for more information see in [type definitions](dist/loader.d.ts)
+
+### Hiding loader
+Call `window.LoadingIndicator.hide()` to hide loading indicator

package/dist/loader.d.ts

@@ -0,0 +1,22 @@
+declare var LoadingIndicator: LoadingIndicator;
+declare global {
+  interface Window {
+    LoadingIndicator: LoadingIndicator;
+  }
+}
+
+export interface LoadingIndicator {
+  /**
+   * Hides loading indicator
+   */
+  hide: () => void;
+
+  /**
+   * Sets custom CSS colors for loading indicators.
+   * Currently supported 3 colors.
+   * Default values ['#ebbb2a', '#fff', '#a07c0f']
+   *
+   * @param {string[]} colors
+   */
+  setColors: (colors: string[]) => void;
+}

package/dist/loader.js

@@ -0,0 +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)}}#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500}#loader-wrapper:not(.li-loaded){background:#222;opacity:.9}#loader,#loader::after,#loader::before{border-radius:50%;border:3px solid transparent}#loader{display:block;width:150px;height:150px;margin:-75px 0 0 -75px;z-index:1501;position:relative;left:50%;top:50%;border-top-color:"@color1";animation:spin 2s linear infinite}#loader::after,#loader::before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-top-color:"@color2";animation:spin 3s linear infinite}#loader::after{top:15px;left:15px;right:15px;bottom:15px;border-top-color:"@color3";animation:spin 1.5s linear infinite}#loader-wrapper .loader-section{position:fixed;top:0;width:50%;height:100%;z-index:1500;transform:translateX(0)}.li-loaded .loader-section{background:#222;opacity:.9}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}#loader-wrapper.li-loaded .loader-section.section-left{transform:translateX(-100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}#loader-wrapper.li-loaded .loader-section.section-right{transform:translateX(100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}.li-loaded #loader{opacity:0;transition:all .3s ease-out}#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> <script>function LoadingIndicator(){this.hide=function(){const o=document.getElementById("loader-wrapper");o&&o.classList.add("li-loaded")},this.setColors=function(o){for(var e,t=0;t<document.styleSheets.length;t++){var r=document.styleSheets.item(t);if("li-loader"===r.title){e=r;break}}e&&(e.insertRule("#loader { border-top-color:"+o[0]+"!important;}"),e.insertRule("#loader::before { border-top-color:"+o[1]+"!important;}"),e.insertRule("#loader::after { border-top-color:"+o[2]+"!important;}"))}}window.LoadingIndicator=new LoadingIndicator;</script> <div id="loader-wrapper">   <div id="loader"></div>   <div class="loader-section section-left"></div>   <div class="loader-section section-right"></div> </div> ';
+
+  if (!config.colors) {
+    config.colors = ['#ebbb2a', '#fff', '#a07c0f']
+  }
+
+  config.colors.forEach((color, index) => {
+    result = result.replace('\"@color' + (index + 1) + '\"', color);
+  });
+
+  return result;
+}

package/gulpfile.js

@@ -1,13 +1,11 @@
 const gulp = require('gulp');
 const less = require('gulp-less');
 const minifyCSS = require('gulp-csso');
-const inlineCss = require('gulp-inline-css');
 const runSequence = require('run-sequence');
-const htmlmin = require('gulp-htmlmin');
 const clean = require('gulp-clean');
-const htmlToJs = require('gulp-html-to-js');
 const replace = require('gulp-replace');
 const fs = require('fs');
+const minify = require('gulp-minify');
 
 gulp.task('clean', function () {
   return gulp.src(['.tmp'], { read: false }).pipe(clean());
@@ -25,21 +23,35 @@ gulp.task('css', function () {
     .pipe(gulp.dest('.tmp/html'))
 });
 
-gulp.task('inline:css', function () {
+gulp.task('inline', function () {
   return gulp.src('.tmp/html/*.html')
-    .pipe(replace(/<link rel="stylesheet" href="loader.css">/, function (s) {
+    .pipe(replace(/<script href="loader.js"><\/script>/, function () {
+      const script = fs.readFileSync('./.tmp/loader-min.js', 'utf8');
+      return '<script>' + script + '</script>';
+    }))
+    .pipe(replace(/<link rel="stylesheet" href="loader.css">/, function () {
       const style = fs.readFileSync('.tmp/html/loader.css', 'utf8');
-      return '<style>' + style + '</style>';
+      return '<style title="li-loader">' + style + '</style>';
     }))
     .pipe(gulp.dest('./.tmp'));
 });
 
+gulp.task('compress', function () {
+  gulp.src('./src/loader.js')
+    .pipe(minify())
+    .pipe(gulp.dest('./.tmp'))
+});
+
 gulp.task('compile', function () {
-  return gulp.src('.tmp/loader.html')
-    .pipe(htmlToJs())
-    .pipe(gulp.dest('dist'));
+  return gulp.src('./conf/loader.js')
+    .pipe(replace(/\$template/, function () {
+      const content = fs.readFileSync('./.tmp/loader.html', 'utf8');
+
+      return content.toString().replace(/\n|\t/g, ' ');
+    }))
+    .pipe(gulp.dest('./dist'));
 });
 
 gulp.task('default', function (callback) {
-  runSequence(['clean'], ['html', 'css'], ['inline:css'], ['compile'], ['clean'], callback);
-});
+  runSequence(['clean'], ['html', 'css', 'compress'], ['inline'], ['compile'], ['clean'], callback);
+});

package/index.js

@@ -1 +1 @@
-module.exports = require('./dist/loader.html.js');
+module.exports = require('./dist/loader.js');

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@kasko/fe-loading-indicator",
   "shortname": "fe-loading-indicator",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "description": "Kasko frontend loading indicator",
   "license": "UNLICENSED",
-  "main": "npdist/loader.html.js",
+  "main": "index.js",
   "less": "src/loader.less",
   "repository": {
     "type": "git",
@@ -13,20 +13,18 @@
   "bugs": {
     "url": "https://github.com/kasko/fe-loading-indicator-lib/issues"
   },
-  "dependencies": {
-    "gulp-clean": "^0.3.2",
-    "gulp-replace": "^0.6.1"
-  },
+  "dependencies": {},
   "devDependencies": {
     "gulp": "^3.9.1",
+    "gulp-clean": "^0.3.2",
     "gulp-csso": "^3.0.0",
-    "gulp-html-to-js": "^0.0.5",
-    "gulp-htmlmin": "^3.0.0",
-    "gulp-inline-css": "^3.1.0",
     "gulp-less": "^3.3.2",
+    "gulp-minify": "^1.0.0",
+    "gulp-replace": "^0.6.1",
     "run-sequence": "^2.2.0"
   },
   "scripts": {
-    "build": "gulp"
+    "build": "gulp",
+    "test": "echo 'No tests for this project!'"
   }
 }

package/src/loader.html

@@ -1,6 +1,7 @@
 <link rel="stylesheet" href="loader.css">
+<script href="loader.js"></script>
 <div id="loader-wrapper">
-    <div id="loader"></div>
-    <div class="loader-section section-left"></div>
-    <div class="loader-section section-right"></div>
-</div>
+  <div id="loader"></div>
+  <div class="loader-section section-left"></div>
+  <div class="loader-section section-right"></div>
+</div>

package/src/loader.js

@@ -0,0 +1,30 @@
+function LoadingIndicator() {
+  this.hide = function () {
+    const elementById = document.getElementById('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;}');
+    }
+  };
+}
+
+window.LoadingIndicator = new LoadingIndicator();

package/src/loader.less

@@ -17,6 +17,11 @@
   z-index: 1500;
 }
 
+#loader-wrapper:not(.li-loaded) {
+  background: #222;
+  opacity: .9;
+}
+
 #loader {
   display: block;
   position: relative;
@@ -27,7 +32,7 @@
   margin: -75px 0 0 -75px;
   border-radius: 50%;
   border: 3px solid transparent;
-  //border-top-color: @brand-primary;
+  border-top-color: "@color1";
   animation: spin 2s linear infinite;
   z-index: 1501;
 }
@@ -41,7 +46,7 @@
   bottom: 5px;
   border-radius: 50%;
   border: 3px solid transparent;
-  border-top-color: #fff;
+  border-top-color: "@color2";
   animation: spin 3s linear infinite;
 }
 
@@ -54,7 +59,7 @@
   bottom: 15px;
   border-radius: 50%;
   border: 3px solid transparent;
-  //border-top-color: darken(@brand-primary, 20%);
+  border-top-color: "@color3";
   animation: spin 1.5s linear infinite;
 }
 
@@ -73,12 +78,15 @@
   top: 0;
   width: 50%;
   height: 100%;
-  background: #222;
-  opacity: 0.9;
   z-index: 1500;
   transform: translateX(0);
 }
 
+.li-loaded .loader-section {
+  background: #222;
+  opacity: .9;
+}
+
 #loader-wrapper .loader-section.section-left {
   left: 0;
 }
@@ -89,28 +97,26 @@
 
 /* Loaded */
 
-#loader-wrapper.loaded .loader-section.section-left {
+#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);
 }
 
-#loader-wrapper.loaded .loader-section.section-right {
+#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);
 }
 
-.loaded #loader {
+.li-loaded #loader {
   opacity: 0;
   transition: all 0.3s ease-out;
 }
 
-#loader-wrapper.loaded {
+#loader-wrapper.li-loaded {
   visibility: hidden;
-  transform: translateY(-100%);
-  transition: all 0.3s 1s ease-out;
 }
 
-.spinner-loader:not(:required) {
+.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;
@@ -121,4 +127,4 @@
   margin: 1.5em;
   overflow: hidden;
   text-indent: 100%;
-}
+}

package/conf/loader.js

@@ -1,2 +0,0 @@
-const test = require('../dist')
-console.log(test);

package/dist/loader.html.js

@@ -1,2 +0,0 @@
-'use strict';
-module.exports = '<style>@keyframes spinner-loader{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500}#loader,#loader::after,#loader::before{border-radius:50%;border:3px solid transparent}#loader{display:block;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;animation:spin 2s linear infinite;z-index:1501;position:relative}#loader::after,#loader::before{content:"";position:absolute}#loader::before{border-top-color:#fff;top:5px;left:5px;right:5px;bottom:5px;animation:spin 3s linear infinite}#loader::after{top:15px;left:15px;right:15px;bottom:15px;animation:spin 1.5s linear infinite}#loader-wrapper .loader-section{position:fixed;top:0;width:50%;height:100%;background:#222;opacity:.9;z-index:1500;transform:translateX(0)}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}#loader-wrapper.loaded .loader-section.section-left,#loader-wrapper.loaded .loader-section.section-right{transform:translateX(-100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}#loader-wrapper.loaded .loader-section.section-right{transform:translateX(100%)}.loaded #loader{opacity:0;transition:all .3s ease-out}#loader-wrapper.loaded{visibility:hidden;transform:translateY(-100%);transition:all .3s 1s ease-out}.spinner-loader:not(:required){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>\n<div id="loader-wrapper">\n    <div id="loader"></div>\n    <div class="loader-section section-left"></div>\n    <div class="loader-section section-right"></div>\n</div>';