After training the PHPStorm code formatter.
See https://github.com/siebrand/MediaWiki-PHPStorm Issue remains with anonymous functions in JavaScript. Change-Id: I2b520f8df127452acf02deb659277a6465e6ca59
This commit is contained in:
Siebrand Mazeland
@@ -1,38 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
|
||||
<!--
|
||||
Always force latest IE rendering engine (even in intranet) & Chrome Frame
|
||||
Remove this if you use the .htaccess
|
||||
-->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
||||
<!--
|
||||
Always force latest IE rendering engine (even in intranet) & Chrome Frame
|
||||
Remove this if you use the .htaccess
|
||||
-->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
||||
|
||||
<title>Universal Language Selector</title>
|
||||
<!-- <link rel="shortcut icon" href="/favicon.ico"/> -->
|
||||
<!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> -->
|
||||
<!-- <meta name="description" content=""/> -->
|
||||
<meta name="author" content="Santhosh Thottingal"/>
|
||||
<link href="../lib/jquery.uls/css/jquery.uls.grid.css" rel="stylesheet"/>
|
||||
<link href="../lib/jquery.uls/css/jquery.uls.css" rel="stylesheet"/>
|
||||
<link href="../resources/css/ext.uls.css" rel="stylesheet"/>
|
||||
<!-- Libs -->
|
||||
<script src="../lib/jquery.uls/examples/resources/jquery.js"></script>
|
||||
<script src="../lib/jquery.webfonts.js"></script>
|
||||
<!-- Source -->
|
||||
<link href="../resources/css/ext.languagesettings.css" rel="stylesheet"/>
|
||||
<script src="../resources/js/ext.uls.languagesettings.js"></script>
|
||||
<script src="../resources/js/ext.uls.displaysettings.js"></script>
|
||||
<script src="../resources/js/ext.uls.webfonts.js"></script>
|
||||
<script>
|
||||
$( document ).ready( function() {
|
||||
$( '.uls-languagesettings-trigger' ).languagesettings();
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<title>Universal Language Selector</title>
|
||||
<!-- <link rel="shortcut icon" href="/favicon.ico"/> -->
|
||||
<!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> -->
|
||||
<!-- <meta name="description" content=""/> -->
|
||||
<meta name="author" content="Santhosh Thottingal"/>
|
||||
<link href="../lib/jquery.uls/css/jquery.uls.grid.css" rel="stylesheet"/>
|
||||
<link href="../lib/jquery.uls/css/jquery.uls.css" rel="stylesheet"/>
|
||||
<link href="../resources/css/ext.uls.css" rel="stylesheet"/>
|
||||
<!-- Libs -->
|
||||
<script src="../lib/jquery.uls/examples/resources/jquery.js"></script>
|
||||
<script src="../lib/jquery.webfonts.js"></script>
|
||||
<!-- Source -->
|
||||
<link href="../resources/css/ext.languagesettings.css" rel="stylesheet"/>
|
||||
<script src="../resources/js/ext.uls.languagesettings.js"></script>
|
||||
<script src="../resources/js/ext.uls.displaysettings.js"></script>
|
||||
<script src="../resources/js/ext.uls.webfonts.js"></script>
|
||||
<script>
|
||||
$( document ).ready( function () {
|
||||
$( '.uls-languagesettings-trigger' ).languagesettings();
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="#" class="uls-languagesettings-trigger">Language Settings</a>
|
||||
</body>
|
||||
<body>
|
||||
<a href="#" class="uls-languagesettings-trigger">Language Settings</a>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -24,7 +24,7 @@ class LanguageSearchTest extends PHPUnit_Framework_TestCase {
|
||||
* @dataProvider searchDataProvider
|
||||
*/
|
||||
public function testSearch( $searchKey, $result ) {
|
||||
$this->assertEquals( $result, LanguageNameSearch::search( $searchKey, 1 ) );
|
||||
$this->assertEquals( $result, LanguageNameSearch::search( $searchKey, 1 ) );
|
||||
}
|
||||
|
||||
public function searchDataProvider() {
|
||||
|
||||
@@ -18,123 +18,148 @@
|
||||
*/
|
||||
|
||||
( function () {
|
||||
"use strict";
|
||||
"use strict";
|
||||
|
||||
module( "ext.uls", QUnit.newMwEnvironment() );
|
||||
module( "ext.uls", QUnit.newMwEnvironment() );
|
||||
|
||||
/*
|
||||
* Runs over all script codes mentioned in langdb and checks whether
|
||||
* they belong to the 'Other' group.
|
||||
*/
|
||||
var orphanScripts = function () {
|
||||
var result = [];
|
||||
/*
|
||||
* Runs over all script codes mentioned in langdb and checks whether
|
||||
* they belong to the 'Other' group.
|
||||
*/
|
||||
var orphanScripts = function () {
|
||||
var result = [];
|
||||
|
||||
for ( var language in $.uls.data.languages ) {
|
||||
var script = $.uls.data.script( language );
|
||||
if ( $.uls.data.groupOfScript( script ) === 'Other' ) {
|
||||
result.push( script );
|
||||
for ( var language in $.uls.data.languages ) {
|
||||
var script = $.uls.data.script( language );
|
||||
if ( $.uls.data.groupOfScript( script ) === 'Other' ) {
|
||||
result.push( script );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
return result;
|
||||
};
|
||||
|
||||
/*
|
||||
* Runs over all script codes mentioned in langdb and checks whether
|
||||
* they have something that looks like an autonym.
|
||||
*/
|
||||
var languagesWithoutAutonym = function () {
|
||||
var result = [];
|
||||
/*
|
||||
* Runs over all script codes mentioned in langdb and checks whether
|
||||
* they have something that looks like an autonym.
|
||||
*/
|
||||
var languagesWithoutAutonym = function () {
|
||||
var result = [];
|
||||
|
||||
for ( var language in $.uls.data.languages ) {
|
||||
if ( typeof $.uls.data.autonym( language ) !== 'string' ) {
|
||||
result.push( language );
|
||||
for ( var language in $.uls.data.languages ) {
|
||||
if ( typeof $.uls.data.autonym( language ) !== 'string' ) {
|
||||
result.push( language );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
return result;
|
||||
};
|
||||
|
||||
test( "-- Initial check", function() {
|
||||
expect( 1 );
|
||||
ok( $.fn.uls, "$.fn.uls is defined" );
|
||||
} );
|
||||
test( "-- Initial check", function () {
|
||||
expect( 1 );
|
||||
ok( $.fn.uls, "$.fn.uls is defined" );
|
||||
} );
|
||||
|
||||
test( "-- $.uls.data testing", function() {
|
||||
expect( 25 );
|
||||
test( "-- $.uls.data testing", function () {
|
||||
expect( 25 );
|
||||
|
||||
strictEqual( $.uls.data.autonyms()['he'], 'עברית', 'Correct autonym is returned for Hebrew using autonyms().' );
|
||||
strictEqual( $.uls.data.autonyms()['he'], 'עברית', 'Correct autonym is returned for Hebrew using autonyms().' );
|
||||
|
||||
// This test assumes that we don't want any scripts to be in the 'Other'
|
||||
// group. Actually, this may become wrong some day.
|
||||
deepEqual( orphanScripts(), [], 'All scripts belong to script groups.' );
|
||||
deepEqual( languagesWithoutAutonym(), [], 'All languages have autonyms.' );
|
||||
// This test assumes that we don't want any scripts to be in the 'Other'
|
||||
// group. Actually, this may become wrong some day.
|
||||
deepEqual( orphanScripts(), [], 'All scripts belong to script groups.' );
|
||||
deepEqual( languagesWithoutAutonym(), [], 'All languages have autonyms.' );
|
||||
|
||||
strictEqual(
|
||||
$.uls.data.groupOfScript( 'Beng' ),
|
||||
'SouthAsian',
|
||||
'Bengali script belongs to the SouthAsian group.'
|
||||
);
|
||||
strictEqual(
|
||||
$.uls.data.scriptGroupOfLanguage( 'iu' ),
|
||||
'NativeAmerican',
|
||||
'The script of the Inupiaq language belongs to the NativeAmerican group.'
|
||||
);
|
||||
strictEqual(
|
||||
$.uls.data.groupOfScript( 'Beng' ),
|
||||
'SouthAsian',
|
||||
'Bengali script belongs to the SouthAsian group.'
|
||||
);
|
||||
strictEqual(
|
||||
$.uls.data.scriptGroupOfLanguage( 'iu' ),
|
||||
'NativeAmerican',
|
||||
'The script of the Inupiaq language belongs to the NativeAmerican group.'
|
||||
);
|
||||
|
||||
strictEqual( $.uls.data.script( 'ii' ), 'Yiii', 'Correct script of the Yi language was selected' );
|
||||
deepEqual( $.uls.data.regions( 'lzz' ), [ 'EU', 'ME' ], 'Correct regions of the Laz language were selected' );
|
||||
strictEqual( $.uls.data.regions( 'no-such-language' ), 'UNKNOWN', "The region of an invalid language is 'UNKNOWN'" );
|
||||
strictEqual( $.uls.data.script( 'ii' ), 'Yiii', 'Correct script of the Yi language was selected' );
|
||||
deepEqual( $.uls.data.regions( 'lzz' ), [
|
||||
'EU', 'ME'
|
||||
], 'Correct regions of the Laz language were selected' );
|
||||
strictEqual( $.uls.data.regions( 'no-such-language' ), 'UNKNOWN', "The region of an invalid language is 'UNKNOWN'" );
|
||||
|
||||
var allLanguagesByRegionAndScript = $.uls.data.allLanguagesByRegionAndScript();
|
||||
deepEqual( allLanguagesByRegionAndScript['4']['AS']['SouthEastAsian']['Bugi'], ['bug'], 'All languages in the Buginese script in Asia were selected' );
|
||||
var allLanguagesByRegionAndScript = $.uls.data.allLanguagesByRegionAndScript();
|
||||
deepEqual( allLanguagesByRegionAndScript['4']['AS']['SouthEastAsian']['Bugi'], [
|
||||
'bug'
|
||||
], 'All languages in the Buginese script in Asia were selected' );
|
||||
|
||||
deepEqual( $.uls.data.languagesInRegion( "PA" ),
|
||||
["ace", "bi", "ch", "en-gb", "en", "fj", "haw", "hif-latn", "hif", "ho", "jv",
|
||||
"mh", "mi", "na", "niu", "pih", "pis", "pt", "rtm", "sm", "tet",
|
||||
"to", "tpi", "ty", "wls"],
|
||||
deepEqual( $.uls.data.languagesInRegion( "PA" ),
|
||||
[
|
||||
"ace", "bi", "ch", "en-gb", "en", "fj", "haw", "hif-latn", "hif", "ho", "jv",
|
||||
"mh", "mi", "na", "niu", "pih", "pis", "pt", "rtm", "sm", "tet",
|
||||
"to", "tpi", "ty", "wls"
|
||||
],
|
||||
"languages of region PA are selected correctly" );
|
||||
deepEqual( $.uls.data.languagesInRegions( ["AM", "WW"] ),
|
||||
[
|
||||
"akz", "arn", "aro", "ase", "avk", "ay", "cho", "chr", "chy", "cr-cans", "cr-latn", "cr",
|
||||
"en-ca", "en", "eo", "es-419", "es-formal", "es", "esu", "fr",
|
||||
"gcf", "gn", "guc", "haw", "ht", "ia", "ie", "ik", "ike-cans", "ike-latn", "io", "iu",
|
||||
"jam", "jbo", "kgp", "kl", "lad", "lfn", "mfe", "mic", "mus", "nah", "nl-informal", "nl", "nov", "nv",
|
||||
"pap", "pdc", "pdt", "ppl", "pt-br", "pt", "qu", "qug", "rap", "sei", "simple", "srn", "tokipona",
|
||||
"vo", "yi", "yrl", "yua"
|
||||
],
|
||||
"languages of regions AM and WW are selected correctly"
|
||||
);
|
||||
deepEqual( $.uls.data.languagesInRegions( ["AM", "WW"] ),
|
||||
[
|
||||
"akz", "arn", "aro", "ase", "avk", "ay", "cho", "chr", "chy", "cr-cans", "cr-latn",
|
||||
"cr", "en-ca", "en", "eo", "es-419", "es-formal", "es", "esu", "fr", "gcf", "gn",
|
||||
"guc", "haw", "ht", "ia", "ie", "ik", "ike-cans", "ike-latn", "io", "iu", "jam",
|
||||
"jbo", "kgp", "kl", "lad", "lfn", "mfe", "mic", "mus", "nah", "nl-informal", "nl",
|
||||
"nov", "nv", "pap", "pdc", "pdt", "ppl", "pt-br", "pt", "qu", "qug", "rap", "sei",
|
||||
"simple", "srn", "tokipona", "vo", "yi", "yrl", "yua"
|
||||
],
|
||||
"languages of regions AM and WW are selected correctly"
|
||||
);
|
||||
|
||||
deepEqual( $.uls.data.languagesInScript( 'Knda' ), ["kn", "tcy"], "languages in script Knda are selected correctly" );
|
||||
deepEqual( $.uls.data.languagesInScripts( ['Geor', 'Armn'] ),
|
||||
["hy", "ka", "xmf"],
|
||||
"languages in scripts Geor and Armn are selected correctly"
|
||||
);
|
||||
deepEqual( $.uls.data.languagesInScript( 'Knda' ), [
|
||||
"kn", "tcy"
|
||||
], "languages in script Knda are selected correctly" );
|
||||
deepEqual( $.uls.data.languagesInScripts( ['Geor', 'Armn'] ),
|
||||
["hy", "ka", "xmf"],
|
||||
"languages in scripts Geor and Armn are selected correctly"
|
||||
);
|
||||
|
||||
deepEqual( $.uls.data.regionsInGroup( 3 ), ["EU", "ME", "AF"], "regions in group 2 are selected correctly" );
|
||||
deepEqual( $.uls.data.regionsInGroup( 2 ), ["AM"], "regions in group 2 are selected correctly" );
|
||||
deepEqual( $.uls.data.regionsInGroup( 1 ), ["WW"], "regions in group 1 are selected correctly" );
|
||||
deepEqual( $.uls.data.regionsInGroup( 3 ), [
|
||||
"EU", "ME", "AF"
|
||||
], "regions in group 2 are selected correctly" );
|
||||
deepEqual( $.uls.data.regionsInGroup( 2 ), [
|
||||
"AM"
|
||||
], "regions in group 2 are selected correctly" );
|
||||
deepEqual( $.uls.data.regionsInGroup( 1 ), [
|
||||
"WW"
|
||||
], "regions in group 1 are selected correctly" );
|
||||
|
||||
var languagesByScriptInAM = $.uls.data.languagesByScriptInRegion( "AM" );
|
||||
deepEqual( languagesByScriptInAM['Cans'], ["cr-cans", "cr", "ike-cans", "iu"], "correct languages in Cans in AM selected" );
|
||||
var languagesByScriptInAM = $.uls.data.languagesByScriptInRegion( "AM" );
|
||||
deepEqual( languagesByScriptInAM['Cans'], [
|
||||
"cr-cans", "cr", "ike-cans", "iu"
|
||||
], "correct languages in Cans in AM selected" );
|
||||
|
||||
strictEqual( $.uls.data.autonym( 'pa' ), 'ਪੰਜਾਬੀ', 'Correct autonym of the Punjabi language was selected' );
|
||||
strictEqual( $.uls.data.autonym( 'pa' ), 'ਪੰਜਾਬੀ', 'Correct autonym of the Punjabi language was selected' );
|
||||
|
||||
var languagesByScriptGroupInEMEA = $.uls.data.languagesByScriptGroupInRegions( $.uls.data.regionsInGroup( 3 ) );
|
||||
deepEqual( languagesByScriptGroupInEMEA['WestCaucasian'], ['hy', 'ka', 'xmf'], 'Correct languages in WestCaucasian script group in EMEA selected' );
|
||||
var languagesByScriptGroupInEMEA = $.uls.data.languagesByScriptGroupInRegions( $.uls.data.regionsInGroup( 3 ) );
|
||||
deepEqual( languagesByScriptGroupInEMEA['WestCaucasian'], [
|
||||
'hy', 'ka', 'xmf'
|
||||
], 'Correct languages in WestCaucasian script group in EMEA selected' );
|
||||
|
||||
var allLanguagesByScriptGroup = $.uls.data.allLanguagesByScriptGroup();
|
||||
deepEqual( allLanguagesByScriptGroup['Greek'], ['el', 'grc', 'pnt', 'ruq-grek', 'tsd'], 'All languages in the Greek script found' );
|
||||
var allLanguagesByScriptGroup = $.uls.data.allLanguagesByScriptGroup();
|
||||
deepEqual( allLanguagesByScriptGroup['Greek'], [
|
||||
'el', 'grc', 'pnt', 'ruq-grek', 'tsd'
|
||||
], 'All languages in the Greek script found' );
|
||||
|
||||
deepEqual( $.uls.data.allRegions(), ["WW", "AM", "EU", "ME", "AF", "AS", "PA"], "All regions found" );
|
||||
deepEqual( $.uls.data.allRegions(), [
|
||||
"WW", "AM", "EU", "ME", "AF", "AS", "PA"
|
||||
], "All regions found" );
|
||||
|
||||
// autonyms: gn: avañe'ẽ, de: deutsch, hu: magyar, fi: suomi
|
||||
deepEqual( ['de', 'fi', 'gn', 'hu'].sort( $.uls.data.sortByAutonym ), ['gn', 'de', 'hu', 'fi'], 'Languages are correctly sorted by autonym' );
|
||||
// autonyms: gn: avañe'ẽ, de: deutsch, hu: magyar, fi: suomi
|
||||
deepEqual( ['de', 'fi', 'gn', 'hu'].sort( $.uls.data.sortByAutonym ), [
|
||||
'gn', 'de', 'hu', 'fi'
|
||||
], 'Languages are correctly sorted by autonym' );
|
||||
|
||||
strictEqual( $.uls.data.isRtl( "te" ), false, "Telugu language is not RTL" );
|
||||
strictEqual( $.uls.data.isRtl( "dv" ), true, "Divehi language is RTL" );
|
||||
strictEqual( $.uls.data.isRtl( "te" ), false, "Telugu language is not RTL" );
|
||||
strictEqual( $.uls.data.isRtl( "dv" ), true, "Divehi language is RTL" );
|
||||
|
||||
ok( $.inArray( "sah", $.uls.data.languagesInTerritory( "RU" ) ) > -1, "Sakha language is spoken in Russia" );
|
||||
} );
|
||||
ok( $.inArray( "sah", $.uls.data.languagesInTerritory( "RU" ) )
|
||||
> -1, "Sakha language is spoken in Russia" );
|
||||
} );
|
||||
|
||||
}() );
|
||||
|
||||
@@ -1,117 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta charset="utf-8"/>
|
||||
|
||||
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
|
||||
Remove this if you use the .htaccess -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
|
||||
Remove this if you use the .htaccess -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
||||
|
||||
<title>jQuery WebFonts Example</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="Santhosh Thottingal" />
|
||||
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<script src="../lib/jquery.uls/examples/resources/jquery.js"></script>
|
||||
<script src="../lib/jquery.webfonts.js"></script>
|
||||
<script src="../lib/jquery.uls/src/jquery.uls.data.js"></script>
|
||||
<script src="../lib/jquery.uls/src/jquery.uls.data.utils.js"></script>
|
||||
<script src="../resources/js/ext.uls.webfonts.repository.js"></script>
|
||||
<script>
|
||||
$( document ).ready(
|
||||
function() {
|
||||
$( 'div#webfonts-preview-area' ).webfonts( {
|
||||
repository : $.webfonts.repository
|
||||
} );
|
||||
// get an instance of WebFonts
|
||||
var $webfonts = $( 'div#webfonts-preview-area' ).data(
|
||||
'webfonts' );
|
||||
// Get a list of all fonts provided by WebFonts
|
||||
var fonts = $webfonts.list();
|
||||
var languages = $webfonts.languages();
|
||||
// Also test system fonts.
|
||||
var $fontSelector = $( 'select#fontselector' );
|
||||
var $langselector = $( 'select#language' );
|
||||
<title>jQuery WebFonts Example</title>
|
||||
<meta name="description" content=""/>
|
||||
<meta name="author" content="Santhosh Thottingal"/>
|
||||
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
|
||||
<link rel="shortcut icon" href="/favicon.ico"/>
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
|
||||
<script src="../lib/jquery.uls/examples/resources/jquery.js"></script>
|
||||
<script src="../lib/jquery.webfonts.js"></script>
|
||||
<script src="../lib/jquery.uls/src/jquery.uls.data.js"></script>
|
||||
<script src="../lib/jquery.uls/src/jquery.uls.data.utils.js"></script>
|
||||
<script src="../resources/js/ext.uls.webfonts.repository.js"></script>
|
||||
<script>
|
||||
$( document ).ready(
|
||||
function () {
|
||||
$( 'div#webfonts-preview-area' ).webfonts( {
|
||||
repository: $.webfonts.repository
|
||||
} );
|
||||
// get an instance of WebFonts
|
||||
var $webfonts = $( 'div#webfonts-preview-area' ).data(
|
||||
'webfonts' );
|
||||
// Get a list of all fonts provided by WebFonts
|
||||
var fonts = $webfonts.list();
|
||||
var languages = $webfonts.languages();
|
||||
// Also test system fonts.
|
||||
var $fontSelector = $( 'select#fontselector' );
|
||||
var $langselector = $( 'select#language' );
|
||||
|
||||
function listFonts(fonts) {
|
||||
$.merge( fonts, [ 'Sans', 'Serif' ] );
|
||||
$fontSelector.find('option').remove();
|
||||
$.each( fonts, function(key, font) {
|
||||
$fontSelector.append( $( "<option></option>" ).attr(
|
||||
"value", font ).text( font ) );
|
||||
} );
|
||||
$fontSelector.trigger( 'change' );
|
||||
}
|
||||
listFonts(fonts);
|
||||
$.each( languages, function(lang, language) {
|
||||
$langselector.append( $( "<option></option>" ).attr(
|
||||
"value", language ).text(language+ " - "+
|
||||
$.uls.data.autonym( language ) ) );
|
||||
} );
|
||||
$fontSelector.on( 'change', function() {
|
||||
var font = $fontSelector.find( 'option:selected' ).val();
|
||||
$webfonts.apply( font );
|
||||
} );
|
||||
$langselector.on( 'change', function() {
|
||||
var language = $langselector.find( 'option:selected' )
|
||||
.val();
|
||||
listFonts($webfonts.list(language));
|
||||
$( '#webfonts-preview-area' ).text( $.uls.data.autonym( language ) );
|
||||
} );
|
||||
} )
|
||||
</script>
|
||||
<style>
|
||||
div#webfonts-preview-toolbar {
|
||||
background-color: #F9F9F9;
|
||||
border: 1px solid #CCCCCC;
|
||||
border-radius: 4px 4px 0 0;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
position: relative;
|
||||
}
|
||||
function listFonts ( fonts ) {
|
||||
$.merge( fonts, ['Sans', 'Serif'] );
|
||||
$fontSelector.find( 'option' ).remove();
|
||||
$.each( fonts, function ( key, font ) {
|
||||
$fontSelector.append( $( "<option></option>" ).attr(
|
||||
"value", font ).text( font ) );
|
||||
} );
|
||||
$fontSelector.trigger( 'change' );
|
||||
}
|
||||
|
||||
div#webfonts-preview-area {
|
||||
border: 1px solid #CCCCCC;
|
||||
border-radius: 0 0 4px 4px;
|
||||
height: 150px;
|
||||
langselector line-height: 1.5em;
|
||||
overflow: auto;
|
||||
padding: 10px 5px;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
listFonts( fonts );
|
||||
$.each( languages, function ( lang, language ) {
|
||||
$langselector.append( $( "<option></option>" ).attr(
|
||||
"value", language ).text( language + " - " +
|
||||
$.uls.data.autonym( language ) ) );
|
||||
} );
|
||||
$fontSelector.on( 'change', function () {
|
||||
var font = $fontSelector.find( 'option:selected' ).val();
|
||||
$webfonts.apply( font );
|
||||
} );
|
||||
$langselector.on( 'change', function () {
|
||||
var language = $langselector.find( 'option:selected' )
|
||||
.val();
|
||||
listFonts( $webfonts.list( language ) );
|
||||
$( '#webfonts-preview-area' ).text( $.uls.data.autonym( language ) );
|
||||
} );
|
||||
} )
|
||||
</script>
|
||||
<style>
|
||||
div#webfonts-preview-toolbar {
|
||||
background-color: #F9F9F9;
|
||||
border: 1px solid #CCCCCC;
|
||||
border-radius: 4px 4px 0 0;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
}
|
||||
div#webfonts-preview-area {
|
||||
border: 1px solid #CCCCCC;
|
||||
border-radius: 0 0 4px 4px;
|
||||
height: 150px;
|
||||
langselector line-height: 1.5em;
|
||||
overflow: auto;
|
||||
padding: 10px 5px;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.langselector,.fontselector {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
select {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.langselector, .fontselector {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>jQuery WebFonts example</h1>
|
||||
</header>
|
||||
<div id='container'>
|
||||
<div id="webfonts-preview-toolbar">
|
||||
<div class='langselector'>
|
||||
Language: <select name="language" id="language">
|
||||
</select>
|
||||
</div>
|
||||
<div class='fontselector'>
|
||||
Font : <select id="fontselector"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div contenteditable="true" id="webfonts-preview-area">The quick brown fox jumps over the
|
||||
lazy dog</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<header>
|
||||
<h1>jQuery WebFonts example</h1>
|
||||
</header>
|
||||
<div id='container'>
|
||||
<div id="webfonts-preview-toolbar">
|
||||
<div class='langselector'>
|
||||
Language: <select name="language" id="language">
|
||||
</select>
|
||||
</div>
|
||||
<div class='fontselector'>
|
||||
Font : <select id="fontselector"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div contenteditable="true" id="webfonts-preview-area">The quick brown fox jumps over the
|
||||
lazy dog
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user