OLD | NEW |
| (Empty) |
1 require 'browsernizr/test/css/rgba' | |
2 require 'browsernizr/test/css/transforms3d' | |
3 Modernizr = require 'browsernizr' | |
4 | |
5 require './vendor/mootools.js' | |
6 | |
7 async = require 'async' | |
8 ready = require './vendor/ready.js' | |
9 | |
10 now = window.performance?.now?.bind(window.performance) or Date.now | |
11 | |
12 # fallback for browsers not supporting createObjectURL | |
13 blobURLSupport = window.URL?.createObjectURL? | |
14 buildDataURL = do -> | |
15 charMap = {} | |
16 charMap[i] = String.fromCharCode(i) for i in [0...256] | |
17 return (data) -> | |
18 str = '' | |
19 for i in [0...data.length] | |
20 str += charMap[data[i]] | |
21 return 'data:image/gif;base64,' + btoa(str) | |
22 | |
23 loadImage = (src, callback) -> | |
24 img = new Image() | |
25 img.onload = -> | |
26 callback null, img | |
27 img.onerror = -> | |
28 callback new Error "Could load #{ src }" | |
29 img.src = src | |
30 | |
31 setupDemo = (element) -> | |
32 element.getElements('.hover-buttons li').addEvents | |
33 mouseenter: -> element.addClass @className | |
34 mouseleave: -> element.removeClass @className | |
35 | |
36 qslider = element.getElement '.quality input' | |
37 qvalue = element.getElement '.quality span' | |
38 renderimg = element.getElement 'img.render' | |
39 logel = element.getElement 'pre' | |
40 | |
41 gif = new GIF | |
42 quality: 10 | |
43 workers: 2 | |
44 | |
45 startTime = null | |
46 gif.on 'start', -> | |
47 startTime = now() | |
48 | |
49 gif.on 'finished', (blob, data) -> | |
50 if blobURLSupport | |
51 renderimg.src = URL.createObjectURL(blob) | |
52 else | |
53 renderimg.src = buildDataURL(data) | |
54 delta = now() - startTime | |
55 logel.set 'text', "Rendered #{ images.length } frame(s) at q#{ gif.options.q
uality } in #{ delta.toFixed(2) }ms" | |
56 | |
57 gif.on 'progress', (p) -> | |
58 logel.set 'text', "Rendering #{ images.length } frame(s) at q#{ gif.options.
quality }... #{ Math.round(p * 100) }%" | |
59 | |
60 images = element.getElements('img.original').map (img) -> img.src | |
61 async.map images, loadImage, (error, images) -> | |
62 throw error if error? | |
63 gif.addFrame image, {delay: 500, copy: true} for image in images | |
64 gif.render() | |
65 | |
66 qslider.addEvent 'change', -> | |
67 val = 31 - parseInt qslider.value | |
68 qvalue.set 'text', val | |
69 gif.setOption 'quality', val | |
70 gif.abort() | |
71 gif.render() | |
72 | |
73 delay = element.getElement '.delay' | |
74 if delay? | |
75 delay.getElement('input').addEvent 'change', -> | |
76 value = parseInt this.value | |
77 delay.getElement('.value').set 'text', value + 'ms' | |
78 for frame in gif.frames | |
79 frame.delay = value | |
80 gif.abort() | |
81 gif.render() | |
82 | |
83 repeat = element.getElement '.repeat' | |
84 if repeat? | |
85 repeat.getElement('input').addEvent 'change', -> | |
86 value = parseInt this.value | |
87 value = -1 if value is 0 | |
88 value = 0 if value is 21 | |
89 switch value | |
90 when 0 | |
91 txt = 'forever' | |
92 when -1 | |
93 txt = 'none' | |
94 else | |
95 txt = value | |
96 repeat.getElement('.value').set 'text', txt | |
97 gif.setOption 'repeat', value | |
98 gif.abort() | |
99 gif.render() | |
100 | |
101 ready -> | |
102 for demo in document.body.querySelectorAll '.demo' | |
103 setupDemo demo | |
OLD | NEW |