gwt.material.design.client.ui.MaterialSlider Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of gwt-material Show documentation
A Material Design look and feel for GWT Applications
There is a newer version: 2.8.3
package gwt.material.design.client.ui;

/*
 * #%L
 * GwtMaterial
 * %%
 * Copyright (C) 2015 GwtMaterialDesign
 * %%
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *      http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * #L%
 */

import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.user.client.ui.Widget;
import gwt.material.design.client.base.MaterialWidget;
import gwt.material.design.client.base.mixin.ToggleStyleMixin;
import gwt.material.design.client.ui.html.UnorderedList;

//@formatter:off

/**
* 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.
*
* UiBinder Usage:
* *{@code
*     
        
            
            
                
            
        
        
            
            
                
            
        
        
            
            
                 
            
        
    
* }
* 
*
* @author kevzlou7979
* @author Ben Dol
* @see Material Slide
*/
//@formatter:on
public class MaterialSlider extends MaterialWidget {

    private UnorderedList ul = new UnorderedList();

    private final ToggleStyleMixin fsMixin = new ToggleStyleMixin<>(this, "fullscreen");

    public MaterialSlider() {
        super(Document.get().createDivElement(), "slider");
        ul.setStyleName("slides");
        super.add(ul);
    }

    @Override
    protected void onLoad() {
        super.onLoad();

        initialize();
    }

    @Override
    public void add(Widget child) {
        ul.add(child);
    }

    @Override
    public void setHeight(String height) {
        super.setHeight(height);
        ul.setHeight(height);
    }

    /**
     * Set the image slider to fullscreen view.
     */
    public void setFullscreen(boolean fullscreen) {
        fsMixin.setOn(fullscreen);
    }

    public boolean isFullscreen() {
        return fsMixin.isOn();
    }

    /**
     * Initialize the slider when the widget is attached.
     */
    private void initialize() {
        initialize(getElement());
    }

    private native void initialize(Element e)/*-{
        $wnd.jQuery(document).ready(function() {
            $wnd.jQuery(e).slider({
                full_width : true
            });
        });
    }-*/;

    private native void pause(Element e)/*-{
        $wnd.jQuery(e).slider("pause")
    }-*/;

    private native void start(Element e)/*-{
        $wnd.jQuery(e).slider("start")
    }-*/;
}