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

• Smooth Scroll Library
• Original library
• Online Demo
• Issue Tracker
• Source Code
• Discussion Forum

Compatibility