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

Jshint fixes for displaysettings

Browse Source 
Change-Id: I29549893fa9081f5af3d7108a7515963ecf6bfc9
This commit is contained in:
Santhosh Thottingal
2012-10-16 15:03:52 +05:30
parent 400f401d4e
commit 59da3610f4
2 changed files with 73 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.jshintrc
View File

@@ -2,7 +2,8 @@
"predef": [ "predef": [
"jQuery", "jQuery",
"QUnit", "QUnit",
"_" "_",
"mediaWiki"
], ],
"camelcase": true, "camelcase": true,

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

@@ -18,7 +18,7 @@
*/ */
( function ( $, mw, undefined ) { ( function ( $, mw, undefined ) {
"use strict"; 'use strict';
var template = '<div class="uls-display-settings">' var template = '<div class="uls-display-settings">'
+ '<div class="row">' // Top "Display settings" title + '<div class="row">' // Top "Display settings" title
@@ -86,16 +86,16 @@
+ '</div>' + '</div>'
+ '</div>'; // FIXME i18n and too much hardcoding. + '</div>'; // FIXME i18n and too much hardcoding.
var DisplaySettings = function ( $parent ) { function DisplaySettings( $parent ) {
this.name = $.i18n( "ext-uls-display-settings-title-short" ); this.name = $.i18n( 'ext-uls-display-settings-title-short' );
this.description = $.i18n( "ext-uls-display-settings-desc" ); this.description = $.i18n( 'ext-uls-display-settings-desc' );
this.$template = $( template ); this.$template = $( template );
this.uiLanguage = this.getUILanguage(); this.uiLanguage = this.getUILanguage();
this.contentLanguage = this.getContentLanguage(); this.contentLanguage = this.getContentLanguage();
this.$webfonts = null; this.$webfonts = null;
this.$parent = $parent; this.$parent = $parent;
this.webfontPreferences = mw.uls.preferences( 'webfonts' ); this.webfontPreferences = mw.uls.preferences( 'webfonts' );
}; }
DisplaySettings.prototype = { DisplaySettings.prototype = {
@@ -135,16 +135,19 @@
* Prepare the UI language selector * Prepare the UI language selector
*/ */
prepareLanguages: function () { prepareLanguages: function () {
var displaySettings = this, var displaySettings = this, languagesForButtons, $languages, suggestedLanguages,
$languages = this.$template.find( 'div.uls-ui-languages' ), SUGGESTED_LANGUAGES_NUMBER, lang, i, language, $button;
suggestedLanguages = this.frequentLanguageList()
// Common world languages, for the case that there are
// too few suggested languages
.concat( ['en', 'zh', 'fr'] ),
// Content language is always on the first button SUGGESTED_LANGUAGES_NUMBER = 3;
languagesForButtons = [this.contentLanguage], displaySettings = this;
SUGGESTED_LANGUAGES_NUMBER = 3; $languages = this.$template.find( 'div.uls-ui-languages' );
suggestedLanguages = this.frequentLanguageList()
// Common world languages, for the case that there are
// too few suggested languages
.concat( [ 'en', 'zh', 'fr' ] );
// Content language is always on the first button
languagesForButtons = [ this.contentLanguage ];
// This is needed when drawing the panel for the second time // This is needed when drawing the panel for the second time
// after selecting a different language // after selecting a different language
@@ -155,7 +158,7 @@
languagesForButtons.push( this.uiLanguage ); languagesForButtons.push( this.uiLanguage );
} }
for ( var lang in suggestedLanguages ) { for ( lang in suggestedLanguages ) {
// Skip already found languages // Skip already found languages
if ( $.inArray( suggestedLanguages[lang], languagesForButtons ) > -1 ) { if ( $.inArray( suggestedLanguages[lang], languagesForButtons ) > -1 ) {
continue; continue;
@@ -171,23 +174,23 @@
function buttonHandler( button ) { function buttonHandler( button ) {
return function () { return function () {
displaySettings.uiLanguage = button.data( "language" ) || displaySettings.uiLanguage; displaySettings.uiLanguage = button.data( 'language' ) || displaySettings.uiLanguage;
$( "div.uls-ui-languages button.button" ).removeClass( "down" ); $( 'div.uls-ui-languages button.button' ).removeClass( 'down' );
button.addClass( "down" ); button.addClass( 'down' );
displaySettings.prepareUIFonts(); displaySettings.prepareUIFonts();
}; };
} }
// Add the buttons for the most likely languages // Add the buttons for the most likely languages
for ( var i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) { for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
var language = languagesForButtons[i], language = languagesForButtons[i];
$button = $( '<button>' ) $button = $( '<button>' )
.addClass( 'button uls-language-button' ) .addClass( 'button uls-language-button' )
.text( $.uls.data.getAutonym( language ) ) .text( $.uls.data.getAutonym( language ) )
.prop({ .prop({
lang: language, lang: language,
dir: $.uls.data.getDir( language ) dir: $.uls.data.getDir( language )
}); });
if ( language === this.uiLanguage ) { if ( language === this.uiLanguage ) {
$button.addClass( 'down' ); $button.addClass( 'down' );
@@ -205,9 +208,11 @@
* Prepare the more languages button. It is a ULS trigger * Prepare the more languages button. It is a ULS trigger
*/ */
prepareMoreLanguages: function () { prepareMoreLanguages: function () {
var that = this; var that, $languages, $moreLanguagesButton;
var $languages = this.$template.find( 'div.uls-ui-languages' );
var $moreLanguagesButton = $( '<button>' ) that = this;
$languages = this.$template.find( 'div.uls-ui-languages' );
$moreLanguagesButton = $( '<button>' )
.prop( 'id', 'uls-more-languages' ) .prop( 'id', 'uls-more-languages' )
.addClass( 'button' ).text( '...' ); .addClass( 'button' ).text( '...' );
@@ -277,8 +282,10 @@
* TODO Can this be merged with prepareContentLanguages? * TODO Can this be merged with prepareContentLanguages?
*/ */
prepareUIFonts: function () { prepareUIFonts: function () {
var fonts = this.$webfonts.list( this.uiLanguage ), var fonts, $fontSelector, savedFont, $systemFont, $fontLabel, $uiFonts;
$uiFonts = this.$template.find( 'div.uls-ui-fonts' );
fonts = this.$webfonts.list( this.uiLanguage );
$uiFonts = this.$template.find( 'div.uls-ui-fonts' );
if ( this.uiLanguage === this.contentLanguage || fonts.length === 0 ) { if ( this.uiLanguage === this.contentLanguage || fonts.length === 0 ) {
$uiFonts.hide(); $uiFonts.hide();
@@ -286,28 +293,29 @@
} else { } else {
$uiFonts.show(); $uiFonts.show();
} }
var $fontSelector = this.$template.find( 'select#ui-font-selector' );
$fontSelector = this.$template.find( 'select#ui-font-selector' );
$fontSelector.find( 'option' ).remove(); $fontSelector.find( 'option' ).remove();
var savedFont = this.webfontPreferences.get( this.uiLanguage ); savedFont = this.webfontPreferences.get( this.uiLanguage );
if ( fonts && fonts.length ) { if ( fonts && fonts.length ) {
$.each( fonts, function ( key, font ) { $.each( fonts, function ( key, font ) {
if ( font !== 'system' ) { if ( font !== 'system' ) {
var $fontOption = $( "<option>" ).attr( "value", font ).text( font ); var $fontOption = $( '<option>' ).attr( 'value', font ).text( font );
$fontSelector.append( $fontOption ); $fontSelector.append( $fontOption );
$fontOption.attr( 'selected', savedFont === font ); $fontOption.attr( 'selected', savedFont === font );
} }
} ); } );
} }
$fontSelector.prop( "disabled", !this.isWebFontsEnabled() ); $fontSelector.prop( 'disabled', !this.isWebFontsEnabled() );
var $systemFont = $( "<option>" ).val( 'system' ).text( 'System font' ); $systemFont = $( '<option>' ).val( 'system' ).text( 'System font' );
$fontSelector.append( $systemFont ); $fontSelector.append( $systemFont );
$systemFont.attr( 'selected', savedFont === 'system' || !savedFont ); $systemFont.attr( 'selected', savedFont === 'system' || !savedFont );
var $fontLabel = this.$template.find( 'label#ui-font-selector-label' ); $fontLabel = this.$template.find( 'label#ui-font-selector-label' );
$fontLabel.html( '<strong>' $fontLabel.html( '<strong>'
+ $.i18n( 'ext-uls-webfonts-select-for', $.uls.data.getAutonym( this.uiLanguage ) ) + $.i18n( 'ext-uls-webfonts-select-for', $.uls.data.getAutonym( this.uiLanguage ) )
+ '</strong>' + '</strong>'
@@ -321,8 +329,10 @@
* Prepare the font selector for UI language. * Prepare the font selector for UI language.
*/ */
prepareContentFonts: function () { prepareContentFonts: function () {
var fonts = this.$webfonts.list( this.contentLanguage ), var fonts, $fontSelector, savedFont, $systemFont, $contentFonts, $fontLabel;
$contentFonts = this.$template.find( 'div.uls-content-fonts' );
fonts = this.$webfonts.list( this.contentLanguage );
$contentFonts = this.$template.find( 'div.uls-content-fonts' );
if ( fonts.length === 0 ) { if ( fonts.length === 0 ) {
$contentFonts.hide(); $contentFonts.hide();
@@ -331,28 +341,31 @@
$contentFonts.show(); $contentFonts.show();
} }
var $fontSelector = this.$template.find( '#content-font-selector' ); $fontSelector = this.$template.find( '#content-font-selector' );
fonts = this.$webfonts.list( this.contentLanguage );
$fontSelector = this.$template.find( '#content-font-selector' );
$fontSelector.find( 'option' ).remove(); $fontSelector.find( 'option' ).remove();
var savedFont = this.webfontPreferences.get( this.contentLanguage ); savedFont = this.webfontPreferences.get( this.contentLanguage );
if ( fonts && fonts.length ) { if ( fonts && fonts.length ) {
$.each( fonts, function ( key, font ) { $.each( fonts, function ( key, font ) {
if ( font !== 'system' ) { if ( font !== 'system' ) {
var $fontOption = $( "<option>" ).attr( "value", font ).text( font ); var $fontOption = $( '<option>' ).attr( 'value', font ).text( font );
$fontSelector.append( $fontOption ); $fontSelector.append( $fontOption );
$fontOption.attr( 'selected', savedFont === font ); $fontOption.attr( 'selected', savedFont === font );
} }
} ); } );
} }
$fontSelector.prop( "disabled", !this.isWebFontsEnabled() ); $fontSelector.prop( 'disabled', !this.isWebFontsEnabled() );
var $systemFont = $( "<option>" ).val( 'system' ).text( 'System font' ); $systemFont = $( '<option>' ).val( 'system' ).text( 'System font' );
$fontSelector.append( $systemFont ); $fontSelector.append( $systemFont );
$systemFont.attr( 'selected', savedFont === 'system' || !savedFont ); $systemFont.attr( 'selected', savedFont === 'system' || !savedFont );
var $fontLabel = this.$template.find( '#content-font-selector-label' ); $fontLabel = this.$template.find( '#content-font-selector-label' );
$fontLabel.html( '<strong>' $fontLabel.html( '<strong>'
+ $.i18n( 'ext-uls-webfonts-select-for', $.uls.data.getAutonym( this.contentLanguage ) ) + $.i18n( 'ext-uls-webfonts-select-for', $.uls.data.getAutonym( this.contentLanguage ) )
+ '</strong>' + '</strong>'
@@ -366,11 +379,12 @@
* Register general event listeners * Register general event listeners
*/ */
listen: function () { listen: function () {
var that = this; var that = this, $contentFontSelector, $uiFontSelector;
var $contentFontSelector = this.$template
.find( "#content-font-selector" ); $contentFontSelector = this.$template
var $uiFontSelector = this.$template .find( '#content-font-selector' );
.find( "select#ui-font-selector" ); $uiFontSelector = this.$template
.find( 'select#ui-font-selector' );
// TODO all these repeated selectors can be placed in object constructor. // TODO all these repeated selectors can be placed in object constructor.
this.$template.find( '#uls-displaysettings-apply' ).on( 'click', function () { this.$template.find( '#uls-displaysettings-apply' ).on( 'click', function () {
@@ -384,24 +398,24 @@
this.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () { this.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () {
if ( this.checked ) { if ( this.checked ) {
that.webfontPreferences.set( 'webfonts-enabled', true ); that.webfontPreferences.set( 'webfonts-enabled', true );
$contentFontSelector.prop( "disabled", false ); $contentFontSelector.prop( 'disabled', false );
$uiFontSelector.prop( "disabled", false ); $uiFontSelector.prop( 'disabled', false );
that.$webfonts.apply( $uiFontSelector.find( 'option:selected' ) ); that.$webfonts.apply( $uiFontSelector.find( 'option:selected' ) );
} else { } else {
that.webfontPreferences.set( 'webfonts-enabled', false ); that.webfontPreferences.set( 'webfonts-enabled', false );
$contentFontSelector.prop( "disabled", true ); $contentFontSelector.prop( 'disabled', true );
$uiFontSelector.prop( "disabled", true ); $uiFontSelector.prop( 'disabled', true );
that.$webfonts.reset(); that.$webfonts.reset();
} }
} ); } );
$uiFontSelector.on( "change", function () { $uiFontSelector.on( 'change', function () {
var font = $( this ).find( 'option:selected' ).val(); var font = $( this ).find( 'option:selected' ).val();
that.webfontPreferences.set( that.uiLanguage, font ); that.webfontPreferences.set( that.uiLanguage, font );
that.$webfonts.refresh(); that.$webfonts.refresh();
} ); } );
$contentFontSelector.on( "change", function () { $contentFontSelector.on( 'change', function () {
var font = $( this ).find( 'option:selected' ).val(); var font = $( this ).find( 'option:selected' ).val();
that.webfontPreferences.set( that.contentLanguage, font ); that.webfontPreferences.set( that.contentLanguage, font );
that.$webfonts.refresh(); that.$webfonts.refresh();