Directory

← Back

Waypoints Add-on

Wrapper for the JavaScript library Waypoints. Can be used to receive events when scrolling into a Vaadin component

Author

Rating

Popularity

<100

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:

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);

Compatibility

(Loading compatibility data...)

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 component Waypoints Add-on - Vaadin Add-on Directory
# 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
Smooth Scroll Library
Original 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

Online