Merge "WebFonts integration with ULS display settings."
This commit is contained in:
Amire80
Gerrit Code Review
@@ -115,7 +115,7 @@ class UniversalLanguageSelectorHooks {
|
||||
$data .= "
|
||||
<div class='uls-menu'>
|
||||
<div class='row'>
|
||||
<span class='icon-close'></span>
|
||||
<span id='uls-close' class='icon-close'></span>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='four columns'>
|
||||
|
||||
@@ -72,7 +72,7 @@ $wgResourceModules['ext.uls.init'] = array(
|
||||
'mediawiki.Uri',
|
||||
'jquery.tipsy',
|
||||
'jquery.uls',
|
||||
'ext.uls.languagesettings',
|
||||
'ext.uls.displaysettings',
|
||||
),
|
||||
'position' => 'top',
|
||||
);
|
||||
@@ -84,12 +84,21 @@ $wgResourceModules['ext.uls.languagesettings'] = array(
|
||||
'remoteExtPath' => 'UniversalLanguageSelector',
|
||||
);
|
||||
|
||||
$wgResourceModules['ext.uls.webfonts'] = array(
|
||||
'scripts' => 'resources/js/ext.uls.webfonts.js',
|
||||
'localBasePath' => $dir,
|
||||
'remoteExtPath' => 'UniversalLanguageSelector',
|
||||
'dependencies' => array(
|
||||
'jquery.webfonts'
|
||||
),
|
||||
);
|
||||
|
||||
$wgResourceModules['ext.uls.displaysettings'] = array(
|
||||
'scripts' => 'resources/js/ext.uls.displaysettings.js',
|
||||
'localBasePath' => $dir,
|
||||
'dependencies' => array(
|
||||
'ext.uls.languagesettings',
|
||||
'jquery.webfonts'
|
||||
'ext.uls.webfonts'
|
||||
),
|
||||
'remoteExtPath' => 'UniversalLanguageSelector',
|
||||
);
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
<div class="container">
|
||||
<div class="uls-menu">
|
||||
<div class="row">
|
||||
<span class="icon-close"></span>
|
||||
<span id="uls-close" class="icon-close"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="four columns">
|
||||
|
||||
@@ -98,7 +98,7 @@
|
||||
that.$element.on( 'click', $.proxy( that.click, that ) );
|
||||
|
||||
// Handle click on close button
|
||||
$( ".icon-close" ).on( 'click', $.proxy( that.click, that ) );
|
||||
$( "#uls-close" ).on( 'click', $.proxy( that.click, that ) );
|
||||
|
||||
// Handle key press events on the menu
|
||||
that.$menu.on('keypress', $.proxy(this.keypress, this) )
|
||||
|
||||
@@ -1,44 +1,14 @@
|
||||
#uls-current-language-nav {
|
||||
/* @embed */
|
||||
background: url('../images/cog-16x16-ltr.png') no-repeat scroll right top transparent;
|
||||
#uls-current-language-nav { /* @embed */
|
||||
background: url('../images/cog-16x16-ltr.png') no-repeat scroll right
|
||||
top transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#language-settings-dialog {
|
||||
display: none; /* hidden initially */
|
||||
|
||||
/* XXX pretty random position values, just to make it visible */
|
||||
bottom: 100px;
|
||||
left: 200px;
|
||||
|
||||
/* From here on - from .uls-menu */
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
min-width: 800px; /* changed */
|
||||
margin-top: 1px;
|
||||
width: 45%;
|
||||
/* Styling */
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
*border-right-width: 2px;
|
||||
*border-bottom-width: 2px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
/* From uls-menu, unchanged */
|
||||
#uls-current-language-nav a {
|
||||
color: #0088CC;
|
||||
}
|
||||
|
||||
#uls-current-language-nav h1 {
|
||||
font-weight: normal;
|
||||
padding-top: 1.25em;
|
||||
@@ -49,6 +19,7 @@
|
||||
padding-left: 15px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
#uls-current-language-nav h2 {
|
||||
font-size: 16pt;
|
||||
line-height: 1.5em;
|
||||
@@ -58,6 +29,7 @@
|
||||
border-bottom: none;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.uls-menu h3 {
|
||||
font-size: 14pt;
|
||||
line-height: 1.5em;
|
||||
@@ -78,12 +50,45 @@
|
||||
border-left: 3px solid transparent;
|
||||
display: block;
|
||||
font-size: 12pt;
|
||||
background: url(http://dl.dropbox.com/u/30377416/i18n/icons/WMF-Agora-Display_settings-grey.png) no-repeat scroll 15px center transparent;
|
||||
}
|
||||
|
||||
.menu-section.active {
|
||||
color: black;
|
||||
background-color: #F6F6F6;
|
||||
border-left-color: #3366BB;
|
||||
background-image: url(http://dl.dropbox.com/u/30377416/i18n/icons/WMF-Agora-Display_settings-blue.svg);
|
||||
}
|
||||
|
||||
button.toggle.button {
|
||||
background: #eee;
|
||||
color: black;
|
||||
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;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.language-settings-buttons {
|
||||
border-top: solid 2px #aaa;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
label.checkbox input[type="checkbox"] {
|
||||
padding-left: -20px;
|
||||
float: left;
|
||||
}
|
||||
@@ -2,6 +2,7 @@ div#settings-block {
|
||||
border-left: 1px solid #C9C9C9;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
div#display-settings-block {
|
||||
/* @embed */
|
||||
background: url('../images/display.png');
|
||||
@@ -9,11 +10,72 @@ div#display-settings-block {
|
||||
background-size: 20px auto;
|
||||
padding-left: 25px;
|
||||
cursor: pointer;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.settings-text {
|
||||
color: #555555;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
button.button {
|
||||
display: inline-block;
|
||||
padding: 0.4065em 1.2195em 0.4065em;
|
||||
font: bold 0.813em Arial, sans-serif;
|
||||
line-height: 1;
|
||||
color: black;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
cursor: pointer;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
button.button.blue {
|
||||
background-color: #3366bb;
|
||||
color: white;
|
||||
background-image: -moz-linear-gradient(top, #3670c8, #3366bb);
|
||||
background-image: -ms-linear-gradient(top, #3670c8, #3366bb);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3670c8),
|
||||
color-stop(100%, #3366bb) );
|
||||
background-image: -webkit-linear-gradient(top, #3670c8, #3366bb);
|
||||
background-image: linear-gradient(#3670c8, #3366bb);
|
||||
border: 1px #33589f solid;
|
||||
-ms-filter:
|
||||
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#3670c8', endColorstr='#3366bb', GradientType=0)";
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3670c8',
|
||||
endColorstr='#3366bb', GradientType=0 );
|
||||
}
|
||||
|
||||
button.button.blue:hover {
|
||||
background-color: #3f77d7;
|
||||
background-image: -moz-linear-gradient(top, #4c84da, #3f77d7);
|
||||
background-image: -ms-linear-gradient(top, #4c84da, #3f77d7);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c84da),
|
||||
color-stop(100%, #3f77d7) );
|
||||
background-image: -webkit-linear-gradient(top, #4c84da, #3f77d7);
|
||||
background-image: linear-gradient(#4c84da, #3f77d7);
|
||||
-ms-filter:
|
||||
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c84da', endColorstr='#3f77d7', GradientType=0)";
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#4c84da',
|
||||
endColorstr='#3f77d7', GradientType=0 );
|
||||
}
|
||||
|
||||
button.button.blue:active {
|
||||
background-color: #2a549c;
|
||||
background-image: -moz-linear-gradient(top, #2d5ea9, #2a549c);
|
||||
background-image: -ms-linear-gradient(top, #2d5ea9, #2a549c);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d5ea9),
|
||||
color-stop(100%, #2a549c) );
|
||||
background-image: -webkit-linear-gradient(top, #2d5ea9, #2a549c);
|
||||
background-image: linear-gradient(#2d5ea9, #2a549c);
|
||||
-ms-filter:
|
||||
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2d5ea9', endColorstr='#2a549c', GradientType=0)";
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#2d5ea9',
|
||||
endColorstr='#2a549c', GradientType=0 );
|
||||
}
|
||||
@@ -19,30 +19,56 @@
|
||||
|
||||
( function( $ ) {
|
||||
"use strict";
|
||||
var template = '<div><h3>Display Settings</h3></div>' +
|
||||
'<div><h4>Select Language</h4></div>' +
|
||||
'<div>' +
|
||||
'<button>English</button>' +
|
||||
'<button>Deutsch</button>' +
|
||||
'<button>עברית</button>' +
|
||||
'<button class="uls-trigger">...</button>' +
|
||||
'</div>' +
|
||||
'<div><h4>Font Settings</h4></div>' +
|
||||
'<div>' +
|
||||
'<input type="checkbox" id="webfonts-enable-checkbox" />' +
|
||||
'<label for="webfonts-enable-checkbox">Download fonts automatically when needed</label>' +
|
||||
'</div>' +
|
||||
'<div><h5>Select your preferred fonts to use</h5></div>' +
|
||||
'<div>Fonts for English<select></select></div>' +
|
||||
'<div>Fonts for Spanish<select></select></div>' +
|
||||
'<div class="language-settings-buttons"><button>Cancel</button><button>Apply changes</button></div>';
|
||||
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>'
|
||||
+ '</div>'
|
||||
+ '<div class="row"><h4>Font Settings</h4></div>'
|
||||
+ '<div class="row">'
|
||||
+ '<label class="checkbox"><input type="checkbox" checked id="webfonts-enable-checkbox" />'
|
||||
+ '<b>Download fonts automatically when needed</b> '
|
||||
+ '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">'
|
||||
+ '<div class="six columns">Fonts for English</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.
|
||||
|
||||
var displaySettings = {
|
||||
name: "Display",
|
||||
description: "Set the fonts for languages",
|
||||
|
||||
render: function() {
|
||||
return template;
|
||||
},
|
||||
name: "Display",
|
||||
description: "Set the fonts for languages"
|
||||
|
||||
listen: function() {
|
||||
var $webfonts = $( 'body' ).data( 'webfonts' );
|
||||
var fonts = $webfonts.list( 'en' ); // FIXME
|
||||
var $fontSelector = $( 'select.uls-font-select' );
|
||||
$.each( fonts, function( key, font ) {
|
||||
$fontSelector.append( $( "<option></option>" )
|
||||
.attr( "value", font ).text( font ) );
|
||||
} );
|
||||
$( "button.toggle.button" ).click( function() {
|
||||
$( "button.toggle.button" ).removeClass( "down" );
|
||||
$( this ).addClass( "down" );
|
||||
} );
|
||||
// $( '#uls-more-languages' ).uls({
|
||||
// });
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.languagesettings.modules = $.extend( $.fn.languagesettings.modules, {
|
||||
|
||||
@@ -57,8 +57,12 @@
|
||||
$.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 );
|
||||
$displaySettings.languagesettings();
|
||||
$displaySettings.on( 'click', function() {
|
||||
that.hide();
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
"use strict";
|
||||
|
||||
var closeRow = '<div class="row" id="languagesettings-close">' +
|
||||
'<span class="icon-close"></span>' +
|
||||
'<span id="languagesettings-close" class="icon-close"></span>' +
|
||||
'</div>';
|
||||
var settingsMenu = '<div class="four columns">' +
|
||||
'<h1>Language settings</h1>' + // TODO i18n
|
||||
@@ -61,17 +61,17 @@
|
||||
var that = this;
|
||||
// Register all event listeners to the ULS here.
|
||||
that.$element.on( "click", $.proxy( that.click, that ) );
|
||||
$( ".icon-close" ).on( "click", $.proxy( that.click, that ) );
|
||||
$( "#languagesettings-close" ).on( "click", $.proxy( that.click, that ) );
|
||||
},
|
||||
|
||||
render: function() {
|
||||
// Get the name of all registered modules and list them in left side menu.
|
||||
var modules = $.fn.languagesettings.modules;
|
||||
var firstModuleName = this.options.defaultModule;
|
||||
var firstModule = modules[this.options.defaultModule];
|
||||
for ( var moduleName in modules ) {
|
||||
if ( modules.hasOwnProperty( moduleName ) ) {
|
||||
if ( !firstModuleName ) {
|
||||
firstModuleName = moduleName;
|
||||
if ( !firstModule ) {
|
||||
firstModule = modules[moduleName];
|
||||
}
|
||||
// Call render function on the current setting module.
|
||||
this.renderModule( moduleName );
|
||||
@@ -79,9 +79,8 @@
|
||||
}
|
||||
|
||||
// Show the default module
|
||||
$( "#languagesettings-settings-panel" ).html(
|
||||
$.fn.languagesettings.modules[firstModuleName].render()
|
||||
);
|
||||
$( "#languagesettings-settings-panel" ).html( firstModule.render() );
|
||||
firstModule.listen();
|
||||
},
|
||||
|
||||
renderModule: function( moduleName ) {
|
||||
@@ -95,7 +94,7 @@
|
||||
.addClass( "settings-text" )
|
||||
.text( module.description );
|
||||
var $settingsLink = $( "<div>" )
|
||||
.addClass( moduleName + "-settings-block" )
|
||||
.addClass( moduleName + "-settings-block menu-section" )
|
||||
.prop( "id", moduleName + "-settings-block" )
|
||||
.data( "module", module )
|
||||
.append( $settingsTitle )
|
||||
@@ -104,7 +103,10 @@
|
||||
$settingsMenuItems.append( $settingsLink );
|
||||
|
||||
$settingsLink.on( "click", function() {
|
||||
$settingsPanel.html( $( this ).data( "module" ).render() );
|
||||
var module = $( this ).data( "module" );
|
||||
$settingsPanel.html( module.render() );
|
||||
module.listen();
|
||||
$( this ).addClass( 'active' );
|
||||
} );
|
||||
},
|
||||
|
||||
@@ -112,7 +114,17 @@
|
||||
if ( !this.initialized ) {
|
||||
this.render();
|
||||
this.initialized = true;
|
||||
var pos = $.extend( {}, this.$element.offset(), {
|
||||
height: this.$element[0].offsetHeight
|
||||
} );
|
||||
// FIXME this is not exactly correct. position may not
|
||||
// be relative to the trigger.
|
||||
this.$window.css( {
|
||||
top: pos.top + pos.height,
|
||||
left: '25%'
|
||||
} );
|
||||
}
|
||||
|
||||
this.shown = true;
|
||||
this.$window.show();
|
||||
},
|
||||
|
||||
33
resources/js/ext.uls.webfonts.js
Normal file
33
resources/js/ext.uls.webfonts.js
Normal file
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* ULS-Webfonts integration
|
||||
*
|
||||
* Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
|
||||
* Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
|
||||
* contributors. See CREDITS for a list.
|
||||
*
|
||||
* UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't
|
||||
* have to do anything special to choose one license or the other and you don't
|
||||
* have to notify anyone which license you are using. You are free to use
|
||||
* UniversalLanguageSelector in commercial projects as long as the copyright
|
||||
* header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.
|
||||
*
|
||||
* @file
|
||||
* @ingroup Extensions
|
||||
* @licence GNU General Public Licence 2.0 or later
|
||||
* @licence MIT License
|
||||
*/
|
||||
( function($, mw) {
|
||||
"use strict";
|
||||
$( document ).ready( function() {
|
||||
// FIXME Dummy repository
|
||||
$( 'body' ).webfonts( {
|
||||
repository : {
|
||||
base : '../data/fonts/',
|
||||
fonts : {},
|
||||
languages : {
|
||||
'en' : [ 'Sans', 'Serif' ]
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
} )( jQuery );
|
||||
@@ -19,10 +19,12 @@
|
||||
<link href="../resources/css/ext.uls.css" rel="stylesheet"/>
|
||||
<!-- Libs -->
|
||||
<script src="../lib/jquery.uls/examples/resources/jquery.js"></script>
|
||||
<script src="../lib/jquery.webfonts.js"></script>
|
||||
<!-- Source -->
|
||||
<link href="../resources/css/ext.languagesettings.css" rel="stylesheet"/>
|
||||
<script src="../resources/js/ext.uls.languagesettings.js"></script>
|
||||
<script src="../resources/js/ext.uls.displaysettings.js"></script>
|
||||
<script src="../resources/js/ext.uls.webfonts.js"></script>
|
||||
<script>
|
||||
$( document ).ready( function() {
|
||||
$( '.uls-languagesettings-trigger' ).languagesettings();
|
||||
|
||||
Reference in New Issue
Block a user