-
Notifications
You must be signed in to change notification settings - Fork 0
/
sprite-animator-app.html
107 lines (86 loc) · 2.56 KB
/
sprite-animator-app.html
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
<link rel="import" href="../polymer/polymer.html">
<!--
`sprite-animator-app`
Sprite animator component
@demo demo/sprite-animator-app-demo.html
-->
<dom-module id="sprite-animator-app">
<template>
<style>
:host {
display: block;
}
* {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<div id="div1">
<h2>Hello Sprite Animator!</h2>
<input type="file" id="files" class="files" name="files[]" on-change="readfiles" multiple />
<output id="list"></output>
</div>
<div id="animation">
<img id="sprite" width="200" height="200">
</div>
</template>
<script>
Polymer({
is: 'sprite-animator-app',
//Custom event
readfiles: function(e, detail) {
this.fire('reading',{ });
}
});
</script>
</dom-module>
<script>
function readfiles (e) {
console.log(e);
var array = e.target.$.files.files; // FileList object
var len = e.target.$.files.files.length;
console.log(files);
// files is a FileList of File objects. List some properties.
var output = [];
if(array) {
for (var i = 0; i < len ; i++) {
var f = array[i];
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
animate(array, 200, len);
}
else {
alert('failure');
}
}
function animate(list, speed, num) {
var count = 0;
var img = document.getElementById("sprite");
setInterval(function(){
var f = list[count];
count = (count+1)%num;
renderImage(f);
}, 200);
}
function renderImage(file) {
// generate a new FileReader object
var reader = new FileReader();
// inject an image with the src url
reader.onload = function(event) {
the_url = event.target.result
var img = document.getElementById("sprite");
img.src = the_url;
}
// when the file is read it triggers the onload event above.
reader.readAsDataURL(file);
}
//document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
<script>
var el = document.querySelector('sprite-animator-app');
this.addEventListener('reading', function (e) {
readfiles(e);});
</script>