Revision 643537383536 () - Diff

Link to this snippet: https://friendpaste.com/2Wu3Ys1umMxZ95wnLpgoxP
Embed:
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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Reuse a compiled template - Show timezone current time</title>

	<script src="../libs/sizzle.js"></script>
	<script src="../libs/pure2.js"></script>
</head>
<body>

	<div id="clock">
		It is now <span class="hour"></span> : <span class="minute"></span> : <span class="second"></span><br />
		In <span class="tz"></span>
	</div>
	<HR>
	<div id="extra"></div>
	<p><a href="#" onclick="clearTimeout(_to);return false;">stop</a></p>

	<script>
		(function(){
			var	
				// Get the html source cross lib, using $p
				// adapt it to your library, i.e: $( '#clock' ) in jQuery
				extra = $p('#extra'),
				html = $p( '#clock' ),

				// json service returning the current time for a timezone
				tz = 'Europe/Brussels',
				url = 'http://json-time.appspot.com/time.json?tz='+tz+'&callback=showTime&cache=',

				//directive to render the template
				directive = {
					'span.hour': overlay('hour'),
					'span.minute': overlay('minute'),
					'span.second': overlay('second'),
					'span.tz': 'tz'
				},

				// compile the template once
				template = html.compile( directive );

			// utility fn to add leading 0 to numbers
			function overlay(what){
				return function(a){
					var val = a.context[what];
					return val === 0 ? '00' : val < 10 ? '0' + val : val;
				};
			}

			// JSONP load - script injection with callback function
			var noCache = 0;
			function loadTime(){
				var	old = document.getElementById('dataLoad'),
					s = document.createElement("script");
				s.src = url + noCache++;
				!old ? document.body.appendChild(s) : document.body.replaceChild(s, old);
				s.id = 'dataLoad';
			}

			// callback function to Render the template
			window.showTime = function(data){
				// rendering but reusing the compiled function template
				html = html.render( data, template );
				extra = extra.render( data, template );
				// redo it every sec
				window._to = setTimeout( loadTime, 1000 );
			};

			// Call the time service
			loadTime();
		}());

	</script>
</body>
</html>