/*
  * DOMElement
  * Visit http://createjs.com/ for documentation, updates and examples.
  *
  * Copyright (c) 2010 gskinner.com, inc.
  * 
  * Permission is hereby granted, free of charge, to any person
  * obtaining a copy of this software and associated documentation
  * files (the "Software"), to deal in the Software without
  * restriction, including without limitation the rights to use,
  * copy, modify, merge, publish, distribute, sublicense, and/or sell
  * copies of the Software, and to permit persons to whom the
  * Software is furnished to do so, subject to the following
  * conditions:
  * 
  * The above copyright notice and this permission notice shall be
  * included in all copies or substantial portions of the Software.
  * 
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
  * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
  * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
  * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
  * OTHER DEALINGS IN THE SOFTWARE.
  */
  
  // namespace:
  this.createjs = this.createjs||{};
  
  (function() {
  // TODO: fix problems with rotation.
  // TODO: exclude from getObjectsUnderPoint
  
  

<b>This class is still experimental, and more advanced use is likely to be buggy. Please report bugs.</b> A DOMElement allows you to associate a HTMLElement with the display list. It will be transformed within the DOM as though it is child of the {{#crossLink "Container"}}{{/crossLink}} it is added to. However, it is not rendered to canvas, and as such will retain whatever z-index it has relative to the canvas (ie. it will be drawn in front of or behind the canvas). The position of a DOMElement is relative to their parent node in the DOM. It is recommended that the DOM Object be added to a div that also contains the canvas so that they share the same position on the page. DOMElement is useful for positioning HTML elements over top of canvas content, and for elements that you want to display outside the bounds of the canvas. For example, a tooltip with rich HTML content. <h4>Mouse Interaction</h4> DOMElement instances are not full EaselJS display objects, and do not participate in EaselJS mouse events or support methods like hitTest. To get mouse events from a DOMElement, you must instead add handlers to the htmlElement (note, this does not support EventDispatcher) var domElement = new createjs.DOMElement(htmlElement); domElement.htmlElement.onclick = function() { console.log("clicked"); } @class DOMElement @extends DisplayObject @constructor
parameter: {HTMLElement} htmlElement A reference or id for the DOM element to manage.

  
  var DOMElement = function(htmlElement) {
    this.initialize(htmlElement);
  };
  var p = DOMElement.prototype = new createjs.DisplayObject();
  
  // public properties:
          

The DOM object to manage. @property htmlElement @type HTMLElement

  
          p.htmlElement = null;
  
  // private properties:
          

@property _oldMtx @protected

  
          p._oldMtx = null;
  
  // constructor:
          

@property DisplayObject_initialize @type Function @private

  
          p.DisplayObject_initialize = p.initialize;
  
          

Initialization method. @method initialize @protected

  
          p.initialize = function(htmlElement) {
                  if (typeof(htmlElement)=="string") { htmlElement = document.getElementById(htmlElement); }
                  this.DisplayObject_initialize();
                  this.mouseEnabled = false;
                  this.htmlElement = htmlElement;
                  var style = htmlElement.style;
                  // this relies on the _tick method because draw isn't called if a parent is not visible.
                  style.position = "absolute";
                  style.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = "0% 0%";
          }
  
  // public methods:
          

Returns true or false indicating whether the display object would be visible if drawn to a canvas. This does not account for whether it would be visible within the boundaries of the stage. NOTE: This method is mainly for internal use, though it may be useful for advanced uses. @method isVisible
returns: {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas

  
          p.isVisible = function() {
                  return this.htmlElement != null;
          }
  
          

Draws the display object into the specified context ignoring it's visible, alpha, shadow, and transform. Returns true if the draw was handled (useful for overriding functionality). NOTE: This method is mainly for internal use, though it may be useful for advanced uses. @method draw
parameter: {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.
parameter: {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. For example, used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).

  
          p.draw = function(ctx, ignoreCache) {
                  if (this.htmlElement == null) { return; }
                  var mtx = this.getConcatenatedMatrix(this._matrix);
                  
                  var o = this.htmlElement;
                  var style = o.style;
                  
                  // this relies on the _tick method because draw isn't called if a parent is not visible.
                  if (this.visible) { style.visibility = "visible"; }
                  else { return true; }
                  
                  var oMtx = this._oldMtx||{};
                  if (oMtx.alpha != mtx.alpha) { style.opacity = ""+mtx.alpha; oMtx.alpha = mtx.alpha; }
                  if (oMtx.tx != mtx.tx || oMtx.ty != mtx.ty || oMtx.a != mtx.a || oMtx.b != mtx.b || oMtx.c != mtx.c || oMtx.d != mtx.d) {
                          style.transform = style.WebkitTransform = style.OTransform =  style.msTransform = ["matrix("+mtx.a,mtx.b,mtx.c,mtx.d,(mtx.tx+0.5|0),(mtx.ty+0.5|0)+")"].join(",");
                          style.MozTransform = ["matrix("+mtx.a,mtx.b,mtx.c,mtx.d,(mtx.tx+0.5|0)+"px",(mtx.ty+0.5|0)+"px)"].join(",");
                          this._oldMtx = mtx.clone();
                  }
                  
                  return true;
          };
  
          

Not applicable to DOMElement. @method cache

  
          p.cache = function() {};
  
          

Not applicable to DOMElement. @method uncache

  
          p.uncache = function() {};
  
          

Not applicable to DOMElement. @method updateCache

  
          p.updateCache = function() {};
  
          

Not applicable to DOMElement. @method hitArea

  
          p.hitTest = function() {};
  
          

Not applicable to DOMElement. @method localToGlobal

  
          p.localToGlobal = function() {};
  
          

Not applicable to DOMElement. @method globalToLocal

  
          p.globalToLocal = function() {};
  
          

Not applicable to DOMElement. @method localToLocal

  
          p.localToLocal = function() {};
  
          

DOMElement cannot be cloned. Throws an error. @method clone

  
          p.clone = function() {
                  throw("DOMElement cannot be cloned.")
          };
  
          

Returns a string representation of this object. @method toString
returns: {String} a string representation of the instance.

  
          p.toString = function() {
                  return "[DOMElement (name="+  this.name +")]";
          };
      
          

Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances are not full EaselJS display objects and do not participate in EaselJS mouse events. @event click

Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances are not full EaselJS display objects and do not participate in EaselJS mouse events. @event dblClick

Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances are not full EaselJS display objects and do not participate in EaselJS mouse events. @event mousedown

The HTMLElement can listen for the mouseover event, not the DOMElement instance. Since DOMElement instances are not full EaselJS display objects and do not participate in EaselJS mouse events. @event mouseover

Not applicable to DOMElement. @event tick

  
       
  
  // private methods:
          

@property DisplayObject__tick @type Function @protected

  
          p.DisplayObject__tick = p._tick;
          
          

@method _tick @protected

  
          p._tick = function(params) {
                  // TODO: figure out how to get around this.
                  this.htmlElement.style.visibility = "hidden";
                  this.DisplayObject__tick(params);
          };
  
  createjs.DOMElement = DOMElement;
  }());

---

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

---

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.