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.Element;
024import com.google.gwt.event.logical.shared.AttachEvent;
025import com.google.gwt.event.shared.HandlerRegistration;
026import com.google.gwt.user.client.ui.Widget;
027import gwt.material.design.client.base.HasType;
028import gwt.material.design.client.base.MaterialWidget;
029import gwt.material.design.client.base.mixin.ColorsMixin;
030import gwt.material.design.client.base.mixin.CssTypeMixin;
031import gwt.material.design.client.constants.TabType;
032import gwt.material.design.client.ui.html.UnorderedList;
033
034//@formatter:off
035
036/**
037 * The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.
038 * <h3>UiBinder Usage:</h3>
039 * <pre>
040 *{@code
041<m:MaterialTab ui:field="tab"  backgroundColor="blue">
042<m:MaterialTabItem waves="YELLOW" grid="l4"><i:Link text="Tab 1" href="#tab1" textColor="white"/></m:MaterialTabItem>
043<m:MaterialTabItem waves="YELLOW" grid="l4"><i:Link text="Tab 2" href="#tab2" textColor="white"/></m:MaterialTabItem>
044<m:MaterialTabItem waves="YELLOW" grid="l4"><i:Link text="Tab 3" href="#tab3" textColor="white"/></m:MaterialTabItem>
045</m:MaterialTab>
046<i:Panel m:id="tab1">
047<i:Title title="Tab 1" description="Tab 1 Content"/>
048</i:Panel>
049<i:Panel m:id="tab2">
050<i:Title title="Tab 2" description="Tab 2 Content"/>
051</i:Panel>
052<i:Panel m:id="tab3">
053<i:Title title="Tab 3" description="Tab 3 Content"/>
054</i:Panel>
055}
056 * </pre>
057 * @see <a href="http://gwt-material-demo.herokuapp.com/#tabs">Material Tabs</a>
058 * @author kevzlou7979
059 * @author Ben Dol
060 */
061//@formatter:on
062public class MaterialTab extends UnorderedList implements HasType<TabType> {
063
064    private int tabIndex;
065    private String indicatorColor;
066
067    private MaterialWidget indicator;
068    private ColorsMixin<MaterialWidget> indicatorColorMixin;
069
070    private final CssTypeMixin<TabType, MaterialTab> typeMixin = new CssTypeMixin<>(this);
071
072    public MaterialTab() {
073        super("tabs");
074    }
075
076    @Override
077    public void onLoad() {
078        super.onLoad();
079
080        initialize();
081
082        indicator = new MaterialWidget(getIndicatorElement(getElement()));
083        indicatorColorMixin = new ColorsMixin<>(indicator);
084
085        setIndicatorColor(indicatorColor);
086    }
087
088    public int getTabIndex() {
089        return tabIndex;
090    }
091
092    public void setTabIndex(int tabIndex) {
093        this.tabIndex = tabIndex;
094        int i = 0;
095        for(Widget w : this) {
096            if(i == tabIndex) {
097                if(w instanceof MaterialTabItem) {
098                    ((MaterialTabItem) w).selectTab();
099                    break;
100                }
101            }
102            i++;
103        }
104    }
105
106    public void setIndicatorColor(String indicatorColor) {
107        this.indicatorColor = indicatorColor;
108
109        if(indicatorColorMixin != null && indicatorColor != null) {
110            indicatorColorMixin.setBackgroundColor(indicatorColor);
111        }
112    }
113
114    /**
115     * Select a given tab by id.
116     * @param tabId Tab to selects id.
117     */
118    public void selectTab(String tabId) {
119        selectTab(getElement(), tabId);
120    }
121
122    protected void initialize() {
123        initialize(getElement());
124    }
125
126    protected native void initialize(Element e) /*-{
127        $wnd.jQuery(document).ready(function() {
128            $wnd.jQuery(e).tabs();
129            for(var i = 1; i <= $wnd.jQuery(e).find('.indicator').length; i++) {
130                $wnd.jQuery(e).find('.indicator').eq(i).remove()
131            }
132
133        });
134    }-*/;
135
136    protected native Element getIndicatorElement(Element e)/*-{
137        return $wnd.jQuery(e).find(".indicator")[0];
138    }-*/;
139
140    protected native void selectTab(Element e, String tabId)/*-{
141        $wnd.jQuery(e).tabs("select_tab", tabId);
142    }-*/;
143
144    @Override
145    public void setType(TabType type) {
146        typeMixin.setType(type);
147    }
148
149    @Override
150    public TabType getType() {
151        return typeMixin.getType();
152    }
153}