| 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 |