7 lines
8.5 KiB
JavaScript
7 lines
8.5 KiB
JavaScript
|
/**
|
||
|
|
* Timeline - a horizontal / vertical timeline component
|
||
|
|
* v. 1.2.0
|
||
|
|
* Copyright Mike Collins
|
||
|
|
* MIT License
|
||
|
|
*/
|
||
|
|
"use strict";var _slicedToArray=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var i=[],n=!0,l=!1,s=void 0;try{for(var a,r=e[Symbol.iterator]();!(n=(a=r.next()).done)&&(i.push(a.value),!t||i.length!==t);n=!0);}catch(e){l=!0,s=e}finally{try{!n&&r.return&&r.return()}finally{if(l)throw s}}return i}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")};function timeline(e,v){var g=[],p="Timeline:",t=window.innerWidth,i=void 0,o=0,b={forceVerticalMode:{type:"integer",defaultValue:600},horizontalStartPosition:{type:"string",acceptedValues:["bottom","top"],defaultValue:"top"},mode:{type:"string",acceptedValues:["horizontal","vertical"],defaultValue:"vertical"},moveItems:{type:"integer",defaultValue:1},rtlMode:{type:"boolean",acceptedValues:[!0,!1],defaultValue:!1},startIndex:{type:"integer",defaultValue:0},verticalStartPosition:{type:"string",acceptedValues:["left","right"],defaultValue:"left"},verticalTrigger:{type:"string",defaultValue:"15%"},visibleItems:{type:"integer",defaultValue:3}};function n(e,t,i){t.classList.add(i),e.parentNode.insertBefore(t,e),t.appendChild(e)}function l(e,t){var i=e.getBoundingClientRect(),n=window.innerHeight||document.documentElement.clientHeight,l=b.verticalTrigger.defaultValue.match(/(\d*\.?\d*)(.*)/),s=t.unit,a=t.value,r=n;if("px"===s&&n<=a){console.warn('The value entered for the setting "verticalTrigger" is larger than the window height. The default value will be used instead.');var o=_slicedToArray(l,3);a=o[1],s=o[2]}return"px"===s?r=parseInt(r-a,10):"%"===s&&(r=parseInt(r*((100-a)/100),10)),i.top<=r&&i.left<=(window.innerWidth||document.documentElement.clientWidth)&&0<=i.top+i.height&&0<=i.left+i.width}function d(e,t){e.style.webkitTransform=t,e.style.msTransform=t,e.style.transform=t}function c(e){var t="translate3d(-"+e.items[o].offsetLeft+"px, 0, 0)";d(e.scroller,t)}function s(e){var s,t,i,n,l,a,r;o=e.settings.rtlMode?e.items.length>e.settings.visibleItems?e.items.length-e.settings.visibleItems:0:e.settings.startIndex,e.timelineEl.classList.add("timeline--horizontal"),s=e,window.innerWidth>s.settings.forceVerticalMode&&(s.itemWidth=s.wrap.offsetWidth/s.settings.visibleItems,s.items.forEach(function(e){e.style.width=s.itemWidth+"px"}),s.scrollerWidth=s.itemWidth*s.items.length,s.scroller.style.width=s.scrollerWidth+"px",function(){var n=0,l=0;s.items.forEach(function(e,t){e.style.height="auto";var i=e.offsetHeight;t%2==0?l=l<i?i:l:n=n<i?i:n});var i="translateY("+l+"px)";s.items.forEach(function(e,t){t%2==0?(e.style.height=l+"px","bottom"===s.settings.horizontalStartPosition?(e.classList.add("timeline__item--bottom"),d(e,i)):e.classList.add("timeline__item--top")):(e.style.height=n+"px","bottom"!==s.settings.horizontalStartPosition?(e.classList.add("timeline__item--bottom"),d(e,i)):e.classList.add("timeline__item--top"))}),s.scroller.style.height=l+n+"px"}()),c(e),function(e){if(e.items.length>e.settings.visibleItems){var t=document.createElement("button"),i=document.createElement("button"),n=e.items[0].offsetHeight;t.className="timeline-nav-button timeline-nav-button--prev",i.className="timeline-nav-button timeline-nav-button--next",t.textContent="Previous",i.textContent="Next",t.style.top=n+"px",i.style.top=n+"px",0===o?t.disabled=!0:o===e.items.length-e.settings.visibleItems&&(i.disabled=!0),e.timelineEl.appendChild(t),e.timelineEl.appendChild(i)}}(e),function(e){var t=e.timelineEl.querySelector(".timeline-divider");t&&e.timelineEl.removeChild(t);var i=e.items[0].offsetHeight,n=document.createElement("span");n.className="timeline-divider",n.style.top=i+"px",e.timelineEl.appendChild(n)}(e),i=(t=e).timelineEl.querySelectorAll(".timeline-nav-button"),n=t.timelineEl.querySelector(".timeline-nav-button--prev"),l=t.timelineEl.querySelector(".timeline-nav-button--next"),a=t.items.length-t.settings.visibleItems,r=parseInt(t.settings.moveItems,10),[].forEach.call(i,function(e){e.addEventListener("click",function(e){e.preventDefault(),0===(o=this.classList.contains("timeline-nav-button--next")?o+=r:o-=r)||o<0?(o=0,n.d
|