src/chrome/test/data/third_party/spaceport/js/sprites/renderers/css3dBackground.js

   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 });