FileMaster

Edit File: sc-drawer.js

import{h}from"@stencil/core";import{__}from"@wordpress/i18n";import{animateTo,stopAnimations}from"../../../functions/animate";import{getAnimation,setDefaultAnimation}from"../../../functions/animation-registry";export class ScDrawer{constructor(){this.open=!1,this.label="",this.placement="end",this.contained=!1,this.noHeader=!1,this.stickyHeader=!1,this.stickyFooter=!1}componentDidLoad(){this.drawer.hidden=!this.open,this.open&&!this.contained&&this.lockBodyScrolling(),this.handleOpenChange()}disconnectedCallback(){this.unLockBodyScrolling()}lockBodyScrolling(){document.body.classList.add("sc-scroll-lock")}unLockBodyScrolling(){document.body.classList.remove("sc-scroll-lock")}async show(){this.open||(this.open=!0)}async hide(){this.open&&(this.open=!1)}async requestClose(e="method"){if(this.scRequestClose.emit(e).defaultPrevented){const e=getAnimation(this.el,"drawer.denyClose");animateTo(this.panel,e.keyframes,e.options)}else this.hide()}handleKeyDown(e){"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}async handleOpenChange(){if(this.open){this.scShow.emit(),this.originalTrigger=document.activeElement,this.contained||this.lockBodyScrolling();const e=this.el.querySelector("[autofocus]");e&&e.removeAttribute("autofocus"),await Promise.all([stopAnimations(this.drawer),stopAnimations(this.overlay)]),this.drawer.hidden=!1,requestAnimationFrame((()=>{this.scInitialFocus.emit().defaultPrevented||(e?e.focus({preventScroll:!0}):this.panel.focus({preventScroll:!0})),e&&e.setAttribute("autofocus","")}));const t=getAnimation(this.el,`drawer.show${this.placement.charAt(0).toUpperCase()+this.placement.slice(1)}`),a=getAnimation(this.el,"drawer.overlay.show");await Promise.all([animateTo(this.panel,t.keyframes,t.options),animateTo(this.overlay,a.keyframes,a.options)]),this.scAfterShow.emit()}else{this.scHide.emit(),this.unLockBodyScrolling(),await Promise.all([stopAnimations(this.drawer),stopAnimations(this.overlay)]);const e=getAnimation(this.el,`drawer.hide${this.placement.charAt(0).toUpperCase()+this.placement.slice(1)}`),t=getAnimation(this.el,"drawer.overlay.hide");await Promise.all([animateTo(this.panel,e.keyframes,e.options),animateTo(this.overlay,t.keyframes,t.options)]),this.drawer.hidden=!0;const a=this.originalTrigger;"function"==typeof(null==a?void 0:a.focus)&&setTimeout((()=>a.focus())),this.scAfterHide.emit()}}render(){return h("div",{key:"70d7e22dd4cbdf41636ae7710b05112b96cce7f9",part:"base",class:{drawer:!0,"drawer--open":this.open,"drawer--top":"top"===this.placement,"drawer--end":"end"===this.placement,"drawer--bottom":"bottom"===this.placement,"drawer--start":"start"===this.placement,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":null!==this.el.querySelector('[slot="footer"]')},ref:e=>this.drawer=e,onKeyDown:e=>this.handleKeyDown(e)},h("div",{key:"cfff2c762af66fc876e79e3c15b42b899c0c0f08",part:"overlay",class:"drawer__overlay",onClick:()=>this.requestClose("overlay"),tabindex:"-1",ref:e=>this.overlay=e}),h("div",{key:"722571781cc2ec155d2ad6f75471f6b6c38683e7",part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:void 0,"aria-labelledby":this.noHeader?void 0:"title",tabindex:"0",ref:e=>this.panel=e},!this.noHeader&&h("header",{key:"6fe51167525afdba1d7441edf8ddbd876a11d520",part:"header",class:this.stickyHeader?"header__sticky":""},h("slot",{key:"61d9eab2dbd20e1a6b9bca31ff7943896c07b9d6",name:"header"},h("div",{key:"4934440eeb296185f5deb2d26459836e360056ab",class:"drawer__header"},h("h2",{key:"0ed1ba3c31be6e6965214a16c7d0c00628a1b277",part:"title",class:"drawer__title",id:"title"},h("slot",{key:"89e509ed9ab12c3f1747918d465e74f1e9f7e270",name:"label"},this.label.length>0?this.label:" "," ")),h("sc-icon",{key:"700773fba4fe722097fd3d6be755a1267c80b6a0",part:"close-button",exportparts:"base:close-button__base",class:"drawer__close",name:"x",label:
/** translators: Close this modal window. */
__("Close","surecart"),onClick:()=>this.requestClose("close-button")})))),h("footer",{key:"ee3d4a4e4764782aefc7412da9d9bb9c9c2dca4f",part:"header-suffix",class:"drawer__header-suffix"},h("slot",{key:"56820985c53210fabdab54acc7aa8df972304a2c",name:"header-suffix"})),h("div",{key:"93ad2c2cff893e9716b6e0a83ca2668b05fdd623",part:"body",class:"drawer__body"},h("slot",{key:"d5ee228b54506a1ba942e8bf7f6760497421fc01"})),h("footer",{key:"89caf9664b9ccf6ce4d50fe5b23a6fa2131cd28e",part:"footer",class:this.stickyFooter?"drawer__footer is-sticky":"drawer__footer"},h("slot",{key:"a023d542128d2e6a49448f45215b495dacb2bef3",name:"footer"}))))}static get is(){return"sc-drawer"}static get encapsulation(){return"shadow"}static get originalStyleUrls(){return{$:["sc-drawer.css"]}}static get styleUrls(){return{$:["sc-drawer.css"]}}static get properties(){return{open:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods."},attribute:"open",reflect:!0,defaultValue:"false"},label:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility."},attribute:"label",reflect:!0,defaultValue:"''"},placement:{type:"string",mutable:!1,complexType:{original:"'top' | 'end' | 'bottom' | 'start'",resolved:'"bottom" | "end" | "start" | "top"',references:{}},required:!1,optional:!1,docs:{tags:[],text:"The direction from which the drawer will open."},attribute:"placement",reflect:!0,defaultValue:"'end'"},contained:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent."},attribute:"contained",reflect:!0,defaultValue:"false"},noHeader:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer."},attribute:"no-header",reflect:!0,defaultValue:"false"},stickyHeader:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Sticky drawer header"},attribute:"sticky-header",reflect:!1,defaultValue:"false"},stickyFooter:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Sticky drawer footer"},attribute:"sticky-footer",reflect:!1,defaultValue:"false"}}}static get events(){return[{method:"scInitialFocus",name:"scInitialFocus",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}},{method:"scRequestClose",name:"scRequestClose",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"'close-button' | 'keyboard' | 'overlay' | 'method'",resolved:'"close-button" | "keyboard" | "method" | "overlay"',references:{}}},{method:"scShow",name:"scShow",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}},{method:"scHide",name:"scHide",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}},{method:"scAfterShow",name:"scAfterShow",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}},{method:"scAfterHide",name:"scAfterHide",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}}]}static get methods(){return{requestClose:{complexType:{signature:"(source?: 'close-button' | 'keyboard' | 'overlay' | 'method') => Promise<void>",parameters:[{name:"source",type:'"method" | "close-button" | "keyboard" | "overlay"',docs:""}],references:{Promise:{location:"global",id:"global::Promise"}},return:"Promise<void>"},docs:{text:"",tags:[]}}}}static get elementRef(){return"el"}static get watchers(){return[{propName:"open",methodName:"handleOpenChange"}]}}setDefaultAnimation("drawer.showTop",{keyframes:[{opacity:0,transform:"translateY(-100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.hideTop",{keyframes:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:"translateY(-100%)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.showEnd",{keyframes:[{opacity:0,transform:"translateX(100%)"},{opacity:1,transform:"translateX(0)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.hideEnd",{keyframes:[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(100%)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.showBottom",{keyframes:[{opacity:0,transform:"translateY(100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.hideBottom",{keyframes:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:"translateY(100%)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.showStart",{keyframes:[{opacity:0,transform:"translateX(-100%)"},{opacity:1,transform:"translateX(0)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.hideStart",{keyframes:[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(-100%)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.denyClose",{keyframes:[{transform:"scale(1)"},{transform:"scale(1.01)"},{transform:"scale(1)"}],options:{duration:250}}),setDefaultAnimation("drawer.overlay.show",{keyframes:[{opacity:0},{opacity:1}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.overlay.hide",{keyframes:[{opacity:1},{opacity:0}],options:{duration:250,easing:"ease"}});

Back