MediaWiki:Gadget-mobile-sidebar.js

/* _____________________________________________________________________________ * |                                                                             | * |                    === 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  * 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 = $(' ').attr('id', 'mobile-sidebar');

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

var $egg = $( ' ' ) .addClass( 'egg' ) .append(				$( ' ' ).attr( 'src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Wikimedia-logo.svg/240px-Wikimedia-logo.svg.png' ),				$( ' ' ).html( 'If lost please return to Brion Vibber' )			) .appendTo( $container ) .hide;

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

var $close = $('') .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; }	} });