1/* 2 * File: jquery.flexisel.js 3 * Version: 1.0.2 4 * Description: Responsive carousel jQuery plugin 5 * Author: 9bit Studios 6 * Copyright 2012, 9bit Studios 7 * http://www.9bitstudios.com 8 * Free to use and abuse under the MIT license. 9 * http://www.opensource.org/licenses/mit-license.php 10 */ 11(function ($) { 12 $.fn.flexisel = function(options) { 13 14 var defaults = $.extend({ 15 visibleItems : 4, 16 animationSpeed : 200, 17 autoPlay : false, 18 autoPlaySpeed : 3000, 19 pauseOnHover : true, 20 setMaxWidthAndHeight : false, 21 enableResponsiveBreakpoints : true, 22 flipPage: false, 23 clone : true, 24 responsiveBreakpoints : { 25 portrait: { 26 changePoint:480, 27 visibleItems: 1 28 }, 29 landscape: { 30 changePoint:640, 31 visibleItems: 2 32 }, 33 tablet: { 34 changePoint:768, 35 visibleItems: 3 36 } 37 } 38 }, options); 39 40 /****************************** 41 Private Variables 42 *******************************/ 43 44 var object = $(this); 45 var settings = $.extend(defaults, options); 46 var itemsWidth; // Declare the global width of each item in carousel 47 var canNavigate = true; 48 var itemsVisible = settings.visibleItems; // Get visible items 49 var totalItems = object.children().length; // Get number of elements 50 var responsivePoints = []; 51 52 /****************************** 53 Public Methods 54 *******************************/ 55 var methods = { 56 init : function() { 57 return this.each(function() { 58 methods.appendHTML(); 59 methods.setEventHandlers(); 60 methods.initializeItems(); 61 }); 62 }, 63 64 /****************************** 65 Initialize Items 66 Fully initialize everything. Plugin is loaded and ready after finishing execution 67 *******************************/ 68 initializeItems : function() { 69 70 var listParent = object.parent(); 71 var innerHeight = listParent.height(); 72 var childSet = object.children(); 73 methods.sortResponsiveObject(settings.responsiveBreakpoints); 74 75 var innerWidth = listParent.width(); // Set widths 76 itemsWidth = (innerWidth) / itemsVisible; 77 childSet.width(itemsWidth); 78 if (settings.clone) { 79 childSet.last().insertBefore(childSet.first()); 80 childSet.last().insertBefore(childSet.first()); 81 object.css({ 82 'left' : -itemsWidth 83 }); 84 } 85 86 object.fadeIn(); 87 $(window).trigger("resize"); // needed to position arrows correctly 88 89 }, 90 91 /****************************** 92 Append HTML 93 Add additional markup needed by plugin to the DOM 94 *******************************/ 95 appendHTML : function() { 96 object.addClass("nbs-flexisel-ul"); 97 object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>"); 98 object.find("li").addClass("nbs-flexisel-item"); 99 100 var flexiselInner = object.parent(); // flexisel-inner 101 102 if (settings.setMaxWidthAndHeight) { 103 var baseWidth = $(".nbs-flexisel-item img").width(); 104 var baseHeight = $(".nbs-flexisel-item img").height(); 105 $(".nbs-flexisel-item img").css("max-width", baseWidth); 106 $(".nbs-flexisel-item img").css("max-height", baseHeight); 107 } 108 $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(flexiselInner); 109 if (settings.clone) { 110 var cloneContent = object.children().clone(); 111 object.append(cloneContent); 112 } 113 }, 114 /****************************** 115 Set Event Handlers 116 Set events: click, resize, etc 117 *******************************/ 118 setEventHandlers : function() { 119 120 var listParent = object.parent(); 121 var flexiselInner = listParent.parent(); 122 var childSet = object.children(); 123 var leftArrow = flexiselInner.find(".nbs-flexisel-nav-left"); 124 var rightArrow = flexiselInner.find(".nbs-flexisel-nav-right"); 125 126 $(window).on("resize", function(event) { 127 128 methods.setResponsiveEvents(); 129 130 var innerWidth = $(listParent).width(); 131 var innerHeight = $(listParent).height(); 132 133 itemsWidth = (innerWidth) / itemsVisible; 134 135 childSet.width(itemsWidth); 136 if (settings.clone) { 137 object.css({ 138 'left' : -itemsWidth 139 }); 140 }else { 141 object.css({ 142 'left' : 0 143 }); 144 } 145 146 // Hide the arrows if the elements are the same of the visible 147 if (!settings.clone && totalItems <= itemsVisible) { 148 leftArrow.add(rightArrow).css('visibility', 'hidden'); 149 } 150 else { 151 leftArrow.add(rightArrow).css('visibility', 'visible'); 152 153 var halfArrowHeight = (leftArrow.height()) / 2; 154 var arrowMargin = (innerHeight / 2) - halfArrowHeight; 155 leftArrow.css("top", arrowMargin + "px"); 156 rightArrow.css("top", arrowMargin + "px"); 157 } 158 159 }); 160 $(leftArrow).on("click", function(event) { 161 methods.scrollLeft(); 162 }); 163 $(rightArrow).on("click", function(event) { 164 methods.scrollRight(); 165 }); 166 if (settings.pauseOnHover === true) { 167 $(".nbs-flexisel-item").on({ 168 mouseenter : function() { 169 canNavigate = false;
170 }, 171 mouseleave : function() { 172 canNavigate = true; 173 } 174 }); 175 } 176 if (settings.autoPlay === true) { 177 178 setInterval(function() { 179 if (canNavigate === true) 180 methods.scrollRight(); 181 }, settings.autoPlaySpeed); 182 } 183 184 object[0].addEventListener('touchstart', methods.touchHandler.handleTouchStart, false); 185 object[0].addEventListener('touchmove', methods.touchHandler.handleTouchMove, false); 186 187 }, 188 /****************************** 189 Set Responsive Events 190 Set breakpoints depending on responsiveBreakpoints 191 *******************************/ 192 193 setResponsiveEvents: function() { 194 var contentWidth = $('html').width(); 195 196 if(settings.enableResponsiveBreakpoints) { 197 198 var largestCustom = responsivePoints[responsivePoints.length-1].changePoint; // sorted array 199 200 for(var i in responsivePoints) { 201 202 if(contentWidth >= largestCustom) { // set to default if width greater than largest custom responsiveBreakpoint 203 itemsVisible = settings.visibleItems; 204 break; 205 } 206 else { // determine custom responsiveBreakpoint to use 207 208 if(contentWidth < responsivePoints[i].changePoint) { 209 itemsVisible = responsivePoints[i].visibleItems; 210 break; 211 } 212 else 213 continue; 214 } 215 } 216 } 217 }, 218 219 /****************************** 220 Sort Responsive Object 221 Gets all the settings in resposiveBreakpoints and sorts them into an array 222 *******************************/ 223 224 sortResponsiveObject: function(obj) { 225 226 var responsiveObjects = []; 227 228 for(var i in obj) { 229 responsiveObjects.push(obj[i]); 230 } 231 232 responsiveObjects.sort(function(a, b) { 233 return a.changePoint - b.changePoint; 234 }); 235 236 responsivePoints = responsiveObjects; 237 }, 238 239 /****************************** 240 Scroll Left 241 *******************************/ 242 scrollLeft : function() { 243 if (object.position().left < 0) { 244 if (canNavigate === true) { 245 canNavigate = false; 246 247 var listParent = object.parent(); 248 var innerWidth = listParent.width(); 249 250 itemsWidth = (innerWidth) / itemsVisible; 251 252 var childSet = object.children(); 253 var increment = (settings.flipPage)? innerWidth: itemsWidth; 254 255 object.animate({ 256 'left' : "+=" + increment 257 }, { 258 queue : false, 259 duration : settings.animationSpeed, 260 easing : "linear", 261 complete : function() { 262 if (settings.clone) { 263 childSet.last().insertBefore(childSet.first()); // Get the first list item and put it after the last list item (that's how the infinite effects is made) 264 } 265 methods.adjustScroll(); 266 canNavigate = true; 267 } 268 }); 269 } 270 } 271 }, 272 /****************************** 273 Scroll Right 274 *******************************/ 275 scrollRight : function() { 276 var listParent = object.parent(); 277 var innerWidth = listParent.width(); 278 279 itemsWidth = (innerWidth) / itemsVisible; 280 281 var difObject = (itemsWidth - innerWidth); 282 var objPosition = (object.position().left + ((totalItems-itemsVisible)*itemsWidth)-innerWidth); 283 284 var increment = (settings.flipPage)? innerWidth: itemsWidth; 285 286 if((difObject <= Math.ceil(objPosition)) && (!settings.clone)){ 287 if (canNavigate === true) { 288 canNavigate = false; 289 290 object.animate({ 291 'left' : "-=" + increment 292 }, { 293 queue : false, 294 duration : settings.animationSpeed, 295 easing : "linear", 296 complete : function() { 297 methods.adjustScroll(); 298 canNavigate = true; 299 } 300 }); 301 } 302 } else if(settings.clone){ 303 if (canNavigate === true) { 304 canNavigate = false;
305 306 var childSet = object.children(); 307 308 object.animate({ 309 'left' : "-=" + increment 310 }, { 311 queue : false, 312 duration : settings.animationSpeed, 313 easing : "linear", 314 complete : function() { 315 childSet.first().insertAfter(childSet.last()); // Get the first list item and put it after the last list item (that's how the infinite effects is made) 316 methods.adjustScroll(); 317 canNavigate = true; 318 } 319 }); 320 } 321 }; 322 }, 323 /****************************** 324 Adjust Scroll 325 *******************************/ 326 adjustScroll : function() { 327 var listParent = object.parent(); 328 var childSet = object.children(); 329 330 var innerWidth = listParent.width(); 331 itemsWidth = (innerWidth) / itemsVisible; 332 childSet.width(itemsWidth); 333 334 var increment = (settings.flipPage)? innerWidth: itemsWidth; 335 336 if (settings.clone) { 337 object.css({ 338 'left' : -increment 339 }); 340 } 341 }, 342 touchHandler: { 343 344 xDown: null, 345 yDown: null, 346 handleTouchStart: function(evt) { 347 this.xDown = evt.touches[0].clientX; 348 this.yDown = evt.touches[0].clientY; 349 }, 350 handleTouchMove: function (evt) { 351 if (!this.xDown || !this.yDown) { 352 return; 353 } 354 355 var xUp = evt.touches[0].clientX; 356 var yUp = evt.touches[0].clientY; 357 358 var xDiff = this.xDown - xUp; 359 var yDiff = this.yDown - yUp; 360 361 // only comparing xDiff 362 // compare which is greater against yDiff to determine whether left/right or up/down e.g. if (Math.abs( xDiff ) > Math.abs( yDiff )) 363 if (Math.abs( xDiff ) > 0) { 364 if ( xDiff > 0 ) { 365 // swipe left 366 methods.scrollRight(); 367 } else { 368 //swipe right 369 methods.scrollLeft(); 370 } 371 } 372 373 /* reset values */ 374 this.xDown = null; 375 this.yDown = null; 376 canNavigate = true; 377 } 378 } 379 }; 380 if (methods[options]) { // $("#element").pluginName('methodName', 'arg1', 'arg2'); 381 return methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); 382 } else if (typeof options === 'object' || !options) { // $("#element").pluginName({ option: 1, option:2 }); 383 return methods.init.apply(this); 384 } else { 385 $.error('Method "' + method + '" does not exist in flexisel plugin!'); 386 } 387 }; 388})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.