Tile slider. Fixed-width tiles for off-canvas tile effect.

tile-sliderx

jQuery(function($){
	function debug(str) {
		if (settings.debug) { console.log(str); } 
	}

	var settings = {
		debug: true
	}

	var root = {
		container: false,
		tiles: [],
		filmstrip: false,
		tileWidth: 0
	}

// Helper methods
	var helper = {
	
	
	};
	
	
// Main methods	
	var methods = {
		// Initial plugin, runs if parameter to plugin does not match another method
		init: function(options) {
			// Override/combine variables with any that have been passed
			if (options) { $.extend(settings, options); }

			// Handling of targeted element; loop through each match
			return this.each(function() {
				root.container = $(this);
				root.tiles     = root.container.find(".tile-slider__tile");
				root.filmstrip = root.container.find(".tile-slider__filmstrip");
				root.tileWidth = root.container.data("tilewidth");

				var tileCount = root.tiles.length;

				//var stripMinWidth = root.container.data("minwidth");				

				// Set tile width
				root.tiles.each(function(k,el) {
					$(el).css("width", root.tileWidth+"px");
				});	

				root.container.find(".tile-slider__filmstrip").css("width", (tileCount * root.tileWidth)+"px"); 

				// Bind
				methods.bind();



			}); // End each()
            
			return(true);
		},

		slide: function(dir) {
			var existingMargin = parseInt(root.filmstrip.css("margin-left").replace("px",""));
			var viewportWidth  = window.innerWidth;
			var lastTile       = root.tiles.last();

			if (viewportWidth > 1200) { viewportWidth = 1200; }

			if (dir) {
				// Next (left)
				// Only move if the last tile is not fully in view
				if ((lastTile.offset().left + root.tileWidth) >= viewportWidth) {
					root.filmstrip.css("margin-left", (existingMargin-root.tileWidth)+"px");
				}
			} else {
				// Prev (right)
				// Only move if first slide is off screen
				if (existingMargin != 0) {
					root.filmstrip.css("margin-left", (existingMargin+root.tileWidth)+"px");
				}
			}
		},

		bind: function() {
			root.container.find(".tile-slider__tile a").on("click", function(e) {
				e.preventDefault();

				root.container.find(".tile-slider__tile").removeClass("active");
				$(this).parent().addClass("active");

			});

			root.container.find(".tile-slider__nav.prev").on("click", function(e) {
				e.preventDefault();
				methods.slide();
			});

			root.container.find(".tile-slider__nav.next").on("click", function(e) {
				e.preventDefault();
				methods.slide(1);
			});


			// Touch swipes using hammer
			root.container.find(".tile-slider__filmstrip").hammer().on("swipeleft", function(ev) { 
				methods.slide(1);
			});

			root.container.find(".tile-slider__filmstrip").hammer().on("swiperight", function(ev) { 
				methods.slide();
			});
		}
	}
	
   // Plugin namespace and attachment - Syntax: $(element).kickappsVideo({options});
   $.fn.tileSlider = function(methodOrOptions) {
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist' );
        }    
    };
});