1 /**
  2  * The MIT License (MIT)
  3  *
  4  * Copyright (c) 2016 DeNA Co., Ltd.
  5  *
  6  * Permission is hereby granted, free of charge, to any person obtaining a copy
  7  * of this software and associated documentation files (the "Software"), to deal
  8  * in the Software without restriction, including without limitation the rights
  9  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 10  * copies of the Software, and to permit persons to whom the Software is
 11  * furnished to do so, subject to the following conditions:
 12  *
 13  * The above copyright notice and this permission notice shall be included in
 14  * all copies or substantial portions of the Software.
 15  *
 16  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 17  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 18  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 19  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 20  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 21  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 22  * SOFTWARE.
 23  */
 24 
 25 /// <reference path="base.js"/>
 26 /// <reference path="display_object.js"/>
 27 /// <reference path="user_agent.js"/>
 28 
 29 /**
 30  * A class that encapsulates a DOM element. This object is a pseudo display
 31  * object that retrieves its position from the createjs.Renderer object to move
 32  * the associated DOM element there.
 33  * @param {string} id
 34  * @extends {createjs.DisplayObject}
 35  * @constructor
 36  */
 37 createjs.DOMElement = function(id) {
 38   createjs.DisplayObject.call(this);
 39 
 40   /**
 41    * The HTMLElement object associated with this object.
 42    * @type {HTMLElement}
 43    * @private
 44    */
 45   this.element_ = document.getElementById(id);
 46 
 47   /**
 48    * Whether the hosting browser uses WebKit (or blink). This class caches this
 49    * value to avoid calling a function every time when it updates the position
 50    * of its associated element.
 51    * @type {boolean}
 52    * @private
 53    */
 54   this.isWebKit_ = createjs.UserAgent.isWebKit();
 55 
 56   // Set the CSS style of the HTML element associated with this object.
 57   var style = this.element_.style;
 58   style.visibility = 'hidden';
 59   style.position = 'absolute';
 60   style[this.isWebKit_ ? 'webkitTransformOrigin' : 'transformOrigin'] = '0% 0%';
 61 
 62   // Synchronize the bounding box of this object with the one of the given
 63   // element.
 64   this.setBoundingBox(
 65       0, 0, this.element_.clientWidth, this.element_.clientHeight);
 66 };
 67 createjs.inherits('DOMElement', createjs.DOMElement, createjs.DisplayObject);
 68 
 69 /**
 70  * Returns an HTMLElement object associated with this object.
 71  * @return {HTMLElement}
 72  * @private
 73  */
 74 createjs.DOMElement.prototype.getElement_ = function() {
 75   /// <returns type="HTMLElement"/>
 76   return this.element_;
 77 };
 78 
 79 /** @override */
 80 createjs.DOMElement.prototype.layout =
 81     function(renderer, parent, dirty, time, draw) {
 82   /// <param type="createjs.Renderer" name="renderer"/>
 83   /// <param type="createjs.DisplayObject" name="parent"/>
 84   /// <param type="number" name="dirty"/>
 85   /// <param type="number" name="time"/>
 86   /// <param type="number" name="draw"/>
 87   /// <returns type="number"/>
 88 
 89   // Save the alpha value of the element associated with this object, which is
 90   // not covered by the dirty flag, to change it only when its value has been
 91   // updated.
 92   var state = this.getState();
 93   var alpha = state.getAlpha();
 94 
 95   // Update the layout of this object without adding it to the given renderer.
 96   // This object is a virtual object and the renderer cannot draw it.
 97   createjs.DOMElement.superClass_.layout.call(
 98       this, renderer, parent, dirty, time, 0);
 99 
100   // Move the element associated with this object to the calculated position.
101   var style = this.getElement_().style;
102   if (dirty & createjs.DisplayObject.DIRTY_PROPERTIES) {
103     if (!state.isVisible()) {
104       style.visibility = 'hidden';
105       return 0;
106     }
107     style.visibility = 'visible';
108     if (alpha != state.getAlpha()) {
109       style.opacity = state.getAlpha();
110     }
111   }
112   if (dirty & createjs.DisplayObject.DIRTY_TRANSFORM) {
113     var ratio = renderer.getCSSRatio();
114     var tx = state.tx * ratio.x;
115     var ty = state.ty * ratio.y;
116     var transform = 'matrix(' +
117         state.a + ',' + state.b + ',' + state.c + ',' + state.d + ',' +
118         tx + ',' + ty + ')';
119     style[this.isWebKit_ ? 'webkitTransform' : 'transform'] = transform;
120   }
121   return 0;
122 };
123 
124 // Export the createjs.DOMElement object to the global namespace.
125 createjs.exportObject('createjs.DOMElement', createjs.DOMElement, {
126   // createjs.Object methods.
127 });
128