aptechka 0.1.0

package/src/packages/scroll/ScrollbarElement.ts

@@ -0,0 +1,170 @@
+import { define } from '$packages/custom-element'
+import { RESIZE_ORDER } from '$packages/order'
+import { resizer } from '$packages/resizer'
+import { isBrowser } from '$packages/utils'
+import { ScrollUserElement } from './ScrollUserElement'
+
+@define('e-scrollbar')
+export class ScrollbarElement extends ScrollUserElement {
+  #slotElement: HTMLSlotElement = null!
+  #thumbElement: HTMLElement = null!
+
+  #isHorisontal = false
+
+  #thumbSize = 0
+  #thumbScrollSize = 0
+
+  #position = 0
+
+  constructor() {
+    super()
+
+    if (isBrowser) {
+      const root = this.attachShadow({ mode: 'open' })
+
+      const styleElement = document.createElement('style')
+      styleElement.textContent = `
+        :host {
+          display: inline-block;
+          z-index: 1;
+          background-color: #efefef;
+        }
+
+        :host([axis="y"]) {
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 1vmin;
+          height: 100%;
+        }
+
+        :host([axis="x"]) {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 100%;
+          height: 1vmin;
+        }
+
+        .default-thumb {
+          background-color: #181818;
+          border-radius: 1vmin;
+          touch-action: none;
+        }
+
+        ::slotted(*) {
+          touch-action: none;
+        }
+      `
+      root.appendChild(styleElement)
+
+      this.#slotElement = document.createElement('slot')
+      root.appendChild(this.#slotElement)
+    }
+  }
+
+  public get thumbElement() {
+    return this.#thumbElement
+  }
+
+  protected override connectedCallback() {
+    super.connectedCallback()
+
+    const slottedThumb = this.#slotElement.assignedElements()[0]
+
+    if (slottedThumb instanceof HTMLElement) {
+      this.#thumbElement = slottedThumb
+    } else {
+      this.#thumbElement = document.createElement('div')
+      this.#thumbElement.classList.add('default-thumb')
+      this.shadowRoot!.appendChild(this.#thumbElement)
+    }
+
+    this.#thumbElement.addEventListener('pointerdown', this.#grabListener)
+
+    resizer.subscribe(this.#resizeListener, RESIZE_ORDER.SCROLL + 1)
+
+    this.scrollElement.damped.subscribe(this.#scrollListener)
+
+    this.scrollElement.axisAttibute.subscribe(this.#axisListener)
+  }
+
+  protected disconnectedCallback() {
+    this.#thumbElement.removeEventListener('pointerdown', this.#grabListener)
+
+    resizer.unsubscribe(this.#resizeListener)
+
+    this.scrollElement.damped.unsubscribe(this.#scrollListener)
+
+    this.scrollElement.axisAttibute.unsubscribe(this.#axisListener)
+  }
+
+  #resizeListener = () => {
+    this.#isHorisontal = this.offsetWidth > this.offsetHeight
+
+    const barSize = this.#isHorisontal ? this.offsetWidth : this.offsetHeight
+
+    this.#thumbSize =
+      barSize / ((this.scrollElement.scrollSize + this.scrollElement.viewportSize) / barSize)
+
+    this.#thumbSize = Math.max(this.#thumbSize, 30)
+
+    if (this.#isHorisontal) {
+      this.#thumbElement.style.width = this.#thumbSize + 'px'
+      this.#thumbElement.style.height = '100%'
+    } else {
+      this.#thumbElement.style.width = '100%'
+      this.#thumbElement.style.height = this.#thumbSize + 'px'
+    }
+
+    this.#thumbScrollSize = barSize - this.#thumbSize
+
+    if (!this.scrollElement.scrollSize) {
+      this.style.display = 'none'
+    }
+  }
+
+  #scrollListener = () => {
+    this.#position = this.scrollElement.currentProgress * this.#thumbScrollSize
+
+    if (this.#isHorisontal) {
+      this.#thumbElement.style.transform = `translate3d(${this.#position}px, 0px, 0px)`
+    } else {
+      this.#thumbElement.style.transform = `translate3d(0px, ${this.#position}px, 0px)`
+    }
+  }
+
+  #axisListener = () => {
+    this.setAttribute('axis', this.scrollElement.axisAttibute.current)
+  }
+
+  #grabListener = (grabEvent: PointerEvent) => {
+    const move = (moveEvent: PointerEvent) => {
+      const moveCursor = this.#isHorisontal ? moveEvent.x : moveEvent.y
+
+      const mult = this.scrollElement.distance / this.#thumbScrollSize
+      const delta = (moveCursor - grabCursor) * mult
+
+      this.scrollElement.damped.set(startValue + delta)
+    }
+
+    const drop = () => {
+      removeEventListener('pointermove', move)
+      removeEventListener('pointerup', drop)
+      removeEventListener('touchend', drop)
+    }
+
+    addEventListener('pointermove', move)
+    addEventListener('pointerup', drop)
+    addEventListener('touchend', drop)
+
+    const startValue = this.scrollElement.damped.target
+    const grabCursor = this.#isHorisontal ? grabEvent.x : grabEvent.y
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'e-scrollbar': ScrollbarElement
+  }
+}

package/src/packages/scroll/index.ts

@@ -0,0 +1,2 @@
+export { ScrollElement } from './ScrollElement'
+export { ScrollbarElement } from './ScrollbarElement'

package/src/packages/scroll-entries/index.ts

@@ -0,0 +1,74 @@
+import { Axes2D } from '$packages/utils'
+
+interface ScrollEntry {
+  axis: Axes2D
+  value: number
+}
+
+class ScrollEntries {
+  #elements: Set<HTMLElement> = new Set()
+  #entires: WeakMap<HTMLElement, ScrollEntry> = new WeakMap()
+
+  public register(element: HTMLElement) {
+    this.#entires.set(element, {
+      axis: 'y',
+      value: 0,
+    })
+    this.#elements.add(element)
+  }
+
+  public unregister(element: HTMLElement) {
+    this.#entires.delete(element)
+    this.#elements.delete(element)
+  }
+
+  public update(element: HTMLElement, axis: Axes2D, value: number) {
+    const entry = this.#entires.get(element)!
+    entry.axis = axis
+    entry.value = value
+  }
+
+  public hasEntry(element: HTMLElement) {
+    return this.#entires.has(element)
+  }
+
+  public getEntry(element: HTMLElement) {
+    return this.#entires.get(element)!
+  }
+
+  public getClosest(element: HTMLElement): ScrollEntry | null {
+    let parent = element.parentElement
+
+    while (parent && !this.hasEntry(parent)) {
+      parent = parent.parentElement
+    }
+
+    if (parent && parent !== element) {
+      const entry = this.getEntry(parent)
+
+      if (entry) {
+        return entry
+      } else {
+        return this.getClosest(parent)
+      }
+    }
+
+    return null
+  }
+
+  public getAll(element: HTMLElement) {
+    const elements = Array.from(this.#elements).filter((v) => v !== element && v.contains(element))
+
+    const entries: Array<ScrollEntry> = []
+
+    elements.forEach((element) => {
+      if (this.#entires.has(element)) {
+        entries.push(this.#entires.get(element)!)
+      }
+    })
+
+    return entries
+  }
+}
+
+export const scrollEnties = new ScrollEntries()

package/src/packages/source/SourceClass.ts

@@ -0,0 +1,77 @@
+export class Source {
+  #url: string
+  #name: string
+  #density: number
+  #query: string
+  #queryPx: number
+  #queryType: 'max' | 'min'
+  #extension: string
+
+  constructor(url: string) {
+    this.#url = url
+
+    const firstQuestionIndex = url.indexOf('?')
+
+    if (firstQuestionIndex >= 0) {
+      url = url.slice(0, firstQuestionIndex)
+    }
+
+    const splitted = url.split('.')
+
+    this.#name = splitted[0]
+
+    const xpattern = /\d+x/g
+    const xmatch = splitted.find((s) => s.match(xpattern))
+    this.#density = xmatch ? parseInt(xmatch) : 1
+
+    const maxpattern = /\d+max/g
+    const minpattern = /\d+min/g
+
+    const maxmatch = splitted.find((s) => s.match(maxpattern))
+    const minmatch = splitted.find((s) => s.match(minpattern))
+
+    if (maxmatch) {
+      this.#queryPx = parseInt(maxmatch)
+      this.#queryType = 'max'
+      this.#query = `(max-width: ${this.#queryPx}px)`
+    } else if (minmatch) {
+      this.#queryPx = parseInt(minmatch)
+      this.#query = `(min-width: ${this.#queryPx}px)`
+      this.#queryType = 'min'
+    } else {
+      this.#queryPx = 0
+      this.#query = `(min-width: ${this.#queryPx}px)`
+      this.#queryType = 'min'
+    }
+
+    this.#extension = '.' + splitted[splitted.length - 1]
+  }
+
+  public get url() {
+    return this.#url
+  }
+
+  public get name() {
+    return this.#name
+  }
+
+  public get density() {
+    return this.#density
+  }
+
+  public get query() {
+    return this.#query
+  }
+
+  public get extension() {
+    return this.#extension
+  }
+
+  public get queryType() {
+    return this.#queryType
+  }
+
+  public get queryPx() {
+    return this.#queryPx
+  }
+}

package/src/packages/source/SourceElement.ts

@@ -0,0 +1,177 @@
+import { CustomElement } from '$packages/custom-element'
+import { intersector } from '$packages/intersector'
+import { loading } from '$packages/loading'
+import { Notifier } from '$packages/notifier'
+import type { Source } from './SourceClass'
+import { SourceManager } from './SourceManager'
+
+let id = 0
+
+export interface SourceConsumer extends HTMLElement {
+  src: string | null
+}
+
+export abstract class SourceElement<T extends SourceConsumer> extends CustomElement {
+  #sourceManager: SourceManager = null!
+  #consumerElement: T = null!
+  #isFirstLoadHappened = false
+  #intersectionHappened = false
+  #isLazy = false
+  #id: string
+  #captureEvent = new Notifier()
+  #releaseEvent = new Notifier()
+
+  constructor() {
+    super()
+
+    this.#id = `source-consumer-${++id}`
+  }
+
+  public get consumerElement() {
+    return this.#consumerElement
+  }
+
+  public get captureEvent() {
+    return this.#captureEvent
+  }
+
+  public get releaseEvent() {
+    return this.#releaseEvent
+  }
+
+  protected abstract createConsumer(): T
+  protected abstract consumeSource(url: string | null): void
+
+  protected connectedCallback() {
+    const srcset = this.getAttribute('srcset')
+
+    if (!srcset) return
+
+    this.#consumerElement = this.createConsumer()
+
+    this.#consumerElement.style.cssText = `
+        display: block;
+        width: 100%;
+        height: 100%;
+      `
+
+    this.#consumerElement.classList.add('source-consumer')
+
+    Array.from(this.attributes).forEach((attr) => {
+      if (attr.nodeName.startsWith('e-')) {
+        const originalAttributeName = attr.nodeName.slice(2)
+        const value = attr.nodeValue || ''
+
+        this.#consumerElement.setAttribute(originalAttributeName, value)
+        ;(this.#consumerElement as any)[originalAttributeName] = value ? value : true
+      }
+    })
+
+    this.appendChild(this.#consumerElement)
+
+    this.#sourceManager = new SourceManager({
+      srcset: srcset,
+    })
+
+    this.#isLazy = this.hasAttribute('lazy')
+
+    this.#sourceManager.subscribe((d) => {
+      if (!this.#isLazy || (this.#isLazy && this.#intersectionHappened)) {
+        this.#loadSource(d.current)
+      }
+    })
+
+    intersector.subscribe(this, this.#intersectionListener)
+
+    this.#sourceManager.connect()
+  }
+
+  protected disconnectedCallback() {
+    intersector.unsubscribe(this.#intersectionListener)
+
+    this.#captureEvent.close()
+    this.#releaseEvent.close()
+    this.#sourceManager.close()
+
+    this.#consumerElement.onloadeddata = null
+    this.#consumerElement.onload = null
+    this.#consumerElement.onerror = null
+
+    this.#consumerElement.remove()
+  }
+
+  #loadSource(source: Source | undefined) {
+    this.#consumerElement.onloadeddata = null
+    this.#consumerElement.onload = null
+    this.#consumerElement.onerror = null
+
+    if (source) {
+      const isKeepSourceParameters = this.hasAttribute('keep-source-parameters')
+
+      this.classList.remove('loaded')
+      this.classList.add('loading')
+
+      const url = isKeepSourceParameters ? source.url : source.name + source.extension
+
+      this.consumeSource(url)
+
+      const loadListener = () => {
+        this.classList.remove('error')
+        this.classList.remove('loading')
+        this.classList.add('loaded')
+
+        if (!this.#isLazy && !this.#isFirstLoadHappened) {
+          loading.setLoaded(this.#id, 1)
+        }
+
+        this.#isFirstLoadHappened = true
+      }
+
+      const errorListener = () => {
+        this.classList.remove('loading')
+        this.classList.add('error')
+
+        if (!this.#isLazy && !this.#isFirstLoadHappened) {
+          loading.setError(this.#id, url)
+        }
+
+        this.#isFirstLoadHappened = true
+      }
+
+      if (!this.#isLazy && !this.#isFirstLoadHappened) {
+        loading.setTotal(this.#id, 1)
+      }
+
+      this.#consumerElement.onloadeddata = () => {
+        loadListener()
+      }
+      this.#consumerElement.onload = () => {
+        loadListener()
+      }
+      this.#consumerElement.onerror = errorListener
+    } else {
+      this.consumeSource(null)
+    }
+  }
+
+  #intersectionListener = (entry: IntersectionObserverEntry) => {
+    if (this.#isLazy) {
+      if (!this.#intersectionHappened && entry.isIntersecting) {
+        if (
+          this.#sourceManager.current &&
+          this.#sourceManager.current !== this.#sourceManager.previous
+        ) {
+          this.#loadSource(this.#sourceManager.current)
+        }
+
+        this.#intersectionHappened = true
+      }
+    }
+
+    if (entry.isIntersecting) {
+      this.#captureEvent.notify()
+    } else {
+      this.#releaseEvent.notify()
+    }
+  }
+}

package/src/packages/source/SourceManager.ts

@@ -0,0 +1,61 @@
+import { RESIZE_ORDER } from '$packages/order'
+import { resizer } from '$packages/resizer'
+import { Store } from '$packages/store'
+import type { Source } from './SourceClass'
+import { SourceSet, SourceSetMediaSources } from './SourceSet'
+
+export type SourceManagerSourceSet = string | Array<string>
+
+export interface SourceManagerParameters {
+  srcset: SourceManagerSourceSet
+}
+
+export class SourceManager extends Store<Source | undefined> {
+  #srcset: SourceSet
+
+  constructor(parameters: SourceManagerParameters) {
+    super(undefined)
+
+    this.#srcset = new SourceSet(parameters.srcset)
+  }
+
+  public override close() {
+    super.close()
+    this.disconnect()
+  }
+
+  public connect() {
+    resizer.subscribe(this.#resizeListener, RESIZE_ORDER.SOURCE_MANAGER)
+  }
+
+  public disconnect() {
+    resizer.unsubscribe(this.#resizeListener)
+  }
+
+  #resizeListener = () => {
+    let matchedSources: SourceSetMediaSources | undefined
+
+    this.#srcset.mediaBuckets.forEach((sources, query) => {
+      if (matchMedia(query).matches) {
+        matchedSources = sources
+      }
+    })
+
+    let matchedSouce: Source | undefined
+
+    let maxDensity = 0
+
+    matchedSources?.forEach((s) => {
+      if (s.density > maxDensity && s.density <= Math.max(devicePixelRatio, 1)) {
+        maxDensity = s.density
+        matchedSouce = s
+      }
+    })
+
+    if (matchedSources?.length && !matchedSouce) {
+      matchedSouce = matchedSources[0]
+    }
+
+    this.current = matchedSouce
+  }
+}

package/src/packages/source/SourceSet.ts

@@ -0,0 +1,52 @@
+import { Source } from './SourceClass'
+
+export type SourceSetMediaSources = Array<Source>
+export type SourceSetMediaBucket = Map<string, SourceSetMediaSources>
+
+export class SourceSet {
+  #mediaBuckets: SourceSetMediaBucket
+
+  constructor(sourceSet: string | Array<string>) {
+    this.#mediaBuckets = new Map()
+
+    const mediaBuckets =
+      typeof sourceSet === 'string'
+        ? sourceSet
+            .trim()
+            .split(',')
+            .map((u) => u.trim())
+            .filter((u) => !!u)
+        : sourceSet
+
+    const tmp: Array<[string, Source]> = []
+
+    mediaBuckets.forEach((v) => {
+      const source = new Source(v)
+      tmp.push([source.query, source])
+    })
+
+    const max = tmp
+      .filter((v) => v[1].queryType === 'max')
+      .sort((a, b) => b[1].queryPx - a[1].queryPx)
+
+    const min = tmp
+      .filter((v) => v[1].queryType === 'min' && v[1].queryPx !== 0)
+      .sort((a, b) => a[1].queryPx - b[1].queryPx)
+
+    const defaultMatch = tmp.filter((t) => t[0] === '(min-width: 0px)')
+
+    const sorted = defaultMatch ? [...defaultMatch, ...max, ...min] : [...max, ...min]
+
+    sorted.forEach((v) => {
+      if (!this.#mediaBuckets.has(v[0])) {
+        this.#mediaBuckets.set(v[0], [])
+      }
+
+      this.#mediaBuckets.get(v[0])!.push(v[1])
+    })
+  }
+
+  public get mediaBuckets() {
+    return this.#mediaBuckets
+  }
+}

package/src/packages/source/index.ts

@@ -0,0 +1,8 @@
+export { Source } from './SourceClass'
+export { SourceSet, type SourceSetMediaSources, type SourceSetMediaBucket } from './SourceSet'
+export {
+  SourceManager,
+  type SourceManagerSourceSet,
+  type SourceManagerParameters,
+} from './SourceManager'
+export { SourceElement, type SourceConsumer } from './SourceElement'

package/src/packages/store/Composed.ts

@@ -0,0 +1,33 @@
+import { debounce } from '$packages/utils'
+import { Store, StoreOptions } from './Store'
+
+export type ComposedCallback<ComposedType> = () => ComposedType
+
+export class Composed<ComposedType> extends Store<ComposedType> {
+  #unsubscribers: Array<Function> = []
+
+  constructor(
+    stores: Array<Store<any>>,
+    callback: ComposedCallback<ComposedType>,
+    parameters?: StoreOptions<ComposedType>
+  ) {
+    super(null!, parameters)
+
+    const update = debounce(() => {
+      this.current = callback()
+    }, 0)
+
+    stores.forEach((store) => {
+      this.#unsubscribers.push(
+        store.subscribe(() => {
+          update()
+        })
+      )
+    })
+  }
+
+  public override close() {
+    super.close()
+    this.#unsubscribers.forEach((u) => u())
+  }
+}

package/src/packages/store/Derived.ts

@@ -0,0 +1,24 @@
+import { Store, StoreOptions } from './Store'
+
+export type DerivedCallback<StoreType, DerivedType> = (value: StoreType) => DerivedType
+
+export class Derived<DerivedType, StoreType> extends Store<DerivedType> {
+  #unsubscriber: Function
+
+  constructor(
+    store: Store<StoreType>,
+    callback: DerivedCallback<StoreType, DerivedType>,
+    parameters?: StoreOptions<DerivedType>
+  ) {
+    super(null!, parameters)
+
+    this.#unsubscriber = store.subscribe((e) => {
+      this.current = callback(e.current)
+    })
+  }
+
+  public override close() {
+    super.close()
+    this.#unsubscriber()
+  }
+}