ngx-smart-popover
Version:
Simple popover control for your angular (v4+) applications using bootstrap4 with smart reflection logic when overflowing the viewport. This is a continuation of ngx-popover (https://github.com/pleerock/ngx-popover). If you want to use it without bootstrap
2 lines • 13.5 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-smart-popover",["exports","@angular/core","@angular/common"],e):e((t=t||self)["ngx-smart-popover"]={},t.ng.core,t.ng.common)}(this,function(t,e,o){"use strict";var i=function(){function t(){}return t.Bottom="bottom",t.BottomLeft="bottom-left",t.BottomRight="bottom-right",t.Left="left",t.Right="right",t.Top="top",t.TopLeft="top-left",t.TopRight="top-right",t}(),n=function(){function t(t,o,n){var s=this;this.element=t,this.cdr=o,this.renderer=n,this.placement=i.Top,this.animation=!0,this.closeOnClickOutside=!1,this.closeOnMouseOutside=!1,this.appendToBody=!1,this.size="small",this.onCloseFromOutside=new e.EventEmitter,this.top=-1e4,this.left=-1e4,this.isIn=!1,this.opacity=0,this.transitionEnabled=!1,this.windowWidth=window.innerWidth,this.windowHeight=window.innerHeight,this.onDocumentMouseDown=function(t){var e=s.element.nativeElement;e&&s.popover&&(e.contains(t.target)||s.popover.getElement().contains(t.target)||s.onCloseFromOutside.emit(undefined))}}return t.prototype.ngAfterViewInit=function(){var t=this;this.closeOnClickOutside&&(this.listenClickFunc=this.renderer.listen("document","mousedown",function(e){return t.onDocumentMouseDown(e)})),this.closeOnMouseOutside&&(this.listenMouseFunc=this.renderer.listen("document","mouseover",function(e){return t.onDocumentMouseDown(e)})),this.listenTouchFunc=this.renderer.listen("document","touchstart",function(e){return t.onDocumentMouseDown(e)}),this.show(),this.cdr.detectChanges()},t.prototype.ngOnDestroy=function(){this.closeOnClickOutside&&this.listenClickFunc&&this.listenClickFunc(),this.closeOnMouseOutside&&this.listenMouseFunc&&this.listenMouseFunc(),this.listenTouchFunc&&this.listenTouchFunc()},t.prototype.onResize=function(t){this.windowWidth=window.innerWidth,this.windowHeight=window.innerHeight},t.prototype.updatePosition=function(){if(this.opacity){var t=this.positionElements(this.popover.getElement(),this.popoverDiv.nativeElement,this.placement);this.top=t.top,this.left=t.left}},t.prototype.show=function(){if(this.popover&&this.popover.getElement()){var t=this.positionElements(this.popover.getElement(),this.popoverDiv.nativeElement,this.placement);this.top=t.top,this.left=t.left,this.isIn=!0,this.transitionEnabled=!0,this.opacity=1}},t.prototype.hide=function(){this.top=-1e4,this.left=-1e4,this.isIn=!0,this.popover.hide()},t.prototype.hideFromPopover=function(){this.top=-1e4,this.left=-1e4,this.isIn=!0,this.transitionEnabled=!1,this.opacity=0},t.prototype.positionElements=function(t,e,o,n){void 0===n&&(n=!1);var s=o.split(" "),p=s[0],r=s[1]||"center",h=this.appendToBody||n?this.offset(t):this.position(t),f=e.offsetWidth,l=e.offsetHeight;this.effectivePlacement=p=this.getEffectivePlacement(p,t,e);var d,u={center:function(){return h.left+h.width/2-f/2},left:function(){return h.left},right:function(){return h.left+h.width},topOrBottomRight:function(){return h.left+h.width/2},topOrBottomLeft:function(){return h.left-f+h.width/2}},c={center:function(){return h.top+h.height/2-l/2},top:function(){return h.top},bottom:function(){return h.top+h.height}};switch(p){case i.Right:d={top:c[r](),left:u[p]()};break;case i.Left:d={top:c[r](),left:h.left-f};break;case i.Bottom:d={top:c[p](),left:u[r]()};break;case i.TopLeft:d={top:h.top-l,left:u.topOrBottomLeft()};break;case i.TopRight:d={top:h.top-l,left:u.topOrBottomRight()};break;case i.BottomLeft:d={top:c[i.Bottom](),left:u.topOrBottomLeft()};break;case i.BottomRight:d={top:c[i.Bottom](),left:u.topOrBottomRight()};break;default:d={top:h.top-l,left:u[r]()}}return d},t.prototype.position=function(t){var e={top:0,left:0},o=this.offset(t),i=this.parentOffsetEl(t);i!==window.document&&((e=this.offset(i)).top+=i.clientTop-i.scrollTop,e.left+=i.clientLeft-i.scrollLeft);var n=t.getBoundingClientRect();return{width:n.width||t.offsetWidth,height:n.height||t.offsetHeight,top:o.top-e.top,left:o.left-e.left}},t.prototype.offset=function(t){var e=t.getBoundingClientRect();return{width:e.width||t.offsetWidth,height:e.height||t.offsetHeight,top:e.top+(window.pageYOffset||window.document.documentElement.scrollTop),left:e.left+(window.pageXOffset||window.document.documentElement.scrollLeft)}},t.prototype.getStyle=function(t,e){return t.currentStyle?t.currentStyle[e]:window.getComputedStyle?window.getComputedStyle(t)[e]:t.style[e]},t.prototype.isStaticPositioned=function(t){return"static"===(this.getStyle(t,"position")||"static")},t.prototype.parentOffsetEl=function(t){for(var e=t.offsetParent||window.document;e&&e!==window.document&&this.isStaticPositioned(e);)e=e.offsetParent;return e||window.document},t.prototype.getEffectivePlacement=function(t,e,o){var n=e.getBoundingClientRect(),s=t||i.Top,p={top:n.top-o.offsetHeight<0,right:n.left+n.width/2+o.offsetWidth/2>this.windowWidth,left:n.left+n.width/2-o.offsetWidth/2<0},r={top:n.top-o.offsetHeight<0,right:n.right+o.offsetWidth>this.windowWidth},h={top:n.top+n.height/2-o.offsetHeight/2<0,right:n.right+o.offsetWidth>this.windowWidth,bottom:n.top+n.height/2+o.offsetHeight/2>this.windowHeight},f={right:n.right+o.offsetWidth>this.windowWidth,bottom:n.bottom+o.offsetHeight>this.windowHeight},l={right:n.left+n.width/2+o.offsetWidth/2>this.windowWidth,bottom:n.bottom+o.offsetHeight>this.windowHeight,left:n.left+n.width/2-o.offsetWidth/2<0},d={bottom:n.bottom+o.offsetHeight>this.windowHeight,left:n.left-o.offsetWidth<0},u={left:n.left<o.offsetWidth,top:n.top+n.height/2-o.offsetHeight/2<0,bottom:n.top+n.height/2+o.offsetHeight/2>this.windowHeight},c={top:n.top-o.offsetHeight<0,left:n.left-o.offsetWidth<0};return s===i.Top?p.top&&p.left?i.BottomRight:p.top&&p.right?i.BottomLeft:p.top?i.Bottom:p.right?i.TopLeft:p.left?i.TopRight:i.Top:s===i.TopRight?r.top&&r.right?l.bottom?i.Left:l.right?i.BottomLeft:i.Bottom:r.top?h.top?i.BottomRight:i.Right:r.right?p.right?i.TopLeft:i.Top:i.TopRight:s===i.Right?h.right&&h.top?f.right&&l.right?i.BottomLeft:f.right?i.Bottom:i.BottomRight:h.right&&h.bottom?r.right&&p.right?i.TopLeft:r.right?i.Top:i.TopRight:h.right?p.top?l.right?i.BottomLeft:f.right?i.Bottom:i.BottomRight:p.right?i.TopLeft:r.right?i.Top:i.TopRight:h.top?i.BottomRight:h.bottom?i.TopRight:i.Right:s===i.BottomRight?f.bottom&&f.right?p.top?i.Left:p.right?i.TopLeft:i.Top:f.bottom?h.bottom?i.TopRight:i.Right:f.right?l.right?i.BottomLeft:i.Bottom:i.BottomRight:s===i.Bottom?l.bottom&&l.left?i.TopRight:l.bottom&&l.right?i.TopLeft:l.bottom?i.Top:l.right?i.BottomLeft:l.left?i.BottomRight:i.Bottom:s===i.BottomLeft?d.bottom&&d.left?p.top?i.Right:p.left?i.TopRight:i.Top:d.bottom?u.bottom?i.TopLeft:i.Left:d.left?l.left?i.BottomRight:i.Bottom:i.BottomLeft:s===i.Left?u.left&&u.top?d.left&&l.left?i.BottomRight:f.right?i.Bottom:i.BottomLeft:u.left&&u.bottom?c.left&&p.left?i.TopRight:c.left?i.Top:i.TopLeft:u.left?p.top?l.left?i.BottomRight:d.left?i.Bottom:i.BottomLeft:p.left?i.TopRight:c.left?i.Top:i.TopLeft:u.top?i.BottomLeft:u.bottom?i.TopLeft:i.Left:s===i.TopLeft?c.top&&c.left?l.bottom?i.Right:l.left?i.BottomRight:i.Bottom:c.top?u.top?i.BottomLeft:i.Left:c.left?p.left?i.TopRight:i.Top:i.TopLeft:s},t.decorators=[{type:e.Component,args:[{selector:"popover-content",template:'\n <div #popoverDiv\n class="bs-popover-{{ effectivePlacement }} popover-content popover {{ parentClass }}"\n [ngClass]="{\n \'sm\': size === \'small\',\n \'md-sm\': size === \'medium-small\',\n \'md\': size === \'medium\',\n \'lg\': size === \'large\',\n \'in\': isIn\n }"\n [style.top.px]="top"\n [style.left.px]="left"\n [style.transition]="(transitionEnabled ? \'0.15s opacity\' : \'\')"\n [style.opacity]="opacity"\n [style.display]="\'block\'"\n [attr.aria-hidden]="opacity === 0"\n role="popover">\n <div [hidden]="!closeOnMouseOutside" class="virtual-area"></div>\n <div class="arrow"></div>\n <div class="popover-header" [hidden]="!title">{{ title }}</div>\n <div class="popover-body">\n <ng-content></ng-content>\n {{ content }}\n </div>\n </div>\n '}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.ChangeDetectorRef},{type:e.Renderer2}]},t.propDecorators={content:[{type:e.Input}],placement:[{type:e.Input}],title:[{type:e.Input}],parentClass:[{type:e.Input}],animation:[{type:e.Input}],closeOnClickOutside:[{type:e.Input}],closeOnMouseOutside:[{type:e.Input}],appendToBody:[{type:e.Input}],size:[{type:e.Input}],popoverDiv:[{type:e.ViewChild,args:["popoverDiv",{"static":!0}]}],onResize:[{type:e.HostListener,args:["window:resize",["$event"]]}]},t}(),s=function(){function t(t,o,i,s,p){this.viewContainerRef=t,this.cdr=o,this.resolver=i,this.appRef=s,this.injector=p,this.popoverContentComponent=n,this.popoverOnHover=!0,this.popoverDismissTimeout=0,this.onShown=new e.EventEmitter,this.onHidden=new e.EventEmitter}return t.prototype.showOrHideOnClick=function(t){this.popoverOnHover||this.popoverDisabled||(t.stopImmediatePropagation(),this.toggle())},t.prototype.showOrHideOnTouch=function(t){t.stopImmediatePropagation(),this.popoverOnHover&&(this.popoverDisabled||this.toggle())},t.prototype.showOnHover=function(){this.popoverOnHover&&(this.popoverDisabled||this.show())},t.prototype.hideOnHover=function(){this.popoverCloseOnMouseOutside||this.popoverOnHover&&(this.popoverDisabled||this.hide())},t.prototype.ngOnChanges=function(t){t.popoverDisabled&&t.popoverDisabled.currentValue&&this.hide()},t.prototype.createComponent=function(t){var e=this.resolver.resolveComponentFactory(t),o=this.appendToBody?e.create(this.injector):this.viewContainerRef.createComponent(e);if(this.appendToBody){this.appRef.attachView(o.hostView);var i=o.hostView.rootNodes[0];document.body.appendChild(i)}return o},t.prototype.removeComponent=function(t){this.popover&&(this.appendToBody&&this.appRef.detachView(t.hostView),t.destroy())},t.prototype.toggle=function(){this.visible?this.hide():this.show()},t.prototype.show=function(){var t=this;if(!this.visible){if(this.visible=!0,"string"==typeof this.content){if(!this.visible)return;this.popover=this.createComponent(this.popoverContentComponent),(e=this.popover.instance).popover=this,e.content=this.content,this.popoverPlacement!==undefined&&(e.placement=this.popoverPlacement),this.popoverAnimation!==undefined&&(e.animation=this.popoverAnimation),this.popoverTitle!==undefined&&(e.title=this.popoverTitle),this.popoverCloseOnClickOutside!==undefined&&(e.closeOnClickOutside=this.popoverCloseOnClickOutside),this.popoverCloseOnMouseOutside!==undefined&&(e.closeOnMouseOutside=this.popoverCloseOnMouseOutside),this.popoverSize&&(e.size=this.popoverSize),e.appendToBody=this.appendToBody,e.onCloseFromOutside.subscribe(function(){return t.hide()}),this.popoverDismissTimeout>0&&setTimeout(function(){return t.hide()},this.popoverDismissTimeout)}else{var e;(e=this.content).popover=this,this.popoverPlacement!==undefined&&(e.placement=this.popoverPlacement),this.popoverAnimation!==undefined&&(e.animation=this.popoverAnimation),this.popoverTitle!==undefined&&(e.title=this.popoverTitle),this.popoverCloseOnClickOutside!==undefined&&(e.closeOnClickOutside=this.popoverCloseOnClickOutside),this.popoverCloseOnMouseOutside!==undefined&&(e.closeOnMouseOutside=this.popoverCloseOnMouseOutside),this.popoverSize&&(e.size=this.popoverSize),e.appendToBody=this.appendToBody,e.onCloseFromOutside.subscribe(function(){return t.hide()}),this.popoverDismissTimeout>0&&setTimeout(function(){return t.hide()},this.popoverDismissTimeout),e.show()}this.cdr.detectChanges(),this.onShown.emit(this)}},t.prototype.hide=function(){this.visible&&(this.visible=!1,this.removeComponent(this.popover),this.content instanceof n&&this.content.hideFromPopover(),this.cdr.detectChanges(),this.onHidden.emit(this))},t.prototype.getElement=function(){return this.viewContainerRef.element.nativeElement},t.decorators=[{type:e.Directive,args:[{selector:"[popover]",exportAs:"popover"}]}],t.ctorParameters=function(){return[{type:e.ViewContainerRef},{type:e.ChangeDetectorRef},{type:e.ComponentFactoryResolver},{type:e.ApplicationRef},{type:e.Injector}]},t.propDecorators={content:[{type:e.Input,args:["popover"]}],popoverSize:[{type:e.Input}],popoverDisabled:[{type:e.Input}],popoverAnimation:[{type:e.Input}],popoverPlacement:[{type:e.Input}],popoverTitle:[{type:e.Input}],popoverOnHover:[{type:e.Input}],popoverCloseOnClickOutside:[{type:e.Input}],popoverCloseOnMouseOutside:[{type:e.Input}],popoverDismissTimeout:[{type:e.Input}],appendToBody:[{type:e.Input}],onShown:[{type:e.Output}],onHidden:[{type:e.Output}],showOrHideOnClick:[{type:e.HostListener,args:["click",["$event"]]}],showOrHideOnTouch:[{type:e.HostListener,args:["touchend",["$event"]]}],showOnHover:[{type:e.HostListener,args:["focusin"]},{type:e.HostListener,args:["mouseenter"]}],hideOnHover:[{type:e.HostListener,args:["focusout"]},{type:e.HostListener,args:["mouseleave"]}]},t}(),p=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[s,n],imports:[o.CommonModule],exports:[n,s],entryComponents:[n]}]}],t}();t.PopoverContentComponent=n,t.PopoverDirective=s,t.PopoverModule=p,t.PopoverPlacement=i,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-smart-popover.umd.min.js.map