aptechka 0.1.1 → 0.1.3

package/src/packages/scroll/ScrollbarElement.ts

@@ -1,170 +0,0 @@
-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

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

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

@@ -1,74 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,177 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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()
-  }
-}