com.sksamuel.jqm4gwt.toolbar.JQMNavBar Maven / Gradle / Ivy

Go to download
package com.sksamuel.jqm4gwt.toolbar;

import java.util.ArrayList;
import java.util.List;

import com.google.gwt.core.client.Scheduler;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.LIElement;
import com.google.gwt.dom.client.UListElement;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiChild;
import com.google.gwt.user.client.ui.ComplexPanel;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sksamuel.jqm4gwt.IconPos;
import com.sksamuel.jqm4gwt.JQMCommon;
import com.sksamuel.jqm4gwt.JQMWidget;
import com.sksamuel.jqm4gwt.Mobile;
import com.sksamuel.jqm4gwt.button.JQMButton;
import com.sksamuel.jqm4gwt.html.CustomFlowPanel;

/**
 * @author Stephen K Samuel [email protected] 24 Jul 2011 23:09:12
 *
 * 
    jQuery Mobile has a very basic navbar widget that is useful for
 *         providing up to 5 buttons with optional icons in a bar, typically
 *         within a header or footer.
 *
 *
 *  See Navbar
 *
 *
 */
public class JQMNavBar extends JQMWidget implements HasFixedPosition {

    private final FlowPanel flow;
    private final ComplexPanel ulPanel;

    private List buttons;

    private boolean highlightLastClicked;

    /** Creates a new {@link JQMNavBar} with no content */
    public JQMNavBar() {
        flow = new FlowPanel();
        initWidget(flow);
        setDataRole("navbar");
        setStyleName("jqm4gwt-navbar");
        UListElement ul = Document.get().createULElement();
        ulPanel = new CustomFlowPanel(ul);
        flow.add(ulPanel);
    }

    @UiChild(tagname = "button")
    public void add(final JQMButton button) {
        if (button == null) return;

        if (buttons == null) buttons = new ArrayList();
        buttons.add(button);
        IconPos btnP = button.getIconPos();
        IconPos p = getIconPos();
        if (btnP == null && p != null) button.setIconPos(p);

        LIElement li = Document.get().createLIElement();
        CustomFlowPanel liPanel = new CustomFlowPanel(li);
        liPanel.add(button);
        ulPanel.add(liPanel);

        button.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                checkHighlightLastClicked(button);
            }
        });
    }

    private void checkHighlightLastClicked(final JQMButton button) {
        if (highlightLastClicked) {
            Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
                @Override
                public void execute() {
                    Mobile.clearActiveClickedLink();
                    JQMCommon.setBtnActive(button, true);
                }
            });
        }
    }

    @UiChild(limit = 1, tagname = "buttonActive")
    public void addActive(final JQMButton button) {
        if (button == null) return;
        add(button);
        JQMCommon.setBtnActive(button, true);
    }

    /**
     * Restore the button's active state each time the page is shown while it exists in the DOM.
     */
    @UiChild(limit = 1, tagname = "buttonActivePersist")
    public void addActivePersist(final JQMButton button) {
        if (button == null) return;
        addActive(button);
        button.getElement().addClassName("ui-state-persist");
    }

    /**
     * Works, but only partially! There is no navbar.refresh() in jqm 1.4.x, so CSS classes are
     * not updated properly and navbar doesn't reuse free/available space after removal.
     */
    public void remove(JQMButton button) {
        if (button == null || buttons == null) return;
        int i = buttons.indexOf(button);
        if (i == -1) return;
        Widget liPanel = button.getParent();
        ulPanel.remove(liPanel);
        buttons.remove(i);
    }

    @Override
    public boolean isFixed() {
        return "fixed".equals(getAttribute("data-position"));
    }

    @Override
    public void setFixed(boolean fixed) {
        if (fixed) setAttribute("data-position", "fixed");
        else removeAttribute("data-position");
    }

    public IconPos getIconPos() {
        return JQMCommon.getIconPos(this);
    }

    /**
     * Sets the position of the icon. If you desire an icon only button then
     * set the position to IconPos.NOTEXT
     */
    public void setIconPos(IconPos pos) {
        if (pos == null) {
            JQMCommon.setIconPos(this, pos);
        } else {
            IconPos oldPos = getIconPos();
            JQMCommon.setIconPos(this, pos);
            for (int i = 0; i < buttons.size(); i++) {
                JQMButton btn = buttons.get(i);
                IconPos p = btn.getIconPos();
                if (p == null || oldPos == null || p.equals(oldPos)) btn.setIconPos(pos);
            }
        }
    }

    public boolean isHighlightLastClicked() {
        return highlightLastClicked;
    }

    /**
     * Special visual mode - if true then the last clicked button will be permanently highlighted.
     */
    public void setHighlightLastClicked(boolean highlightLastClicked) {
        this.highlightLastClicked = highlightLastClicked;
    }

    public int getButtonCount() {
        return buttons != null ? buttons.size() : 0;
    }

    public JQMButton getButton(int index) {
        return (buttons != null && index >= 0 && index < buttons.size()) ? buttons.get(index) : null;
    }

    public Integer getColumns() {
        String grid = JQMCommon.getAttribute(this, "data-grid");
        if (grid == null || grid.isEmpty()) return null;
        grid = grid.trim().toLowerCase();
        if ("solo".equals(grid)) return 1;
        else if ("a".equals(grid)) return 2;
        else if ("b".equals(grid)) return 3;
        else if ("c".equals(grid)) return 4;
        else if ("d".equals(grid)) return 5;
        else return null;
    }

    /**
     * @param cols - possible values: 1..5, defines forced number of columns for this navbar,
     * especially useful in case there are more than five buttons.
     */
    public void setColumns(Integer cols) {
        final String grid;
        if (cols == null || cols < 1 || cols > 5) {
            grid = null;
        } else {
            switch (cols) {
            case 1:
                grid = "solo";
                break;
            case 2:
                grid = "a";
                break;
            case 3:
                grid = "b";
                break;
            case 4:
                grid = "c";
                break;
            case 5:
                grid = "d";
                break;
            default:
                grid = null;
            }
        }
        JQMCommon.setAttribute(this, "data-grid", grid);
    }

    @Override
    public String getTheme() {
        return JQMCommon.getThemeEx(this, JQMCommon.STYLE_UI_BODY);
    }

    @Override
    public void setTheme(String themeName) {
        // Though in section "Theming navbars" at http://api.jquerymobile.com/navbar/
        // says: "Note that applying a theme swatch to the navbar container is not supported."
        // actually it works without any problem or I understand this statement incorrectly :-)
        JQMCommon.setThemeEx(this, themeName, JQMCommon.STYLE_UI_BODY);
    }

}