244 lines
7.1 KiB
JavaScript
244 lines
7.1 KiB
JavaScript
define("dojox/mobile/Heading", [
|
|
"dojo/_base/array",
|
|
"dojo/_base/connect",
|
|
"dojo/_base/declare",
|
|
"dojo/_base/lang",
|
|
"dojo/_base/window",
|
|
"dojo/dom",
|
|
"dojo/dom-class",
|
|
"dojo/dom-construct",
|
|
"dojo/dom-style",
|
|
"dijit/registry",
|
|
"dijit/_Contained",
|
|
"dijit/_Container",
|
|
"dijit/_WidgetBase",
|
|
"./ProgressIndicator",
|
|
"./ToolBarButton",
|
|
"./View"
|
|
], function(array, connect, declare, lang, win, dom, domClass, domConstruct, domStyle, registry, Contained, Container, WidgetBase, ProgressIndicator, ToolBarButton, View){
|
|
|
|
// module:
|
|
// dojox/mobile/Heading
|
|
|
|
var dm = lang.getObject("dojox.mobile", true);
|
|
|
|
return declare("dojox.mobile.Heading", [WidgetBase, Container, Contained],{
|
|
// summary:
|
|
// A widget that represents a navigation bar.
|
|
// description:
|
|
// Heading is a widget that represents a navigation bar, which
|
|
// usually appears at the top of an application. It usually
|
|
// displays the title of the current view and can contain a
|
|
// navigational control. If you use it with
|
|
// dojox/mobile/ScrollableView, it can also be used as a fixed
|
|
// header bar or a fixed footer bar. In such cases, specify the
|
|
// fixed="top" attribute to be a fixed header bar or the
|
|
// fixed="bottom" attribute to be a fixed footer bar. Heading can
|
|
// have one or more ToolBarButton widgets as its children.
|
|
|
|
// back: String
|
|
// A label for the navigational control to return to the previous View.
|
|
back: "",
|
|
|
|
// href: String
|
|
// A URL to open when the navigational control is pressed.
|
|
href: "",
|
|
|
|
// moveTo: String
|
|
// The id of the transition destination of the navigation control.
|
|
// If the value has a hash sign ('#') before the id (e.g. #view1)
|
|
// and the dojox/mobile/bookmarkable module is loaded by the user application,
|
|
// the view transition updates the hash in the browser URL so that the
|
|
// user can bookmark the destination view. In this case, the user
|
|
// can also use the browser's back/forward button to navigate
|
|
// through the views in the browser history.
|
|
//
|
|
// If null, transitions to a blank view.
|
|
// If '#', returns immediately without transition.
|
|
moveTo: "",
|
|
|
|
// transition: String
|
|
// A type of animated transition effect. You can choose from the
|
|
// standard transition types, "slide", "fade", "flip", or from the
|
|
// extended transition types, "cover", "coverv", "dissolve",
|
|
// "reveal", "revealv", "scaleIn", "scaleOut", "slidev",
|
|
// "swirl", "zoomIn", "zoomOut", "cube", and "swap". If "none" is
|
|
// specified, transition occurs immediately without animation.
|
|
transition: "slide",
|
|
|
|
// label: String
|
|
// A title text of the heading. If the label is not specified, the
|
|
// innerHTML of the node is used as a label.
|
|
label: "",
|
|
|
|
// iconBase: String
|
|
// The default icon path for child items.
|
|
iconBase: "",
|
|
|
|
// tag: String
|
|
// A name of HTML tag to create as domNode.
|
|
tag: "h1",
|
|
|
|
// busy: Boolean
|
|
// If true, a progress indicator spins on this widget.
|
|
busy: false,
|
|
|
|
// progStyle: String
|
|
// A css class name to add to the progress indicator.
|
|
progStyle: "mblProgWhite",
|
|
|
|
/* internal properties */
|
|
|
|
// baseClass: String
|
|
// The name of the CSS class of this widget.
|
|
baseClass: "mblHeading",
|
|
|
|
buildRendering: function(){
|
|
this.domNode = this.containerNode = this.srcNodeRef || win.doc.createElement(this.tag);
|
|
this.inherited(arguments);
|
|
if(!this.label){
|
|
array.forEach(this.domNode.childNodes, function(n){
|
|
if(n.nodeType == 3){
|
|
var v = lang.trim(n.nodeValue);
|
|
if(v){
|
|
this.label = v;
|
|
this.labelNode = domConstruct.create("span", {innerHTML:v}, n, "replace");
|
|
}
|
|
}
|
|
}, this);
|
|
}
|
|
if(!this.labelNode){
|
|
this.labelNode = domConstruct.create("span", null, this.domNode);
|
|
}
|
|
this.labelNode.className = "mblHeadingSpanTitle";
|
|
this.labelDivNode = domConstruct.create("div", {
|
|
className: "mblHeadingDivTitle",
|
|
innerHTML: this.labelNode.innerHTML
|
|
}, this.domNode);
|
|
|
|
dom.setSelectable(this.domNode, false);
|
|
},
|
|
|
|
startup: function(){
|
|
if(this._started){ return; }
|
|
var parent = this.getParent && this.getParent();
|
|
if(!parent || !parent.resize){ // top level widget
|
|
var _this = this;
|
|
setTimeout(function(){ // necessary to render correctly
|
|
_this.resize();
|
|
}, 0);
|
|
}
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
resize: function(){
|
|
if(this.labelNode){
|
|
// find the rightmost left button (B), and leftmost right button (C)
|
|
// +-----------------------------+
|
|
// | |A| |B| |C| |D| |
|
|
// +-----------------------------+
|
|
var leftBtn, rightBtn;
|
|
var children = this.containerNode.childNodes;
|
|
for(var i = children.length - 1; i >= 0; i--){
|
|
var c = children[i];
|
|
if(c.nodeType === 1 && domStyle.get(c, "display") !== "none"){
|
|
if(!rightBtn && domStyle.get(c, "float") === "right"){
|
|
rightBtn = c;
|
|
}
|
|
if(!leftBtn && domStyle.get(c, "float") === "left"){
|
|
leftBtn = c;
|
|
}
|
|
}
|
|
}
|
|
|
|
if(!this.labelNodeLen && this.label){
|
|
this.labelNode.style.display = "inline";
|
|
this.labelNodeLen = this.labelNode.offsetWidth;
|
|
this.labelNode.style.display = "";
|
|
}
|
|
|
|
var bw = this.domNode.offsetWidth; // bar width
|
|
var rw = rightBtn ? bw - rightBtn.offsetLeft + 5 : 0; // rightBtn width
|
|
var lw = leftBtn ? leftBtn.offsetLeft + leftBtn.offsetWidth + 5 : 0; // leftBtn width
|
|
var tw = this.labelNodeLen || 0; // title width
|
|
domClass[bw - Math.max(rw,lw)*2 > tw ? "add" : "remove"](this.domNode, "mblHeadingCenterTitle");
|
|
}
|
|
array.forEach(this.getChildren(), function(child){
|
|
if(child.resize){ child.resize(); }
|
|
});
|
|
},
|
|
|
|
_setBackAttr: function(/*String*/back){
|
|
// tags:
|
|
// private
|
|
this._set("back", back);
|
|
if(!this.backButton){
|
|
this.backButton = new ToolBarButton({
|
|
arrow: "left",
|
|
label: back,
|
|
moveTo: this.moveTo,
|
|
back: !this.moveTo,
|
|
href: this.href,
|
|
transition: this.transition,
|
|
transitionDir: -1
|
|
});
|
|
this.backButton.placeAt(this.domNode, "first");
|
|
}else{
|
|
this.backButton.set("label", back);
|
|
}
|
|
this.resize();
|
|
},
|
|
|
|
_setMoveToAttr: function(/*String*/moveTo){
|
|
// tags:
|
|
// private
|
|
this._set("moveTo", moveTo);
|
|
if(this.backButton){
|
|
this.backButton.set("moveTo", moveTo);
|
|
}
|
|
},
|
|
|
|
_setHrefAttr: function(/*String*/href){
|
|
// tags:
|
|
// private
|
|
this._set("href", href);
|
|
if(this.backButton){
|
|
this.backButton.set("href", href);
|
|
}
|
|
},
|
|
|
|
_setTransitionAttr: function(/*String*/transition){
|
|
// tags:
|
|
// private
|
|
this._set("transition", transition);
|
|
if(this.backButton){
|
|
this.backButton.set("transition", transition);
|
|
}
|
|
},
|
|
|
|
_setLabelAttr: function(/*String*/label){
|
|
// tags:
|
|
// private
|
|
this._set("label", label);
|
|
this.labelNode.innerHTML = this.labelDivNode.innerHTML = this._cv ? this._cv(label) : label;
|
|
},
|
|
|
|
_setBusyAttr: function(/*Boolean*/busy){
|
|
// tags:
|
|
// private
|
|
var prog = this._prog;
|
|
if(busy){
|
|
if(!prog){
|
|
prog = this._prog = new ProgressIndicator({size:30, center:false});
|
|
domClass.add(prog.domNode, this.progStyle);
|
|
}
|
|
domConstruct.place(prog.domNode, this.domNode, "first");
|
|
prog.start();
|
|
}else{
|
|
prog.stop();
|
|
}
|
|
this._set("busy", busy);
|
|
}
|
|
});
|
|
});
|