User:Lexar/Main Page/Template:Benjas/Page.js

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

var ResponsiveJS = {
	populateAccount:function(accountList){
		$('#mw-head #p-personal > ul > li').each(function(){
			var th = $(this);
			accountList.append('<li><span>' + th.html() + '</span></li>');
		});
		
		$('#mw-head #p-personal > ul > li').each(function(){
			var th = $(this);
			accountList.append('<li><span>' + th.html() + '</span></li>');
		});
	},
	populatePage:function(pageList){
		$('#left-navigation ul li').each(function(){
			var th = $(this);
			pageList.append('<li'+(th.hasClass('selected')?' class="selected"':'')+'>'+th.html()+'</li>');
		});
		$($('#right-navigation #p-cactions .menu ul li').get().reverse()).each(function(){
			var th = $(this);
			pageList.append('<li class="f-right'+(th.hasClass('selected')?' selected':'')+'">'+th.html()+'</li>');
		});
		$($('#right-navigation #p-views ul li').get().reverse()).each(function(){
			var th = $(this);
			pageList.append('<li class="f-right'+(th.hasClass('selected')?' selected':'')+'">'+th.html()+'</li>');
		});	
	},
	populateNav:function(mainMenu){
		$('#mw-panel .portal:not(#p-Languages)').each(function(){
			var th = $(this), listBuilder = '';
			th.find('div ul li').each(function(){
				var thi = $(this);
				listBuilder += '<li>'+thi.html()+'</li>';
			});
			mainMenu.append('<li>\
			<h3><span>'+th.children('h3').text()+' <img src="/w/images/d/d9/User_Lexar_black-arrow.png" /></span></h3>\
			<ul>\
			'+listBuilder+'\
			<li class="clearing"></li>\
			</ul>\
			<div class="clearing"></div>\
			</li>');
		});
	},
	classRemoval:function(classRemovals) {
		classRemovals.each(function(){
			$(this).removeClass('down out gone open');
		});
	},
	objectShow:function() {
		objectShowIt.each(function(){
			$(this).delay(400).show(0);
		});
	},
	menuButtonClick:function(mainMenu,classRemovals,objectShowIt) {
		$(this).toggleClass('active');
		mainMenu.toggleClass('down');
		
		mainMenu.find('ul').removeClass('open');
		mainMenu.find('li h3').removeClass('down');
		
		ResponsiveJS.classRemoval(classRemovals);
		ResponsiveJS.objectShow(objectShowIt);
	},
	openSearch:function(sOBJ,classRemovals,objectShowIt){
		sOBJ[0].toggleClass('out');
		sOBJ[1].find('#simpleSearch').css('width',((sOBJ[1].width()*65)/100)+'px');
		sOBJ[2].toggleClass('out');
		
		ResponsiveJS.classRemoval(classRemovals);
		if(objectShowIt[0].hasClass('gone')) {
			objectShowIt.each(function(){$(this).hide()});
		}
		else {
			ResponsiveJS.objectShow(objectShowIt);
		}		
	},
	openPage:function(sOBJ,classRemoval,objectShowIt) {
		sOBJ[0].toggleClass('down');
		sOBJ[1].toggleClass('down');
		
		ResponsiveJS.classRemoval(classRemovals);
		ResponsiveJS.objectShow(objectShowIt);
	},
	openAccount:function(sOBJ,classRemoval,objectShowIt) {
		sOBJ[0].toggleClass('down');
		sOBJ[1].toggleClass('down');
		
		ResponsiveJS.classRemoval(classRemovals);
		ResponsiveJS.objectShow(objectShowIt);
	},
	menu:function(){
		var mobileMenu = $(this), mobileMenuButton = mobileMenu.find('.mobile-menu-button'), pageMenu = mobileMenu.find('#page-menu'),
		accountMenu = mobileMenu.find('#account-menu'), accountList = mobileMenu.find('#account-list'), pageList = mobileMenu.find('#tab-menu'),
		menuSearch = mobileMenu.find('#p-search'), openSearch = mobileMenu.find('#search-expand'), mainMenu = mobileMenu.find('#mobile-ul-main');
		
		ResponsiveJS.populateAccount(accountList);
		ResponsiveJS.populatePage(pageList);
		$('#right-navigation #p-search #searchform').clone().appendTo(menuSearch);
		ResponsiveJS.populateNav(mainMenu);
		
		mobileMenuButton.click(function(){
			ResponsiveJS.menuButtonClick(
				mainMenu,
				[pageMenu,pageList,accountMenu,accountList,menuSearch,openSearch,pageMenu,accountMenu],
				[pageMenu,accountMenu]
			);
		});
		
		$(document).on('click',$('#mobile-ul-main li h3'),function(){
			$('#mobile-ul-main ul').removeClass('open');
			$('#mobile-ul-main li h3').removeClass('down');
			$(this).toggleClass('down').next('ul').addClass('open');
		});
		openSearch.click(function(){
			ResponsiveJS.openSearch(
				[menuSearch,mobileMenu,$(this)],
				[pageMenu,pageList,accountMenu,accountList,mainMenu,mainMenu.find('ul'),mobileMenuButton,mainMenu.find('h3')],
				[pageMenu,accountMenu]
			);
		});
		pageMenu.click(function(){
			ResponsiveJS.openPage(
				[pageList,$(this)],
				[accountMenu,accountList,mainMenu,mainMenu.find('ul'),mobileMenuButton,mainMenu.find('li h3')],
				[accountMenu]
			);
		});
		accountMenu.click(function(){
			ResponsiveJS.openAccount(
				[pageList,$(this)],
				[pageMenu,pageList,mainMenu,mainMenu.find('ul'),mobileMenuButton,mainMenu.find('li h3')],
				[pageMenu]
			);
		});
	},
	init:function() {
		$('head').prepend('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>');
		$('#mw-content-text').addClass('main-area');
		$('#right-navigation ul li').addClass('collapsible');
		$('#mobile-menu').each(ResponsiveJS.menu);
	}
};
$(ResponsiveJS.init);