From 03546744ba8bb35ec7cf727f1ccf44dc43ce0172 Mon Sep 17 00:00:00 2001 From: "Amir E. Aharoni" Date: Thu, 25 Apr 2013 17:04:23 +0300 Subject: [PATCH] Changes to show the display settings in the sidebar * Add a caret for the ULS in the sidebar. * Adjust the panel's position. * Immediately show the Display settings instead of the language list. Also added documentation. Change-Id: I6635092e9e020cb1f5b51f437abde4e81c31ae48 --- resources/css/ext.uls.css | 18 ++++++ resources/js/ext.uls.displaysettings.js | 12 +++- resources/js/ext.uls.interface.js | 82 ++++++++++++++++++------ resources/js/ext.uls.languagesettings.js | 2 +- 4 files changed, 90 insertions(+), 24 deletions(-) diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css index fba7185f..5e0bd336 100644 --- a/resources/css/ext.uls.css +++ b/resources/css/ext.uls.css @@ -52,6 +52,24 @@ x:-o-prefocus, body.rtl li#pt-uls { cursor: pointer; } +.uls-menu .caret-before { + border-top: 20px solid transparent; + border-right: 20px solid #AAA; + border-bottom: 20px solid transparent; + display: inline-block; + left: -21px; + position: absolute; +} + +.uls-menu .caret-after { + border-top: 20px solid transparent; + border-right: 20px solid #FCFCFC; + border-bottom: 20px solid transparent; + display: inline-block; + left: -20px; + position: absolute; +} + #settings-block div.display-settings-block, #settings-block div.input-settings-block { display: inline-block; diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js index d81391f6..fcb00626 100644 --- a/resources/js/ext.uls.displaysettings.js +++ b/resources/js/ext.uls.displaysettings.js @@ -465,7 +465,10 @@ displaySettings.$template.find( 'button.uls-display-settings-cancel' ).on( 'click', function () { mw.webfonts.preferences.setFont( displaySettings.contentLanguage, oldFont ); - displaySettings.$webfonts.refresh(); + + if ( displaySettings.$webfonts ) { + displaySettings.$webfonts.refresh(); + } displaySettings.$template.find( 'div.uls-ui-languages button.button' ).each( function () { var $button = $( this ); @@ -578,8 +581,11 @@ */ onSave: function ( success ) { if ( success ) { - // Live font update - this.$webfonts.refresh(); + if ( this.$webfonts !== undefined ) { + // Live font update + this.$webfonts.refresh(); + } + this.$parent.hide(); // we delay change UI language to here, because it causes a page refresh if ( this.uiLanguage !== this.getUILanguage() ) { diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js index 6b071db9..b6851446 100644 --- a/resources/js/ext.uls.interface.js +++ b/resources/js/ext.uls.interface.js @@ -22,12 +22,13 @@ $( document ).ready( function () { var $ulsTrigger, $pLang, - uls, ulsOptions, + ulsOptions, previousLanguages, previousLang, + rtlPage = $( 'body' ).hasClass( 'rtl' ), ulsPosition = mw.config.get( 'wgULSPosition' ), tipsyGravity = { personal: 'n', - interlanguage: $( 'body' ).hasClass( 'rtl' ) ? 'e' : 'w' + interlanguage: rtlPage ? 'e' : 'w' }, currentLang = mw.config.get( 'wgUserLanguage' ); @@ -78,21 +79,23 @@ } function addDisplaySettings( uls ) { - var $displaySettings, position; + var $displaySettings = displaySettings(), + displaySettingsOptions = { + defaultModule: 'display' + }; - $displaySettings = displaySettings(); - uls.$menu.find( '#settings-block' ).append( $displaySettings ); - position = uls.position(); - - $displaySettings.languagesettings( { - defaultModule: 'display', - onClose: function () { + // If the ULS trigger is shown in the top personal menu, + // closing the display settings must show the main ULS + // languages list + if ( ulsPosition === 'personal' ) { + displaySettingsOptions.onClose = function () { uls.show(); - }, - top: position.top, - left: position.left - } ); + }; + } + $.extend( displaySettingsOptions, uls.position() ); + uls.$menu.find( '#settings-block' ).append( $displaySettings ); + $displaySettings.languagesettings( displaySettingsOptions ); $displaySettings.on( 'click', function () { uls.hide(); } ); @@ -119,6 +122,7 @@ } ); } + // ULS options that are common to all modes of showing ulsOptions = { onReady: function () { if ( $.fn.languagesettings ) { @@ -142,21 +146,45 @@ // This is a hook that runs in the ULS scope ulsOptions.onVisible = function () { var scrollPosition, + $currentMenu, + ulsHeight, ulsTop, ulsBottom, + $languageSettingsTrigger = this.$menu.find( '#display-settings-block' ), padding = 10, $window = $( window ), windowHeight = $window.height(), windowScrollTop = $window.scrollTop(), windowBottom = windowScrollTop + windowHeight, - ulsHeight = this.$menu.height(), - ulsTop = this.$menu.offset().top, - ulsBottom = ulsTop + ulsHeight; + ulsTriggerOffset = this.$element.offset(); + // Reposition the element - + // the sidebar elements may have changed + this.top = ulsTriggerOffset.top - 45; + this.left = rtlPage ? + ulsTriggerOffset.left - 22 - this.$menu.width() : + ulsTriggerOffset.left + 50; + this.$menu.css( this.position() ); + + // Show the Display settings panel: + // We are using the ULS trigger in the sidebar, + // so we don't want to switch the language, but + // to change the settings. + $languageSettingsTrigger.click(); + + $currentMenu = $( '.uls-menu:visible' ); + $currentMenu.css( this.position() ); + ulsHeight = $currentMenu.height(); + ulsTop = $currentMenu.offset().top; + ulsBottom = ulsTop + ulsHeight; + + // If the ULS panel is out of the viewport, + // scroll the window to show it if ( ( ulsTop < windowScrollTop ) || ( ulsBottom > windowBottom ) ) { if ( ulsHeight > windowHeight ) { // Scroll to show as much of the upper - // side of ULS as possible + // part of ULS as possible scrollPosition = ulsTop - padding; } else { + // Scroll just enough to show the ULS panel scrollPosition = ulsBottom - windowHeight + padding; } @@ -164,12 +192,26 @@ scrollTop: scrollPosition }, 500 ); } + + // Set the position of the caret according to the height + // of the top row of the menu + $currentMenu.find( '.caret-before, .caret-after' ).css( 'top', + $currentMenu.find( '.row' ).height() + ); + }; } $ulsTrigger.uls( ulsOptions ); - uls = $ulsTrigger.data( 'uls' ); + if ( ulsPosition === 'interlanguage' ) { + $( '.uls-menu' ).each( function () { + $( this ).prepend( + $( '' ).addClass( 'caret-before' ), + $( '' ).addClass( 'caret-after' ) + ); + } ); + } if ( previousLang === currentLang ) { // Do not show tooltip nor update language list @@ -244,7 +286,7 @@ // manually show the tooltip $ulsTrigger.on( 'mouseover', function () { // show only if the ULS panel is not shown - if ( !uls.shown ) { + if ( !$ulsTrigger.data( 'uls' ).shown ) { showTipsy( 3000 ); } } ); diff --git a/resources/js/ext.uls.languagesettings.js b/resources/js/ext.uls.languagesettings.js index 4cc1c50c..c8fba26e 100644 --- a/resources/js/ext.uls.languagesettings.js +++ b/resources/js/ext.uls.languagesettings.js @@ -67,7 +67,7 @@ // Register all event listeners to the ULS language settings here. langSettings.$element.on( 'click', $.proxy( langSettings.show, langSettings ) ); langSettings.$window.find( '#languagesettings-close' ) - .on( 'click', $.proxy( langSettings.hide, langSettings ) ); + .on( 'click', $.proxy( langSettings.close, langSettings ) ); },