bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update the test for webfonts

Browse Source 
This was broken when jquery.uls moved to github

Change-Id: I874fb96301726792e7d22d66e71406192c44cf9f
This commit is contained in:
Santhosh Thottingal
2012-10-02 10:21:26 +05:30
parent 10edd7848e
commit 99936c2b80
1 changed files with 92 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
tests/webfonts.html
View File

@@ -1,119 +1,105 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8" />
<title>jQuery WebFonts Example</title>
<meta name="description" content="" />
<meta name="author" content="Santhosh Thottingal" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="../lib/jquery.webfonts.js"></script>
<script src="../lib/jquery.uls/jquery.uls.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' );
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame function listFonts ( fonts ) {
Remove this if you use the .htaccess --> $.merge( fonts, [ 'Sans', 'Serif' ] );
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> $fontSelector.find( 'option' ).remove();
$.each( fonts, function ( key, font ) {
$fontSelector.append( $( "<option></option>" )
.attr( "value", font ).text( font ) );
} );
$fontSelector.trigger( 'change' );
}
<title>jQuery WebFonts Example</title> listFonts( fonts );
<meta name="description" content=""/> $.each( languages, function ( lang, language ) {
<meta name="author" content="Santhosh Thottingal"/> $langselector.append( $( "<option></option>" )
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> .attr( "value", language )
<link rel="shortcut icon" href="/favicon.ico"/> .text( language + " - " + $.uls.data.autonym( language ) ) );
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/> } );
<script src="../lib/jquery.uls/examples/resources/jquery.js"></script> $fontSelector.on( 'change', function () {
<script src="../lib/jquery.webfonts.js"></script> var font = $fontSelector.find( 'option:selected' ).val();
<script src="../lib/jquery.uls/src/jquery.uls.data.js"></script> $webfonts.apply( font );
<script src="../lib/jquery.uls/src/jquery.uls.data.utils.js"></script> } );
<script src="../resources/js/ext.uls.webfonts.repository.js"></script> $langselector.on( 'change', function () {
<script> var language = $langselector.find( 'option:selected' ).val();
$( document ).ready( listFonts( $webfonts.list( language ) );
function () { $( '#webfonts-preview-area' ).text( $.uls.data.autonym( language ) );
$( 'div#webfonts-preview-area' ).webfonts( { } );
repository: $.webfonts.repository } )
} ); </script>
// get an instance of WebFonts <style>
var $webfonts = $( 'div#webfonts-preview-area' ).data( div#webfonts-preview-toolbar {
'webfonts' ); background-color: #F9F9F9;
// Get a list of all fonts provided by WebFonts border: 1px solid #CCCCCC;
var fonts = $webfonts.list(); border-radius: 4px 4px 0 0;
var languages = $webfonts.languages(); overflow: hidden;
// Also test system fonts. padding: 2px;
var $fontSelector = $( 'select#fontselector' ); position: relative;
var $langselector = $( 'select#language' ); }
function listFonts ( fonts ) { div#webfonts-preview-area {
$.merge( fonts, ['Sans', 'Serif'] ); border: 1px solid #CCCCCC;
$fontSelector.find( 'option' ).remove(); border-radius: 0 0 4px 4px;
$.each( fonts, function ( key, font ) { height: 150px;
$fontSelector.append( $( "<option></option>" ).attr( langselector line-height: 1.5em;
"value", font ).text( font ) ); overflow: auto;
} ); padding: 10px 5px;
$fontSelector.trigger( 'change' ); text-align: left;
} font-size: 16px;
}
listFonts( fonts ); select {
$.each( languages, function ( lang, language ) { width: 200px;
$langselector.append( $( "<option></option>" ).attr( height: 25px;
"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;
}
div#webfonts-preview-area { .langselector,.fontselector {
border: 1px solid #CCCCCC; float: left;
border-radius: 0 0 4px 4px; display: block;
height: 150px; }
langselector line-height: 1.5em; </style>
overflow: auto;
padding: 10px 5px;
text-align: left;
font-size: 16px;
}
select {
width: 200px;
height: 25px;
}
.langselector, .fontselector {
float: left;
display: block;
}
</style>
</head> </head>
<body> <body>
<div> <div>
<header> <header>
<h1>jQuery WebFonts example</h1> <h1>jQuery WebFonts example</h1>
</header> </header>
<div id='container'> <div id='container'>
<div id="webfonts-preview-toolbar"> <div id="webfonts-preview-toolbar">
<div class='langselector'> <div class='langselector'>
Language: <select name="language" id="language"> Language: <select name="language" id="language">
</select> </select>
</div> </div>
<div class='fontselector'> <div class='fontselector'>
Font : <select id="fontselector"></select> Font : <select id="fontselector"></select>
</div> </div>
</div> </div>
<div contenteditable="true" id="webfonts-preview-area">The quick brown fox jumps over the <div contenteditable="true" id="webfonts-preview-area"></div>
lazy dog </div>
</div> </div>
</div>
</div>
</body> </body>
</html> </html>