jenkins-bot has submitted this change and it was merged.
Change subject: Simplify the language settings display
......................................................................
Simplify the language settings display
Directly show language settings instead of showing ULS language selector
and then simulating click on language settings
Change-Id: Iafb15ac9a7140fcce9e71ed933be6c55be81dc7e
---
M resources/css/ext.uls.css
M resources/js/ext.uls.displaysettings.js
M resources/js/ext.uls.inputsettings.js
M resources/js/ext.uls.interface.js
M resources/js/ext.uls.languagesettings.js
5 files changed, 72 insertions(+), 110 deletions(-)
Approvals:
Amire80: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css
index 9237f73..c9c334d 100644
--- a/resources/css/ext.uls.css
+++ b/resources/css/ext.uls.css
@@ -7,7 +7,7 @@
padding-left: 30px;
}
-#p-lang .uls-trigger {
+#p-lang .uls-settings-trigger {
/* @embed */
background: transparent url('../images/cog-sprite.png') right top
no-repeat;
background-image: -webkit-linear-gradient(transparent, transparent),
url('../images/cog-sprite.svg');
@@ -16,16 +16,17 @@
background-size: 14px auto;
border-radius: 0 0 5px 5px;
height: 14px;
+ width: 14px;
float: right;
cursor: pointer;
}
-.skin-vector #p-lang .uls-trigger {
+.skin-vector #p-lang .uls-settings-trigger {
/* Put it in the middle of the first row of the section title */
margin-top: 4px;
}
-#p-lang .uls-trigger:hover {
+#p-lang .uls-settings-trigger:hover {
background-position: right -18px;
}
@@ -63,6 +64,7 @@
border-bottom: 20px solid transparent;
display: inline-block;
left: -21px;
+ top: 30px;
position: absolute;
}
@@ -72,6 +74,7 @@
border-bottom: 20px solid transparent;
display: inline-block;
left: -20px;
+ top: 30px;
position: absolute;
}
diff --git a/resources/js/ext.uls.displaysettings.js
b/resources/js/ext.uls.displaysettings.js
index fc14207..049c3f7 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -299,15 +299,13 @@
},
onVisible: function () {
var $parent = $(
'#language-settings-dialog' );
-
// Re-position the element according to
the window that called it
- this.top = $parent.css( 'top' );
- this.left = $parent.css( 'left' );
- this.$menu.css( this.position() );
-
- this.$menu.find( '.caret-before,
.caret-after' ).css( 'top',
- this.$menu.find( '.row'
).height()
- );
+ if ( parseInt( $parent.css( 'left' ),
10 ) ) {
+ this.$menu.css( 'left',
$parent.css( 'left' ) );
+ }
+ if ( parseInt( $parent.css( 'top' ), 10
) ) {
+ this.$menu.css( 'top',
$parent.css( 'top' ) );
+ }
},
onSelect: function ( langCode ) {
displaySettings.enableApplyButton();
diff --git a/resources/js/ext.uls.inputsettings.js
b/resources/js/ext.uls.inputsettings.js
index 0feb16b..4684554 100644
--- a/resources/js/ext.uls.inputsettings.js
+++ b/resources/js/ext.uls.inputsettings.js
@@ -320,15 +320,13 @@
},
onVisible: function () {
var $parent = $(
'#language-settings-dialog' );
-
// Re-position the element according to
the window that called it
- this.top = $parent.css( 'top' );
- this.left = $parent.css( 'left' );
- this.$menu.css( this.position() );
-
- this.$menu.find( '.caret-before,
.caret-after' ).css( 'top',
- this.$menu.find( '.row'
).height()
- );
+ if ( parseInt( $parent.css( 'left' ),
10 ) ) {
+ this.$menu.css( 'left',
$parent.css( 'left' ) );
+ }
+ if ( parseInt( $parent.css( 'top' ), 10
) ) {
+ this.$menu.css( 'top',
$parent.css( 'top' ) );
+ }
},
onSelect: function ( langCode ) {
inputSettings.enableApplyButton();
diff --git a/resources/js/ext.uls.interface.js
b/resources/js/ext.uls.interface.js
index 4cc8562..2bb3b8b 100644
--- a/resources/js/ext.uls.interface.js
+++ b/resources/js/ext.uls.interface.js
@@ -21,7 +21,9 @@
'use strict';
$( document ).ready( function () {
- var $ulsTrigger, $pLang,
+ var $ulsTrigger,
+ $ulsSettingsTrigger,
+ $pLang,
ulsOptions,
previousLanguages, previousLang,
anonMode,
@@ -40,10 +42,10 @@
// The interlanguage links section
$pLang = $( '#p-lang' );
// Add an element near the interlanguage links header
- $pLang.prepend( $( '<span>' )
- .addClass( 'uls-trigger' )
- .attr( 'title', $.i18n(
'ext-uls-language-settings-title' ) )
- );
+ $ulsSettingsTrigger = $( '<span>' )
+ .addClass( 'uls-settings-trigger' )
+ .attr( 'title', $.i18n(
'ext-uls-language-settings-title' ) );
+ $pLang.prepend( $ulsSettingsTrigger );
// Remove the dummy link that was added to make sure
that the section appears
$pLang.find( '.uls-p-lang-dummy' ).remove();
@@ -159,82 +161,26 @@
};
if ( ulsPosition === 'interlanguage' ) {
- $ulsTrigger.attr( 'title', $.i18n(
'ext-uls-select-language-settings-icon-tooltip' ) );
-
- // This is a hook that runs in the ULS scope
- ulsOptions.onVisible = function () {
- var scrollPosition,
- $currentMenu,
- ulsHeight, ulsTop, ulsBottom,
- correctedPosition,
- $languageSettingsTrigger =
this.$menu.find( '#display-settings-block' ),
- padding = 10,
- $window = $( window ),
- windowHeight = $window.height(),
- windowScrollTop = $window.scrollTop(),
- windowBottom = windowScrollTop +
windowHeight,
- 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;
-
- correctedPosition = this.position();
- this.$menu.css( correctedPosition );
-
- // 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( correctedPosition );
- 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
- // part of ULS as possible
- scrollPosition = ulsTop -
padding;
- } else {
- // Scroll just enough to show
the ULS panel
- scrollPosition = ulsBottom -
windowHeight + padding;
- }
-
- $( 'html, body' ).stop().animate( {
- scrollTop: scrollPosition
- }, 500 );
+ $ulsSettingsTrigger.attr( 'title', $.i18n(
'ext-uls-select-language-settings-icon-tooltip' ) );
+ $ulsSettingsTrigger.languagesettings( {
+ onVisible: function () {
+ var ulsTriggerOffset =
$ulsSettingsTrigger.offset();
+ this.left = rtlPage ?
ulsTriggerOffset.left - 30
+ :ulsTriggerOffset.left + 30;
+ this.top = ulsTriggerOffset.top - 50;
+ this.position();
}
-
- // 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()
- );
- };
- } else if ( anonMode ) {
- ulsOptions.onVisible = function () {
- this.$menu.find( '#display-settings-block'
).click();
- };
- }
-
- $ulsTrigger.uls( ulsOptions );
-
- if ( ulsPosition === 'interlanguage' ) {
+ } );
$( '.uls-menu' ).each( function () {
$( this ).prepend(
$( '<span>' ).addClass( 'caret-before'
),
$( '<span>' ).addClass( 'caret-after' )
);
} );
+ } else if ( anonMode ) {
+ $ulsTrigger.languagesettings();
+ } else {
+ $ulsTrigger.uls( ulsOptions );
}
if ( previousLang === currentLang ) {
diff --git a/resources/js/ext.uls.languagesettings.js
b/resources/js/ext.uls.languagesettings.js
index 489196b..7aced3f 100644
--- a/resources/js/ext.uls.languagesettings.js
+++ b/resources/js/ext.uls.languagesettings.js
@@ -157,28 +157,44 @@
}
},
- show: function () {
- if ( !this.initialized ) {
- var top, pos, left;
-
- this.render();
- this.initialized = true;
- pos = $.extend( {}, this.$element.offset(), {
+ position: function () {
+ var top, pos, left;
+ pos = $.extend( {}, this.$element.offset(), {
height: this.$element[0].offsetHeight
} );
- top = this.top || pos.top + pos.height;
- left = this.left || '25%';
- // FIXME this is not exactly correct. position
may not
- // be relative to the trigger.
- this.$window.css( {
- top: top,
- left: left
- } );
- }
+ top = this.top || pos.top + pos.height;
+ left = this.left || '25%';
+ // FIXME this is not exactly correct. position may not
+ // be relative to the trigger.
+ this.$window.css( {
+ top: top,
+ left: left
+ } );
+ },
+ show: function () {
+ if ( !this.initialized ) {
+ this.render();
+ this.initialized = true;
+ }
this.$window.i18n();
this.shown = true;
this.$window.show();
+ this.position();
+ this.visible();
+ },
+
+ /**
+ * A "hook" that runs after the ULS panel becomes visible
+ * by using the show method.
+ *
+ * To use it, pass a function as the onVisible parameter
+ * in the options when initializing ULS.
+ */
+ visible: function () {
+ if ( this.options.onVisible ) {
+ this.options.onVisible.call( this );
+ }
},
/**
@@ -230,7 +246,8 @@
defaultModule: false, // Name of the default module
onClose: null, // An onClose event handler.
top: null, // Top position of this window
- left: null // Left position of this window
+ left: null, // Left position of this window
+ onVisible: null // A callback that runs after the ULS panel
becomes visible
};
$.fn.languagesettings.Constructor = LanguageSettings;
--
To view, visit https://gerrit.wikimedia.org/r/63840
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Iafb15ac9a7140fcce9e71ed933be6c55be81dc7e
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/UniversalLanguageSelector
Gerrit-Branch: master
Gerrit-Owner: Santhosh <[email protected]>
Gerrit-Reviewer: Amire80 <[email protected]>
Gerrit-Reviewer: Nikerabbit <[email protected]>
Gerrit-Reviewer: Santhosh <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
