393 lines
14 KiB
JavaScript
393 lines
14 KiB
JavaScript
|
define("dojo/_base/html", ["./kernel", "../dom", "../dom-style", "../dom-attr", "../dom-prop", "../dom-class", "../dom-construct", "../dom-geometry"], function(dojo, dom, style, attr, prop, cls, ctr, geom){
|
||
|
|
// module:
|
||
|
|
// dojo/dom
|
||
|
|
|
||
|
|
/*=====
|
||
|
|
return {
|
||
|
|
// summary:
|
||
|
|
// This module is a stub for the core dojo DOM API.
|
||
|
|
};
|
||
|
|
=====*/
|
||
|
|
|
||
|
|
// mix-in dom
|
||
|
|
dojo.byId = dom.byId;
|
||
|
|
dojo.isDescendant = dom.isDescendant;
|
||
|
|
dojo.setSelectable = dom.setSelectable;
|
||
|
|
|
||
|
|
// mix-in dom-attr
|
||
|
|
dojo.getAttr = attr.get;
|
||
|
|
dojo.setAttr = attr.set;
|
||
|
|
dojo.hasAttr = attr.has;
|
||
|
|
dojo.removeAttr = attr.remove;
|
||
|
|
dojo.getNodeProp = attr.getNodeProp;
|
||
|
|
|
||
|
|
dojo.attr = function(node, name, value){
|
||
|
|
// summary:
|
||
|
|
// Gets or sets an attribute on an HTML element.
|
||
|
|
// description:
|
||
|
|
// Handles normalized getting and setting of attributes on DOM
|
||
|
|
// Nodes. If 2 arguments are passed, and a the second argument is a
|
||
|
|
// string, acts as a getter.
|
||
|
|
//
|
||
|
|
// If a third argument is passed, or if the second argument is a
|
||
|
|
// map of attributes, acts as a setter.
|
||
|
|
//
|
||
|
|
// When passing functions as values, note that they will not be
|
||
|
|
// directly assigned to slots on the node, but rather the default
|
||
|
|
// behavior will be removed and the new behavior will be added
|
||
|
|
// using `dojo.connect()`, meaning that event handler properties
|
||
|
|
// will be normalized and that some caveats with regards to
|
||
|
|
// non-standard behaviors for onsubmit apply. Namely that you
|
||
|
|
// should cancel form submission using `dojo.stopEvent()` on the
|
||
|
|
// passed event object instead of returning a boolean value from
|
||
|
|
// the handler itself.
|
||
|
|
// node: DOMNode|String
|
||
|
|
// id or reference to the element to get or set the attribute on
|
||
|
|
// name: String|Object
|
||
|
|
// the name of the attribute to get or set.
|
||
|
|
// value: String?
|
||
|
|
// The value to set for the attribute
|
||
|
|
// returns:
|
||
|
|
// when used as a getter, the value of the requested attribute
|
||
|
|
// or null if that attribute does not have a specified or
|
||
|
|
// default value;
|
||
|
|
//
|
||
|
|
// when used as a setter, the DOM node
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// | // get the current value of the "foo" attribute on a node
|
||
|
|
// | dojo.attr(dojo.byId("nodeId"), "foo");
|
||
|
|
// | // or we can just pass the id:
|
||
|
|
// | dojo.attr("nodeId", "foo");
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// | // use attr() to set the tab index
|
||
|
|
// | dojo.attr("nodeId", "tabIndex", 3);
|
||
|
|
// |
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// Set multiple values at once, including event handlers:
|
||
|
|
// | dojo.attr("formId", {
|
||
|
|
// | "foo": "bar",
|
||
|
|
// | "tabIndex": -1,
|
||
|
|
// | "method": "POST",
|
||
|
|
// | "onsubmit": function(e){
|
||
|
|
// | // stop submitting the form. Note that the IE behavior
|
||
|
|
// | // of returning true or false will have no effect here
|
||
|
|
// | // since our handler is connect()ed to the built-in
|
||
|
|
// | // onsubmit behavior and so we need to use
|
||
|
|
// | // dojo.stopEvent() to ensure that the submission
|
||
|
|
// | // doesn't proceed.
|
||
|
|
// | dojo.stopEvent(e);
|
||
|
|
// |
|
||
|
|
// | // submit the form with Ajax
|
||
|
|
// | dojo.xhrPost({ form: "formId" });
|
||
|
|
// | }
|
||
|
|
// | });
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// Style is s special case: Only set with an object hash of styles
|
||
|
|
// | dojo.attr("someNode",{
|
||
|
|
// | id:"bar",
|
||
|
|
// | style:{
|
||
|
|
// | width:"200px", height:"100px", color:"#000"
|
||
|
|
// | }
|
||
|
|
// | });
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// Again, only set style as an object hash of styles:
|
||
|
|
// | var obj = { color:"#fff", backgroundColor:"#000" };
|
||
|
|
// | dojo.attr("someNode", "style", obj);
|
||
|
|
// |
|
||
|
|
// | // though shorter to use `dojo.style()` in this case:
|
||
|
|
// | dojo.style("someNode", obj);
|
||
|
|
|
||
|
|
if(arguments.length == 2){
|
||
|
|
return attr[typeof name == "string" ? "get" : "set"](node, name);
|
||
|
|
}
|
||
|
|
return attr.set(node, name, value);
|
||
|
|
};
|
||
|
|
|
||
|
|
// mix-in dom-class
|
||
|
|
dojo.hasClass = cls.contains;
|
||
|
|
dojo.addClass = cls.add;
|
||
|
|
dojo.removeClass = cls.remove;
|
||
|
|
dojo.toggleClass = cls.toggle;
|
||
|
|
dojo.replaceClass = cls.replace;
|
||
|
|
|
||
|
|
// mix-in dom-construct
|
||
|
|
dojo._toDom = dojo.toDom = ctr.toDom;
|
||
|
|
dojo.place = ctr.place;
|
||
|
|
dojo.create = ctr.create;
|
||
|
|
dojo.empty = function(node){ ctr.empty(node); };
|
||
|
|
dojo._destroyElement = dojo.destroy = function(node){ ctr.destroy(node); };
|
||
|
|
|
||
|
|
// mix-in dom-geometry
|
||
|
|
dojo._getPadExtents = dojo.getPadExtents = geom.getPadExtents;
|
||
|
|
dojo._getBorderExtents = dojo.getBorderExtents = geom.getBorderExtents;
|
||
|
|
dojo._getPadBorderExtents = dojo.getPadBorderExtents = geom.getPadBorderExtents;
|
||
|
|
dojo._getMarginExtents = dojo.getMarginExtents = geom.getMarginExtents;
|
||
|
|
dojo._getMarginSize = dojo.getMarginSize = geom.getMarginSize;
|
||
|
|
dojo._getMarginBox = dojo.getMarginBox = geom.getMarginBox;
|
||
|
|
dojo.setMarginBox = geom.setMarginBox;
|
||
|
|
dojo._getContentBox = dojo.getContentBox = geom.getContentBox;
|
||
|
|
dojo.setContentSize = geom.setContentSize;
|
||
|
|
dojo._isBodyLtr = dojo.isBodyLtr = geom.isBodyLtr;
|
||
|
|
dojo._docScroll = dojo.docScroll = geom.docScroll;
|
||
|
|
dojo._getIeDocumentElementOffset = dojo.getIeDocumentElementOffset = geom.getIeDocumentElementOffset;
|
||
|
|
dojo._fixIeBiDiScrollLeft = dojo.fixIeBiDiScrollLeft = geom.fixIeBiDiScrollLeft;
|
||
|
|
dojo.position = geom.position;
|
||
|
|
|
||
|
|
dojo.marginBox = function marginBox(/*DomNode|String*/node, /*Object?*/box){
|
||
|
|
// summary:
|
||
|
|
// Getter/setter for the margin-box of node.
|
||
|
|
// description:
|
||
|
|
// Getter/setter for the margin-box of node.
|
||
|
|
// Returns an object in the expected format of box (regardless
|
||
|
|
// if box is passed). The object might look like:
|
||
|
|
// `{ l: 50, t: 200, w: 300: h: 150 }`
|
||
|
|
// for a node offset from its parent 50px to the left, 200px from
|
||
|
|
// the top with a margin width of 300px and a margin-height of
|
||
|
|
// 150px.
|
||
|
|
// node:
|
||
|
|
// id or reference to DOM Node to get/set box for
|
||
|
|
// box:
|
||
|
|
// If passed, denotes that dojo.marginBox() should
|
||
|
|
// update/set the margin box for node. Box is an object in the
|
||
|
|
// above format. All properties are optional if passed.
|
||
|
|
// example:
|
||
|
|
// Retrieve the margin box of a passed node
|
||
|
|
// | var box = dojo.marginBox("someNodeId");
|
||
|
|
// | console.dir(box);
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// Set a node's margin box to the size of another node
|
||
|
|
// | var box = dojo.marginBox("someNodeId");
|
||
|
|
// | dojo.marginBox("someOtherNode", box);
|
||
|
|
return box ? geom.setMarginBox(node, box) : geom.getMarginBox(node); // Object
|
||
|
|
};
|
||
|
|
|
||
|
|
dojo.contentBox = function contentBox(/*DomNode|String*/node, /*Object?*/box){
|
||
|
|
// summary:
|
||
|
|
// Getter/setter for the content-box of node.
|
||
|
|
// description:
|
||
|
|
// Returns an object in the expected format of box (regardless if box is passed).
|
||
|
|
// The object might look like:
|
||
|
|
// `{ l: 50, t: 200, w: 300: h: 150 }`
|
||
|
|
// for a node offset from its parent 50px to the left, 200px from
|
||
|
|
// the top with a content width of 300px and a content-height of
|
||
|
|
// 150px. Note that the content box may have a much larger border
|
||
|
|
// or margin box, depending on the box model currently in use and
|
||
|
|
// CSS values set/inherited for node.
|
||
|
|
// While the getter will return top and left values, the
|
||
|
|
// setter only accepts setting the width and height.
|
||
|
|
// node:
|
||
|
|
// id or reference to DOM Node to get/set box for
|
||
|
|
// box:
|
||
|
|
// If passed, denotes that dojo.contentBox() should
|
||
|
|
// update/set the content box for node. Box is an object in the
|
||
|
|
// above format, but only w (width) and h (height) are supported.
|
||
|
|
// All properties are optional if passed.
|
||
|
|
return box ? geom.setContentSize(node, box) : geom.getContentBox(node); // Object
|
||
|
|
};
|
||
|
|
|
||
|
|
dojo.coords = function(/*DomNode|String*/node, /*Boolean?*/includeScroll){
|
||
|
|
// summary:
|
||
|
|
// Deprecated: Use position() for border-box x/y/w/h
|
||
|
|
// or marginBox() for margin-box w/h/l/t.
|
||
|
|
//
|
||
|
|
// Returns an object that measures margin-box (w)idth/(h)eight
|
||
|
|
// and absolute position x/y of the border-box. Also returned
|
||
|
|
// is computed (l)eft and (t)op values in pixels from the
|
||
|
|
// node's offsetParent as returned from marginBox().
|
||
|
|
// Return value will be in the form:
|
||
|
|
//| { l: 50, t: 200, w: 300: h: 150, x: 100, y: 300 }
|
||
|
|
// Does not act as a setter. If includeScroll is passed, the x and
|
||
|
|
// y params are affected as one would expect in dojo.position().
|
||
|
|
dojo.deprecated("dojo.coords()", "Use dojo.position() or dojo.marginBox().");
|
||
|
|
node = dom.byId(node);
|
||
|
|
var s = style.getComputedStyle(node), mb = geom.getMarginBox(node, s);
|
||
|
|
var abs = geom.position(node, includeScroll);
|
||
|
|
mb.x = abs.x;
|
||
|
|
mb.y = abs.y;
|
||
|
|
return mb; // Object
|
||
|
|
};
|
||
|
|
|
||
|
|
// mix-in dom-prop
|
||
|
|
dojo.getProp = prop.get;
|
||
|
|
dojo.setProp = prop.set;
|
||
|
|
|
||
|
|
dojo.prop = function(/*DomNode|String*/node, /*String|Object*/name, /*String?*/value){
|
||
|
|
// summary:
|
||
|
|
// Gets or sets a property on an HTML element.
|
||
|
|
// description:
|
||
|
|
// Handles normalized getting and setting of properties on DOM
|
||
|
|
// Nodes. If 2 arguments are passed, and a the second argument is a
|
||
|
|
// string, acts as a getter.
|
||
|
|
//
|
||
|
|
// If a third argument is passed, or if the second argument is a
|
||
|
|
// map of attributes, acts as a setter.
|
||
|
|
//
|
||
|
|
// When passing functions as values, note that they will not be
|
||
|
|
// directly assigned to slots on the node, but rather the default
|
||
|
|
// behavior will be removed and the new behavior will be added
|
||
|
|
// using `dojo.connect()`, meaning that event handler properties
|
||
|
|
// will be normalized and that some caveats with regards to
|
||
|
|
// non-standard behaviors for onsubmit apply. Namely that you
|
||
|
|
// should cancel form submission using `dojo.stopEvent()` on the
|
||
|
|
// passed event object instead of returning a boolean value from
|
||
|
|
// the handler itself.
|
||
|
|
// node:
|
||
|
|
// id or reference to the element to get or set the property on
|
||
|
|
// name:
|
||
|
|
// the name of the property to get or set.
|
||
|
|
// value:
|
||
|
|
// The value to set for the property
|
||
|
|
// returns:
|
||
|
|
// when used as a getter, the value of the requested property
|
||
|
|
// or null if that attribute does not have a specified or
|
||
|
|
// default value;
|
||
|
|
//
|
||
|
|
// when used as a setter, the DOM node
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// | // get the current value of the "foo" property on a node
|
||
|
|
// | dojo.prop(dojo.byId("nodeId"), "foo");
|
||
|
|
// | // or we can just pass the id:
|
||
|
|
// | dojo.prop("nodeId", "foo");
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// | // use prop() to set the tab index
|
||
|
|
// | dojo.prop("nodeId", "tabIndex", 3);
|
||
|
|
// |
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// Set multiple values at once, including event handlers:
|
||
|
|
// | dojo.prop("formId", {
|
||
|
|
// | "foo": "bar",
|
||
|
|
// | "tabIndex": -1,
|
||
|
|
// | "method": "POST",
|
||
|
|
// | "onsubmit": function(e){
|
||
|
|
// | // stop submitting the form. Note that the IE behavior
|
||
|
|
// | // of returning true or false will have no effect here
|
||
|
|
// | // since our handler is connect()ed to the built-in
|
||
|
|
// | // onsubmit behavior and so we need to use
|
||
|
|
// | // dojo.stopEvent() to ensure that the submission
|
||
|
|
// | // doesn't proceed.
|
||
|
|
// | dojo.stopEvent(e);
|
||
|
|
// |
|
||
|
|
// | // submit the form with Ajax
|
||
|
|
// | dojo.xhrPost({ form: "formId" });
|
||
|
|
// | }
|
||
|
|
// | });
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// Style is s special case: Only set with an object hash of styles
|
||
|
|
// | dojo.prop("someNode",{
|
||
|
|
// | id:"bar",
|
||
|
|
// | style:{
|
||
|
|
// | width:"200px", height:"100px", color:"#000"
|
||
|
|
// | }
|
||
|
|
// | });
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// Again, only set style as an object hash of styles:
|
||
|
|
// | var obj = { color:"#fff", backgroundColor:"#000" };
|
||
|
|
// | dojo.prop("someNode", "style", obj);
|
||
|
|
// |
|
||
|
|
// | // though shorter to use `dojo.style()` in this case:
|
||
|
|
// | dojo.style("someNode", obj);
|
||
|
|
|
||
|
|
if(arguments.length == 2){
|
||
|
|
return prop[typeof name == "string" ? "get" : "set"](node, name);
|
||
|
|
}
|
||
|
|
// setter
|
||
|
|
return prop.set(node, name, value);
|
||
|
|
};
|
||
|
|
|
||
|
|
// mix-in dom-style
|
||
|
|
dojo.getStyle = style.get;
|
||
|
|
dojo.setStyle = style.set;
|
||
|
|
dojo.getComputedStyle = style.getComputedStyle;
|
||
|
|
dojo.__toPixelValue = dojo.toPixelValue = style.toPixelValue;
|
||
|
|
|
||
|
|
dojo.style = function(node, name, value){
|
||
|
|
// summary:
|
||
|
|
// Accesses styles on a node. If 2 arguments are
|
||
|
|
// passed, acts as a getter. If 3 arguments are passed, acts
|
||
|
|
// as a setter.
|
||
|
|
// description:
|
||
|
|
// Getting the style value uses the computed style for the node, so the value
|
||
|
|
// will be a calculated value, not just the immediate node.style value.
|
||
|
|
// Also when getting values, use specific style names,
|
||
|
|
// like "borderBottomWidth" instead of "border" since compound values like
|
||
|
|
// "border" are not necessarily reflected as expected.
|
||
|
|
// If you want to get node dimensions, use `dojo.marginBox()`,
|
||
|
|
// `dojo.contentBox()` or `dojo.position()`.
|
||
|
|
// node: DOMNode|String
|
||
|
|
// id or reference to node to get/set style for
|
||
|
|
// name: String|Object?
|
||
|
|
// the style property to set in DOM-accessor format
|
||
|
|
// ("borderWidth", not "border-width") or an object with key/value
|
||
|
|
// pairs suitable for setting each property.
|
||
|
|
// value: String?
|
||
|
|
// If passed, sets value on the node for style, handling
|
||
|
|
// cross-browser concerns. When setting a pixel value,
|
||
|
|
// be sure to include "px" in the value. For instance, top: "200px".
|
||
|
|
// Otherwise, in some cases, some browsers will not apply the style.
|
||
|
|
// returns:
|
||
|
|
// when used as a getter, return the computed style of the node if passing in an ID or node,
|
||
|
|
// or return the normalized, computed value for the property when passing in a node and a style property
|
||
|
|
// example:
|
||
|
|
// Passing only an ID or node returns the computed style object of
|
||
|
|
// the node:
|
||
|
|
// | dojo.style("thinger");
|
||
|
|
// example:
|
||
|
|
// Passing a node and a style property returns the current
|
||
|
|
// normalized, computed value for that property:
|
||
|
|
// | dojo.style("thinger", "opacity"); // 1 by default
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// Passing a node, a style property, and a value changes the
|
||
|
|
// current display of the node and returns the new computed value
|
||
|
|
// | dojo.style("thinger", "opacity", 0.5); // == 0.5
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// Passing a node, an object-style style property sets each of the values in turn and returns the computed style object of the node:
|
||
|
|
// | dojo.style("thinger", {
|
||
|
|
// | "opacity": 0.5,
|
||
|
|
// | "border": "3px solid black",
|
||
|
|
// | "height": "300px"
|
||
|
|
// | });
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// When the CSS style property is hyphenated, the JavaScript property is camelCased.
|
||
|
|
// font-size becomes fontSize, and so on.
|
||
|
|
// | dojo.style("thinger",{
|
||
|
|
// | fontSize:"14pt",
|
||
|
|
// | letterSpacing:"1.2em"
|
||
|
|
// | });
|
||
|
|
//
|
||
|
|
// example:
|
||
|
|
// dojo/NodeList implements .style() using the same syntax, omitting the "node" parameter, calling
|
||
|
|
// dojo.style() on every element of the list. See: `dojo/query` and `dojo/NodeList`
|
||
|
|
// | dojo.query(".someClassName").style("visibility","hidden");
|
||
|
|
// | // or
|
||
|
|
// | dojo.query("#baz > div").style({
|
||
|
|
// | opacity:0.75,
|
||
|
|
// | fontSize:"13pt"
|
||
|
|
// | });
|
||
|
|
|
||
|
|
switch(arguments.length){
|
||
|
|
case 1:
|
||
|
|
return style.get(node);
|
||
|
|
case 2:
|
||
|
|
return style[typeof name == "string" ? "get" : "set"](node, name);
|
||
|
|
}
|
||
|
|
// setter
|
||
|
|
return style.set(node, name, value);
|
||
|
|
};
|
||
|
|
|
||
|
|
return dojo;
|
||
|
|
});
|