1.0.0-alpha.3

.gitignore

@@ -17,5 +17,5 @@ node_modules
 *.tgz
 
 # Build artifacts
-lib
-docs/assets/hy-*
+#<removed temporarily>lib
+#<removed temporarily>docs/assets/hy-*

lib/calc.d.ts

@@ -0,0 +1,9 @@
+import { Coord } from './observables';
+export declare class CalcMixin {
+    side: 'left' | 'right';
+    range: [number, number];
+    calcIsInRange({ clientX }: Coord, opened: boolean): boolean;
+    calcIsSwipe({ clientX: startX }: Coord, { clientX: endX }: Coord, translateX: number, drawerWidth: number, _: number): boolean;
+    calcWillOpen(_: {}, __: {}, translateX: number, drawerWidth: number, velocity: number): boolean;
+    calcTranslateX({ clientX: moveX }: Coord, { clientX: startX }: Coord, startTranslateX: number, drawerWidth: number): number;
+}

lib/calc.js

@@ -0,0 +1,68 @@
+import { VELOCITY_THRESHOLD } from "./constants";
+// Using shorthands for common functions
+const min = Math.min.bind(Math);
+const max = Math.max.bind(Math);
+export class CalcMixin {
+    calcIsInRange({ clientX }, opened) {
+        // console.log(this.range, this.align);
+        switch (this.side) {
+            case "left": {
+                const [lower, upper] = this.range;
+                return clientX > lower && (opened || clientX < upper);
+            }
+            case "right": {
+                const upper = window.innerWidth - this.range[0];
+                const lower = window.innerWidth - this.range[1];
+                return clientX < upper && (opened || clientX > lower);
+            }
+            default:
+                throw Error();
+        }
+    }
+    calcIsSwipe({ clientX: startX }, { clientX: endX }, translateX, drawerWidth, _) {
+        return endX !== startX || (translateX > 0 && translateX < drawerWidth);
+    }
+    calcWillOpen(_, __, translateX, drawerWidth, velocity) {
+        switch (this.side) {
+            case "left": {
+                if (velocity > VELOCITY_THRESHOLD)
+                    return true;
+                else if (velocity < -VELOCITY_THRESHOLD)
+                    return false;
+                else if (translateX >= drawerWidth / 2)
+                    return true;
+                else
+                    return false;
+            }
+            case "right": {
+                if (-velocity > VELOCITY_THRESHOLD)
+                    return true;
+                else if (-velocity < -VELOCITY_THRESHOLD)
+                    return false;
+                else if (translateX <= -drawerWidth / 2)
+                    return true;
+                else
+                    return false;
+            }
+            default:
+                throw Error();
+        }
+    }
+    calcTranslateX({ clientX: moveX }, { clientX: startX }, startTranslateX, drawerWidth) {
+        switch (this.side) {
+            case "left": {
+                const deltaX = moveX - startX;
+                const translateX = startTranslateX + deltaX;
+                return max(0, min(drawerWidth, translateX));
+            }
+            case "right": {
+                const deltaX = moveX - startX;
+                const translateX = startTranslateX + deltaX;
+                return min(0, max(-drawerWidth, translateX));
+            }
+            default:
+                throw Error();
+        }
+    }
+}
+;

lib/common.d.ts

@@ -0,0 +1,12 @@
+import { Observable } from "rxjs";
+export declare function easeOutSine(t: number, b: number, c: number, d: number): number;
+export declare function applyMixins<T>(derivedCtor: Constructor<T>, baseCtors: Constructor<any>[]): Constructor<T>;
+export declare function subscribeWhen<T>(p$: Observable<boolean>): (source: Observable<T>) => Observable<T>;
+export declare function filterWhen<T>(p$: Observable<boolean>, ...others: Observable<boolean>[]): (source: Observable<T>) => Observable<T>;
+export declare function createResizeObservable(el: HTMLElement): Observable<ResizeObserverEntry>;
+export declare function observeWidth(el: HTMLElement): Observable<number>;
+export declare const rangeConverter: {
+    fromAttribute(attr?: string): number[];
+    toAttribute(range?: number[]): string;
+};
+export declare function rangeHasChanged(curr: number[], prev?: number[]): boolean;

lib/common.js

@@ -0,0 +1,56 @@
+import { Observable, of, NEVER } from "rxjs";
+import { filter, map, switchMap, withLatestFrom } from "rxjs/operators";
+export function easeOutSine(t, b, c, d) {
+    return c * Math.sin((t / d) * (Math.PI / 2)) + b;
+}
+export function applyMixins(derivedCtor, baseCtors) {
+    baseCtors.forEach(baseCtor => {
+        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
+            derivedCtor.prototype[name] = baseCtor.prototype[name];
+        });
+    });
+    return derivedCtor;
+}
+export function subscribeWhen(p$) {
+    return (source) => {
+        return p$.pipe(switchMap(p => (p ? source : NEVER)));
+    };
+}
+export function filterWhen(p$, ...others) {
+    return (source) => {
+        if (others.length === 0) {
+            return source.pipe(withLatestFrom(p$), filter(([, p]) => p), map(([x]) => x));
+        }
+        return source.pipe(withLatestFrom(p$, ...others), filter(([, ...ps]) => ps.every(p => p)), map(([x]) => x));
+    };
+}
+;
+export function createResizeObservable(el) {
+    return Observable.create((obs) => {
+        const observer = new window.ResizeObserver(xs => xs.forEach(x => obs.next(x)));
+        observer.observe(el);
+        return () => { observer.unobserve(el); };
+    });
+}
+export function observeWidth(el) {
+    // This component should have at least basic support without `ResizeObserver` support,
+    // so we pass a one-time measurement when it's missing. Obviously this won't update, so BYO polyfill.
+    const resize$ = "ResizeObserver" in window
+        ? createResizeObservable(el)
+        : of({ contentRect: { width: el.clientWidth } });
+    return resize$.pipe(map(({ contentRect: { width } }) => width));
+}
+export const rangeConverter = {
+    fromAttribute(attr = '') {
+        return attr
+            .replace(/[\[\]]/g, '')
+            .split(",")
+            .map(Number);
+    },
+    toAttribute(range = []) {
+        return range.join(',');
+    },
+};
+export function rangeHasChanged(curr, prev = []) {
+    return curr.length !== prev.length || curr.some((v, i) => v !== prev[i]);
+}

lib/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const BASE_DURATION = 200;
+export declare const WIDTH_CONTRIBUTION = 0.15;
+export declare const VELOCITY_THRESHOLD = 0.15;

lib/constants.js

@@ -0,0 +1,10 @@
+// The base duration of the fling animation.
+export const BASE_DURATION = 200;
+// We adjust the duration of the animation using the width of the drawer.
+// There is no physics to this, but we know from testing that the animation starts to feel bad
+// when the drawer increases in size.
+// From testing we know that, if we increase the duration as a fraction of the drawer width,
+// the animation stays smooth across common display sizes.
+export const WIDTH_CONTRIBUTION = 0.15;
+// Minimum velocity of the drawer (in px/ms) when releasing to make it fling to opened/closed state.
+export const VELOCITY_THRESHOLD = 0.15;

lib/index.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2019 Florian Klampfer <https://qwtel.com/>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * @license
+ * @nocompile
+ */
+import { LitElement } from 'lit-element';
+import { Observable, Subject } from "rxjs";
+import { ObservablesMixin, Coord } from './observables';
+import { CalcMixin } from './calc';
+import { UpdateMixin, Updater } from './update';
+declare class RxLitElement extends LitElement {
+    $connected: Subject<boolean>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private firstUpdate;
+    $: {};
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, any>): void;
+}
+declare const HyDrawer_base: Constructor<RxLitElement>;
+export declare class HyDrawer extends HyDrawer_base implements ObservablesMixin, UpdateMixin, CalcMixin {
+    static styles: import("lit-element").CSSResult;
+    el: HTMLElement;
+    scrimEl: HTMLElement;
+    contentEl: HTMLElement;
+    peekEl: HTMLElement;
+    opened: boolean;
+    side: "left" | "right";
+    persistent: boolean;
+    threshold: number;
+    noScroll: boolean;
+    mouseEvents: boolean;
+    hashChange: boolean;
+    range: [number, number];
+    scrimClickable: boolean;
+    grabbing: boolean;
+    willChange: boolean;
+    readonly histId: string;
+    readonly hashId: string;
+    translateX: number;
+    opacity: number;
+    isSliding: boolean;
+    $: {
+        opened?: Subject<boolean>;
+        side?: Subject<"left" | "right">;
+        persistent?: Subject<boolean>;
+        preventDefault?: Subject<boolean>;
+        mouseEvents?: Subject<boolean>;
+        hashChange?: Subject<boolean>;
+    };
+    animateTo$: Subject<boolean>;
+    getStartObservable: () => Observable<Coord>;
+    getMoveObservable: (start$: Observable<Coord>, end$: Observable<Coord>) => Observable<Coord>;
+    getEndObservable: () => Observable<Coord>;
+    getIsSlidingObservable: (move$: Observable<Coord>, start$: Observable<Coord>, end$: Observable<Coord>) => Observable<boolean>;
+    getIsSlidingObservableInner: (move$: Observable<Coord>, start$: Observable<Coord>) => Observable<boolean>;
+    calcIsInRange: (start: Coord, opened: boolean) => boolean;
+    calcIsSwipe: (start: Coord, end: Coord, translateX: number, drawerWidth: number, _: number) => boolean;
+    calcWillOpen: (start: {}, end: {}, translateX: number, drawerWidth: number, velocity: number) => boolean;
+    calcTranslateX: (move: Coord, start: Coord, startTranslateX: number, drawerWidth: number) => number;
+    updateDOM: (translateX: number, drawerWidth: number) => void;
+    updater: Updater;
+    getDrawerWidth(): Observable<number>;
+    consolidateState(): void;
+    connectedCallback(): void;
+    upgrade: () => void;
+    private transitioned;
+    private transitionedHash;
+    render(): import("lit-element").TemplateResult;
+    fireEvent<T>(name: string, eventInitDict?: CustomEventInit<T>): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+}
+export {};