Skip to content

Commit

Permalink
Merge pull request #3 from oscarsolas/develop
Browse files Browse the repository at this point in the history 
Added new attributes and classes for initial/end animations
  • Loading branch information
@oscarsolas
oscarsolas committed Jun 9, 2017
2 parents bd45c9b + d5c6696 commit 337367f
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 10 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ A simple example of its use:
| Attribute Name | Functionality | Type | Default |
|----------------|-------------|-------------|-------------|
| type | Popup content type | String | undefined |
| openingTime | The time of initial animation in miliseconds | Number | undefined |
| closingTime | The time of final animation in miliseconds | Number | undefined |

### Methods

Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "paper-lightbox",
"version": "0.0.1",
"version": "1.0.2",
"authors": [
"Óscar Solás <oscarsolas@gmail.com>"
],
Expand Down
4 changes: 2 additions & 2 deletions paper-lightbox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html"/>
<dom-module id="paper-lightbox">
<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;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-image img{vertical-align:top;max-width:100%}:host::content .paper-lightbox-popup_window-iframe{width:70%;height:auto;max-width:1024px}@media (max-width:568px){:host::content .paper-lightbox-popup_window-iframe{width:calc(100% - 50px);margin:25px}}: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>
<style is="custom-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;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-image img{vertical-align:top;max-width:100%}:host::content .paper-lightbox-popup_window-iframe{width:70%;height:auto;max-width:1024px}@media (max-width:568px){:host::content .paper-lightbox-popup_window-iframe{width:calc(100% - 50px);margin:25px}}: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() }}">
<iron-ajax auto="auto" url="{{ src }}" handle-as="text" on-response="_ajaxResponse"></iron-ajax>
</template>
<button>
<content></content>
</button>
</template>
<script>(function(){Polymer({is:"paper-lightbox",behaviors:[Polymer.IronResizableBehavior],listeners:{"iron-resize":"_onResize"},_createPopup:function(){var e,t,i,a;return i=this,t=document.createElement("div"),t.classList.add("paper-lightbox-popup"),e=document.createElement("iron-icon"),e.classList.add("paper-lightbox-popup_close"),e.setAttribute("icon","icons:close"),i.window=document.createElement("div"),i.window.classList.add("paper-lightbox-popup_window"),i.window.appendChild(e),t.appendChild(i.window),a=document.createElement("div"),a.classList.add("paper-lightbox-popup_overlay"),t.appendChild(a),i.appendChild(t)},_getImageRatio:function(e,t){var i;return i=this,e>t?i.window.classList.add("landscape"):i.window.classList.add("portrait")},_isAjax:function(){var e;if(e=this,"ajax"===this._getType())return!0},_parseAjax:function(e){var t,i;return i=this,t=document.createElement("div"),t.innerHTML=e,[].forEach.call(t.children,function(e,t){return i.window.appendChild(e)})},_ajaxResponse:function(e){var t;return t=this,t.ajaxResponse=e.target.lastResponse},_createAjax:function(){var e;return e=this,this._createPopup(),this._parseAjax(e.ajaxResponse),e.window.classList.add("paper-lightbox-popup_window-ajax"),this._closePopup()},_createImage:function(){var e,t;return t=this,e=new Image,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._closePopup()},e.src=t.getAttribute("src")},_createIframe:function(){var e,t,i,a,n;return i=this,n=i.getAttribute("src"),e=document.createElement("iframe"),a=n.replace("/watch?v=","/embed/"),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen",""),t=document.createElement("div"),t.classList.add("paper-lightbox_iframeWrapper"),n.indexOf("youtube.com/watch?v=")>-1?e.setAttribute("src",a):e.setAttribute("src",n),this._createPopup(),i.window.classList.add("paper-lightbox-popup_window-iframe"),t.appendChild(e),i.window.appendChild(t),this._closePopup()},_createInline:function(){var e,t;return t=this,e=document.querySelector(t.getAttribute("src")),this._createPopup(),t.window.classList.add("paper-lightbox-popup_window-inline"),t.window.appendChild(e.cloneNode(!0)),this._closePopup()},_getType:function(){var e;return e=this,e.getAttribute("type")},_launchPopup:function(){var e;switch(e=this,this._getType()){case"ajax":return e.listen(e.$$("button"),"tap","_createAjax");case"image":return e.listen(e.$$("button"),"tap","_createImage");case"inline":return e.listen(e.$$("button"),"tap","_createInline");case"iframe":return e.listen(e.$$("button"),"tap","_createIframe")}},_removePopup:function(){var e,t;return e=this,t=e.querySelector(".paper-lightbox-popup"),this.window=void 0,t.remove()},_closePopup:function(){var e,t,i;return t=this,i=t.querySelector(".paper-lightbox-popup_overlay"),e=t.querySelector(".paper-lightbox-popup_close"),t.listen(i,"tap","_removePopup"),t.listen(e,"tap","_removePopup")},_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(){return this._launchPopup()},onAjaxContentLoaded:function(){},onImageLoaded:function(){},open:function(){var e;switch(e=this,this._getType()){case"ajax":return this._createAjax();case"image":return this._createImage();case"inline":return this._createInline();case"iframe":return this._createIframe()}}})}).call(this);</script>
<script>(function(){Polymer({is:"paper-lightbox",behaviors:[Polymer.IronResizableBehavior],listeners:{"iron-resize":"_onResize"},_createPopup:function(){var e,t,i,n,o;return i=this,n=null!==i.getAttribute("closingTime")&&void 0!==i.getAttribute("openingTime")?i.getAttribute("openingTime"):0,t=document.createElement("div"),t.classList.add("paper-lightbox-popup"),t.classList.add("opening"),setTimeout(function(){return t.classList.remove("opening")},n),e=document.createElement("iron-icon"),e.classList.add("paper-lightbox-popup_close"),e.setAttribute("icon","icons:close"),i.window=document.createElement("div"),i.window.classList.add("paper-lightbox-popup_window"),i.window.appendChild(e),t.appendChild(i.window),o=document.createElement("div"),o.classList.add("paper-lightbox-popup_overlay"),t.appendChild(o),i.appendChild(t)},_getImageRatio:function(e,t){var i;return i=this,e>t?i.window.classList.add("landscape"):i.window.classList.add("portrait")},_isAjax:function(){var e;if(e=this,"ajax"===this._getType())return!0},_parseAjax:function(e){var t,i;return i=this,t=document.createElement("div"),t.innerHTML=e,[].forEach.call(t.children,function(e,t){return i.window.appendChild(e)})},_ajaxResponse:function(e){var t;return t=this,t.ajaxResponse=e.target.lastResponse},_createAjax:function(){var e;return e=this,this._createPopup(),this._parseAjax(e.ajaxResponse),e.window.classList.add("paper-lightbox-popup_window-ajax"),this._closePopup(),document.body.style.overflow="hidden"},_createImage:function(){var e,t;return t=this,e=new Image,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._closePopup()},e.src=t.getAttribute("src"),document.body.style.overflow="hidden"},_createIframe:function(){var e,t,i,n,o;return i=this,o=i.getAttribute("src"),e=document.createElement("iframe"),n=o.replace("/watch?v=","/embed/"),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen",""),t=document.createElement("div"),t.classList.add("paper-lightbox_iframeWrapper"),o.indexOf("youtube.com/watch?v=")>-1?e.setAttribute("src",n+"?autoplay=1"):e.setAttribute("src",o+"?autoplay=1"),this._createPopup(),i.window.classList.add("paper-lightbox-popup_window-iframe"),setTimeout(function(){return t.appendChild(e),i.window.appendChild(t)},100),this._closePopup(),document.body.style.overflow="hidden"},_createInline:function(){var e,t;return t=this,e=document.querySelector(t.getAttribute("src")),this._createPopup(),t.window.classList.add("paper-lightbox-popup_window-inline"),t.window.appendChild(e.cloneNode(!0)),this._closePopup(),document.body.style.overflow="hidden"},_getType:function(){var e;return e=this,e.getAttribute("type")},_launchPopup:function(){var e;switch(e=this,this._getType()){case"ajax":return e.listen(e.$$("button"),"tap","_createAjax");case"image":return e.listen(e.$$("button"),"tap","_createImage");case"inline":return e.listen(e.$$("button"),"tap","_createInline");case"iframe":return e.listen(e.$$("button"),"tap","_createIframe")}},_removePopup:function(){var e,t,i;return t=this,i=t.querySelector(".paper-lightbox-popup"),this.window=void 0,e=null!==t.getAttribute("closingTime")&&void 0!==t.getAttribute("closingTime")?t.getAttribute("closingTime"):0,i.classList.add("closing"),setTimeout(function(){return i.remove()},e),document.body.style.overflow=""},_closePopup:function(){var e,t,i;return t=this,i=t.querySelector(".paper-lightbox-popup_overlay"),e=t.querySelector(".paper-lightbox-popup_close"),t.listen(i,"tap","_removePopup"),t.listen(e,"tap","_removePopup")},_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(){return this.listen(window,"WebComponentsReady","_onLoad")},_onLoad:function(){return this._launchPopup()},onAjaxContentLoaded:function(){},onImageLoaded:function(){},open:function(){var e;switch(e=this,this._getType()){case"ajax":return this._createAjax();case"image":return this._createImage();case"inline":return this._createInline();case"iframe":return this._createIframe()}}})}).call(this);</script>
</dom-module>
75 changes: 68 additions & 7 deletions source/paper-lightbox.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,21 @@ Polymer
_createPopup: ->
# set vars
module = this
if module.getAttribute('closingTime') != null && module.getAttribute('openingTime') != undefined
openingTime = module.getAttribute('openingTime')
else
openingTime = 0

# create container
container = document.createElement 'div'
container.classList.add 'paper-lightbox-popup'

# opening animation
container.classList.add('opening')
setTimeout (->
container.classList.remove('opening')
), openingTime

# create close button
close = document.createElement 'iron-icon'
close.classList.add 'paper-lightbox-popup_close'
Expand Down Expand Up @@ -80,6 +90,15 @@ Polymer
# close popup event
@_closePopup()

# block page scroll
# window.addEventListener 'touchmove', (e) ->
# console.dir(e.target.className.indexOf('paper-lightbox-popup_window'))
# if module.querySelectorAll('.paper-lightbox-popup').length > 0
# if e.target.className.indexOf('paper-lightbox-popup_window') < 0
# e.preventDefault()

document.body.style.overflow = 'hidden'

_createImage: ->
# set vars
module = this
Expand All @@ -105,6 +124,15 @@ Polymer

image.src = module.getAttribute 'src'

# block page scroll
# window.addEventListener 'touchmove', (e) ->
# console.dir(e.target.className.indexOf('paper-lightbox-popup_window'))
# if module.querySelectorAll('.paper-lightbox-popup').length > 0
# if e.target.className.indexOf('paper-lightbox-popup_window') < 0
# e.preventDefault()

document.body.style.overflow = 'hidden'

_createIframe: ->
# set vars
module = this
Expand All @@ -120,9 +148,9 @@ Polymer

# if url is a youtube web
if url.indexOf('youtube.com/watch?v=') > -1
iframe.setAttribute 'src', newYtbUrl
iframe.setAttribute 'src', newYtbUrl + '?autoplay=1'
else
iframe.setAttribute 'src', url
iframe.setAttribute 'src', url + '?autoplay=1'

# create popup and parse content
@_createPopup()
Expand All @@ -131,12 +159,24 @@ Polymer
module.window.classList.add 'paper-lightbox-popup_window-iframe'

# append iframe
iframeWrapper.appendChild iframe
module.window.appendChild iframeWrapper
setTimeout (->
iframeWrapper.appendChild iframe
module.window.appendChild iframeWrapper
), 100


# close popup event
@_closePopup()

# block page scroll
# window.addEventListener 'touchmove', (e) ->
# console.dir(e.target.className.indexOf('paper-lightbox-popup_window'))
# if module.querySelectorAll('.paper-lightbox-popup').length > 0
# if e.target.className.indexOf('paper-lightbox-popup_window') < 0
# e.preventDefault()

document.body.style.overflow = 'hidden'

_createInline: ->
# set vars
module = this
Expand All @@ -154,6 +194,15 @@ Polymer
# close popup event
@_closePopup()

# block page scroll
# window.addEventListener 'touchmove', (e) ->
# console.dir(e.target.className.indexOf('paper-lightbox-popup_window'))
# if module.querySelectorAll('.paper-lightbox-popup').length > 0
# if e.target.className.indexOf('paper-lightbox-popup_window') < 0
# e.preventDefault()

document.body.style.overflow = 'hidden'

_getType: ->
# set vars
module = this
Expand All @@ -163,7 +212,7 @@ Polymer

_launchPopup: ->
# set vars
module = this
module = @

# launch each popup type
switch @_getType()
Expand All @@ -181,9 +230,18 @@ Polymer
module = this
popup = module.querySelector('.paper-lightbox-popup')
@window = undefined
if module.getAttribute('closingTime') != null && module.getAttribute('closingTime') != undefined
closingTime = module.getAttribute('closingTime')
else
closingTime = 0

# remove popup window
popup.remove()
# remove animation
popup.classList.add('closing')
setTimeout (->
# remove popup
popup.remove()
), closingTime
document.body.style.overflow = ''

_closePopup: ->
# set vars
Expand All @@ -207,6 +265,9 @@ Polymer
image.style.maxHeight = (window.innerHeight * 0.8) + 'px'

ready: ->
@listen window, 'WebComponentsReady', '_onLoad'

_onLoad: ->
@_launchPopup()

onAjaxContentLoaded: ->
Expand Down

0 comments on commit 337367f

Please sign in to comment.