[483] | 1 | define([ |
---|
| 2 | "dojo/_base/declare", |
---|
| 3 | "dojo/dom-construct", |
---|
| 4 | "dojo/dom-geometry", |
---|
| 5 | "dojo/dom-style", |
---|
| 6 | "dijit/_Contained", |
---|
| 7 | "dijit/_WidgetBase", |
---|
| 8 | "dojo/has", |
---|
| 9 | "dojo/has!dojo-bidi?dojox/mobile/bidi/CarouselItem" |
---|
| 10 | ], function(declare, domConstruct, domGeometry, domStyle, Contained, WidgetBase, has, BidiCarouselItem){ |
---|
| 11 | |
---|
| 12 | // module: |
---|
| 13 | // dojox/mobile/CarouselItem |
---|
| 14 | |
---|
| 15 | var CarouselItem = declare(has("dojo-bidi") ? "dojox.mobile.NonBidiCarouselItem" : "dojox.mobile.CarouselItem", [WidgetBase, Contained], { |
---|
| 16 | // summary: |
---|
| 17 | // An item of dojox/mobile/Carousel. |
---|
| 18 | // description: |
---|
| 19 | // CarouselItem represents an item of dojox/mobile/Carousel. In |
---|
| 20 | // typical use cases, users do not use this widget alone. Instead, |
---|
| 21 | // it is used in conjunction with the Carousel widget. |
---|
| 22 | |
---|
| 23 | // alt: String |
---|
| 24 | // An alt text for the carousel item image. |
---|
| 25 | alt: "", |
---|
| 26 | |
---|
| 27 | // src: String |
---|
| 28 | // A path for an image to be displayed as a carousel item. |
---|
| 29 | src: "", |
---|
| 30 | |
---|
| 31 | // headerText: String |
---|
| 32 | // A text that is displayed above the carousel item image. |
---|
| 33 | headerText: "", |
---|
| 34 | |
---|
| 35 | // footerText: String |
---|
| 36 | // A text that is displayed below the carousel item image. |
---|
| 37 | footerText: "", |
---|
| 38 | |
---|
| 39 | /* internal properties */ |
---|
| 40 | |
---|
| 41 | // baseClass: String |
---|
| 42 | // The name of the CSS class of this widget. |
---|
| 43 | baseClass: "mblCarouselItem", |
---|
| 44 | |
---|
| 45 | buildRendering: function(){ |
---|
| 46 | this.inherited(arguments); |
---|
| 47 | this.domNode.tabIndex = "0"; |
---|
| 48 | this.headerTextNode = domConstruct.create("div", { className: "mblCarouselItemHeaderText" }, this.domNode); |
---|
| 49 | this.imageNode = domConstruct.create("img", { className: "mblCarouselItemImage" }, this.domNode); |
---|
| 50 | this.footerTextNode = domConstruct.create("div", { className: "mblCarouselItemFooterText" }, this.domNode); |
---|
| 51 | }, |
---|
| 52 | |
---|
| 53 | startup: function(){ |
---|
| 54 | if(this._started){ return; } |
---|
| 55 | this.inherited(arguments); |
---|
| 56 | this.resize(); |
---|
| 57 | }, |
---|
| 58 | |
---|
| 59 | resize: function(size){ |
---|
| 60 | var box = domGeometry.getMarginBox(this.domNode); |
---|
| 61 | if(box.h === 0){ return; } |
---|
| 62 | var h1 = domGeometry.getMarginBox(this.headerTextNode).h; |
---|
| 63 | var h2 = domGeometry.getMarginBox(this.footerTextNode).h; |
---|
| 64 | domGeometry.setMarginBox(this.imageNode, {h:box.h - h1 - h2}); |
---|
| 65 | }, |
---|
| 66 | |
---|
| 67 | select: function(){ |
---|
| 68 | // summary: |
---|
| 69 | // Highlights the item. |
---|
| 70 | var img = this.imageNode |
---|
| 71 | domStyle.set(img, "opacity", 0.4); |
---|
| 72 | this.defer(function(){ |
---|
| 73 | domStyle.set(img, "opacity", 1); |
---|
| 74 | }, 1000); |
---|
| 75 | }, |
---|
| 76 | |
---|
| 77 | _setAltAttr: function(/*String*/alt){ |
---|
| 78 | // tags: |
---|
| 79 | // private |
---|
| 80 | this._set("alt", alt); |
---|
| 81 | this.imageNode.alt = alt; |
---|
| 82 | }, |
---|
| 83 | |
---|
| 84 | _setSrcAttr: function(/*String*/src){ |
---|
| 85 | // tags: |
---|
| 86 | // private |
---|
| 87 | this._set("src", src); |
---|
| 88 | this.imageNode.src = src; |
---|
| 89 | }, |
---|
| 90 | |
---|
| 91 | _setHeaderTextAttr: function(/*String*/text){ |
---|
| 92 | this._set("headerText", text); |
---|
| 93 | this.headerTextNode.innerHTML = this._cv ? this._cv(text) : text; |
---|
| 94 | }, |
---|
| 95 | |
---|
| 96 | _setFooterTextAttr: function(/*String*/text){ |
---|
| 97 | // tags: |
---|
| 98 | // private |
---|
| 99 | this._set("footerText", text); |
---|
| 100 | this.footerTextNode.innerHTML = this._cv ? this._cv(text) : text; |
---|
| 101 | } |
---|
| 102 | }); |
---|
| 103 | return has("dojo-bidi") ? declare("dojox.mobile.CarouselItem", [CarouselItem, BidiCarouselItem]) : CarouselItem; |
---|
| 104 | }); |
---|