angular2-promise-buttons - npm Package Compare versions

Comparing version 0.1.5 to 1.0.0

CHANGELOG.md

@@ -0,1 +1,20 @@
+<a name="1.0.0"></a>
+# [1.0.0](https://github.com/johannesjo/angular2-promise-buttons/compare/v0.1.5...v1.0.0) (2017-05-09)
+
+
+### Bug Fixes
+
+* add jasmine types again to tsconfig ([e59f8bb](https://github.com/johannesjo/angular2-promise-buttons/commit/e59f8bb))
+* aot and prod build not working ([5e3fd11](https://github.com/johannesjo/angular2-promise-buttons/commit/5e3fd11))
+* build tsconfig for building the module ([885b185](https://github.com/johannesjo/angular2-promise-buttons/commit/885b185))
+* forRoot containing conditional logic ([a6b52f6](https://github.com/johannesjo/angular2-promise-buttons/commit/a6b52f6))
+
+
+### Features
+
+* add readme ([52f84a7](https://github.com/johannesjo/angular2-promise-buttons/commit/52f84a7))
+* use Renderer2 for adding and removing classes ([e2c9555](https://github.com/johannesjo/angular2-promise-buttons/commit/e2c9555))
+
+
+
 <a name="0.1.5"></a>
@@ -2,0 +21,0 @@ ## [0.1.5](https://github.com/johannesjo/angular2-promise-buttons/compare/v0.1.4...v0.1.5) (2017-05-05)

dist/index.d.ts

@@ -1,2 +0,2 @@
-export declare class Angular2PromiseButtonModule {
-}
+export { PromiseBtnDirective } from './promise-btn.directive';
+export { Angular2PromiseButtonModule } from './angular2-promise-buttons.module';

dist/index.js

@@ -1,32 +0,3 @@
-"use strict";
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@angular/core");
-var promise_btn_directive_1 = require("./promise-btn.directive");
-var angular2_promise_button_component_1 = require("./angular2-promise-button.component");
-var Angular2PromiseButtonModule = (function () {
-    function Angular2PromiseButtonModule() {
-    }
-    return Angular2PromiseButtonModule;
-}());
-Angular2PromiseButtonModule = __decorate([
-    core_1.NgModule({
-        declarations: [
-            promise_btn_directive_1.PromiseBtnDirective,
-            angular2_promise_button_component_1.Angular2PromiseButtonComponent,
-        ],
-        imports: [],
-        exports: [
-            promise_btn_directive_1.PromiseBtnDirective,
-            angular2_promise_button_component_1.Angular2PromiseButtonComponent,
-        ],
-        providers: []
-    })
-], Angular2PromiseButtonModule);
-exports.Angular2PromiseButtonModule = Angular2PromiseButtonModule;
-//# sourceMappingURL=index.js.map
+export { PromiseBtnDirective } from './promise-btn.directive';
+export { Angular2PromiseButtonModule } from './angular2-promise-buttons.module';
+//# sourceMappingURL=/home/johannes/www/angular2-promise-buttons/index.js.map

dist/promise-btn.directive.d.ts

@@ -1,4 +0,73 @@
-import { ElementRef } from '@angular/core';
-export declare class PromiseBtnDirective {
-    constructor(el: ElementRef);
+import { AfterContentInit, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
+import { PromiseBtnConfig } from './promise-btn-config';
+export declare class PromiseBtnDirective implements OnDestroy, AfterContentInit {
+    private renderer;
+    cfg: PromiseBtnConfig;
+    promiseWatcher: any;
+    minDurationTimeout: number;
+    isMinDurationTimeoutDone: boolean;
+    isPromiseDone: boolean;
+    btnEl: HTMLElement;
+    promise: any;
+    constructor(el: ElementRef, userCfg: any, renderer: Renderer2);
+    promiseBtn: any;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Initializes all html and event handlers
+     * @param {Object}btnEl
+     */
+    prepareBtnEl(btnEl: HTMLElement): void;
+    /**
+     * Checks if all required parameters are there and inits the promise handler
+     * @param {Object}btnEl
+     */
+    checkAndInitPromiseHandler(btnEl: HTMLElement): void;
+    /**
+     * Helper FN to add class
+     * @param {Object}el
+     */
+    addLoadingClass(el: any): void;
+    /**
+     * Helper FN to remove classes
+     * @param {Object}el
+     */
+    removeLoadingClass(el: any): void;
+    /**
+     * Handles everything to be triggered when the button is set
+     * to loading state.
+     * @param {Object}btnEl
+     */
+    initLoadingState(btnEl: HTMLElement): void;
+    /**
+     * Handles everything to be triggered when loading is finished
+     * @param {Object}btnEl
+     */
+    cancelLoadingStateIfPromiseAndMinDurationDone(btnEl: HTMLElement): void;
+    /**
+     * @param {Object}btnEl
+     */
+    disableBtn(btnEl: HTMLElement): void;
+    /**
+     * @param {Object}btnEl
+     */
+    enableBtn(btnEl: HTMLElement): void;
+    /**
+     * Initializes a watcher for the promise. Also takes
+     * this.cfg.minDuration into account if given.
+     * @param {Object}promise
+     * @param {Object}btnEl
+     */
+    initPromiseHandler(promise: any, btnEl: HTMLElement): void;
+    /**
+     * $compile and append the spinner template to the button.
+     * @param {Object}btnEl
+     */
+    appendSpinnerTpl(btnEl: HTMLElement): void;
+    /**
+     * Used to limit loading state to show only for the currently
+     * clicked button.
+     * @param {Object}btnEl
+     */
+    addHandlersForCurrentBtnOnlyIfSet(btnEl: HTMLElement): void;
 }

dist/promise-btn.directive.js

@@ -1,2 +0,1 @@
-"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -11,17 +10,186 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@angular/core");
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { Directive, ElementRef, Inject, Input, Renderer2 } from '@angular/core';
+import { DEFAULT_CFG } from './default-promise-btn-config';
+import { userCfg } from './user-cfg';
 var PromiseBtnDirective = (function () {
-    function PromiseBtnDirective(el) {
-        el.nativeElement.innerHTML = 'xxxxxxxxxxx';
+    function PromiseBtnDirective(el, userCfg, renderer) {
+        this.renderer = renderer;
+        // provide configuration
+        this.cfg = Object.assign({}, DEFAULT_CFG, userCfg);
+        // save element
+        this.btnEl = el.nativeElement;
     }
+    Object.defineProperty(PromiseBtnDirective.prototype, "promiseBtn", {
+        set: function (promise) {
+            this.promise = promise;
+            this.checkAndInitPromiseHandler(this.btnEl);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    PromiseBtnDirective.prototype.ngAfterContentInit = function () {
+        this.prepareBtnEl(this.btnEl);
+        // trigger changes once to handle initial promises
+        this.checkAndInitPromiseHandler(this.btnEl);
+    };
+    PromiseBtnDirective.prototype.ngOnDestroy = function () {
+        // cleanup
+        if (this.minDurationTimeout) {
+            clearTimeout(this.minDurationTimeout);
+        }
+    };
+    /**
+     * Initializes all html and event handlers
+     * @param {Object}btnEl
+     */
+    PromiseBtnDirective.prototype.prepareBtnEl = function (btnEl) {
+        // handle promises passed via promiseBtn attribute
+        this.appendSpinnerTpl(btnEl);
+        this.addHandlersForCurrentBtnOnlyIfSet(btnEl);
+    };
+    /**
+     * Checks if all required parameters are there and inits the promise handler
+     * @param {Object}btnEl
+     */
+    PromiseBtnDirective.prototype.checkAndInitPromiseHandler = function (btnEl) {
+        if (btnEl && this.promise) {
+            if (!this.promiseWatcher) {
+                this.initPromiseHandler(this.promise, btnEl);
+            }
+        }
+    };
+    /**
+     * Helper FN to add class
+     * @param {Object}el
+     */
+    PromiseBtnDirective.prototype.addLoadingClass = function (el) {
+        if (typeof this.cfg.btnLoadingClass === 'string') {
+            this.renderer.addClass(el, this.cfg.btnLoadingClass);
+        }
+    };
+    /**
+     * Helper FN to remove classes
+     * @param {Object}el
+     */
+    PromiseBtnDirective.prototype.removeLoadingClass = function (el) {
+        if (typeof this.cfg.btnLoadingClass === 'string') {
+            this.renderer.removeClass(el, this.cfg.btnLoadingClass);
+        }
+    };
+    /**
+     * Handles everything to be triggered when the button is set
+     * to loading state.
+     * @param {Object}btnEl
+     */
+    PromiseBtnDirective.prototype.initLoadingState = function (btnEl) {
+        if (this.cfg.btnLoadingClass) {
+            this.addLoadingClass(btnEl);
+        }
+        if (this.cfg.disableBtn) {
+            this.disableBtn(btnEl);
+        }
+    };
+    /**
+     * Handles everything to be triggered when loading is finished
+     * @param {Object}btnEl
+     */
+    PromiseBtnDirective.prototype.cancelLoadingStateIfPromiseAndMinDurationDone = function (btnEl) {
+        if ((!this.cfg.minDuration || this.isMinDurationTimeoutDone) && this.isPromiseDone) {
+            if (this.cfg.btnLoadingClass) {
+                this.removeLoadingClass(btnEl);
+            }
+            if (this.cfg.disableBtn) {
+                this.enableBtn(btnEl);
+            }
+        }
+    };
+    /**
+     * @param {Object}btnEl
+     */
+    PromiseBtnDirective.prototype.disableBtn = function (btnEl) {
+        this.renderer.setAttribute(btnEl, 'disabled', 'disabled');
+    };
+    /**
+     * @param {Object}btnEl
+     */
+    PromiseBtnDirective.prototype.enableBtn = function (btnEl) {
+        this.renderer.removeAttribute(btnEl, 'disabled');
+    };
+    /**
+     * Initializes a watcher for the promise. Also takes
+     * this.cfg.minDuration into account if given.
+     * @param {Object}promise
+     * @param {Object}btnEl
+     */
+    PromiseBtnDirective.prototype.initPromiseHandler = function (promise, btnEl) {
+        var _this = this;
+        // watch promise to resolve or fail
+        this.isMinDurationTimeoutDone = false;
+        this.isPromiseDone = false;
+        // create timeout if option is set
+        if (this.cfg.minDuration) {
+            this.minDurationTimeout = setTimeout(function () {
+                _this.isMinDurationTimeoutDone = true;
+                _this.cancelLoadingStateIfPromiseAndMinDurationDone(btnEl);
+            }, this.cfg.minDuration);
+        }
+        var resolveLoadingState = function () {
+            _this.isPromiseDone = true;
+            _this.cancelLoadingStateIfPromiseAndMinDurationDone(btnEl);
+        };
+        // for regular promises
+        if (promise && promise.then) {
+            if (!this.cfg.handleCurrentBtnOnly) {
+                this.initLoadingState(btnEl);
+            }
+            if (promise.finally) {
+                promise.finally(resolveLoadingState);
+            }
+            else {
+                promise
+                    .then(resolveLoadingState)
+                    .catch(resolveLoadingState);
+            }
+        }
+    };
+    /**
+     * $compile and append the spinner template to the button.
+     * @param {Object}btnEl
+     */
+    PromiseBtnDirective.prototype.appendSpinnerTpl = function (btnEl) {
+        // TODO add some kind of compilation later on
+        btnEl.insertAdjacentHTML('beforeend', this.cfg.spinnerTpl);
+    };
+    /**
+     * Used to limit loading state to show only for the currently
+     * clicked button.
+     * @param {Object}btnEl
+     */
+    PromiseBtnDirective.prototype.addHandlersForCurrentBtnOnlyIfSet = function (btnEl) {
+        var _this = this;
+        // handle current button only options via click
+        if (this.cfg.handleCurrentBtnOnly) {
+            btnEl.addEventListener(this.cfg.CLICK_EVENT, function () {
+                _this.initLoadingState(btnEl);
+            });
+        }
+    };
     return PromiseBtnDirective;
 }());
+__decorate([
+    Input(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], PromiseBtnDirective.prototype, "promiseBtn", null);
 PromiseBtnDirective = __decorate([
-    core_1.Directive({
+    Directive({
         selector: '[promiseBtn]'
     }),
-    __metadata("design:paramtypes", [core_1.ElementRef])
+    __param(1, Inject(userCfg)),
+    __metadata("design:paramtypes", [ElementRef, Object, Renderer2])
 ], PromiseBtnDirective);
-exports.PromiseBtnDirective = PromiseBtnDirective;
-//# sourceMappingURL=promise-btn.directive.js.map
+export { PromiseBtnDirective };
+//# sourceMappingURL=/home/johannes/www/angular2-promise-buttons/promise-btn.directive.js.map

package.json

 {
   "name": "angular2-promise-buttons",
-  "version": "0.1.5",
+  "version": "1.0.0",
   "license": "MIT",
@@ -9,10 +9,10 @@ "scripts": {
     "demo.build": "ng build -prod --aot",
-    "demo.deploy": "run-s build demo.build demo.gh-pages",
+    "demo.copy-readme": "node scripts/copy-readme-to-demo.js",
+    "demo.deploy": "run-s demo.build demo.copy-readme demo.gh-pages",
     "release.changelog": "conventional-changelog -i CHANGELOG.md -s -p angular",
     "release.github-release": "conventional-github-releaser -p angular",
     "release": "run-s release.changelog release.github-release",
-    "build": "run-s build.clean build.compile build.copy-static",
+    "build": "run-s build.clean build.compile",
     "build.clean": "rm -Rf ./dist",
     "build.compile": "./node_modules/typescript/bin/tsc -p src",
-    "build.copy-static": "find ./src -type f \\( -name '*.html' -or -name '*.css' \\)  -exec cp {} ./dist/ \\;",
     "dev": "ng serve",
@@ -24,3 +24,4 @@ "start": "run-s dev",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "ng": "ng"
   },
@@ -39,3 +40,3 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@angular/cli": "1.0.0",
+    "@angular/cli": "^1.0.0",
     "@angular/common": "^4.0.0",
@@ -50,2 +51,3 @@ "@angular/compiler": "^4.0.0",
     "@types/node": "~6.0.60",
+    "angular2-template-loader": "^0.6.2",
     "bootstrap": "^3.3.7",
@@ -55,3 +57,5 @@ "codelyzer": "~2.0.0",
     "conventional-github-releaser": "^1.1.3",
+    "electron": "^1.6.6",
     "gh-pages": "^0.12.0",
+    "intl": "^1.2.5",
     "jasmine-core": "~2.5.2",
@@ -65,2 +69,4 @@ "jasmine-spec-reporter": "~3.2.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "marked": "^0.3.6",
     "npm-run-all": "^4.0.2",
@@ -73,4 +79,6 @@ "protractor": "~5.1.0",
     "typescript": "~2.2.0",
+    "wallaby-webpack": "0.0.38",
+    "web-animations-js": "^2.2.5",
     "zone.js": "^0.8.4"
   }
 }

README.md

@@ -1,2 +0,77 @@
-# Angular2PromiseButtons
+[![npm version](https://badge.fury.io/js/angular2-promise-buttons.svg)](https://badge.fury.io/js/angular2-promise-buttons)
+[![Build Status](https://travis-ci.org/johannesjo/angular2-promise-buttons.svg)](https://travis-ci.org/johannesjo/angular2-promise-buttons?branch=master)
+[![Coverage Status](https://coveralls.io/repos/johannesjo/angular2-promise-buttons/badge.svg?branch=master)](https://coveralls.io/r/johannesjo/angular2-promise-buttons?branch=master)
 
+angular2-promise-buttons
+===========
+
+*Chilled Buttons for Angular2*
+
+For angular 1.x version [go here](https://github.com/johannesjo/angular-promise-buttons).
+
+*angular2-promise-buttons* is a simple module that let's you add a loading indicator to a button of your choice.  Check out the [demo](http://johannesjo.github.io/angular2-promise-buttons/#demo)!
+
+[Bug-reports or feature request](https://github.com/johannesjo/angular2-promise-buttons/issues) as well as any other kind of **feedback is highly welcome!**
+
+## getting started
+Install it via npm:
+```
+npm install angular2-promise-buttons -S
+```
+
+And add it as a dependency to your main module
+```
+import {Angular2PromiseButtonModule} from 'angular2-promise-buttons/dist';
+
+@NgModule({
+  imports: [
+    Angular2PromiseButtonModule
+      .forRoot(
+        // your custom config goes here
+      ),
+  ],
+})
+export class MainAppModule {
+}
+```
+Using the buttons is easy. Just pass a promise to the directive:
+```html
+<button (click)="someAction()" 
+   [promiseBtn]="promiseSetBySomeAction">Click me to spin!</button>
+```
+
+## styling the button
+To give you maximum flexibility there are no base styles coming with the directive, but it is easy to fix that! There are lots of free css-spinners out there. Just find one of your liking and add the css to your global stylesheet.
+
+**Ressources:**
+* http://cssload.net/
+* http://projects.lukehaas.me/css-loaders/
+* http://tobiasahlin.com/spinkit/
+
+There are selectors you can use to style. There is the `.is-loading` class on the button, which is set, when the promise is pending and there is the `<span class="btn-spinner"></span>` element inside the button.
+
+
+## configuration
+Configuration is done via the forRoot method of the promise button module:
+```typescript
+import {Angular2PromiseButtonModule} from 'angular2-promise-buttons/dist';
+
+@NgModule({
+  imports: [
+    Angular2PromiseButtonModule
+      .forRoot(
+        // your custom config goes here
+        spinnerTpl: '<span class="btn-spinner"></span>',
+        // disable buttons when promise is pending
+        disableBtn: true,
+        // the class used to indicate a pending promise
+        btnLoadingClass: 'is-loading',
+        // only disable and show is-loading class for clicked button, 
+        // even when they share the same promise
+        handleCurrentBtnOnly: false,
+      ),
+  ],
+})
+export class MainAppModule {
+}
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26817

increased by160.82%

Number of package files

22

increased by46.67%

Lines of code

332

increased by242.27%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

77

increased by2466.67%

Worsened metrics

Dev dependency count

38

increased by22.58%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes