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

Updated webfonts example

Browse Source 
Change-Id: I4296fd973da66c000cb4acf3e1ee387dfaf4fbcb
This commit is contained in:
Santhosh Thottingal
2012-08-29 11:34:03 +05:30
parent 0d5ff00223
commit 93ed9a3ae3
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
tests/webfonts.html
View File

@@ -31,21 +31,22 @@
var fonts = $webfonts.list(); var fonts = $webfonts.list();
var languages = $webfonts.languages(); var languages = $webfonts.languages();
// Also test system fonts. // Also test system fonts.
$.merge( fonts, [ 'Sans', 'Serif' ] );
var $fontSelector = $( 'select#fontselector' ); var $fontSelector = $( 'select#fontselector' );
var $langselector = $( 'select#language' ); var $langselector = $( 'select#language' );
function listFonts(fonts) { function listFonts(fonts) {
$.merge( fonts, [ 'Sans', 'Serif' ] );
$fontSelector.find('option').remove(); $fontSelector.find('option').remove();
$.each( fonts, function(key, font) { $.each( fonts, function(key, font) {
$fontSelector.append( $( "<option></option>" ).attr( $fontSelector.append( $( "<option></option>" ).attr(
"value", font ).text( font ) ); "value", font ).text( font ) );
} ); } );
$fontSelector.trigger( 'change' );
} }
listFonts(fonts); listFonts(fonts);
$.each( languages, function(lang, language) { $.each( languages, function(lang, language) {
$langselector.append( $( "<option></option>" ).attr( $langselector.append( $( "<option></option>" ).attr(
"value", language ).text( "value", language ).text(language+ " - "+
$.uls.data.autonym( language ) ) ); $.uls.data.autonym( language ) ) );
} ); } );
$fontSelector.on( 'change', function() { $fontSelector.on( 'change', function() {
@@ -56,6 +57,7 @@
var language = $langselector.find( 'option:selected' ) var language = $langselector.find( 'option:selected' )
.val(); .val();
listFonts($webfonts.list(language)); listFonts($webfonts.list(language));
$( '#webfonts-preview-area' ).text( $.uls.data.autonym( language ) );
} ); } );
} ) } )
</script> </script>
@@ -77,6 +79,12 @@ div#webfonts-preview-area {
overflow: auto; overflow: auto;
padding: 10px 5px; padding: 10px 5px;
text-align: left; text-align: left;
font-size: 16px;
}
select {
width: 200px;
height: 25px;
} }
.langselector,.fontselector { .langselector,.fontselector {
@@ -94,11 +102,11 @@ div#webfonts-preview-area {
<div id='container'> <div id='container'>
<div id="webfonts-preview-toolbar"> <div id="webfonts-preview-toolbar">
<div class='langselector'> <div class='langselector'>
Select Language: <select name="language" id="language"> Language: <select name="language" id="language">
</select> </select>
</div> </div>
<div class='fontselector'> <div class='fontselector'>
Select 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">The quick brown fox jumps over the