User:CKoerner (WMF)/WMF-Common.js
Appearance
Note: After publishing, 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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
$( 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 );
}
});