001package gwt.material.design.addins.client.splitpanel;
002
003/*
004 * #%L
005 * GwtMaterial
006 * %%
007 * Copyright (C) 2015 - 2016 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
023
024import com.google.gwt.dom.client.Document;
025import com.google.gwt.dom.client.Element;
026import gwt.material.design.addins.client.MaterialAddins;
027import gwt.material.design.addins.client.splitpanel.constants.Dock;
028import gwt.material.design.client.MaterialDesignBase;
029import gwt.material.design.client.base.MaterialWidget;
030import gwt.material.design.client.constants.Axis;
031
032//@formatter:off
033/**
034 * A high performance content splitter compatible with touch events
035 *
036 * <h3>XML Namespace Declaration</h3>
037 * <pre>
038 * {@code
039 * xmlns:ma='urn:import:gwt.material.design.addins.client'
040 * }
041 * </pre>
042 *
043 * <h3>UiBinder Usage:</h3>
044 * <pre>
045 * {@code
046 *   <ma:splitpanel.MaterialSplitPanel height="500px">
047 *       <m:MaterialPanel grid="l6 m6 s6" backgroundColor="grey lighten-2">
048 *           <m:MaterialTitle textAlign="CENTER" title="Left Zone" description="Content must be added here"/>
049 *       </m:MaterialPanel>
050 *       <m:MaterialPanel grid="l6 m6 s6" backgroundColor="grey lighten-3">
051 *           <m:MaterialTitle textAlign="CENTER" title="Right Zone" description="Content must be added here"/>
052 *       </m:MaterialPanel>
053 *   </ma:splitpanel.MaterialSplitPanel>
054 * }
055 * </pre>
056 *
057 * @author kevzlou7979
058 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#splitpanel">Split Panel</a>
059 */
060//@formatter:on
061public class MaterialSplitPanel extends MaterialWidget {
062
063    static {
064        if(MaterialAddins.isDebug()) {
065            MaterialDesignBase.injectJs(MaterialSplitPanelDebugClientBundle.INSTANCE.splitPanelDebugJs());
066            MaterialDesignBase.injectCss(MaterialSplitPanelDebugClientBundle.INSTANCE.splitPanelDebugCss());
067        } else {
068            MaterialDesignBase.injectDebugJs(MaterialSplitPanelClientBundle.INSTANCE.splitPanelJs());
069            MaterialDesignBase.injectCss(MaterialSplitPanelClientBundle.INSTANCE.splitPanelCss());
070        }
071    }
072
073    private double leftMax;
074    private double leftMin;
075    private double rightMax;
076    private double rightMin;
077    private double topMin;
078    private double topMax;
079    private double bottomMin;
080    private double bottomMax;
081    private double barPosition = 50;
082    private double thickness = 8;
083    private Dock dock = Dock.LEFT;
084    private Axis axis = Axis.HORIZONTAL;
085
086    public MaterialSplitPanel() {
087        super(Document.get().createDivElement());
088    }
089
090    @Override
091    protected void onLoad() {
092        super.onLoad();
093        initSplitter(getElement(), getBarPosition(), getThickness(), getRightMax(), getRightMin(), getLeftMax(), getLeftMin(), getTopMax(), getTopMin(), getBottomMax(), getBottomMin(), getDock().getCssName(), getAxis().getCssName());
094    }
095
096    /**
097     * Initialize the splitter component
098     * @param e - The element you need to split
099     * @param barPosition - The position of the bar based on percentage by default it's 50%
100     * @param thickness - The bar's thickness in px
101     * @param rightMax - The maximum right space while dragging the splitter bar horizontally
102     * @param rightMin - The minimum right space while dragging the splitter bar horizontally
103     * @param leftMax - The maximum left space while dragging the splitter bar horizontally
104     * @param leftMin - The minimum left space while dragging the splitter bar horizontally
105     * @param topMax - The maximum top space while dragging the splitter bar vertically
106     * @param topMin - The minimum top space while dragging the splitter bar vertically
107     * @param bottomMin - The minimum bottom space while dragging the splitter bar vertically
108     * @param bottomMax - The maximum bottom space while dragging the splitter bar vertically
109     * @param dock - When clicking on the white line located in the middle of splitter bar, depends on docking position it will collapse to that direction
110     * @param orientation - There are two types of orientation : HORIZONTAL (Default) and VERTICAL
111     */
112    protected native void initSplitter(Element e, double barPosition, double thickness, double rightMax, double rightMin, double leftMax, double leftMin, double topMax, double topMin, double bottomMin, double bottomMax, String dock, String orientation) /*-{
113        $wnd.jQuery(document).ready(function() {
114            var splitted = $wnd.jQuery(e);
115            if( splitted[0].touchSplitter == null ) {
116                splitted.touchSplit({barPosition: barPosition, thickness: thickness + "px", rightMax: rightMax, rightMin: rightMin, leftMax: leftMax, leftMin: leftMin, topMax: topMax, topMin: topMin, bottomMax: bottomMax, bottomMin: bottomMin, dock: dock, orientation: orientation});
117            }
118        });
119    }-*/;
120
121    /**
122     * Get the Maximum left space
123     * @return
124     */
125    public double getLeftMax() {
126        return leftMax;
127    }
128
129    /**
130     * Set the Maximum left space while dragging horizontally
131     * @param leftMax
132     */
133    public void setLeftMax(double leftMax) {
134        this.leftMax = leftMax;
135    }
136
137    /**
138     * Get the Minimum left max space
139     * @return
140     */
141    public double getLeftMin() {
142        return leftMin;
143    }
144
145    /**
146     * Set the Minimum left space while dragging horizontally
147     * @param leftMin
148     */
149    public void setLeftMin(double leftMin) {
150        this.leftMin = leftMin;
151    }
152
153    /**
154     * Get the Maximum right space
155     * @return
156     */
157    public double getRightMax() {
158        return rightMax;
159    }
160
161    /**
162     * Set the Maximum right space while dragging horizontally
163     * @param rightMax
164     */
165    public void setRightMax(double rightMax) {
166        this.rightMax = rightMax;
167    }
168
169    /**
170     * Get the minimum right space
171     * @return
172     */
173    public double getRightMin() {
174        return rightMin;
175    }
176
177    /**
178     * Set the minimum right space while dragging horizontally
179     * @param rightMin
180     */
181    public void setRightMin(double rightMin) {
182        this.rightMin = rightMin;
183    }
184
185    /**
186     * Get the axis orientation of splitter component
187     * @return
188     */
189    public Axis getAxis() {
190        return axis;
191    }
192
193    /**
194     * Set the axis orientation of splitter component (HORIZONTAL(Default) and VERTICAL)
195     * @param axis
196     */
197    public void setAxis(Axis axis) {
198        this.axis = axis;
199    }
200
201    /**
202     * Get the dock value
203     * @return
204     */
205    public Dock getDock() {
206        return dock;
207    }
208
209    /**
210     * Set the dock value (LEFT, RIGHT -> HORIZONTAL AXIS and TOP,LEFT -> VERTICAL AXIS)
211     * @param dock
212     */
213    public void setDock(Dock dock) {
214        this.dock = dock;
215    }
216
217    /**
218     * Get the minimum top space
219     * @return
220     */
221    public double getTopMin() {
222        return topMin;
223    }
224
225    /**
226     * Set the minimum top space while dragging vertically
227     * @param topMin
228     */
229    public void setTopMin(double topMin) {
230        this.topMin = topMin;
231    }
232
233    /**
234     * Get the maximum top space
235     * @return
236     */
237    public double getTopMax() {
238        return topMax;
239    }
240
241    /**
242     * Set the maximum top space while dragging vertically
243     * @param topMax
244     */
245    public void setTopMax(double topMax) {
246        this.topMax = topMax;
247    }
248
249    /**
250     * Get the minimum bottom space
251     * @return
252     */
253    public double getBottomMin() {
254        return bottomMin;
255    }
256
257    /**
258     * Set the minimum bottom space while dragging vertically
259     * @param bottomMin
260     */
261    public void setBottomMin(double bottomMin) {
262        this.bottomMin = bottomMin;
263    }
264
265    /**
266     * Get the maximum bottom space
267     * @return
268     */
269    public double getBottomMax() {
270        return bottomMax;
271    }
272
273    /**
274     * Set the maximum bottom space while dragging vertically
275     * @param bottomMax
276     */
277    public void setBottomMax(double bottomMax) {
278        this.bottomMax = bottomMax;
279    }
280
281    /**
282     * Get the bar position in percent divided by 100
283     * @return
284     */
285    public double getBarPosition() {
286        return barPosition / 100;
287    }
288
289    /**
290     * Set the bar position in percent
291     * @param barPosition
292     */
293    public void setBarPosition(double barPosition) {
294        this.barPosition = barPosition;
295    }
296    
297    /**
298     * Get the bar's thickness in px
299     */
300    public double getThickness() {
301        return thickness;
302    }
303    
304    /**
305     * Set the bar's thickness in px
306     * @param thickness
307     */
308    public void setThickness(double thickness) {
309        this.thickness = thickness;
310    }
311}