MediaWiki:SectionStyling.js

/* 
==========================================
 @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", "Peste munți și peste văi", "Amazonas/ro", "Vânători și culegători", "Vânători și culegători: a doua ediție", "Hunters And Gatherers", "Hunters And Gatherers/ro" ],
    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 Classic", "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", "Alte reguli", "Vânători și culegători: prima ediție", "New World/ro" ],
    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", "Ediția de iarnă: prima ediție", "Ediția de iarnă: a doua ediție", "Ediția de iarnă: a treia ediție", "Jocul de zaruri", "South Seas", "Mările Sudului", "Le jeu de dés", "The Dice Game/ro" ],
    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", "Safari/ro" ],
    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", "Cardcassonne/ro" ],
    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é", "Ținut nou" ],
    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
  },

  starWars: 
  {
    names: [ "Star Wars", "Star Wars/ro" ],
    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/5/56/Star_Wars_Headline_Strip.png"); background-size: auto 36px; padding: 6px !important; margin-top: 18px !important; margin-bottom: 18px !important; color: white; }',
      '.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/5/56/Star_Wars_Headline_Strip.png"); background-size: auto 36px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; color: white; }',
      '.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
  },

  redBanner: 
  {
    names: [ "Ark of the Covenant", "Zamek", "My First Carcassonne", "Chivotul legământului", "Zamek/ro", "My First Carcassonne/ro", "Carcassonne Junior: prima ediție", "Carcassonne Junior: a doua ediție" ],
    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/a/ae/Red_Headline_Strip.png"); background-size: auto 36px; padding: 6px !important; margin-top: 18px !important; margin-bottom: 18px !important; color: white; }',
      '.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/a/ae/Red_Headline_Strip.png"); background-size: auto 36px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; color: white; }',
      '.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
  },

  orangeBanner: 
  {
    names: [ "The Castle", "The City", "Castelul", "Orașul" ],
    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/7/7e/Orange_Headline_Strip.png"); background-size: auto 36px; padding: 6px !important; margin-top: 18px !important; margin-bottom: 18px !important; color: white; }',
      '.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/7/7e/Orange_Headline_Strip.png"); background-size: auto 36px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; color: white; }',
      '.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
  },

  goldRushBanner: 
  {
    names: [ "Gold Rush", "Goana după aur" ],
    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/c/cd/Gold_Rush_Headline_Strip.png"); background-size: auto 36px; padding: 6px !important; margin-top: 18px !important; margin-bottom: 18px !important; color: #fff678; }',
      '.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/c/cd/Gold_Rush_Headline_Strip.png"); background-size: auto 36px; padding-left: 0.5em !important; margin-top: 15px !important; margin-bottom: 15px !important; color: #fff678; }',
      '.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();