diff --git a/alchemy/static/css/fluidbox.css b/alchemy/static/css/fluidbox.css new file mode 100644 index 0000000..2473693 --- /dev/null +++ b/alchemy/static/css/fluidbox.css @@ -0,0 +1,76 @@ +@-webkit-keyframes fluidboxLoading { + 0% { + -webkit-transform: translate(-50%, -50%) rotateX(0) rotateY(0); } + 50% { + -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0); } + 100% { + -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg); } } +@keyframes fluidboxLoading { + 0% { + transform: translate(-50%, -50%) rotateX(0) rotateY(0); } + 50% { + transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0); } + 100% { + transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg); } } +.fluidbox { + outline: none; } + +.fluidbox-overlay { + background-color: rgba(255, 255, 255, 0.85); + cursor: pointer; + cursor: -webkit-zoom-out; + cursor: -moz-zoom-out; + cursor: zoom-out; + opacity: 0; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + /* Transition time for overlay is halved to ensure that flickering doesn't happen */ + transition: all 0.125s ease-in-out 0.125s; } + +.fluidbox-wrap { + background-position: center center; + background-size: cover; + margin: 0 auto; + position: relative; + transition: all 0.25s ease-in-out; + /* To prevent flickering, we delay the showing of the image */ } + .fluidbox-closed .fluidbox-wrap img { + transition: opacity 0 ease-in-out 0.25s; } + +.fluidbox-ghost { + background-size: 100% 100%; + background-position: center center; + perspective: 200px; + position: absolute; + -webkit-transition-property: opacity, -webkit-transform; + -moz-transition-property: opacity, -moz-transform; + -o-transition-property: opacity, -o-transform; + transition-property: opacity, transform; + transition-duration: 0, 0.25s; + transition-delay: 0.25s, 0; } + .fluidbox-ghost::before { + -webkit-animation: fluidboxLoading 1s infinite; + animation: fluidboxLoading 1s infinite; + /* You can replace this with any color you want, or even a loading gif if desired */ + background-color: rgba(255, 255, 255, 0.85); + content: ''; + transform-style: preserve-3d; + transition: all 0.25s ease-in-out; + opacity: 0; + position: absolute; + top: 50%; + left: 50%; + width: 20%; + padding-bottom: 20%; + /* Delay disapparing of loader for graceful transition */ + transition-delay: 0.125s; } + .fluidbox-loading .fluidbox-ghost::before { + opacity: 1; + transition-delay: 0; } + .fluidbox-opened .fluidbox-ghost { + transition-delay: 0, 0; } + +/*# sourceMappingURL=fluidbox.css.map */ diff --git a/alchemy/static/css/fluidbox.css.map b/alchemy/static/css/fluidbox.css.map new file mode 100644 index 0000000..14255c6 --- /dev/null +++ b/alchemy/static/css/fluidbox.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAMA,kCAIC;EAHA,EAAI;IAAE,iBAAiB,EAAE,2CAA4C;EACrE,GAAK;IAAE,iBAAiB,EAAE,iDAAiD;EAC3E,IAAK;IAAE,iBAAiB,EAAE,uDAAuD;AAElF,0BAIC;EAHA,EAAI;IAAE,SAAS,EAAE,2CAA4C;EAC7D,GAAK;IAAE,SAAS,EAAE,iDAAiD;EACnE,IAAK;IAAE,SAAS,EAAE,uDAAuD;AAI1E,SAAU;EACT,OAAO,EAAE,IAAI;;AAEd,iBAAkB;EACjB,gBAAgB,EAnBI,yBAAiB;EAoBrC,MAAM,EAAE,OAAO;EACf,MAAM,EAAE,gBAAgB;EACxB,MAAM,EAAE,aAAa;EACrB,MAAM,EAAE,QAAQ;EAChB,OAAO,EAAE,CAAC;EACV,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,CAAC;;EAER,UAAU,EAAE,6BAA6D;;AAE1E,cAAe;EACd,mBAAmB,EAAE,aAAa;EAClC,eAAe,EAAE,KAAK;EACtB,MAAM,EAAE,MAAM;EACd,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,qBAAoC;;EAGhD,mCAAuB;IAAE,UAAU,EAAE,2BAA0C;;AAEhF,eAAgB;EACf,eAAe,EAAE,SAAS;EAC1B,mBAAmB,EAAE,aAAa;EAClC,WAAW,EAAE,KAAK;EAClB,QAAQ,EAAE,QAAQ;EAClB,2BAA2B,EAAE,0BAA0B;EACvD,wBAAwB,EAAE,uBAAuB;EACjD,sBAAsB,EAAE,qBAAqB;EAC7C,mBAAmB,EAAE,kBAAkB;EACvC,mBAAmB,EAAE,QAAC;EACtB,gBAAgB,EAAE,QAAoB;EAEtC,uBAAU;IACT,iBAAiB,EAAE,2BAA2B;IAC9C,SAAS,EAAE,2BAA2B;;IAEtC,gBAAgB,EA3DG,yBAAiB;IA4DpC,OAAO,EAAE,EAAE;IACX,eAAe,EAAE,WAAW;IAC5B,UAAU,EAAE,qBAAoC;IAChD,OAAO,EAAE,CAAC;IACV,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;IACV,cAAc,EAAE,GAAG;;IAEnB,gBAAgB,EAAE,MAAsB;EAGzC,yCAA4B;IAC3B,OAAO,EAAE,CAAC;IACV,gBAAgB,EAAE,CAAC;EAGpB,gCAAmB;IAAE,gBAAgB,EAAE,IAAI", +"sources": ["fluidbox.scss"], +"names": [], +"file": "fluidbox.css" +} \ No newline at end of file diff --git a/alchemy/static/js/LICENSE.md b/alchemy/static/js/LICENSE.md new file mode 100644 index 0000000..7a9cfb7 --- /dev/null +++ b/alchemy/static/js/LICENSE.md @@ -0,0 +1,23 @@ +# Fluidbox +Replicating and improving the lightbox module seen on Medium with fluid transitions. + +## The MIT License (MIT) +Copyright © 2014 [Terry Mun](http://terrymun.com) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/alchemy/static/js/jquery.fluidbox.min.js b/alchemy/static/js/jquery.fluidbox.min.js new file mode 100644 index 0000000..c32e0d3 --- /dev/null +++ b/alchemy/static/js/jquery.fluidbox.min.js @@ -0,0 +1 @@ +function whichTransitionEvent(){var a,b=document.createElement("fakeelement"),c={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in c)if(void 0!==b.style[a])return c[a]}!function(a,b){var c=function(a,b,c){var d;return function(){function g(){c||a.apply(e,f),d=null}var e=this,f=arguments;d?clearTimeout(d):c&&a.apply(e,f),d=setTimeout(g,b||100)}};jQuery.fn[b]=function(a){return a?this.bind("resize",c(a)):this.trigger(b)}}(jQuery,"smartresize");var customTransitionEnd=whichTransitionEvent();!function(a){var b=0;a.fn.fluidbox=function(c){var d=a.extend(!0,{viewportFill:.95,debounceResize:!0,stackIndex:1e3,stackIndexDelta:10,closeTrigger:[{selector:".fluidbox-overlay",event:"click"},{selector:"document",event:"keyup",keyCode:27}],immediateOpen:!1},c),e=["keyup","keydown","keypress"];d.stackIndex",{"class":"fluidbox-overlay",css:{"z-index":d.stackIndex}});var h,f=this,g=a(window),i=function(b){a(b+".fluidbox-opened").trigger("click")},j=function(b,c){var e=b.find("img"),f=b.find(".fluidbox-ghost"),i=b.find(".fluidbox-wrap"),j=b.data(),k=0,l=0;e.data().imgRatio=j.natWidth/j.natHeight;var m,n,o;h>e.data().imgRatio?(k=j.natHeightf.imgRatio?g.height()*d.viewportFill/b.height():g.width()*d.viewportFill/b.width()}if(h=g.width()/g.height(),a.hasClass("fluidbox")){var b=a.find("img"),c=a.find(".fluidbox-ghost"),e=a.find(".fluidbox-wrap"),f=b.data();i(),b.load(i)}},l=function(b){if(a(this).hasClass("fluidbox")){var c=a(this),e=a(this).find("img"),f=a(this).find(".fluidbox-ghost"),g=a(this).find(".fluidbox-wrap"),h={},i=function(){c.trigger("openstart"),c.append($fbOverlay).data("fluidbox-state",1).removeClass("fluidbox-closed").addClass("fluidbox-opened"),h.close&&window.clearTimeout(h.close),h.open=window.setTimeout(function(){a(".fluidbox-overlay").css({opacity:1})},10),a(".fluidbox-wrap").css({zIndex:d.stackIndex-d.stackIndexDelta-1}),g.css({"z-index":d.stackIndex+d.stackIndexDelta})},k=function(){c.trigger("closestart"),c.data("fluidbox-state",0).removeClass("fluidbox-opened fluidbox-loaded fluidbox-loading").addClass("fluidbox-closed"),h.open&&window.clearTimeout(h.open),h.close=window.setTimeout(function(){a(".fluidbox-overlay").remove(),g.css({"z-index":d.stackIndex-d.stackIndexDelta})},10),a(".fluidbox-overlay").css({opacity:0}),f.css({transform:"translate(0,0) scale(1)",opacity:0,top:e.offset().top-g.offset().top+parseInt(e.css("borderTopWidth"))+parseInt(e.css("paddingTop")),left:e.offset().left-g.offset().left+parseInt(e.css("borderLeftWidth"))+parseInt(e.css("paddingLeft"))}).one(customTransitionEnd,function(){c.trigger("closeend")}),e.css({opacity:1})};0!==a(this).data("fluidbox-state")&&a(this).data("fluidbox-state")?k():(c.addClass("fluidbox-loading"),e.css({opacity:0}),f.css({"background-image":"url("+e.attr("src")+")",opacity:1}),d.immediateOpen?(c.data("natWidth",e[0].naturalWidth).data("natHeight",e[0].naturalHeight),i(),j(c,["openend"]),a("",{src:c.attr("href")}).load(function(){c.trigger("imageloaddone").trigger("delayedloaddone").removeClass("fluidbox-loading").addClass("fluidbox-loaded").data("natWidth",a(this)[0].naturalWidth).data("natHeight",a(this)[0].naturalHeight),f.css({"background-image":"url("+c.attr("href")+")"}),j(c,["delayedreposdone"])}).error(function(){c.trigger("imageloadfail"),k()})):a("",{src:c.attr("href")}).load(function(){c.trigger("imageloaddone").removeClass("fluidbox-loading").addClass("fluidbox-loaded").data("natWidth",a(this)[0].naturalWidth).data("natHeight",a(this)[0].naturalHeight),f.css({"background-image":"url("+c.attr("href")+")"}),i(),j(c,["openend"])}).error(function(){c.trigger("imageloadfail"),k()})),b.preventDefault()}},m=function(b){b?k(b):f.each(function(){k(a(this))});var c=a("a.fluidbox.fluidbox-opened");c.length>0&&j(c,["resizeend"])};return d.debounceResize?a(window).smartresize(function(){m()}):a(window).resize(function(){m()}),f.each(function(){if(a(this).is("a")&&1===a(this).children().length&&a(this).children().is("img")&&"none"!==a(this).css("display")&&"none"!==a(this).parents().css("display")){var f=a("
",{"class":"fluidbox-wrap",css:{"z-index":d.stackIndex-d.stackIndexDelta}});b+=1;var h=a(this);h.addClass("fluidbox fluidbox-closed").attr("id","fluidbox-"+b).wrapInner(f).find("img").css({opacity:1}).after('
').each(function(){var b=a(this);b.width()>0&&b.height()>0?(k(h),h.click(l)):b.load(function(){k(h),h.click(l),h.trigger("thumbloaddone")}).error(function(){h.trigger("thumbloadfail")})}),a(this).on("recompute",function(){m(a(this)),a(this).trigger("recomputeend")});var j="#fluidbox-"+b;d.closeTrigger&&a.each(d.closeTrigger,function(b){var c=d.closeTrigger[b];"window"!=c.selector?"document"==c.selector&&(c.keyCode&&e.indexOf(c.event)>-1?a(document).on(c.event,function(a){a.keyCode==c.keyCode&&i(j)}):a(document).on(c.event,j,function(){i(j)})):g.on(c.event,function(){i(j)})})}}),f}}(jQuery); \ No newline at end of file diff --git a/alchemy/static/js/license.txt b/alchemy/static/js/license.txt new file mode 100644 index 0000000..8c09e76 --- /dev/null +++ b/alchemy/static/js/license.txt @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2014 Terry Mun + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file