Cross Reference: /yui3/src/async-queue/docs/partials/queue-app-js.mustache
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
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly<script type="text/javascript">
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny DonnellyYUI().use("node", "transition","async-queue", function (Y) {
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnellyvar MyApp = {
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly NAME : 'Asynchronous Queue Demo',
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly q : new Y.AsyncQueue(),
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly nodes : {
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly root : null,
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly status : null,
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly nav : null,
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly content : null,
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly foot : null
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly },
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly render : function (container) {
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly if (MyApp.nodes.root) {
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.q.stop();
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly }
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly // artificial delays have been inserted to simulate _renderNav or
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly // _renderContent being process intensive and taking a while to complete
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.q.add(
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly // pass the container param to the callback using Y.bind
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly Y.bind(MyApp._renderFramework, MyApp, container),
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly {fn: function () {}, timeout: 700}, // artificial delay
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp._renderNav,
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly {fn: function () {}, timeout: 700}, // artificial delay
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp._renderContent).run();
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly },
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly setStatus : function (message,working) {
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.nodes.status.setContent(message);
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.nodes.foot[working?'addClass':'removeClass']('working');
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly },
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly _renderFramework : function (container) {
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly var root = MyApp.nodes.root = Y.one(container);
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly root.setContent(
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '<div class="yui3-module">'+
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '<div class="yui3-hd">'+
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '<h4>'+MyApp.NAME+'</h4>'+
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '</div>'+
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '<div class="yui3-bd">'+
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '<div class="yui3-nav"></div>'+
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '<div class="yui3-content"></div>'+
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '</div>'+
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '<div class="yui3-ft">'+
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '<p class="yui3-status"></p>'+
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '</div>'+
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '</div>');
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.nodes.status = root.one('p.yui3-status');
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.nodes.nav = root.one('.yui3-nav');
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.nodes.content = root.one('.yui3-content');
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.nodes.foot = root.one('.yui3-ft');
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.nodes.nav.setStyle('top','-30px');
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.nodes.content.setStyle('opacity',0);
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.setStatus('Loading...',true);
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly },
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly _renderNav : function () {
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly var nav = MyApp.nodes.nav;
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly nav.append(
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith '<ul class="yui3-g">'+
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith '<li class="yui3-u-1-4"><a href="#">Nav Lorem</a></li>'+
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith '<li class="yui3-u-1-4"><a href="#">Nav Ipsum</a></li>'+
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith '<li class="yui3-u-1-4"><a href="#">Nav Dolor</a></li>'+
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith '<li class="yui3-u-1-4"><a href="#">Nav Sit</a></li>'+
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly '</ul>');
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly nav.transition({
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly top: 0,
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly duration: .3
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly });
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith // Stub some navigation behavior for the example
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith nav.delegate('click', function (e) {
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith e.preventDefault();
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith MyApp.nodes.content
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith .setContent('<p>Clicked on ' + this.get('text') + '</p>');
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith }, 'a');
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly },
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly _renderContent : function () {
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith MyApp.nodes.content
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith .setContent('<p>[ App content here ]</p>')
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith .transition({
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith opacity: 1,
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith duration: .8
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith });
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.setStatus('App initialized',false);
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly }
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly};
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke SmithY.one('#init').on('click',function (e) {
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly e.preventDefault();
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly this.set('text','Re-initialize Application');
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly MyApp.render('#demo');
e3c907d8558f84e5b3c20dc5dee6316f925a102aLuke Smith});
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly// expose the example structure
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny DonnellyYUI.example = { MyApp : MyApp };
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly});
080c6e3a9306a3c11cdf69c464a8650b0153f00aJenny Donnelly</script>