| OLD | NEW |
| (Empty) | |
| 1 define([ 'util/ensureCallback', 'features', 'Modernizr', 'sprites/container' ],
function (ensureCallback, features, Modernizr, container) { |
| 2 function RenderContext(sourceData, frameData) { |
| 3 if (!Modernizr.csstransforms3d) { |
| 4 return; |
| 5 } |
| 6 |
| 7 this.sourceData = sourceData; |
| 8 |
| 9 this.transformData = frameData.map(function (objectTransforms) { |
| 10 return objectTransforms.map(function (t) { |
| 11 return t.cssTransform3d; |
| 12 }); |
| 13 }); |
| 14 |
| 15 this.elements = frameData[0].map(function () { |
| 16 var el = document.createElement('div'); |
| 17 el.style.position = 'absolute'; |
| 18 el.style.top = '0'; |
| 19 el.style.left = '0'; |
| 20 el.style.display = 'block'; |
| 21 el.style[features.transformOriginStyleProperty] = '0 0'; |
| 22 return el; |
| 23 }); |
| 24 |
| 25 this.containerElement = container(); |
| 26 } |
| 27 |
| 28 RenderContext.prototype.load = function load(callback) { |
| 29 callback = ensureCallback(callback); |
| 30 |
| 31 if (!Modernizr.csstransforms3d) { |
| 32 callback(new Error('Not supported')); |
| 33 return; |
| 34 } |
| 35 |
| 36 this.elements.forEach(function (element) { |
| 37 this.containerElement.appendChild(element); |
| 38 }, this); |
| 39 |
| 40 document.body.appendChild(this.containerElement); |
| 41 |
| 42 callback(null); |
| 43 }; |
| 44 |
| 45 RenderContext.prototype.unload = function unload() { |
| 46 this.containerElement.parentNode.removeChild(this.containerElement); |
| 47 |
| 48 this.elements.forEach(function (element) { |
| 49 if (element.parentNode) { |
| 50 element.parentNode.removeChild(element); |
| 51 } |
| 52 }); |
| 53 }; |
| 54 |
| 55 var transformStyleProperty = features.transformStyleProperty; |
| 56 |
| 57 RenderContext.prototype.renderFrame = function renderFrame(frameIndex) { |
| 58 var transforms = this.transformData[frameIndex]; |
| 59 var elements = this.elements; |
| 60 var count = elements.length; |
| 61 |
| 62 var frameInfo = this.sourceData.getFrameInfo(frameIndex); |
| 63 |
| 64 var i; |
| 65 for (i = 0; i < count; ++i) { |
| 66 var element = elements[i]; |
| 67 var backgroundImage = 'url(' + frameInfo.sheetImage.src + ')'; |
| 68 if (element.style.backgroundImage !== backgroundImage) { |
| 69 // Chrome has flickering issues without this check |
| 70 element.style.backgroundImage = backgroundImage; |
| 71 } |
| 72 |
| 73 element.style[transformStyleProperty] = transforms[i]; |
| 74 element.style.backgroundPosition = -frameInfo.x + 'px ' + -frameInfo
.y + 'px'; |
| 75 element.style.width = frameInfo.width + 'px'; |
| 76 element.style.height = frameInfo.height + 'px'; |
| 77 } |
| 78 }; |
| 79 |
| 80 return function (sourceData, frameData) { |
| 81 return new RenderContext(sourceData, frameData); |
| 82 }; |
| 83 }); |
| OLD | NEW |