com.vaadin.polymer.app.AppBoxElement Maven / Gradle / Ivy
/*
* This code was generated with Vaadin Web Component GWT API Generator,
* from app-layout project by The Polymer Authors
* that is licensed with https://polymer.github.io/LICENSE.txt license.
*/
package com.vaadin.polymer.app;
import com.vaadin.polymer.elemental.*;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;
import jsinterop.annotations.JsOverlay;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;
/**
* app-box is a container element that can have scroll effects - visual effects based on
scroll position. For example, the parallax effect can be used to move an image at a slower
rate than the foreground.
* <app-box style="height: 100px;" effects="parallax-background">
* <img background src="picture.png" style="width: 100%; height: 600px;">
* </app-box>
*
* Notice the background attribute in the img element; this attribute specifies that that
image is used as the background. By adding the background to the light dom, you can compose
backgrounds that can change dynamically. Alternatively, the mixin --app-box-background-front-layer
allows to style the background. For example:
* .parallaxAppBox {
* --app-box-background-front-layer: {
* background-image: url(picture.png);
* };
* }
*
* Finally, app-box can have content inside. For example:
* <app-box effects="parallax-background">
* <h2>Sub title</h2>
* </app-box>
*
* Importing the effects
* To use the scroll effects, you must explicitly import them in addition to app-box:
* <link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
*
* List of effects
* parallax-background
A simple parallax effect that vertically translates the backgrounds based on a fraction
of the scroll position. For example:
* app-header {
* --app-header-background-front-layer: {
* background-image: url(...);
* };
* }
*
* <app-header style="height: 300px;" effects="parallax-background">
* <app-toolbar>App name</app-toolbar>
* </app-header>
*
* The fraction determines how far the background moves relative to the scroll position.
This value can be assigned via the scalar config value and it is typically a value
between 0 and 1 inclusive. If scalar=0, the background doesn’t move away from the header.
* Styling
*
*
*
* Mixin
* Description
* Default
*
*
*
*
* --app-box-background-front-layerApplies to the front layer of the background
* {}
*
*
*
*/
@JsType(isNative=true)
public interface AppBoxElement extends HTMLElement {
@JsOverlay public static final String TAG = "app-box";
@JsOverlay public static final String SRC = "app-layout/app-layout.html";
/**
* Disables CSS transitions and scroll effects on the element.
*
* JavaScript Info:
* @property disabled
* @type Boolean
* @behavior AppBox
*/
@JsProperty boolean getDisabled();
/**
* Disables CSS transitions and scroll effects on the element.
*
* JavaScript Info:
* @property disabled
* @type Boolean
* @behavior AppBox
*/
@JsProperty void setDisabled(boolean value);
/**
* Allows to set a scrollTop threshold. When greater than 0, thresholdTriggered
is true only when the scroll target’s scrollTop has reached this value.
* For example, if threshold = 100, thresholdTriggered is true when the scrollTop
is at least 100.
*
* JavaScript Info:
* @property threshold
* @type Number
* @behavior AppBox
*/
@JsProperty double getThreshold();
/**
* Allows to set a scrollTop threshold. When greater than 0, thresholdTriggered
is true only when the scroll target’s scrollTop has reached this value.
* For example, if threshold = 100, thresholdTriggered is true when the scrollTop
is at least 100.
*
* JavaScript Info:
* @property threshold
* @type Number
* @behavior AppBox
*/
@JsProperty void setThreshold(double value);
/**
* Specifies the element that will handle the scroll event
on the behalf of the current element. This is typically a reference to an element,
but there are a few more posibilities:
* Elements id
* <div id="scrollable-element" style="overflow: auto;">
* <x-element scroll-target="scrollable-element">
* <!-- Content-->
* </x-element>
* </div>
*
* In this case, the scrollTarget will point to the outer div element.
* Document scrolling
* For document scrolling, you can use the reserved word document:
* <x-element scroll-target="document">
* <!-- Content -->
* </x-element>
*
* Elements reference
* appHeader.scrollTarget = document.querySelector('#scrollable-element');
*
*
* JavaScript Info:
* @property scrollTarget
* @type Element
* @behavior IronScrollThreshold
*/
@JsProperty Element getScrollTarget();
/**
* Specifies the element that will handle the scroll event
on the behalf of the current element. This is typically a reference to an element,
but there are a few more posibilities:
* Elements id
* <div id="scrollable-element" style="overflow: auto;">
* <x-element scroll-target="scrollable-element">
* <!-- Content-->
* </x-element>
* </div>
*
* In this case, the scrollTarget will point to the outer div element.
* Document scrolling
* For document scrolling, you can use the reserved word document:
* <x-element scroll-target="document">
* <!-- Content -->
* </x-element>
*
* Elements reference
* appHeader.scrollTarget = document.querySelector('#scrollable-element');
*
*
* JavaScript Info:
* @property scrollTarget
* @type Element
* @behavior IronScrollThreshold
*/
@JsProperty void setScrollTarget(Element value);
/**
* An object that configurates the effects installed via the effects property. e.g.
* element.effectsConfig = {
* "blend-background": {
* "startsAt": 0.5
* }
* };
*
* Every effect has at least two config properties: startsAt and endsAt.
These properties indicate when the event should start and end respectively
and relative to the overall element progress. So for example, if blend-background
starts at 0.5, the effect will only start once the current element reaches 0.5
of its progress. In this context, the progress is a value in the range of [0, 1]
that indicates where this element is on the screen relative to the viewport.
*
* JavaScript Info:
* @property effectsConfig
* @type Object
* @behavior AppBox
*/
@JsProperty JavaScriptObject getEffectsConfig();
/**
* An object that configurates the effects installed via the effects property. e.g.
* element.effectsConfig = {
* "blend-background": {
* "startsAt": 0.5
* }
* };
*
* Every effect has at least two config properties: startsAt and endsAt.
These properties indicate when the event should start and end respectively
and relative to the overall element progress. So for example, if blend-background
starts at 0.5, the effect will only start once the current element reaches 0.5
of its progress. In this context, the progress is a value in the range of [0, 1]
that indicates where this element is on the screen relative to the viewport.
*
* JavaScript Info:
* @property effectsConfig
* @type Object
* @behavior AppBox
*/
@JsProperty void setEffectsConfig(JavaScriptObject value);
/**
* True if the scrollTop threshold (set in scrollTopThreshold) has
been reached.
*
* JavaScript Info:
* @property thresholdTriggered
* @type Boolean
* @behavior AppBox
*/
@JsProperty boolean getThresholdTriggered();
/**
* True if the scrollTop threshold (set in scrollTopThreshold) has
been reached.
*
* JavaScript Info:
* @property thresholdTriggered
* @type Boolean
* @behavior AppBox
*/
@JsProperty void setThresholdTriggered(boolean value);
/**
* A space-separated list of the effects names that will be triggered when the user scrolls.
e.g. waterfall parallax-background installs the waterfall and parallax-background.
*
* JavaScript Info:
* @property effects
* @type String
* @behavior AppBox
*/
@JsProperty String getEffects();
/**
* A space-separated list of the effects names that will be triggered when the user scrolls.
e.g. waterfall parallax-background installs the waterfall and parallax-background.
*
* JavaScript Info:
* @property effects
* @type String
* @behavior AppBox
*/
@JsProperty void setEffects(String value);
/**
* Used to assign the closest resizable ancestor to this resizable
if the ancestor detects a request for notifications.
*
* JavaScript Info:
* @method assignParentResizable
* @param {} parentResizable
* @behavior VaadinSplitLayout
*
*/
void assignParentResizable(Object parentResizable);
/**
* Used to remove a resizable descendant from the list of descendants
that should be notified of a resize change.
*
* JavaScript Info:
* @method stopResizeNotificationsFor
* @param {} target
* @behavior VaadinSplitLayout
*
*/
void stopResizeNotificationsFor(Object target);
/**
* Creates an effect object from an effect’s name that can be used to run
effects programmatically.
*
* JavaScript Info:
* @method createEffect
* @param {string} effectName
* @param {Object=} effectConfig
* @behavior AppBox
* @return {JavaScriptObject}
*/
JavaScriptObject createEffect(String effectName, JavaScriptObject effectConfig);
/**
* Returns an object containing the progress value of the scroll effects.
*
* JavaScript Info:
* @method getScrollState
*
* @return {JavaScriptObject}
*/
JavaScriptObject getScrollState();
/**
* Returns true if there’s content below the current element. This method
should be overridden by the consumer of this behavior.
*
* JavaScript Info:
* @method isContentBelow
* @behavior AppBox
* @return {boolean}
*/
boolean isContentBelow();
/**
* Returns true if the current element is on the screen.
That is, visible in the current viewport. This method should be
overridden by the consumer of this behavior.
*
* JavaScript Info:
* @method isOnScreen
* @behavior AppBox
* @return {boolean}
*/
boolean isOnScreen();
/**
* Resets the layout. This method is automatically called when the element is attached to the DOM.
*
* JavaScript Info:
* @method resetLayout
*
*
*/
void resetLayout();
/**
* Can be called to manually notify a resizable and its descendant
resizables of a resize change.
*
* JavaScript Info:
* @method notifyResize
* @behavior VaadinSplitLayout
*
*/
void notifyResize();
/**
* Scrolls the content to a particular place.
*
* JavaScript Info:
* @method scroll
* @param {number} left
* @param {number} top
* @behavior IronScrollThreshold
*
*/
void scroll(double left, double top);
/**
* Enables or disables the scroll event listener.
*
* JavaScript Info:
* @method toggleScrollListener
* @param {boolean} yes
* @behavior IronScrollThreshold
*
*/
void toggleScrollListener(boolean yes);
/**
* This method can be overridden to filter nested elements that should or
should not be notified by the current element. Return true if an element
should be notified, or false if it should not be notified.
*
* JavaScript Info:
* @method resizerShouldNotify
* @param {HTMLElement} element
* @behavior VaadinSplitLayout
* @return {boolean}
*/
boolean resizerShouldNotify(JavaScriptObject element);
}