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

Reformat file

Browse Source 
Change-Id: I6f81f159550508718926e923631b9065650e8825
This commit is contained in:
Siebrand Mazeland
2013-08-05 10:47:18 +02:00
parent 47968cfb49
commit a9a55e1bee
1 changed files with 122 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
tests/webfonts.html
View File

@@ -1,16 +1,16 @@
<!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> <title>jQuery WebFonts Example</title>
<meta name="description" content="" /> <meta name="description" content=""/>
<meta name="author" content="Santhosh Thottingal" /> <meta name="author" content="Santhosh Thottingal"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../lib/jquery.webfonts.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.js"></script>
<script src="../lib/jquery.uls/src/jquery.uls.data.utils.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 src="../resources/js/ext.uls.webfonts.repository.js"></script>
<script> <script>
$( document ).ready( function () { $( document ).ready( function () {
var $webfonts, fonts, languages, $fontSelector, $langselector; var $webfonts, fonts, languages, $fontSelector, $langselector;
@@ -39,7 +39,7 @@
$fontSelector = $( 'select#fontselector' ); $fontSelector = $( 'select#fontselector' );
$langselector = $( 'select#language' ); $langselector = $( 'select#language' );
function listFonts ( fonts ) { function listFonts( fonts ) {
$.merge( fonts, [ 'Sans', 'Serif' ] ); $.merge( fonts, [ 'Sans', 'Serif' ] );
$fontSelector.find( 'option' ).remove(); $fontSelector.find( 'option' ).remove();
$.each( fonts, function ( key, font ) { $.each( fonts, function ( key, font ) {
@@ -57,26 +57,28 @@
} ); } );
$fontSelector.on( 'change', function () { $fontSelector.on( 'change', function () {
var font = $fontSelector.find( 'option:selected' ).val(); var font = $fontSelector.find( 'option:selected' ).val();
$webfonts.apply( font ); $webfonts.apply( font );
} ); } );
$langselector.on( 'change', function () { $langselector.on( 'change', function () {
var language = $langselector.find( 'option:selected' ).val(); var language = $langselector.find( 'option:selected' ).val();
listFonts( $webfonts.list( language ) ); listFonts( $webfonts.list( language ) );
$( '#webfonts-preview-area' ).text( $.uls.data.getAutonym( language ) ); $( '#webfonts-preview-area' ).text( $.uls.data.getAutonym( language ) );
} ); } );
} ) } )
</script> </script>
<style> <style>
div#webfonts-preview-toolbar { div#webfonts-preview-toolbar {
background-color: #F9F9F9; background-color: #F9F9F9;
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
overflow: hidden; overflow: hidden;
padding: 2px; padding: 2px;
position: relative; position: relative;
} }
div#webfonts-preview-area { div#webfonts-preview-area {
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
height: 150px; height: 150px;
@@ -85,37 +87,38 @@ div#webfonts-preview-area {
padding: 10px 5px; padding: 10px 5px;
text-align: left; text-align: left;
font-size: 16px; font-size: 16px;
} }
select { select {
width: 200px; width: 200px;
height: 25px; height: 25px;
} }
.langselector,.fontselector { .langselector,
.fontselector {
float: left; float: left;
display: block; display: block;
} }
#webfonts-preview-bold { #webfonts-preview-bold {
font-weight: bold; font-weight: bold;
} }
#webfonts-preview-italic { #webfonts-preview-italic {
font-style: italic; font-style: italic;
font-weight: bold; font-weight: bold;
} }
#webfonts-preview-underline { #webfonts-preview-underline {
text-decoration: underline; text-decoration: underline;
font-weight: bold; font-weight: bold;
} }
</style> </style>
</head> </head>
<body> <body>
<div> <div>
<header> <header>
<h1>jQuery WebFonts example</h1> <h1>jQuery WebFonts example</h1>
</header> </header>
@@ -135,6 +138,6 @@ select {
</div> </div>
<div contenteditable="true" id="webfonts-preview-area"></div> <div contenteditable="true" id="webfonts-preview-area"></div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>