UNPKG

@stories-js/core

Version:

Stories web components to build stories

5 lines 3.39 kB
/*! * (C) StoriesJS https://storiesjs.org - GPL-2.0 License */ import{r as registerInstance,i as createEvent,h,g as getElement}from"./index-49238f69.js";var splitPaneCss=":host{display:grid;grid-template-columns:1fr -webkit-max-content 1fr;grid-template-columns:1fr max-content 1fr;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;cursor:auto;width:auto;height:100vh}:host([resizing]){-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([resizing][split=horizontal]){cursor:col-resize}:host #median{inline-size:0.5rem;grid-column:2/3}:host #median:hover{cursor:col-resize}:host [name=slot1]{grid-column:1/2;grid-row:1/1}:host [name=slot2]{grid-column:3/4;grid-row:1/1}:host([resizing][split=vertical]){cursor:row-resize}:host([split=vertical]){grid-template-rows:1fr -webkit-max-content 1fr;grid-template-rows:1fr max-content 1fr;grid-template-columns:none}:host([split=vertical]) #median{block-size:0.5rem;inline-size:auto;grid-row:2/3;grid-column:1/1}:host([split=vertical]) #median:hover{cursor:row-resize}:host([split=vertical]) [name=slot1]{grid-row:1/2;grid-column:1/1}:host([split=vertical]) [name=slot2]{grid-row:3/4;grid-column:1/1}#median{background:bisque}::slotted(*){overflow:auto}";var SplitPane=function(){function e(e){var t=this;registerInstance(this,e);this.storiesSizeChange=createEvent(this,"storiesSizeChange",7);this.minSize=0;this.defaultSize=0;this.pointerDown=function(e){e.preventDefault();t.isResizing=true;var i=t.el.getBoundingClientRect();t.left=i.x;t.top=i.y;t.el.addEventListener("pointermove",t.pointerMove);t.el.addEventListener("pointerup",t.pointerUp)};this.pointerMove=function(e){e.preventDefault();if(t.split==="horizontal"){var i=e.clientX-t.left;var n=t.median.getBoundingClientRect().width;t.value=Math.round(i-n/2);t.value=t.value<t.minSize?t.minSize:t.value;t.el.style.gridTemplateColumns="".concat(t.value,"px ").concat(n,"px 1fr")}else{var r=e.clientY-t.top;var o=t.median.getBoundingClientRect().height;t.value=Math.round(r-o/2);t.value=t.value<t.minSize?t.minSize:t.value;t.el.style.gridTemplateRows="".concat(t.value,"px ").concat(o,"px 1fr")}};this.pointerUp=function(e){e.preventDefault();t.isResizing=false;t.storiesSizeChange.emit(t.value);t.el.removeEventListener("pointermove",t.pointerMove);t.el.removeEventListener("pointerup",t.pointerUp)}}e.prototype.componentDidLoad=function(){if(this.defaultSize>0||this.minSize>0){if(this.split==="horizontal"){var e=this.median.getBoundingClientRect().width;this.value=Math.round(this.defaultSize);this.value=this.value<this.minSize?this.minSize:this.value;this.el.style.gridTemplateColumns="".concat(this.value,"px ").concat(e,"px 1fr")}else{var t=this.median.getBoundingClientRect().height;this.value=Math.round(this.defaultSize);this.value=this.value<this.minSize?this.minSize:this.value;this.el.style.gridTemplateRows="".concat(this.value,"px ").concat(t,"px 1fr")}}};e.prototype.render=function(){var e=this;return[h("slot",{name:"slot1"}),h("div",{ref:function(t){return e.median=t},id:"median",onPointerDown:this.pointerDown}),h("slot",{name:"slot2"})]};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();SplitPane.style=splitPaneCss;export{SplitPane as stories_split_pane}; //# sourceMappingURL=stories-split-pane.entry.js.map