bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display Settings - ULS - Display settings navigation

Browse Source 
Change-Id: I9d16cbac8f0f897378f769b0b98e48441503fe1a
This commit is contained in:
Santhosh Thottingal
2012-08-17 18:27:35 +05:30
committed by Amir E. Aharoni
parent f3ffe8bead
commit d67771fa01
4 changed files with 77 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
resources/js/ext.uls.displaysettings.js
View File

@@ -68,7 +68,6 @@
this.$parent.$settingsPanel.empty();
this.$webfonts = $( 'body' ).data( 'webfonts' );
this.$parent.$settingsPanel.append( this.$template );
$( 'select.uls-font-select' ).val( );
this.prepareLanguages();
this.prepareFonts();
this.prepareWebfontsCheckbox();
@@ -83,19 +82,23 @@
if ( enable === undefined ) {
enable = true;
}
$( '#webfonts-enable-checkbox' ).prop( 'checked', enable );
this.$template.find( '#webfonts-enable-checkbox' ).prop( 'checked', enable );
},
/**
* Prepare the UI language selector
*/
prepareLanguages: function () {
var $languages = $( 'div.uls-ui-languages' );
var $languages = this.$template.find( 'div.uls-ui-languages' );
$languages.empty();
var previousLanguages = this.previousLanguages();
var languages = [this.language];
$.merge( languages, previousLanguages);
$.unique( languages );
for ( var lang in previousLanguages ) {
if ( previousLanguages[lang] === this.language ) {
continue;
}
languages.push( previousLanguages[lang] );
}
for ( var i = 0; i < 3; i++ ) {
var language = languages[i];
@@ -143,7 +146,7 @@
*/
prepareFonts: function () {
var fonts = this.$webfonts.list( this.language );
var $fontSelector = $( 'select.uls-font-select' );
var $fontSelector = this.$template.find( 'select.uls-font-select' );
$fontSelector.find( 'option' ).remove();
var savedFont = this.webfontPreferences.get( this.language );
@@ -165,7 +168,7 @@
},
selectedFont: function () {
return $( 'select.uls-font-select' ).find( 'option:selected' ).val();
return this.$template.find( 'select.uls-font-select' ).find( 'option:selected' ).val();
},
/**
@@ -174,24 +177,55 @@
listen: function () {
var that = this;
$( "div.uls-ui-languages button.button" ).click( function () {
$( "button.button" ).removeClass( "down" );
this.$template.find( "div.uls-ui-languages button.button" ).click( function () {
$( "div.uls-ui-languages button.button" ).removeClass( "down" );
$( this ).addClass( "down" );
that.language = $( this ).data( 'language' ) || that.language;
that.prepareFonts();
} );
$( '#uls-displaysettings-apply' ).on( 'click', function () {
this.$template.find( '#uls-displaysettings-apply' ).on( 'click', function () {
that.apply();
} );
$( '#webfonts-enable-checkbox' ).on( 'click', function () {
this.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () {
if ( this.checked ) {
that.$webfonts.apply( that.selectedFont() );
} else {
that.$webfonts.reset();
}
} );
this.$template.find( 'button#uls-more-languages').on( 'click', function () {
that.$parent.hide();
} );
// Show the long language list to select a language for display settings
this.$template.find( 'button#uls-more-languages').uls( {
left: that.$parent.left,
top: that.$parent.top,
onReady: function( uls ) {
var $back = $( '<a>' )
.prop( 'href', '#' )
.prop( 'title', 'Back to display settings' )
.text( '← Back to display settings' );
$back.click( function() {
uls.hide();
that.$parent.show();
} );
uls.$menu.find( 'div.uls-title' ).append( $back );
uls.show();
},
onSelect: function( langCode ) {
that.language = langCode;
that.$parent.show();
that.prepareFonts();
}
} );
},
/**
@@ -241,7 +275,7 @@
// Save the preferences
this.webfontPreferences.set( this.language, font );
this.webfontPreferences.set( 'webfontsEnabled',
$( '#webfonts-enable-checkbox' ).prop( 'checked' ) ? true : false );
this.$template.find( '#webfonts-enable-checkbox' ).prop( 'checked' ) ? true : false );
this.webfontPreferences.save( function ( result ) {
// closure for not losing the scope
that.onSave( result );

31
resources/js/ext.uls.init.js
View File

@@ -53,24 +53,23 @@
return $displaySettings;
}
// Extend the render api of ULS to add display and input settings.
$.fn.uls.Constructor.prototype = $.extend( {}, $.fn.uls.Constructor.prototype, {
render: function() {
var $displaySettings = displaySettings();
var that = this;
this.$menu.find( "div#settings-block" ).append( $displaySettings );
var position = this.position();
$displaySettings.languagesettings( {
top: position.top,
left: position.left
} );
$displaySettings.on( 'click', function() {
that.hide();
} );
}
} );
function addDisplaySettings( uls ) {
var $displaySettings = displaySettings();
uls.$menu.find( "div#settings-block" ).append( $displaySettings );
var position = uls.position();
$displaySettings.languagesettings( {
top: position.top,
left: position.left
} );
$displaySettings.on( 'click', function() {
uls.hide();
} );
}
$ulsTrigger.uls( {
onReady: function ( uls ) {
addDisplaySettings( uls );
},
onSelect: function( language ) {
changeLanguage( language );
},

14
resources/js/ext.uls.languagesettings.js
View File

@@ -45,6 +45,8 @@
this.$window = $( this.options.template );
this.shown = false;
this.initialized = false;
this.left = this.options.left;
this.top = this.options.top;
this.$settingsPanel = this.$window.find( "#languagesettings-settings-panel" );
this.init();
this.listen();
@@ -61,9 +63,9 @@
listen: function() {
var that = this;
// Register all event listeners to the ULS language settings here.
that.$element.on( "click", $.proxy( that.click, that ) );
$( '#languagesettings-close' ).on( "click", $.proxy( that.click, that ) );
$( '.uls-settings-close' ).on( "click", $.proxy( that.click, that ) );
that.$element.on( "click", $.proxy( that.show, that ) );
$( '#languagesettings-close' ).on( "click", $.proxy( that.hide, that ) );
$( '.uls-settings-close' ).on( "click", $.proxy( that.hide, that ) );
},
render: function() {
@@ -116,8 +118,8 @@
var pos = $.extend( {}, this.$element.offset(), {
height: this.$element[0].offsetHeight
} );
var top = this.options.top || pos.top + pos.height;
var left = this.options.left || '25%';
var top = this.top || pos.top + pos.height;
var left = this.left || '25%';
// FIXME this is not exactly correct. position may not
// be relative to the trigger.
this.$window.css( {
@@ -140,8 +142,6 @@
e.preventDefault();
if ( !this.shown ) {
this.show();
} else {
this.hide();
}
}
};