-
-
Save KaiserEMP/ac42ff34128b596a7aa3be527719d259 to your computer and use it in GitHub Desktop.
asd
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Start timeline scripts ----------------------------------------------------*/ | |
/* Start timeline scripts ----------------------------------------------------*/ | |
/* Start timeline scripts ----------------------------------------------------*/ | |
/* Kinetic Drag */ | |
var $id = function (id) { return document.getElementById(id); }; | |
var $click = function (elem, fn) { | |
return elem.addEventListener('click', function (e) { | |
fn.apply(elem, [e]); | |
}, false); | |
}; | |
/* Kinetic Drag init*/ | |
new VanillaKinetic(document.getElementById('timeline-container'), { | |
filterTarget: function (target, e) { | |
if (!/down|start/.test(e.type)) { | |
return !(/area|a|input/i.test(target.tagName)); | |
} | |
} | |
}); | |
$click($id('timeline-arrow-right'), function () { | |
$id('timeline-container')._VanillaKinetic.start({ velocity: 4 }); | |
}); | |
$click($id('timeline-arrow-left'), function () { | |
$id('timeline-container')._VanillaKinetic.start({ velocity: -4 }); | |
}); | |
// Have fourth year-data column active | |
var activeData = $('.year-column.have-data').eq(3); | |
activeData.children('a').addClass('active'); | |
var dataDesc = activeData.children('a').data('description'); | |
var dataYear = activeData.children('a').data('year'); | |
var yearDescription = '<div class="desc-container"><span class="year">' + activeData.children('a').data('year') + '</span><span class="sep"> - </span><span class="desc">' + activeData.children('a').data('description') + '</span></div>'; | |
var bottomDesc = $('.year-description'); | |
var bottomDescInner = $('.year-description .description-inner'); | |
// shape duplicate to bottom | |
var shape = activeData.children('a').find('.shape').clone(); | |
//class copied and removed | |
var shapeClassed = shape.attr('class', activeData.children('a').attr('class')).addClass('shape').removeClass('column-data'); | |
//small fade animation | |
bottomDesc.fadeOut(200, function () { | |
bottomDescInner.empty(); | |
bottomDesc.fadeIn(300); | |
$(shapeClassed).prependTo(bottomDescInner); | |
$(yearDescription).appendTo(bottomDescInner); | |
}); | |
// clone timelineyears left and right | |
var yearColumn = $(".timeline-years .year-column").not('.left-clone', '.right-clone'); | |
var ycl = yearColumn.length; | |
function cloneTimelinesleft() { | |
var copyTimeline = yearColumn.clone().addClass('left-clone'); | |
copyTimeline.prependTo(".timeline-years"); | |
} | |
function cloneTimelinesright() { | |
var copyTimeline2 = yearColumn.clone().addClass('right-clone'); | |
copyTimeline2.appendTo(".timeline-years"); | |
} | |
// cloneTimelinesleft(); | |
// cloneTimelinesright(); | |
// have-data top and bottom classes | |
function timeLineBottom(){ | |
var classes = ['top', 'middle-year', 'bottom-year']; | |
$(function () { | |
var target = $(".timeline-years .have-data"); | |
target.each(function (index) { | |
$(this).addClass(classes[index % 3]); | |
}); | |
}); | |
} | |
// Hide until functions done | |
function showAfterLoad(){ | |
var yearData = document.querySelectorAll(".timeline-years .have-data .column-data"); | |
$(yearData).each(function () { | |
timeLineBottom(); | |
$(this).addClass('disTable'); | |
$(this).show(); | |
}); | |
} | |
showAfterLoad(); | |
//random top - left timeline positions | |
function timeLinePositions() { | |
function getRandomInt(min, max) { | |
return Math.floor(Math.random() * (max - min + 1) + min); | |
} | |
var yearColumns = document.querySelectorAll(".timeline-years .column-data"); | |
$(yearColumns).each(function () { | |
// var topPosition = $(this).css('top'); | |
// parsedTop = parseInt(topPosition); | |
// console.log(topPosition); | |
if ($(window).width() >= 480) { | |
$(this).css({ 'margin-left': getRandomInt(0, 30), 'margin-top': getRandomInt(0, 15) }); | |
} | |
$(this).css({ 'margin-left': getRandomInt(0, 13), 'margin-top': getRandomInt(0, 5) }); | |
}); | |
} | |
timeLinePositions(); | |
// Set scroll position right end | |
var outerContent = $('.timeline-container'); | |
var innerContent = $('.timeline-container .timeline-years .year-column'); | |
var columnWidth = innerContent.outerWidth() + 1; //plus border | |
//console.log(columnWidth); | |
var columns = innerContent.length * columnWidth; // multiply by column width | |
//var scrollPos = (columns - outerContent.width()) / 2; | |
outerContent.scrollLeft(outerContent.width()); | |
// arrow hiding | |
function timelineArrowHidden() { | |
//console.log(outerContent.scrollLeft()); | |
if (outerContent.scrollLeft() < 50) { | |
$('.timeline-arrow.left').addClass('hidden'); | |
} else { | |
$('.timeline-arrow.left').removeClass('hidden'); | |
} | |
if ( (outerContent.scrollLeft() + outerContent.outerWidth()) > (columns - 50) ) { | |
$('.timeline-arrow.right').addClass('hidden'); | |
} else { | |
$('.timeline-arrow.right').removeClass('hidden'); | |
} | |
} | |
timelineArrowHidden(); | |
$('.timeline-container').on('scroll', function () { | |
timelineArrowHidden(); | |
}); | |
// Display year description when clicked | |
$('body').on('click', 'a.column-data', function (e) { | |
if ($(this).hasClass('active')){ | |
return false; | |
} | |
$('a.column-data').removeClass('active'); | |
$(this).addClass('active'); | |
// Add active to same repeat columns | |
// get title string | |
var titleString = $(this).data('title'); | |
//console.log(titleString); | |
$('.timeline-years .have-data').each( function(e) { | |
//console.log(e); | |
var haveDatas = $(this).children('a').data('title'); | |
//console.log(haveDatas); | |
if ( haveDatas === titleString ) { | |
$(this).children('a').addClass('active'); | |
// console.log($(this)); | |
// console.log(true); | |
} | |
}); | |
var dataDesc = $(this).data('description'); | |
var dataYear = $(this).data('year'); | |
var yearDescription = '<div class="desc-container"><span class="year">' + $(this).data('year') + '</span><span class="sep"> - </span><span class="desc">' + $(this).data('description') + '</span></div>'; | |
var bottomDesc = $('.year-description'); | |
var bottomDescInner = $('.year-description .description-inner'); | |
// shape duplicate to bottom | |
var shape = $(this).find('.shape').clone(); | |
//class copied and removed | |
var shapeClassed = shape.attr('class', $(this).attr('class')).addClass('shape').removeClass('column-data'); | |
//console.log(shape); | |
//var shapetest = $(this).find('.shape').attr('class', $('a.column-data').attr('class')); | |
//console.log(shapeClassed); | |
//small fade animation | |
bottomDesc.fadeOut(200, function () { | |
bottomDescInner.empty(); | |
bottomDesc.fadeIn(300); | |
$(shapeClassed).prependTo(bottomDescInner); | |
$(yearDescription).appendTo(bottomDescInner); | |
}); | |
// console.log(bottomDesc); | |
// console.log(dataDesc); | |
e.preventDefault(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment