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 com.google.gwt.dom.client.Document;
023import com.google.gwt.user.client.ui.Widget;
024import gwt.material.design.client.base.HasDurationTransition;
025import gwt.material.design.client.base.HasFullscreen;
026import gwt.material.design.client.base.JsLoader;
027import gwt.material.design.client.base.MaterialWidget;
028import gwt.material.design.client.base.mixin.FullscreenMixin;
029import gwt.material.design.client.constants.CssName;
030import gwt.material.design.client.js.JsSliderOptions;
031import gwt.material.design.client.ui.html.UnorderedList;
032
033import static gwt.material.design.client.js.JsMaterialElement.$;
034//@formatter:off
035
036/**
037 * Our slider is a simple and elegant image carousel.
038 * You can also have captions that will be transitioned on their own depending on their alignment.
039 * You can also have indicators that show up on the bottom of the slider.
040 * Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the slider.
041 *
042 * <p>
043 * <h3>UiBinder Usage:</h3>
044 * <pre>
045 * {@code <m:MaterialSection>
046 * <m:MaterialSlider fullScreen="false">
047 *     <m:MaterialSlideItem>
048 *         <m:MaterialImage url="http://lorempixel.com/580/250/nature/1"/>
049 *         <m:MaterialSlideCaption align="LEFT">
050 *             <m:MaterialTitle tile="This is our big Tagline" description="Here's our small slogan."/>
051 *         </m:MaterialSlideCaption>
052 *     </m:MaterialSlideItem>
053 *
054 *     <m:MaterialSlideItem>
055 *         <m:MaterialImage url="http://lorempixel.com/580/250/nature/2"/>
056 *         <m:MaterialSlideCaption align="CENTER">
057 *             <m:MaterialTitle tile="This is our big Tagline" description="Here's our small slogan."/>
058 *         </m:MaterialSlideCaption>
059 *     </m:MaterialSlideItem>
060 *
061 *     <m:MaterialSlideItem>
062 *         <m:MaterialImage url="http://lorempixel.com/580/250/nature/3"/>
063 *         <m:MaterialSlideCaption align="RIGHT">
064 *             <m:MaterialTitle tile="This is our big Tagline" description="Here's our small slogan."/>
065 *         </m:MaterialSlideCaption>
066 *     </m:MaterialSlideItem>
067 * </m:MaterialSlider>
068 * }
069 * </pre>
070 *
071 * @author kevzlou7979
072 * @author Ben Dol
073 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#media">Material Slider</a>
074 */
075//@formatter:on
076public class MaterialSlider extends MaterialWidget implements JsLoader, HasDurationTransition, HasFullscreen {
077
078    private UnorderedList listContainer = new UnorderedList();
079    private JsSliderOptions options = new JsSliderOptions();
080
081    private FullscreenMixin fullscreenMixin;
082
083    public MaterialSlider() {
084        super(Document.get().createDivElement(), CssName.SLIDER);
085    }
086
087    @Override
088    protected void onLoad() {
089        listContainer.setStyleName(CssName.SLIDES);
090        super.add(listContainer);
091
092        super.onLoad();
093
094        load();
095    }
096
097    @Override
098    public void load() {
099        $(getElement()).slider(options);
100    }
101
102    @Override
103    protected void onUnload() {
104        super.onUnload();
105
106        unload();
107    }
108
109    @Override
110    public void unload() {
111
112    }
113
114    @Override
115    public void reload() {
116        unload();
117        load();
118    }
119
120    @Override
121    public void add(Widget child) {
122        listContainer.add(child);
123    }
124
125    public void pause() {
126        $(getElement()).slider("pause");
127    }
128
129    public void start() {
130        $(getElement()).slider("start");
131    }
132
133    @Override
134    public void setHeight(String height) {
135        super.setHeight(height);
136        listContainer.setHeight(height);
137    }
138
139    /**
140     * Set the image slider to fullscreen view.
141     */
142    @Override
143    public void setFullscreen(boolean fullscreen) {
144        getFullscreenMixin().setFullscreen(fullscreen);
145    }
146
147    @Override
148    public boolean isFullscreen() {
149        return getFullscreenMixin().isFullscreen();
150    }
151
152    public boolean isFullWidth() {
153        return options.full_width;
154    }
155
156    public void setFullWidth(boolean fullWidth) {
157        this.options.full_width = fullWidth;
158    }
159
160    public UnorderedList getListContainer() {
161        return listContainer;
162    }
163
164    @Override
165    public void setDuration(int duration) {
166        this.options.transition = duration;
167    }
168
169    @Override
170    public int getDuration() {
171        return options.transition;
172    }
173
174    public int getInterval() {
175        return options.interval;
176    }
177
178    /**
179     * Set the duration between transitions in ms. (Default: 6000)
180     */
181    public void setInterval(int interval) {
182        this.options.interval = interval;
183    }
184
185    protected FullscreenMixin getFullscreenMixin() {
186        if (fullscreenMixin == null) {
187            fullscreenMixin = new FullscreenMixin(this);
188        }
189        return fullscreenMixin;
190    }
191}