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 = $('')</p> <p>.attr('src', src)</p> <p>.css('width', width + 'px')</p> <p>.css('height', height + 'px')</p> <p>.appendTo($container);</p> <p>var $close = $('<a>')</p> <p>.html(' ×')</p> <p>.addClass('close')</p> <p>.click( hideSidebar )</p> <p>.appendTo( $container );</p> <p>$container.on( 'dblclick', function () {</p> <p>$egg.toggle();</p> <p>$mobileLink.toggle();</p> <p>$close.toggle();</p> <p>$frame.toggle();</p> <p>} );</p> <p>var frame = $frame[0];</p> <p>$frame.on('load',function () {</p> <p>// avoid TypeError: null is not an object (evaluating 'frame.contentDocument.querySelector')</p> <p>if(!frame.contentDocument) return;</p> <p>// Compensate for scrollbars on browsers that add them</p> <p>var scrollBarWidth = width - frame.contentDocument.querySelector('body').clientWidth;</p> <p>if ( scrollBarWidth > 0 ) {</p> <p>$frame.css( 'width', ( width + scrollBarWidth ) + 'px' );</p> <p>}</p> <p>// Handle link navigation within the mobile preview doc</p> <p>$(frame.contentDocument).on('click', 'a', function (e) {</p> <p>e.preventDefault();</p> <p>if ($(this).attr('href') && $(this).attr('href').indexOf('#') !== 0) {</p> <p>window.location = this.href;</p> <p>}</p> <p>});</p> <p>});</p> <p>if ( mw.config.get( 'skin' ) === 'vector-2022' && window.innerWidth >= 1800 && document.body.classList.contains( 'vector-feature-limited-width-enabled' ) ) {</p> <p>// no need to shift content as Vector 2022 limited content width is enabled and active</p> <p>} else {</p> <p>$('#content').css('margin-right', '360px');</p> <p>}</p> <p>$('#content').after($container);</p> <p>}</p> <p>function hideSidebar() {</p> <p>localStorage['mw-mobile-sidebar-state'] = 'hidden';</p> <p>$('#mobile-sidebar').remove();</p> <p>$('#content').css('margin-right', '0');</p> <p>}</p> <p>function toggleState() {</p> <p>if (localStorage['mw-mobile-sidebar-state'] !== 'hidden') {</p> <p>hideSidebar();</p> <p>} else {</p> <p>showSidebar();</p> <p>}</p> <p>}</p> <p>if (mw.config.get('wgAction') == 'view') {</p> <p>var item = mw.util.addPortletLink( 'p-views', '#', 'Mobile', 'ca-mobile', 'Toggle mobile view sidebar' );</p> <p>if ( item ) {</p> <p>item.classList.remove( 'vector-tab-noicon' );</p> <p>if ( mw.config.get( 'skin' ) === 'vector-2022' ) {</p> <p>item.querySelector('a').classList.add( 'cdx-button',</p> <p>'cdx-button--fake-button',</p> <p>'cdx-button--fake-button--enabled',</p> <p>'cdx-button--weight-quiet',</p> <p>'cdx-button--icon-only' );</p> <p>} else {</p> <p>item.classList.add( 'icon' );</p> <p>}</p> <p>$(item).click( toggleState );</p> <p>}</p> <p>if (localStorage['mw-mobile-sidebar-state'] == 'hidden') {</p> <p>hideSidebar();</p> <p>} else {</p> <p>showSidebar();</p> <p>}</p> <p>}</p> <p>});</p></div></section></div></main> <footer class="site-footer"> <div class="footer-container"> <div class="footer-links"> <a href="/about.php">About</a> <a href="/help.php">Help</a> <a href="/updates.php">Updates</a> <a href="/contact.php">Contact</a> <a href="/privacy.php">Privacy</a> <a href="/terms.php">Terms</a> <a href="https://github.com/yourusername/friendly-wiki" target="_blank" rel="noopener">GitHub</a> </div> <div class="footer-copy"> © 2025 Friendly Wiki. All rights reserved. </div> </div> </footer> <script> const toggle = document.getElementById('mobileMenuToggle'); const menu = document.getElementById('mobileMenu'); toggle.addEventListener('click', () => { menu.classList.toggle('active'); }); </script>  <script> document.addEventListener("DOMContentLoaded", function () { const toggles = document.querySelectorAll('.section-toggle'); toggles.forEach(toggle => { toggle.addEventListener('click', function () { const section = toggle.closest('.collapsible'); const body = section.querySelector('.wiki-body'); body.classList.toggle('collapsed'); }); }); }); </script>