From e62b50c9d8292229eb0d441eb8b0b86c082feecc Mon Sep 17 00:00:00 2001 From: Santhosh Thottingal Date: Tue, 14 Aug 2012 15:05:47 +0530 Subject: [PATCH] WebFonts integration with ULS display settings. This does not add much functionality. That will come in future commits. This commit has many cleanup, refactoring on the display settings, language settings code. Change-Id: I7fbc3ebb9b67c1afd80f159c2d82cd2a1c6bea74 --- UniversalLanguageSelector.hooks.php | 2 +- UniversalLanguageSelector.php | 19 ++++-- lib/jquery.uls/examples/index.html | 2 +- lib/jquery.uls/src/jquery.uls.core.js | 2 +- resources/css/ext.languagesettings.css | 79 +++++++++++++----------- resources/css/ext.uls.css | 64 ++++++++++++++++++- resources/js/ext.uls.displaysettings.js | 64 +++++++++++++------ resources/js/ext.uls.init.js | 4 ++ resources/js/ext.uls.languagesettings.js | 32 +++++++--- resources/js/ext.uls.webfonts.js | 33 ++++++++++ tests/language_settings.html | 2 + 11 files changed, 228 insertions(+), 75 deletions(-) create mode 100644 resources/js/ext.uls.webfonts.js 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 @@ + +