Restructued UI observables

src/assets/javascripts/ui/element/index.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2016-2019 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { OperatorFunction, pipe } from "rxjs"
+import { filter, map } from "rxjs/operators"
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Retrieve an element matching the query selector
+ *
+ * @template T - Element type
+ *
+ * @param selector - Query selector
+ *
+ * @return HTML element
+ */
+export function getElement<T extends HTMLElement>(
+  selector: string
+): T | undefined {
+  return document.querySelector<T>(selector) || undefined
+}
+
+/* ------------------------------------------------------------------------- */
+
+/**
+ * Retrieve an element matching the query selector
+ *
+ * @template T - Element type
+ *
+ * @return HTML element observable
+ */
+export function withElement<
+  T extends HTMLElement
+>(): OperatorFunction<string, T> {
+  return pipe(
+    map(selector => getElement<T>(selector)!),
+    filter<T>(Boolean)
+  )
+}

src/assets/javascripts/ui/index.ts

@@ -20,6 +20,6 @@
  * IN THE SOFTWARE.
  */
 
-/* ----------------------------------------------------------------------------
- * Types
- * ------------------------------------------------------------------------- */
+export * from "./element"
+export * from "./location"
+export * from "./viewport"

src/assets/javascripts/ui/location/index.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2016-2019 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { Observable, fromEvent } from "rxjs"
+import { filter, map, startWith } from "rxjs/operators"
+
+/* ----------------------------------------------------------------------------
+ * Data
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Observable for window hash changes
+ */
+const hash$ = fromEvent<HashChangeEvent>(window, "hashchange")
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Create an observable emitting changes in location hashes
+ *
+ * @return Hash change observable
+ */
+export function fromLocationHash(): Observable<string> {
+  return hash$.pipe(
+    startWith(document.location.hash),
+    map(() => document.location.hash),
+    filter(hash => hash.length > 0)
+  )
+}

src/assets/javascripts/ui/viewport/_/index.ts

@@ -20,7 +20,7 @@
  * IN THE SOFTWARE.
  */
 
-import { equals } from "rambda"
+import { equals } from "ramda"
 import { Observable, fromEvent, merge } from "rxjs"
 import { distinctUntilChanged, map, startWith } from "rxjs/operators"
 
@@ -93,7 +93,7 @@ export function getViewportSize(): ViewportSize {
  *
  * @return Viewport offset observable
  */
-export function watchViewportOffset(): Observable<ViewportOffset> {
+export function fromViewportOffset(): Observable<ViewportOffset> {
   return merge(scroll$, resize$).pipe(
     map(getViewportOffset),
     startWith(getViewportOffset()),
@@ -106,7 +106,7 @@ export function watchViewportOffset(): Observable<ViewportOffset> {
  *
  * @return Viewport size observable
  */
-export function watchViewportSize(): Observable<ViewportSize> {
+export function fromViewportSize(): Observable<ViewportSize> {
   return resize$.pipe(
     map(getViewportSize),
     startWith(getViewportSize()),

src/assets/javascripts/ui/viewport/breakpoint/index.ts

@@ -35,7 +35,7 @@ import { startWith } from "rxjs/operators"
  * @return Media query observable
  */
 export function fromMediaQuery(query: string): Observable<boolean> {
-  const media  = window.matchMedia(query)
+  const media = window.matchMedia(query)
   return fromEventPattern<boolean>(next =>
     media.addListener(() => next(media.matches))
   ).pipe(

src/assets/javascripts/utilities/index.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2016-2019 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Convert a HTML collection to an array
+ *
+ * @template T - HTML element type
+ *
+ * @param collection - HTML collection
+ *
+ * @return Array of HTML elements
+ */
+export function toArray<
+  T extends HTMLElement
+>(collection: HTMLCollection): T[] {
+  return Array.from(collection) as T[]
+}