User:小躍/mobile-sidebar.js

注意：保存之后，你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari：按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。
/*翻譯自Meta的用戶Brion VIBBER所做出的腳本：mobile-sidebar.js*/
if (mw.config.get('wgNamespaceNumber')!==-1){
importStylesheet('User:小躍/mobile-sidebar.css');
$(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( wgULS('维基百科行动版','維基百科行動版') )
			.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('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') {
		$toggle = $( '<li><span><a></a></span></li>' )
			.attr( 'id', 'ca-mobile' )
			.attr( 'class', 'icon' );
		$toggle.find( 'a' )
			.attr( 'title', wgULS('切换行动浏览版','切換行動瀏覽版') )
			.text( 'Mobile' )
			.click( toggleState );
		$( '#p-views ul' ).append( $toggle );

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