File: index.html

package info (click to toggle)
jquery-i18n-properties 1.2.7%2Bdfsg1-3
  • links: PTS, VCS
  • area: main
  • in suites: bookworm, sid
  • size: 1,780 kB
  • sloc: javascript: 298; makefile: 17; python: 16
file content (133 lines) | stat: -rw-r--r-- 5,295 bytes parent folder | download | duplicates (2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <title>jQuery.i18n.properties: Demo</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta http-equiv="content-script-type" content="text/javascript" />
      
      	<!-- JS -->
      	<script type="text/javascript" src="/usr/share/javascript/jquery/jquery.js"></script>
      	<script type="text/javascript" src="/usr/share/javascript/jquery-i18n-properties/jquery.i18n.properties.js"></script>
      	
      	<!-- CSS -->
        <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
		<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">	
		<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
      	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">
		
      
      <script type="text/javascript">
      	// load I18N bundles
		jQuery(document).ready(function() {
			loadBundles('pt_BR');
					
			// configure language combo box
			jQuery('#lang').change(function() {
				var selection = jQuery('#lang option:selected').val();
				loadBundles(selection != 'browser' ? selection : null);
				jQuery('#langBrowser').empty();
				if(selection == 'browser') {
					jQuery('#langBrowser').text('('+jQuery.i18n.browserLang()+')');
				}
			});
			
			// load files just for display purposes...
			jQuery('h4').each(function() {
				var file = 'bundle/' + jQuery(this).text();
				var code = jQuery(this).next().next('code');
				jQuery.get(file, function(data) {
					data = data.replace(/\n/mg, '<br/>');
					code.html(data);
				});
			});
			// ... and configure links to show/hide them
			jQuery('a.toggle').bind('click', function() {
			  jQuery(this).next('code').slideToggle();
				return false;
			});
		});
		
		function loadBundles(lang) {
			jQuery.i18n.properties({
			    name:'Messages', 
			    path:'bundle/', 
			    mode:'both',
			    language:lang, 
			    callback: function() {
			        updateExamples();
			    }
			});
		}
		
		function updateExamples() {
			// Accessing values through the map
			var ex1 = 'msg_hello';
			var ex2 = 'msg_complex'; var ex2P = 'John';
			var ex3 = 'msg_url'; var ex3P = 'solution_1';
			var ex4 = 'inexistent_key';
            var ex5 = 'msg_multi_placeholder'; var ex5P1 = 'beautiful'; var ex5P2 = 'fishing';
            var ex6 = 'msg_multi_placeholder_corrected'; var ex6P1 = 'beautiful'; var ex6P2 = 'fishing';
			jQuery('#mapExamples')
				.empty()
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex1+'\')</code>  -->  '+jQuery.i18n.prop(ex1)+'</li>')
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex2+'\',\''+ex2P+'\')</code>  -->  '+jQuery.i18n.prop(ex2, ex2P)+'</li>')
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex3+'\',\''+ex3P+'\')</code>  -->  '+jQuery.i18n.prop(ex3, ex3P)+'</li>')
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex4+'\')</code>  -->  '+jQuery.i18n.prop(ex4)+'</li>')
                .append('<li><code class="i18n">jQuery.i18n.prop(\''+ex5+'\',\''+ex5P1+'\',\''+ex5P2+'\')</code>  -->  '+jQuery.i18n.prop(ex5, ex5P1, ex5P2)+'</li>')
                .append('<li><code class="i18n">jQuery.i18n.prop(\''+ex6+'\',\''+ex6P1+'\',\''+ex6P2+'\')</code>  -->  '+jQuery.i18n.prop(ex6, ex6P1, ex6P2)+'</li>');
				
		
			// Accessing values through a JS variable
			var ex21 = 'msg_hello';
			var ex22 = 'msg_world';
			var ex23 = 'msg_complex'; var ex23P = 'John'; 
			var ex24 = 'inexistent_key';
			jQuery('#varExamples')
				.empty()
				.append('<li><code class="i18n">'+ex21+'</code>  -->  '+eval(ex21)+'</li>')
				.append('<li><code class="i18n">'+ex22+'</code>  -->  '+eval(ex22)+'</li>')
				.append('<li><code class="i18n">'+ex23+'(\''+ex23P+'\')</code>  -->  '+eval(ex23+'(\''+ex23P+'\')')+'</li>')
				.append('<li><code class="i18n">'+ex24+'</code>  -->  <small><i>(browser would report a missing JS symbol)</i></small></li>');
		}
      </script>
   </HEAD>
   
   <BODY>
      <h2>jQuery.i18n.properties :: Demo</h2>
      
      <div class="left">
        <h3>I18N Bundles</h3>
        <h4>Messages.properties</h4>
  	    <a href="#" class="toggle">[toggle contents]</a>
        <code class="files"></code><br/>
        
        <h4>Messages_pt.properties</h4>
        <a href="#" class="toggle">[toggle contents]</a>
        <code class="files"></code><br/>
        
        <h4>Messages_pt_BR.properties</h4>
        <a href="#" class="toggle">[toggle contents]</a>
        <code class="files"></code><p/><p/><p/>
        
        
        <h3>Examples</h3>
        <div id="langBox">
  	      Language:
  	      <select id="lang">
  			<option value="browser">Indicated by the browser</option>
  			<option value="en">en</option>
  			<option value="pt">pt</option>
  			<option value="pt_BR" selected>pt_BR</option>
  		  </select>
  		  <span id="langBrowser"></span>
  	  </div>
        
        <h4>Accessing values through the map</h4>
        <ul id="mapExamples"></ul>
        
        <h4>Accessing values through a JS variable</h4>
        <ul id="varExamples"></ul>
      </div>
   </BODY>
</HTML>