001/*
002 * #%L
003 * GwtMaterial
004 * %%
005 * Copyright (C) 2015 - 2017 GwtMaterialDesign
006 * %%
007 * Licensed under the Apache License, Version 2.0 (the "License");
008 * you may not use this file except in compliance with the License.
009 * You may obtain a copy of the License at
010 * 
011 *      http://www.apache.org/licenses/LICENSE-2.0
012 * 
013 * Unless required by applicable law or agreed to in writing, software
014 * distributed under the License is distributed on an "AS IS" BASIS,
015 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
016 * See the License for the specific language governing permissions and
017 * limitations under the License.
018 * #L%
019 */
020package gwt.material.design.client.ui;
021
022import gwt.material.design.client.base.MaterialWidget;
023import gwt.material.design.client.constants.CssName;
024import gwt.material.design.client.ui.html.ListItem;
025import gwt.material.design.client.ui.html.UnorderedList;
026
027import static gwt.material.design.client.js.JsMaterialElement.$;
028
029//@formatter:off
030
031/**
032 * Scrollspy is a jQuery plugin that tracks certain elements and which element the user's screen is currently centered on. Our main demo of this is our table of contents on every documentation page to the right. Clicking on these links will also scroll the page to that element.
033 * <p>
034 * <h3>UiBinder Usage:</h3>
035 * <pre>
036 * {@code
037 * <m:MaterialRow>
038 *     <m:MaterialColumn grid="l10">
039 *         <m:MaterialPanel scrollspy="topic1">
040 *             <m:MaterialTitle title="Topic 1" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,"/>
041 *         </m:MaterialPanel>
042 *
043 *         <m:MaterialPanel scrollspy="topic2">
044 *             <m:MaterialTitle title="Topic 2" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,"/>
045 *         </m:MaterialPanel>
046 *
047 *         <m:MaterialPanel scrollspy="topci3">
048 *             <m:MaterialTitle title="Topic 3" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,"/>
049 *         </m:MaterialPanel>
050 *
051 *         <m:MaterialPanel scrollspy="code">
052 *             <m:MaterialTitle title="Code" description=""/>
053 *         </m:MaterialPanel>
054 *     </m:MaterialColumn>
055 *
056 *     <m:MaterialColumn grid="l2" addStyleNames="hide-on-small-only">
057 *         <m:MaterialScrollspy addStyleNames="pinned" textColor="GREEN">
058 *             <m:MaterialLink href="#topic1" text="Topic 1"/>
059 *             <m:MaterialLink href="#topic2" text="Topic 2"/>
060 *             <m:MaterialLink href="#topic3" text="Topic 3"/>
061 *             <m:MaterialLink href="#code" text="Code"/>
062 *         </m:MaterialScrollspy>
063 *     </m:MaterialColumn>
064 * </m:MaterialRow>
065 *
066 * }
067 * </pre>
068 *
069 * @author kevzlou7979
070 * @author Ben Dol
071 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#forms">Material Range</a>
072 */
073//@formatter:on
074public class MaterialScrollspy extends UnorderedList {
075
076    public MaterialScrollspy() {
077        super(CssName.SECTION, CssName.TABLE_OF_CONTENTS);
078    }
079
080    @Override
081    protected void onLoad() {
082        super.onLoad();
083
084        clearActiveState();
085        $(".scrollspy").scrollSpy();
086    }
087
088    public void clearActiveState() {
089        getChildren().forEach(widget -> {
090            if (widget instanceof ListItem) {
091                ListItem item = (ListItem) widget;
092                if (item.getWidgetCount() > 0 && item.getWidget(0) != null) {
093                    item.getWidget(0).removeStyleName(CssName.ACTIVE);
094                }
095            }
096        });
097    }
098}