001package gwt.material.design.client.ui;
002
003/*
004 * #%L
005 * GwtMaterial
006 * %%
007 * Copyright (C) 2015 GwtMaterialDesign
008 * %%
009 * Licensed under the Apache License, Version 2.0 (the "License");
010 * you may not use this file except in compliance with the License.
011 * You may obtain a copy of the License at
012 * 
013 *      http://www.apache.org/licenses/LICENSE-2.0
014 * 
015 * Unless required by applicable law or agreed to in writing, software
016 * distributed under the License is distributed on an "AS IS" BASIS,
017 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
018 * See the License for the specific language governing permissions and
019 * limitations under the License.
020 * #L%
021 */
022
023import com.google.gwt.dom.client.Document;
024import com.google.gwt.dom.client.Element;
025import com.google.gwt.user.client.ui.Widget;
026import gwt.material.design.client.base.MaterialWidget;
027import gwt.material.design.client.base.mixin.ToggleStyleMixin;
028import gwt.material.design.client.ui.html.UnorderedList;
029
030//@formatter:off
031
032/**
033* Our slider is a simple and elegant image carousel. You can also have captions that will be transitioned on their own depending on their alignment. You can also have indicators that show up on the bottom of the slider. Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the slider.
034*
035* <h3>UiBinder Usage:</h3>
036* <pre>
037*{@code<m:MaterialSection>
038*     <m:MaterialSlider fullScreen="false">
039        <m:MaterialSlideItem>
040            <m:MaterialImage url="http://lorempixel.com/580/250/nature/1"/>
041            <m:MaterialSlideCaption align="LEFT">
042                <m:MaterialTitle tile="This is our big Tagline" description="Here's our small slogan."/>
043            </m:MaterialSlideCaption>
044        </m:MaterialSlideItem>
045        <m:MaterialSlideItem>
046            <m:MaterialImage url="http://lorempixel.com/580/250/nature/2"/>
047            <m:MaterialSlideCaption align="CENTER">
048                <m:MaterialTitle tile="This is our big Tagline" description="Here's our small slogan."/>
049            </m:MaterialSlideCaption>
050        </m:MaterialSlideItem>
051        <m:MaterialSlideItem>
052            <m:MaterialImage url="http://lorempixel.com/580/250/nature/3"/>
053            <m:MaterialSlideCaption align="RIGHT">
054                 <m:MaterialTitle tile="This is our big Tagline" description="Here's our small slogan."/>
055            </m:MaterialSlideCaption>
056        </m:MaterialSlideItem>
057    </m:MaterialSlider>
058* }
059* </pre>
060*
061* @author kevzlou7979
062* @author Ben Dol
063* @see <a href="http://gwt-material-demo.herokuapp.com/#media">Material Slide</a>
064*/
065//@formatter:on
066public class MaterialSlider extends MaterialWidget {
067
068    private UnorderedList ul = new UnorderedList();
069
070    private final ToggleStyleMixin<MaterialSlider> fsMixin = new ToggleStyleMixin<>(this, "fullscreen");
071
072    public MaterialSlider() {
073        super(Document.get().createDivElement(), "slider");
074        ul.setStyleName("slides");
075        super.add(ul);
076    }
077
078    @Override
079    protected void onLoad() {
080        super.onLoad();
081
082        initialize();
083    }
084
085    @Override
086    public void add(Widget child) {
087        ul.add(child);
088    }
089
090    @Override
091    public void setHeight(String height) {
092        super.setHeight(height);
093        ul.setHeight(height);
094    }
095
096    /**
097     * Set the image slider to fullscreen view.
098     */
099    public void setFullscreen(boolean fullscreen) {
100        fsMixin.setOn(fullscreen);
101    }
102
103    public boolean isFullscreen() {
104        return fsMixin.isOn();
105    }
106
107    /**
108     * Initialize the slider when the widget is attached.
109     */
110    protected void initialize() {
111        initialize(getElement());
112    }
113
114    protected native void initialize(Element e)/*-{
115        $wnd.jQuery(document).ready(function() {
116            $wnd.jQuery(e).slider({
117                full_width : true
118            });
119        });
120    }-*/;
121
122    protected native void pause(Element e)/*-{
123        $wnd.jQuery(e).slider("pause")
124    }-*/;
125
126    protected native void start(Element e)/*-{
127        $wnd.jQuery(e).slider("start")
128    }-*/;
129}