User:CKoerner (WMF)/WMF-Common.js

$( function(){

	// ---------- Remove title ------------
	if( $( "#remove-page-title" ).length ){
		$( "#firstHeading" ).remove();		
	}
	

	// WMF Search bar (https://collab.wikimedia.org/wiki/Template:WMF_Navbar)
	var _wmfNavbarSearchBox = $("<input>").attr("type", "search").attr("placeholder", "Search Foundation");
	var _wmfNavbarSearchIcon = $("<div>").addClass("wmf-navbar-body-row1-search-icon");
	$("#wmf-navbar-body-row1-search").append( _wmfNavbarSearchBox, _wmfNavbarSearchIcon );
	
	var _wmfNavbarSearchHandle = function(){
		var _wmfNavbarSearchParams = {
			'go': 'Try+exact+match',
			'search': _wmfNavbarSearchBox.val(),
			'searchfilter': 'hastemplate:WMF_Navbar',
			'ns0': '1',
			'ns12': '1',
			'ns200': '1',
			'ns202': '1'
		};
		
		window.location.href = mw.config.get("wgServer") + mw.config.get("wgArticlePath").replace('$1', "Special:Search") + "?" + $.param(_wmfNavbarSearchParams);
	};

	_wmfNavbarSearchBox.on( "keypress", function (e) {
		if (e.which == 13) {
			_wmfNavbarSearchHandle();
		}
	});
	
	_wmfNavbarSearchIcon.on( "click", function (e) {
		_wmfNavbarSearchHandle();
	});
	
	

	// ---------- WMF Navbar's language -------
	var _tempDataLange = {
		"en": "English",
		"fr": "Français",
		"de": "Deutsch"
	},
	_tempDataLangeKeys = Object.keys( _tempDataLange );
	
	for(i=0; i < _tempDataLangeKeys.length; i++){
		var _tempAnchorEelement = $("<a>").attr("href", "#").text( _tempDataLange[ _tempDataLangeKeys[i] ]);
		
		if( _tempDataLangeKeys[i] === "en" ){
			_tempAnchorEelement.addClass("active");
		}
		$("#wmf-navbar-header-sidebar-languages-options").append( _tempAnchorEelement );
	}
	
	// -------- Navigation panal -------------------
	var currentPageName = mw.config.get('wgPageName');
	var uselinkRef = $(".wmf-navbar-uselink");

	var wmfNavbarPages = {
		"navbar-row-about-wmf": [ 
			"Office_of_CEO", "Advancement", "Communications", "Finance_and_Administration", "Legal", "Product",
			"Talent_and_Culture", "Technology"
		],
		"navbar-row-movement-resources": [ "Grants", "Affiliates", "Projects_and_Collaborations", "Capacity_Development" ],
		"navbar-row-news-and-events": [ "Diff_Movement_Blog", "Wikimedia_Foundation_News", "Movement_Calendar" ]
	};
	
	var wmfHasAnyNavShown = false;
	// Showing secondry nav panal based on current page
	if( currentPageName === "Wikimedia_Foundation" ){
		$( "#navbar-row-about-wmf").show();
		wmfHasAnyNavShown = true;
	}else if( currentPageName === "Movement_Resources" ){
		$( "#navbar-row-movement-resources").show();
		wmfHasAnyNavShown = true;
	} else if( currentPageName === "News_and_Events" ){
		$( "#navbar-row-news-and-events").show();
		wmfHasAnyNavShown = true;
	}

	// Marking tab as active based on current page
	Object.keys( wmfNavbarPages ).forEach( function( key ){
	    wmfNavbarPages[key].forEach( function( pageName){
	    	var extraRefPageName = null;
 
	    	if( uselinkRef.length ) {
	    		extraRefPageName = uselinkRef.children().eq(1).attr("title");
	    	}

	    	if( (extraRefPageName == pageName) || (currentPageName === pageName) ){
	    		$( "#" +  key).show();
	    		wmfHasAnyNavShown = true;

				// Marking an li as active in first row
	    		if( key === "navbar-row-about-wmf" ){
	    			$( $(".wmf-navbar-body-row1-links > ul").children()[0] ).addClass("wmf-navbar-body-active-link");
	    		} else if( key === "navbar-row-movement-resources" ){
	    			$( $(".wmf-navbar-body-row1-links > ul").children()[1] ).addClass("wmf-navbar-body-active-link");
	    		} else if( key === "navbar-row-news-and-events" ){
	    			$( $(".wmf-navbar-body-row1-links > ul").children()[2] ).addClass("wmf-navbar-body-active-link");
	    		}
	    		
	    		// Marking an li as active in second row
	    		$( "#" +  key).find("a").each( function( i, ele ) {
	    			if( $(ele).attr("title") ==  extraRefPageName ){
				    	$(ele).parent().addClass( "wmf-navbar-body-active-link" );
	    			}
				});
	    	}
	    });
	});
	
	// If no secordary navigation shown then show first one
	if( wmfHasAnyNavShown === false ){
		$( "#navbar-row-about-wmf").show();
	}
	
	// Misc
	_wmfNavItemSelfLink = $(".wmf-navbar-body-row1, .wmf-navbar-body-row2, .wmf-navbar-body-row3").find(".selflink");
	_wmfNavItemSelfLink.css("padding-bottom", "5px").css("border-bottom", "none");
	_wmfNavItemSelfLink.parent().css( "padding-bottom", "13px").css("border-bottom", "3px #3a25ff solid");
	// If there is not element for secondary nav. Example: News and Event tab
	if( $(".wmf-navbar-body-row2").find("div").not(":hidden").children().length === 0 ){
		$(".wmf-navbar-body-row2").css("border-bottom", "none");
	}
	
	
	// https://collab.wikimedia.org/wiki/Template:WMF_Collapsible_Box
	$(".wmf-collapsible-box-button").click( function(){
		var _that = this;
	    var wmfCollapsibleBoxTarget = $(this).parent().next();
	    wmfCollapsibleBoxTarget.slideToggle('fast', function() {
	    	$(_that).toggleClass('wmf-collapsible-box-active');
	    	$(this).toggleClass('wmf-collapsible-box-other-show');
	    });
	});
	
	// https://collab.wikimedia.org/wiki/Template:WMF_Slider_2
	if( $(".wmf-slider-container").length ){

		$(".wmf-slider-container").each( function( i, el) {
			var cardItems = $(el).find('.wmf-slider-card');
			cardItems.hide();

			var cardItemsLength = cardItems.length;
			var cardItemsWidth = cardItems.outerWidth(true);
			
			var getSliderItemsWidth = function() {
			  return $(el).find('.wmf-slider-items').outerWidth();
			};
			
			var _paginationIndex = 0;
			var visiableItems = [];
			var sliderNextArrow = $(el).find('.wmf-slider-next');
			var sliderPrevArrow = $(el).find('.wmf-slider-prev');
			var sliderPagination = $(el).find('.wmf-slider-pagination');
			
			var sliderArrowAndPagination = function(){
				// Making next arrow active
				if( _paginationIndex < (visiableItems.length - 1) ){
					sliderNextArrow.addClass('wmf-slider-next-active');
				} 
				
				// Making both arrow inactive
				if ( _paginationIndex === (visiableItems.length-1) ) {
					sliderNextArrow.removeClass('wmf-slider-next-active');
					sliderPrevArrow.removeClass('wmf-slider-prev-active');
				}
	
				// Making previous arrow inactive
				if (_paginationIndex === 0) {
					sliderPrevArrow.removeClass('wmf-slider-prev-active');
				}
	
				// Making previous arrow active
				if( _paginationIndex > 0 ){
					sliderPrevArrow.addClass('wmf-slider-prev-active');
				}
				
				if( visiableItems.length > 1 ){
					// Making dots for paginations
					sliderPagination.empty();
					for( var _y = 0; _y < visiableItems.length; _y++){
						var _temp_ratio_btn = $("<input/>").attr('type', 'ratio').attr('disabled', 'true').addClass('wmf-slider-pagination-dot');
	
						if( $.client.profile().name === "safari" ){
							_temp_ratio_btn.css("width", "12px");
						}

						sliderPagination.append(_temp_ratio_btn);
					}
					
					// Marking a dot as active
					sliderPagination.children().eq(_paginationIndex).css('background-color', '#202122');
				} else {
					sliderPagination.remove();
				}
			};
			
			var sliderBootstraping = function() {
			  $('.wmf-collapsible-box-other').show();
			  sliderItemsWidth = getSliderItemsWidth();
			  $('.wmf-collapsible-box-other').hide();

			  visiableItemLength = Math.floor( sliderItemsWidth/cardItemsWidth );
	
			  visiableItems.length = 0;
			  for (var _i = 0; _i < cardItemsLength; _i += visiableItemLength) {
			    visiableItems.push(cardItems.slice(_i, _i + visiableItemLength));
			  }
				
			  cardItems.hide();
			  _paginationIndex = 0;
			  try{
				visiableItems[_paginationIndex].show();
			  } catch(err) {
			  	console.log("Does not show elements");
			  }
			  sliderArrowAndPagination();
			};
			sliderBootstraping();
	
			// Handling JavaScript event
			$(window).on('resize', sliderBootstraping);

			sliderNextArrow.click( function(){
				if( _paginationIndex < visiableItems.length-1 ){
					_paginationIndex = _paginationIndex + 1;
	
					// Hide previous items and show new items
					cardItems.hide();
					visiableItems[_paginationIndex].show();
				}
				sliderArrowAndPagination();
			});
			
			sliderPrevArrow.click( function(){
				if( _paginationIndex > 0 ){
					_paginationIndex = _paginationIndex - 1;
	
					// Hide previous items and show new items
					cardItems.hide();
					visiableItems[_paginationIndex].show();
				}
				sliderArrowAndPagination();
			});
			
		} );
	}
	
	// https://collab.wikimedia.org/wiki/Template:WMF_AskUs
	if( $(".wmf-askus-container").length ){
		var wmfAskUsTextbox = $("<textarea>").attr("placeholder", "Write in your question here");
		$(".wmf-askus-left-textbox").append(wmfAskUsTextbox);
		
		var wmfAskUsEmail = $("<input>").attr("type", "email").attr("placeholder", "Email address");
		var wmfAskUsBtn = $("<input>").attr("type", "button").val("Submit");
		$(".wmf-askus-left-email-and-submit").append(wmfAskUsEmail, wmfAskUsBtn);
		
		wmfAskUsBtn.on("click", function(e) {
			e.preventDefault();
			console.log( wmfAskUsTextbox.text() );
			console.log( wmfAskUsEmail.text() );
		});
	}
	
	// https://collab.wikimedia.org/wiki/Template:WMF_ContactUs
	if( $(".wmf-contactus-container").length ){
		var wmfContactTextbox = $("<textarea>").attr("placeholder", "Write in your question here");
		$(".wmf-contactus-textbox").append(wmfContactTextbox);
		
		var wmfContactEmail = $("<input>").attr("type", "email").attr("placeholder", "Email address");
		var wmfContactBtn = $("<input>").attr("type", "button").val("Submit");
		$(".wmf-contactus-email-and-submit").append(wmfContactEmail, wmfContactBtn);
		
		wmfContactBtn.on("click", function(e) {
			e.preventDefault();
			console.log( wmfContactTextbox.text() );
			console.log( wmfContactEmail.text() );
		});
	}
	
	// Check if we have http://localhost/metawiki/index.php/Template:WMF_Navbar, then
	// manage the overlapping of the nav items and making them responsive
	if( $("#wmf-navbar-header").length ){
		var _navRow2LinksContainer = $(".wmf-navbar-body-row2-links[style*='display:']");
		var _navRow3LinksContainer = $(".wmf-navbar-body-row3-links");
		
		// At the starting of the page load
		var _navOverlappedItems = _navRow2LinksContainer.find("ul").children().filter(function() {
		  return ($(this).position().left + $(this).width() ) >= _navRow2LinksContainer.width();
		});
		
		_navRow3LinksContainer.find("ul").prepend( _navOverlappedItems );
		if( _navRow3LinksContainer.find("ul").children().length ) {
			$(".wmf-navbar-body-row3").show();
		} else {
			$(".wmf-navbar-body-row3").hide();
		}

		var manageNavItemsOverlapOnResizing = function(){
			var _navRow2ElementsList = _navRow2LinksContainer.find("ul");
			var _navRow2LastElement = _navRow2ElementsList.children().last();

			var _navRow3ElementsList = _navRow3LinksContainer.find("ul");
			var _navRow3FirstElement = _navRow3ElementsList.children().first();
			

			if( _navRow2LinksContainer.width() < (_navRow2LastElement.position().left + _navRow2LastElement.width()) ) {
				_navRow3ElementsList.prepend( _navRow2LastElement );
			}
			else if(
				_navRow3ElementsList.children().length &&
				( (_navRow2LastElement.position().left + _navRow2LastElement.width() ) + _navRow3FirstElement.width()) < _navRow2LinksContainer.width()
			) {
				_navRow2ElementsList.append( _navRow3FirstElement );
			}
			
			
			if( _navRow3ElementsList.children().length ) {
				$(".wmf-navbar-body-row3").show();
			} else {
				$(".wmf-navbar-body-row3").hide();
			}
		};
		
		// Run on resizing the window
		$(window).resize( manageNavItemsOverlapOnResizing );
	}
	
	$(".wmf-feature-content-left img").each( function( ele, i ) {
	    $(this).css("height", $(this).parent().parent().parent().attr("data-height") );
	});
	
	// Misc - Section heading's title font max issue
	if( $("#wmf-section-header").length ){
		var sectionTitleMaxFont = function(){
			var _sectionHeading = $("#wmf-section-header-left h1");
			if( parseInt(_sectionHeading.css( "font-size")) > 40){
				_sectionHeading.css( "font-size", "40px");
			}
		};

		sectionTitleMaxFont();
		$(window).resize( sectionTitleMaxFont );
	}

});