baraja-js/dist/baraja.min.js

A plugin for spreading items in a card-like fashion.

"use strict";function Baraja(r,n){void 0===n&&(n={});var u=this,t={easing:"ease-in-out",speed:300};function s(n){void 0===n&&(n=u.items),n.forEach(function(n,t){n.style.zIndex=(u.zIndexMin+u.itemTotal-1-t).toString()})}function l(n,t){var i="next"===t,e=parseInt(n.style.zIndex);n.style.zIndex=i?u.zIndexMin-1:u.zIndexMin+u.itemTotal,u.items.forEach(function(n){var t=parseInt(n.style.zIndex);(i?t<e:e<t)&&(n.style.zIndex=i?t+1:t-1)})}function f(n){void 0===n&&(n=u.items),n.forEach(function(n){n.addEventListener("click",function(){u.isAnimating||function(t){u.isAnimating=!0;var n=parseInt(t.style.zIndex)===u.zIndexMin+u.itemTotal-1,i=n?function(){u.isAnimating=!1}:function(){return!1};t=n?null:t,u.isClosed?o():e(i,t);if(n)return;c(t),g(t,50,50),t.style.opacity="0",t.style.transform="scale(2) translate(100px) rotate(20deg)",l(t,"last"),m(function(){v(t,"all",u.options.speed,"ease-in");var n=function(){t.removeEventListener("transitionend",n),u.isAnimating=!1};x(t,"none",n)},u.options.speed/2)}(n)},!0)})}function c(n){n.style.transition="none"}function g(n,t,i){n.style.transformOrigin=t+"% "+i+"%"}function v(n,t,i,e,o){void 0===t&&(t="all"),void 0===i&&(i=u.options.speed),void 0===e&&(e=u.options.easing),void 0===o&&(o=0);var a=i+"ms "+e+" "+o+"ms";n.style.transition="transform"===t?"transform "+a:t+" "+a}function x(n,t,i,e){void 0===e&&(e=!1),i&&(n.addEventListener("transitionend",i,!1),e&&i.call()),m(function(){"none"===t&&(n.style.opacity="1"),n.style.transform=t},25)}function i(n){r.insertAdjacentHTML("beforeend",n);var t=u.itemTotal,i=p();u.items=i.slice(),u.itemTotal=i.length;var e=Math.abs(u.itemTotal-t),o=i.splice(t,e);o.forEach(function(n){n.style.opacity="0"}),f(o),s(o),o=o.reverse();var a=0;o.forEach(function(n,t){n.style.transform="scale(1.8) translate(200px) rotate(15deg)",v(n,"all","500","ease-out",200*t);var i=function(){++a,n.removeEventListener("transitionend",i),c(n),a===e&&(u.isAnimating=!1)};x(n,"none",i)})}function e(i,t){void 0===i&&(i=null),void 0===t&&(t=null);var n=u.items;t&&(n=n.filter(function(n){return n!==t}));var e=u.isClosed;n.forEach(function(n){var t=function(){u.isClosed=!0,n.removeEventListener("transitionend",t),c(n),m(function(){g(n,50,50),i&&i.call()},25)};x(n,"none",t,e)})}function o(l){void 0===l&&(l={}),u.isClosed=!1;var f="left"===(l=function(n){return n.direction=n.direction||u.fanSettings.direction,n.easing=n.easing||u.fanSettings.easing,n.speed=n.speed||u.fanSettings.speed,n.range=n.range||u.fanSettings.range,n.translation=n.translation||u.fanSettings.translation,n.origin?(n.origin.x=n.origin.x||u.fanSettings.origin.x,n.origin.y=n.origin.y||u.fanSettings.origin.y):n.origin=u.fanSettings.origin,n.center||(n.center=u.fanSettings.center),n.scatter||(n.scatter=u.fanSettings.scatter),u.direction=n.direction,n}(l)).direction;if(l.origin.minX&&l.origin.maxX){var e=l.origin.maxX,o=l.origin.minX,a=(e-o)/u.itemTotal;u.items.forEach(function(n){var t=parseInt(n.style.zIndex),i=(u.itemTotal-1-(t-u.zIndexMin))*(e-o+a)/u.itemTotal+o;f&&(i=e+o-i),g(n,i,l.origin.y)})}else u.items.forEach(function(n){g(n,l.origin.x,l.origin.y)});var c=l.range/(u.itemTotal-1),d=l.translation/(u.itemTotal-1),m=0;u.items.forEach(function(n){v(n,"transform");var t=parseInt(n.style.zIndex),i=u.itemTotal-1-(t-u.zIndexMin),e=(l.center?l.range/2:l.range)-c*i,o=d*(u.itemTotal-i-1);if(f&&(e*=-1,o*=-1),l.scatter){var a=Math.floor(Math.random()*c),r=Math.floor(Math.random()*d);i!=u.itemTotal-1&&(f?(e+=a,o-=r):(e-=a,o+=r))}var s=function(){++m,n.removeEventListener("transitionend",s),m===u.itemTotal-1&&(u.isAnimating=!1)};x(n,"translate("+o+"px) rotate("+e+"deg)",s)})}function a(n){u.isClosed=!1;var t,i,e="next"===n,o=e?u.zIndexMin+u.itemTotal-1:u.zIndexMin,a=u.items.find(function(n){return parseInt(n.style.zIndex)===o});i=e?(t=5,a.offsetWidth+15):(t=-5,-1*a.offsetWidth-15),v(a,"transform");var r="translate("+i+"px) rotate("+t+"deg)",s=function(){a.removeEventListener("transitionend",s),l(a,n),s=function(){a.removeEventListener("transitionend",s),u.isAnimating=!1,u.isClosed=!0},x(a,r="translate(0px) rotate(0deg)",s)};x(a,r,s)}function d(n,t){(1<u.itemTotal||!u.isAnimating)&&(u.isAnimating=!0,u.isClosed?n.call(u,t):e(function(){n.call(u,t)}))}function m(t,i){void 0===i&&(i=5e3);var e=0,o=function(n){n-(e=e||n)<i?window.requestAnimationFrame(o):t()};window.requestAnimationFrame(o)}function p(){var n=r.querySelectorAll("li");if(n)return Array.prototype.slice.call(n)}return function(){if(u.options=Object.assign(t,n),u.fanSettings={easing:"ease-out",direction:"right",origin:{x:25,y:100},speed:500,range:90,translation:0,center:!0,scatter:!1},u.items=p(),u.itemTotal=u.items.length,!(1<u.itemTotal))throw new Error("Failed to initialize (no items found)");u.isClosed=!0,u.zIndexMin=1e3,s(),f()}(),u.add=function(n){this.isAnimating||d(i,n)},u.fan=function(n){this.isAnimating||d(o,n)},u.last=u.previous=function(){this.isAnimating||d(a,"last")},u.next=function(){this.isAnimating||d(a,"next")},u.close=function(){this.isAnimating||e()},u}window.baraja=function(n,t){return new Baraja(n,t)},"undefined"!=typeof module&&module.exports&&(module.exports=Baraja);