org.spiffyui.client.widgets.ExpandingTextArea Maven / Gradle / Ivy

Go to download
/*******************************************************************************
 *
 * Copyright 2011-2014 Spiffy UI Team   
 * 
 * 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.
 *
 ******************************************************************************/
package org.spiffyui.client.widgets;

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.event.dom.client.BlurEvent;
import com.google.gwt.event.dom.client.BlurHandler;
import com.google.gwt.event.dom.client.ChangeEvent;
import com.google.gwt.event.dom.client.ChangeHandler;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.TextArea;

/**
 * This is a self-expanding text area.  It's height grows
 * dynamically depending on the text within it.
 * 
 * See http://www.alistapart.com/articles/expanding-text-areas-made-elegant
 * 
 * 
 */
public class ExpandingTextArea extends TextArea implements ChangeHandler, KeyUpHandler, BlurHandler
{
    private JavaScriptObject m_span;
    private int m_maxHeight = -1;
    /**
     * Constructor
     * @param id - the text area's element ID
     */
    public ExpandingTextArea(String id)
    {
        super();        
        getElement().setId(id);
    }

    /**
     * Constructor
     * A unique ID will be generated.
     */
    public ExpandingTextArea()
    {
        this(HTMLPanel.createUniqueId());
    }

    @Override
    public void setValue(String value)
    {
        super.setValue(value);
        if (m_span != null) {
            manuallyUpdateSpanJS(m_span, value, m_maxHeight, getElement().getId());
        }
    }

    @Override
    public void setValue(String value, boolean fireEvents)
    {
        super.setValue(value, fireEvents);
        if (m_span != null) {
            manuallyUpdateSpanJS(m_span, value, m_maxHeight, getElement().getId());
        }
    }

    @Override
    public void setText(String text)
    {
        super.setText(text);
        if (m_span != null) {
            manuallyUpdateSpanJS(m_span, text, m_maxHeight, getElement().getId());
        }
    }
    
    @Override
    protected void onLoad()
    {
        super.onLoad();
        /*
         * This is the markup we want
         * 
         *     

         *     
         * 
         *
         * So when this TextArea is attached
         * let's add the the other DOM elements.
         * 
         * Doing it this way instead of extending Composite
         * or HTMLPanel allows us to inherit from TextArea.
         */
        m_span = markupTextAreaJS(getElement().getId());
        addChangeHandler(this);
        addKeyUpHandler(this);
        addBlurHandler(this);
        updateSpan();
        
        if (m_maxHeight > -1) {
            /*
             * We need to set this here once the elements are created.
             */
            setMaxHeight(m_maxHeight);
        }
    }
    
    /**
     * Set the maximum height of this text area.  The text area will
     * grow to this height and will show vertical scroll bars after 
     * that height.
     *
     * @param height the maximum height of this text area in pixels
     */
    public void setMaxHeight(int height)
    {
        m_maxHeight = height;
        setMaxHeightJS(getElement().getId(), height);
    }
    
    /**
     * Get the maximum height of this text area.  
     * 
     * @return the maximum height of this text area or -1 if it hasn't been set
     */
    public int getMaxHeight()
    {
        return m_maxHeight;
    }
    
    /**
     * Clear out the maximum height setting for this text area so 
     * the text area will grow as large as it has to to show the contents.
     */
    public void clearMaxHeight()
    {
        clearMaxHeightJS(getElement().getId());
    }
    
    private native JavaScriptObject clearMaxHeightJS(String textAreaId) /*-{
        $wnd.jQuery("#" + textAreaId).parent().children("pre").css("max-height", "");
        $wnd.jQuery("#" + textAreaId).css("max-height", "");
        $wnd.jQuery("#" + textAreaId).css("overflow-y", "");
    }-*/;
    
    private native JavaScriptObject setMaxHeightJS(String textAreaId, int height) /*-{
        $wnd.jQuery("#" + textAreaId).parent().children("pre").css("max-height", height + "px");
        $wnd.jQuery("#" + textAreaId).css("max-height", height + "px");
    }-*/;

    private native JavaScriptObject markupTextAreaJS(String textAreaId) /*-{
        var ta = $wnd.jQuery("#" + textAreaId);    
        var prev = ta.prev();
        var contId = textAreaId + "Cont";
        var container = $wnd.jQuery("");
        if (prev.length == 0) {
            //no previous siblings to come after, just wrap
            ta.wrap(container);
        } else {
            //make next sibling of prev the container
            prev.after(container);
            container.append(ta);
        }
        ta.before("
");
        //Return the span as a JQuery object
        return $wnd.jQuery("#" + contId + " span");      
    }-*/;
        
    private native void manuallyUpdateSpanJS(JavaScriptObject spanJQueryObject, String text, int maxHeight, String textAreaId) /*-{
        //We are using JQuery for this because trying to wrap a span element in GWT has a history of not working in Dev Mode 
        if (spanJQueryObject.length > 0) {
            spanJQueryObject.text(text);
            
            if (maxHeight > -1 && $wnd.jQuery('#' + textAreaId).height() > maxHeight - 20) {
                $wnd.jQuery("#" + textAreaId).css("overflow-y", "auto");
            } else {
                $wnd.jQuery("#" + textAreaId).css("overflow-y", "");
            }
        }
    
    }-*/;

    private void updateSpan()
    {
        if (m_span != null) {
            manuallyUpdateSpanJS(m_span, getValue(), m_maxHeight, getElement().getId());
        }
    }
    
    @Override
    public void onChange(ChangeEvent event)
    {
        updateSpan();
    }

    @Override
    public void onBlur(BlurEvent event)
    {
        updateSpan();
    }

    @Override
    public void onKeyUp(KeyUpEvent event)
    {
        updateSpan();
    }
}