Update the test for webfonts
This was broken when jquery.uls moved to github Change-Id: I874fb96301726792e7d22d66e71406192c44cf9f
This commit is contained in:
Santhosh Thottingal
@@ -1,119 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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
|
||||
Remove this if you use the .htaccess -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
||||
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' );
|
||||
}
|
||||
|
||||
<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' );
|
||||
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;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.langselector, .fontselector {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
.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"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user