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); } }); });