com.vaadin.polymer.paper.element.PaperRippleElement Maven / Gradle / Ivy
/*
* This code was generated with Vaadin Web Component GWT API Generator,
* from paper-ripple project by The Polymer Authors
* that is licensed with http://polymer.github.io/LICENSE.txt license.
*/
package com.vaadin.polymer.paper.element;
import com.vaadin.polymer.elemental.*;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.core.client.js.JsProperty;
import com.google.gwt.core.client.js.JsType;
/**
* paper-ripple provides a visual effect that other paper elements can
use to simulate a rippling effect emanating from the point of contact. The
effect can be visualized as a concentric circle with motion.
* Example:
* <paper-ripple></paper-ripple>
*
*
*
paper-ripple listens to “mousedown” and “mouseup” events so it would display ripple
effect when touches on it. You can also defeat the default behavior and
manually route the down and up actions to the ripple element. Note that it is
important if you call downAction() you will have to make sure to call
upAction() so that paper-ripple would end the animation loop.
* Example:
* <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>
* ...
* downAction: function(e) {
* this.$.ripple.downAction({x: e.x, y: e.y});
* },
* upAction: function(e) {
* this.$.ripple.upAction();
* }
*
*
*
Styling ripple effect:
* Use CSS color property to style the ripple:
* paper-ripple {
* color: #4285f4;
* }
*
*
*
Note that CSS color property is inherited so it is not required to set it on
the paper-ripple element directly.
* By default, the ripple is centered on the point of contact. Apply the recenters
attribute to have the ripple grow toward the center of its container.
* <paper-ripple recenters></paper-ripple>
*
*
*
You can also center the ripple inside its container from the start.
* <paper-ripple center></paper-ripple>
*
*
*
Apply circle class to make the rippling effect within a circle.
* <paper-ripple class="circle"></paper-ripple>
*
*
*
*/
@JsType
public interface PaperRippleElement extends HTMLElement {
public static final String TAG = "paper-ripple";
public static final String SRC = "paper-ripple/paper-ripple.html";
/**
*
*
* JavaScript Info:
* @method addRipple
*
*/
void addRipple();
/**
*
*
* JavaScript Info:
* @method animate
*
*/
void animate();
/**
* True when there are visible ripples animating within the
element.
*
* JavaScript Info:
* @property animating
* @type Boolean
*
*/
@JsProperty boolean getAnimating();
/**
* True when there are visible ripples animating within the
element.
*
* JavaScript Info:
* @property animating
* @type Boolean
*
*/
@JsProperty void setAnimating(boolean value);
/**
* If true, ripples will center inside its container
*
* JavaScript Info:
* @property center
* @type Boolean
*
*/
@JsProperty boolean getCenter();
/**
* If true, ripples will center inside its container
*
* JavaScript Info:
* @property center
* @type Boolean
*
*/
@JsProperty void setCenter(boolean value);
/**
*
*
* JavaScript Info:
* @method downAction
* @param {Event=} event
*
*/
void downAction(JavaScriptObject event);
/**
* If true, the ripple will remain in the “down” state until holdDown
is set to false again.
*
* JavaScript Info:
* @property holdDown
* @type Boolean
*
*/
@JsProperty boolean getHoldDown();
/**
* If true, the ripple will remain in the “down” state until holdDown
is set to false again.
*
* JavaScript Info:
* @property holdDown
* @type Boolean
*
*/
@JsProperty void setHoldDown(boolean value);
/**
* The initial opacity set on the wave.
*
* JavaScript Info:
* @property initialOpacity
* @type Number
*
*/
@JsProperty double getInitialOpacity();
/**
* The initial opacity set on the wave.
*
* JavaScript Info:
* @property initialOpacity
* @type Number
*
*/
@JsProperty void setInitialOpacity(double value);
/**
*
*
* JavaScript Info:
* @property keyBindings
* @type Object
*
*/
@JsProperty JavaScriptObject getKeyBindings();
/**
*
*
* JavaScript Info:
* @property keyBindings
* @type Object
*
*/
@JsProperty void setKeyBindings(JavaScriptObject value);
/**
*
*
* JavaScript Info:
* @method onAnimationComplete
*
*/
void onAnimationComplete();
/**
* How fast (opacity per second) the wave fades out.
*
* JavaScript Info:
* @property opacityDecayVelocity
* @type Number
*
*/
@JsProperty double getOpacityDecayVelocity();
/**
* How fast (opacity per second) the wave fades out.
*
* JavaScript Info:
* @property opacityDecayVelocity
* @type Number
*
*/
@JsProperty void setOpacityDecayVelocity(double value);
/**
* If true, ripples will exhibit a gravitational pull towards
the center of their container as they fade away.
*
* JavaScript Info:
* @property recenters
* @type Boolean
*
*/
@JsProperty boolean getRecenters();
/**
* If true, ripples will exhibit a gravitational pull towards
the center of their container as they fade away.
*
* JavaScript Info:
* @property recenters
* @type Boolean
*
*/
@JsProperty void setRecenters(boolean value);
/**
*
*
* JavaScript Info:
* @method removeRipple
* @param {} ripple
*
*/
void removeRipple(JavaScriptObject ripple);
/**
* A list of the visual ripples.
*
* JavaScript Info:
* @property ripples
* @type Array
*
*/
@JsProperty JsArray getRipples();
/**
* A list of the visual ripples.
*
* JavaScript Info:
* @property ripples
* @type Array
*
*/
@JsProperty void setRipples(JsArray value);
/**
*
*
* JavaScript Info:
* @method shouldKeepAnimating
*
*/
void shouldKeepAnimating();
/**
*
*
* JavaScript Info:
* @method simulatedRipple
*
*/
void simulatedRipple();
/**
*
*
* JavaScript Info:
* @method target
*
*/
void target();
/**
*
*
* JavaScript Info:
* @method upAction
* @param {Event=} event
*
*/
void upAction(JavaScriptObject event);
/**
*
*
* JavaScript Info:
* @method attached
*
*/
void attached();
/**
* Can be used to imperatively add a key binding to the implementing
element. This is the imperative equivalent of declaring a keybinding
in the keyBindings prototype property.
*
* JavaScript Info:
* @method addOwnKeyBinding
* @param {} eventString
* @param {} handlerName
* @behavior PaperTabs
*/
void addOwnKeyBinding(JavaScriptObject eventString, JavaScriptObject handlerName);
/**
* The HTMLElement that will be firing relevant KeyboardEvents.
*
* JavaScript Info:
* @property keyEventTarget
* @type Object
* @behavior PaperTabs
*/
@JsProperty JavaScriptObject getKeyEventTarget();
/**
* The HTMLElement that will be firing relevant KeyboardEvents.
*
* JavaScript Info:
* @property keyEventTarget
* @type Object
* @behavior PaperTabs
*/
@JsProperty void setKeyEventTarget(JavaScriptObject value);
/**
*
*
* JavaScript Info:
* @method keyboardEventMatchesKeys
* @param {} event
* @param {} eventString
* @behavior PaperTabs
*/
void keyboardEventMatchesKeys(JavaScriptObject event, JavaScriptObject eventString);
/**
* When called, will remove all imperatively-added key bindings.
*
* JavaScript Info:
* @method removeOwnKeyBindings
* @behavior PaperTabs
*/
void removeOwnKeyBindings();
/**
*
*
* JavaScript Info:
* @method detached
* @behavior PaperTabs
*/
void detached();
/**
*
*
* JavaScript Info:
* @property observers
* @type Array
* @behavior PaperTabs
*/
@JsProperty JsArray getObservers();
/**
*
*
* JavaScript Info:
* @property observers
* @type Array
* @behavior PaperTabs
*/
@JsProperty void setObservers(JsArray value);
/**
*
*
* JavaScript Info:
* @method registered
* @behavior PaperTabs
*/
void registered();
}