You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
8.0 KiB
263 lines
8.0 KiB
define([ |
|
"dojo/_base/array", |
|
"dojo/_base/connect", |
|
"dojo/_base/declare", |
|
"dojo/_base/lang", |
|
"dojo/_base/window", |
|
"dojo/dom-class", |
|
"dojo/dom-construct", |
|
"dojo/dom-style", |
|
"dojo/dom-attr", |
|
"dijit/registry", |
|
"./common", |
|
"dijit/_Contained", |
|
"dijit/_Container", |
|
"dijit/_WidgetBase", |
|
"./ProgressIndicator", |
|
"./ToolBarButton", |
|
"./View", |
|
"dojo/has", |
|
"dojo/has!dojo-bidi?dojox/mobile/bidi/Heading" |
|
], function(array, connect, declare, lang, win, domClass, domConstruct, domStyle, domAttr, registry, common, Contained, Container, WidgetBase, ProgressIndicator, ToolBarButton, View, has, BidiHeading){ |
|
|
|
// module: |
|
// dojox/mobile/Heading |
|
|
|
var dm = lang.getObject("dojox.mobile", true); |
|
|
|
var Heading = declare(has("dojo-bidi") ? "dojox.mobile.NonBidiHeading" : "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(){ |
|
if(!this.templateString){ // true if this widget is not templated |
|
// Create root node if it wasn't created by _TemplatedMixin |
|
this.domNode = this.containerNode = this.srcNodeRef || win.doc.createElement(this.tag); |
|
} |
|
this.inherited(arguments); |
|
|
|
if(!this.templateString){ // true if this widget is not templated |
|
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); |
|
} |
|
|
|
if(this.labelDivNode){ |
|
domAttr.set(this.labelDivNode, "role", "heading"); //a11y |
|
domAttr.set(this.labelDivNode, "aria-level", "1"); |
|
} |
|
|
|
common.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; |
|
_this.defer(function(){ // necessary to render correctly |
|
_this.resize(); |
|
}); |
|
} |
|
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 && !this.href, // use browser history unless moveTo or href |
|
href: this.href, |
|
transition: this.transition, |
|
transitionDir: -1, |
|
dir: this.isLeftToRight() ? "ltr" : "rtl" |
|
}); |
|
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); |
|
this.backButton.set("back", !moveTo && !this.href); |
|
} |
|
}, |
|
|
|
_setHrefAttr: function(/*String*/href){ |
|
// tags: |
|
// private |
|
this._set("href", href); |
|
if(this.backButton){ |
|
this.backButton.set("href", href); |
|
this.backButton.set("back", !this.moveTo && !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; |
|
delete this.labelNodeLen; |
|
}, |
|
|
|
_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 if(prog){ |
|
prog.stop(); |
|
} |
|
this._set("busy", busy); |
|
} |
|
}); |
|
|
|
return has("dojo-bidi") ? declare("dojox.mobile.Heading", [Heading, BidiHeading]) : Heading; |
|
});
|
|
|