js.popuper/dist/js/popuper.min.js

CSS smart sticky position for exceeding aside blocks

class PopUper{constructor(t){window.popUpers||(window.popUpers=[]),this.options=t||{},this.options.id||(this.options.id=parseInt((new Date).getTime())),this.options.body||(this.options.body="Hello"),this.options.title||(this.options.title=""),this.enterAction=this.enterAction.bind(this),this.keyEscape=this.keyEscape.bind(this),this._body=this.createEl("div","popuperWrap"),this._body.setAttribute("data-popuperName",this.options.id),this._body._popuper=this.createEl("div","popuper"),this.options.style&&this._body._popuper.classList.add(this.options.style),this._body._popuperHeader=this.createEl("div","popuper__header"),this._body._close=this.createEl("div","popuper__close"),this._body._close.addEventListener("click",()=>this.close()),this._body._close.innerHTML=`
            <svg version="1.1" id="cross" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
            <path d="M7,26c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l18-18c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-18,18C7.5,25.9,7.3,26,7,26z"/>
            <path d="M25,26c-0.3,0-0.5-0.1-0.7-0.3l-18-18c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l18,18c0.4,0.4,0.4,1,0,1.4C25.5,25.9,25.3,26,25,26 z"/>
            </svg>
            `,this.options.title&&(this._body._title=this.createEl("div","popuper__title"),this._body._title.innerText=this.options.title,this._body._popuperHeader.appendChild(this._body._title)),this._body._popuperHeader.appendChild(this._body._close),this._body._popuper.appendChild(this._body._popuperHeader),this._body._popUperbody=this.createEl("div","popuper__body"),this._body._popUperbody.innerHTML=this.options.body,this._body._popuper.appendChild(this._body._popUperbody),this.enterActionArray=[],this.options.controls&&(this._body._controls=this.createEl("div","popuper__controls"),this.options.controls.forEach(t=>{let e=this.createEl("button");e.innerHTML=t.title,t.style&&e.classList.add(t.style),e.addEventListener("click",()=>{t.action&&t.action(),0!=t.close&&this.close()}),t.enter&&(t.action&&this.enterActionArray.push(t.action),document.addEventListener("keydown",this.enterAction)),this._body._controls.appendChild(e)}),this._body._popuper.appendChild(this._body._controls)),this._body.appendChild(this._body._popuper),document.body.appendChild(this._body),document.addEventListener("keydown",this.keyEscape),window.popUpers.push(this),1!=window.popUpers.length||document.body.classList.contains("--fixed")||(window.innerWidth-document.body.clientWidth&&(document.body.style.paddingRight=window.innerWidth-document.body.clientWidth+"px"),document.body.classList.add("--fixed"))}enterAction(t){"Enter"!==t.code&&"NumpadEnter"!==t.code||(this.enterActionArray.forEach(t=>{t()}),this.close())}keyEscape(t){"Escape"===t.code&&window.popUpers[window.popUpers.indexOf(this)].close()}close(){this._body.remove(),window.popUpers.splice(window.popUpers.indexOf(this),1),this.enterActionArray&&document.removeEventListener("keydown",this.enterAction),0==window.popUpers.length&&(document.body.classList.remove("--fixed"),window.innerWidth-document.body.clientWidth&&(document.body.style.paddingRight="")),document.removeEventListener("keydown",this.keyEscape),window.popUpers.length||document.body.classList.remove("--fixed")}createEl(t,e){const o=document.createElement(t);return e&&o.classList.add(e),o}}