diff --git a/UniversalLanguageSelector.hooks.php b/UniversalLanguageSelector.hooks.php index ce7e52ee..19af97bc 100644 --- a/UniversalLanguageSelector.hooks.php +++ b/UniversalLanguageSelector.hooks.php @@ -108,7 +108,7 @@ class UniversalLanguageSelectorHooks { $data .= "
- +
diff --git a/UniversalLanguageSelector.php b/UniversalLanguageSelector.php index 9267ee7a..039428b9 100644 --- a/UniversalLanguageSelector.php +++ b/UniversalLanguageSelector.php @@ -71,7 +71,7 @@ $wgResourceModules['ext.uls.init'] = array( 'mediawiki.Uri', 'jquery.tipsy', 'jquery.uls', - 'ext.uls.languagesettings', + 'ext.uls.displaysettings', ), 'position' => 'top', ); @@ -83,12 +83,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', ); @@ -128,7 +137,7 @@ $wgResourceModules['jquery.webfonts'] = array( ); $wgResourceModules['ext.uls.webfonts.repository'] = array( - 'scripts' => 'resources/js/jquery.webfonts.repository.js', - 'localBasePath' => $dir, - 'remoteExtPath' => 'UniversalLanguageSelector', + 'scripts' => 'resources/js/jquery.webfonts.repository.js', + 'localBasePath' => $dir, + 'remoteExtPath' => 'UniversalLanguageSelector', ); diff --git a/lib/jquery.uls/examples/index.html b/lib/jquery.uls/examples/index.html index 17748b53..538bc7b7 100644 --- a/lib/jquery.uls/examples/index.html +++ b/lib/jquery.uls/examples/index.html @@ -50,7 +50,7 @@
- +
diff --git a/lib/jquery.uls/src/jquery.uls.core.js b/lib/jquery.uls/src/jquery.uls.core.js index 74f939b7..6c3f1a25 100644 --- a/lib/jquery.uls/src/jquery.uls.core.js +++ b/lib/jquery.uls/src/jquery.uls.core.js @@ -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) ) diff --git a/resources/css/ext.languagesettings.css b/resources/css/ext.languagesettings.css index 77036921..f0d4f5f0 100644 --- a/resources/css/ext.languagesettings.css +++ b/resources/css/ext.languagesettings.css @@ -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{ +.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; +} \ No newline at end of file diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css index fe71d35e..bbcdad59 100644 --- a/resources/css/ext.uls.css +++ b/resources/css/ext.uls.css @@ -2,18 +2,80 @@ div#settings-block { border-left: 1px solid #C9C9C9; padding-left: 10px; } -div#display-settings-block { + +div#display-settings-block { /* @embed */ background: url('../images/display.png'); background-repeat: no-repeat; 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 ); } \ No newline at end of file diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js index ea2f4fc8..941bc771 100644 --- a/resources/js/ext.uls.displaysettings.js +++ b/resources/js/ext.uls.displaysettings.js @@ -19,30 +19,56 @@ ( function( $ ) { "use strict"; - var template = '

Display Settings

' + - '

Select Language

' + - '
' + - '' + - '' + - '' + - '' + - '
' + - '

Font Settings

' + - '
' + - '' + - '' + - '
' + - '
Select your preferred fonts to use
' + - '
Fonts for English
' + - '
Fonts for Spanish
' + - '
'; + var template = '

Display Settings

' + + '

Select Language

' + + '
' + + '' + + '' + + '' + + '' + + '
' + + '

Font Settings

' + + '
' + + '' + + '
' + + '
Select your preferred fonts to use
' + + '
' + + '
Fonts for English
' + + '
' + + '
' + + '
' + + '
' + + '' + + '' + + '
'; // 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( $( "" ) + .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, { diff --git a/resources/js/ext.uls.init.js b/resources/js/ext.uls.init.js index 8f9751fa..564f4f7f 100644 --- a/resources/js/ext.uls.init.js +++ b/resources/js/ext.uls.init.js @@ -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(); + } ); } } ); diff --git a/resources/js/ext.uls.languagesettings.js b/resources/js/ext.uls.languagesettings.js index b6f6e517..cb43b7cb 100644 --- a/resources/js/ext.uls.languagesettings.js +++ b/resources/js/ext.uls.languagesettings.js @@ -21,7 +21,7 @@ "use strict"; var closeRow = '
' + - '' + + '' + '
'; var settingsMenu = '
' + '

Language settings

' + // 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 = $( "
" ) - .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(); }, diff --git a/resources/js/ext.uls.webfonts.js b/resources/js/ext.uls.webfonts.js new file mode 100644 index 00000000..1b86764d --- /dev/null +++ b/resources/js/ext.uls.webfonts.js @@ -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 ); \ No newline at end of file diff --git a/tests/language_settings.html b/tests/language_settings.html index 32c7245e..299cebc6 100644 --- a/tests/language_settings.html +++ b/tests/language_settings.html @@ -19,10 +19,12 @@ + +