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

// 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  * 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 = $(' ').attr('id', 'mobile-sidebar'); // added for monobook $container.css('z-index', 12);

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