| 1 | define([ |
|---|
| 2 | 'dojo/_base/declare', |
|---|
| 3 | 'dijit/form/Button', |
|---|
| 4 | 'dojo/dom-class' |
|---|
| 5 | ], function(declare, Button, domClass){ |
|---|
| 6 | return declare("rft.ui.InlineButton", [Button], { |
|---|
| 7 | showLabel: false, |
|---|
| 8 | highlightColor: "blue", |
|---|
| 9 | baseClass: "rftInlineButton", |
|---|
| 10 | postMixInProperties: function(){ |
|---|
| 11 | this.iconClass = "rftIcon rftIcon"+this.iconType; |
|---|
| 12 | this.inherited(arguments); |
|---|
| 13 | }, |
|---|
| 14 | postCreate: function(){ |
|---|
| 15 | this.label = this.containerNode.innerHTML; |
|---|
| 16 | this.containerNode.innerHTML = ""; |
|---|
| 17 | var capitalizedHighlightColor = this.highlightColor.charAt(0).toUpperCase() + this.highlightColor.slice(1); |
|---|
| 18 | domClass.add(this.domNode, "highlight"+capitalizedHighlightColor); |
|---|
| 19 | // Set up hover event |
|---|
| 20 | dojo.connect(this.domNode, "onmouseenter", this, "_toggleHover"); |
|---|
| 21 | dojo.connect(this.domNode, "onmouseleave", this, "_toggleHover"); |
|---|
| 22 | this.inherited(arguments); |
|---|
| 23 | }, |
|---|
| 24 | _toggleHover: function(evt){ |
|---|
| 25 | // This does nothing yet, but was wired up in case we want to change icon colour or something on hover! |
|---|
| 26 | // domClass.toggle(this.domNode, "hovering"); |
|---|
| 27 | } |
|---|
| 28 | }); |
|---|
| 29 | }); |
|---|
| 30 | |
|---|
| 31 | /* DESCRIPTION: |
|---|
| 32 | * |
|---|
| 33 | * A configuration preset for dijit.form.Button. Automatically sets certain properties on the instantiation instead of having to manually do that in declaration markup |
|---|
| 34 | * InlineButton has a 16x16px icon (rftIcon.css) and NO label by default |
|---|
| 35 | * Transparent background, no border, 24px height |
|---|
| 36 | * Perhaps a drop shadow or outline on hover/click? If not, add a class that highlights the icon red or something. |
|---|
| 37 | */ |
|---|
