ngx-promise-buttons 1.0.0 → 1.0.1

package/projects/ngx-promise-buttons/src/promise-btn.directive.ts

@@ -0,0 +1,247 @@
+import {AfterContentInit, Directive, ElementRef, HostListener, Inject, Input, OnDestroy, Optional} from '@angular/core';
+import {Observable, Subscription} from 'rxjs';
+import {DEFAULT_CFG} from './default-promise-btn-config';
+import {PromiseBtnConfig} from './promise-btn-config';
+import {USER_CFG} from "./provider";
+
+@Directive({
+    selector: '[promiseBtn]',
+})
+
+export class PromiseBtnDirective implements OnDestroy, AfterContentInit {
+  cfg: PromiseBtnConfig;
+  // the timeout used for min duration display
+  minDurationTimeout: number;
+  // boolean to determine minDurationTimeout state
+  isMinDurationTimeoutDone: boolean;
+  // boolean to determine if promise was resolved
+  isPromiseDone: boolean;
+  // the promise button button element
+  btnEl: HTMLElement;
+  // the promise itself or a function expression
+  // NOTE: we need the type any here as we might deal with custom promises like bluebird
+  promise: any;
+
+  // this is added to fix the overriding of the disabled state by the loading indicator button.
+  @Input('disabled')
+  set isDisabledFromTheOutsideSetter(v: boolean) {
+    this.isDisabledFromTheOutside = v;
+    if (v) {
+      // disabled means always disabled
+      this.btnEl.setAttribute('disabled', 'disabled');
+    } else if (this.isPromiseDone || this.isPromiseDone === undefined) {
+      this.btnEl.removeAttribute('disabled');
+    }
+    // else the button is loading, so do not change the disabled loading state.
+  }
+
+  isDisabledFromTheOutside: boolean;
+
+  private _fakePromiseResolve: (value: void) => void;
+
+  constructor(el: ElementRef,
+              @Optional() @Inject(USER_CFG) cfg?: PromiseBtnConfig) {
+    // provide configuration
+    this.cfg = Object.assign({}, DEFAULT_CFG, cfg);
+
+    // save element
+    this.btnEl = el.nativeElement;
+  }
+
+  @Input()
+  set promiseBtn(passedValue: any) {
+    const isObservable: boolean = passedValue instanceof Observable;
+    const isSubscription: boolean = passedValue instanceof Subscription;
+    const isBoolean: boolean = typeof passedValue === 'boolean';
+    const isPromise: boolean = passedValue instanceof Promise || (
+      passedValue !== null &&
+      typeof passedValue === 'object' &&
+      typeof passedValue.then === 'function' &&
+      typeof passedValue.catch === 'function'
+    );
+
+    if (isObservable) {
+      throw new TypeError('promiseBtn must be an instance of Subscription, instance of Observable given');
+    } else if (isSubscription) {
+      const sub: Subscription = passedValue;
+      if (!sub.closed) {
+        this.promise = new Promise((resolve) => {
+          sub.add(resolve);
+        });
+      }
+    } else if (isPromise) {
+      this.promise = passedValue;
+    } else if (isBoolean) {
+      this.promise = this.createPromiseFromBoolean(passedValue);
+    }
+
+    this.checkAndInitPromiseHandler(this.btnEl);
+  }
+
+  ngAfterContentInit() {
+    this.prepareBtnEl(this.btnEl);
+    // trigger changes once to handle initial promises
+    this.checkAndInitPromiseHandler(this.btnEl);
+  }
+
+  ngOnDestroy() {
+    // cleanup
+    if (this.minDurationTimeout) {
+      clearTimeout(this.minDurationTimeout);
+    }
+  }
+
+  createPromiseFromBoolean(val: boolean): Promise<any> {
+    if (val) {
+      return new Promise((resolve) => {
+        this._fakePromiseResolve = resolve;
+      });
+    } else {
+      if (this._fakePromiseResolve) {
+        this._fakePromiseResolve();
+      }
+      return this.promise;
+    }
+  }
+
+  /**
+   * Initializes all html and event handlers
+   */
+  prepareBtnEl(btnEl: HTMLElement) {
+    // handle promises passed via promiseBtn attribute
+    this.appendSpinnerTpl(btnEl);
+  }
+
+  /**
+   * Checks if all required parameters are there and inits the promise handler
+   */
+  checkAndInitPromiseHandler(btnEl: HTMLElement) {
+    // check if element and promise is set
+    if (btnEl && this.promise) {
+      this.initPromiseHandler(btnEl);
+    }
+  }
+
+  /**
+   * Helper FN to add class
+   */
+  addLoadingClass(el: any) {
+    if (typeof this.cfg.btnLoadingClass === 'string') {
+      el.classList.add(this.cfg.btnLoadingClass);
+    }
+  }
+
+  /**
+   * Helper FN to remove classes
+   */
+  removeLoadingClass(el: any) {
+    if (typeof this.cfg.btnLoadingClass === 'string') {
+      el.classList.remove(this.cfg.btnLoadingClass);
+    }
+  }
+
+  /**
+   * Handles everything to be triggered when the button is set
+   * to loading state.
+   */
+  initLoadingState(btnEl: HTMLElement) {
+    this.addLoadingClass(btnEl);
+    this.disableBtn(btnEl);
+  }
+
+  /**
+   * Handles everything to be triggered when loading is finished
+   */
+  cancelLoadingStateIfPromiseAndMinDurationDone(btnEl: HTMLElement) {
+    if ((!this.cfg.minDuration || this.isMinDurationTimeoutDone) && this.isPromiseDone) {
+      this.removeLoadingClass(btnEl);
+      this.enableBtn(btnEl);
+    }
+  }
+
+  disableBtn(btnEl: HTMLElement) {
+    if (this.cfg.disableBtn) {
+      btnEl.setAttribute('disabled', 'disabled');
+    }
+  }
+
+  enableBtn(btnEl: HTMLElement) {
+    if (this.cfg.disableBtn) {
+      if (this.isDisabledFromTheOutside) {
+        btnEl.setAttribute('disabled', 'disabled');
+      } else {
+        btnEl.removeAttribute('disabled');
+      }
+    }
+  }
+
+  /**
+   * Initializes a watcher for the promise. Also takes
+   * this.cfg.minDuration into account if given.
+   */
+
+  initPromiseHandler(btnEl: HTMLElement) {
+    const promise = this.promise;
+
+    // watch promise to resolve or fail
+    this.isMinDurationTimeoutDone = false;
+    this.isPromiseDone = false;
+
+    // create timeout if option is set
+    if (this.cfg.minDuration) {
+      this.minDurationTimeout = window.setTimeout(() => {
+        this.isMinDurationTimeoutDone = true;
+        this.cancelLoadingStateIfPromiseAndMinDurationDone(btnEl);
+      }, this.cfg.minDuration);
+    }
+
+    const resolveLoadingState = () => {
+      this.isPromiseDone = true;
+      this.cancelLoadingStateIfPromiseAndMinDurationDone(btnEl);
+    };
+
+    if (!this.cfg.handleCurrentBtnOnly) {
+      this.initLoadingState(btnEl);
+    }
+    // native Promise doesn't have finally
+    if (promise.finally) {
+      promise.finally(resolveLoadingState);
+    } else {
+      promise
+        .then(resolveLoadingState)
+        .catch(resolveLoadingState);
+    }
+
+  }
+
+
+  /**
+   * $compile and append the spinner template to the button.
+   */
+  appendSpinnerTpl(btnEl: HTMLElement) {
+    // TODO add some kind of compilation later on
+    btnEl.insertAdjacentHTML('beforeend', this.cfg.spinnerTpl as string);
+  }
+
+  /**
+   * Limit loading state to show only for the currently clicked button.
+   * Executed only if this.cfg.handleCurrentBtnOnly is set
+   */
+  @HostListener('click')
+  handleCurrentBtnOnly() {
+    if (!this.cfg.handleCurrentBtnOnly) {
+      return true; // return true for testing
+    }
+
+    // Click triggers @Input update
+    // We need to use timeout to wait for @Input to update
+    window.setTimeout(() => {
+      // return if something else than a promise is passed
+      if (!this.promise) {
+        return;
+      }
+
+      this.initLoadingState(this.btnEl);
+    }, 0);
+  }
+}

package/projects/ngx-promise-buttons/src/provider.ts

@@ -0,0 +1,14 @@
+import { InjectionToken, EnvironmentProviders, makeEnvironmentProviders, Optional, SkipSelf, inject } from '@angular/core';
+import { PromiseBtnConfig } from './promise-btn-config';
+
+export const USER_CFG = new InjectionToken<PromiseBtnConfig>('Promise Button Config');
+
+export const DEFAULT_CONFIG: PromiseBtnConfig = {
+  // default values
+};
+
+export function provideNgxPromiseButtons(config: PromiseBtnConfig = DEFAULT_CONFIG): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    { provide: USER_CFG, useValue: { ...DEFAULT_CONFIG, ...config } }
+  ]);
+}

package/projects/ngx-promise-buttons/src/test.ts

@@ -0,0 +1,16 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/dist/async-test.js';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+
+import {getTestBed} from '@angular/core/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);

package/projects/ngx-promise-buttons/src/user-cfg.ts

@@ -0,0 +1,3 @@
+import {InjectionToken} from '@angular/core';
+
+export const userCfg = new InjectionToken('cfg');

package/projects/ngx-promise-buttons/tsconfig.lib.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": false,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true,
+    "enableIvy": true,
+    "allowEmptyCodegenFiles": true,
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/projects/ngx-promise-buttons/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "allowEmptyCodegenFiles": true,
+    "compilationMode": "partial"
+  }
+}

package/projects/ngx-promise-buttons/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/projects/ngx-promise-buttons/tslint.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../ngx-promise-buttons-demo/tslint.json",
+  "rules": {
+    "directive-selector": [
+      false,
+      "attribute",
+      "lib",
+      "camelCase"
+    ],
+    "component-selector": [
+      false,
+      "element",
+      "lib",
+      "kebab-case"
+    ],
+    "variable-name": [
+      true,
+      "allow-pascal-case",
+      "allow-snake-case",
+      "ban-keywords",
+      "check-format",
+      "allow-leading-underscore"
+    ]
+  }
+}

package/projects/ngx-promise-buttons/yarn.lock

@@ -0,0 +1,9 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@ctrl/tinycolor@^2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-2.6.0.tgz#c269def5ed1f871913f299a475c01bdb39119eee"
+  integrity sha512-bvkszNAcbmR2zrjjkaHbTVbEj07Id44HsBWf57mugPcvJNIPaWLqxWV/GUJVJuXXayqFP2X09cZRqKrCy/v10Q==
+

package/projects/ngx-promise-buttons-demo/e2e/protractor.conf.js

@@ -0,0 +1,30 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

package/projects/ngx-promise-buttons-demo/e2e/tsconfig.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es2018",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

package/projects/ngx-promise-buttons-demo/karma.conf.js

@@ -0,0 +1,56 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '../..',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: false,
+    browsers: ['ChromeHeadless'],
+    singleRun: true,
+    customLaunchers: {
+      'ChromeHeadless': {
+        base: 'Chrome',
+        flags: [
+          // We must disable the Chrome sandbox when running Chrome inside Docker
+          // (Chrome's sandbox needs more permissions than Docker allows by default)
+          '--headless',
+          '--no-sandbox',
+          '--disable-gpu',
+          '--no-default-browser-check',
+          '--no-first-run',
+          '--disable-default-apps',
+          '--disable-popup-blocking',
+          '--disable-translate',
+          '--disable-background-timer-throttling',
+          '--disable-renderer-backgrounding',
+          '--disable-device-discovery-notifications',
+          // Without a remote debugging port, Google Chrome exits immediately.
+          '--remote-debugging-port=9222',
+          '--disable-web-security',
+        ],
+        debug: true
+      }
+    },
+    browserNoActivityTimeout: 120000,
+  });
+};

package/projects/ngx-promise-buttons-demo/src/app/app.component.css

@@ -0,0 +1,6 @@
+h2 {
+  margin-top: 16px;
+}
+h3 {
+  margin-top: 16px;
+}

package/projects/ngx-promise-buttons-demo/src/app/app.component.html

@@ -0,0 +1,109 @@
+<button class="btn btn-raised"
+        (click)="success($event)"
+        [promiseBtn]="successPromise">Success after delay
+</button>
+<button class="btn btn-raised"
+        (click)="error()"
+        [promiseBtn]="errorPromise">Error after delay
+</button>
+<br>
+<br>
+<button class="btn btn-raised"
+        (click)="endless()"
+        [promiseBtn]="endlessPromise">Never resolving promise
+</button>
+<button class="btn btn-raised"
+        [promiseBtn]="endlessInitialPromise">Loading initially and forever
+</button>
+
+<h3>Same promise buttons</h3>
+<button class="btn btn-raised"
+        (click)="success($event)"
+        [promiseBtn]="successPromise">We
+</button>
+<button class="btn btn-raised"
+        (click)="success($event)"
+        [promiseBtn]="successPromise">share
+</button>
+
+<h3>Chained promise buttons</h3>
+<button class="btn btn-raised"
+        (click)="chain()"
+        [promiseBtn]="chainedPromises">Load promise chain {{ promiseIndex }}
+</button>
+
+
+<h3>Inside a form</h3>
+<form (submit)="submit()"
+      novalidate>
+  <button class="btn btn-raised"
+          type="submit"
+          [promiseBtn]="submitPromise">Submit
+  </button>
+</form>
+
+<div>
+  <h2>Observable</h2>
+
+  <button class="btn btn-raised"
+          (click)="initSuccessObservable()"
+          [promiseBtn]="successObservable">Success after delay
+  </button>
+  <button class="btn btn-raised"
+          (click)="initErrorObservable()"
+          [promiseBtn]="errorObservable">Error after delay
+  </button>
+  <br>
+  <br>
+  <button class="btn btn-raised"
+          (click)="initEndlessObservable()"
+          [promiseBtn]="endlessObservable">Never resolving Observable
+  </button>
+  <button class="btn btn-raised"
+          [promiseBtn]="endlessInitialObservable">Loading initially and forever
+  </button>
+
+  <h3>Same observable buttons</h3>
+  <button class="btn btn-raised"
+          (click)="initSuccessObservable()"
+          [promiseBtn]="successObservable">We
+  </button>
+  <button class="btn btn-raised"
+          (click)="initSuccessObservable()"
+          [promiseBtn]="successObservable">share
+  </button>
+
+  <h3>Chained observable button</h3>
+  <button class="btn btn-raised"
+          (click)="initChainedObservable()"
+          [promiseBtn]="chainedObservable">Observable chain {{ chainedObservableValue }}
+  </button>
+</div>
+
+<div>
+  <h2>Simple Boolean</h2>
+  <button class="btn btn-raised"
+          (click)="myBool=!myBool">Toggle loading ({{myBool}})
+  </button>
+
+  <button class="btn btn-raised"
+          [promiseBtn]="myBool">My Boolean Btn {{myBool}}
+  </button>
+</div>
+
+
+<div>
+  <h2>Dynamic [disabled] </h2>
+
+  <button class="btn btn-raised"
+          (click)="isOutsideDisabled=!isOutsideDisabled">Toggle disabled via [disabled]={{isOutsideDisabled}}
+  </button>
+
+  <button class="btn btn-raised"
+          (click)="myBoolWithCustomDisabled=!myBoolWithCustomDisabled">Toggle promise button
+  </button>
+
+  <button class="btn btn-raised"
+          [disabled]="isOutsideDisabled"
+          [promiseBtn]="myBoolWithCustomDisabled">This is the button</button>
+</div>

package/projects/ngx-promise-buttons-demo/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import {async, TestBed} from '@angular/core/testing';
+import {AppComponent} from './app.component';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+
+// @Directive({
+//   selector: '[promiseBtn]'
+// })
+// class MockPromiseBtnDirective {
+//   @Input('promiseBtn') promise: Promise<any>;
+// }
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent,
+        // MockPromiseBtnDirective
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+});
+