Benutzer:Hgzh/galleryTemplate.js

// <nowiki>
/* global window: false                                                */
/* jshint bitwise:true, curly:true, eqeqeq:true, latedef:true,
          laxbreak:true,
          nocomma:true, strict:true, undef:true, unused:true           */
( function ( mw, $ ) {
   'use strict';
	
	var GALLERY = {
		classLink: 'dewiki-gallery-link',
		classNav: 'dewiki-gallery-nav',
		classText: 'dewiki-gallery-text',
		classWrapPrefix: 'dewiki-gallery-unit-',
		selectorGallery: 'div.dewiki-gallery',
		selectorUnits: 'div.dewiki-gallery-units figure',
		textNext: '▶',
		textPrev: '◀',
		unitCount: 0
	};
	
	function clickEvent( $gallery, hideUnit, showUnit ) {
		// get element to hide and to show
		var $hideUnit = $gallery.find( '.' + GALLERY.classWrapPrefix + hideUnit );
		var $showUnit = $gallery.find( '.' + GALLERY.classWrapPrefix + showUnit );
		
		// only do something if both units exist to avoid unwanted results
		if ( $hideUnit.length && $showUnit.length ) {
			$hideUnit.hide();
			$showUnit.show();
		}
	}
	
	function createNav( $gallery, $wrapper, unitIndex ) {
		// create texts for navigation
		var texts = [];
		for ( var i = 0; i < 3; i++ ) {
			texts[i] = '(' + ( unitIndex + i ) + '/' + GALLERY.unitCount + ')';
		}
		
		// navigation wrapper element
		var $nav = $( '<div>' )
			.addClass( GALLERY.classNav )
			.prependTo( $wrapper );
		
		// link to previous unit
		if ( unitIndex > 0 ) {
			var $prev = $( '<span>' )
				.addClass( GALLERY.classLink )
				.attr( 'role', 'button' )
				.attr( 'title', texts[0] )
				.text( GALLERY.textPrev )
				.appendTo( $nav )
				.on( 'click', function () {
					clickEvent( $gallery, unitIndex, unitIndex - 1 );
				} );
		}
		
		// current unit without link
		var $curr = $( '<span>' )
				.addClass( GALLERY.classText )
				.text( texts[1] )
				.appendTo( $nav );
		
		// link to next unit
		if ( unitIndex + 1 < GALLERY.unitCount ) {
			var $next = $( '<span>' )
				.addClass( GALLERY.classLink )
				.attr( 'role', 'button' )
				.attr( 'title', texts[2] )
				.text( GALLERY.textNext )
				.appendTo( $nav )
				.on( 'click', function () {
					clickEvent( $gallery, unitIndex, unitIndex + 1 );
				} );
		}
	}
	
	function processUnits( $gallery, $unit, unitIndex ) {
		// create wrapper div of every unit
		var wrapperClass = GALLERY.classWrapPrefix + unitIndex;
		var $wrapper = $( '<div>' )
			.addClass( wrapperClass );
		
		$wrapper.appendTo( $gallery );
		$wrapper.append( $unit );
		
		// create navigation area
		createNav( $gallery, $wrapper, unitIndex );
		
		// only show the first unit initially
		if ( unitIndex > 0 ) {
			$wrapper.hide();
		}
	}
	
	function processGallery( $gallery ) {
		// get units (images) in gallery
		var $units = $gallery.find( GALLERY.selectorUnits );
		
		// if no images in gallery, return
		GALLERY.unitCount = $units.length;
		if ( !GALLERY.unitCount ) {
			return;
		}
		
		$units.each( function ( unitIndex ) {
			processUnits( $gallery, $( this ), unitIndex );	
		});
	}
	
	function init ( $content ) {
		// don't execute in printable version
		if ( document.URL.match( /printable/g ) ) {
			return;
		}
		
		// get galleries on page
		var $galleries = $content.find( GALLERY.selectorGallery );
		
		$galleries.each( function () {
			processGallery( $( this ) );
		});
		
	}
	
	// when content ready
	$( mw.hook( 'wikipage.content' ).add( function ( $content ) {
		init( $content );
	} ) );

}( window.mediaWiki, window.jQuery ) );
// </nowiki>