Add jquery.webfonts
Upstream : https://github.com/santhoshtr/jquery.webfonts Change-Id: I8cf90b8ea538505faedb4c5880357205e68a4288
This commit is contained in:
Santhosh Thottingal
@@ -101,4 +101,10 @@ $wgResourceModules['jquery.uls.data'] = array(
|
|||||||
),
|
),
|
||||||
'localBasePath' => $dir,
|
'localBasePath' => $dir,
|
||||||
'remoteExtPath' => 'UniversalLanguageSelector',
|
'remoteExtPath' => 'UniversalLanguageSelector',
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$wgResourceModules['jquery.webfonts'] = array(
|
||||||
|
'scripts' => 'lib/jquery.webfonts.js',
|
||||||
|
'localBasePath' => $dir,
|
||||||
|
'remoteExtPath' => 'UniversalLanguageSelector',
|
||||||
|
);
|
||||||
|
|||||||
285
lib/jquery.webfonts.js
Normal file
285
lib/jquery.webfonts.js
Normal file
@@ -0,0 +1,285 @@
|
|||||||
|
/**
|
||||||
|
* jQuery Webfonts.
|
||||||
|
*
|
||||||
|
* Copyright (C) 2012 Santhosh Thottingal
|
||||||
|
*
|
||||||
|
* 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($, window, document, undefined) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var WebFonts = function(element, options) {
|
||||||
|
// Load defaults
|
||||||
|
this.options = $.extend({}, $.fn.webfonts.defaults, options);
|
||||||
|
this.$element = $(element);
|
||||||
|
this.repository = $.extend(WebFonts.repository, this.options.repository);
|
||||||
|
this.fonts = [];
|
||||||
|
this.originalFontFamily = this.$element.css('font-family');
|
||||||
|
this.init();
|
||||||
|
};
|
||||||
|
|
||||||
|
WebFonts.repository = {
|
||||||
|
base : 'fonts', // Relative or absolute path to the font repository.
|
||||||
|
languages : {}, // languages to font mappings
|
||||||
|
fonts : {}, // Font name to font configuration mapping
|
||||||
|
|
||||||
|
// Utility methods to work on the repository.
|
||||||
|
defaultFont : function(language) {
|
||||||
|
var defaultFont;
|
||||||
|
if (this.languages[language]) {
|
||||||
|
return this.languages[language][0];
|
||||||
|
}
|
||||||
|
return defaultFont;
|
||||||
|
},
|
||||||
|
|
||||||
|
get : function(fontFamily) {
|
||||||
|
return this.fonts[fontFamily];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
WebFonts.prototype = {
|
||||||
|
constructor : WebFonts,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize.
|
||||||
|
*/
|
||||||
|
init : function() {
|
||||||
|
var language, fontFamily;
|
||||||
|
language = this.$element.attr('lang') || $('html').attr('lang');
|
||||||
|
if (language) {
|
||||||
|
fontFamily = this.repository.defaultFont(language);
|
||||||
|
this.apply(fontFamily);
|
||||||
|
}
|
||||||
|
this.parse();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply a font for the element.
|
||||||
|
* @param fontFamily String: font family name
|
||||||
|
*/
|
||||||
|
apply : function(fontFamily, $element) {
|
||||||
|
var fontStack;
|
||||||
|
$element = $element || this.$element;
|
||||||
|
fontStack = this.options.fontStack;
|
||||||
|
console.log("Applying font family " + fontFamily);
|
||||||
|
this.load(fontFamily);
|
||||||
|
fontStack.unshift(fontFamily);
|
||||||
|
$element.css('font-family', fontStack.join());
|
||||||
|
$element.find('textarea, input').css('font-family', fontStack.join());
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load a given fontFamily if not loaded already
|
||||||
|
* @param fontFamily String font family name
|
||||||
|
*/
|
||||||
|
load : function(fontFamily) {
|
||||||
|
if ($.inArray(fontFamily, this.fonts) >= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var styleString = this.getCSS(fontFamily);
|
||||||
|
if (styleString) {
|
||||||
|
injectCSS(styleString);
|
||||||
|
}
|
||||||
|
this.fonts.push(fontFamily);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse the element for custom font-family styles and
|
||||||
|
* for nodes with different language than element
|
||||||
|
*/
|
||||||
|
parse : function() {
|
||||||
|
var that = this;
|
||||||
|
that.$element.find('*[lang], [style], [class]').each(function(i, element) {
|
||||||
|
var fontFamilyStyle, fontFamily,
|
||||||
|
$element = $(element);
|
||||||
|
|
||||||
|
fontFamilyStyle = $element.css('fontFamily');
|
||||||
|
if (fontFamilyStyle) {
|
||||||
|
fontFamily = fontFamilyStyle.split(',')[0];
|
||||||
|
// Remove the ' and " characters if any.
|
||||||
|
fontFamily = $.trim(fontFamily.replace(/["']/g, ''));
|
||||||
|
that.load(fontFamily);
|
||||||
|
// Font family overrides lang attribute
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (element.lang && element.lang !== that.$element.attr('lang')) {
|
||||||
|
fontFamily = this.repository.defaultFont(element.lang);
|
||||||
|
that.apply(fontFamily, $(element));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* List all fonts for the given language
|
||||||
|
* @param language mixed: [optional] language code. If undefined all fonts will
|
||||||
|
* be listed
|
||||||
|
* @return Array font names array
|
||||||
|
*/
|
||||||
|
list : function(language) {
|
||||||
|
var fontName,
|
||||||
|
fontNames = [];
|
||||||
|
|
||||||
|
if (language) {
|
||||||
|
fontNames = this.repository.languages[language];
|
||||||
|
}
|
||||||
|
for (fontName in this.repository.fonts) {
|
||||||
|
if (this.repository.fonts.hasOwnProperty(fontName)) {
|
||||||
|
fontNames.push(fontName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return fontNames;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* List all languages supported by the repository
|
||||||
|
* @return Array language codes
|
||||||
|
*/
|
||||||
|
languages : function() {
|
||||||
|
var language,
|
||||||
|
languages = [];
|
||||||
|
for (language in this.repository.languages ) {
|
||||||
|
if (this.repository.languages.hasOwnProperty(language)) {
|
||||||
|
languages.push(language);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the font repository
|
||||||
|
* @param {Object} repository The font repository.
|
||||||
|
*/
|
||||||
|
setRepository : function(repository) {
|
||||||
|
this.repository = $.extend(WebFonts.repository, repository);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset the font-family style.
|
||||||
|
*/
|
||||||
|
reset : function() {
|
||||||
|
this.apply(this.originalFontFamily);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* unbind the plugin
|
||||||
|
*/
|
||||||
|
unbind : function() {
|
||||||
|
this.$element.data('webfonts', null);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Construct the CSS required for the font-family, inject it to the head of the
|
||||||
|
* body so that it gets loaded.
|
||||||
|
* @param fontFamily The font-family name
|
||||||
|
* @param variant The font variant, eg: bold, italic etc. Default is normal.
|
||||||
|
*/
|
||||||
|
getCSS : function(fontFamily, variant) {
|
||||||
|
var fontconfig, base, version, versionSuffix, styleString, userAgent, fontStyle, fontFormats;
|
||||||
|
|
||||||
|
variant = variant || 'normal';
|
||||||
|
fontconfig = this.repository.get(fontFamily);
|
||||||
|
if (variant !== 'normal') {
|
||||||
|
if (fontconfig.variants !== undefined && fontconfig.variants[variant]) {
|
||||||
|
fontFamily = fontconfig.variants[variant];
|
||||||
|
fontconfig = this.repository.get(fontFamily);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!fontconfig) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
base = this.repository.base;
|
||||||
|
version = fontconfig.version;
|
||||||
|
versionSuffix = "?version=" + version + '&20120101';
|
||||||
|
styleString = "@font-face { font-family: '" + fontFamily + "';\n";
|
||||||
|
userAgent = window.navigator.userAgent;
|
||||||
|
fontStyle = fontconfig.fontstyle || 'normal';
|
||||||
|
fontFormats = [];
|
||||||
|
|
||||||
|
if (fontconfig.eot) {
|
||||||
|
styleString += "\tsrc: url('" + base + fontconfig.eot + versionSuffix + "');\n";
|
||||||
|
}
|
||||||
|
styleString += "\tsrc: ";
|
||||||
|
// If the font is present locally, use it.
|
||||||
|
if (userAgent.match(/Android 2\.3/) === null) {
|
||||||
|
// Android 2.3.x does not respect local() syntax.
|
||||||
|
// http://code.google.com/p/android/issues/detail?id=10609
|
||||||
|
styleString += "local('" + fontFamily + "'),";
|
||||||
|
}
|
||||||
|
if (fontconfig.woff) {
|
||||||
|
fontFormats.push("\t\turl('" + base + fontconfig.woff + versionSuffix + "') format('woff')");
|
||||||
|
}
|
||||||
|
if (fontconfig.svg) {
|
||||||
|
fontFormats.push("\t\turl('" + base + fontconfig.svg + versionSuffix + "#" + fontFamily + "') format('svg')");
|
||||||
|
}
|
||||||
|
if (fontconfig.ttf) {
|
||||||
|
fontFormats.push("\t\turl('" + base + fontconfig.ttf + versionSuffix + "') format('truetype')");
|
||||||
|
}
|
||||||
|
styleString += fontFormats.join() + ";\n";
|
||||||
|
if (fontconfig.fontweight) {
|
||||||
|
styleString += "\tfont-weight:" + fontconfig.fontweight + ";";
|
||||||
|
}
|
||||||
|
styleString += "\tfont-style:" + fontStyle + ";";
|
||||||
|
styleString += "}";
|
||||||
|
return styleString;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.webfonts = function(option) {
|
||||||
|
return this.each(function() {
|
||||||
|
var $this, data, options;
|
||||||
|
$this = $(this);
|
||||||
|
data = $this.data('webfonts');
|
||||||
|
options = typeof option === 'object' && option;
|
||||||
|
if (!data) {
|
||||||
|
$this.data('webfonts', (data = new WebFonts(this, options)));
|
||||||
|
}
|
||||||
|
if (typeof option === 'string') {
|
||||||
|
data[option]();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.webfonts.defaults = {
|
||||||
|
repository : WebFonts.repository, // Default font repository
|
||||||
|
fontStack : ['Helvetica', 'Arial', 'sans-serif'] // Default font fall back series
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.webfonts.Constructor = WebFonts;
|
||||||
|
|
||||||
|
// Private methods for the WebFonts prototype
|
||||||
|
//=================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new style tag and add it to the DOM.
|
||||||
|
*
|
||||||
|
* @param text String: CSS text
|
||||||
|
* @return HTMLStyleElement
|
||||||
|
*/
|
||||||
|
function injectCSS(css) {
|
||||||
|
var s = document.createElement('style');
|
||||||
|
s.type = 'text/css';
|
||||||
|
s.rel = 'stylesheet';
|
||||||
|
// Insert into document before setting cssText
|
||||||
|
document.getElementsByTagName('head')[0].appendChild(s);
|
||||||
|
if (s.styleSheet) {
|
||||||
|
s.styleSheet.cssText = css;
|
||||||
|
// IE
|
||||||
|
} else {
|
||||||
|
// Safari sometimes borks on null
|
||||||
|
s.appendChild(document.createTextNode(String(css)));
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
}
|
||||||
|
|
||||||
|
} )(jQuery, window, document);
|
||||||
Reference in New Issue
Block a user