Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 214 lines (192 sloc) 6.502 kB
c026449 @davidaurelio initial commit
davidaurelio authored
1 <!doctype html>
2 <head>
3 <title>Bonsai Movie Library</title>
9b60b93 @padolsey Add audio-button example, with boom sound.
padolsey authored
4 <meta name=viewport content=width=device-width,initial-scale=1>
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
5 <script src="../knockout-3.0.0.js"></script>
c026449 @davidaurelio initial commit
davidaurelio authored
6 <script src=../../lib/requirejs/require.js></script>
7 <!--<script src="http://localhost:8080/socket.io/socket.io.js"></script>-->
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
8
c026449 @davidaurelio initial commit
davidaurelio authored
9 <style type="text/css">
10 body, html { margin: 0; font-family: sans-serif; font-size: 14px; }
11 #head {
dad46c8 @basecode Add worker/iFrame dropdown
basecode authored
12 background: #2e3949;
c026449 @davidaurelio initial commit
davidaurelio authored
13 padding: 10px;
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
14 width: 100%;
c026449 @davidaurelio initial commit
davidaurelio authored
15 position:fixed;
16 left:0;
17 top:0;
18 }
19 #bs {
20 margin: 45px 0 0 0;
21 }
22 </style>
23 </head>
24 <body>
25 <div id="head">
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
26 <select id="movies" data-bind="foreach: movies, value: selected.movie">
27 <optgroup data-bind="attr: {label: label}, foreach: options">
28 <option data-bind="option: $data, text: $data"></option>
29 </optgroup>
30 </select>
31
c026449 @davidaurelio initial commit
davidaurelio authored
32 <button id="next">Next</button>
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
33 <select data-bind="options: environments, value: selected.env"></select>
696355a @davidaurelio Fix value binding
davidaurelio authored
34 <select data-bind="options: renderers, value: selected.renderer"></select>
c026449 @davidaurelio initial commit
davidaurelio authored
35 </div>
36 <div id="bs"></div>
dad46c8 @basecode Add worker/iFrame dropdown
basecode authored
37 <script type="text/javascript">
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
38 // from http://stackoverflow.com/a/11190148
39 ko.bindingHandlers.option = {
40 update: function(element, valueAccessor) {
41 var value = ko.utils.unwrapObservable(valueAccessor());
42 ko.selectExtensions.writeValue(element, value);
43 }
44 };
45
46 function optGroups(groups) {
47 var optGroups = [];
48 for (var label in groups) {
49 optGroups.push({label: label, options: groups[label]});
50 }
51 return optGroups;
52 }
53
54 function first(options) {
55 var first = options[0], subOptions = first.options;
56 return subOptions ? subOptions[0] : first;
57 }
7279042 @padolsey Make the movie list a proper JSON file
padolsey authored
58
59 var movieList = (function() {
60 var xhr = new XMLHttpRequest();
61 xhr.open('GET', 'movies/movie_list.json', false);
62 xhr.send(null);
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
63 return optGroups(eval('(' + xhr.responseText + ')'));
dad46c8 @basecode Add worker/iFrame dropdown
basecode authored
64 })();
65
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
66 function selectedToQuery() {
67 var selected = viewModel.selected, params = [];
68 for (var key in selected) {
69 params.push(encodeURIComponent(key) + '=' + encodeURIComponent(selected[key]()));
70 }
71 return params.join('&');
72 }
73
74 var runTimeout;
75 var stageNode = document.getElementById('bs');
76 function onParameterChange() {
77 location.hash = '#?' + selectedToQuery();
dad46c8 @basecode Add worker/iFrame dropdown
basecode authored
78
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
79 if (currentMovie) {
80 currentMovie.destroy();
81 currentMovie = null;
82 stageNode.innerHTML = '';
dad46c8 @basecode Add worker/iFrame dropdown
basecode authored
83 }
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
84 clearTimeout(runTimeout);
85 setTimeout(runMovie, 25);
86 }
87
438ec79 @davidaurelio Make it run with different contexts
davidaurelio authored
88 var environments, renderers, currentMovie;
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
89 function runMovie() {
90 var selected = viewModel.selected;
438ec79 @davidaurelio Make it run with different contexts
davidaurelio authored
91 var withRenderer = environments && environments[selected.env()];
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
92 var renderer = renderers && renderers[selected.renderer()];
93 var movie = selected.movie();
438ec79 @davidaurelio Make it run with different contexts
davidaurelio authored
94 if (!withRenderer || !renderer || !movie) return;
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
95
438ec79 @davidaurelio Make it run with different contexts
davidaurelio authored
96 currentMovie = withRenderer(renderer).run(stageNode, {
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
97 url: 'movies/' + movie + '?' + new Date().getTime(),
98 width: document.width,
99 height: document.height - 50,
100 framerate: 60,
101 fpsLog: /animation/.test(movie) // only show FPS log on animations
102 });
103 }
104
105 function urlParam(validValues) {
106 var observable = ko.observable(first(validValues));
107 var computed = ko.computed({
108 read: observable,
109 write: function(value) {
110 for (var i = 0, n = validValues.length; i < n; i++) {
111 var reference = validValues[i];
112 var options = reference.options;
113 if (value === reference || options && options.indexOf(value) !== -1) {
114 observable(value);
115 return;
dad46c8 @basecode Add worker/iFrame dropdown
basecode authored
116 }
117 }
118 }
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
119 });
120 computed.subscribe(onParameterChange);
121 return computed;
122 }
123
124 var validEnvironments = ['worker', 'iframe'];
125 var validRenderers = ['svg'];
126 var viewModel = {
127 movies: movieList,
128 environments: validEnvironments,
129 renderers: validRenderers,
130 selected: {
131 movie: urlParam(movieList),
132 env: urlParam(validEnvironments),
133 renderer: urlParam(validRenderers)
134 }
135 };
136
137 ko.applyBindings(viewModel, document.getElementById('head'));
138 var movieSelect = document.getElementById('movies');
139 document.getElementById('next').onclick = function() {
140 movieSelect.selectedIndex += 1;
141 viewModel.selected.movie(movieSelect.value);
142 };
143
7eb3ce7 @davidaurelio Add hashchange listener to support back/forward buttons
davidaurelio authored
144 function parseQuery(query) {
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
145 var values = viewModel.selected;
146 var bit, key, bits = query.split('&');
147 for (var i = 0, n = bits.length; i < n; i++) {
148 bit = bits[i].split('=');
149 key = decodeURIComponent(bit[0]);
150 if (key in values) values[key](decodeURIComponent(bit[1]));
151 }
7eb3ce7 @davidaurelio Add hashchange listener to support back/forward buttons
davidaurelio authored
152 }
153
154 // parse initial values from url hash
155 window.onhashchange = function() {
156 parseQuery(location.hash.slice(2));
157 };
158 window.onhashchange();
7279042 @padolsey Make the movie list a proper JSON file
padolsey authored
159
c026449 @davidaurelio initial commit
davidaurelio authored
160 require.config({
161 baseUrl: '../../src',
162 paths: {
163 bonsai: '.'
164 },
165 urlArgs: +new Date
166 });
dad46c8 @basecode Add worker/iFrame dropdown
basecode authored
167
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
168 require([
438ec79 @davidaurelio Make it run with different contexts
davidaurelio authored
169 'bonsai/tools',
170 'bonsai/uri',
171 'bonsai/require_config',
172 'bonsai/bootstrapper/player',
173
174 'bonsai/bootstrapper/context/worker/context',
175 'bonsai/bootstrapper/context/iframe/context',
dad46c8 @basecode Add worker/iFrame dropdown
basecode authored
176
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
177 'bonsai/renderer/svg/svg'
438ec79 @davidaurelio Make it run with different contexts
davidaurelio authored
178 ], function(tools, URI, requireConfig, player, workerEnv, iframeEnv, SvgRenderer) {
179 var baseUrl = URI.parse(tools.baseUri(document));
180 player.defaultRunnerOptions.requireUrl = baseUrl.resolveUri(requireConfig.url).toString();
181 var requireConfig = player.defaultRunnerOptions.requireConfig = requireConfig.config;
182 if (requireConfig && requireConfig.baseUrl) {
183 requireConfig.baseUrl = baseUrl.resolveUri(requireConfig.baseUrl).toString();
184 }
185 player.setup({
186 baseUrl: baseUrl.toString(),
187 noCache: true
188 });
189
190 environments = {
191 worker: function(renderer) {
192 return player.setup({
193 renderer: renderer,
194 runnerContext: workerEnv,
195 runnerUrl: require.toUrl('bonsai/bootstrapper/_dev/worker')
196 });
197 },
198 iframe: function(renderer) {
199 return player.setup({
200 renderer: renderer,
201 runnerContext: iframeEnv,
202 runnerUrl: require.toUrl('bonsai/bootstrapper/_dev/iframe')
203 });
204 }
c026449 @davidaurelio initial commit
davidaurelio authored
205 };
9499776 @davidaurelio Change library to knockout.js for easier extension
davidaurelio authored
206 renderers = {
207 svg: SvgRenderer
208 };
209 runMovie();
c026449 @davidaurelio initial commit
davidaurelio authored
210 });
211
212 </script>
213 </body>
Something went wrong with that request. Please try again.