All Downloads are FREE. Search and download functionalities are using the official Maven repository.

com.vaadin.polymer.iron.widget.IronScrollThreshold Maven / Gradle / Ivy

The newest version!
/*
 * This code was generated with Vaadin Web Component GWT API Generator, 
 * from iron-scroll-threshold project by The Polymer Authors
 * that is licensed with http://polymer.github.io/LICENSE.txt license.
 */
package com.vaadin.polymer.iron.widget;

import com.vaadin.polymer.iron.*;

import com.vaadin.polymer.iron.widget.event.LowerThresholdEvent;
import com.vaadin.polymer.iron.widget.event.LowerThresholdEventHandler;

import com.vaadin.polymer.iron.widget.event.UpperThresholdEvent;
import com.vaadin.polymer.iron.widget.event.UpperThresholdEventHandler;

import com.vaadin.polymer.*;
import com.vaadin.polymer.elemental.*;
import com.vaadin.polymer.PolymerWidget;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.core.client.JavaScriptObject;

/**
 * 

iron-scroll-threshold is a utility element that listens for scroll events from a
scrollable region and fires events to indicate when the scroller has reached a pre-defined
limit, specified in pixels from the upper and lower bounds of the scrollable region.
This element may wrap a scrollable region and will listen for scroll events bubbling
through it from its children. In this case, care should be taken that only one scrollable
region with the same orientation as this element is contained within. Alternatively,
the scrollTarget property can be set/bound to a non-child scrollable region, from which
it will listen for events.

*

Once a threshold has been reached, a lower-threshold or upper-threshold event will
be fired, at which point the user may perform actions such as lazily-loading more data
to be displayed. After any work is done, the user must then clear the threshold by
calling the clearTriggers method on this element, after which it will
begin listening again for the scroll position to reach the threshold again assuming
the content in the scrollable region has grown. If the user no longer wishes to receive
events (e.g. all data has been exhausted), the threshold property in question (e.g.
lowerThreshold) may be set to a falsy value to disable events and clear the associated
triggered property.

*

Example

*
<iron-scroll-threshold on-lower-threshold="loadMoreData">
 *   <div>content</div>
 * </iron-scroll-threshold>
 * 
*
  loadMoreData: function() {
 *     // load async stuff. e.g. XHR
 *     asyncStuff(function done() {
 *       ironScrollTheshold.clearTriggers();
 *     });
 *   }
 * 
*

Using dom-repeat

*
<iron-scroll-threshold on-lower-threshold="loadMoreData">
 *   <template is="dom-repeat" items="[[items]]">
 *     <div>[[index]]</div>
 *   </template>
 * </iron-scroll-threshold>
 * 
*

Using iron-list

*
<iron-scroll-threshold on-lower-threshold="loadMoreData" id="threshold">
 *   <iron-list scroll-target="threshold" items="[[items]]">
 *     <template>
 *       <div>[[index]]</div>
 *     </template>
 *   </iron-list>
 * </iron-scroll-threshold>
 * 
*/ public class IronScrollThreshold extends PolymerWidget { /** * Default Constructor. */ public IronScrollThreshold() { this(""); } /** * Constructor used by UIBinder to create widgets with content. */ public IronScrollThreshold(String html) { super(IronScrollThresholdElement.TAG, IronScrollThresholdElement.SRC, html); } /** * Gets a handle to the Polymer object's underlying DOM element. */ public IronScrollThresholdElement getPolymerElement() { return (IronScrollThresholdElement) getElement(); } /** *

True if the orientation of the scroller is horizontal.

* * JavaScript Info: * @property horizontal * @type Boolean * */ public boolean getHorizontal() { return getPolymerElement().getHorizontal(); } /** *

True if the orientation of the scroller is horizontal.

* * JavaScript Info: * @property horizontal * @type Boolean * */ public void setHorizontal(boolean value) { getPolymerElement().setHorizontal(value); } /** *

Distance from the bottom (or right, for horizontal) bound of the scroller
where the “lower trigger” will fire.

* * JavaScript Info: * @property lowerThreshold * @type Number * */ public double getLowerThreshold() { return getPolymerElement().getLowerThreshold(); } /** *

Distance from the bottom (or right, for horizontal) bound of the scroller
where the “lower trigger” will fire.

* * JavaScript Info: * @property lowerThreshold * @type Number * */ public void setLowerThreshold(double value) { getPolymerElement().setLowerThreshold(value); } /** *

Distance from the top (or left, for horizontal) bound of the scroller
where the “upper trigger” will fire.

* * JavaScript Info: * @property upperThreshold * @type Number * */ public double getUpperThreshold() { return getPolymerElement().getUpperThreshold(); } /** *

Distance from the top (or left, for horizontal) bound of the scroller
where the “upper trigger” will fire.

* * JavaScript Info: * @property upperThreshold * @type Number * */ public void setUpperThreshold(double value) { getPolymerElement().setUpperThreshold(value); } /** *

Read-only value that tracks the triggered state of the upper threshold.

* * JavaScript Info: * @property upperTriggered * @type Boolean * */ public boolean getUpperTriggered() { return getPolymerElement().getUpperTriggered(); } /** *

Read-only value that tracks the triggered state of the upper threshold.

* * JavaScript Info: * @property upperTriggered * @type Boolean * */ public void setUpperTriggered(boolean value) { getPolymerElement().setUpperTriggered(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 */ public Element getScrollTarget() { return getPolymerElement().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 */ public void setScrollTarget(Element value) { getPolymerElement().setScrollTarget(value); } /** *

Read-only value that tracks the triggered state of the lower threshold.

* * JavaScript Info: * @property lowerTriggered * @type Boolean * */ public boolean getLowerTriggered() { return getPolymerElement().getLowerTriggered(); } /** *

Read-only value that tracks the triggered state of the lower threshold.

* * JavaScript Info: * @property lowerTriggered * @type Boolean * */ public void setLowerTriggered(boolean value) { getPolymerElement().setLowerTriggered(value); } // Needed in UIBinder /** *

Distance from the bottom (or right, for horizontal) bound of the scroller
where the “lower trigger” will fire.

* * JavaScript Info: * @attribute lower-threshold * */ public void setLowerThreshold(String value) { Polymer.property(this.getPolymerElement(), "lowerThreshold", value); } // Needed in UIBinder /** *

Distance from the top (or left, for horizontal) bound of the scroller
where the “upper trigger” will fire.

* * JavaScript Info: * @attribute upper-threshold * */ public void setUpperThreshold(String value) { Polymer.property(this.getPolymerElement(), "upperThreshold", value); } // Needed in UIBinder /** *

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: * @attribute scroll-target * @behavior IronScrollThreshold */ public void setScrollTarget(String value) { Polymer.property(this.getPolymerElement(), "scrollTarget", value); } /** *

Scrolls the content to a particular place.

* * JavaScript Info: * @method scroll * @param {number} left * @param {number} top * @behavior IronScrollThreshold * */ public void scroll(double left, double top) { getPolymerElement().scroll(left, top); } /** * * * JavaScript Info: * @method checkScrollThesholds * * */ public void checkScrollThesholds() { getPolymerElement().checkScrollThesholds(); } /** *

Clear the upper and lower threshold states.

* * JavaScript Info: * @method clearTriggers * * */ public void clearTriggers() { getPolymerElement().clearTriggers(); } /** *

Checks the scroll thresholds.
This method is automatically called by iron-scroll-threshold.

* * JavaScript Info: * @method checkScrollThresholds * * */ public void checkScrollThresholds() { getPolymerElement().checkScrollThresholds(); } /** *

Enables or disables the scroll event listener.

* * JavaScript Info: * @method toggleScrollListener * @param {boolean} yes * @behavior IronScrollThreshold * */ public void toggleScrollListener(boolean yes) { getPolymerElement().toggleScrollListener(yes); } /** *

Fires when the lower threshold has been reached.

* * JavaScript Info: * @event lower-threshold */ public HandlerRegistration addLowerThresholdHandler(LowerThresholdEventHandler handler) { return addDomHandler(handler, LowerThresholdEvent.TYPE); } /** *

Fires when the upper threshold has been reached.

* * JavaScript Info: * @event upper-threshold */ public HandlerRegistration addUpperThresholdHandler(UpperThresholdEventHandler handler) { return addDomHandler(handler, UpperThresholdEvent.TYPE); } }




© 2015 - 2024 Weber Informatics LLC | Privacy Policy