-
Notifications
You must be signed in to change notification settings - Fork 1
/
paper-lightbox-popup.html
15 lines (14 loc) · 8.96 KB
/
paper-lightbox-popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link rel="import" href="../bower_components/polymer/polymer.html"/>
<link rel="import" href="../bower_components/iron-icons/iron-icons.html"/>
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"/>
<link rel="import" href="../bower_components/iron-resizable-behavior/iron-resizable-behavior.html"/>
<dom-module id="paper-lightbox-popup">
<template>
<style>:host{display:block}:host::content .paper-lightbox-popup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;overflow:auto;text-align:center}:host::content .paper-lightbox-popup::before{content:'';display:inline-block;vertical-align:middle;width:0;height:100%}:host::content .paper-lightbox-popup_overlay{position:fixed;background-color:#000;width:100%;height:100%;top:0;left:0;opacity:.6;z-index:0}:host::content .paper-lightbox-popup_window{position:relative;display:inline-block;vertical-align:middle;padding:25px;margin:40px 0 20px 0;background-color:#fff;max-width:70%;height:auto;text-align:left;box-sizing:border-box;z-index:1}@media (max-width:568px){:host::content .paper-lightbox-popup_window{max-width:100%;margin:25px;padding:15px}}:host::content .paper-lightbox-popup_window .paper-lightbox_iframeWrapper{position:relative;padding-top:60%}:host::content .paper-lightbox-popup_window :host::content .paper-lightbox-popup_window-image img{vertical-align:top;max-width:100%}:host::content .paper-lightbox-popup_window :host::content .paper-lightbox-popup_window-iframe{width:70%;height:auto;max-width:1024px}@media (max-width:568px){:host::content .paper-lightbox-popup_window :host::content .paper-lightbox-popup_window-iframe{width:calc(100% - 50px);margin:25px 25px}}:host::content .paper-lightbox-popup_window :host::content .paper-lightbox-popup_window-iframe iframe{position:absolute;width:100%;height:100%;top:0;left:0}:host::content .paper-lightbox-popup_close{position:absolute;left:0;top:0;width:18px;height:18px;padding:8px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#fff;border-radius:100px;cursor:pointer;-webkit-filter:drop-shadow(0 1px 2px rgba(0, 0, 0, .4));filter:drop-shadow(0 1px 2px rgba(0, 0, 0, .4))}</style>
<template is="dom-if" if="{{ _isAjax(type) }}">
<iron-ajax auto="auto" url="{{ src }}" handle-as="text" on-response="_ajaxResponse"></iron-ajax>
</template>
<content></content>
</template>
<script>(function(){Polymer({is:"paper-lightbox-popup",behaviors:[Polymer.IronResizableBehavior],listeners:{"iron-resize":"_onResize"},_createPopup:function(){var e,t,n,o;if(n=this,this._removeBackgroundFocus(),this.container=document.createElement("div"),this.container.classList.add("paper-lightbox-popup"),"ajax"!==this._getType()&&this.container.classList.add("opening"),e=document.createElement("iron-icon"),e.classList.add("paper-lightbox-popup_close"),e.setAttribute("icon","icons:close"),e.setAttribute("tabindex","0"),n.window=document.createElement("div"),n.window.classList.add("paper-lightbox-popup_window"),n.window.appendChild(e),this.container.appendChild(n.window),o=document.createElement("div"),o.classList.add("paper-lightbox-popup_overlay"),this.container.appendChild(o),n.appendChild(this.container),void 0===(t=document.querySelector(".paper-lightbox-lockScroll"))||null===t)return n._removeScrolling()},_getImageRatio:function(e,t){var n;return n=this,e>t?n.window.classList.add("landscape"):n.window.classList.add("portrait")},_isAjax:function(e){if(this,"ajax"===e)return!0},_parseAjax:function(e){var t,n;return n=this,t=document.createElement("div"),t.innerHTML=e,[].forEach.call(t.children,function(e,t){return n.window.appendChild(e),n.container.classList.add("opening")})},_ajaxResponse:function(e){var t;return t=this,t.ajaxResponse=e.target.lastResponse,this._createAjax()},_createAjax:function(){var e;return e=this,this._fireCustomEvents("onBeforeOpen"),this._createPopup(),this._parseAjax(e.ajaxResponse),e.window.classList.add("paper-lightbox-popup_window-ajax"),this._fireCustomEvents("onAfterOpen"),this._closePopupEvent()},_createImage:function(){var e,t;return t=this,e=new Image,this._fireCustomEvents("onBeforeOpen"),e.onload=function(){return t._createPopup(),t._getImageRatio(e.naturalWidth,e.naturalHeight),t.window.classList.add("paper-lightbox-popup_window-image"),t.window.appendChild(e),t._onResize(),t._fireCustomEvents("onAfterOpen"),t._closePopupEvent()},e.src=t.getAttribute("src")},_createIframe:function(){var e,t,n,o,i;return n=this,i=n.getAttribute("src"),e=document.createElement("iframe"),o=i.replace("/watch?v=","/embed/"),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen",""),this._fireCustomEvents("onBeforeOpen"),t=document.createElement("div"),t.classList.add("paper-lightbox_iframeWrapper"),i.indexOf("youtube.com/watch?v=")>-1?e.setAttribute("src",o+"?autoplay=1"):e.setAttribute("src",i+"?autoplay=1"),this._createPopup(),n.window.classList.add("paper-lightbox-popup_window-iframe"),setTimeout(function(){return t.appendChild(e),n.window.appendChild(t)},100),this._fireCustomEvents("onAfterOpen"),this._closePopupEvent()},_createInline:function(){var e,t;return t=this,e=document.querySelector(t.getAttribute("src")),this._fireCustomEvents("onBeforeOpen"),this._createPopup(),t.window.classList.add("paper-lightbox-popup_window-inline"),t.window.appendChild(e.cloneNode(!0)),this._fireCustomEvents("onAfterOpen"),this._closePopupEvent()},_getType:function(){var e;return e=this,e.getAttribute("type")},_launchPopup:function(){switch(this,this._getType()){case"image":return this._createImage();case"inline":return this._createInline();case"iframe":return this._createIframe()}},_removePopup:function(){var e,t,n;return t=this,n=this.container,this.window=void 0,e=0,null!==t.getAttribute("closing")&&void 0!==t.getAttribute("closing")&&(e=t.getAttribute("closing")),this._resetBackgroundFocus(),t.unlisten(document,"keyup","_closeWithEsc"),this._fireCustomEvents("onBeforeClose"),n.classList.remove("opening"),setTimeout(function(){return n.classList.add("closing")},0),setTimeout(function(){return t._addScrolling(),document.body.removeChild(t),t._fireCustomEvents("onAfterClose"),window.scrollTo(0,8e3)},e)},_closePopupEvent:function(){var e,t,n;return t=this,n=t.querySelector(".paper-lightbox-popup_overlay"),e=t.querySelector(".paper-lightbox-popup_close"),t.listen(n,"tap","_removePopup"),t.listen(e,"tap","_removePopup"),t._closeWithEsc=function(e){if(27===(e.which||e.keyCode))return t._removePopup()},t.listen(document,"keyup","_closeWithEsc"),e.addEventListener("keypress",function(e){if(13===(e.which||e.keyCode))return t._removePopup()})},_addScrolling:function(){var e,t;for(e=document.documentElement,e.classList.remove("lock"),t=document.querySelector(".paper-lightbox-lockScroll"),t.children,t.style.height="",e.style.height="",document.body.style.height="",t.style.overflow="";t.firstElementChild;)document.body.appendChild(t.firstElementChild);return document.body.scrollTop=this.bodyScroll,document.body.removeChild(t),document.body.style.overflow=""},_removeScrolling:function(){var e,t,n,o;for(this.bodyScroll=document.body.scrollTop,n=document.documentElement,n.classList.add("lock"),o=document.createElement("div"),o.classList.add("paper-lightbox-lockScroll"),e=document.body.children,t=e.length,o.style.height="100%",n.style.height="100%",document.body.style.height="100%",o.style.overflow="hidden";document.body.firstElementChild;)if(o.appendChild(document.body.firstElementChild),o.children.length===t)return document.body.appendChild(o),void(o.scrollTop=this.bodyScroll)},_removeBackgroundFocus:function(){var e,t;return t="a[href], area[href], input:not([disabled]), button:not([disabled]),select:not([disabled]), textarea:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable=true]",e=document.querySelectorAll(t),[].forEach.call(e,function(e){return e.oldTabIndex=e.tabIndex,e.tabIndex=-1})},_resetBackgroundFocus:function(){var e,t;return t="a[href], area[href], input:not([disabled]), button:not([disabled]),select:not([disabled]), textarea:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable=true]",e=document.querySelectorAll(t),[].forEach.call(e,function(e){return e.tabIndex=e.oldTabIndex})},_defineCustomEvents:function(){var e,t;return t=this,e=["onBeforeOpen","onAfterOpen","onBeforeClose","onAfterClose"],e.length,[].forEach.call(e,function(e){return t[e]=void 0,document.createEvent?(t[e]=document.createEvent("HTMLEvents"),t[e].initEvent(e.toLowerCase(),!0,!0)):(t.e=document.createEventObject(),t.e.eventType=e.toLowerCase()),t[e].eventName=e.toLowerCase()})},_fireCustomEvents:function(e){var t;return t=this,void 0===t[e]&&t._defineCustomEvents(),document.createEvent?t.dispatchEvent(t[e]):t.fireEvent("on"+t[e].eventType,t[e])},_onResize:function(){var e;if(this.window&&this.window.classList.contains("portrait"))return e=this.window.querySelector("img"),e.style.maxHeight=.8*window.innerHeight+"px"},ready:function(){var e;return e=this,this.async(function(){return setTimeout(function(){return e._defineCustomEvents(),e._onLoad()},0)})},_onLoad:function(){return this._launchPopup()}})}).call(this);</script>
</dom-module>