topical media & game development
mobile-graphic-enchant-dev-src-DomManager.js / js
enchant.DomManager = enchant.Class.create({
initialize: function(node, elementDefinition) {
var core = enchant.Core.instance;
this.layer = null;
this.targetNode = node;
if (typeof elementDefinition === 'string') {
this.element = document.createElement(elementDefinition);
} else if (elementDefinition instanceof HTMLElement) {
this.element = elementDefinition;
}
this.style = this.element.style;
this.style.position = 'absolute';
this.style[enchant.ENV.VENDOR_PREFIX + 'TransformOrigin'] = '0px 0px';
if (core._debug) {
this.style.border = '1px solid blue';
this.style.margin = '-1px';
}
var manager = this;
this._setDomTarget = function() {
manager.layer._touchEventTarget = manager.targetNode;
};
this._attachEvent();
},
getDomElement: function() {
return this.element;
},
getDomElementAsNext: function() {
return this.element;
},
getNextManager: function(manager) {
var i = this.targetNode.parentNode.childNodes.indexOf(manager.targetNode);
if (i !== this.targetNode.parentNode.childNodes.length - 1) {
return this.targetNode.parentNode.childNodes[i + 1]._domManager;
} else {
return null;
}
},
addManager: function(childManager, nextManager) {
var nextElement;
if (nextManager) {
nextElement = nextManager.getDomElementAsNext();
}
var element = childManager.getDomElement();
if (element instanceof Array) {
element.forEach(function(child) {
if (nextElement) {
this.element.insertBefore(child, nextElement);
} else {
this.element.appendChild(child);
}
}, this);
} else {
if (nextElement) {
this.element.insertBefore(element, nextElement);
} else {
this.element.appendChild(element);
}
}
this.setLayer(this.layer);
},
removeManager: function(childManager) {
if (childManager instanceof enchant.DomlessManager) {
childManager._domRef.forEach(function(element) {
this.element.removeChild(element);
}, this);
} else {
this.element.removeChild(childManager.element);
}
this.setLayer(this.layer);
},
setLayer: function(layer) {
this.layer = layer;
var node = this.targetNode;
var manager;
if (node.childNodes) {
for (var i = 0, l = node.childNodes.length; i < l; i++) {
manager = node.childNodes[i]._domManager;
if (manager) {
manager.setLayer(layer);
}
}
}
},
render: function(inheritMat) {
var node = this.targetNode;
var matrix = enchant.Matrix.instance;
var stack = matrix.stack;
var dest = [];
matrix.makeTransformMatrix(node, dest);
matrix.multiply(stack[stack.length - 1], dest, dest);
matrix.multiply(inheritMat, dest, inheritMat);
node._matrix = inheritMat;
var ox = (typeof node._originX === 'number') ? node._originX : node.width / 2 || 0;
var oy = (typeof node._originY === 'number') ? node._originY : node.height / 2 || 0;
var vec = [ ox, oy ];
matrix.multiplyVec(dest, vec, vec);
node._offsetX = vec[0] - ox;
node._offsetY = vec[1] - oy;
if(node.parentNode && !(node.parentNode instanceof enchant.Group)) {
node._offsetX += node.parentNode._offsetX;
node._offsetY += node.parentNode._offsetY;
}
if (node._dirty) {
this.style[enchant.ENV.VENDOR_PREFIX + 'Transform'] = 'matrix(' +
dest[0].toFixed(10) + ',' +
dest[1].toFixed(10) + ',' +
dest[2].toFixed(10) + ',' +
dest[3].toFixed(10) + ',' +
dest[4].toFixed(10) + ',' +
dest[5].toFixed(10) +
')';
}
this.domRender();
},
domRender: function() {
var node = this.targetNode;
if(!node._style) {
node._style = {};
}
if(!node.__styleStatus) {
node.__styleStatus = {};
}
if (node.width !== null) {
node._style.width = node.width + 'px';
}
if (node.height !== null) {
node._style.height = node.height + 'px';
}
node._style.opacity = node._opacity;
node._style['background-color'] = node._backgroundColor;
if (typeof node._visible !== 'undefined') {
node._style.display = node._visible ? 'block' : 'none';
}
if (typeof node.domRender === 'function') {
node.domRender(this.element);
}
var value;
for (var prop in node._style) {
value = node._style[prop];
if(node.__styleStatus[prop] !== value && value != null) {
this.style.setProperty(prop, '' + value);
node.__styleStatus[prop] = value;
}
}
},
_attachEvent: function() {
if (enchant.ENV.TOUCH_ENABLED) {
this.element.addEventListener('touchstart', this._setDomTarget, true);
}
this.element.addEventListener('mousedown', this._setDomTarget, true);
},
_detachEvent: function() {
if (enchant.ENV.TOUCH_ENABLED) {
this.element.removeEventListener('touchstart', this._setDomTarget, true);
}
this.element.removeEventListener('mousedown', this._setDomTarget, true);
},
remove: function() {
this._detachEvent();
this.element = this.style = this.targetNode = null;
}
});
enchant.DomlessManager = enchant.Class.create({
initialize: function(node) {
this._domRef = [];
this.targetNode = node;
},
_register: function(element, nextElement) {
var i = this._domRef.indexOf(nextElement);
var childNodes;
if (element instanceof Array) {
if (i === -1) {
Array.prototype.push.apply(this._domRef, element);
} else {
Array.prototype.splice.apply(this._domRef, [i, 0].concat(element));
}
} else {
if (i === -1) {
this._domRef.push(element);
} else {
this._domRef.splice(i, 0, element);
}
}
},
getNextManager: function(manager) {
var i = this.targetNode.parentNode.childNodes.indexOf(manager.targetNode);
if (i !== this.targetNode.parentNode.childNodes.length - 1) {
return this.targetNode.parentNode.childNodes[i + 1]._domManager;
} else {
return null;
}
},
getDomElement: function() {
var ret = [];
this.targetNode.childNodes.forEach(function(child) {
ret = ret.concat(child._domManager.getDomElement());
});
return ret;
},
getDomElementAsNext: function() {
if (this._domRef.length) {
return this._domRef[0];
} else {
var nextManager = this.getNextManager(this);
if (nextManager) {
return nextManager.element;
} else {
return null;
}
}
},
addManager: function(childManager, nextManager) {
var parentNode = this.targetNode.parentNode;
if (parentNode) {
if (nextManager === null) {
nextManager = this.getNextManager(this);
}
if (parentNode instanceof enchant.Scene) {
parentNode._layers.Dom._domManager.addManager(childManager, nextManager);
} else {
parentNode._domManager.addManager(childManager, nextManager);
}
}
var nextElement = nextManager ? nextManager.getDomElementAsNext() : null;
this._register(childManager.getDomElement(), nextElement);
this.setLayer(this.layer);
},
removeManager: function(childManager) {
var dom;
var i = this._domRef.indexOf(childManager.element);
if (i !== -1) {
dom = this._domRef[i];
dom.parentNode.removeChild(dom);
this._domRef.splice(i, 1);
}
this.setLayer(this.layer);
},
setLayer: function(layer) {
this.layer = layer;
var node = this.targetNode;
var manager;
if (node.childNodes) {
for (var i = 0, l = node.childNodes.length; i < l; i++) {
manager = node.childNodes[i]._domManager;
if (manager) {
manager.setLayer(layer);
}
}
}
},
render: function(inheritMat) {
var matrix = enchant.Matrix.instance;
var stack = matrix.stack;
var node = this.targetNode;
var dest = [];
matrix.makeTransformMatrix(node, dest);
matrix.multiply(stack[stack.length - 1], dest, dest);
matrix.multiply(inheritMat, dest, inheritMat);
node._matrix = inheritMat;
var ox = (typeof node._originX === 'number') ? node._originX : node.width / 2 || 0;
var oy = (typeof node._originY === 'number') ? node._originY : node.height / 2 || 0;
var vec = [ ox, oy ];
matrix.multiplyVec(dest, vec, vec);
node._offsetX = vec[0] - ox;
node._offsetY = vec[1] - oy;
stack.push(dest);
},
remove: function() {
this._domRef = [];
this.targetNode = null;
}
});
(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.