Waypoints Add-on
Wrapper for the JavaScript library Waypoints. Can be used to receive events when scrolling into a Vaadin component
Waypoints Add-on for Vaadin 7
This is an add-on for Vaadin 7 providing a wrapper for the JavaScript library 'Waypoints'. You can check out the original library on
http://imakewebthings.com/waypoints/
With this add-on you can receive events when you scroll to a Vaadin component.
The source code can be found at https://github.com/christiandusse/vaadin-waypoints
Features
- Receive events when element is scrolled into viewport.
- Can set offset (top, middle, bottom, absolute, relative or a JavaScript function) of viewport where event should be fired
- Can enable or disable the extension at runtime
- Event has info about the scroll direction and the source on which the event occurs
- Scrollable contexts can be one on UI, Panel, Window, Table, Tabsheet, Acordion, VerticalSplitPanel or HorizontalSplitPanel
- Use shortcut 'Inview' to receive info when element enters, entered, leaves and left the viewport
- Option to scroll into a Vaadin component (using https://github.com/kswedberg/jquery-smooth-scroll)
Getting started
See the provided code examples for a quick start.
For a more comprehensive example, see the demo project at https://github.com/christiandusse/vaadin-waypoints
Online demo
Try the add-on demo at http://env-9019740.jelastic.servint.net/waypoints-demo/ (may take a while to load)
Known issues:
- May lead to infinite loop when scrolling fast while having set a lot of waypoints
- May not receive events on browser size change
- May receive wrong events when having multiple scrollbars in the hierarchy of the extended component
- May receive wrong events for components inside a table
- No support for cells inside a Vaadin grid
Roadmap
This component is developed as a hobby with no public roadmap or any guarantees of upcoming releases. That said, the following features are planned for upcoming releases:
- Sticky Elements: http://imakewebthings.com/waypoints/shortcuts/sticky-elements/
- Support for cells inside a Vaadin grid
- Events on scrolling because of browser size change
- Settings options lazily
- Provide more options from original library: 'group', 'continuous' http://imakewebthings.com/waypoints/api/waypoint/
- Performance optimization (f.e. option to only receive the last event when scrolling over multiple waypoints at once)
- Better documentation
- Integration tests
Sample code
AbstractComponent yourComponent = ... // the component you want to receive events for AbstractComponent context = ... // Your scrollable Vaadin component that directly on indirectly contains 'yourComponent' (there may be some layout hierarchies between the context and the component). Context can be one of UI, Panel, Window, Table, HorizontalSplitPanel, VerticalSplitPanel boolean horizontal = false; // is vertical scrollbar InviewExtension extension = new InviewExtensionImpl(yourComponent, context, horizontal); ext.addEnterListener(new EnterListener() { @Override public void onEnter(EnterEvent event) { // is fired when You scroll into 'yourComponent' } });
final Button loadNextPageButton = new Button(); loadNextPageButton.setStyleName("primary"); loadNextPageButton.setCaption("Load more entries"); loadNextPageButton.addClickListener(new ClickListener() { @Override public void buttonClick(ClickEvent event) { // add more content on click loadNextPage(); } }); final InviewExtension extension = new InviewExtensionImpl(loadNextPageButton, UI.getCurrent(), false); extension.addEnterListener(new EnterListener() { @Override public void onEnter(EnterEvent event) { // add more content on becoming visible loadNextPage(); } });
AbstractComponent target = ... // the component to scroll into AbstractComponent context = ... // the scrollable context of the target. This is the component that owns the scrollbars in the browser. boolean horizontal = false; // scroll in vertical or horizontal direction int offset = 0; // the amount of pixels that should be left between the target and context after the scroll int speed = 400; // the amount of time that the scroll animation should take in ms ScrollHelper.getCurrent().scrollTo(target, context, horizontal, offset, speed);
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Added Helper for scrolling into a Vaadin Component
- Released
- 2015-11-26
- Maturity
- EXPERIMENTAL
- License
- MIT License
Compatibility
- Framework
- Vaadin 7.2+
- Browser
- Firefox
- Opera
- Safari
- Google Chrome
- Internet Explorer
- iOS Browser
- Android Browser
- Internet Explorer
- Internet Explorer
- Windows Phone
Waypoints Add-on - Vaadin Add-on Directory
Wrapper for the JavaScript library Waypoints. Can be used to receive events when scrolling into a Vaadin componentOriginal library
Online Demo
Issue Tracker
Source Code
Discussion Forum
Waypoints Add-on version 0.0.1-SNAPSHOT
- Providing basic functionality for Waypoints.
- WaypointExtension for creating a Waypoint on a Vaadin component
- InviewExtension to create a Waypoint shortcut on a Vaadin component
- Infinite Scroll has no extension. To provide the same functionality You can use an InviewExtension and add more elements when the InviewEvent is fired.
- Sticky Elements (http://imakewebthings.com/waypoints/shortcuts/sticky-elements/) not supported
- Can use the following vaadin components as context: UI, Window, Panel, Table, HorizontalSplitPanel, VerticalSplitPanel
- Option to use custom scrollable Vaadin components as context
Waypoints Add-on version 0.1
Added support for following contexts: Vaadin Tabsheet, Vaadin Acordion, Vaadin VerticalSplitPanel, HorizontalSplitPanel
Provided another demo view that displays all supported contexts.
Waypoints Add-on version 0.1.1
Added Helper for scrolling into a Vaadin Component