Merge "More UI code"
This commit is contained in:
Amire80
Gerrit Code Review
@@ -89,7 +89,8 @@ $wgResourceModules['ext.uls.webfonts'] = array(
|
||||
'localBasePath' => $dir,
|
||||
'remoteExtPath' => 'UniversalLanguageSelector',
|
||||
'dependencies' => array(
|
||||
'jquery.webfonts'
|
||||
'jquery.webfonts',
|
||||
'ext.uls.webfonts.repository',
|
||||
),
|
||||
);
|
||||
|
||||
@@ -138,7 +139,7 @@ $wgResourceModules['jquery.webfonts'] = array(
|
||||
);
|
||||
|
||||
$wgResourceModules['ext.uls.webfonts.repository'] = array(
|
||||
'scripts' => 'resources/js/jquery.webfonts.repository.js',
|
||||
'scripts' => 'resources/js/ext.uls.webfonts.repository.js',
|
||||
'localBasePath' => $dir,
|
||||
'remoteExtPath' => 'UniversalLanguageSelector',
|
||||
);
|
||||
|
||||
@@ -39,6 +39,13 @@
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.languagesettings-menu h1 {
|
||||
font-size: 18pt;
|
||||
line-height: 20pt;
|
||||
margin-top: 0;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.language-settings-buttons {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -58,37 +65,36 @@
|
||||
border-left-color: #3366BB;
|
||||
}
|
||||
|
||||
button.toggle.button {
|
||||
background: #eee;
|
||||
color: black;
|
||||
button.button {
|
||||
background-color: #E6E6E6;
|
||||
background-image: -moz-linear-gradient(center top, #F0F0F0, #E6E6E6);
|
||||
border: 1px solid #C9C9C9;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
color: #252525;
|
||||
cursor: pointer;
|
||||
border-top: solid 2px #eaeaea;
|
||||
border-left: solid 2px #eaeaea;
|
||||
border-bottom: solid 2px #777;
|
||||
border-right: solid 2px #777;
|
||||
padding: 5px 5px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
font: bold 0.813em/1 Arial, sans-serif;
|
||||
padding: 0.4065em 1.2195em;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
button.toggle.button.down {
|
||||
background: #bbb;
|
||||
border-top: solid 2px #777;
|
||||
border-left: solid 2px #777;
|
||||
border-bottom: solid 2px #eaeaea;
|
||||
border-right: solid 2px #eaeaea;
|
||||
button.button:active,
|
||||
button.button.down {
|
||||
background-color: #D8D8D8;
|
||||
background-image: -moz-linear-gradient(center top, #D3D3D3, #D8D8D8);
|
||||
border-color: #C9C9C9;
|
||||
}
|
||||
|
||||
.language-settings-buttons {
|
||||
border-top: solid 2px #aaa;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #F0F0F0;
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
label.checkbox input[type="checkbox"] {
|
||||
padding-left: -20px;
|
||||
float: left;
|
||||
}
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
@@ -19,59 +19,164 @@
|
||||
|
||||
( function( $ ) {
|
||||
"use strict";
|
||||
var template = '<div><h3>Display Settings</h3></div>'
|
||||
+ '<div><h4>Select Language</h4></div>'
|
||||
+ '<div class="row">'
|
||||
+ '<button class="two columns toggle button down">English</button>'
|
||||
+ '<button class="two columns offset-by-one toggle button">Deutsch</button>'
|
||||
+ '<button class="two columns offset-by-one toggle button">עברית</button>'
|
||||
+ '<button id="uls-more-languages" class="two columns offset-by-one toggle button"">...</button>'
|
||||
|
||||
var template = '<div class="row"><h3>Display Settings</h3></div>'
|
||||
+ '<div><h4>Language used for menus</h4></div>'
|
||||
+ '<div class="uls-ui-languages row">'
|
||||
+ '</div>'
|
||||
+ '<div class="row"><h4>Font Settings</h4></div>'
|
||||
+ '<div class="row">'
|
||||
+ '<div class="row">'
|
||||
+ '<label class="checkbox"><input type="checkbox" checked id="webfonts-enable-checkbox" />'
|
||||
+ '<strong>Download fonts automatically when needed</strong> '
|
||||
+ 'Web fonts will be downloaded when text in special scripts is displayed. '
|
||||
+ '<a href="#">More Information</a>'
|
||||
+ '</span></label>'
|
||||
+ '</div>'
|
||||
+ '<div class="row"><h5>Select your preferred fonts to use</h5></div>'
|
||||
+ '<div class="row"><h5>Set your preferred fonts to use</h5></div>'
|
||||
+ '<div class="row">'
|
||||
+ '<div class="six columns">Fonts for English</div>'
|
||||
+ '<div class="six columns"><label id="font-selector"></label></div>'
|
||||
+ '<select class="three columns end uls-font-select"></select></div>'
|
||||
+ '</div>'
|
||||
+ '<div class="row"></div>'
|
||||
+ '<div class="row language-settings-buttons">'
|
||||
+ '<button class="three columns offset-by-three blue button">Cancel</button>'
|
||||
+ '<button class="four columns offset-by-one active blue button">Apply changes</button>'
|
||||
+ '</div>'; // FIXME too much hardcoding.
|
||||
+ '<button class="three columns offset-by-three button uls-settings-close">Cancel</button>'
|
||||
+ '<button class="four columns offset-by-one active blue button">Apply changes</button>'
|
||||
+ '</div>'; // FIXME i18n and too much hardcoding.
|
||||
|
||||
var displaySettings = {
|
||||
name: "Display",
|
||||
description: "Set the fonts for languages",
|
||||
var DisplaySettings = function () {
|
||||
this.name = "Display";
|
||||
this.description = "Set the languages of menus and fonts";
|
||||
this.$template = $( template );
|
||||
this.language = this.currentLanguage();
|
||||
this.$webfonts = null;
|
||||
};
|
||||
|
||||
render: function() {
|
||||
return template;
|
||||
DisplaySettings.prototype = {
|
||||
|
||||
Constructor: DisplaySettings,
|
||||
|
||||
/**
|
||||
* Render the module into a given target
|
||||
* @param $target
|
||||
*/
|
||||
render: function ( $target ) {
|
||||
$target.empty();
|
||||
this.$webfonts = $( 'body' ).data( 'webfonts' );
|
||||
$target.append( this.$template );
|
||||
this.prepareLanguages();
|
||||
this.prepareFonts();
|
||||
this.listen();
|
||||
},
|
||||
|
||||
listen: function() {
|
||||
var $webfonts = $( 'body' ).data( 'webfonts' );
|
||||
var fonts = $webfonts.list( 'en' ); // FIXME
|
||||
/**
|
||||
* Prepare the UI language chooser
|
||||
*/
|
||||
prepareLanguages: function () {
|
||||
var $languages = $( 'div.uls-ui-languages' );
|
||||
$languages.empty();
|
||||
var previousLanguages = this.previousLanguages();
|
||||
var languages = [this.language];
|
||||
$.merge( languages, previousLanguages);
|
||||
$.unique( languages );
|
||||
for ( var i = 0; i < 3; i++ ) {
|
||||
var language = languages[i];
|
||||
var $button = $( '<button>' )
|
||||
.addClass( 'two columns button' )
|
||||
.text( $.uls.data.autonym( language ) );
|
||||
if ( language === this.language ) {
|
||||
$button.addClass( 'down' );
|
||||
}
|
||||
if ( i > 0 ) {
|
||||
$button.addClass( 'offset-by-one' );
|
||||
}
|
||||
$button.data( 'language', language );
|
||||
$languages.append( $button );
|
||||
$button.on ( 'click', function () {
|
||||
this.language = $( this ).data( 'language' );
|
||||
} );
|
||||
}
|
||||
var $moreLanguagesButton = $( '<button>' )
|
||||
.prop( 'id', 'uls-more-languages' )
|
||||
.addClass( 'two columns offset-by-one button' )
|
||||
.text( '...' );
|
||||
$languages.append( $moreLanguagesButton );
|
||||
},
|
||||
|
||||
/**
|
||||
* Get previous languages
|
||||
* @returns {Array}
|
||||
*/
|
||||
previousLanguages: function () {
|
||||
// FIXME
|
||||
return [ $.cookie( 'uls-previous-language' ) || 'he', 'hi', 'ml', 'ta'];
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the current language.
|
||||
* @returns String Current language
|
||||
*/
|
||||
currentLanguage: function () {
|
||||
if ( !window.mw ) {
|
||||
return navigator.language || navigator.userLanguage;
|
||||
}
|
||||
return mw.config.get( 'wgUserLanguage' );
|
||||
},
|
||||
|
||||
/**
|
||||
* Prepare the font chooser.
|
||||
*/
|
||||
prepareFonts: function () {
|
||||
var fonts = this.$webfonts.list( this.language );
|
||||
var $fontSelector = $( 'select.uls-font-select' );
|
||||
$.each( fonts, function( key, font ) {
|
||||
$fontSelector.find( 'option' ).remove();
|
||||
$.each( fonts, function ( key, font ) {
|
||||
$fontSelector.append( $( "<option></option>" )
|
||||
.attr( "value", font ).text( font ) );
|
||||
} );
|
||||
$( "button.toggle.button" ).click( function() {
|
||||
$( "button.toggle.button" ).removeClass( "down" );
|
||||
var $fontLabel = $( 'label#font-selector' );
|
||||
$fontLabel.text( "Select font for " + $.uls.data.autonym( this.language ) );
|
||||
},
|
||||
|
||||
/**
|
||||
* Register general event listeners
|
||||
*/
|
||||
listen: function () {
|
||||
var that = this;
|
||||
$( "button.button" ).click( function () {
|
||||
$( "button.button" ).removeClass( "down" );
|
||||
$( this ).addClass( "down" );
|
||||
that.language = $( this ).data( 'language' ) || that.language;
|
||||
that.prepareFonts();
|
||||
} );
|
||||
// $( '#uls-more-languages' ).uls({
|
||||
// });
|
||||
},
|
||||
|
||||
/**
|
||||
* Change the language of wiki using setlang URL parameter
|
||||
* @param {String} language
|
||||
*/
|
||||
changeLanguage: function ( language ) {
|
||||
$.cookie( 'uls-previous-language', this.currentLanguage() );
|
||||
var uri = new mw.Uri( window.location.href );
|
||||
uri.extend( {
|
||||
setlang: language
|
||||
} );
|
||||
window.location.href = uri.toString();
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle the apply button press
|
||||
*/
|
||||
apply: function () {
|
||||
var $fontSelector = $( 'select.uls-font-select' );
|
||||
var font = $fontSelector.find( 'option:selected' ).val();
|
||||
this.$webfonts.apply( font );
|
||||
if ( this.language !== this.currentLanguage() ) {
|
||||
this.changeLanguage( this.language );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.languagesettings.modules = $.extend( $.fn.languagesettings.modules, {
|
||||
display: displaySettings
|
||||
display: new DisplaySettings()
|
||||
} );
|
||||
} ) ( jQuery );
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
( function( $, mw ) {
|
||||
"use strict";
|
||||
|
||||
$( document ).ready( function( ) {
|
||||
$( document ).ready( function() {
|
||||
var $ulsTrigger = $( '.uls-trigger' ),
|
||||
previousLang = $.cookie( 'uls-previous-language' ),
|
||||
currentLang = mw.config.get( 'wgUserLanguage' );
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
var closeRow = '<div class="row" id="languagesettings-close">' +
|
||||
'<span id="languagesettings-close" class="icon-close"></span>' +
|
||||
'</div>';
|
||||
var settingsMenu = '<div class="four columns">' +
|
||||
var settingsMenu = '<div class="four columns languagesettings-menu">' +
|
||||
'<h1>Language settings</h1>' + // TODO i18n
|
||||
'<div class="settings-menu-items">' +
|
||||
'</div>' +
|
||||
@@ -59,9 +59,10 @@
|
||||
|
||||
listen: function() {
|
||||
var that = this;
|
||||
// Register all event listeners to the ULS here.
|
||||
// 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 ) );
|
||||
$( '#languagesettings-close' ).on( "click", $.proxy( that.click, that ) );
|
||||
$( '.uls-settings-close' ).on( "click", $.proxy( that.click, that ) );
|
||||
},
|
||||
|
||||
render: function() {
|
||||
@@ -79,13 +80,12 @@
|
||||
}
|
||||
|
||||
// Show the default module
|
||||
$( "#languagesettings-settings-panel" ).html( firstModule.render() );
|
||||
firstModule.listen();
|
||||
firstModule.render( $( "#languagesettings-settings-panel" ) );
|
||||
},
|
||||
|
||||
renderModule: function( moduleName ) {
|
||||
var that = this;
|
||||
var $settingsMenuItems = this.$window.find( ".settings-menu-items" );
|
||||
var $settingsPanel = this.$window.find( "#languagesettings-settings-panel" );
|
||||
var module = $.fn.languagesettings.modules[moduleName];
|
||||
var $settingsTitle = $( "<div>" )
|
||||
.addClass( "settings-title" )
|
||||
@@ -104,8 +104,8 @@
|
||||
|
||||
$settingsLink.on( "click", function() {
|
||||
var module = $( this ).data( "module" );
|
||||
$settingsPanel.html( module.render() );
|
||||
module.listen();
|
||||
var $settingsPanel = that.$window.find( "#languagesettings-settings-panel" );
|
||||
module.render( $settingsPanel );
|
||||
$( this ).addClass( 'active' );
|
||||
} );
|
||||
},
|
||||
|
||||
@@ -19,15 +19,11 @@
|
||||
( function($, mw) {
|
||||
"use strict";
|
||||
$( document ).ready( function() {
|
||||
// FIXME Dummy repository
|
||||
var mediawikiFontRepository = $.webfonts.repository;
|
||||
mediawikiFontRepository.base = mw.config.get( 'wgExtensionAssetsPath' )
|
||||
+ '/UniversalLanguageSelector/data/fontrepo/fonts/';
|
||||
$( 'body' ).webfonts( {
|
||||
repository : {
|
||||
base : '../data/fonts/',
|
||||
fonts : {},
|
||||
languages : {
|
||||
'en' : [ 'Sans', 'Serif' ]
|
||||
}
|
||||
}
|
||||
repository: mediawikiFontRepository
|
||||
} );
|
||||
} );
|
||||
} )( jQuery );
|
||||
} )( jQuery, mediaWiki );
|
||||
Reference in New Issue
Block a user