From 81586572ab0f7331b4a6990394e24fef8b238968 Mon Sep 17 00:00:00 2001 From: Santhosh Thottingal Date: Wed, 24 Jul 2013 17:52:59 +0530 Subject: [PATCH] Lazy initialization of language settings and ULS from interface triggers 1. For interlanguage position, initialize language settings on first click on cog 2. For personal toolbar position, initialie ULS on first click of ULS trigger Change-Id: Icda498f676d1d3ddaefad75fd9212150f6966666 --- resources/js/ext.uls.interface.js | 125 +++++++++++++++++------------- 1 file changed, 69 insertions(+), 56 deletions(-) diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js index 51b1f47e..0f64385e 100644 --- a/resources/js/ext.uls.interface.js +++ b/resources/js/ext.uls.interface.js @@ -270,10 +270,8 @@ $( document ).ready( function () { mw.uls.init( function () { - var $ulsSettingsTrigger, - $triggers, + var $triggers, $pLang, - ulsOptions, $ulsTrigger = $( '.uls-trigger' ), rtlPage = $( 'body' ).hasClass( 'rtl' ), anonMode = ( mw.user.isAnon() && @@ -281,16 +279,17 @@ ulsPosition = mw.config.get( 'wgULSPosition' ); if ( ulsPosition === 'interlanguage' ) { + // TODO: Refactor this block // The interlanguage links section $pLang = $( '#p-lang' ); // Add an element near the interlanguage links header - $ulsSettingsTrigger = $( '' ) + $ulsTrigger = $( '' ) .addClass( 'uls-settings-trigger' ) .attr( 'title', $.i18n( 'ext-uls-language-settings-title' ) ); // Append ULS cog to languages section, but make sure it is visible. - $pLang.show().prepend( $ulsSettingsTrigger ); + $pLang.show().prepend( $ulsTrigger ); // Take care of any other elements with this class. - $ulsSettingsTrigger = $( '.uls-settings-trigger' ); + $ulsTrigger = $( '.uls-settings-trigger' ); // Remove the dummy link, which was added to make sure that the section appears $pLang.find( '.uls-p-lang-dummy' ).remove(); @@ -305,68 +304,82 @@ $pLang.find( 'div.pBody' ).remove(); } } - } - // ULS options that are common to all modes of showing - ulsOptions = { - onReady: function () { - if ( $.fn.languagesettings ) { - addDisplaySettings( this ); - addInputSettings( this ); - } - }, - onSelect: function ( language ) { - mw.uls.changeLanguage( language ); - }, - languages: mw.config.get( 'wgULSLanguages' ), - searchAPI: mw.util.wikiScript( 'api' ) + '?action=languagesearch', - quickList: function () { - return mw.uls.getFrequentLanguageList(); - } - }; - - if ( ulsPosition === 'interlanguage' ) { - $ulsSettingsTrigger.attr( { + $ulsTrigger.attr( { title: $.i18n( 'ext-uls-select-language-settings-icon-tooltip' ) } ); + $ulsTrigger.on( 'click', function ( e ) { + var languagesettings = $ulsTrigger.data( 'languagesettings' ), + langaugeSettingsOptions; - $ulsSettingsTrigger.languagesettings( { - defaultModule: 'display', - onVisible: function () { - var topRowHeight, caretHeight, caretWidth, - $caretBefore = $( '' ).addClass( 'caret-before' ), - $caretAfter = $( '' ).addClass( 'caret-after' ), - ulsTriggerWidth = this.$element.width(), - ulsTriggerOffset = this.$element.offset(); + if ( !languagesettings ) { + langaugeSettingsOptions = { + defaultModule: 'display', + onVisible: function () { + var topRowHeight, caretHeight, caretWidth, + $caretBefore = $( '' ).addClass( 'caret-before' ), + $caretAfter = $( '' ).addClass( 'caret-after' ), + ulsTriggerWidth = this.$element.width(), + ulsTriggerOffset = this.$element.offset(); - // Add the callout caret triangle - // pointing to the trigger icon - this.$window.addClass( 'callout' ); - this.$window.prepend( $caretBefore, $caretAfter ); + // Add the callout caret triangle + // pointing to the trigger icon + this.$window.addClass( 'callout' ); + this.$window.prepend( $caretBefore, $caretAfter ); - // Calculate the positioning of the panel - // according to the position of the trigger icon - if ( rtlPage ) { - caretWidth = parseInt( $caretBefore.css( 'border-left-width' ), 10 ); - this.left = ulsTriggerOffset.left - this.$window.width() - caretWidth; - } else { - caretWidth = parseInt( $caretBefore.css( 'border-right-width' ), 10 ); - this.left = ulsTriggerOffset.left + ulsTriggerWidth + caretWidth; - } + // Calculate the positioning of the panel + // according to the position of the trigger icon + if ( rtlPage ) { + caretWidth = parseInt( $caretBefore.css( 'border-left-width' ), 10 ); + this.left = ulsTriggerOffset.left - this.$window.width() - caretWidth; + } else { + caretWidth = parseInt( $caretBefore.css( 'border-right-width' ), 10 ); + this.left = ulsTriggerOffset.left + ulsTriggerWidth + caretWidth; + } - topRowHeight = this.$window.find( '.row' ).height(); - caretHeight = parseInt( $caretBefore.css( 'top' ), 10 ); - this.top = ulsTriggerOffset.top - topRowHeight - caretHeight / 2; + topRowHeight = this.$window.find( '.row' ).height(); + caretHeight = parseInt( $caretBefore.css( 'top' ), 10 ); + this.top = ulsTriggerOffset.top - topRowHeight - caretHeight / 2; - this.position(); + this.position(); + } + }; + $ulsTrigger.languagesettings( langaugeSettingsOptions ).click(); + e.stopPropagation(); } } ); } else if ( anonMode ) { - $ulsTrigger.languagesettings(); - } else { - $ulsTrigger.uls( ulsOptions ); - } + $ulsTrigger.on( 'click', function ( e ) { + var languagesettings = $ulsTrigger.data( 'languagesettings' ); + if ( !languagesettings ) { + $ulsTrigger.languagesettings().click(); + e.stopPropagation(); + } + } ); + } else { + $ulsTrigger.on( 'click', function ( e ) { + var uls = $ulsTrigger.data( 'uls' ), + ulsOptions; + + if ( !uls ) { + // ULS options that are common to all modes of showing + ulsOptions = { + onReady: function () { + if ( $.fn.languagesettings ) { + addDisplaySettings( this ); + addInputSettings( this ); + } + }, + onSelect: function ( language ) { + mw.uls.changeLanguage( language ); + } + }; + $ulsTrigger.uls( ulsOptions ).click(); + e.stopPropagation(); + } + } ); + } // At this point we don't care which kind of trigger it is $triggers = $( '.uls-settings-trigger, .uls-trigger' ); addAccessibilityFeatures( $triggers );