User:קיפודנחש/mobile-sidebarcopy.js

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:Bypass your cache.

// copied from https://meta.wikimedia.org/w/index.php?title=User:Brion_VIBBER/mobile-sidebar.js
// trying to see if a simple fix will make it work with skins other than vector.
// modifications to original: add a line to load the css from VIBBER's page. replace $('#content') with mw.util.$content in several places.



/*
 * 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 () {
	// this line added to accomodate the fact it's not a gadget.
	mw.loader.load('//meta.wikimedia.org/w/index.php?title=User:Brion_VIBBER/mobile-sidebar.css&action=raw&ctype=text/css', 'text/css');
	
	// trying to accomodate for rtl
	var rtl = $( 'body' ).is( '.rtl' );
	var contentMargin = rtl ? 'margin-left' : 'margin-right';
	// 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 = mw.util.$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');
		
		// added for monobook
		$container.css('z-index', 12);

		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 () {
			// 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').indexOf('#') !== 0) {
					window.location = this.href;
				}
			});
		});

		$content.css(contentMargin, '360px');
		$content.after($container);
	}

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

	function toggleState() {
		if (localStorage['mw-mobile-sidebar-state'] !== 'hidden') {
			hideSidebar();
		} else {
			showSidebar();
		}
	}
	
	if (mw.config.get('wgAction') == 'view') {
		mw.loader.using( 'mediawiki.util' ).done( function() {
			$toggle = $( '<li><span><a></a></span></li>' )
				.attr( 'id', 'ca-mobile' )
				.attr( 'class', 'icon' );
			var toggleLink = mw.config.get( 'skin' ) === 'vector'
				? $toggle
					.appendTo( '#p-views ul' )
					.find( 'a' )
					.attr( 'title', 'Toggle mobile view sidebar' )
					.text( 'Mobile' )
				: $( mw.util.addPortletLink( 'p-cactions', '#', 'Mobile', 'ca-mobile', 'Toggle mobile view sidebar' ) );
	
			toggleLink.click( toggleState );
	
			if (localStorage['mw-mobile-sidebar-state'] == 'hidden') {
				hideSidebar();
			} else {
				showSidebar();
			}
		});
	}
});