visbug-lib
Version:
<p align="center"> <img src="./assets/visbug.png" width="300" height="300" alt="visbug"> <br> <a href="https://www.npmjs.org/package/visbug"><img src="https://img.shields.io/npm/v/visbug.svg?style=flat" alt="npm latest version number"></a> <a href
35 lines (28 loc) • 953 B
JavaScript
import { Handles } from './handles.element'
import { HandleStyles, GripStyles } from '../styles.store'
export class Grip extends Handles {
constructor() {
super()
this.styles = [HandleStyles, GripStyles]
}
toggleHovering({hovering}) {
hovering
? this.$shadow.children[0].setAttribute('hovering', true)
: this.$shadow.children[0].removeAttribute('hovering')
}
render({ width, height, top, left }) {
this.style.setProperty('--top', `${top + window.scrollY}px`)
this.style.setProperty('--left', `${left}px`)
return `
<svg width="${width}" height="${height}">
<pattern id="stripes" patternUnits="userSpaceOnUse" width="4" height="4">
<line x="0" y1="0" x2="0" y2="4" style="stroke:hsla(330, 100%, 71%, 50%); stroke-width: 3;" />
</pattern>
<g>
<rect fill="url(#stripes)" />
</g>
</svg>
`
}
}
customElements.define('visbug-grip', Grip)