Created
October 31, 2018 13:37
-
-
Save hereiscasio/a467b9b6a4e61692cbfb1d824e65ff97 to your computer and use it in GitHub Desktop.
jQuery OOP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// __ __ __ | |
// |__) | | |\ | /\ |__) |__) | |
// | \ \__/ | \| /~~\ | | | |
$(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 | |
} | |
}; | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment