Angular JS – Managing resize with Modernizr

In this case we are managing the resize to automatically switch to a smaller version of our pictures when we are on the mobile version of the website. This is a very common task when working with responsive modules.

var oldSmall = null;
function setVideoImages(data, forceUpdate) {
    if (data != undefined) {
        var small = Modernizr.mq("only screen and (max-width: 40em)");
        if (forceUpdate || small != oldSmall) {
            for (var n = 0; n < data.Videos.length; n++) {
                var video = data.Videos[n];
                if (!small) {
                    video.ImagePath = video.ImagePaths.Large;
                }
                else {
                    video.ImagePath = video.ImagePaths.Small;
                }
            }
            oldSmall = small;
        }
    }
}
 
$scope.setVideoImages = function () {
    setVideoImages($scope.videoList, false)
}
 
//Resize
var timeout = null;
$(window).resize(function () {
    if (timeout == null) {
        timeout = setTimeout(function () {
            $scope.$apply(function () {
                $scope.setVideoImages();
                clearTimeout(timeout);
                timeout = null;
            });
        }, 100);
    }
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s