MediaWiki:SectionStyling.js

From Wikicarpedia
Jump to navigation Jump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* 
==========================================
 @meepledrone - Section Styling 
==========================================
*/


var CategoryPool = 
{
  secondEdition: 
  {
    names: [ "Second Edition", "Zweite Edition", "Segunda Edición", "Seconde édition", "Seconda Edizione", "Tweede editie", "Ediția nouă", "Второ издание‏‎", "Druhá edice", "Nová edícia", "A doua ediție", "Third Edition", "Tercera Edición", "Troisième édition", "Třetí edice", "A treia ediție", "20th Anniversary Edition", "Edición 20º Aniversario", "Édition du 20ᵉ anniversaire", "Jubilejní edice 20 let", "Ediția pentru a 20-a aniversare", "Amazonas", "Amazonas/cs", "Over Hill and Dale" ],
    desktopRules: 
    [ 
      'div#mw-content-text > div > h3, div#mw-content-text > div > div > div > h3, div#mw-content-text > div#wikiPreview > div > div > h3, div#mw-content-text > div#wikiPreview > div > div > div > div > h3, .wica-banner { background-image: url("/images/4/46/Section_Separator.jpg"); background-size: auto 36px; padding: 6px !important; margin-top: 18px !important; margin-bottom: 18px !important; filter: contrast(0.8); }',
      '.wica-banner-icon, .wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer, .wica-banner-spacer-subsection { display: none; }' 
    ],
    mobileRules: 
    [
      'div#mw-content-text > div.mw-parser-output > section > h3, div#mw-content-text > div.mw-parser-output > section > div > div > h3, .wica-banner { background-image: url("/images/4/46/Section_Separator.jpg"); background-size: auto 36px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; filter: contrast(0.8); }',
      '.wica-banner-icon { }',
      '.wica-banner-spacer { clear: both; }',
      '.wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer-subsection { display: none; }' 
   ],
    disabled: false
  },

  firstEdition: 
  {
    names: [ "First Edition", "Erste Edition", "Primera Edición", "Première édition", "Prima Edizione", "Eerste editie‏‎", "Ediția veche", "Първо издание", "Hunters And Gatherers", "New World", "První edice", "Pôvodná edícia", "Prima ediție", "Other Rules", "Otras Reglas", "Autres règles", "Lovci a sběrači", "Ostatní pravidla" ],
    desktopRules: 
    [ 
      'div#mw-content-text > div > h3, div#mw-content-text > div#wikiPreview > div > div > h3, .wica-banner { background-image: url("/images/d/dd/Carcassonne_C1_Headline_Strip.jpg"); background-size: auto 36px; padding: 6px !important; margin-top: 18px !important; margin-bottom: 18px !important; filter: brightness(1); }',
      '.wica-banner-icon, .wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer, .wica-banner-spacer-subsection { display: none; }' 
    ],
    mobileRules: 
    [
      'div#mw-content-text > div.mw-parser-output > section > h3, .wica-banner { background-image: url("/images/d/dd/Carcassonne_C1_Headline_Strip.jpg"); background-size: auto 36px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; filter: brightness(1); }',
      '.wica-banner-icon { }',
      '.wica-banner-spacer { clear: both; }',
      '.wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer-subsection { display: none; }' 
   ],
    disabled: false
  },

  winterEdition: 
  {
    names: [ "Winter Edition", "Edición de Invierno", "Édition Hiver", "The Dice Game", "Juego de Dados", "Zimní krajina", "Ediția de iarnă", "Kostková hra" ],
    desktopRules: 
    [ 
      'div#mw-content-text > div > h3, div#mw-content-text > div#wikiPreview > div > div > h3, .wica-banner { background-image: url("/images/b/bd/Winter_Edition_Headline_Strip.png"); background-size: auto 36px; padding: 6px !important; margin-top: 18px !important; margin-bottom: 18px !important; filter: brightness(1); }',
      '.wica-banner-icon, .wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer, .wica-banner-spacer-subsection { display: none; }' 
    ],
    mobileRules: 
    [
      'div#mw-content-text > div.mw-parser-output > section > h3, .wica-banner { background-image: url("/images/b/bd/Winter_Edition_Headline_Strip.png"); background-size: auto 36px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; filter: brightness(1); }',
      '.wica-banner-icon { }',
      '.wica-banner-spacer { clear: both; }',
      '.wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer-subsection { display: none; }' 
   ],
    disabled: false
  },

  safari: 
  {
    names: [ "Safari" ],
    desktopRules: 
    [ 
      'div#mw-content-text > div > h3, div#mw-content-text > div#wikiPreview > div > div > h3, .wica-banner { background-image: url("/images/b/b4/Safari_Headeline_Strip.png"); background-size: auto 36px; padding: 6px !important; margin-top: 18px !important; margin-bottom: 18px !important; filter: brightness(1); }',
      '.wica-banner-icon, .wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer, .wica-banner-spacer-subsection { display: none; }' 
    ],
    mobileRules: 
    [
      'div#mw-content-text > div.mw-parser-output > section > h3, .wica-banner { background-image: url("/images/b/b4/Safari_Headeline_Strip.png"); background-size: auto 36px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; filter: brightness(1); }',
      '.wica-banner-icon { }',
      '.wica-banner-spacer { clear: both; }',
      '.wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer-subsection { display: none; }' 
   ],
    disabled: false
  },

  mists: 
  {
    names: [ "Mists over Carcassonne", "Duchové Carcassonne", "Duchovia Carcassonne", "Ombres et Brouillard", "Ceață peste Carcassonne", "Nieblas sobre Carcassonne" ],
    desktopRules: 
    [ 
      'div#mw-content-text > div > h3, div#mw-content-text > div#wikiPreview > div > div > h3, .wica-banner { background-image: /*url(/*"/images/b/b4/Safari_Headeline_Strip.png")*/ url("/images/b/bd/Winter_Edition_Headline_Strip.png"); background-size: auto 36px; padding: 6px !important; margin-top: 18px !important; margin-bottom: 18px !important; filter: brightness(0.8); }',
      '.wica-banner-icon, .wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer, .wica-banner-spacer-subsection { display: none; }' 
    ],
    mobileRules: 
    [
      'div#mw-content-text > div.mw-parser-output > section > h3, .wica-banner { background-image: /*url(/*"/images/b/b4/Safari_Headeline_Strip.png")*/ url("/images/b/bd/Winter_Edition_Headline_Strip.png"); background-size: auto 36px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; filter: brightness(0.8); }',
      '.wica-banner-icon { }',
      '.wica-banner-spacer { clear: both; }',
      '.wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer-subsection { display: none; }' 
   ],
    disabled: false
  },
 
  cardcassonne: 
  {
    names: [ "Cardcassonne", "Cartcassonne", "Cartecassonne" ],
    desktopRules: 
    [ 
      'div#mw-content-text > div > h3, div#mw-content-text > div#wikiPreview > div > div > h3, .wica-banner { background-image: url("/images/2/20/Cardcassonne_Headline_Strip1.png"); background-size: auto 51px; padding: 6px !important; margin-top: 18px !important; margin-bottom: 18px !important; filter: brightness(1); }',
      'div#mw-content-text > div > h4, div#mw-content-text > div#wikiPreview > div > div > h4, .wica-banner-2 { background-image: url("/images/2/20/Cardcassonne_Headline_Strip1.png"); background-size: auto 51px; padding: 1px !important; margin-top: 18px !important; margin-bottom: 18px !important; filter: brightness(1); width: 300px; }',
      'div#mw-content-text > div > h4 > span.mw-headline, div#mw-content-text > div#wikiPreview > div > div > h4 > span.mw-headline { background: #ffffff; margin-left: 3em; padding: 10px 3px !important; margin-top: 18px !important; margin-bottom: 18px !important; }',
      'div#mw-content-text > div > h5, div#mw-content-text > div#wikiPreview > div > div > h5, .wica-banner-3 { background-image: url("/images/6/63/Cardcassonne_Headline_Strip2.png"); background-size: auto 36px; padding: 1px !important; margin-top: 18px !important; margin-bottom: 18px !important; filter: brightness(1); }',
      '.wica-banner-icon, .wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer, .wica-banner-spacer-subsection { display: none; }' 
    ],
    mobileRules: 
    [
      'div#mw-content-text > div.mw-parser-output > section > h3, .wica-banner { background-image: url("/images/2/20/Cardcassonne_Headline_Strip1.png"); background-size: auto 51px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; filter: brightness(1); }',
      'div#mw-content-text > div.mw-parser-output > section > h4, .wica-banner-2 { background-image: url("/images/2/20/Cardcassonne_Headline_Strip1.png"); background-size: auto 51px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; filter: brightness(1); width: 30; }',
      'div#mw-content-text > div.mw-parser-output > section > h4 > span.mw-headline { background: #ffffff; margin-left: 3em; padding: 10px 3px !important; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; filter: brightness(1); }',
      'div#mw-content-text > div.mw-parser-output > section > h5, .wica-banner-3 { background-image: url("/images/2/20/Cardcassonne_Headline_Strip2.png"); background-size: auto 51px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; filter: brightness(1); }',
      '.wica-banner-icon { }',
      '.wica-banner-spacer { clear: both; }',
      '.wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer-subsection { display: none; }' 
   ],
    disabled: false
  },
 
  discovery: 
  {
    names: [ "Discovery", "Objevitelé" ],
    desktopRules: 
    [ 
      'div#mw-content-text > div > h3, div#mw-content-text > div#wikiPreview > div > div > h3, .wica-banner { background-image: url("/images/0/05/Discovery_Headline_Strip.png"); background-size: auto 36px; padding: 6px !important; margin-top: 18px !important; margin-bottom: 18px !important; filter: brightness(1); }',
      '.wica-banner-icon, .wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer, .wica-banner-spacer-subsection { display: none; }' 
    ],
    mobileRules: 
    [
      'div#mw-content-text > div.mw-parser-output > section > h3, .wica-banner { background-image: url("/images/0/05/Discovery_Headline_Strip.png"); background-size: auto 36px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; filter: brightness(1); }',
      '.wica-banner-icon { }',
      '.wica-banner-spacer { clear: both; }',
      '.wica-banner-icon-subsection  { position: relative; top: -70px; margin-right: 10px; }',
      '.wica-banner-spacer-subsection { display: none; }' 
   ],
    disabled: false
  },

};



// If any category listed in arrPageCategories matches an entry in CategoryPool, 
// applies the styling according to the current view: desktop or mobile
//
function doStylingByCategory( arrPageCategories )
{
  var bFound = false;

  const strPageName = mw.config.get( 'wgPageName' );
  const oRegExpLanguageSuffix = /\/([a-z][a-z])$/;
  const oResult = oRegExpLanguageSuffix.exec( strPageName );
  const strLanguageSuffix = ( oResult ? oResult[1] : null );

  console.log( "Page Name: " + strPageName );
  console.log( "Language Suffix: " + strLanguageSuffix );

  var arrTrimmedPageCategories = [];

  if ( strLanguageSuffix )
  {
    var oRegExpCategory = new RegExp( " " + strLanguageSuffix + "$" );
 
    var nPageCategories = arrPageCategories.length;
    for ( var i = 0; i < nPageCategories; i++ )
    {
      var strPageCategory = arrPageCategories[ i ];
      var tmpStr = strPageCategory;

      strPageCategory = strPageCategory.replace ( oRegExpCategory, "" );

      console.log( "Trimming Language: " + tmpStr + " ==> " + strPageCategory );

      arrTrimmedPageCategories.push( strPageCategory );
    } 
  }
  else
  {
    // No trimming needed
    arrTrimmedPageCategories = arrPageCategories;
  }

  // Traverse CategoryPool skipping disabled entries...
  //
  for ( var strKey in CategoryPool )
  {
    var oCategory = CategoryPool[ strKey ];
    
    if ( oCategory.disabled ) continue;

    // Traverses the category names in one entry...
    //
    var arrCategoryNames = oCategory.names;
    var nCategoryNames = arrCategoryNames.length;
    for ( var k = 0; k < nCategoryNames; k++ )
    {
      var strCategoryName = arrCategoryNames[ k ];

      // ...and checks if there is a match with the page category list 
      console.log( "Category Tested:" + strCategoryName );

      //var bFound = false;
      var nPageCategories = arrTrimmedPageCategories.length;
      for ( var i = 0; i < nPageCategories; i++ )
      {
        var strPageCategory = arrTrimmedPageCategories[ i ];

        if ( strCategoryName == strPageCategory )
        {
          bFound = true;
          break;
        }
      }

      // If found a match, injects the associated rules and exits the main loop
      //
      if ( bFound )
      {
        var strMobileSkin = mw.config.get( 'skin' );
        console.log( "Default Skin:" + strMobileSkin );

        var arrRules = ( strMobileSkin == "vector" ? oCategory.desktopRules : oCategory.mobileRules );
        var nRules = arrRules.length;
        for ( j = 0; j < nRules; j++ )
        {
          var strRule = arrRules[ j ];
          mw.util.addCSS( strRule );
        }

        break;
      }
    } 

    if ( bFound ) break;   
  }  
}


/*
   === Loading categories asynchronously ===
*/

/*
// Auxiliary function for debugging
//
function dumpObject( strName, o )
{
  for ( var strKey in o )
  {
    console.log( strName + "[" + strKey + "] = [" + o[strKey] + "]"  );
  }
}
*/

// Removes the "Category:" prefix if present. 
//   If strCategory is "Category:ABC", returns "ABC"; otherwise, strCategory unchanged 
//
function stripPrefix ( strCategory )
{
  var strRes = strCategory;
  var arrRes = strRes.split(":");

  if ( ( arrRes.length == 2 ) && ( arrRes[0] === "Category" ) )
  {
    strRes = arrRes[1];
  }

  return strRes;
}

// Processes the response from mw.API.get() to produce an array with category names
//
function getCategories( oData, wgArticleId ) 
{
  var arrResult = [];

  var oPage = oData.query.pages[ wgArticleId ];
 
  if ( oPage.categories ) 
  {
    oPage.categories.map( 
      function ( oCategory ) { arrResult.push( stripPrefix( oCategory.title ) ); } 
    );
 
    // Works as expected.
    console.log( "Category:" + arrResult );
  }

  return arrResult;
}


// Load categories using mw.API and executes callback 
//
function loadCategories( fCallback )
{
  var wgArticleId = mw.config.get( 'wgArticleId' );

  console.log( "ArticleId:" + wgArticleId );

  var parameters = {
      action: 'query',
      pageids: wgArticleId,
      prop: 'categories',
      clprop: 'hidden',
      cllimit: 500
  };

  mw.loader.using( [ 'mediawiki.api' ],
    function() { 
      new mw.Api().get( parameters ).done( 
        function( oData ) { 
          var arrPageCategories = getCategories( oData, wgArticleId ); 
          fCallback( arrPageCategories );
        } 
      ); 
    }
  );
}


function doInitStylingByCategory()
{
  var arrPageCategories = mw.config.get('wgCategories');
  console.log( "Content Categories:" + arrPageCategories );

  // Check if the categories list is available
  //
  if ( arrPageCategories == null )
  {
    // If not available, load the category list using mw.API and then apply styling
    loadCategories( doStylingByCategory );
  }
  else
  {
    // If available, apply styling directly
    doStylingByCategory( arrPageCategories );
  }
}

doInitStylingByCategory();