@aidenlx/player
Version:
Headless web components that make integrating media on the a web a breeze.
31 lines (27 loc) • 6.49 kB
JavaScript
import{a as C}from"./chunk.ZSS4272G.js";import{a as E}from"./chunk.M4FYSJAP.js";import{a as o}from"./chunk.KCC3AAG2.js";import{D as b,E as v,F as V,H as R,S as p,U as y,V as d,W as h,a as r,b as f,ha as g,ia as w,j as k,ja as A,k as s,m as u}from"./chunk.PWTX2M5C.js";var P=w`
* {
box-sizing: border-box;
touch-action: none;
}
:host {
display: block;
contain: layout;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
:host([hidden]) {
display: none;
}
:host(:focus) {
outline: none;
}
:host(:focus-visible) {
outline: 1px auto Highlight;
outline: 1px auto -webkit-focus-ring-color;
}
:host(.focus-visible) {
outline: 1px auto Highlight;
outline: 1px auto -webkit-focus-ring-color;
}
`;var x=(i=>(i[i.Left=-1]="Left",i[i.ArrowLeft=-1]="ArrowLeft",i[i.Up=-1]="Up",i[i.ArrowUp=-1]="ArrowUp",i[i.Right=1]="Right",i[i.ArrowRight=1]="ArrowRight",i[i.Down=1]="Down",i[i.ArrowDown=1]="ArrowDown",i))(x||{}),n=class extends A{constructor(){super();this.Ls=C.provide(this);this.disabled=!1;this.value=50;this._e=1;this.oi=1;this.shiftKeyMultiplier=5;this.customValueText=!1;this.n=new E(this);this.K=new k;this.In=s(this,"pointerenter",()=>{this.disabled||(this.setAttribute("pointing",""),this.store.pointing.set(!0))});this.Bn=s(this,"pointermove",t=>{if(this.disabled||this.isDragging)return;let e=this.Xe(t);this.store.pointerValue.set(e),this.Ye(t)});this.jn=s(this,"pointerleave",()=>{this.disabled||(this.removeAttribute("pointing"),this.store.pointing.set(!1))});this.Gn=s(this,"pointerdown",t=>{this.disabled||(this.ks(t),this.jt(t))});this.zn=s(this,"keydown",t=>{if(this.disabled)return;let{key:e,shiftKey:a}=t;if(!Object.keys(x).includes(e))return;let l=a?this.keyboardStep*this.shiftKeyMultiplier:this.keyboardStep,m=Number(x[e]),N=l*m,i=(this.value+N)/this.step,$=this.step*i;this.value=this.di($),this.Je(t)});this.Wn=s(this,"vds-slider-value-change",this.Bt.bind(this));this.Kn=s(this,"vds-slider-pointer-value-change",this.ai.bind(this));this.jt=g(t=>{if(this.disabled||!this.isDragging)return;let e=this.Xe(t);this.store.pointerValue.set(e),this.Ye(t)});this.Qn=s(this,"pointerup",t=>{this.disabled||!this.isDragging||this._s(t)},{target:document});this.Jn=s(this,"touchmove",t=>{this.disabled||!this.isDragging||t.preventDefault()},{target:document,passive:!1});this.Xn=s(this,"pointermove",t=>{this.disabled||!this.isDragging||this.jt(t)},{target:document});this.li=this.value;this.Je=g(t=>{this.value!==this.li&&(this.dispatchEvent(u("vds-slider-value-change",{detail:this.value,triggerEvent:t})),this.li=this.value)});this.ui=this.pointerValue;this.Ye=g(t=>{if(this.pointerValue===this.ui)return;["vds-slider-pointer-value-change",this.isDragging&&"vds-slider-drag-value-change"].forEach(a=>{a&&this.dispatchEvent(u(a,{detail:this.pointerValue,triggerEvent:t}))}),this.ui=this.pointerValue});R(this)}static get styles(){return[P]}static get parts(){return[]}get store(){return this.Ls.value}get min(){return p(this.store.min)}set min(t){this.store.min.set(t)}get max(){return p(this.store.max)}set max(t){this.store.max.set(t)}get step(){return this._e}set step(t){this._e=t}get keyboardStep(){return this.oi}set keyboardStep(t){this.oi=t}get isDragging(){return p(this.store.dragging)}get fillRate(){let t=this.max-this.min,e=this.value-this.min;return t>0?e/t:0}get fillPercent(){return this.fillRate*100}get pointerValue(){return p(this.store.pointerValue)}get pointerRate(){let t=this.max-this.min,e=this.pointerValue-this.min;return t>0?e/t:0}get pointerPercent(){return this.pointerRate*100}connectedCallback(){super.connectedCallback(),this.Ms(),this.Bt(),this.ai(),this.K.add(this.store.interactive.subscribe(t=>{y(this,"interactive",t)}))}willUpdate(t){(t.has("value")||t.has("min")||t.has("max"))&&(this.value=this.di(this.value),this.store.value.set(this.value),this.Bt(),this.Je()),t.has("disabled")&&this.disabled&&(this.store.dragging.set(!1),this.store.pointing.set(!1),this.removeAttribute("dragging"),this.removeAttribute("pointing"),this.removeAttribute("interactive"),y(this,"aria-disabled",this.disabled)),this.customValueText||this.Ts(),super.willUpdate(t)}disconnectedCallback(){this.jt.cancel(),this.K.empty(),super.disconnectedCallback()}Bt(){h(this,"slider-fill-value",`${this.value}`),h(this,"slider-fill-rate",`${this.fillRate}`),h(this,"slider-fill-percent",`${this.fillPercent}%`)}ai(){h(this,"slider-pointer-value",`${this.pointerValue}`),h(this,"slider-pointer-rate",`${this.pointerRate}`),h(this,"slider-pointer-percent",`${this.pointerPercent}%`)}render(){return this.Hs()}Hs(){return f`${this.Me()}`}Me(){return f`<slot></slot>`}Ms(){d(this,"role","slider"),d(this,"tabindex","0"),d(this,"aria-orientation","horizontal"),d(this,"autocomplete","off")}Ts(){this.setAttribute("aria-valuemin",this.Gt()),this.setAttribute("aria-valuenow",this.zt()),this.setAttribute("aria-valuemax",this.Wt()),this.setAttribute("aria-valuetext",this.ke())}Gt(){return String(this.min)}zt(){return String(this.value)}Wt(){return String(this.max)}ke(){return`${b(this.value/this.max*100,2)}%`}ks(t){if(this.isDragging)return;this.store.dragging.set(!0),this.setAttribute("dragging","");let e=this.Xe(t);this.store.pointerValue.set(e),this.Ye(t),this.dispatchEvent(u("vds-slider-drag-start",{triggerEvent:t,detail:this.value})),this.n.pauseIdling(t)}_s(t){if(!this.isDragging)return;this.store.dragging.set(!1),this.Je.cancel(),this.removeAttribute("dragging");let e=this.Xe(t);this.value=e,this.store.pointerValue.set(e),this.Je(t),this.Ye(t),this.dispatchEvent(u("vds-slider-drag-end",{triggerEvent:t,detail:this.value})),this.n.resumeIdling(t)}di(t){return v(this.min,b(t,V(this.step)),this.max)}Rs(t){let e=v(0,t,1),c=(this.max-this.min)*e,l=Math.round(c/this.step),m=this.step*l;return this.min+m}Xe(t){let e=t.clientX,{left:a,width:c}=this.getBoundingClientRect(),l=(e-a)/c;return this.Rs(l)}};r([o({reflect:!0,type:Number})],n.prototype,"min",1),r([o({reflect:!0,type:Number})],n.prototype,"max",1),r([o({reflect:!0,type:Boolean})],n.prototype,"disabled",2),r([o({reflect:!0,type:Number})],n.prototype,"value",2),r([o({type:Number,reflect:!0})],n.prototype,"step",1),r([o({attribute:"keyboard-step",type:Number})],n.prototype,"keyboardStep",1),r([o({attribute:"shift-key-multiplier",type:Number})],n.prototype,"shiftKeyMultiplier",2),r([o({type:Boolean,attribute:"custom-value-text"})],n.prototype,"customValueText",2);export{n as a};