| Index: trunk/extensions/WebFonts/resources/ext.webfonts.js |
| — | — | @@ -4,49 +4,48 @@ |
| 5 | 5 | if ( typeof font !== 'string' ) { |
| 6 | 6 | return font; |
| 7 | 7 | } |
| 8 | | - return "webfont-"+font.toLowerCase().replace(/[_ ]/g, '-').replace(/[^-a-z]/g, ''); |
| | 8 | + return 'webfont-' + font.toLowerCase().replace(/[_ ]/g, '-' ).replace(/[^-a-z]/g, '' ); |
| 9 | 9 | } |
| 10 | 10 | |
| 11 | 11 | $.webfonts = { |
| 12 | 12 | |
| 13 | 13 | oldconfig: false, |
| 14 | 14 | config: $.webfonts.config, |
| 15 | | - /* Version number */ |
| 16 | | - version: "0.1.2", |
| | 15 | + version: '0.1.2', |
| 17 | 16 | fonts : [], |
| 18 | 17 | set: function( font ) { |
| 19 | | - if ( !font || font === "none" ) { |
| | 18 | + if ( !font || font === 'none' ) { |
| 20 | 19 | $.webfonts.reset(); |
| 21 | 20 | return; |
| 22 | 21 | } |
| 23 | 22 | |
| 24 | 23 | if ( !( font in $.webfonts.config.fonts ) ) { |
| 25 | | - mw.log( "Requested unknown font", font ); |
| | 24 | + mw.log( 'Requested unknown font', font ); |
| 26 | 25 | return; |
| 27 | 26 | } |
| 28 | 27 | var config = $.webfonts.config.fonts[font]; |
| 29 | 28 | |
| 30 | | - //load the style sheet for the font |
| | 29 | + // Load the style sheet for the font |
| 31 | 30 | $.webfonts.addFont( font ); |
| 32 | 31 | |
| 33 | | - //save the current font and its size. Used for reset. |
| | 32 | + // Save the current font and its size. Used for reset. |
| 34 | 33 | if ( !$.webfonts.oldconfig ) { |
| 35 | 34 | var $body = $( 'body' ); |
| 36 | 35 | $.webfonts.oldconfig = { |
| 37 | | - "font-family": $body.css( 'font-family' ), |
| 38 | | - "font-size": $body.css( 'font-size' ) |
| | 36 | + fontFamily: $body.css( 'font-family' ), |
| | 37 | + fontSize: $body.css( 'font-size' ) |
| 39 | 38 | }; |
| 40 | 39 | } |
| 41 | 40 | |
| 42 | | - //Set the font, fallback fonts.Need to change the fonts of Input Select and Textarea explicitly. |
| 43 | | - $( 'body, input, select, textarea' ).css( 'font-family', "'"+ font +"', Helvetica, Arial, sans-serif" ); |
| | 41 | + // Set the font, fallback fonts.Need to change the fonts of Input Select and Textarea explicitly. |
| | 42 | + $( 'body, input, select, textarea' ).css( 'font-family', '"' + font + '", Helvetica, Arial, sans-serif' ); |
| 44 | 43 | |
| 45 | 44 | if ( 'normalization' in config ) { |
| 46 | 45 | $( document ).ready( function() { |
| 47 | 46 | $.webfonts.normalize( config.normalization ); |
| 48 | 47 | } ); |
| 49 | 48 | } |
| 50 | | - //set the font option in cookie |
| | 49 | + // Store the font choise in cookie |
| 51 | 50 | $.cookie( 'webfonts-font', font, { 'path': '/', 'expires': 30 } ); |
| 52 | 51 | |
| 53 | 52 | // If we had reset the fonts for tags with lang attribute, apply the fonts again. |
| — | — | @@ -58,17 +57,16 @@ |
| 59 | 58 | */ |
| 60 | 59 | reset: function() { |
| 61 | 60 | $( 'body' ).css( { |
| 62 | | - 'font-family': $.webfonts.oldconfig["font-family"], |
| 63 | | - //reset the font size from old configuration |
| 64 | | - 'font-size': $.webfonts.oldconfig[ "font-size" ] |
| | 61 | + fontFamily: $.webfonts.oldconfig.fontFamily, |
| | 62 | + fontSize: $.webfonts.oldconfig.fontSize |
| 65 | 63 | }); |
| 66 | | - //we need to reset the fonts of Input and Select explicitly. |
| 67 | | - $( 'input, select' ).css( 'font-family', $.webfonts.oldconfig["font-family"] ); |
| | 64 | + // We need to reset the font family of Input and Select explicitly. |
| | 65 | + $( 'input, select' ).css( 'font-family', $.webfonts.oldconfig.fontFamily ); |
| 68 | 66 | |
| 69 | 67 | // Reset the fonts applied for tags with lang attribute. |
| 70 | 68 | $( '.webfonts-lang-attr' ).css( 'font-family', 'none' ).removeClass( 'webfonts-lang-attr' ); |
| 71 | 69 | |
| 72 | | - //remove the cookie |
| | 70 | + // Remove the cookie |
| 73 | 71 | $.cookie( 'webfonts-font', 'none', { 'path': '/', 'expires': 30 } ); |
| 74 | 72 | }, |
| 75 | 73 | |
| — | — | @@ -78,8 +76,8 @@ |
| 79 | 77 | */ |
| 80 | 78 | normalize: function( normalizationRules ) { |
| 81 | 79 | $.each( normalizationRules, function( search, replace ) { |
| 82 | | - var searchPattern = new RegExp( search,"g" ); |
| 83 | | - return $( '*' ).each(function() { |
| | 80 | + var searchPattern = new RegExp( search, 'g' ); |
| | 81 | + return $( '*' ).each( function() { |
| 84 | 82 | var node = this.firstChild, |
| 85 | 83 | val, newVal; |
| 86 | 84 | if ( node ) { |
| — | — | @@ -97,35 +95,39 @@ |
| 98 | 96 | } ); |
| 99 | 97 | }, |
| 100 | 98 | |
| 101 | | - /* |
| 102 | | - * Construct the css required for the fontfamily, inject it to the head of the body |
| | 99 | + /** |
| | 100 | + * Construct the CSS required for the font-family, inject it to the head of the body |
| 103 | 101 | * so that it gets loaded. |
| 104 | | - * @param fontfamily The fontfamily name |
| | 102 | + * @param fontFamily The font-family name |
| 105 | 103 | */ |
| 106 | | - loadcss: function( fontfamily ) { |
| 107 | | - var fontconfig = $.webfonts.config.fonts[fontfamily]; |
| 108 | | - var base = mw.config.get( "wgExtensionAssetsPath" ) + "/WebFonts/fonts/"; |
| | 104 | + loadCSS: function( fontFamily ) { |
| | 105 | + var fontconfig = $.webfonts.config.fonts[fontFamily]; |
| | 106 | + var base = mw.config.get( 'wgExtensionAssetsPath' ) + '/WebFonts/fonts/'; |
| 109 | 107 | var styleString = |
| 110 | 108 | "<style type='text/css'>\n@font-face {\n" |
| 111 | | - + "\tfont-family: '"+fontfamily+"';\n"; |
| | 109 | + + "\tfont-family: '"+fontFamily+"';\n"; |
| | 110 | + |
| 112 | 111 | if ( 'eot' in fontconfig ) { |
| 113 | 112 | styleString += "\tsrc: url('"+base+fontconfig.eot+"');\n"; |
| 114 | 113 | } |
| | 114 | + |
| 115 | 115 | styleString += "\tsrc: "; |
| 116 | 116 | // If the font is present locally, use it. |
| 117 | 117 | var ua = navigator.userAgent; |
| 118 | 118 | if( ua.match( /Android 2\.3/ ) == null ) { |
| 119 | 119 | // Android 2.3.x does not respect local() syntax. |
| 120 | 120 | // http://code.google.com/p/android/issues/detail?id=10609 |
| 121 | | - styleString += "local('"+fontfamily+"'),"; |
| | 121 | + styleString += "local('"+fontFamily+"'),"; |
| 122 | 122 | } |
| 123 | 123 | |
| 124 | 124 | if ( 'woff' in fontconfig ) { |
| 125 | 125 | styleString += "\t\turl('"+base+fontconfig.woff+"') format('woff'),"; |
| 126 | 126 | } |
| | 127 | + |
| 127 | 128 | if ( 'svg' in fontconfig ) { |
| 128 | | - styleString += "\t\turl('"+base+fontconfig.svg+"#"+fontfamily+"') format('svg'),"; |
| | 129 | + styleString += "\t\turl('"+base+fontconfig.svg+"#"+fontFamily+"') format('svg'),"; |
| 129 | 130 | } |
| | 131 | + |
| 130 | 132 | if ( 'ttf' in fontconfig ) { |
| 131 | 133 | styleString += "\t\turl('"+base+fontconfig.ttf+"') format('truetype');\n"; |
| 132 | 134 | } |
| — | — | @@ -137,18 +139,18 @@ |
| 138 | 140 | |
| 139 | 141 | }, |
| 140 | 142 | |
| 141 | | - /* |
| | 143 | + /** |
| 142 | 144 | * Add a font to the page. |
| 143 | 145 | * This method ensures that css are not duplicated and |
| 144 | 146 | * keep track of added fonts. |
| 145 | | - * @param fontFamilyName The fontfamily name |
| | 147 | + * @param fontFamilyName {String} The font-family name |
| 146 | 148 | */ |
| 147 | 149 | addFont: function( fontFamilyName ) { |
| 148 | | - // avoid duplication |
| 149 | | - if ( $.inArray( fontFamilyName, $.webfonts.fonts ) < 0 ){ |
| 150 | | - // check whether the requested font is available. |
| | 150 | + // Avoid duplicate loading |
| | 151 | + if ( $.inArray( fontFamilyName, $.webfonts.fonts ) === -1 ) { |
| | 152 | + // Check whether the requested font is available. |
| 151 | 153 | if ( fontFamilyName in $.webfonts.config.fonts ) { |
| 152 | | - $.webfonts.loadcss( fontFamilyName ); |
| | 154 | + $.webfonts.loadCSS( fontFamilyName ); |
| 153 | 155 | $.webfonts.fonts.push( fontFamilyName ); |
| 154 | 156 | } |
| 155 | 157 | } |
| — | — | @@ -166,8 +168,8 @@ |
| 167 | 169 | for ( var i = 0; i < requested.length; i++ ) { |
| 168 | 170 | if ( requested[i] in languages ) { |
| 169 | 171 | var fonts = languages[requested[i]]; |
| 170 | | - for ( var j = 0; j < fonts.length; j++) { |
| 171 | | - if ( $.inArray(fonts[j], config) === -1 ) { |
| | 172 | + for ( var j = 0; j < fonts.length; j++ ) { |
| | 173 | + if ( $.inArray( fonts[j], config ) === -1 ) { |
| 172 | 174 | config.push( fonts[j] ); |
| 173 | 175 | } |
| 174 | 176 | } |
| — | — | @@ -180,7 +182,7 @@ |
| 181 | 183 | var cookieFont = $.cookie( 'webfonts-font' ); |
| 182 | 184 | var selectedFont = null; |
| 183 | 185 | // check whether this font is for the current userlang/contentlang |
| 184 | | - if ( $.inArray( cookieFont, config ) !== -1){ |
| | 186 | + if ( $.inArray( cookieFont, config ) !== -1 ) { |
| 185 | 187 | selectedFont = cookieFont; |
| 186 | 188 | } |
| 187 | 189 | else{ |
| — | — | @@ -190,13 +192,14 @@ |
| 191 | 193 | } |
| 192 | 194 | if ( selectedFont && selectedFont !== 'none' ) { |
| 193 | 195 | $.webfonts.set( selectedFont ); |
| 194 | | - //mark it as checked |
| | 196 | + // Mark it as checked |
| 195 | 197 | $( '#'+fontID( selectedFont ) ).prop( 'checked', true ); |
| 196 | 198 | } |
| 197 | 199 | |
| 198 | 200 | $.webfonts.loadFontsForFontFamilyStyle(); |
| 199 | 201 | $.webfonts.loadFontsForLangAttr(); |
| 200 | | - if ( $('.webfonts-lang-attr').length && !$( '#webfonts-fontsmenu' ).length ) { |
| | 202 | + |
| | 203 | + if ( $( '.webfonts-lang-attr' ).length && !$( '#webfonts-fontsmenu' ).length ) { |
| 201 | 204 | // We need to show the reset option even if there is no font to show |
| 202 | 205 | // for the language, if there is lang attr based font embedding. |
| 203 | 206 | $.webfonts.buildMenu( config ); |
| — | — | @@ -209,14 +212,13 @@ |
| 210 | 213 | */ |
| 211 | 214 | loadFontsForLangAttr: function() { |
| 212 | 215 | var languages = $.webfonts.config.languages; |
| 213 | | - //if there are tags with lang attribute, |
| | 216 | + // If there are tags with lang attribute, |
| 214 | 217 | $( 'body' ).find( '*[lang]' ).each( function( index ) { |
| 215 | | - //check the availability of font. |
| 216 | | - //add a font-family style if it does not have any |
| 217 | | - if( languages[this.lang] && ( !this.style.fontFamily || this.style.fontFamily == "none" ) ) { |
| | 218 | + // .. check the availability of font, add a font-family style if it does not have any |
| | 219 | + if( languages[this.lang] && ( !this.style.fontFamily || this.style.fontFamily === 'none' ) ) { |
| 218 | 220 | fontFamily = languages[this.lang][0]; |
| 219 | 221 | $.webfonts.addFont( fontFamily ); |
| 220 | | - $(this).css('font-family', fontFamily).addClass('webfonts-lang-attr'); |
| | 222 | + $(this).css( 'font-family', fontFamily ).addClass( 'webfonts-lang-attr' ); |
| 221 | 223 | } |
| 222 | 224 | }); |
| 223 | 225 | |
| — | — | @@ -228,13 +230,13 @@ |
| 229 | 231 | */ |
| 230 | 232 | loadFontsForFontFamilyStyle: function() { |
| 231 | 233 | var languages = $.webfonts.config.languages; |
| 232 | | - //if there are tags with font-family style definition, get a list of fonts to be loaded |
| 233 | | - $( 'body' ).find( '*[style]' ).each(function( index ) { |
| | 234 | + // If there are tags with font-family style definition, get a list of fonts to be loaded |
| | 235 | + $( 'body' ).find( '*[style]' ).each( function( index ) { |
| 234 | 236 | if( this.style.fontFamily ) { |
| 235 | | - var fontFamilyItems = this.style.fontFamily.split( "," ); |
| | 237 | + var fontFamilyItems = this.style.fontFamily.split( ',' ); |
| 236 | 238 | $.each( fontFamilyItems, function( index, fontFamily ) { |
| 237 | | - //remove the ' characters if any. |
| 238 | | - fontFamily = fontFamily.replace(/'/g, ''); |
| | 239 | + // Remove the ' characters if any. |
| | 240 | + fontFamily = fontFamily.replace( /'/g, '' ); |
| 239 | 241 | $.webfonts.addFont( fontFamily ); |
| 240 | 242 | }); |
| 241 | 243 | } |
| — | — | @@ -249,18 +251,18 @@ |
| 250 | 252 | buildMenu: function(config) { |
| 251 | 253 | var haveSchemes = false; |
| 252 | 254 | // Build font dropdown |
| 253 | | - var $fontsMenu = $( '<ul>' ).attr('id','webfonts-fontsmenu'); |
| 254 | | - $fontsMenu.delegate( 'input:radio', 'change', function( event ) { |
| | 255 | + var $fontsMenu = $( '<ul>' ).attr( 'id', 'webfonts-fontsmenu' ); |
| | 256 | + $fontsMenu.delegate( 'input:radio', 'change', function( e ) { |
| 255 | 257 | $.webfonts.set( $(this).val() ); |
| 256 | 258 | } ); |
| 257 | 259 | for ( var scheme in config ) { |
| 258 | 260 | var $fontLink = $( '<input type="radio" />' ) |
| 259 | | - .attr( "name", "font" ) |
| 260 | | - .attr( "id", fontID( config[scheme] ) ) |
| | 261 | + .attr( 'name', 'font' ) |
| | 262 | + .attr( 'id', fontID( config[scheme] ) ) |
| 261 | 263 | .val( config[scheme] ); |
| 262 | 264 | |
| 263 | 265 | var $fontLabel = $( '<label>' ) |
| 264 | | - .attr( "for",fontID(config[scheme] ) ) |
| | 266 | + .attr( 'for',fontID(config[scheme] ) ) |
| 265 | 267 | .append( $fontLink ) |
| 266 | 268 | .append( config[scheme] ); |
| 267 | 269 | |
| — | — | @@ -274,24 +276,24 @@ |
| 275 | 277 | |
| 276 | 278 | } |
| 277 | 279 | |
| 278 | | - if ( !haveSchemes && !$('.webfonts-lang-attr').length ) { |
| | 280 | + if ( !haveSchemes && !$( '.webfonts-lang-attr' ).length ) { |
| 279 | 281 | // No schemes available, and no tags with lang attr |
| 280 | 282 | // with fonts loaded. Don't show the menu. |
| 281 | 283 | return; |
| 282 | 284 | } |
| 283 | 285 | |
| 284 | 286 | var $resetLink = $( '<input type="radio" />' ) |
| 285 | | - .attr( "name","font" ) |
| 286 | | - .attr( "value","webfont-none" ) |
| 287 | | - .attr( "id","webfont-none" ) |
| 288 | | - .click( function( event ) { |
| | 287 | + .attr( 'name', 'font' ) |
| | 288 | + .attr( 'value', 'webfont-none' ) |
| | 289 | + .attr( 'id', 'webfont-none' ) |
| | 290 | + .click( function( e ) { |
| 289 | 291 | $.webfonts.set( 'none' ); |
| 290 | 292 | }); |
| 291 | 293 | |
| 292 | 294 | var $resetLabel = $( '<label>' ) |
| 293 | | - .attr( "for","webfont-none" ) |
| | 295 | + .attr( 'for', 'webfont-none' ) |
| 294 | 296 | .append( $resetLink ) |
| 295 | | - .append( mw.msg("webfonts-reset") ); |
| | 297 | + .append( mw.msg( 'webfonts-reset' ) ); |
| 296 | 298 | |
| 297 | 299 | var $resetLinkItem = $( '<li>' ) |
| 298 | 300 | .val( 'none' ) |
| — | — | @@ -299,30 +301,34 @@ |
| 300 | 302 | |
| 301 | 303 | $fontsMenu.append( $resetLinkItem ); |
| 302 | 304 | |
| 303 | | - var $menuDiv = $( '<div>' ).attr('id','webfonts-fonts') |
| 304 | | - .addClass( 'menu' ) |
| 305 | | - .append( $fontsMenu ) |
| 306 | | - .append(); |
| | 305 | + var $menuDiv = $( '<div>' ) |
| | 306 | + .attr( 'id', 'webfonts-fonts' ) |
| | 307 | + .addClass( 'menu' ) |
| | 308 | + .append( $fontsMenu ) |
| | 309 | + .append(); |
| 307 | 310 | |
| 308 | | - var $div = $( '<div>' ).attr( 'id','webfonts-menu' ) |
| | 311 | + var $div = $( '<div>' ) |
| | 312 | + .attr( 'id', 'webfonts-menu' ) |
| 309 | 313 | .addClass( 'webfontMenu' ) |
| 310 | | - .append( $( '<a>' ).prop( 'href', '#' ).append( mw.msg( "webfonts-load" ) ) ) |
| | 314 | + .append( $( '<a>' ).prop( 'href', '#' ).append( mw.msg( 'webfonts-load' ) ) ) |
| 311 | 315 | .append( $menuDiv ); |
| 312 | 316 | |
| 313 | | - //this is the fonts link |
| 314 | | - var $li = $( '<li>' ).attr( 'id','pt-webfont' ) |
| | 317 | + // This is the fonts link |
| | 318 | + var $li = $( '<li>' ) |
| | 319 | + .attr( 'id', 'pt-webfont' ) |
| 315 | 320 | .append( $div ); |
| 316 | 321 | |
| 317 | | - //if rtl, add to the right of top personal links. Else, to the left |
| 318 | | - var fn = $( 'body' ).hasClass( 'rtl' ) ? "append" : "prepend"; |
| | 322 | + // If RTL, add to the right of top personal links. Else, to the left |
| | 323 | + var fn = $( 'body' ).hasClass( 'rtl' ) ? 'append' : 'prepend'; |
| 319 | 324 | $( '#p-personal ul:first' )[fn]( $li ); |
| 320 | | - //workaround for IE bug - activex components like input fields coming on top of everything. |
| 321 | | - //TODO: is there a better solution other than hiding it on hover? |
| | 325 | + |
| | 326 | + // Workaround for IE bug - ActiveX components like input fields coming on top of everything. |
| | 327 | + // @todo Is there a better solution other than hiding it on hover? |
| 322 | 328 | if ( $.browser.msie ) { |
| 323 | | - $( '#webfonts-menu' ).hover( function( ) { |
| 324 | | - $( '#searchform' ).css({ visibility: "hidden" } ); |
| | 329 | + $( '#webfonts-menu' ).hover( function() { |
| | 330 | + $( '#searchform' ).css({ visibility: 'hidden' } ); |
| 325 | 331 | }, function( ) { |
| 326 | | - $( '#searchform' ).css( { visibility: "visible" } ); |
| | 332 | + $( '#searchform' ).css( { visibility: 'visible' } ); |
| 327 | 333 | } ); |
| 328 | 334 | } |
| 329 | 335 | } |