| 1 |  |   | 
  | 2 |  |   | 
  | 3 |  |   | 
  | 4 |  |   | 
  | 5 |  |   | 
  | 6 |  |   | 
  | 7 |  |   | 
  | 8 |  |   | 
  | 9 |  |   | 
  | 10 |  |   | 
  | 11 |  |   | 
  | 12 |  |   | 
  | 13 |  |   | 
  | 14 |  |   | 
  | 15 |  |   | 
  | 16 |  |  package org.kuali.student.common.ui.client.widgets; | 
  | 17 |  |   | 
  | 18 |  |  import java.util.List; | 
  | 19 |  |   | 
  | 20 |  |  import org.kuali.student.common.ui.client.mvc.Callback; | 
  | 21 |  |  import org.kuali.student.common.ui.client.theme.Theme; | 
  | 22 |  |  import org.kuali.student.common.ui.client.util.DebugIdUtils; | 
  | 23 |  |  import org.kuali.student.common.ui.client.widgets.field.layout.element.SpanPanel; | 
  | 24 |  |  import org.kuali.student.common.ui.client.widgets.menus.KSMenu.MenuImageLocation; | 
  | 25 |  |  import org.kuali.student.common.ui.client.widgets.menus.KSMenuItemData; | 
  | 26 |  |  import org.kuali.student.common.ui.client.widgets.menus.MenuChangeEvent; | 
  | 27 |  |  import org.kuali.student.common.ui.client.widgets.menus.MenuEventHandler; | 
  | 28 |  |  import org.kuali.student.common.ui.client.widgets.menus.MenuSelectEvent; | 
  | 29 |  |  import org.kuali.student.common.ui.client.widgets.menus.impl.KSListMenuImpl; | 
  | 30 |  |   | 
  | 31 |  |  import com.google.gwt.event.dom.client.ClickEvent; | 
  | 32 |  |  import com.google.gwt.event.dom.client.ClickHandler; | 
  | 33 |  |  import com.google.gwt.event.dom.client.FocusEvent; | 
  | 34 |  |  import com.google.gwt.event.dom.client.FocusHandler; | 
  | 35 |  |  import com.google.gwt.event.dom.client.KeyDownEvent; | 
  | 36 |  |  import com.google.gwt.event.dom.client.KeyDownHandler; | 
  | 37 |  |  import com.google.gwt.event.dom.client.MouseOutEvent; | 
  | 38 |  |  import com.google.gwt.event.dom.client.MouseOutHandler; | 
  | 39 |  |  import com.google.gwt.event.dom.client.MouseOverEvent; | 
  | 40 |  |  import com.google.gwt.event.dom.client.MouseOverHandler; | 
  | 41 |  |  import com.google.gwt.user.client.ui.Composite; | 
  | 42 |  |  import com.google.gwt.user.client.ui.HTMLPanel; | 
  | 43 |  |  import com.google.gwt.user.client.ui.HasHorizontalAlignment; | 
  | 44 |  |  import com.google.gwt.user.client.ui.HorizontalPanel; | 
  | 45 |  |  import com.google.gwt.user.client.ui.Image; | 
  | 46 |  |  import com.google.gwt.user.client.ui.KeyboardListener; | 
  | 47 |  |  import com.google.gwt.user.client.ui.PopupPanel; | 
  | 48 |  |  import com.google.gwt.user.client.ui.Widget; | 
  | 49 |  |   | 
  | 50 | 0 |  public class StylishDropDown extends Composite{ | 
  | 51 |  |           | 
  | 52 | 0 |          private ClickablePanel namePanel = new ClickablePanel(); | 
  | 53 | 0 |          private SpanPanel parentPanel = new SpanPanel(); | 
  | 54 | 0 |          private boolean showSelectedItem = false; | 
  | 55 | 0 |          private boolean showTitleIcon = false; | 
  | 56 | 0 |          private PopupPanel menuPanel = new PopupPanel(); | 
  | 57 | 0 |          private KSListMenuImpl menu = new KSListMenuImpl(); | 
  | 58 | 0 |          private HorizontalPanel layout = new HorizontalPanel(); | 
  | 59 | 0 |          private KSLabel titleLabel = new KSLabel(); | 
  | 60 | 0 |          private Image titleImage = Theme.INSTANCE.getCommonImages().getSpacer(); | 
  | 61 | 0 |          private HorizontalPanel titleLayout = new HorizontalPanel(); | 
  | 62 | 0 |          private Image defaultArrow = Theme.INSTANCE.getCommonImages().getDropDownIconBlack(); | 
  | 63 | 0 |          private boolean mouseOver = false; | 
  | 64 | 0 |          private MenuImageLocation imgLoc = MenuImageLocation.RIGHT; | 
  | 65 | 0 |          private boolean makeButton = false; | 
  | 66 | 0 |          private boolean enabled = true; | 
  | 67 |  |           | 
  | 68 |  |           | 
  | 69 |  |          private KSButton button; | 
  | 70 |  |           | 
  | 71 | 0 |          private ClickHandler panelHandler = new ClickHandler(){ | 
  | 72 |  |   | 
  | 73 |  |                  @Override | 
  | 74 |  |                  public void onClick(ClickEvent event) { | 
  | 75 | 0 |                          if(enabled){ | 
  | 76 | 0 |                                  if(!menuPanel.isShowing()){ | 
  | 77 | 0 |                                          StylishDropDown.this.showMenu(); | 
  | 78 |  |                                  } | 
  | 79 |  |                                  else{ | 
  | 80 | 0 |                                          StylishDropDown.this.hideMenu(); | 
  | 81 |  |                                  } | 
  | 82 |  |                          } | 
  | 83 |  |                           | 
  | 84 | 0 |                  } | 
  | 85 |  |                   | 
  | 86 |  |          }; | 
  | 87 |  |   | 
  | 88 | 0 |          private KeyDownHandler downHandler = new KeyDownHandler(){ | 
  | 89 |  |   | 
  | 90 |  |                  @Override | 
  | 91 |  |                  public void onKeyDown(KeyDownEvent event) { | 
  | 92 | 0 |                          if(enabled){ | 
  | 93 | 0 |                                  if (event.getNativeKeyCode() == KeyboardListener.KEY_DOWN || event.getNativeKeyCode() == KeyboardListener.KEY_ENTER)  | 
  | 94 | 0 |                                          StylishDropDown.this.showMenu(); | 
  | 95 | 0 |                                  else if (event.getNativeKeyCode() == KeyboardListener.KEY_UP) | 
  | 96 | 0 |                                          StylishDropDown.this.hideMenu(); | 
  | 97 | 0 |                                  else if (event.getNativeKeyCode() == KeyboardListener.KEY_TAB) | 
  | 98 |  |                                  { | 
  | 99 | 0 |                                          StylishDropDown.this.showMenu(); | 
  | 100 | 0 |                                          titleLayout.removeStyleName("KS-Basic-Menu-Item-Panel-Main-Hover"); | 
  | 101 |  |                                  }                                         | 
  | 102 |  |                          }         | 
  | 103 | 0 |                  }  | 
  | 104 |  |          };  | 
  | 105 |  |   | 
  | 106 | 0 |          private FocusHandler focusHandler = new FocusHandler(){ | 
  | 107 |  |   | 
  | 108 |  |                  @Override | 
  | 109 |  |                  public void onFocus(FocusEvent event) { | 
  | 110 | 0 |                          if(enabled)  | 
  | 111 | 0 |                                  titleLayout.addStyleName("KS-Basic-Menu-Item-Panel-Main-Hover"); | 
  | 112 | 0 |                  } | 
  | 113 |  |          };  | 
  | 114 |  |   | 
  | 115 | 0 |          private MouseOverHandler mouseOverHandler = new MouseOverHandler() { | 
  | 116 |  |   | 
  | 117 |  |                  @Override | 
  | 118 |  |                  public void onMouseOver(MouseOverEvent event) { | 
  | 119 | 0 |                          titleLayout.addStyleName("KS-Basic-Menu-Item-Panel-Main-Hover"); | 
  | 120 | 0 |                  } | 
  | 121 |  |                   | 
  | 122 |  |          }; | 
  | 123 |  |   | 
  | 124 | 0 |          private MouseOutHandler mouseOutHandler = new MouseOutHandler() { | 
  | 125 |  |   | 
  | 126 |  |                  @Override | 
  | 127 |  |                  public void onMouseOut(MouseOutEvent event) { | 
  | 128 | 0 |                          titleLayout.removeStyleName("KS-Basic-Menu-Item-Panel-Main-Hover"); | 
  | 129 | 0 |                  } | 
  | 130 |  |                   | 
  | 131 |  |          }; | 
  | 132 |  |   | 
  | 133 | 0 |          private MenuEventHandler menuHandler = new MenuEventHandler(){ | 
  | 134 |  |   | 
  | 135 |  |                  @Override | 
  | 136 |  |                  public void onChange(MenuChangeEvent e) { | 
  | 137 |  |                           | 
  | 138 |  |                           | 
  | 139 | 0 |                  } | 
  | 140 |  |   | 
  | 141 |  |                  @Override | 
  | 142 |  |                  public void onSelect(MenuSelectEvent e) { | 
  | 143 | 0 |                          KSMenuItemData i = (KSMenuItemData) e.getSource(); | 
  | 144 | 0 |                          StylishDropDown.this.hideMenu(); | 
  | 145 | 0 |                          if(showSelectedItem){ | 
  | 146 | 0 |                                  titleLayout.clear(); | 
  | 147 | 0 |                                  titleLabel.setText(i.getLabel()); | 
  | 148 | 0 |                                  titleLayout.add(titleLabel); | 
  | 149 | 0 |                                  if(i.getShownIcon() != null){ | 
  | 150 | 0 |                                          titleLayout.add(i.getShownIcon()); | 
  | 151 |  |                                  } | 
  | 152 |  |                          } | 
  | 153 |  |                           | 
  | 154 | 0 |                  } | 
  | 155 |  |          }; | 
  | 156 |  |           | 
  | 157 | 0 |          public StylishDropDown(String title){ | 
  | 158 | 0 |                  titleLayout.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT); | 
  | 159 | 0 |                  titleLabel.setText(title); | 
  | 160 | 0 |                  titleLayout.add(titleLabel); | 
  | 161 | 0 |                  titleLayout.add(titleImage); | 
  | 162 | 0 |                  init(); | 
  | 163 | 0 |          } | 
  | 164 |  |           | 
  | 165 | 0 |          public StylishDropDown(String title, Image image, MenuImageLocation imgLoc){ | 
  | 166 | 0 |                  titleLayout.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT); | 
  | 167 | 0 |                  titleLabel.setText(title); | 
  | 168 | 0 |                  titleImage = image; | 
  | 169 | 0 |                  titleLayout.add(titleLabel); | 
  | 170 | 0 |                  if(imgLoc == MenuImageLocation.RIGHT){ | 
  | 171 | 0 |                          titleLayout.add(titleImage); | 
  | 172 |  |                  } | 
  | 173 |  |                  else{ | 
  | 174 | 0 |                          titleLayout.insert(titleImage, 0); | 
  | 175 |  |                  } | 
  | 176 | 0 |                  menu.setImageLocation(imgLoc); | 
  | 177 | 0 |                  init(); | 
  | 178 | 0 |          } | 
  | 179 |  |           | 
  | 180 | 0 |          public StylishDropDown(Widget widget){ | 
  | 181 | 0 |                  titleLayout.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT); | 
  | 182 | 0 |                  titleLayout.add(widget); | 
  | 183 | 0 |                  init(); | 
  | 184 | 0 |          } | 
  | 185 |  |           | 
  | 186 |  |           | 
  | 187 |  |           | 
  | 188 |  |   | 
  | 189 |  |   | 
  | 190 |  |   | 
  | 191 |  |          public void makeAButtonWhenOneItem(boolean makeButton){ | 
  | 192 | 0 |                  this.makeButton = makeButton; | 
  | 193 | 0 |          } | 
  | 194 |  |           | 
  | 195 |  |          private void init(){ | 
  | 196 | 0 |                  layout.clear(); | 
  | 197 | 0 |                  layout.setWidth("100%"); | 
  | 198 | 0 |                  layout.add(titleLayout); | 
  | 199 | 0 |                  layout.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT); | 
  | 200 | 0 |                  layout.add(defaultArrow); | 
  | 201 |  |   | 
  | 202 | 0 |                  namePanel.setWidget(layout); | 
  | 203 | 0 |                  menu.addGlobalMenuItemSelectCallback(new Callback<KSMenuItemData>(){ | 
  | 204 |  |   | 
  | 205 |  |                          @Override | 
  | 206 |  |                          public void exec(KSMenuItemData item) { | 
  | 207 | 0 |                                  if(item.getClickHandler() != null){ | 
  | 208 | 0 |                                          StylishDropDown.this.hideMenu(); | 
  | 209 | 0 |                                          if(showSelectedItem){ | 
  | 210 | 0 |                                                  titleLabel.setText(item.getLabel()); | 
  | 211 | 0 |                                                  if(item.getShownIcon() != null && showTitleIcon){ | 
  | 212 | 0 |                                                          titleLayout.remove(titleImage); | 
  | 213 | 0 |                                                          Image image = item.getShownIcon(); | 
  | 214 | 0 |                                                          titleImage = new Image(image.getUrl(), image.getOriginLeft(),  | 
  | 215 |  |                                                                          image.getOriginTop(), image.getWidth(), image.getHeight()); | 
  | 216 | 0 |                                                          if(imgLoc == MenuImageLocation.RIGHT){ | 
  | 217 | 0 |                                                                  titleLayout.add(titleImage); | 
  | 218 |  |                                                          } | 
  | 219 |  |                                                          else{ | 
  | 220 | 0 |                                                                  titleLayout.insert(titleImage, 0); | 
  | 221 |  |                                                          } | 
  | 222 |  |                                                           | 
  | 223 |  |                                                  } | 
  | 224 |  |                                          } | 
  | 225 |  |                                  } | 
  | 226 | 0 |                          } | 
  | 227 |  |                  }); | 
  | 228 | 0 |                  menuPanel.setWidget(menu); | 
  | 229 | 0 |                  namePanel.addClickHandler(panelHandler); | 
  | 230 | 0 |                  namePanel.addKeyDownHandler(downHandler); | 
  | 231 | 0 |                  namePanel.addFocusHandler(focusHandler); | 
  | 232 | 0 |                  namePanel.addMouseOverHandler(mouseOverHandler); | 
  | 233 | 0 |                  namePanel.addMouseOutHandler(mouseOutHandler); | 
  | 234 | 0 |                  namePanel.setTabIndex(1); | 
  | 235 | 0 |                  menuPanel.setAutoHideEnabled(true); | 
  | 236 | 0 |                  menuPanel.addAutoHidePartner(namePanel.getElement()); | 
  | 237 | 0 |                  namePanel.getElement().setAttribute("id", HTMLPanel.createUniqueId()); | 
  | 238 | 0 |                  parentPanel.add(namePanel); | 
  | 239 | 0 |                  this.initWidget(parentPanel); | 
  | 240 | 0 |                  titleLabel.addStyleName("KS-CutomDropDown-TitleLabel"); | 
  | 241 | 0 |                  layout.addStyleName("KS-CustomDropDown-TitlePanel"); | 
  | 242 | 0 |                  defaultArrow.addStyleName("KS-CustomDropDown-Arrow"); | 
  | 243 | 0 |          } | 
  | 244 |  |           | 
  | 245 |  |          public void showMenu(){ | 
  | 246 | 0 |                  menuPanel.setPopupPosition(layout.getAbsoluteLeft(), layout.getAbsoluteTop() + layout.getOffsetHeight()); | 
  | 247 | 0 |                  menuPanel.show(); | 
  | 248 | 0 |          } | 
  | 249 |  |           | 
  | 250 |  |          public void hideMenu(){ | 
  | 251 | 0 |                  menuPanel.hide(); | 
  | 252 | 0 |          } | 
  | 253 |  |           | 
  | 254 |  |          public void setArrowImage(Image arrow){ | 
  | 255 | 0 |                  layout.remove(defaultArrow); | 
  | 256 | 0 |                  arrow.addStyleName("KS-CustomDropDown-Arrow"); | 
  | 257 | 0 |                  layout.add(arrow); | 
  | 258 | 0 |          } | 
  | 259 |  |           | 
  | 260 |  |          public void setItems(List<KSMenuItemData> items){ | 
  | 261 | 0 |                  if(makeButton && items.size() == 1){ | 
  | 262 | 0 |                          KSMenuItemData item = items.get(0); | 
  | 263 | 0 |                          button = new KSButton(); | 
  | 264 | 0 |                          button.addStyleName("ks-button-spacing"); | 
  | 265 | 0 |                          button.addClickHandler(item.getClickHandler()); | 
  | 266 | 0 |                          button.setText(item.getLabel()); | 
  | 267 | 0 |                          parentPanel.clear(); | 
  | 268 | 0 |                          parentPanel.add(button); | 
  | 269 | 0 |                  } | 
  | 270 |  |                  else{ | 
  | 271 | 0 |                          if(!namePanel.isAttached()){ | 
  | 272 | 0 |                                  parentPanel.clear(); | 
  | 273 | 0 |                                  parentPanel.add(namePanel); | 
  | 274 |  |                          } | 
  | 275 | 0 |                          for(KSMenuItemData item: items){ | 
  | 276 | 0 |                                  item.addMenuEventHandler(MenuSelectEvent.TYPE, menuHandler); | 
  | 277 | 0 |                                  item.addMenuEventHandler(MenuChangeEvent.TYPE, menuHandler); | 
  | 278 |  |                          } | 
  | 279 | 0 |                          menu.setItems(items); | 
  | 280 |  |                  } | 
  | 281 |  |                   | 
  | 282 | 0 |          } | 
  | 283 |  |           | 
  | 284 |  |          public void setEnabled(boolean enabled){ | 
  | 285 | 0 |                  this.enabled = enabled; | 
  | 286 | 0 |                  if(!enabled){ | 
  | 287 | 0 |                          layout.addStyleName("KS-CustomDropDown-TitlePanel-Disabled"); | 
  | 288 |  |                  } | 
  | 289 |  |                  else{ | 
  | 290 | 0 |                          layout.removeStyleName("KS-CustomDropDown-TitlePanel-Disabled"); | 
  | 291 |  |                  } | 
  | 292 | 0 |                  if(button != null){ | 
  | 293 | 0 |                          button.setEnabled(enabled); | 
  | 294 |  |                  } | 
  | 295 | 0 |          } | 
  | 296 |  |           | 
  | 297 |  |          public void setImageLocation(MenuImageLocation loc){ | 
  | 298 | 0 |                  imgLoc = loc; | 
  | 299 | 0 |                  menu.setImageLocation(loc); | 
  | 300 | 0 |          } | 
  | 301 |  |           | 
  | 302 |  |          @Override | 
  | 303 |  |          public void addStyleName(String style){ | 
  | 304 | 0 |                  namePanel.addStyleName(style); | 
  | 305 | 0 |                  menu.addStyleName(style); | 
  | 306 | 0 |          } | 
  | 307 |  |           | 
  | 308 |  |          public boolean isShowingSelectedItem() { | 
  | 309 | 0 |                  return showSelectedItem; | 
  | 310 |  |          } | 
  | 311 |  |   | 
  | 312 |  |          public void setShowSelectedItem(boolean showSelectedItem) { | 
  | 313 | 0 |                  this.showSelectedItem = showSelectedItem; | 
  | 314 | 0 |          } | 
  | 315 |  |           | 
  | 316 |  |          public void setShowTitleIcon(boolean showTitleIcon){ | 
  | 317 | 0 |                  this.showTitleIcon = showTitleIcon; | 
  | 318 | 0 |          } | 
  | 319 |  |           | 
  | 320 |  |          public boolean isShowingTitleIcon(){ | 
  | 321 | 0 |                  return showTitleIcon; | 
  | 322 |  |          } | 
  | 323 |  |           | 
  | 324 |  |          @Override | 
  | 325 |  |      protected void onEnsureDebugId(String baseID) { | 
  | 326 | 0 |          super.onEnsureDebugId(baseID); | 
  | 327 | 0 |          titleLabel.ensureDebugId(DebugIdUtils.createWebDriverSafeDebugId(baseID + "-" + titleLabel.getText() + "-label")); | 
  | 328 | 0 |          layout.ensureDebugId(DebugIdUtils.createWebDriverSafeDebugId(baseID + "-" + titleLabel.getText() + "-panel")); | 
  | 329 | 0 |      } | 
  | 330 |  |           | 
  | 331 |  |           | 
  | 332 |  |  } |