zumbaHistory stuff

zumbaHistory.js

define(['jquery', "underscore"], function ( $, _ ) {
    (function ( $, window, document, undefined ) {
    
        // Create the defaults once
        var pluginName = 'zumbaHistory',
            defaults = {
                colors: [ "purple", "blue", "yello", "orange" ],
                extraScrollWidth: 400
            };
    
        // The actual plugin constructor
        function ZumbaHistory( element, options ) {
            _.bindAll(this);

            this.element = element;
            this.$el = $( this.element );
            this.options = $.extend( {}, defaults, options ) ;
            
            this._defaults = defaults;
            this._name = pluginName;
            
            this.$yearsList = this.$el.find( ".timeline-list" );
            this.$years = this.$el.find( ".timeline-year-element" );

            // The amount the years have been scrolled.
            this.scrolledBy = 0;

            this.init();
        }
    
        $.extend(ZumbaHistory.prototype, {
            init: function() {
                this._processTimeline();
                this._setupEvents();
            },
            _processTimeline: function() {
                this._calculateSizes();
                this._addColorClasses();
            },
            _addColorClasses: function() {
                var self = this;
                this.$years.each(function( index ){
                     $( this ).addClass( "is-" + self.options.colors[ index % self.options.colors.length ] );
                });
            },
            _calculateSizes: function( extra ) {
                this.yearsWidth = ( this.$years.outerWidth(true) * this.$years.length ) + this.options.extraScrollWidth + (extra || 0);
                this.$yearsList.css({
                    width: this.yearsWidth
                });
                this.historyWidth = this.$el.width();
                this.scrollableWidth = (this.yearsWidth - this.historyWidth) / 2;
                console.log( this.scrollableWidth );
            },
            _setupEvents: function() {
                var self = this;
                
                this.$el.on( "click", "a.detail-content-trigger", this.openYear )
                    .on( "click", "a.close-btn", this.closeYearAndPop )
                    .on( "click", ".detail-pop-trigger", this.openPop )
                    .on( "mousemove", this._checkMouse)
                    .on( "mouseleave", ".timeline-detail-content", function( e ) {
                        self._checkMouse( e, true );
                    })
                    .on( "mouseleave", this.scrollMiddle );
            },
            // LeftYear here is a special case when after the year panel is opened,
            // continue scrolling when leaving it.
            _checkMouse: function( event, leftYear ) {
                var winWidth = $( window ).width(),
                    // Define some regions of the screen to toggle left and right scrolling.
                    screenRegions = {
                        Left: "0 300",
                        Middle: "300 " + ( winWidth - 300 ),
                        Right: ( winWidth - 300 ) + " " + winWidth
                    },
                    // Get the active mouse position.
                    mouseX = event.clientX,
                    high, low, region;
                
                region = _.reduce(screenRegions, function(memo, region, name) {
                    low = region.split(" ")[0];
                    high = region.split(" ")[1];
                    if ( mouseX > low && mouseX < high ) {
                        memo = name;
                    }
                    return memo;
                }, "");

                if ( (leftYear && region) || region && this.currentRegion !== region) {
                    this.scrolling = (region === "Left" || region === "Right");
                    
                    this[ "scroll" + region ]();
                    this.currentRegion = region;
                }
            },
            scrollLeft: function() {
                if ( this.scrolledBy >= this.scrollableWidth ) {
                    return;
                }

                this.scrollBy( 30, $.proxy(function() {
                    this.scrolledBy += 30;
                    
                    if ( !this.scrolling ) {
                        return;
                    }

                    this.scrollLeft();
                    
                }, this));
            },
            scrollRight: function() {
                if ( this.scrolledBy < -this.scrollableWidth ) {
                    return;
                }

                this.scrollBy( 30, $.proxy(function() {
                    this.scrolledBy -= 30;
                    
                    if ( !this.scrolling ) {
                        return;
                    }
                    
                    this.scrollRight();

                }, this));
            },
            scrollMiddle: function() {
                this.scrolling = false;
            },
            scrollBy: function( num, callback ) {
                this.$yearsList.animate({
                    left: ( this.scrolledBy + num )
                }, 50, "linear", callback);
            },
            openYear: function( event ) {
                var el = $( event.target );
                
                event.preventDefault();
                
                this.$years.removeClass( "is-active" );
                el.closest( ".timeline-year-element" ).addClass( "is-active" );

                this.scrollMiddle();
            },
            closeYearAndPop: function( event ) {
                var el = $( event.target ),
                    year = el.closest( ".timeline-year-element" );
                
                event.preventDefault();
                
                if ( year.hasClass("is-popover") ) {
                    year.removeClass( "is-popover" )
                        .width(215);
                    year.find( ".detail-pop.is-active" ).removeClass("is-active");
                    this._calculateSizes();
                }
                else {
                    year.removeAttr("style")
                        .removeClass( "is-active" );
                }
                
            },
            openPop: function( event ) {
                event.preventDefault();
                var el = $( event.currentTarget ),
                    year = el.closest( ".timeline-year-element" ),
                    pop = el.siblings( ".detail-pop" ),
                    popWidth = pop.width();
                
                year.addClass( "is-popover" )
                    .width( popWidth );
                this._calculateSizes( popWidth );
                pop.addClass( "is-active" );
            }
        });
    
        $.fn[pluginName] = function( options ) {
            return this.each(function () {
                if (!$.data(this, pluginName)) {
                    $.data(this, pluginName,
                    new ZumbaHistory( this, options ));
                }
            });
        };
    
        $.fn.defaults = defaults;
    
    })( jQuery, window, document );
});