Wiki/buct/jquery.flexisel.js

From 2014.igem.org

Revision as of 16:53, 14 October 2014 by D.DO (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

(function ($) {

   $.fn.flexisel = function(options) {
       var defaults = $.extend({
           visibleItems : 4,
           animationSpeed :1000,
           autoPlay : false,
           autoPlaySpeed : 3000,
           pauseOnHover : true,
           setMaxWidthAndHeight : false,
           enableResponsiveBreakpoints : true,
           clone : true,
           responsiveBreakpoints : {
               portrait: { 
                   changePoint:480,
                   visibleItems: 1
               }, 
               landscape: { 
                   changePoint:640,
                   visibleItems: 2
               },
               tablet: { 
                   changePoint:768,
                   visibleItems: 3
               }
           }
       }, options);
       
       /******************************
       Private Variables
        *******************************/
        
       var object = $(this);
       var settings = $.extend(defaults, options);
       var itemsWidth; // Declare the global width of each item in carousel
       var canNavigate = true;
       var itemsVisible = settings.visibleItems; // Get visible items
       var totalItems = object.children().length; // Get number of elements
       var responsivePoints = [];
       
       /******************************
       Public Methods
       *******************************/
       var methods = {
           init : function() {
               return this.each(function() {
                   methods.appendHTML();
                   methods.setEventHandlers();
                   methods.initializeItems();
               });
           },
           /******************************
           Initialize Items
           Fully initialize everything. Plugin is loaded and ready after finishing execution

*******************************/

           initializeItems : function() {
               var listParent = object.parent();
               var innerHeight = listParent.height();
               var childSet = object.children();
               methods.sortResponsiveObject(settings.responsiveBreakpoints);
               
               var innerWidth = listParent.width(); // Set widths
               itemsWidth = (innerWidth) / itemsVisible;
               childSet.width(itemsWidth);        
               if (settings.clone) {
                   childSet.last().insertBefore(childSet.first());
                   childSet.last().insertBefore(childSet.first());
                   object.css({
                       'left' : -itemsWidth
                   });
               }
               object.fadeIn();
               $(window).trigger("resize"); // needed to position arrows correctly
           },
           

/******************************

           Append HTML
           Add additional markup needed by plugin to the DOM

*******************************/

           appendHTML : function() {
               object.addClass("nbs-flexisel-ul");
object.wrap("
");
               object.find("li").addClass("nbs-flexisel-item");
               if (settings.setMaxWidthAndHeight) {
                   var baseWidth = $(".nbs-flexisel-item img").width();
                   var baseHeight = $(".nbs-flexisel-item img").height();
                   $(".nbs-flexisel-item img").css("max-width", baseWidth);
                   $(".nbs-flexisel-item img").css("max-height", baseHeight);
               }
$("
").insertAfter(object);
               if (settings.clone) {
                   var cloneContent = object.children().clone();
                   object.append(cloneContent);
               }
           },
           /******************************
           Set Event Handlers

Set events: click, resize, etc

           *******************************/
           setEventHandlers : function() {
               var listParent = object.parent();
               var childSet = object.children();
               var leftArrow = listParent.find($(".nbs-flexisel-nav-left"));
               var rightArrow = listParent.find($(".nbs-flexisel-nav-right"));
               $(window).on("resize", function(event) {
                   methods.setResponsiveEvents();
                   var innerWidth = $(listParent).width();
                   var innerHeight = $(listParent).height();
                   itemsWidth = (innerWidth) / itemsVisible;
                   childSet.width(itemsWidth);
                   if (settings.clone) {
                       object.css({
                           'left' : -itemsWidth                            
                       });
                   }else {
                       object.css({
                           'left' : 0
                       });
                   }
                   var halfArrowHeight = (leftArrow.height()) / 2;
                   var arrowMargin = (innerHeight / 2) - halfArrowHeight;
                   leftArrow.css("top", arrowMargin + "px");
                   rightArrow.css("top", arrowMargin + "px");
               });
               $(leftArrow).on("click", function(event) {
                   methods.scrollLeft();
               });
               $(rightArrow).on("click", function(event) {
                   methods.scrollRight();
               });
               if (settings.pauseOnHover == true) {
                   $(".nbs-flexisel-item").on({
                       mouseenter : function() {
                           canNavigate = false;
                       },
                       mouseleave : function() {
                           canNavigate = true;
                       }
                   });
               }
               if (settings.autoPlay == true) {
                   setInterval(function() {
                       if (canNavigate == true)
                           methods.scrollRight();
                   }, settings.autoPlaySpeed);
               }
           },
           /******************************
           Set Responsive Events
           Set breakpoints depending on responsiveBreakpoints
           *******************************/            
           
           setResponsiveEvents: function() {
               var contentWidth = $('html').width();
               
               if(settings.enableResponsiveBreakpoints) {
                   
                   var largestCustom = responsivePoints[responsivePoints.length-1].changePoint; // sorted array 
                   
                   for(var i in responsivePoints) {
                       
                       if(contentWidth >= largestCustom) { // set to default if width greater than largest custom responsiveBreakpoint 
                           itemsVisible = settings.visibleItems;
                           break;
                       }
                       else { // determine custom responsiveBreakpoint to use
                       
                           if(contentWidth < responsivePoints[i].changePoint) {
                               itemsVisible = responsivePoints[i].visibleItems;
                               break;
                           }
                           else
                               continue;
                       }
                   }
               }
           },
           /******************************
           Sort Responsive Object
           Gets all the settings in resposiveBreakpoints and sorts them into an array
           *******************************/            
           
           sortResponsiveObject: function(obj) {
               
               var responsiveObjects = [];
               
               for(var i in obj) {
                   responsiveObjects.push(obj[i]);
               }
               
               responsiveObjects.sort(function(a, b) {
                   return a.changePoint - b.changePoint;
               });
           
               responsivePoints = responsiveObjects;
           },
           
           /******************************
           Scroll Left
           *******************************/
           scrollLeft : function() {
               if (object.position().left < 0) {
                   if (canNavigate == true) {
                       canNavigate = false;
                       var listParent = object.parent();
                       var innerWidth = listParent.width();
                       itemsWidth = (innerWidth) / itemsVisible;
                       var childSet = object.children();
                       object.animate({
                           'left' : "+=" + itemsWidth
                       }, {
                           queue : false,
                           duration : settings.animationSpeed,
                           easing : "linear",
                           complete : function() {
                               if (settings.clone) {
                                   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)                                   
                               }
                               methods.adjustScroll();
                               canNavigate = true;
                           }
                       });
                   }
               }
           },
           /******************************
           Scroll Right
           *******************************/            
           scrollRight : function() {
               var listParent = object.parent();
               var innerWidth = listParent.width();
               itemsWidth = (innerWidth) / itemsVisible;
               var difObject = (itemsWidth - innerWidth);
               var objPosition = (object.position().left + ((totalItems-itemsVisible)*itemsWidth)-innerWidth);    
               
               if((difObject < Math.ceil(objPosition)) && (!settings.clone)){
                   if (canNavigate == true) {
                       canNavigate = false;                    
   
                       object.animate({
                           'left' : "-=" + itemsWidth
                       }, {
                           queue : false,
                           duration : settings.animationSpeed,
                           easing : "linear",
                           complete : function() {                                
                               methods.adjustScroll();
                               canNavigate = true;
                           }
                       });
                   }
               } else if(settings.clone){
                   if (canNavigate == true) {
                       canNavigate = false;
   
                       var childSet = object.children();
   
                       object.animate({
                           'left' : "-=" + itemsWidth
                       }, {
                           queue : false,
                           duration : settings.animationSpeed,
                           easing : "linear",
                           complete : function() {                                
                                   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)                                
                               methods.adjustScroll();
                               canNavigate = true;
                           }
                       });
                   }
               };                
           },
           /******************************
           Adjust Scroll 
            *******************************/
           adjustScroll : function() {
               var listParent = object.parent();
               var childSet = object.children();
               var innerWidth = listParent.width();
               itemsWidth = (innerWidth) / itemsVisible;
               childSet.width(itemsWidth);
               if (settings.clone) {
                   object.css({
                       'left' : -itemsWidth
                   });
               }
           }
       };
       if (methods[options]) { // $("#element").pluginName('methodName', 'arg1', 'arg2');
           return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
       } else if (typeof options === 'object' || !options) { // $("#element").pluginName({ option: 1, option:2 });
           return methods.init.apply(this);
       } else {
           $.error('Method "' + method + '" does not exist in flexisel plugin!');
       }
   };

})(jQuery);