Created
August 4, 2014 01:36
-
-
Save AllieRays/f314610597f95bcca2b0 to your computer and use it in GitHub Desktop.
Dom manipulation for Drupal blocks based on screen size
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
swapper = function(arr, from, to) { | |
arr.splice(to, 0, arr.splice(from, 1)[0]); | |
return arr; | |
}; | |
//setup our vars | |
var homeElements = new Array(); | |
var mobileElements = new Array(); | |
var previousState; | |
//on home page and logged out | |
if ($('.not-logged-in .region-home').length > 0) { | |
// console.log("region-home"); | |
$(".region-home").children().each(function(index) { | |
//make two identical arrays to store references to each child element | |
homeElements[index] = $(this); | |
mobileElements[index] = $(this); | |
}); | |
//reorder mobile array | |
mobileElements = swapper(mobileElements, 3, 0); | |
mobileElements = swapper(mobileElements, 1, 2); | |
} | |
//on homepage and logged in | |
else if ($('.logged-in .region-home').length > 0) { | |
// console.log("region-home"); | |
$(".region-home").children().each(function(index) { | |
//make two identical arrays to store references to each child element | |
homeElements[index] = $(this); | |
mobileElements[index] = $(this); | |
}); | |
//reorder mobile array | |
mobileElements = swapper(mobileElements, 1, 0); | |
mobileElements = swapper(mobileElements, 2, 1); | |
mobileElements = swapper(mobileElements, 4, 7); | |
// mobileElements = swapper(mobileElements, 5, 6); | |
} | |
//Debugging statements ensure that the arrays are good | |
// console.log('desktop array = ' + homeElements.length); | |
// console.log('mobile array = ' + mobileElements.length); | |
//Helper function for rendering our changes | |
function swaparoo(toScreenSize) { | |
//if home page | |
if ($('.region-home').length > 0) { | |
//Fade out the region so we can smooth out the transition a bit | |
$('.region-home').fadeOut(100, function() { | |
//remove all child blocks from the region without destroying them | |
$(this).children().detach(); | |
//if we are transitioning to desktop put them back in the original order | |
if (toScreenSize == 'desktop') { | |
jQuery.each(homeElements, function(index) { | |
homeElements[index].appendTo('.region-home'); | |
}); | |
//If we are transitioning to mobile put them back in the modified mobile order | |
} else if (toScreenSize == 'mobile') { | |
jQuery.each(homeElements, function(index) { | |
mobileElements[index].appendTo('.region-home'); | |
}); | |
} | |
//Bring the region back with it's new order | |
$(this).fadeIn(100); | |
}); | |
} | |
} | |
//On load if desktop do nothing but store a flag denoting that we are on desktop | |
if ($(window).width() > 480) { | |
previousState = 'desktop'; | |
//onload setup desktop | |
// console.log('setting up desktop'); | |
$('.view-slideshow .previous, .view-slideshow .next').fadeOut(300); | |
//On load if mobile re-order the elemnts and store a mobile flag | |
} else { | |
previousState = 'mobile'; | |
//onload setup mobile | |
// console.log('setting up mobile'); | |
$('.view-slideshow .previous, .view-slideshow .next').fadeIn(300); | |
swaparoo('mobile'); | |
} | |
//Function binds an event to fire whenever the window is re-sized | |
$(window).resize(function() { | |
if (this.resizeTO) | |
clearTimeout(this.resizeTO); | |
this.resizeTO = setTimeout(function() { | |
$(this).trigger('resizeEnd'); | |
}, 500); | |
}); | |
$(window).bind('resizeEnd', function() { | |
//do something, window hasn't changed size in 500ms | |
//// console.log('window resized'); | |
//If we are on desktop now and re-sized from mobile (if we re-sized from desktop to desktop no changes are needed) | |
// console.log($(window).width()); | |
if ($(window).width() > 480 && previousState == 'mobile') { | |
//alter flag | |
previousState = 'desktop'; | |
// console.log('changing to desktop'); | |
//on window change setup desktop | |
swaparoo('desktop'); | |
$('.view-slideshow .previous, .view-slideshow .next').fadeOut(300); | |
//If we are on mobile now and re-sized from desktop (if we re-sized from mobile to mobile no changes are needed) | |
} else if ($(window).width() < 480 && previousState == 'desktop') { | |
previousState = 'mobile'; | |
// console.log('changing to mobile'); | |
//clearInterval(slideHoverInterval); | |
//on window change setup mobile | |
swaparoo('mobile'); | |
$('.view-slideshow .previous, .view-slideshow .next').fadeIn(300); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment