Created
December 13, 2011 21:47
-
-
Save lyzadanger/1474033 to your computer and use it in GitHub Desktop.
Painful JS Scoping
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
var Swiper = function(el) { | |
var startX, startY, lastX, lastY; | |
var minswipe; | |
var init=function(el) { | |
Swiper.minswipe = 50; | |
el.bind('touchstart', function(event) { | |
Swiper.startX = event.originalEvent.targetTouches[0].screenX; | |
Swiper.startY = event.originalEvent.targetTouches[0].screenY; | |
$(this).bind('touchmove', function(event) { | |
Swiper.lastX = event.originalEvent.targetTouches[0].screenX; | |
Swiper.lastY = event.originalEvent.targetTouches[0].screenY; | |
if(Math.abs(Swiper.startX - Swiper.lastX) > Swiper.minswipe) { | |
$(this).unbind('touchmove'); | |
$(this).trigger('swipered'); | |
if (Swiper.lastX > Swiper.startX) { | |
$(this).trigger('swiperedright'); | |
} | |
else { | |
$(this).trigger('swiperedleft'); | |
} | |
Swiper.reset(); | |
} | |
}); | |
}); | |
}(el); | |
var reset = function() { | |
Swiper.startX = 0; | |
Swiper.startY = 0; | |
Swiper.lastX = 0; | |
Swiper.lastY = 0; | |
}; | |
}; | |
$(document).ready(function() { | |
var $scroller = $('#videoscroller'); | |
var $carousel = $('#videocarousel'); | |
var loadCount = 0; | |
var videoCount = $scroller.find('ul li').length; | |
var currentPage = 1; | |
var pageCount = 1; | |
var videosPerPage = 0; | |
var touchEnabled = false; | |
var updateView = updateDefault; | |
var backActive = false; | |
var nextActive = false; | |
var scrollerWidth; | |
$scroller.addClass('scrolling'); | |
if (Modernizr.touch) { | |
touchEnabled = true; | |
Swiper($scroller); | |
updateView = updateTouch; | |
videosReady(); | |
} else { | |
// Build iframe tags, replace <li> content with them | |
var iframe_prefix = parent.location.protocol + '//www.youtube.com/embed/'; | |
$scroller.find('li').each(function() { | |
var url = iframe_prefix + $(this).attr('id'); | |
var $iframe = $('<iframe />').attr({ | |
'src' : url, | |
'frameborder': 0, | |
'allowfullscreen': 'true' | |
}).load(videoLoaded); | |
$(this).html($iframe); | |
}); | |
} | |
// Watch load events as they fire off of the iframes. | |
// When all are loaded, invoke videosReady | |
function videoLoaded() { | |
loadCount += 1; | |
if (loadCount >= videoCount) { | |
videosReady(); | |
} | |
} | |
// Video <li> elements ready to go. | |
function videosReady() { | |
var videoWidth = $scroller.find('li:first').outerWidth(); // Computed video element width | |
scrollerWidth = $scroller.width(); // Make room for controls (non-touch only) | |
videosPerPage = Math.floor(scrollerWidth / videoWidth); // How many would fit, cleanly? | |
pageCount = Math.ceil($scroller.find('li').length / videosPerPage); // How many pages of videos? | |
scrollerWidth = videosPerPage * videoWidth; | |
$scroller.width(scrollerWidth).addClass('ready'); | |
updateControls(); | |
} | |
// Determine which controls should be active (back, next?) | |
function updateControls() { | |
backActive = (currentPage > 1) ? true : false; | |
nextActive = (currentPage < pageCount) ? true : false; | |
updateView(); | |
} | |
function updateDefault() { | |
var $gotoback = $carousel.find('.back').eq(0); | |
var $gotonext = $carousel.find('.next').eq(0); | |
if (nextActive) { | |
$gotonext.one(goNext); | |
} | |
if (backActive) { | |
$gotoback.one(goBack); | |
} | |
} | |
function updateTouch() { | |
} | |
function goBack() { | |
$carousel.find('ul').animate( { left: '+=' + scrollerWidth }, 250); | |
currentPage -= 1; | |
updateControls(); | |
} | |
function goNext() { | |
$carousel.find('ul').animate( { left: '-=' + scrollerWidth }, 250); | |
currentPage += 1; | |
updateControls(); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment