/*  _____________________________________________________________________________ * |                                                                             | * |                    === 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 seevarwidth=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!functionshowSidebar(){localStorage['mw-mobile-sidebar-state']='show';var$content=$('#content');vartop=$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 widthvar$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();});varframe=$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 themvarscrollBarWidth=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);}functionhideSidebar(){localStorage['mw-mobile-sidebar-state']='hidden';$('#mobile-sidebar').remove();$('#content').css('margin-right','0');}functiontoggleState(){if(localStorage['mw-mobile-sidebar-state']!=='hidden'){hideSidebar();}else{showSidebar();}}if(mw.config.get('wgAction')=='view'){varitem=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();}}});