1 | |
|
2 | |
|
3 | |
|
4 | |
|
5 | |
|
6 | |
|
7 | |
|
8 | |
|
9 | |
|
10 | |
|
11 | |
|
12 | |
|
13 | |
|
14 | |
|
15 | |
|
16 | |
package org.kuali.student.common.ui.client.widgets.search; |
17 | |
|
18 | |
import org.kuali.student.common.ui.client.theme.Theme; |
19 | |
import org.kuali.student.common.ui.client.widgets.KSButton; |
20 | |
import org.kuali.student.common.ui.client.widgets.KSButtonAbstract.ButtonStyle; |
21 | |
import org.kuali.student.common.ui.client.widgets.layout.HorizontalBlockFlowPanel; |
22 | |
import org.kuali.student.common.ui.client.widgets.layout.VerticalFlowPanel; |
23 | |
|
24 | |
import com.google.gwt.animation.client.Animation; |
25 | |
import com.google.gwt.event.dom.client.ClickEvent; |
26 | |
import com.google.gwt.event.dom.client.ClickHandler; |
27 | |
import com.google.gwt.user.client.DOM; |
28 | |
import com.google.gwt.user.client.ui.Composite; |
29 | |
import com.google.gwt.user.client.ui.DisclosurePanel; |
30 | |
import com.google.gwt.user.client.ui.Image; |
31 | |
import com.google.gwt.user.client.ui.SimplePanel; |
32 | |
import com.google.gwt.user.client.ui.Widget; |
33 | |
|
34 | 0 | public class CollapsablePanel extends Composite{ |
35 | |
private KSButton label; |
36 | 0 | private VerticalFlowPanel layout = new VerticalFlowPanel(); |
37 | 0 | private HorizontalBlockFlowPanel linkPanel = new HorizontalBlockFlowPanel(); |
38 | 0 | protected SimplePanel content = new SimplePanel(); |
39 | 0 | private boolean isOpen = false; |
40 | 0 | private ContentAnimation animation = new ContentAnimation(); |
41 | |
private boolean withImages; |
42 | |
private String buttonLabel; |
43 | |
|
44 | 0 | Image closedImage = Theme.INSTANCE.getCommonImages().getDisclosureClosedIcon(); |
45 | 0 | Image openedImage = Theme.INSTANCE.getCommonImages().getDisclosureOpenedIcon(); |
46 | 0 | private static class ContentAnimation extends Animation { |
47 | |
|
48 | |
|
49 | |
|
50 | |
private boolean opening; |
51 | |
|
52 | |
|
53 | |
|
54 | |
|
55 | |
private CollapsablePanel curPanel; |
56 | |
|
57 | |
|
58 | |
|
59 | |
|
60 | |
|
61 | |
|
62 | |
|
63 | |
public void setOpen(CollapsablePanel panel, boolean animate) { |
64 | |
|
65 | 0 | cancel(); |
66 | |
|
67 | |
|
68 | 0 | if (animate) { |
69 | 0 | curPanel = panel; |
70 | 0 | opening = panel.isOpen; |
71 | 0 | run(1000); |
72 | |
} else { |
73 | 0 | panel.content.setVisible(panel.isOpen); |
74 | 0 | if (panel.isOpen) { |
75 | |
|
76 | 0 | panel.content.setVisible(true); |
77 | |
} |
78 | |
} |
79 | 0 | } |
80 | |
|
81 | |
@Override |
82 | |
protected void onComplete() { |
83 | 0 | if (!opening) { |
84 | 0 | curPanel.content.setVisible(false); |
85 | |
} |
86 | 0 | DOM.setStyleAttribute(curPanel.content.getElement(), "height", |
87 | |
"auto"); |
88 | 0 | DOM.setStyleAttribute(curPanel.content.getElement(), "overflow", "visible"); |
89 | 0 | curPanel = null; |
90 | 0 | } |
91 | |
|
92 | |
@Override |
93 | |
protected void onStart() { |
94 | 0 | super.onStart(); |
95 | 0 | DOM.setStyleAttribute(curPanel.content.getElement(), "overflow", "hidden"); |
96 | 0 | if (opening) { |
97 | 0 | curPanel.content.setVisible(true); |
98 | |
|
99 | 0 | curPanel.content.setVisible(true); |
100 | |
} |
101 | 0 | } |
102 | |
|
103 | |
@Override |
104 | |
protected void onUpdate(double progress) { |
105 | 0 | int scrollHeight = DOM.getElementPropertyInt( |
106 | |
curPanel.content.getElement(), "scrollHeight"); |
107 | 0 | int height = (int) (progress * scrollHeight); |
108 | 0 | if (!opening) { |
109 | 0 | height = scrollHeight - height; |
110 | |
} |
111 | 0 | height = Math.max(height, 1); |
112 | |
|
113 | 0 | DOM.setStyleAttribute(curPanel.content.getElement(), "height", |
114 | |
height + "px"); |
115 | 0 | DOM.setStyleAttribute(curPanel.content.getElement(), "width", |
116 | |
"auto"); |
117 | 0 | } |
118 | |
} |
119 | |
|
120 | 0 | public CollapsablePanel(String name, Widget content, boolean isOpen){ |
121 | 0 | init(name, content, isOpen, true); |
122 | 0 | } |
123 | |
|
124 | 0 | public CollapsablePanel(String name, Widget content, boolean isOpen, boolean withImages){ |
125 | 0 | init(name, content, isOpen, withImages); |
126 | |
|
127 | 0 | } |
128 | |
|
129 | |
private void init(String name, Widget content, boolean isOpen, boolean withImages){ |
130 | 0 | this.withImages = withImages; |
131 | 0 | label = new KSButton(name, ButtonStyle.DEFAULT_ANCHOR); |
132 | 0 | this.content.setWidget(content); |
133 | 0 | label = new KSButton(name, ButtonStyle.DEFAULT_ANCHOR); |
134 | 0 | linkPanel.add(label); |
135 | 0 | if(!isOpen){ |
136 | 0 | this.content.setVisible(false); |
137 | 0 | if (this.withImages) |
138 | 0 | linkPanel.add(closedImage); |
139 | |
} |
140 | |
else { |
141 | 0 | if (this.withImages) |
142 | 0 | linkPanel.add(openedImage); |
143 | |
} |
144 | |
|
145 | 0 | label.addClickHandler(new ClickHandler(){ |
146 | |
|
147 | |
@Override |
148 | |
public void onClick(ClickEvent event) { |
149 | 0 | if(CollapsablePanel.this.isOpen){ |
150 | 0 | CollapsablePanel.this.close(); |
151 | |
} |
152 | |
else{ |
153 | 0 | CollapsablePanel.this.open(); |
154 | |
} |
155 | 0 | } |
156 | |
}); |
157 | |
|
158 | 0 | layout.add(linkPanel); |
159 | 0 | layout.add(this.content); |
160 | 0 | closedImage.addStyleName("ks-image-middle-alignment"); |
161 | 0 | openedImage.addStyleName("ks-image-middle-alignment"); |
162 | 0 | content.addStyleName("top-padding"); |
163 | 0 | this.initWidget(layout); |
164 | 0 | } |
165 | |
|
166 | |
|
167 | |
|
168 | |
public KSButton getLabel() { |
169 | 0 | return label; |
170 | |
} |
171 | |
|
172 | |
public boolean isOpen(){ |
173 | 0 | return isOpen; |
174 | |
} |
175 | |
|
176 | |
public void open(){ |
177 | 0 | isOpen = true; |
178 | 0 | if (withImages) { |
179 | 0 | linkPanel.remove(closedImage); |
180 | 0 | linkPanel.add(openedImage); |
181 | |
} |
182 | 0 | animation.setOpen(this, true); |
183 | 0 | } |
184 | |
|
185 | |
public void close(){ |
186 | 0 | isOpen = false; |
187 | 0 | if (withImages) { |
188 | 0 | linkPanel.remove(openedImage); |
189 | 0 | linkPanel.add(closedImage); |
190 | |
} |
191 | 0 | animation.setOpen(this, true); |
192 | 0 | } |
193 | |
|
194 | |
|
195 | |
} |