super-impose

Web Component that super imposes one child over another to the same scroll position

npm i super-impose

pnpm add super-impose

yarn add super-impose

Examples

# complex

Try it live

# view source

example/complex.ts

import { SuperImposeElement } from 'super-impose'

customElements.define('super-impose', SuperImposeElement)

class WrapElement extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot!.innerHTML = /*html*/ `
      <style>
        :host {
          display: flex;
          position: relative;
          resize: both;
          white-space: pre;
          overflow: scroll;
        }
        [part="box"] {
        }
      </style>

      <super-impose part="box">
        <textarea slot="leader" part="leader" wrap="off">
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
          some content wide enough to scroll<br />
        </textarea>
        <div slot="follower">
          other content<br />
          other content<br />
          other content<br />
          other content<br />
          other content<br />
          other content<br />
        </div>
      </super-impose>
    `
  }
}

customElements.define('wrap-element', WrapElement)

document.body.innerHTML = /*html*/ `
<style>
  * {
    background: transparent;
    color: #bbb;
  }
  wrap-element {
    width: 100px;
    height: 100px;
  }
</style>

<pre>
    one
    two
    three
    </pre>
    <div style="padding: 20px; border: 1px solid #000; width: 100px; height: 100px; overflow: hidden; resize: both">
      <super-impose onscroll="console.log(this.scrollTop, this.scrollLeft)">
        <textarea slot="leader" wrap="off">
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
some content wide enough to scroll
        </textarea>
        <pre slot="follower" style="white-space: pre">
other content
other content
other content
other content
other content
other content
other content
        </pre>
      </super-impose>
    </div>
    <wrap-element></wrap-element>
`

const el = document.body.querySelector('super-impose')!
setTimeout(() => {
  el.remove()
  setTimeout(() => {
    document.body.appendChild(el)
  }, 500)
}, 2500)

# web

Try it live

# view source

example/web.ts

import { SuperImposeElement } from 'super-impose'

customElements.define('super-impose', SuperImposeElement)

document.body.innerHTML = /*html*/ `
<super-impose
  id="demo"
  style="width: 120px; height: 120px; overflow: hidden; resize: both">
<pre slot="leader" style="color: #fa4; font-size: 25px;">
🎈🎈🎈🎈🎈🎈🎈🎈🎈
🎈🎈🎈🎈🎈🎈🎈🎈🎈
🎈🎈🎈🎈🎈🎈🎈🎈🎈
🎈🎈🎈🎈🎈🎈🎈🎈🎈
🎈🎈🎈🎈🎈🎈🎈🎈🎈
🎈🎈🎈🎈🎈🎈🎈🎈🎈
🎈🎈🎈🎈🎈🎈🎈🎈🎈
🎈🎈🎈🎈🎈🎈🎈🎈🎈
🎈🎈🎈🎈🎈🎈🎈🎈🎈
</pre>
<pre slot="follower" style="white-space: pre; color:#1ff; font-size: 15px;">
🌀🌀🌀🌀🌀🌀🌀
🌀🌀🌀🌀🌀🌀🌀
🌀🌀🌀🌀🌀🌀🌀
🌀🌀🌀🌀🌀🌀🌀
🌀🌀🌀🌀🌀🌀🌀
🌀🌀🌀🌀🌀🌀🌀
</pre>
</super-impose>
</div>
`

const leader = document.querySelector('[slot=leader]')!
const mag = 20
let i = 0
const render = () => {
  requestAnimationFrame(render)
  const x = (i * (1 / 1000)) * Math.PI * 2
  Object.assign(leader, {
    scrollLeft: mag + Math.sin(x) * mag,
    scrollTop: mag + Math.cos(x) * mag,
  })
  i += 1000 / 60
}
requestAnimationFrame(render)

API

# SuperImposeElement – Super imposes one child (follower) contents over another at the same scroll position determined by the leader.

src/index.ts#L70

import { SuperImposeElement } from 'super-impose'
customElements.define('super-impose', SuperImposeElement)

--

<super-impose>
  <div slot="leader"></div>
  <div slot="follower"></div>
</super-impose>

# constructor()

# new SuperImposeElement()

SuperImposeElement

# $

src/work/stagas/sigl/dist/types/sigl.d.ts#L25

Context<SuperImposeElement & JsxContext<SuperImposeElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>

# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>

} & __module & {

# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

# context

src/work/stagas/sigl/dist/types/sigl.d.ts#L26

ContextClass<SuperImposeElement & JsxContext<SuperImposeElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

# dispatch

src/work/stagas/sigl/dist/types/events.d.ts#L4

Dispatch<

# (name, detail, init)
# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# host

src/work/stagas/sigl/dist/types/sigl.d.ts#L24

SuperImposeElement

# leader

src/index.ts#L78

HTMLElement

# onScroll  =  ...

src/index.ts#L80

# ()
()  =>

void

# onmounted

EventHandler<SuperImposeElement, CustomEvent<any>>

# onunmounted

EventHandler<SuperImposeElement, CustomEvent<any>>

# rescroll  =  ...

src/index.ts#L92

Fn<[ ], void>

# root  =  ...

src/index.ts#L71

ShadowRoot

# scrollLeft  =  0

src/index.ts#L75

number

# scrollTop  =  0

src/index.ts#L76

number

# scroller

src/index.ts#L77

HTMLDivElement

# created(ctx)

# ctx
Context<SuperImposeElement & JsxContext<SuperImposeElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

src/index.ts#L101

# $
Context<SuperImposeElement & JsxContext<SuperImposeElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<SuperImposeElement, LifecycleEvents & object [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<SuperImposeElement, keyof SuperImposeElement>

Credits

• sigl by stagas – Web framework

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas