From f68eff6a0e3fd61f7223c6a4297d4f009ecf1051 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Radek=20=C5=A0er=C3=BD?= Date: Mon, 8 Jan 2018 23:11:04 +0100 Subject: [PATCH] =?UTF-8?q?#10=20Umo=C5=BEnit=20animaci=20p=C5=99i=20zav?= =?UTF-8?q?=C5=99en=C3=AD=20pdboxu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/css/pdbox.css | 78 +++++++++++++++++++++++++++++++------ dist/css/pdbox.min.css | 2 +- dist/js/jquery.pdbox.js | 16 +++++--- dist/js/jquery.pdbox.min.js | 2 +- src/js/jquery.pdbox.js | 16 +++++--- src/less/core.less | 50 +++++++++++++++++++----- 6 files changed, 130 insertions(+), 34 deletions(-) diff --git a/dist/css/pdbox.css b/dist/css/pdbox.css index cbc4ef0..f084361 100644 --- a/dist/css/pdbox.css +++ b/dist/css/pdbox.css @@ -3,6 +3,9 @@ top: auto; left: -10000px; } +:root { + --pdbox-closing-duration: 200ms; +} .pdbox-open { overflow: hidden; } @@ -41,6 +44,10 @@ padding: 0 30px; } } +.pdbox__content, +.pdbox__overlay { + animation: pdbox__open forwards 300ms ease; +} .pdbox__overlay { position: absolute; top: 0; @@ -51,20 +58,10 @@ padding: 0; overflow: hidden; background-color: #000; - opacity: .54; + opacity: 0.54; + animation-name: pdbox__open--overlay; transform: translateZ(0); } -.pdbox--inner .pdbox__window { - z-index: 504; -} -.pdbox--inner .pdbox__overlay { - z-index: 503; -} -.pdbox--loading .pdbox__spinner { - opacity: 1; - visibility: visible; - transition-delay: 0s; -} .pdbox__spinner { position: absolute; top: 0; @@ -202,6 +199,27 @@ .pdbox__close:hover { color: #000; } +.pdbox--inner .pdbox__window { + z-index: 504; +} +.pdbox--inner .pdbox__overlay { + z-index: 503; +} +.pdbox--loading .pdbox__spinner { + opacity: 1; + visibility: visible; + transition-delay: 0s; +} +.pdbox--closing .pdbox__content, +.pdbox--closing .pdbox__overlay { + animation-duration: var(--pdbox-closing-duration, 0ms); +} +.pdbox--closing .pdbox__content { + animation-name: pdbox__close; +} +.pdbox--closing .pdbox__overlay { + animation-name: pdbox__close--overlay; +} @keyframes pdbox__spinner { 0% { transform: rotate(0deg); @@ -210,3 +228,39 @@ transform: rotate(360deg); } } +@keyframes pdbox__open { + 0% { + opacity: 0; + transform: translate3d(0, -100%, 0); + } + 100% { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} +@keyframes pdbox__close { + 0% { + opacity: 1; + transform: translate3d(0, 0, 0); + } + 100% { + opacity: 0; + transform: translate3d(0, -100%, 0); + } +} +@keyframes pdbox__open--overlay { + 0% { + opacity: 0; + } + 100% { + opacity: 0.54; + } +} +@keyframes pdbox__close--overlay { + 0% { + opacity: 0.54; + } + 100% { + opacity: 0; + } +} diff --git a/dist/css/pdbox.min.css b/dist/css/pdbox.min.css index 1b8ba8e..7fe5007 100644 --- a/dist/css/pdbox.min.css +++ b/dist/css/pdbox.min.css @@ -1 +1 @@ -.u-out{position:absolute;top:auto;left:-10000px}.pdbox-open{overflow:hidden}.pdbox-open--scrollbar-offset{margin-right:var(--pdbox-scrollbar-width,0)}.pdbox-open--scrollbar-offset .pdbox__window{overflow-y:scroll}.pdbox__window{position:fixed;top:0;left:0;right:0;bottom:0;z-index:4;overflow:auto;line-height:100vh;text-align:center}.pdbox__window--scrollbar-offset{margin-left:var(--pdbox-scrollbar-width,0)}@media (min-width:590px){.pdbox__window{padding:0 5px}}@media (min-width:768px){.pdbox__window{padding:0 20px}}@media (min-width:960px){.pdbox__window{padding:0 30px}}.pdbox__overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;padding:0;overflow:hidden;background-color:#000;opacity:.54;transform:translateZ(0)}.pdbox--inner .pdbox__window{z-index:6}.pdbox--inner .pdbox__overlay{z-index:5}.pdbox--loading .pdbox__spinner{opacity:1;visibility:visible;transition-delay:0s}.pdbox__spinner{position:absolute;top:0;left:0;right:0;bottom:0;background:hsla(0,0%,100%,.8);opacity:0;visibility:hidden;transition:visibility 0s linear .2s,opacity .2s ease}.pdbox__spinner:before{position:absolute;top:50%;left:50%;width:1em;height:1em;margin:-.5em 0 0 -.5em;font-size:32px;border:.125em solid transparent;border-top-color:#333;border-radius:50%;content:"";animation:a 2s linear infinite}.pdbox__content{z-index:1;display:inline-block;width:100%;max-width:900px;min-height:25vh;margin:40px auto;background:#fff;transform:translateZ(0);vertical-align:middle;line-height:normal;animation-duration:.3s}.pdbox__content,.pdbox__image{position:relative;overflow:hidden}.pdbox__image{display:block;padding:0;margin:0 10px 15px;text-align:center}@media (min-width:768px){.pdbox__image{margin:0 20px 20px}}@media (min-width:960px){.pdbox__image{margin:0 30px 30px}}.pdbox__desc{padding:10px;margin:0;text-align:left;overflow:hidden}@media (min-width:768px){.pdbox__desc{padding:20px}}.pdbox__pager{position:relative;margin:10px;text-align:center}.pdbox__page{color:#333}.pdbox__page--disabled{color:#bbb;text-decoration:none;cursor:default}.pdbox__pages-summary{display:inline-block;margin:0 5px;vertical-align:middle}.pdbox__pager--thumbnails{padding:0;margin:0;list-style:none;white-space:nowrap;overflow-x:auto;overflow-y:hidden}.pdbox__thumbnail-item{display:inline-block;padding:0;margin:0;vertical-align:top}.pdbox__thumbnail-link{display:block}.pdbox__thumbnail{vertical-align:top}.pdbox__close{position:absolute;top:0;right:0;width:0;height:0;margin:0;z-index:2;padding:40px 0 0 40px;overflow:hidden;cursor:pointer;font:14px/40px Arial,sans-serif;text-decoration:none;color:#333;line-height:40px}.pdbox__close:before{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;text-align:center;font-size:30px;content:"×"}.pdbox__close:hover{color:#000}@keyframes a{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}} \ No newline at end of file +.u-out{position:absolute;top:auto;left:-10000px}:root{--pdbox-closing-duration:200ms}.pdbox-open{overflow:hidden}.pdbox-open--scrollbar-offset{margin-right:var(--pdbox-scrollbar-width,0)}.pdbox-open--scrollbar-offset .pdbox__window{overflow-y:scroll}.pdbox__window{position:fixed;top:0;left:0;right:0;bottom:0;z-index:4;overflow:auto;line-height:100vh;text-align:center}.pdbox__window--scrollbar-offset{margin-left:var(--pdbox-scrollbar-width,0)}@media (min-width:590px){.pdbox__window{padding:0 5px}}@media (min-width:768px){.pdbox__window{padding:0 20px}}@media (min-width:960px){.pdbox__window{padding:0 30px}}.pdbox__content,.pdbox__overlay{animation:b forwards .3s ease}.pdbox__overlay{z-index:3;padding:0;overflow:hidden;background-color:#000;opacity:.54;animation-name:d;transform:translateZ(0)}.pdbox__overlay,.pdbox__spinner{position:absolute;top:0;left:0;right:0;bottom:0}.pdbox__spinner{background:hsla(0,0%,100%,.8);opacity:0;visibility:hidden;transition:visibility 0s linear .2s,opacity .2s ease}.pdbox__spinner:before{position:absolute;top:50%;left:50%;width:1em;height:1em;margin:-.5em 0 0 -.5em;font-size:32px;border:.125em solid transparent;border-top-color:#333;border-radius:50%;content:"";animation:a 2s linear infinite}.pdbox__content{z-index:1;display:inline-block;width:100%;max-width:900px;min-height:25vh;margin:40px auto;background:#fff;transform:translateZ(0);vertical-align:middle;line-height:normal;animation-duration:.3s}.pdbox__content,.pdbox__image{position:relative;overflow:hidden}.pdbox__image{display:block;padding:0;margin:0 10px 15px;text-align:center}@media (min-width:768px){.pdbox__image{margin:0 20px 20px}}@media (min-width:960px){.pdbox__image{margin:0 30px 30px}}.pdbox__desc{padding:10px;margin:0;text-align:left;overflow:hidden}@media (min-width:768px){.pdbox__desc{padding:20px}}.pdbox__pager{position:relative;margin:10px;text-align:center}.pdbox__page{color:#333}.pdbox__page--disabled{color:#bbb;text-decoration:none;cursor:default}.pdbox__pages-summary{display:inline-block;margin:0 5px;vertical-align:middle}.pdbox__pager--thumbnails{padding:0;margin:0;list-style:none;white-space:nowrap;overflow-x:auto;overflow-y:hidden}.pdbox__thumbnail-item{display:inline-block;padding:0;margin:0;vertical-align:top}.pdbox__thumbnail-link{display:block}.pdbox__thumbnail{vertical-align:top}.pdbox__close{position:absolute;top:0;right:0;width:0;height:0;margin:0;z-index:2;padding:40px 0 0 40px;overflow:hidden;cursor:pointer;font:14px/40px Arial,sans-serif;text-decoration:none;color:#333;line-height:40px}.pdbox__close:before{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;text-align:center;font-size:30px;content:"×"}.pdbox__close:hover{color:#000}.pdbox--inner .pdbox__window{z-index:6}.pdbox--inner .pdbox__overlay{z-index:5}.pdbox--loading .pdbox__spinner{opacity:1;visibility:visible;transition-delay:0s}.pdbox--closing .pdbox__content,.pdbox--closing .pdbox__overlay{animation-duration:var(--pdbox-closing-duration,0ms)}.pdbox--closing .pdbox__content{animation-name:c}.pdbox--closing .pdbox__overlay{animation-name:e}@keyframes a{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes b{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes c{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-100%,0)}}@keyframes d{0%{opacity:0}to{opacity:.54}}@keyframes e{0%{opacity:.54}to{opacity:0}} \ No newline at end of file diff --git a/dist/js/jquery.pdbox.js b/dist/js/jquery.pdbox.js index 2dd301f..b673134 100644 --- a/dist/js/jquery.pdbox.js +++ b/dist/js/jquery.pdbox.js @@ -188,17 +188,23 @@ $.pdBox = (function () { this.removeEventListener('load', this.setOptions); + this.rootElem.addClass('pdbox--closing'); this.dispatchEvent('beforeClose'); this.window.elem.off(); - hideBox(this); + var closingDuration = parseInt(getComputedStyle(this.rootElem[0]).getPropertyValue('--pdbox-closing-duration') || 0); - if ( ! this.isInner) { - this.$body.removeClass('pdbox-open pdbox-open--scrollbar-offset'); - } + var that = this; + setTimeout(function() { + hideBox(that); + + if ( ! that.isInner) { + that.$body.removeClass('pdbox-open pdbox-open--scrollbar-offset'); + } - this.dispatchEvent('afterClose'); + that.dispatchEvent('afterClose'); + }, closingDuration); } }; diff --git a/dist/js/jquery.pdbox.min.js b/dist/js/jquery.pdbox.min.js index 4eeb353..99953b6 100644 --- a/dist/js/jquery.pdbox.min.js +++ b/dist/js/jquery.pdbox.min.js @@ -1,3 +1,3 @@ /*! jQuery pdBox 1.1.2-draft | MIT | PeckaDesign, s.r.o, https://github.com/peckadesign/jquery.pdbox */ -$.pdBox=function(){function a(a){a=a||{},this.defaults={},this.defaults.width=p.width,this.defaults.className=p.className,a.width&&(this.defaults.width=a.width),a.className&&(this.defaults.className+=" "+a.className),this.options=$.extend({},p,a),a.template&&(this.options.template=a.template.toString()),"object"==typeof a.langs?this.langs=$.extend({},q,a.langs):this.langs=q,this.options.lang in this.langs||(this.options.lang="en"),this.isOpen=!1,this.setOnOpenOptions=!1,this.isAjax=a.isAjax||!1,this.isInner=a.isInner||!1,this.events={},this.overlay=null,this.rootElem={},this.window={},this.$doc=$(document),this.$body=$("body"),this.$html=$("html"),this.spinnerHtml=a.spinnerHtml||"",this.html="function"==typeof a.template?a.template(this):b(this),this.$el=null;var c="";for(var d in r){if(c=v(r[d]),"object"==typeof a[c])for(fn in a[c])a[c].hasOwnProperty(fn)&&"function"==typeof a[c][fn]&&this.addEventListener(r[d],a[c][fn]);else"function"==typeof a[c]&&this.addEventListener(r[d],a[c]);this.options[c]=void 0}this.addEventListener("load",function(){this.rootElem.removeClass("pdbox--loading")}),this.addEventListener("afterOpen",i),this.addEventListener("load",i),l()}function b(a){return $content="
\t
\t\t

\t\t
"+(a.isAjax?"
":"")+"\t\t
\t\t

\t\t\t"+a.langs[a.options.lang].prev+"\t\t\t\t\t\t"+a.langs[a.options.lang].of+"\t\t\t"+a.langs[a.options.lang].next+"\t\t

\t\t

\t\t
"+a.spinnerHtml+"\t\t "+a.langs[a.options.lang].close+"\t
",$content}function c(a){a.rootElem=$('
'),a.rootElem.html(a.html).prependTo(a.$body),a.window.elem=a.rootElem.find(".pdbox__window"),a.window.close=a.window.elem.find(".pdbox__close"),a.window.title=a.window.elem.find(".pdbox__title"),a.window.content=a.window.elem.find(".pdbox__content"),a.window.descWrap=a.window.elem.find(".pdbox__desc"),a.window.desc=a.window.elem.find(".pdbox__snippet"),a.window.desc.length||(a.window.desc=a.window.descWrap),a.window.pager={elem:a.window.elem.find(".pdbox__pager"),pages:a.window.elem.find(".pdbox__pages"),pagesSummary:a.window.elem.find(".pdbox__pages-summary"),activePage:a.window.elem.find(".pdbox__active-page"),pagesCount:a.window.elem.find(".pdbox__pages-count"),prev:a.window.elem.find(".pdbox__page--prev"),next:a.window.elem.find(".pdbox__page--next"),thumbnails:a.window.elem.find(".pdbox__pager--thumbnails")},a.window.image=a.window.elem.find(".pdbox__image"),$(document).on("click.pdbox",".pdbox__close, .pdbox__close--alternative",$.proxy(o,a)),a.$doc.on("keyup.pdbox",$.proxy(g,a)),a.window.image.on("click.pdbox",$.proxy(function(a){this.close(),a.preventDefault()},a))}function d(a){a.window.close.off(),a.window.pager.next.off(),a.window.pager.prev.off(),a.window.pager.pages.find("a").off(),a.window.pager.thumbnails.off(),a.window.image.off(),a.overlay.off(),a.$doc.off("keyup.pdbox"),a.rootElem.remove()}function e(a,b,c){var d=b.data("rel");if(d){var e=$(c),g=$([]),i=e.filter('[data-rel="'+d+'"]'),j="";if(i.each(function(a){j+=" "+(a+1)+" "}),a.window.pager.pages.empty().append(j),a.options.imageThumbnails){var k="";i.each(function(a){k+="
  • "}),a.window.pager.thumbnails.append($('