ng2-slim-loading-bar
Version:
Angular2 component shows slim loading bar at the top of the page
406 lines (379 loc) • 19.1 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("@angular/core"), require("rxjs/Subject"));
else if(typeof define === 'function' && define.amd)
define(["@angular/core", "rxjs/Subject"], factory);
else if(typeof exports === 'object')
exports["ng2-slim-loading-bar"] = factory(require("@angular/core"), require("rxjs/Subject"));
else
root["ng2-slim-loading-bar"] = factory(root["@angular/core"], root["rxjs/Subject"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_4__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 5);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__angular_core__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__slim_loading_bar_utils__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_rxjs_Subject__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_rxjs_Subject___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_rxjs_Subject__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SlimLoadingBarEventType; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return SlimLoadingBarEvent; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return SlimLoadingBarService; });
// Copyright (C) 2016 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-slim-loading-bar
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var SlimLoadingBarEventType;
(function (SlimLoadingBarEventType) {
SlimLoadingBarEventType[SlimLoadingBarEventType["PROGRESS"] = 0] = "PROGRESS";
SlimLoadingBarEventType[SlimLoadingBarEventType["HEIGHT"] = 1] = "HEIGHT";
SlimLoadingBarEventType[SlimLoadingBarEventType["COLOR"] = 2] = "COLOR";
SlimLoadingBarEventType[SlimLoadingBarEventType["VISIBLE"] = 3] = "VISIBLE";
})(SlimLoadingBarEventType || (SlimLoadingBarEventType = {}));
var SlimLoadingBarEvent = (function () {
function SlimLoadingBarEvent(type, value) {
this.type = type;
this.value = value;
}
return SlimLoadingBarEvent;
}());
/**
* SlimLoadingBar service helps manage Slim Loading bar on the top of screen or parent component
*/
var SlimLoadingBarService = (function () {
function SlimLoadingBarService() {
this._progress = 0;
this._height = '2px';
this._color = 'firebrick';
this._visible = true;
this._intervalCounterId = 0;
this.interval = 500; // in milliseconds
this.eventSource = new __WEBPACK_IMPORTED_MODULE_2_rxjs_Subject__["Subject"]();
this.events = this.eventSource.asObservable();
}
Object.defineProperty(SlimLoadingBarService.prototype, "progress", {
get: function () {
return this._progress;
},
set: function (value) {
if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__slim_loading_bar_utils__["a" /* isPresent */])(value)) {
if (value > 0) {
this.visible = true;
}
this._progress = value;
this.emitEvent(new SlimLoadingBarEvent(SlimLoadingBarEventType.PROGRESS, this._progress));
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(SlimLoadingBarService.prototype, "height", {
get: function () {
return this._height;
},
set: function (value) {
if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__slim_loading_bar_utils__["a" /* isPresent */])(value)) {
this._height = value;
this.emitEvent(new SlimLoadingBarEvent(SlimLoadingBarEventType.HEIGHT, this._height));
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(SlimLoadingBarService.prototype, "color", {
get: function () {
return this._color;
},
set: function (value) {
if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__slim_loading_bar_utils__["a" /* isPresent */])(value)) {
this._color = value;
this.emitEvent(new SlimLoadingBarEvent(SlimLoadingBarEventType.COLOR, this._color));
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(SlimLoadingBarService.prototype, "visible", {
get: function () {
return this._visible;
},
set: function (value) {
if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__slim_loading_bar_utils__["a" /* isPresent */])(value)) {
this._visible = value;
this.emitEvent(new SlimLoadingBarEvent(SlimLoadingBarEventType.VISIBLE, this._visible));
}
},
enumerable: true,
configurable: true
});
SlimLoadingBarService.prototype.emitEvent = function (event) {
if (this.eventSource) {
// Push up a new event
this.eventSource.next(event);
}
};
SlimLoadingBarService.prototype.start = function (onCompleted) {
var _this = this;
if (onCompleted === void 0) { onCompleted = null; }
// Stop current timer
this.stop();
// Make it visible for sure
this.visible = true;
// Run the timer with milliseconds iterval
this._intervalCounterId = setInterval(function () {
// Increment the progress and update view component
_this.progress++;
// If the progress is 100% - call complete
if (_this.progress === 100) {
_this.complete();
}
}, this.interval);
};
SlimLoadingBarService.prototype.stop = function () {
if (this._intervalCounterId) {
clearInterval(this._intervalCounterId);
this._intervalCounterId = null;
}
};
SlimLoadingBarService.prototype.reset = function () {
this.stop();
this.progress = 0;
};
SlimLoadingBarService.prototype.complete = function () {
var _this = this;
this.progress = 100;
this.stop();
setTimeout(function () {
// Hide it away
_this.visible = false;
setTimeout(function () {
// Drop to 0
_this.progress = 0;
}, 250);
}, 250);
};
SlimLoadingBarService = __decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Injectable"])(),
__metadata('design:paramtypes', [])
], SlimLoadingBarService);
return SlimLoadingBarService;
}());
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__angular_core__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__slim_loading_bar_service__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__slim_loading_bar_utils__ = __webpack_require__(3);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SlimLoadingBarComponent; });
// Copyright (C) 2016 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-slim-loading-bar
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
/**
* A Slim Loading Bar component shows message loading progress bar on the top of web page or parent component.
*/
var SlimLoadingBarComponent = (function () {
function SlimLoadingBarComponent(service) {
this.service = service;
this.progress = '0';
this.color = 'firebrick';
this.height = '2px';
this.show = true;
}
SlimLoadingBarComponent.prototype.ngOnInit = function () {
var _this = this;
this.service.events.subscribe(function (event) {
if (event.type === __WEBPACK_IMPORTED_MODULE_1__slim_loading_bar_service__["a" /* SlimLoadingBarEventType */].PROGRESS && __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__slim_loading_bar_utils__["a" /* isPresent */])(event.value)) {
_this.progress = event.value;
}
else if (event.type === __WEBPACK_IMPORTED_MODULE_1__slim_loading_bar_service__["a" /* SlimLoadingBarEventType */].COLOR) {
_this.color = event.value;
}
else if (event.type === __WEBPACK_IMPORTED_MODULE_1__slim_loading_bar_service__["a" /* SlimLoadingBarEventType */].HEIGHT) {
_this.height = event.value;
}
else if (event.type === __WEBPACK_IMPORTED_MODULE_1__slim_loading_bar_service__["a" /* SlimLoadingBarEventType */].VISIBLE) {
_this.show = event.value;
}
});
};
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(),
__metadata('design:type', String)
], SlimLoadingBarComponent.prototype, "progress", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(),
__metadata('design:type', String)
], SlimLoadingBarComponent.prototype, "color", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(),
__metadata('design:type', String)
], SlimLoadingBarComponent.prototype, "height", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(),
__metadata('design:type', Boolean)
], SlimLoadingBarComponent.prototype, "show", void 0);
SlimLoadingBarComponent = __decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
selector: 'ng2-slim-loading-bar',
template: "\n<div class=\"slim-loading-bar\">\n <div class=\"slim-loading-bar-progress\" [style.width]=\"progress + '%'\" [style.backgroundColor]=\"color\" [style.color]=\"color\"\n [style.height]=\"height\" [style.opacity]=\"show ? '1' : '0'\"></div>\n</div>"
}),
__metadata('design:paramtypes', [(typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_1__slim_loading_bar_service__["c" /* SlimLoadingBarService */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_1__slim_loading_bar_service__["c" /* SlimLoadingBarService */]) === 'function' && _a) || Object])
], SlimLoadingBarComponent);
return SlimLoadingBarComponent;
var _a;
}());
/***/ }),
/* 3 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
/* harmony export (immutable) */ __webpack_exports__["a"] = isPresent;
/**
* Check and return true if an object not undefined or null
*/
function isPresent(obj) {
return obj !== undefined && obj !== null;
}
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
/***/ }),
/* 5 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__angular_core__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__src_slim_loading_bar_component__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__src_slim_loading_bar_service__ = __webpack_require__(0);
/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "SlimLoadingBarComponent", function() { return __WEBPACK_IMPORTED_MODULE_1__src_slim_loading_bar_component__["a"]; });
/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "SlimLoadingBarEventType", function() { return __WEBPACK_IMPORTED_MODULE_2__src_slim_loading_bar_service__["a"]; });
/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "SlimLoadingBarEvent", function() { return __WEBPACK_IMPORTED_MODULE_2__src_slim_loading_bar_service__["b"]; });
/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "SlimLoadingBarService", function() { return __WEBPACK_IMPORTED_MODULE_2__src_slim_loading_bar_service__["c"]; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SlimLoadingBarModule", function() { return SlimLoadingBarModule; });
// Copyright (C) 2016 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-slim-loading-bar
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var SlimLoadingBarModule = (function () {
function SlimLoadingBarModule() {
}
SlimLoadingBarModule.forRoot = function () {
return {
ngModule: SlimLoadingBarModule,
providers: [__WEBPACK_IMPORTED_MODULE_2__src_slim_loading_bar_service__["c" /* SlimLoadingBarService */]]
};
};
SlimLoadingBarModule = __decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["NgModule"])({
declarations: [__WEBPACK_IMPORTED_MODULE_1__src_slim_loading_bar_component__["a" /* SlimLoadingBarComponent */]],
exports: [__WEBPACK_IMPORTED_MODULE_1__src_slim_loading_bar_component__["a" /* SlimLoadingBarComponent */]],
providers: [__WEBPACK_IMPORTED_MODULE_2__src_slim_loading_bar_service__["c" /* SlimLoadingBarService */]]
}),
__metadata('design:paramtypes', [])
], SlimLoadingBarModule);
return SlimLoadingBarModule;
}());
/***/ })
/******/ ]);
});