1 | //******************************************************** |
---|
2 | // Class Button |
---|
3 | // Display a button |
---|
4 | // |
---|
5 | // use jQuery |
---|
6 | // str value: Value to display in the button |
---|
7 | // dom parent: in which dom element to draw the button |
---|
8 | // int id: id of the dom element |
---|
9 | // func onclick: callback function when button clicked |
---|
10 | // str specificClass |
---|
11 | // classNameToAdd : use to avoid button's style for button_left, button_right and button_middle when button.css is used with pagination.css |
---|
12 | // useLonelyMidleImage : if true, we use image for parts left and right, otherwise, we only use an image for the middle |
---|
13 | //******************************************************** |
---|
14 | |
---|
15 | var ComplexButton = Class.create( { |
---|
16 | |
---|
17 | initialize: function( param ) |
---|
18 | { |
---|
19 | // Init |
---|
20 | this.id = param.id ? param.id : ""; |
---|
21 | this.parent = param.parent ? param.parent : false; |
---|
22 | this.value = param.value ? param.value : ""; |
---|
23 | this.specificClass = param.specificClass ? param.specificClass : false; |
---|
24 | this.callbackOnClick = param.onClick ? param.onClick : false; |
---|
25 | this.classNameToAdd = param.classNameToAdd ? param.classNameToAdd : false; |
---|
26 | this.useLonelyMidleImage = param.useLonelyMidleImage ? param.useLonelyMidleImage : false; |
---|
27 | this.boolDisabled = false; |
---|
28 | this.boolSelected = false; |
---|
29 | this.boolDisplayed = false; |
---|
30 | |
---|
31 | // Create button elements |
---|
32 | this.divContainer = $( document.createElement( "div" ) ); |
---|
33 | this.divContainer.attr( {id:this.id, class:"complexButton"} ); |
---|
34 | if( this.specificClass ) |
---|
35 | this.divContainer.addClass( this.specificClass ); |
---|
36 | if( this.parent ) |
---|
37 | this.parent.append( this.divContainer ); |
---|
38 | |
---|
39 | this.divLeft = $( document.createElement( "div" ) ); |
---|
40 | if( this.classNameToAdd ) |
---|
41 | this.divLeft.addClass( "complexButton_left_" + this.classNameToAdd ); |
---|
42 | else if( !this.useLonelyMidleImage ) |
---|
43 | this.divLeft.addClass( "complexButton_left" ); |
---|
44 | this.divContainer.append( this.divLeft ); |
---|
45 | |
---|
46 | this.divMiddle = $( document.createElement( "div" ) ); |
---|
47 | this.divMiddle.attr( {id:"button_middle"} ); |
---|
48 | if( this.classNameToAdd ) |
---|
49 | this.divMiddle.addClass( "complexButton_middle_" + this.classNameToAdd ); |
---|
50 | else if( this.useLonelyMidleImage ) |
---|
51 | this.divMiddle.addClass( "complexButton_lonely_middle" ); |
---|
52 | else |
---|
53 | this.divMiddle.addClass( "complexButton_middle" ); |
---|
54 | this.divContainer.append( this.divMiddle ); |
---|
55 | |
---|
56 | this.divText = $( document.createElement( "div" ) ); |
---|
57 | this.divText.attr( {id:"button_text"} ); |
---|
58 | this.divText.addClass( "complexButton_text" ); |
---|
59 | this.divText.html( this.value ); |
---|
60 | this.divMiddle.append( this.divText ); |
---|
61 | |
---|
62 | this.divRight = $( document.createElement( "div" ) ); |
---|
63 | if( this.classNameToAdd ) |
---|
64 | this.divRight.addClass( "complexButton_right_" + this.classNameToAdd ); |
---|
65 | else if( !this.useLonelyMidleImage ) |
---|
66 | this.divRight.addClass( "complexButton_right" ); |
---|
67 | this.divContainer.append( this.divRight ); |
---|
68 | |
---|
69 | // Define button events |
---|
70 | this.divContainer.bind( 'click', this, this.onClick ); |
---|
71 | }, |
---|
72 | |
---|
73 | // Actions ******************************************************** |
---|
74 | |
---|
75 | appendChild :function( parent ) |
---|
76 | { |
---|
77 | this.parent = parent; |
---|
78 | this.parent.append( this.divContainer ); |
---|
79 | }, |
---|
80 | |
---|
81 | setDisabled:function( value ) |
---|
82 | { |
---|
83 | if( value ) |
---|
84 | this.disable(); |
---|
85 | else |
---|
86 | this.enable(); |
---|
87 | }, |
---|
88 | |
---|
89 | disable : function() |
---|
90 | { |
---|
91 | this.boolDisabled = true; |
---|
92 | this.divContainer.addClassName( "disable" ); |
---|
93 | }, |
---|
94 | |
---|
95 | enable : function() |
---|
96 | { |
---|
97 | this.boolDisabled = false; |
---|
98 | this.divContainer.removeClassName( "disable" ); |
---|
99 | }, |
---|
100 | |
---|
101 | setSelected : function( value ) |
---|
102 | { |
---|
103 | this.boolSelected = value; |
---|
104 | if( this.boolSelected ) |
---|
105 | this.divContainer.addClassName( "selected" ); |
---|
106 | else |
---|
107 | this.divContainer.removeClassName( "selected" ); |
---|
108 | }, |
---|
109 | |
---|
110 | show : function() |
---|
111 | { |
---|
112 | this.boolDisplayed = true; |
---|
113 | this.divContainer.style.display = ""; |
---|
114 | }, |
---|
115 | |
---|
116 | hide : function() |
---|
117 | { |
---|
118 | this.boolDisplayed = false; |
---|
119 | this.divContainer.style.display = "none"; |
---|
120 | }, |
---|
121 | |
---|
122 | // Getter / Setter ******************************************************** |
---|
123 | |
---|
124 | getContainer: function() |
---|
125 | { |
---|
126 | return this.divContainer; |
---|
127 | }, |
---|
128 | |
---|
129 | getDisable : function() |
---|
130 | { |
---|
131 | return this.boolDisabled; |
---|
132 | }, |
---|
133 | |
---|
134 | getSelect: function() |
---|
135 | { |
---|
136 | return this.boolSelected; |
---|
137 | }, |
---|
138 | |
---|
139 | setValue : function( value ) |
---|
140 | { |
---|
141 | this.value = value; |
---|
142 | this.divText.html( this.value ); |
---|
143 | }, |
---|
144 | |
---|
145 | setCallbackOnClick : function( value ) |
---|
146 | { |
---|
147 | this.callbackOnClick = value; |
---|
148 | }, |
---|
149 | |
---|
150 | // Events ******************************************************** |
---|
151 | |
---|
152 | onClick : function( event ) |
---|
153 | { |
---|
154 | var contextEvent = event.data; |
---|
155 | if( !contextEvent.getDisable() && (undefined == event.detail || 1 == event.detail) && contextEvent.callbackOnClick ) |
---|
156 | contextEvent.callbackOnClick(); |
---|
157 | } |
---|
158 | } ); |
---|