| Index: trunk/extensions/WebFonts/js/webfonts.js |
| — | — | @@ -2,7 +2,6 @@ |
| 3 | 3 | |
| 4 | 4 | $.webfonts = { |
| 5 | 5 | |
| 6 | | - |
| 7 | 6 | oldconfig: false, |
| 8 | 7 | config : $.webfonts.config, |
| 9 | 8 | /* Version number */ |
| — | — | @@ -14,7 +13,9 @@ |
| 15 | 14 | } |
| 16 | 15 | |
| 17 | 16 | if ( !(font in $.webfonts.config.fonts) ) { |
| 18 | | - console.log( "Requested unknown font", font ); |
| | 17 | + if ( window.console ) { |
| | 18 | + console.log( "Requested unknown font", font ); |
| | 19 | + } |
| 19 | 20 | return; |
| 20 | 21 | } |
| 21 | 22 | var config = $.webfonts.config.fonts[font]; |
| — | — | @@ -24,14 +25,15 @@ |
| 25 | 26 | |
| 26 | 27 | //save the current font and its size. Used for reset. |
| 27 | 28 | if ( !$.webfonts.oldconfig ) { |
| | 29 | + var $body = $("body"); |
| 28 | 30 | $.webfonts.oldconfig = { |
| 29 | | - "font-family": $("body").css('font-family'), |
| 30 | | - "font-size": $("body").css('font-size') |
| | 31 | + "font-family": $body.css('font-family'), |
| | 32 | + "font-size": $body.css('font-size') |
| 31 | 33 | }; |
| 32 | 34 | } |
| 33 | 35 | |
| 34 | 36 | //Set the font, fallback fonts.Need to change the fonts of Input Select and Textarea explicitly. |
| 35 | | - $("body, input, select, textarea").css('font-family', font +", Helvetica, Arial, sans-serif"); |
| | 37 | + $("body, input, select, textarea").css('font-family', "'"+ font +"', Helvetica, Arial, sans-serif"); |
| 36 | 38 | |
| 37 | 39 | //scale the font of the page. Scale is in percentage. |
| 38 | 40 | // For example scale = 1.2 means scale the font by 120 percentage |
| — | — | @@ -43,8 +45,8 @@ |
| 44 | 46 | } |
| 45 | 47 | |
| 46 | 48 | if ( 'normalization' in config ) { |
| 47 | | - $(document).ready(function() { |
| 48 | | - $.webfonts.normalize(config.normalization); |
| | 49 | + $(document).ready(function() { |
| | 50 | + $.webfonts.normalize(config.normalization); |
| 49 | 51 | }); |
| 50 | 52 | } |
| 51 | 53 | //set the font option in cookie |
| — | — | @@ -54,13 +56,15 @@ |
| 55 | 57 | /** |
| 56 | 58 | * Reset the font with old configuration |
| 57 | 59 | */ |
| 58 | | - reset: function(){ |
| 59 | | - $("body").css('font-family', $.webfonts.oldconfig["font-family"]); |
| | 60 | + reset: function() { |
| | 61 | + $("body").css({ |
| | 62 | + 'font-family': $.webfonts.oldconfig["font-family"], |
| | 63 | + //reset the font size from old configuration |
| | 64 | + 'font-size': $.webfonts.oldconfig["font-size"] |
| | 65 | + ); |
| 60 | 66 | //we need to reset the fonts of Input and Select explicitly. |
| 61 | 67 | $("input").css('font-family', $.webfonts.oldconfig["font-family"]); |
| 62 | 68 | $("select").css('font-family', $.webfonts.oldconfig["font-family"]); |
| 63 | | - //reset the font size from old configuration |
| 64 | | - $("body").css('font-size', $.webfonts.oldconfig["font-size"]); |
| 65 | 69 | //remove the cookie |
| 66 | 70 | $.cookie( 'webfonts-font', 'none', { 'path': '/', 'expires': 30 } ); |
| 67 | 71 | }, |
| — | — | @@ -69,7 +73,7 @@ |
| 70 | 74 | * Scale the font of the page by given percentage |
| 71 | 75 | * @param percentage of scale. eg 1.2 for 120% scale |
| 72 | 76 | */ |
| 73 | | - scale : function (percentage){ |
| | 77 | + scale: function(percentage) { |
| 74 | 78 | //TODO: Not Implemented. Need to find a better way to emulate fontconfig font-scale feature. |
| 75 | 79 | //Changing the font-size of few selectors does not work properly and not able to achieve |
| 76 | 80 | //uniform scaling. |
| — | — | @@ -79,25 +83,24 @@ |
| 80 | 84 | * Does a find replace of string on the page. |
| 81 | 85 | * @param normalization_rules hashmap of replacement rules. |
| 82 | 86 | */ |
| 83 | | - normalize: function(normalization_rules){ |
| | 87 | + normalize: function(normalization_rules) { |
| 84 | 88 | $.each(normalization_rules, function(search, replace) { |
| 85 | 89 | var search_pattern = new RegExp(search,"g"); |
| 86 | | - return $("*").each(function(){ |
| 87 | | - var node = this.firstChild, |
| 88 | | - val, |
| 89 | | - new_val; |
| 90 | | - if ( node ) { |
| 91 | | - do { |
| 92 | | - if ( node.nodeType === 3 ) { |
| 93 | | - val = node.nodeValue; |
| 94 | | - new_val = val.replace(search_pattern, replace ); |
| 95 | | - if ( new_val !== val ) { |
| 96 | | - node.nodeValue = new_val; |
| 97 | | - } |
| | 90 | + return $("*").each(function() { |
| | 91 | + var node = this.firstChild, |
| | 92 | + val, new_val; |
| | 93 | + if ( node ) { |
| | 94 | + do { |
| | 95 | + if ( node.nodeType === 3 ) { |
| | 96 | + val = node.nodeValue; |
| | 97 | + new_val = val.replace(search_pattern, replace); |
| | 98 | + if ( new_val !== val ) { |
| | 99 | + node.nodeValue = new_val; |
| | 100 | + } |
| | 101 | + } |
| | 102 | + } while ( node = node.nextSibling ); |
| 98 | 103 | } |
| 99 | | - } while ( node = node.nextSibling ); |
| 100 | | - } |
| 101 | | - }); |
| | 104 | + }); |
| 102 | 105 | }); |
| 103 | 106 | }, |
| 104 | 107 | |
| — | — | @@ -106,7 +109,7 @@ |
| 107 | 110 | * so that it gets loaded. |
| 108 | 111 | * @param fontfamily The fontfamily name |
| 109 | 112 | */ |
| 110 | | - loadcss: function(fontfamily){ |
| | 113 | + loadcss: function(fontfamily) { |
| 111 | 114 | var fontconfig = $.webfonts.config.fonts[fontfamily]; |
| 112 | 115 | var base = mw.config.get( "wgExtensionAssetsPath" ) + "/WebFonts/fonts/"; |
| 113 | 116 | var styleString = |
| — | — | @@ -116,7 +119,7 @@ |
| 117 | 120 | styleString += "\tsrc: url('"+base+fontconfig.eot+"');\n"; |
| 118 | 121 | } |
| 119 | 122 | //If the font is present locally, use it. |
| 120 | | - styleString += "\tsrc: local('"+ fontfamily +"'),"; |
| | 123 | + styleString += "\tsrc: local('"+fontfamily+"'),"; |
| 121 | 124 | |
| 122 | 125 | if ( 'woff' in fontconfig ) { |
| 123 | 126 | styleString += "\t\turl('"+base+fontconfig.woff+"') format('woff'),"; |
| — | — | @@ -131,7 +134,7 @@ |
| 132 | 135 | styleString += "\tfont-weight: normal;\n}\n</style>\n"; |
| 133 | 136 | |
| 134 | 137 | //inject the css to the head of the page. |
| 135 | | - $(styleString).appendTo("head" ); |
| | 138 | + $(styleString).appendTo("head"); |
| 136 | 139 | |
| 137 | 140 | }, |
| 138 | 141 | /** |
| — | — | @@ -154,26 +157,22 @@ |
| 155 | 158 | } |
| 156 | 159 | |
| 157 | 160 | // Build font dropdown |
| 158 | | - $.webfonts.buildMenu(config ); |
| | 161 | + $.webfonts.buildMenu(config); |
| 159 | 162 | //see if there is a font in cookie |
| 160 | | - var cookie_font = $.cookie('webfonts-font'); |
| 161 | | - if(!cookie_font){ |
| 162 | | - $.webfonts.set( config[0]); |
| | 163 | + var cookie_font = $.cookie('webfonts-font') || config[0]; |
| | 164 | + if (cookie_font !== 'none') { |
| | 165 | + $.webfonts.set(cookie_font); |
| 163 | 166 | //mark it as checked |
| 164 | | - $('#webfont-'+config[0]).attr('checked', 'checked'); |
| 165 | | - } else if (cookie_font !=='none') { |
| 166 | | - $.webfonts.set( cookie_font); |
| 167 | | - //mark it as checked |
| 168 | 167 | $('#webfont-'+cookie_font).attr('checked', 'checked'); |
| 169 | 168 | } |
| 170 | 169 | |
| 171 | 170 | //if there are tags with font-family style definition, get a list of fonts to be loaded |
| 172 | 171 | var fontFamilies = []; |
| 173 | | - $('body').find('*[style]').each(function(index){ |
| 174 | | - if( this.style.fontFamily){ |
| 175 | | - var fontFamilyItems = this.style.fontFamily.split(","); |
| | 172 | + $('body').find('*[style]').each(function(index) { |
| | 173 | + if( this.style.fontFamily) { |
| | 174 | + var fontFamilyItems = this.style.fontFamily.split(","); |
| 176 | 175 | $.each(fontFamilyItems, function(index, value) { |
| 177 | | - fontFamilies.push(value ); |
| | 176 | + fontFamilies.push(value); |
| 178 | 177 | }); |
| 179 | 178 | } |
| 180 | 179 | }); |
| — | — | @@ -182,23 +181,24 @@ |
| 183 | 182 | //load css for each of the item in fontfamily list |
| 184 | 183 | $.each(fontFamilies, function(index, fontFamily) { |
| 185 | 184 | //remove the ' characters if any. |
| 186 | | - fontFamily = fontFamily.replace(/'/g,''); |
| | 185 | + fontFamily = fontFamily.replace(/'/g, ''); |
| 187 | 186 | if ( fontFamily in $.webfonts.config.fonts ) { |
| 188 | 187 | $.webfonts.loadcss(fontFamily); |
| 189 | 188 | } |
| 190 | 189 | }); |
| 191 | 190 | |
| 192 | 191 | }, |
| 193 | | - buildMenu : function(config) { |
| | 192 | + buildMenu: function(config) { |
| 194 | 193 | var haveSchemes = false; |
| 195 | 194 | // Build font dropdown |
| 196 | 195 | var $fontsMenu = $( '<ul />' ).attr('id','webfonts-fontsmenu'); |
| | 196 | + $fontsMenu.delegate('input:radio', 'change', function( event ) { |
| | 197 | + $.webfonts.set( $(this).val() ); |
| | 198 | + }); |
| 197 | 199 | for ( var scheme in config ) { |
| 198 | | - var $fontLink = $( '<input>' ) |
| 199 | | - .attr("type","radio") |
| 200 | | - .attr("name","font") |
| | 200 | + var $fontLink = $( '<input type="radio" name="font" />' ) |
| 201 | 201 | .attr("id","webfont-"+config[scheme]) |
| 202 | | - .attr("value",config[scheme] ); |
| | 202 | + .val( config[scheme] ); |
| 203 | 203 | |
| 204 | 204 | var $fontLabel = $( '<label />' ) |
| 205 | 205 | .attr("for","webfont-"+config[scheme]) |
| — | — | @@ -210,12 +210,6 @@ |
| 211 | 211 | .append( $fontLabel ); |
| 212 | 212 | |
| 213 | 213 | haveSchemes = true; |
| 214 | | - //some closure trick :) |
| 215 | | - (function (font) { |
| 216 | | - $fontLink.click( function( event ) { |
| 217 | | - $.webfonts.set( font ); |
| 218 | | - }); |
| 219 | | - }) (config[scheme]); |
| 220 | 214 | |
| 221 | 215 | $fontsMenu.append($fontMenuItem); |
| 222 | 216 | |
| — | — | @@ -229,20 +223,20 @@ |
| 230 | 224 | $.webfonts.set( 'none'); |
| 231 | 225 | }); |
| 232 | 226 | |
| 233 | | - var $resetLabel = $( '<label />' ) |
| | 227 | + var $resetLabel = $( '<label />' ) |
| 234 | 228 | .attr("for","webfont-none") |
| 235 | 229 | .append( $resetLink ) |
| 236 | 230 | .append( mw.msg("webfonts-reset")); |
| 237 | 231 | |
| 238 | 232 | var $resetLinkItem = $( '<li />' ) |
| 239 | | - .val( 'none') |
| | 233 | + .val( 'none' ) |
| 240 | 234 | .append( $resetLabel ); |
| 241 | 235 | |
| 242 | 236 | $fontsMenu.append($resetLinkItem); |
| 243 | | - if ( !haveSchemes ) { |
| 244 | | - // No schemes available, don't show the tool |
| 245 | | - return; |
| 246 | | - } |
| | 237 | + if ( !haveSchemes ) { |
| | 238 | + // No schemes available, don't show the tool |
| | 239 | + return; |
| | 240 | + } |
| 247 | 241 | |
| 248 | 242 | var $menuDiv = $( '<div />' ).attr('id','webfonts-fonts') |
| 249 | 243 | .addClass( 'menu' ) |
| — | — | @@ -251,7 +245,7 @@ |
| 252 | 246 | |
| 253 | 247 | var $div = $( '<div />' ).attr('id','webfonts-menu') |
| 254 | 248 | .addClass( 'webfontMenu' ) |
| 255 | | - .append( "<a href='#'>"+ mw.msg("webfonts-load")+"</a>") |
| | 249 | + .append( $('<a href="#" />').append(mw.msg("webfonts-load")) ) |
| 256 | 250 | .append( $menuDiv ); |
| 257 | 251 | |
| 258 | 252 | //this is the fonts link |
| — | — | @@ -259,12 +253,8 @@ |
| 260 | 254 | .append( $div ); |
| 261 | 255 | |
| 262 | 256 | //if rtl, add to the right of top personal links. Else, to the left |
| 263 | | - if($('body').is( '.rtl' ) ){ |
| 264 | | - $($('#p-personal ul')[0]).append( $li ); |
| 265 | | - } |
| 266 | | - else{ |
| 267 | | - $($('#p-personal ul')[0]).prepend( $li ); |
| 268 | | - } |
| | 257 | + var fn = $('body').hasClass( 'rtl' ) ? "append" : "prepend"; |
| | 258 | + $('#p-personal ul:first')[fn]( $li ); |
| 269 | 259 | } |
| 270 | 260 | }; |
| 271 | 261 | |