MediaWiki:Common.js: Difference between revisions

From Caves of Qud Wiki
Jump to navigation Jump to search
m (adjust visibility of secondary image in qud-toggler)
(Add image carousel toggling code)
Line 47: Line 47:
// Powers an infobox template (Template:Infobox_image_and_gif) that
// Powers an infobox template (Template:Infobox_image_and_gif) that
// allows users to swap from a static image to preview an animated gif
// allows users to swap from a static image to preview an animated gif
// Also supports "image carousel"-type behavior with multiple images/gifs.


var qudInfoboxImageToggler = qudInfoboxImageToggler || {
var qudInfoboxImageToggler = qudInfoboxImageToggler || {
   initialize: function () {
   initialize: function () {
     $(".qud-toggler > .qud-toggler-initial").show();
     $('.qud-toggler > .qud-toggler-initial').show();
     $(".qud-toggler > .qud-toggler-button").show();
     $('.qud-toggler > .qud-toggler-button').show();
     $(".qud-toggler > .qud-toggler-final").hide();
     $('.qud-toggler > .qud-toggler-final').hide();
     $(".qud-toggler > .qud-toggler-button").click(function () {
     $('.qud-toggler > .qud-toggler-button').click(function () {
       window.qudInfoboxImageToggler.toggle();
       window.qudInfoboxImageToggler.toggle();
     });
     });
     $(".qud-html-details .qud-html-summary").click(function () {
     $('.qud-html-details .qud-html-summary').click(function () {
       window.qudInfoboxImageToggler.summaryClick();
       window.qudInfoboxImageToggler.summaryClick();
     });
     });
   },
   },
   toggle: function () {
   toggle: function () {
     $(".qud-toggler > .qud-toggler-initial").hide();
     $('.qud-toggler > .qud-toggler-initial').hide();
     $(".qud-toggler > .qud-toggler-button").hide();
     $('.qud-toggler > .qud-toggler-button').hide();
     $(".qud-toggler > .qud-toggler-final").show();
     $('.qud-toggler > .qud-toggler-final').show();
   },
   },
   summaryClick: function () {
   summaryClick: function () {
     $(".qud-html-details .qud-html-summary").toggleClass(
     $('.qud-html-details .qud-html-summary').toggleClass(
       "qud-html-summary-open"
       'qud-html-summary-open'
     );
     );
    if ( $('.qud-toggler > .qud-toggler-final > img').css('visibility') == 'hidden' )
      $('.qud-toggler > .qud-toggler-final > img').css('visibility','visible');
    else
      $('.qud-toggler > .qud-toggler-final > img').css('visibility','hidden');
   }
   }
};
};
Line 79: Line 76:


$(document).ready(qudInfoboxImageToggler.initialize);
$(document).ready(qudInfoboxImageToggler.initialize);
var qudCarouselGearbox = qudCarouselGearbox || {
  initialize: function () {
    $('.qud-sprite-carousel > .qud-carousel-item').each(function (idx, elem) {
      $(elem).addClass('qud-carousel-item-number-' + idx);
      if ($(elem).is(':visible')) {
        window.qudCarouselGearbox.currentIndex = idx;
      }
    });
    $('.qud-sprite-carousel .qud-carousel-btn-left').click(function () {
      window.qudCarouselGearbox.removeHighlight();
      window.qudCarouselGearbox.rotate(-1);
    });
    $('.qud-sprite-carousel .qud-carousel-btn-right').click(function () {
      window.qudCarouselGearbox.removeHighlight();
      window.qudCarouselGearbox.rotate(1);
    });
    $('.infobox-title').append('<div class="qud-carousel-title"></div>');
  },
  rotate: function (amount) {
    items = $('.qud-sprite-carousel > .qud-carousel-item');
    $(items).each(function (idx, elem) {
      $(elem).hide();
    });
    window.qudCarouselGearbox.currentIndex += amount;
    end = $(items).length - 1;
    if (window.qudCarouselGearbox.currentIndex < 0) {
      window.qudCarouselGearbox.currentIndex = end;
    } else if (window.qudCarouselGearbox.currentIndex > end) {
      window.qudCarouselGearbox.currentIndex = 0;
    }
    curItem = $(
      '.qud-sprite-carousel > .qud-carousel-item-number-' +
        window.qudCarouselGearbox.currentIndex
    );
    curItem.show();
    /* expand infobox title to also show image label */
    carouselTitle = $('.qud-carousel-title');
    carouselTitle.text(curItem.data('label'));
    carouselTitle.animate({ height: '25px' });
  },
  removeHighlight: function () {
    /* prevents weird highlight selection behavior if buttons are double-clicked */
    if (window.getSelection) window.getSelection().removeAllRanges();
    else if (document.selection) document.selection.empty();
  }
};
window.qudCarouselGearbox = qudCarouselGearbox;
$(document).ready(qudCarouselGearbox.initialize);
/****************************************
/****************************************
/* End Qud infobox image-to-gif swapper *
/* End Qud infobox image-to-gif swapper *
/****************************************/
/****************************************/

Revision as of 18:44, 25 October 2020

/* improved gadgets-definition page */
$(function() {
    if (mw.config.get('wgPageName') != 'MediaWiki:Gadgets-definition') return;
    var urlPrefix = mw.config.get('wgServer') + '/MediaWiki:Gadget-';
    function replaceWithLink(str) {
        var link = document.createElement('a');
        $(link).attr('href', urlPrefix + str);
        $(link).html(str);
        return link.outerHTML;
    }
    $('#mw-content-text li').each(function() {
        var html = $(this).html();
        var htmlParts = html.split('|');
        for (i in htmlParts) {
            if (htmlParts[i].endsWith('css') || htmlParts[i].endsWith('js')) {
                htmlParts[i] = replaceWithLink(htmlParts[i]);
            }
        }
        var text = htmlParts.join('|');
        var firstPart = text.match(/^([^\|\[]*)/)[0];
        if (firstPart) text = text.replace(firstPart, replaceWithLink(firstPart));
        $(this).html(text);
    });
    $('#mw-content-text h2 .mw-headline').each(function() {
        $(this).html(replaceWithLink('section-' + $(this).html()));
    });
});

/**
 * Pause MCUI templates (e.g. [[Template:Crafting Table]]) on mouseover
 *
 * This is so people have a chance to look at each image on the cell
 * and click on pages they want to view.
 */
$( '#mw-content-text' ).on( 'mouseenter mouseleave', '.mcui', function( e ) {
	$( this ).find( '.animated' ).toggleClass( 'animated-paused', e.type === 'mouseenter' );
} );

/************************************
/* Qud infobox image-to-gif swapper *
/************************************/
// Author:  egocarib
// Date:    2020-Oct
// License: CC-BY 3.0

// Designed for use in infoboxes on the Caves of Qud wiki.
// Powers an infobox template (Template:Infobox_image_and_gif) that
// allows users to swap from a static image to preview an animated gif
// Also supports "image carousel"-type behavior with multiple images/gifs.

var qudInfoboxImageToggler = qudInfoboxImageToggler || {
  initialize: function () {
    $('.qud-toggler > .qud-toggler-initial').show();
    $('.qud-toggler > .qud-toggler-button').show();
    $('.qud-toggler > .qud-toggler-final').hide();
    $('.qud-toggler > .qud-toggler-button').click(function () {
      window.qudInfoboxImageToggler.toggle();
    });
    $('.qud-html-details .qud-html-summary').click(function () {
      window.qudInfoboxImageToggler.summaryClick();
    });
  },
  toggle: function () {
    $('.qud-toggler > .qud-toggler-initial').hide();
    $('.qud-toggler > .qud-toggler-button').hide();
    $('.qud-toggler > .qud-toggler-final').show();
  },
  summaryClick: function () {
    $('.qud-html-details .qud-html-summary').toggleClass(
      'qud-html-summary-open'
    );
  }
};

window.qudInfoboxImageToggler = qudInfoboxImageToggler;

$(document).ready(qudInfoboxImageToggler.initialize);

var qudCarouselGearbox = qudCarouselGearbox || {
  initialize: function () {
    $('.qud-sprite-carousel > .qud-carousel-item').each(function (idx, elem) {
      $(elem).addClass('qud-carousel-item-number-' + idx);
      if ($(elem).is(':visible')) {
        window.qudCarouselGearbox.currentIndex = idx;
      }
    });
    $('.qud-sprite-carousel .qud-carousel-btn-left').click(function () {
      window.qudCarouselGearbox.removeHighlight();
      window.qudCarouselGearbox.rotate(-1);
    });
    $('.qud-sprite-carousel .qud-carousel-btn-right').click(function () {
      window.qudCarouselGearbox.removeHighlight();
      window.qudCarouselGearbox.rotate(1);
    });
    $('.infobox-title').append('<div class="qud-carousel-title"></div>');
  },
  rotate: function (amount) {
    items = $('.qud-sprite-carousel > .qud-carousel-item');
    $(items).each(function (idx, elem) {
      $(elem).hide();
    });
    window.qudCarouselGearbox.currentIndex += amount;
    end = $(items).length - 1;
    if (window.qudCarouselGearbox.currentIndex < 0) {
      window.qudCarouselGearbox.currentIndex = end;
    } else if (window.qudCarouselGearbox.currentIndex > end) {
      window.qudCarouselGearbox.currentIndex = 0;
    }
    curItem = $(
      '.qud-sprite-carousel > .qud-carousel-item-number-' +
        window.qudCarouselGearbox.currentIndex
    );
    curItem.show();
    /* expand infobox title to also show image label */
    carouselTitle = $('.qud-carousel-title');
    carouselTitle.text(curItem.data('label'));
    carouselTitle.animate({ height: '25px' });
  },
  removeHighlight: function () {
    /* prevents weird highlight selection behavior if buttons are double-clicked */
    if (window.getSelection) window.getSelection().removeAllRanges();
    else if (document.selection) document.selection.empty();
  }
};

window.qudCarouselGearbox = qudCarouselGearbox;

$(document).ready(qudCarouselGearbox.initialize);
/****************************************
/* End Qud infobox image-to-gif swapper *
/****************************************/