Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

147 lines (131 sloc) 4.423 kB
<!doctype html>
<head>
<title>Bonsai Movie Library</title>
<meta name=viewport content=width=device-width,initial-scale=1>
<script src=../../lib/requirejs/require.js></script>
<!--<script src="http://localhost:8080/socket.io/socket.io.js"></script>-->
<style type="text/css">
body, html { margin: 0; font-family: sans-serif; font-size: 14px; }
#head {
background: #2e3949;
padding: 10px;
width:100%;
position:fixed;
left:0;
top:0;
}
#bs {
margin: 45px 0 0 0;
}
button, option {
background-color:#cbd0d5;
color: #545b66;
border:0;
}
</style>
</head>
<body>
<div id="head">
<span id="movieList"></span>
<button id="next">Next</button>
<span id="envList"></span>
</div>
<div id="bs"></div>
<script type="text/javascript">
var movieList = (function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'movies/movie_list.json', false);
xhr.send(null);
return eval('(' + xhr.responseText + ')');
})();
var envList = {
'worker': 'bonsai/bootstrapper/_dev/worker',
'iframe': 'bonsai/bootstrapper/_dev/iframe'
};
var queryObject = (function(queryString, defaultValues) {
var m, result = defaultValues, pattern = /([^&=]+)=([^&]*)/g;
while (m = pattern.exec(queryString)) {
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
result.toString = function(ownQueryObject) {
var string = '';
for (var key in this) {
if (this.hasOwnProperty(key) && key !== 'toString') {
if (key in ownQueryObject) {
string += '&' + key + '=' + ownQueryObject[key];
} else {
string += '&' + key + '=' + result[key];
}
}
}
return string.substr(1);
};
return result;
})(location.search.substr(1), {
movie: movieList[Object.keys(movieList)[0]][0],
env: Object.keys(envList)[0]
});
require.config({
baseUrl: '../../src',
paths: {
bonsai: '.'
},
urlArgs: +new Date
});
require([envList[queryObject.env]], function(player) {
// movies
var moviesDropdown = '<select name="movie">' +
'<option disabled>Choose a movie &#x2026;</option>';
for (var groupName in movieList) {
var group = movieList[groupName];
moviesDropdown += '<optgroup label="' + groupName + '">';
group.forEach(function(fileName) {
moviesDropdown += '<option>' + fileName + '</option>'
});
moviesDropdown += '</optgroup>';
}
moviesDropdown += '</select>';
document.getElementById('movieList').innerHTML = moviesDropdown;
// envs
var envsDropdown = '<select name="env">' +
'<option disabled>Choose a environment &#x2026;</option>';
Object.keys(envList).forEach(function(envKey) {
envsDropdown += '<option>' + envKey + '</option>';
});
envsDropdown += '</select>';
document.getElementById('envList').innerHTML = envsDropdown;
var selectNodes = [].slice.call(document.getElementsByTagName('select'));
[].slice.call(selectNodes[0]).forEach(function(option, index) {
if (option.value === queryObject.movie) {
selectNodes[0].selectedIndex = index;
}
});
[].slice.call(selectNodes[1]).forEach(function(option, index) {
if (option.value === queryObject.env) {
selectNodes[1].selectedIndex = index;
}
});
selectNodes.forEach(function(selectNode) {
selectNode.onchange = function(obj) {
obj = {}, obj[this.name] = this.value;
location.search = '?' + queryObject.toString(obj)
};
});
var stageNode = document.getElementById('bs');
var nextNode = document.getElementById('next');
nextNode.onclick = function() {
selectNodes[0].selectedIndex = selectNodes[0].selectedIndex + 1;
selectNodes[0].onchange();
};
player.setup({
noCache: true
}).run(stageNode, {
url: 'movies/' + queryObject.movie + '?' + new Date().getTime(),
width: document.width,
height: document.height - 50,
framerate: 60,
fpsLog: /animation/.test(queryObject.movie) // only show FPS log on animations
});
});
</script>
</body>
Jump to Line
Something went wrong with that request. Please try again.