jQuery OOP

gistfile1.txt

//  __                     __   __  
// |__) |  | |\ |     /\  |__) |__) 
// |  \ \__/ | \|    /~~\ |    |    

$(function() {                                 

    var app                        = NTD_ProgramHomePageApp.Run();

    var respondWith                = new app.Classes.Responder();
    var switchCarouselDetector     = new app.Classes.ClickDetector();
    var showMoreProgButtonDetector = new app.Classes.ClickDetector();
    var clickAllProgStringDetector = new app.Classes.ClickDetector();
    var expandProgCategoryDetector = new app.Classes.ClickDetector();
    var touchDeviceGestureDetector = new app.Classes.TouchDeviceGestureDetector();
    
            touchDeviceGestureDetector.bindGesture("swipeleft");
            touchDeviceGestureDetector.bindGesture("swiperight");

            switchCarouselDetector
                .detect( app.Variables.$arrowButtonOnCarousel )
                .processTo( respondWith.switchCarouselAgent )
                .additionalProcessor(
                    app.Classes.Toolkit.goCarouselInitStateIfResizeBrowserWidth
                );      

            showMoreProgButtonDetector
                .detect( app.Variables.$buttonForShowMostProg )
                .processTo( respondWith.showingMoreProg );      

            clickAllProgStringDetector
                .detect( app.Variables.$allProgString )
                .processTo( respondWith.showInitStatusOfThisSite )

            expandProgCategoryDetector
                .detect( app.Variables.$itemOnNav )
                .processTo( respondWith.showingSpecificCategoryContnet )
                .additionalProcessor( 
                    app.Classes.Toolkit.checkClickDetectedAgainIfHasClassActive,
                    app.Classes.Toolkit.hideShowMoreProgButton
                );              
});

//       __   __      __   ___  ___          ___    __       
//  /\  |__) |__)    |  \ |__  |__  | |\ | |  |  | /  \ |\ | 
// /~~\ |    |       |__/ |___ |    | | \| |  |  | \__/ | \| 
                                           
NTD_ProgramHomePageApp = {

    Run: function() {

        var $recommendProgWrapper  = $("#recom_prog");
        var $recommandProgTitleBar = $recommendProgWrapper.find(".title_bar");
        var $recommandProgList     = $recommendProgWrapper.find(".video_list");
        var $buttonForShowMostProg = $recommendProgWrapper.find("button");

        var $groupedProgWrappers       = $(".grouped_prog");
        var $eachVideoSetOfgroupedProg = $groupedProgWrappers.find(".video_list");
        var $groupedProgTitleBar       = $groupedProgWrappers.find(".title_description");

        var $allProgString         = $("#String_allProg"); 
        var $navWrapper            = $(".nav_all_prog");
        var $itemOnNav             = $navWrapper.find('li');
        var $arrowButtonOnCarousel = $navWrapper.find('.arrow');
        var $nav                   = $navWrapper.find(".nav_all_prog_list ul");


            function ClickDetector() {
                this.clickResponder;
                this.respond = true;
                this.processor = [];
            }
                     ClickDetector.prototype.detect = function( $elem ) {
                        $( $elem ).on( 'click', this, this.respondClick );
                        return this;
                     };

                     ClickDetector.prototype.respondClick = function( event ) {
                        var _this = event.data; // _this = this
                        var $this = $(this);

                        _this.processor.map(function(eachProcessor) {
                            eachProcessor.call( _this, $this );
                        });

                        if ( _this.respond ) {
                            _this.clickResponder( $this );
                        }
                        return false; // prevent page refresh
                     };

                     ClickDetector.prototype.processTo = function( func ) {
                        this.clickResponder = func;
                        return this;
                     }

                     ClickDetector.prototype.additionalProcessor = function() {
                        var externalFunc = arguments;
                        if ( externalFunc ) { // modify "arguments" into really array
                            this.processor = Array.prototype.slice.call(externalFunc);
                        }
                     };

            function Toolkit () {
            }
                     Toolkit.refreshDataEqStateOnElem = function () {
                        var numberOfColumnGrid = $recommandProgList.attr("data-eq-state");
                            $eachVideoSetOfgroupedProg.attr("data-eq-state", numberOfColumnGrid);
                     }                   

                     Toolkit.checkClickDetectedAgainIfHasClassActive = function( $this ) {
                        this.respond = $this.hasClass("active") ? false : true;             
                     };
                     
                     Toolkit.hideShowMoreProgButton = function() {
                        $buttonForShowMostProg.addClass('is-hide');
                     };                      

                     Toolkit.hideProgWhichUnderRecom_prog = function () {
                        $groupedProgWrappers.addClass('is-hide');
                        //$(".grouped_prog.show")
                     }

                     Toolkit.pressNavTabSimulator = function ( $NavTab ) {
                        var $previousPressedTab = $(".nav_all_prog .active");                   
                        $previousPressedTab.removeClass("active");
                            
                            if( $NavTab ) { $NavTab.addClass("active"); }
                     }

                     Toolkit.goCarouselInitStateIfResizeBrowserWidth = function () {
                        
                        $( window ).resize(function() {
                            var dataEqStateOnNavWrapperIs_all_nav_link = $navWrapper.attr("data-eq-state") === "all-nav-link";
                            var newsTabIsNotFirstItemOnCarousel        = $itemOnNav.first().attr("class") !== "news_tab";

                            if ( dataEqStateOnNavWrapperIs_all_nav_link && newsTabIsNotFirstItemOnCarousel) {
                                Toolkit.DataTransporter.fromFirstToLastOnCarousel();
                            }
                                // $( window ).off("resize");
                        });                     
                     };

                     Toolkit.DataTransporter = {

                        fromBottomToTop: function( $clickingTab ) {
                            var classOfClickingTab                  = $clickingTab.attr("class");
                            var $targetLoactionOfGroupedProgContent = $(".upstairsOfrecom_prog#" + classOfClickingTab);
                            var $watchingGroupedProgContent         = $(".grouped_prog." + classOfClickingTab).find(".video_list");                                 
                            $targetLoactionOfGroupedProgContent.append( $watchingGroupedProgContent );
                        },

                        fromTopToBottom : function() {
                            var $loactionS_ofProgContent             = $(".upstairsOfrecom_prog");  
                            var $previousWatchedGroupedProgContent   = $loactionS_ofProgContent.find(".video_list");
                            var $previousWatchedGroupedProgId        = $previousWatchedGroupedProgContent.parent().attr("id");
                            $(".grouped_prog." + $previousWatchedGroupedProgId ).append( $previousWatchedGroupedProgContent );                      
                        },

                        fromFirstToLastOnCarousel : function() {
                            $itemOnNav.first().appendTo( $nav );    
                            firstNavItem = [ Array.prototype.shift.apply($itemOnNav) ]; // trick, see doc for more details
                            Array.prototype.push.apply( $itemOnNav, firstNavItem );             
                        },

                        fromLastToFirstOnCarousel : function() {
                            $itemOnNav.last().prependTo( $nav );
                            lastNavItem = [ Array.prototype.pop.apply($itemOnNav) ];
                            Array.prototype.unshift.apply( $itemOnNav, lastNavItem );
                        }
                     }                  
                

            function TouchDeviceGestureDetector () {
            }
                    TouchDeviceGestureDetector.prototype.bindGesture = function( gestureName ) {
                        $itemOnNav.addSwipeEvents().bind(gestureName, this[gestureName]);
                    };  

                    TouchDeviceGestureDetector.prototype.swiperight = function() {
                        Toolkit.DataTransporter.fromLastToFirstOnCarousel();
                    };

                    TouchDeviceGestureDetector.prototype.swipeleft = function() {
                        Toolkit.DataTransporter.fromFirstToLastOnCarousel();
                    };


            function Responder(){
            }
                    Responder.prototype.showingMoreProg = function() {
                        
                        Toolkit.refreshDataEqStateOnElem();
                        $recommandProgTitleBar.addClass("is-hide");
                        $groupedProgTitleBar.show();
                        $groupedProgWrappers.removeClass("is-hide");
                        Toolkit.pressNavTabSimulator();
                        Toolkit.DataTransporter.fromTopToBottom();
                     };     

                     Responder.prototype.switchCarouselAgent = function( $this ) {

                        var clickRightArrow = $this.hasClass('right-arrow');
                        var firstNavItem;
                        var lastNavItem;

                        if ( clickRightArrow ) {
                            Toolkit.DataTransporter.fromFirstToLastOnCarousel();
                        }
                        else {
                            Toolkit.DataTransporter.fromLastToFirstOnCarousel();
                        }
                     };

                     Responder.prototype.showInitStatusOfThisSite = function() {
                        
                        Toolkit.pressNavTabSimulator();
                        $buttonForShowMostProg.removeClass('is-hide');
                        $recommandProgTitleBar.addClass("is-hide");; 
                        Toolkit.hideProgWhichUnderRecom_prog();
                        Toolkit.DataTransporter.fromTopToBottom();
                     };

                     Responder.prototype.showingSpecificCategoryContnet = function( $this ) {

                        $recommandProgTitleBar.removeClass("is-hide");
                        $groupedProgTitleBar.hide();   
                        // below trick is uesd for above three expressions 
                        // which are executed once only, see doc for more details  
                        this.showingSpecificCategoryContnet = showingSpecificCategoryContnet($this);
                     };

                     function showingSpecificCategoryContnet ( $this ) {
                        var $clickingTab = $this;

                        Toolkit.DataTransporter.fromTopToBottom();                              
                        Toolkit.DataTransporter.fromBottomToTop( $clickingTab );
                        Toolkit.pressNavTabSimulator( $clickingTab );
                        Toolkit.hideProgWhichUnderRecom_prog( $clickingTab );
                        Toolkit.refreshDataEqStateOnElem(); 
                     }

    return { 
                Classes : {
                    Responder:Responder,
                    ClickDetector:ClickDetector,
                    TouchDeviceGestureDetector:TouchDeviceGestureDetector,
                    Toolkit:Toolkit
                },

                Variables : {
                    $arrowButtonOnCarousel : $arrowButtonOnCarousel,
                    $buttonForShowMostProg : $buttonForShowMostProg,
                    $allProgString         : $allProgString,
                    $itemOnNav             : $itemOnNav

                }
            };
    }
};