|
1
|
|
|
<?php |
|
2
|
|
|
namespace Ajax\ui\components; |
|
3
|
|
|
|
|
4
|
|
|
use Ajax\JsUtils; |
|
5
|
|
|
use Ajax\ui\properties\Animation; |
|
6
|
|
|
use Ajax\common\components\SimpleComponent; |
|
7
|
|
|
use Ajax\service\JString; |
|
8
|
|
|
|
|
9
|
|
|
/** |
|
10
|
|
|
* Composant JQuery UI Accordion |
|
11
|
|
|
* |
|
12
|
|
|
* @author jc |
|
13
|
|
|
* @version 1.001 |
|
14
|
|
|
*/ |
|
15
|
|
|
class Accordion extends SimpleComponent { |
|
16
|
|
|
|
|
17
|
|
|
public function __construct(JsUtils $js) { |
|
18
|
|
|
parent::__construct($js); |
|
19
|
|
|
$this->params = array( |
|
20
|
|
|
"active" => 0 |
|
21
|
|
|
); |
|
22
|
|
|
$this->uiName = "accordion"; |
|
23
|
|
|
} |
|
24
|
|
|
|
|
25
|
|
|
/** |
|
26
|
|
|
* Which panel is currently open. |
|
27
|
|
|
* Multiple types supported: |
|
28
|
|
|
* Boolean: Setting active to false will collapse all panels. |
|
29
|
|
|
* This requires the collapsible option to be true. |
|
30
|
|
|
* Integer: The zero-based index of the panel that is active (open). |
|
31
|
|
|
* A negative value selects panels going backward from the last panel. |
|
32
|
|
|
* |
|
33
|
|
|
* @param Boolean $value |
|
34
|
|
|
* default : 0 |
|
35
|
|
|
* @return $this |
|
36
|
|
|
*/ |
|
37
|
|
|
public function setActive($value) { |
|
38
|
|
|
return $this->setParam("active", $value); |
|
39
|
|
|
} |
|
40
|
|
|
|
|
41
|
|
|
/** |
|
42
|
|
|
* If and how to animate changing panels. |
|
43
|
|
|
* Multiple types supported: |
|
44
|
|
|
* Boolean: A value of false will disable animations. |
|
45
|
|
|
* Number: Duration in milliseconds with default easing. |
|
46
|
|
|
* String: Name of easing to use with default duration. |
|
47
|
|
|
* Object: Animation settings with easing and duration properties. |
|
48
|
|
|
* Can also contain a down property with any of the above options. |
|
49
|
|
|
* "Down" animations occur when the panel being activated has a lower index than the currently active panel. |
|
50
|
|
|
* |
|
51
|
|
|
* @param mixed $value |
|
52
|
|
|
* default : {} |
|
53
|
|
|
* @return $this |
|
54
|
|
|
*/ |
|
55
|
|
|
public function setAnimate($value) { |
|
56
|
|
|
if ($value instanceof Animation) |
|
57
|
|
|
$value = $value->getParams(); |
|
58
|
|
|
else if (is_string($value)) { |
|
59
|
|
|
$animation = new Animation(); |
|
60
|
|
|
$animation->setEasing($value); |
|
61
|
|
|
} |
|
62
|
|
|
$this->setParam("animate", $value); |
|
63
|
|
|
return $this; |
|
64
|
|
|
} |
|
65
|
|
|
|
|
66
|
|
|
/** |
|
67
|
|
|
* Whether all the sections can be closed at once. |
|
68
|
|
|
* Allows collapsing the active section. |
|
69
|
|
|
* |
|
70
|
|
|
* @param Boolean $value |
|
71
|
|
|
* default : false |
|
72
|
|
|
* @return $this |
|
73
|
|
|
*/ |
|
74
|
|
|
public function setCollapsible($value) { |
|
75
|
|
|
return $this->setParamCtrl("collapsible", $value, "is_bool"); |
|
76
|
|
|
} |
|
77
|
|
|
|
|
78
|
|
|
/** |
|
79
|
|
|
* Disables the accordion if set to true. |
|
80
|
|
|
* |
|
81
|
|
|
* @param Boolean $value |
|
82
|
|
|
* default : false |
|
83
|
|
|
* @return $this |
|
84
|
|
|
*/ |
|
85
|
|
|
public function setDisabled($value) { |
|
86
|
|
|
return $this->setParamCtrl("disabled", $value, "is_bool"); |
|
87
|
|
|
} |
|
88
|
|
|
|
|
89
|
|
|
/** |
|
90
|
|
|
* The event that accordion headers will react to in order to activate the associated panel. |
|
91
|
|
|
* Multiple events can be specified, separated by a space. |
|
92
|
|
|
* |
|
93
|
|
|
* @param string $value |
|
94
|
|
|
* default : click |
|
95
|
|
|
* @return $this |
|
96
|
|
|
*/ |
|
97
|
|
|
public function setEvent($value) { |
|
98
|
|
|
$this->setParam("event", $value); |
|
99
|
|
|
return $this; |
|
100
|
|
|
} |
|
101
|
|
|
|
|
102
|
|
|
/** |
|
103
|
|
|
* Selector for the header element, applied via . |
|
104
|
|
|
* |
|
105
|
|
|
* find() on the main accordion element. |
|
106
|
|
|
* Content panels must be the sibling immediately after their associated headers. |
|
107
|
|
|
* |
|
108
|
|
|
* @param string $value |
|
109
|
|
|
* css/JQuery Selector |
|
110
|
|
|
* default : "> li > :first-child,> :not(li):even" |
|
111
|
|
|
* @return $this |
|
112
|
|
|
*/ |
|
113
|
|
|
public function setHeader($value) { |
|
114
|
|
|
return $this->setParam("header", $value); |
|
115
|
|
|
} |
|
116
|
|
|
|
|
117
|
|
|
/** |
|
118
|
|
|
* Controls the height of the accordion and each panel. |
|
119
|
|
|
* Possible values: |
|
120
|
|
|
* "auto": All panels will be set to the height of the tallest panel. |
|
121
|
|
|
* "fill": Expand to the available height based on the accordion's parent height. |
|
122
|
|
|
* "content": Each panel will be only as tall as its content. |
|
123
|
|
|
* |
|
124
|
|
|
* @param String $value |
|
125
|
|
|
* default : content |
|
126
|
|
|
* @return $this |
|
127
|
|
|
*/ |
|
128
|
|
|
public function setHeightStyle($value) { |
|
129
|
|
|
return $this->setParamCtrl("heightStyle", $value, array( |
|
130
|
|
|
"auto", |
|
131
|
|
|
"fill", |
|
132
|
|
|
"content" |
|
133
|
|
|
)); |
|
134
|
|
|
} |
|
135
|
|
|
|
|
136
|
|
|
/** |
|
137
|
|
|
* Icons to use for headers, matching an icon provided by the jQuery UI CSS Framework. |
|
138
|
|
|
* Set to false to have no icons displayed. |
|
139
|
|
|
* header (string, default: "ui-icon-triangle-1-e") |
|
140
|
|
|
* activeHeader (string, default: "ui-icon-triangle-1-s") |
|
141
|
|
|
* |
|
142
|
|
|
* @param String $value |
|
143
|
|
|
* default : { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" } |
|
144
|
|
|
* @return $this |
|
145
|
|
|
*/ |
|
146
|
|
|
public function setIcons($value) { |
|
147
|
|
|
if (is_string($value)) { |
|
|
|
|
|
|
148
|
|
|
if (JString::startsWith($value, "{")); |
|
149
|
|
|
$value = "%" . $value . "%"; |
|
150
|
|
|
} |
|
151
|
|
|
$this->setParam("icons", $value); |
|
152
|
|
|
return $this; |
|
153
|
|
|
} |
|
154
|
|
|
|
|
155
|
|
|
/** |
|
156
|
|
|
* Triggered after a panel has been activated (after animation completes). |
|
157
|
|
|
* If the accordion was previously collapsed, ui.oldHeader and ui.oldPanel will be empty jQuery objects. |
|
158
|
|
|
* If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects. |
|
159
|
|
|
* |
|
160
|
|
|
* @param string $jsCode |
|
161
|
|
|
* @return $this |
|
162
|
|
|
*/ |
|
163
|
|
|
public function onActivate($jsCode) { |
|
164
|
|
|
return $this->addEvent("activate", $jsCode); |
|
165
|
|
|
} |
|
166
|
|
|
|
|
167
|
|
|
/** |
|
168
|
|
|
* Triggered directly before a panel is activated. |
|
169
|
|
|
* Can be canceled to prevent the panel from activating. |
|
170
|
|
|
* If the accordion is currently collapsed, ui.oldHeader and ui.oldPanel will be empty jQuery objects. |
|
171
|
|
|
* If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects. |
|
172
|
|
|
* |
|
173
|
|
|
* @param string $jsCode |
|
174
|
|
|
* @return $this |
|
175
|
|
|
*/ |
|
176
|
|
|
public function onBeforeActivate($jsCode) { |
|
177
|
|
|
return $this->addEvent("beforeActivate", $jsCode); |
|
178
|
|
|
} |
|
179
|
|
|
|
|
180
|
|
|
/** |
|
181
|
|
|
* Triggered when the accordion is created. |
|
182
|
|
|
* If the accordion is collapsed, ui.header and ui.panel will be empty jQuery objects. |
|
183
|
|
|
* |
|
184
|
|
|
* @param string $jsCode |
|
185
|
|
|
* @return $this |
|
186
|
|
|
*/ |
|
187
|
|
|
public function onCreate($jsCode) { |
|
188
|
|
|
return $this->addEvent("create", $jsCode); |
|
189
|
|
|
} |
|
190
|
|
|
} |
|
191
|
|
|
|