Jump to content

Please don't skip this 1-minute read. Festipedia is hosted by the FR Heritage Group, a registered charity (No. 1199296). Festipedia is, and always will be, free. But we need your support to keep Festipedia running and to help fund heritage projects. Any donation you can give will be much appreciated, whether it is £2 or £200.

To make a donation, please go to our website, click the Add to Cart button next to General Donation, change the quantity to the amount you want to donate and click the checkout button. Thank you for your support.

MediaWiki:Gadget-mobile-sidebar.js

From Festipedia, hosted by the FR Heritage Group
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Wikipedia:Bypass your cache.
/*  _____________________________________________________________________________
 * |                                                                             |
 * |                    === WARNING: GLOBAL GADGET FILE ===                      |
 * |                  Changes to this page affect many users.                    |
 * | Please discuss changes on the talk page or on [[WT:Gadget]] before editing. |
 * |_____________________________________________________________________________|
 *
 * Copied from [[meta:User:Brion VIBBER/mobile-sidebar.js]] as of last update (2014-10-13, [[meta:Special:Permalink/10185490]])
 * See also https://github.com/brion/MediaWiki-MobileSidebar
 *
 * Mobile sidebar preview gadget
 *
 * Quick hack to show how pages look on mobile
 * while browsing the desktop site.
 *
 * Brion Vibber <bvibber@wikimedia.org>
 * 2014-10-10
 * Cleaned up and enhanced by prtksxna
 * Further cleaned up by Brion :D
 */
$(function () {

	// Old iPhone size, the minimum we usually see
	var width = 320, height = 480;

	// @todo possibly make size selectable from some options...
	// Note that pixel sizes are deceiving on mobile, as there's often a
	// density factor. For instance 480x800 screens at 1.5x would cover
	// only 320x533 or so. And let's not even get into the iPhone 6 Plus!

	function showSidebar() {
		localStorage['mw-mobile-sidebar-state'] = 'show';

		var $content = $('#content');

		var top = $content.position().top,
			page = mw.config.get('wgPageName'),
			src = '/wiki/' + encodeURIComponent(page) + '?useformat=mobile',
			lang = mw.config.get('wgContentLanguage');

		var $container = $('<div>').attr('id', 'mobile-sidebar');

		var $mobileLink = $('<a>')
			.text( 'Mobile' )
			.addClass ( 'mobile_link' )
			.attr( 'href', src )
			.attr( 'target', '_blank')
			.appendTo( $container );

		var $egg = $( '<div>' )
			.addClass( 'egg' )
			.append(
				$( '<img>' ).attr( 'src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Wikimedia-logo.svg/240px-Wikimedia-logo.svg.png' ),
				$( '<p>' ).html( 'If lost please return to <a href="https://meta.wikimedia.org/wiki/User:Brion_VIBBER">Brion Vibber</a>' )
			)
			.appendTo( $container )
			.hide();

		// @todo detect scrollbars and compensate width
		var $frame = $('<iframe>')
			.attr('src', src)
			.css('width', width + 'px')
			.css('height', height + 'px')
			.appendTo($container);

		var $close = $('<a>')
			.html(' &times;')
			.addClass('close')
			.click( hideSidebar )
			.appendTo( $container );

		$container.on( 'dblclick', function () {
			$egg.toggle();
			$mobileLink.toggle();
			$close.toggle();
			$frame.toggle();
		} );

		var frame = $frame[0];
		$frame.on('load',function () {
			// avoid TypeError: null is not an object (evaluating 'frame.contentDocument.querySelector')
			if(!frame.contentDocument) return;
			// Compensate for scrollbars on browsers that add them
			var scrollBarWidth = width - frame.contentDocument.querySelector('body').clientWidth;
			if ( scrollBarWidth > 0 ) {
				$frame.css( 'width', ( width + scrollBarWidth ) + 'px' );
			}
			// Handle link navigation within the mobile preview doc
			$(frame.contentDocument).on('click', 'a', function (e) {
				e.preventDefault();
				if ($(this).attr('href') && $(this).attr('href').indexOf('#') !== 0) {
					window.location = this.href;
				}
			});
		});

        if ( mw.config.get( 'skin' ) === 'vector-2022' && window.innerWidth >= 1800 && document.body.classList.contains( 'vector-feature-limited-width-enabled' ) ) {
           // no need to shift content as Vector 2022 limited content width is enabled and active
        } else {
		    $('#content').css('margin-right', '360px');
        }
		$('#content').after($container);
	}

	function hideSidebar() {
		localStorage['mw-mobile-sidebar-state'] = 'hidden';
		$('#mobile-sidebar').remove();
		$('#content').css('margin-right', '0');
	}

	function toggleState() {
		if (localStorage['mw-mobile-sidebar-state'] !== 'hidden') {
			hideSidebar();
		} else {
			showSidebar();
		}
	}

	if (mw.config.get('wgAction') == 'view') {

		var item = mw.util.addPortletLink( 'p-views', '#', 'Mobile', 'ca-mobile', 'Toggle mobile view sidebar' );
		if ( item ) {
          item.classList.remove( 'vector-tab-noicon' );
          if ( mw.config.get( 'skin' ) === 'vector-2022' ) {
             item.querySelector('a').classList.add( 'cdx-button',
               'cdx-button--fake-button',
               'cdx-button--fake-button--enabled',
               'cdx-button--weight-quiet',
               'cdx-button--icon-only' );
          } else {
            item.classList.add( 'icon' );
          }
          $(item).click( toggleState );
        }
		if (localStorage['mw-mobile-sidebar-state'] == 'hidden') {
			hideSidebar();
		} else {
			showSidebar();
		}
	}
});