001package org.gwtbootstrap3.extras.notify.client.ui; 002 003/* 004 * #%L 005 * GwtBootstrap3 006 * %% 007 * Copyright (C) 2013 - 2015 GwtBootstrap3 008 * %% 009 * Licensed under the Apache License, Version 2.0 (the "License"); 010 * you may not use this file except in compliance with the License. 011 * You may obtain a copy of the License at 012 * 013 * http://www.apache.org/licenses/LICENSE-2.0 014 * 015 * Unless required by applicable law or agreed to in writing, software 016 * distributed under the License is distributed on an "AS IS" BASIS, 017 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 018 * See the License for the specific language governing permissions and 019 * limitations under the License. 020 * #L% 021 */ 022 023import org.gwtbootstrap3.extras.animate.client.ui.constants.Animation; 024import org.gwtbootstrap3.extras.notify.client.constants.NotifyIconType; 025import org.gwtbootstrap3.extras.notify.client.constants.NotifyPlacement; 026import org.gwtbootstrap3.extras.notify.client.constants.NotifyPosition; 027import org.gwtbootstrap3.extras.notify.client.constants.NotifyType; 028import org.gwtbootstrap3.extras.notify.client.constants.NotifyUrlTarget; 029import org.gwtbootstrap3.extras.notify.client.event.NotifyCloseHandler; 030import org.gwtbootstrap3.extras.notify.client.event.NotifyClosedHandler; 031import org.gwtbootstrap3.extras.notify.client.event.NotifyShowHandler; 032import org.gwtbootstrap3.extras.notify.client.event.NotifyShownHandler; 033 034import com.google.gwt.core.client.JavaScriptObject; 035 036/** 037 * This class represent basic Notify's settings, that you can use to customize display of each Notify. 038 * <p/> 039 * You can also set current state as default for all new Notifies. 040 * 041 * @author jeffisenhart 042 * @author Sven Jacobs 043 * @author Joshua Godi 044 * @author Pavel Zlámal 045 * @author Xiaodong SUN 046 * @see #makeDefault() 047 */ 048public class NotifySettings extends JavaScriptObject { 049 050 /** 051 * Default constructor 052 */ 053 protected NotifySettings() {} 054 055 /** 056 * Creates a new instance of {@link NotifySettings}. 057 * 058 * @return a new instance of {@link NotifySettings}. 059 */ 060 public static NotifySettings newSettings() { 061 return JavaScriptObject.createObject().cast(); 062 } 063 064 /** 065 * Set element name or class or ID to append Notify to. Default is 'body'. 066 * 067 * @param element Name, class or ID 068 */ 069 public final native void setElement(String element) /*-{ 070 this.element = element; 071 }-*/; 072 073 /** 074 * Set custom position to the Notify container element. Default is null. 075 * 076 * @param position one of STATIC, FIXED, RELATIVE, ABSOLUTE, or null 077 */ 078 public final void setPosition(final NotifyPosition position) { 079 setPosition((position != null) ? position.getPosition() : null); 080 } 081 082 /** 083 * Set native property of Notify's position. 084 * 085 * @param position Notify's position to the container element 086 */ 087 private final native void setPosition(String position) /*-{ 088 this.position = position; 089 }-*/; 090 091 /** 092 * Set type of Notify (CSS style class name). Default is INFO. 093 * 094 * @param type one of INFO, WARNING, DANGER, SUCCESS 095 * @see NotifyType 096 */ 097 public final void setType(final NotifyType type) { 098 setType((type != null) ? type.getCssName() : NotifyType.INFO.getCssName()); 099 } 100 101 /** 102 * Set custom style name to Notify. Resulting class name is "alert-[customType]". 103 * 104 * @param customType Style name to set 105 */ 106 public final native void setType(String customType) /*-{ 107 this.type = customType; 108 }-*/; 109 110 /** 111 * If <code>false</code>, the <code>data-notify="dismiss"</code> element in 112 * the template will be hidden. Default is <code>true</code>. 113 * 114 * @param allowDismiss if <code>false</code>, the close icon will be hidden 115 */ 116 public final native void setAllowDismiss(boolean allowDismiss) /*-{ 117 this.allow_dismiss = allowDismiss; 118 }-*/; 119 120 /** 121 * If <code>true</code>, the notification should display a progress bar. 122 * Default is <code>false</code>. 123 * 124 * @param showProgressbar if <code>true</code>, the progress bar will be displayed 125 * @since 3.0.1 126 */ 127 public final native void setShowProgressbar(boolean showProgressbar) /*-{ 128 this.showProgressbar = showProgressbar; 129 }-*/; 130 131 /** 132 * Set placement of Notify on screen. Default placement is {@link NotifyPlacement#TOP_RIGHT}. 133 * 134 * @param placement Notify's placement on screen 135 * @see NotifyPlacement 136 */ 137 public final void setPlacement(final NotifyPlacement placement) { 138 setNotifyPlacement((placement != null) ? placement : NotifyPlacement.TOP_RIGHT); 139 } 140 141 /** 142 * Set native property of Notify's placement. 143 * 144 * @param placement Notify's placement on screen 145 */ 146 private final native void setNotifyPlacement(final NotifyPlacement placement) /*-{ 147 var from = placement.@org.gwtbootstrap3.extras.notify.client.constants.NotifyPlacement::getFrom()(); 148 var align = placement.@org.gwtbootstrap3.extras.notify.client.constants.NotifyPlacement::getAlign()(); 149 this.placement = { from: from, align: align }; 150 }-*/; 151 152 /** 153 * If <code>true</code>, newer notifications push down older ones. Default 154 * is <code>false</code>.<br> 155 * <br> 156 * <strong>WARNING: </strong> Be careful when setting 157 * <code>newestOnTop</code> to <code>true</code> when a placement that 158 * already contains a notification has <code>newest_on_top</code> to 159 * <code>false</code>. It may cause issues with the plug-ins ability to 160 * place the notification in the correct location. 161 * 162 * @param newestOnTop if <code>true</code>, newer notifications push down older ones 163 * @since 3.0.0 164 */ 165 public final native void setNewestOnTop(boolean newestOnTop) /*-{ 166 this.newest_on_top = newestOnTop; 167 }-*/; 168 169 /** 170 * Set offset (space between Notify and screen/browser edges) for each axis. Default is 20 PX for both. 171 * 172 * @param offX Offset for X axis in PX 173 * @param offY Offset for Y axis in PX 174 */ 175 public final native void setOffset(int offX, int offY) /*-{ 176 this.offset = { x: offX, y: offY }; 177 }-*/; 178 179 /** 180 * Set custom spacing between two Notifies. Default is 10 PX. 181 * 182 * @param space Spacing in PX 183 */ 184 public final native void setSpacing(int space) /*-{ 185 this.spacing = space; 186 }-*/; 187 188 /** 189 * Set custom Z-index. Default is 1031. 190 * 191 * @param zIndex Z-index 192 */ 193 public final native void setZIndex(int zIndex) /*-{ 194 this.z_index = zIndex; 195 }-*/; 196 197 /** 198 * Set delay, how long Notify stays on screen. Default is 5000 ms. 199 * Set to zero for unlimited time. 200 * 201 * @param mDelay Delay in milliseconds or zero for unlimited 202 */ 203 public final native void setDelay(int mDelay) /*-{ 204 this.delay = mDelay; 205 }-*/; 206 207 /** 208 * Set timer. It's value is removed from remaining 'delay' on each 'timer' period. 209 * This way you can speed up hiding of Notify. If timer > remaining delay, Notify is 210 * hidden after delay runs out (ignoring timer). 211 * 212 * @param timer Time in milliseconds 213 * @see #setDelay(int) 214 */ 215 public final native void setTimer(int timer) /*-{ 216 this.timer = timer; 217 }-*/; 218 219 /** 220 * Set custom URL target.<br> 221 * <br> 222 * Defaults to {@link NotifyUrlTarget#BLANK}. 223 * 224 * @param urlTarget URL target 225 */ 226 public final void setUrlTarget(NotifyUrlTarget urlTarget) { 227 setUrlTarget((urlTarget != null) ? urlTarget.getTarget() : NotifyUrlTarget.BLANK.getTarget()); 228 } 229 230 /** 231 * Set custom URL target. Default is "_blank". 232 * <p/> 233 * See http://www.w3schools.com/tags/att_a_target.asp for possible values. 234 * 235 * @param customUrlTarget URL target 236 */ 237 public final native void setUrlTarget(String customUrlTarget) /*-{ 238 this.url_target = customUrlTarget; 239 }-*/; 240 241 /** 242 * Pause countdown of display timeout when mouse is hovering above the Notify. 243 * Countdown continues (not restarted) if mouse leaves the Notify. 244 * 245 * @param pauseOnMouseOver TRUE = pause / FALSE = not pause 246 */ 247 public final native void setPauseOnMouseOver(boolean pauseOnMouseOver) /*-{ 248 this.mouse_over = pauseOnMouseOver ? 'pause' : null; 249 }-*/; 250 251 /** 252 * Set Animation to Notify when it enters and exit the screen. 253 * 254 * Default is enter = Animation.FADE_IN_DOWN, exit = Animation.FADE_OUT_UP 255 * 256 * @see org.gwtbootstrap3.extras.animate.client.ui.constants.Animation 257 * 258 * @param enter animation style when Notify enters the screen 259 * @param exit animation style when Notify exists the screen 260 */ 261 public final void setAnimation(Animation enter, Animation exit) { 262 setAnimation((enter != null) ? enter.getCssName() : Animation.NO_ANIMATION.getCssName(), 263 (exit != null) ? exit.getCssName() : Animation.NO_ANIMATION.getCssName()); 264 } 265 266 /** 267 * Set custom CSS style for animations of Notify when it enters and exits the screen. 268 * You must write your own CSS animation definition. 269 * 270 * @param enter animation style when Notify enters the screen 271 * @param exit animation style when Notify exists the screen 272 */ 273 public final native void setAnimation(String enter, String exit) /*-{ 274 this.animate = { enter: enter, exit: exit }; 275 }-*/; 276 277 /** 278 * Set the Notify's show event handler. The show event fires immediately when 279 * the show instance method is called. 280 * 281 * @param handler 282 */ 283 public final void setShowHandler(final NotifyShowHandler handler) { 284 onShow((handler != null) ? handler : NotifyShowHandler.DEFAULT_SHOW_HANDLER); 285 } 286 287 private final native void onShow(NotifyShowHandler handler) /*-{ 288 this.onShow = function() { 289 handler.@org.gwtbootstrap3.extras.notify.client.event.NotifyShowHandler::onShow()(); 290 }; 291 }-*/; 292 293 /** 294 * Set the Notify's shown event handler. This event is fired when the modal has 295 * been made visible to the user (will wait for CSS transitions to complete). 296 * 297 * @param handler 298 */ 299 public final void setShownHandler(final NotifyShownHandler handler) { 300 onShown((handler != null) ? handler : NotifyShownHandler.DEFAULT_SHOWN_HANDLER); 301 } 302 303 private final native void onShown(NotifyShownHandler handler) /*-{ 304 this.onShow = function() { 305 handler.@org.gwtbootstrap3.extras.notify.client.event.NotifyShownHandler::onShown()(); 306 }; 307 }-*/; 308 309 /** 310 * Set the Notify's close event handler. This event is fired immediately when 311 * the notification is closing. 312 * 313 * @param handler 314 */ 315 public final void setCloseHandler(final NotifyCloseHandler handler) { 316 onClose((handler != null) ? handler : NotifyCloseHandler.DEFAULT_CLOSE_HANDLER); 317 } 318 319 private final native void onClose(NotifyCloseHandler handler) /*-{ 320 this.onClose = function() { 321 handler.@org.gwtbootstrap3.extras.notify.client.event.NotifyCloseHandler::onClose()(); 322 }; 323 }-*/; 324 325 /** 326 * Set the Notify's closed event handler. This event is fired when the modal 327 * has finished closing and is removed from the document (will wait for CSS 328 * transitions to complete). 329 * 330 * @param handler 331 */ 332 public final void setClosedHandler(final NotifyClosedHandler handler) { 333 onClosed((handler != null) ? handler : NotifyClosedHandler.DEFAULT_CLOSED_HANDLER); 334 } 335 336 private final native void onClosed(NotifyClosedHandler handler) /*-{ 337 this.onClosed = function() { 338 handler.@org.gwtbootstrap3.extras.notify.client.event.NotifyClosedHandler::onClosed()(); 339 }; 340 }-*/; 341 342 /** 343 * Set icon type you will use for Notify. Default is 'class', which 344 * allows to use iconic fonts like FontAwesome. 345 * If you want to use images instead of class, set value to "image".<br> 346 * <br> 347 * Defaults to {@link NotifyIconType#CLASS}. 348 * 349 * @param iconType the icon type 350 * @see NotifyIconType 351 */ 352 public final void setIconType(NotifyIconType iconType) { 353 setIconType((iconType != null) ? iconType.getType() : NotifyIconType.CLASS.getType()); 354 } 355 356 /** 357 * Set native property of Notify's icon type. 358 * 359 * @param iconType Notify's icon type. 360 */ 361 private final native void setIconType(String iconType) /*-{ 362 this.icon_type = iconType; 363 }-*/; 364 365 /** 366 * Set custom HTML Template of Notify. Default value is: 367 * <p/> 368 * 369 * <div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert"><br/> 370 * <button type="button" aria-hidden="true" class="close" data-notify="dismiss">x</button><br/> 371 * <span data-notify="icon"></span><br/> 372 * <span data-notify="title">{1}</span><br/> 373 * <span data-notify="message">{2}</span><br/> 374 * <div class="progress" data-notify="progressbar"><br/> 375 * <div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div><br/> 376 * </div><br/> 377 * <a href="{3}" target="{4}" data-notify="url"></a><br/> 378 * </div> 379 * 380 * <p/> 381 * Where: 382 * <ul> 383 * <li>{0} = type</li> 384 * <li>{1} = title</li> 385 * <li>{2} = message</li> 386 * <li>{3} = url</li> 387 * <li>{4} = target</li> 388 * </ul> 389 * 390 * @param html Custom HTML template 391 * @see documentation at: http://bootstrap-notify.remabledesigns.com/ 392 */ 393 public final native void setTemplate(String html) /*-{ 394 this.template = html; 395 }-*/; 396 397 /** 398 * Make this NotifySettings as default for all new Notifies. 399 * <p/> 400 * Values set to this NotifySettings overrides original default values. 401 * If value for some property is not set, original default value is kept. 402 */ 403 public final native void makeDefault() /*-{ 404 $wnd.jQuery.notifyDefaults(); 405 }-*/; 406 407}