001package gwt.material.design.addins.client.bubble;
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 gwt.material.design.addins.client.MaterialAddins;
026import gwt.material.design.client.MaterialDesignBase;
027import gwt.material.design.client.base.HasPosition;
028import gwt.material.design.client.base.MaterialWidget;
029import gwt.material.design.client.base.helper.ColorHelper;
030import gwt.material.design.client.base.mixin.CssNameMixin;
031import gwt.material.design.client.constants.Position;
032
033//@formatter:off
034
035/**
036 * Bubble component used on chat module
037 *
038 * <h3>XML Namespace Declaration</h3>
039 * <pre>
040 * {@code
041 * xmlns:ma='urn:import:gwt.material.design.addins.client'
042 * }
043 * </pre>
044 *
045 * <h3>UiBinder Usage:</h3>
046 * <pre>
047 * {@code
048 * <ma:bubble.MaterialBubble backgroundColor="white darken-1" position="LEFT" float="LEFT">
049 *   <m:MaterialLabel text="I love Material Design"/>
050 *   <m:MaterialLabel text="Dec 12, 2015" fontSize="0.8" textColor="grey"/>
051 * </ma:bubble.MaterialBubble>
052 * }
053 * </pre>
054 *
055 * @author kevzlou7979
056 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#bubble">Material Bubble</a>
057 */
058//@formatter:on
059public class MaterialBubble extends MaterialWidget implements HasPosition {
060
061    private MaterialWidget triangle;
062    private final CssNameMixin<MaterialWidget, Position> positionMixin;
063
064    static {
065        if(MaterialAddins.isDebug()) {
066            MaterialDesignBase.injectDebugJs(MaterialBubbleDebugClientBundle.INSTANCE.bubbleJsDebug());
067            MaterialDesignBase.injectCss(MaterialBubbleDebugClientBundle.INSTANCE.bubbleCssDebug());
068        } else {
069            MaterialDesignBase.injectJs(MaterialBubbleClientBundle.INSTANCE.bubbleJs());
070            MaterialDesignBase.injectCss(MaterialBubbleClientBundle.INSTANCE.bubbleCss());
071        }
072    }
073
074    public MaterialBubble() {
075        super(Document.get().createSpanElement(), "bubble");
076        triangle = new MaterialWidget(Document.get().createDivElement());
077        triangle.setStyleName("triangle");
078        positionMixin = new CssNameMixin<>(triangle);
079        add(triangle);
080        setShadow(1);
081    }
082
083    @Override
084    protected void onLoad() {
085        super.onLoad();
086        initBubble(getElement(), ColorHelper.setupComputedBackgroundColor(getBackgroundColor()), getPosition().getCssName());
087    }
088
089    /**
090     * Initialize the bubble component
091     * @param element - element to be set
092     * @param color - color of the bubble
093     * @param type - type of the bubble (RIGHT, TOP, LEFT, BOTTOM)
094     */
095    protected native void initBubble(Element element, String color, String type) /*-{
096        $wnd.jQuery(document).ready(function() {
097            $wnd.jQuery(element).bubble({
098                position: type,
099                color: color
100            });
101        });
102    }-*/;
103
104    @Override
105    public Position getPosition() {
106        return positionMixin.getCssName();
107    }
108
109    @Override
110    public void setPosition(Position position) {
111        positionMixin.setCssName(position);
112    }
113}