@colijnit/corecomponents_v12 12.2.18 → 12.2.19

package/projects/corecomponents/src/lib/directives/ripple/ripple-renderer.ts

@@ -0,0 +1,217 @@
+// NOTE: Copied and adapted to CoreComponents from iOneJS on 9-may-2018.
+
+import {ElementRef, NgZone} from '@angular/core';
+
+import {CoRippleRef, CoRippleState} from "./ripple-ref";
+import {CoViewportRulerService} from "./viewport-ruler.service";
+
+/** Fade-in duration for the ripples. Can be modified with the speedFactor option. */
+export const RIPPLE_FADE_IN_DURATION = 450;
+
+/** Fade-out duration for the ripples in milliseconds. This can't be modified by the speedFactor. */
+export const RIPPLE_FADE_OUT_DURATION = 400;
+
+export type CoRippleConfig = {
+    color?: string;
+    centered?: boolean;
+    radius?: number;
+    speedFactor?: number;
+    persistent?: boolean;
+};
+
+/**
+ * Helper service that performs DOM manipulations. Not intended to be used outside this module.
+ * The constructor takes a reference to the ripple directive's host element and a map of DOM
+ * event handlers to be installed on the element that triggers ripple animations.
+ * This will eventually become a custom renderer once Angular support exists.
+ * @docs-private
+ */
+export class CoRippleRenderer {
+
+    /** Element where the ripples are being added to. */
+    private _containerElement: HTMLElement;
+
+    /** Element which triggers the ripple elements on mouse events. */
+    private _triggerElement: HTMLElement;
+
+    /** Whether the mouse is currently down or not. */
+    private _isMousedown: boolean = false;
+
+    /** Events to be registered on the trigger element. */
+    private _triggerEvents = new Map<string, any>();
+
+    /** Set of currently active ripple references. */
+    private _activeRipples = new Set<CoRippleRef>();
+
+    /** Ripple config for all ripples created by events. */
+    rippleConfig: CoRippleConfig = {};
+
+    /** Whether mouse ripples should be created or not. */
+    rippleDisabled: boolean = false;
+
+    constructor(_elementRef: ElementRef, private _ngZone: NgZone, private _ruler: CoViewportRulerService) {
+        this._containerElement = _elementRef.nativeElement;
+
+        // Specify events which need to be registered on the trigger.
+        this._triggerEvents.set('mousedown', this.onMousedown.bind(this));
+        this._triggerEvents.set('mouseup', this.onMouseup.bind(this));
+        this._triggerEvents.set('mouseleave', this.onMouseLeave.bind(this));
+
+        // By default use the host element as trigger element.
+        this.setTriggerElement(this._containerElement);
+    }
+
+    /** Fades in a ripple at the given coordinates. */
+    fadeInRipple(pageX: number, pageY: number, config: CoRippleConfig = {}): CoRippleRef {
+        let containerRect = this._containerElement.getBoundingClientRect();
+
+        if (config.centered) {
+            pageX = containerRect.left + containerRect.width / 2;
+            pageY = containerRect.top + containerRect.height / 2;
+        } else {
+            // Subtract scroll values from the coordinates because calculations below
+            // are always relative to the viewport rectangle.
+            let scrollPosition = this._ruler.getViewportScrollPosition();
+            pageX -= scrollPosition.left;
+            pageY -= scrollPosition.top;
+        }
+
+        let radius = config.radius || distanceToFurthestCorner(pageX, pageY, containerRect);
+        let duration = RIPPLE_FADE_IN_DURATION * (1 / (config.speedFactor || 1));
+        let offsetX = pageX - containerRect.left;
+        let offsetY = pageY - containerRect.top;
+
+        let ripple = document.createElement('div');
+        ripple.classList.add('mat-ripple-element');
+
+        ripple.style.left = `${offsetX - radius}px`;
+        ripple.style.top = `${offsetY - radius}px`;
+        ripple.style.height = `${radius * 2}px`;
+        ripple.style.width = `${radius * 2}px`;
+
+        // If the color is not set, the default CSS color will be used.
+        ripple.style.backgroundColor = config.color;
+        ripple.style.transitionDuration = `${duration}ms`;
+
+        this._containerElement.appendChild(ripple);
+
+        // By default the browser does not recalculate the styles of dynamically created
+        // ripple elements. This is critical because then the `scale` would not animate properly.
+        enforceStyleRecalculation(ripple);
+
+        ripple.style.transform = 'scale(1)';
+
+        // Exposed reference to the ripple that will be returned.
+        let rippleRef = new CoRippleRef(this, ripple, config);
+
+        rippleRef.state = CoRippleState.FADING_IN;
+
+        // Add the ripple reference to the list of all active ripples.
+        this._activeRipples.add(rippleRef);
+
+        // Wait for the ripple element to be completely faded in.
+        // Once it's faded in, the ripple can be hidden immediately if the mouse is released.
+        this.runTimeoutOutsideZone(() => {
+            rippleRef.state = CoRippleState.VISIBLE;
+
+            if (!config.persistent && !this._isMousedown) {
+                rippleRef.fadeOut();
+            }
+        }, duration);
+
+        return rippleRef;
+    }
+
+    /** Fades out a ripple reference. */
+    fadeOutRipple(rippleRef: CoRippleRef) {
+        // For ripples that are not active anymore, don't re-un the fade-out animation.
+        if (!this._activeRipples.delete(rippleRef)) {
+            return;
+        }
+
+        let rippleEl = rippleRef.element;
+
+        rippleEl.style.transitionDuration = `${RIPPLE_FADE_OUT_DURATION}ms`;
+        rippleEl.style.opacity = '0';
+
+        rippleRef.state = CoRippleState.FADING_OUT;
+
+        // Once the ripple faded out, the ripple can be safely removed from the DOM.
+        this.runTimeoutOutsideZone(() => {
+            rippleRef.state = CoRippleState.HIDDEN;
+            rippleEl.parentNode.removeChild(rippleEl);
+        }, RIPPLE_FADE_OUT_DURATION);
+    }
+
+    /** Fades out all currently active ripples. */
+    fadeOutAll() {
+        this._activeRipples.forEach(ripple => ripple.fadeOut());
+    }
+
+    /** Sets the trigger element and registers the mouse events. */
+    setTriggerElement(element: HTMLElement) {
+        // Remove all previously register event listeners from the trigger element.
+        if (this._triggerElement) {
+            this._triggerEvents.forEach((fn, type) => this._triggerElement.removeEventListener(type, fn));
+        }
+
+        if (element) {
+            // If the element is not null, register all event listeners on the trigger element.
+            this._ngZone.runOutsideAngular(() => {
+                this._triggerEvents.forEach((fn, type) => element.addEventListener(type, fn));
+            });
+        }
+
+        this._triggerElement = element;
+    }
+
+    /** Listener being called on mousedown event. */
+    private onMousedown(event: MouseEvent) {
+        if (!this.rippleDisabled) {
+            this._isMousedown = true;
+            this.fadeInRipple(event.pageX, event.pageY, this.rippleConfig);
+        }
+    }
+
+    /** Listener being called on mouseup event. */
+    private onMouseup() {
+        this._isMousedown = false;
+
+        // Fade-out all ripples that are completely visible and not persistent.
+        this._activeRipples.forEach(ripple => {
+            if (!ripple.config.persistent && ripple.state === CoRippleState.VISIBLE) {
+                ripple.fadeOut();
+            }
+        });
+    }
+
+    /** Listener being called on mouseleave event. */
+    private onMouseLeave() {
+        if (this._isMousedown) {
+            this.onMouseup();
+        }
+    }
+
+    /** Runs a timeout outside of the Angular zone to avoid triggering the change detection. */
+    private runTimeoutOutsideZone(fn: Function, delay: number = 0): void {
+        this._ngZone.runOutsideAngular(() => setTimeout(fn, delay));
+    }
+
+}
+
+/** Enforces a style recalculation of a DOM element by computing its styles. */
+function enforceStyleRecalculation(element: HTMLElement) {
+    // Enforce a style recalculation by calling `getComputedStyle` and accessing any property.
+    // Calling `getPropertyValue` is important to let optimizers know that this is not a noop.
+    // See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
+    window.getComputedStyle(element).getPropertyValue('opacity');
+}
+
+/**
+ * Returns the distance from the point (x, y) to the furthest corner of a rectangle.
+ */
+function distanceToFurthestCorner(x: number, y: number, rect: ClientRect) {
+    const distX = Math.max(Math.abs(x - rect.left), Math.abs(x - rect.right));
+    const distY = Math.max(Math.abs(y - rect.top), Math.abs(y - rect.bottom));
+    return Math.sqrt(distX * distX + distY * distY);
+}

package/projects/corecomponents/src/lib/directives/ripple/ripple.directive.ts

@@ -0,0 +1,116 @@
+// NOTE: Copied from iOneJS and adapted to CoreComponents on 9-may-2018.
+
+import {Directive, ElementRef, Inject, InjectionToken, Input, NgZone, OnChanges, OnDestroy, Optional, SimpleChanges} from '@angular/core';
+import {CoRippleConfig, CoRippleRenderer} from "./ripple-renderer";
+import {CoRippleRef} from "./ripple-ref";
+import {CoViewportRulerService} from "./viewport-ruler.service";
+
+/** OpaqueToken that can be used to specify the global ripple options. */
+export const MD_RIPPLE_GLOBAL_OPTIONS: InjectionToken<CoRippleGlobalOptions> = new InjectionToken('CoRippleGlobalOptions');
+
+export type CoRippleGlobalOptions = {
+    disabled?: boolean;
+    baseSpeedFactor?: number;
+};
+
+@Directive({
+    selector: '[md-ripple], [mat-ripple], [mdRipple], [matRipple]',
+    exportAs: 'mdRipple',
+    host: {
+        '[class.mat-ripple]': 'true',
+        '[class.mat-ripple-unbounded]': 'unbounded'
+    }
+})
+export class CoRippleDirective implements OnChanges, OnDestroy {
+
+    /**
+     * The element that triggers the ripple when click events are received. Defaults to the
+     * directive's host element.
+     */
+        // Prevent TS metadata emit from referencing HTMLElement in ripple.js
+        // Otherwise running this code in a Node environment (e.g Universal) will not work.
+    @Input('mdRippleTrigger') trigger: HTMLElement | HTMLElement;
+
+    /**
+     * Whether the ripple always originates from the center of the host element's bounds, rather
+     * than originating from the location of the click event.
+     */
+    @Input('mdRippleCentered') centered: boolean;
+
+    /**
+     * Whether click events will not trigger the ripple. It can still be triggered by manually
+     * calling createRipple()
+     */
+    @Input('mdRippleDisabled') disabled: boolean;
+
+    /**
+     * If set, the radius in pixels of foreground ripples when fully expanded. If unset, the radius
+     * will be the distance from the center of the ripple to the furthest corner of the host element's
+     * bounding rectangle.
+     */
+    @Input('mdRippleRadius') radius: number = 0;
+
+    /**
+     * If set, the normal duration of ripple animations is divided by this value. For example,
+     * setting it to 0.5 will cause the animations to take twice as long.
+     * A changed speedFactor will not modify the fade-out duration of the ripples.
+     */
+    @Input('mdRippleSpeedFactor') speedFactor: number = 1;
+
+    /** Custom color for ripples. */
+    @Input('mdRippleColor') color: string;
+
+    /** Whether foreground ripples should be visible outside the component's bounds. */
+    @Input('mdRippleUnbounded') unbounded: boolean;
+
+    /** Renderer for the ripple DOM manipulations. */
+    private _rippleRenderer: CoRippleRenderer;
+
+    /** Options that are set globally for all ripples. */
+    private _globalOptions: CoRippleGlobalOptions;
+
+    constructor(
+        elementRef: ElementRef,
+        ngZone: NgZone,
+        ruler: CoViewportRulerService,
+        // Type needs to be `any` because of https://github.com/angular/angular/issues/12631
+        @Optional() @Inject(MD_RIPPLE_GLOBAL_OPTIONS) globalOptions: any
+    ) {
+        this._rippleRenderer = new CoRippleRenderer(elementRef, ngZone, ruler);
+        this._globalOptions = globalOptions ? globalOptions : {};
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['trigger'] && this.trigger) {
+            this._rippleRenderer.setTriggerElement(this.trigger);
+        }
+
+        this._rippleRenderer.rippleDisabled = this._globalOptions.disabled || this.disabled;
+        this._rippleRenderer.rippleConfig = this.rippleConfig;
+    }
+
+    ngOnDestroy(): void {
+        // Set the trigger element to null to cleanup all listeners.
+        this._rippleRenderer.setTriggerElement(null);
+    }
+
+    /** Launches a manual ripple at the specified position. */
+    launch(pageX: number, pageY: number, config: CoRippleConfig = this.rippleConfig): CoRippleRef {
+        return this._rippleRenderer.fadeInRipple(pageX, pageY, config);
+    }
+
+    /** Fades out all currently showing ripple elements. */
+    fadeOutAll(): void {
+        this._rippleRenderer.fadeOutAll();
+    }
+
+    /** Ripple configuration from the directive's input values. */
+    get rippleConfig(): CoRippleConfig {
+        return {
+            centered: this.centered,
+            speedFactor: this.speedFactor * (this._globalOptions.baseSpeedFactor || 1),
+            radius: this.radius,
+            color: this.color
+        };
+    }
+}

package/projects/corecomponents/src/lib/directives/ripple/ripple.module.ts

@@ -0,0 +1,24 @@
+// NOTE: Copied from iOneJS and adapted to CoreComponents on 9-may-2018.
+
+import {NgModule} from "@angular/core";
+
+import {CoViewportRulerService} from "./viewport-ruler.service";
+import {CoRippleDirective} from "./ripple.directive";
+import {CoScrollableDirective} from "./scrollable.directive";
+import {CoScrollDispatcherService} from "./scroll-dispatcher.service";
+
+@NgModule({
+    declarations: [
+        CoRippleDirective,
+        CoScrollableDirective
+    ],
+    providers: [
+        CoScrollDispatcherService,
+        CoViewportRulerService
+    ],
+    exports: [
+        CoRippleDirective
+    ]
+})
+export class RippleModule {
+}

package/projects/corecomponents/src/lib/directives/ripple/scroll-dispatcher.service.ts

@@ -0,0 +1,129 @@
+// NOTE: Copied and adapted to iOneJS from https://github.com/angular/material2/blob/master/src/lib/core on 14-march-2017.
+import { ElementRef, Injectable, Optional, SkipSelf } from '@angular/core';
+import { fromEvent, merge, Observable, Subject, Subscription } from 'rxjs';
+
+import { CoScrollableDirective } from './scrollable.directive';
+import { auditTime } from 'rxjs/operators';
+
+/** Time in ms to throttle the scrolling events by default. */
+export const DEFAULT_SCROLL_TIME = 20;
+
+/**
+ * Service contained all registered Scrollable references and emits an event when any one of the
+ * Scrollable references emit a scrolled event.
+ */
+@Injectable()
+export class CoScrollDispatcherService {
+    /** Subject for notifying that a registered scrollable reference element has been scrolled. */
+    _scrolled: Subject<void> = new Subject<void>();
+
+    /** Keeps track of the global `scroll` and `resize` subscriptions. */
+    _globalSubscription: Subscription = null;
+
+    /** Keeps track of the amount of subscriptions to `scrolled`. Used for cleaning up afterwards. */
+    private _scrolledCount = 0;
+
+    /**
+     * Map of all the scrollable references that are registered with the service and their
+     * scroll event subscriptions.
+     */
+    scrollableReferences: Map<CoScrollableDirective, Subscription> = new Map();
+
+    /**
+     * Registers a Scrollable with the service and listens for its scrolled events. When the
+     * scrollable is scrolled, the service emits the event in its scrolled observable.
+     * @param scrollable Scrollable instance to be registered.
+     */
+    register(scrollable: CoScrollableDirective): void {
+        const scrollSubscription = scrollable.elementScrolled().subscribe(() => this._notify());
+
+        this.scrollableReferences.set(scrollable, scrollSubscription);
+    }
+
+    /**
+     * Deregisters a Scrollable reference and unsubscribes from its scroll event observable.
+     * @param scrollable Scrollable instance to be deregistered.
+     */
+    deregister(scrollable: CoScrollableDirective): void {
+        if (this.scrollableReferences.has(scrollable)) {
+            this.scrollableReferences.get(scrollable).unsubscribe();
+            this.scrollableReferences.delete(scrollable);
+        }
+    }
+
+    /**
+     * Subscribes to an observable that emits an event whenever any of the registered Scrollable
+     * references (or window, document, or body) fire a scrolled event. Can provide a time in ms
+     * to override the default "throttle" time.
+     */
+    scrolled(auditTimeInMs: number = DEFAULT_SCROLL_TIME, callback: () => any): Subscription {
+        // In the case of a 0ms delay, use an observable without auditTime
+        // since it does add a perceptible delay in processing overhead.
+        let observable: any = auditTimeInMs > 0 ?
+            auditTime(auditTimeInMs) :
+            this._scrolled.asObservable();
+
+        this._scrolledCount++;
+
+        if (!this._globalSubscription) {
+            this._globalSubscription = merge(
+                fromEvent(window.document, 'scroll'),
+                fromEvent(window, 'resize')
+            ).subscribe(() => this._notify());
+        }
+
+        // Note that we need to do the subscribing from here, in order to be able to remove
+        // the global event listeners once there are no more subscriptions.
+        return observable.subscribe(callback).add(() => {
+            this._scrolledCount--;
+
+            if (this._globalSubscription && !this.scrollableReferences.size && !this._scrolledCount) {
+                this._globalSubscription.unsubscribe();
+                this._globalSubscription = null;
+            }
+        });
+    }
+
+    /** Returns all registered Scrollables that contain the provided element. */
+    getScrollContainers(elementRef: ElementRef): CoScrollableDirective[] {
+        const scrollingContainers: CoScrollableDirective[] = [];
+
+        this.scrollableReferences.forEach((subscription: Subscription, scrollable: CoScrollableDirective) => {
+            if (this.scrollableContainsElement(scrollable, elementRef)) {
+                scrollingContainers.push(scrollable);
+            }
+        });
+
+        return scrollingContainers;
+    }
+
+    /** Returns true if the element is contained within the provided Scrollable. */
+    scrollableContainsElement(scrollable: CoScrollableDirective, elementRef: ElementRef): boolean {
+        let element = elementRef.nativeElement;
+        let scrollableElement = scrollable.getElementRef().nativeElement;
+
+        // Traverse through the element parents until we reach null, checking if any of the elements
+        // are the scrollable's element.
+        do {
+            if (element == scrollableElement) {
+                return true;
+            }
+        } while (element = element.parentElement);
+    }
+
+    /** Sends a notification that a scroll event has been fired. */
+    _notify() {
+        this._scrolled.next();
+    }
+}
+
+export function SCROLL_DISPATCHER_PROVIDER_FACTORY(parentDispatcher: CoScrollDispatcherService) {
+    return parentDispatcher || new CoScrollDispatcherService();
+}
+
+export const SCROLL_DISPATCHER_PROVIDER = {
+    // If there is already a ScrollDispatcher available, use that. Otherwise, provide a new one.
+    provide: CoScrollDispatcherService,
+    deps: [[new Optional(), new SkipSelf(), CoScrollDispatcherService]],
+    useFactory: SCROLL_DISPATCHER_PROVIDER_FACTORY
+};

package/projects/corecomponents/src/lib/directives/ripple/scrollable.directive.ts

@@ -0,0 +1,37 @@
+// NOTE: Copied and adapted to TwoDSelector from iOneJS on 9-may-2018.
+import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
+
+import { CoScrollDispatcherService } from './scroll-dispatcher.service';
+import { fromEvent, Observable } from 'rxjs';
+
+/**
+ * Sends an event when the directive's element is scrolled. Registers itself with the
+ * ScrollDispatcher service to include itself as part of its collection of scrolling events that it
+ * can be listened to through the service.
+ */
+@Directive({
+    selector: '[cdk-scrollable]'
+})
+export class CoScrollableDirective implements OnInit, OnDestroy {
+    constructor(private _elementRef: ElementRef, private _scroll: CoScrollDispatcherService) {
+    }
+
+    ngOnInit(): void {
+        this._scroll.register(this);
+    }
+
+    ngOnDestroy(): void {
+        this._scroll.deregister(this);
+    }
+
+    /**
+     * Returns observable that emits when a scroll event is fired on the host element.
+     */
+    elementScrolled(): Observable<any> {
+        return fromEvent(this._elementRef.nativeElement, 'scroll');
+    }
+
+    getElementRef(): ElementRef {
+        return this._elementRef;
+    }
+}

package/projects/corecomponents/src/lib/directives/ripple/viewport-ruler.service.ts

@@ -0,0 +1,84 @@
+// NOTE: Copied and adapted to TwoDSelector from iOneJS on 9-may-2018.
+import {Injectable, Optional, SkipSelf} from '@angular/core';
+
+import {CoScrollDispatcherService} from "./scroll-dispatcher.service";
+
+/**
+ * Simple utility for getting the bounds of the browser viewport.
+ * @docs-private
+ */
+@Injectable()
+export class CoViewportRulerService {
+
+    /** Cached document client rectangle. */
+    private _documentRect?: ClientRect;
+
+    constructor(scrollDispatcher: CoScrollDispatcherService) {
+        // Initially cache the document rectangle.
+        this._cacheViewportGeometry();
+
+        // Subscribe to scroll and resize events and update the document rectangle on changes.
+        scrollDispatcher.scrolled(null, () => this._cacheViewportGeometry());
+    }
+
+    /** Gets a ClientRect for the viewport's bounds. */
+    getViewportRect(documentRect = this._documentRect): ClientRect {
+        // Use the document element's bounding rect rather than the window scroll properties
+        // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll
+        // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different
+        // conceptual viewports. Under most circumstances these viewports are equivalent, but they
+        // can disagree when the page is pinch-zoomed (on devices that support touch).
+        // See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4
+        // We use the documentElement instead of the body because, by default (without a css reset)
+        // browsers typically give the document body an 8px margin, which is not included in
+        // getBoundingClientRect().
+        const scrollPosition = this.getViewportScrollPosition(documentRect);
+        const height = window.innerHeight;
+        const width = window.innerWidth;
+
+        return {
+            top: scrollPosition.top,
+            left: scrollPosition.left,
+            bottom: scrollPosition.top + height,
+            right: scrollPosition.left + width,
+            height,
+            width,
+        };
+    }
+
+
+    /**
+     * Gets the (top, left) scroll position of the viewport.
+     * @param documentRect
+     */
+    getViewportScrollPosition(documentRect = this._documentRect) {
+        // The top-left-corner of the viewport is determined by the scroll position of the document
+        // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about
+        // whether `document.body` or `document.documentElement` is the scrolled element, so reading
+        // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of
+        // `document.documentElement` works consistently, where the `top` and `left` values will
+        // equal negative the scroll position.
+        const top = -documentRect.top || document.body.scrollTop || window.scrollY || 0;
+        const left = -documentRect.left || document.body.scrollLeft || window.scrollX || 0;
+
+        return {top, left};
+    }
+
+    /** Caches the latest client rectangle of the document element. */
+    _cacheViewportGeometry() {
+        this._documentRect = document.documentElement.getBoundingClientRect();
+    }
+
+}
+
+export function VIEWPORT_RULER_PROVIDER_FACTORY(parentRuler: CoViewportRulerService,
+    scrollDispatcher: CoScrollDispatcherService) {
+    return parentRuler || new CoViewportRulerService(scrollDispatcher);
+}
+
+export const VIEWPORT_RULER_PROVIDER = {
+    // If there is already a ViewportRuler available, use that. Otherwise, provide a new one.
+    provide: CoViewportRulerService,
+    deps: [[new Optional(), new SkipSelf(), CoViewportRulerService], CoScrollDispatcherService],
+    useFactory: VIEWPORT_RULER_PROVIDER_FACTORY
+};