File: D:/HostingSpaces/SBogers10/straffer.komma.nl/wwwroot/js/projectView.js
/**
* Created by Pascal on 21/03/16.
*/
$(function () {
var colCount = 3;
var colWidth = 0;
var windowWidth = 0;
var margin = 20;
var blocks = [];
var projectsBlockHeight = 0;
var firstTimeScreen = true;
var coffeeBlock = true;
// Function to get the Min value in Array
Array.min = function (array) {
return Math.min.apply(Math, array);
};
setupBlocks();
//homeBlocks();
$(window).scroll(function () {
if (isElementPartInViewport($('.projects-row'))) {
if (firstTimeScreen) {
setupBlocks();
firstTimeScreen = false;
}
}
});
setInterval(function () {
firstTimeScreen = true;
}, 1000);
setTimeout(function () {
setupBlocks();
//homeBlocks();
}, 1000);
$(window).resize(function(){
setupBlocks();
//homeBlocks();
});
/*function homeBlocks(){
$imageRation = [
1.201847887,
0.671899213,
1.446291525,
0.844863366,
1.201847887,
1.673160784,
0.632082963,
1.422186667,
0.66665,
0.853312,
1.219017143,
1.422186667
];
$('.projects-home-row .project').each(function(index){
$(this).height($(this).width()/$imageRation[index]);
});
}*/
function setupBlocks() {
margin = 20;
projectsBlockHeight = 0;
windowWidth = $('.projects-row').width();
colWidth = $('.project').outerWidth();
coffeeBlock = true;
$maxProjects = 50;
if($(window).width() <= 1120){
$maxProjects = 12;
margin = 30;
coffeeBlock = false;
}
if($(window).width() <= 400){
$maxProjects = 6;
}
colCount = Math.floor(windowWidth / (colWidth + margin));
blocks = [];
for (var i = 0; i < colCount; i++) {
blocks.push(margin);
}
//remove Coffee block to prevent from double content
$('.coffee').remove();
positionBlocks();
}
function positionBlocks() {
//position the projects
$counter = 0;
$('.project.notActive').removeClass('notActive');
$('.project.active').removeClass('active');
$('.projects-row .project').each(function () {
if($counter < $maxProjects) {
$counter++;
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin + (index * (colWidth + margin));
$(this).css({
'left': leftPos + 'px',
'top': min + 'px'
});
min += $(this).outerHeight() + margin;
//add Coffee block if middle row en amount height has been reached
if ((index) == 1 && ($counter >= 10) && (coffeeBlock == true)) {
if (coffeeBlock) {
$(this).after('<a href="/contact" class="coffee" style="position:absolute; left: ' + leftPos + 'px; top: ' + min + 'px; height: '+($('.projects-row .project').height())+'px;">Ko<span>ff</span>ie<em>?</em></a>');
coffeeBlock = false;
min += $('.projects-row .project').height() + margin;
}
}
$(this).addClass('active');
blocks[index] = min;
}
else{
$(this).addClass('notActive');
}
});
//set Height for the parent container
var callCount = 1;
var repeater = setInterval(function () {
if (callCount < 10) {
var projectsBlockHeight = 0;
projects = $('.project.active').slice(-4);
$.each(projects, function (index, value) {
tempHeight = $(value).height() + parseInt($(value).last().css('top').slice(0, -2));
if (tempHeight > projectsBlockHeight) {
projectsBlockHeight = tempHeight;
}
});
$('.projects-row').height(projectsBlockHeight);
callCount += 1;
} else {
clearInterval(repeater);
}
}, 100);
}
//HOVER ANIMATION
//coffee block animation
$('.projects-row, .projects-home-row').on('mouseenter', '.coffee, .coffee-home', function (e) {
var el_pos = $(this).offset();
var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
$(this).addClass(edge);
});
$('.projects-row, .projects-home-row').on('mouseleave', '.coffee, .coffee-home', function (e) {
stripClassHover($(this));
});
//locatie mouse enter and leave side and trigger the animation
$(".project").hover(function (e) {
var el_pos = $(this).offset();
var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
animateTranslate(edge, $(this).find('.overlay-color'), true);
}, function (e) {
var el_pos = $(this).offset();
var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
animateTranslate(edge, $(this).find('.overlay-color'), false);
});
function stripClassHover(e) {
//remove animation class from element
e.removeClass("left");
e.removeClass("right");
e.removeClass("top");
e.removeClass("bottom");
}
function animateTranslate(side, e, inAnimation) {
//determine the amount of slide and the direction, and reverse animation
switch (side) {
case 'left':
if (inAnimation) {
translateOverlay('-100.5%', 0, e, 'h');
}
else {
translateReverseOverlay('-100.5%', 0, e, 'h');
}
break;
case 'right':
if (inAnimation) {
translateOverlay('100.5%', 0, e, 'h');
}
else{
translateReverseOverlay('100.5%', 0, e, 'h');
}
break;
case 'top':
if (inAnimation) {
translateOverlay(0, '-100.5%', e, 'v');
}
else{
translateReverseOverlay(0, '-100.5%', e, 'v');
}
break;
case 'bottom':
if (inAnimation) {
translateOverlay(0, '100.5%', e, 'v');
}
else{
translateReverseOverlay(0, '100.5%', e, 'v');
}
break;
}
}
function translateOverlay(x, y, e, side) {
e.css('-webkit-transform', 'translate3d(' + x + ', ' + y + ',0)');
e.css('-moz-transform', 'translate3d(' + x + ', ' + y + ',0)');
e.css('-ms-transform', 'translate3d(' + x + ', ' + y + ',0)');
e.css('-o-transform', 'translate3d(' + x + ', ' + y + ',0)');
e.css('transform', 'translate3d(' + x + ', ' + y + ',0)');
if (side == 'h') {
e.css('text-indent', x);
}
else {
e.css('text-indent', y);
}
e.animate({
textIndent: 0
}, {
step: function (now, fx) {
translate3dAnimation(now, side, e)
}
}, 2000, function () {
// Animation complete.
});
}
function translateReverseOverlay(x, y, e, side) {
textI = '';
if (side == 'h') {
textI = x;
}
else {
textI = y;
}
e.animate({
textIndent: textI
}, {
step: function (now, fx) {
translate3dAnimation(now, side, e);
}
}, 2000, function () {
// Animation complete.
});
}
function translate3dAnimation(now, side, e){
if (side == 'h') {
e.css('-webkit-transform', 'translate3d(' + now + '%, 0,0)');
e.css('-moz-transform', 'translate3d(' + now + '%, 0,0)');
e.css('-ms-transform', 'translate3d(' + now + '%, 0,0)');
e.css('-o-transform', 'translate3d(' + now + '%, 0,0)');
e.css('transform', 'translate3d(' + now + '%, 0,0)');
}
else {
e.css('-webkit-transform', 'translate3d(0, ' + now + '%,0)');
e.css('-moz-transform', 'translate3d(0, ' + now + '%,0)');
e.css('-ms-transform', 'translate3d(0, ' + now + '%,0)');
e.css('-o-transform', 'translate3d(0, ' + now + '%,0)');
e.css('transform', 'translate3d(0, ' + now + '%,0)');
}
}
function closestEdge(x, y, x2, y2) {
var xDiff = 0;
var yDiff = 0;
var top = false;
var left = false;
xDiff = x2 - x;
if (xDiff >= (x2 / 2)) {
xDiff = x;
left = true;
}
yDiff = y2 - y;
if (yDiff >= (y2 / 2)) {
yDiff = y;
top = true;
}
if (xDiff <= yDiff) {
if (left) {
return 'left';
}
return 'right';
}
else {
if (top) {
return 'top';
}
else {
return 'bottom';
}
}
/*console.log('top: ' + top + ' - left: ' + left);
//console.log( 'toplocation: ' + y + ' - height: '+y2);
console.log( 'xDif: ' + xDiff + ' - yDiff: '+yDiff);
return (xDiff * xDiff) + (yDiff * yDiff);*/
}
});