Source code

001/*
002 * #%L
003 * GwtMaterial
004 * %%
005 * Copyright (C) 2015 - 2017 GwtMaterialDesign
006 * %%
007 * Licensed under the Apache License, Version 2.0 (the "License");
008 * you may not use this file except in compliance with the License.
009 * You may obtain a copy of the License at
010 * 
011 *      http://www.apache.org/licenses/LICENSE-2.0
012 * 
013 * Unless required by applicable law or agreed to in writing, software
014 * distributed under the License is distributed on an "AS IS" BASIS,
015 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
016 * See the License for the specific language governing permissions and
017 * limitations under the License.
018 * #L%
019 */
020package gwt.material.design.addins.client.splitpanel;
021
022import com.google.gwt.core.client.GWT;
023import com.google.gwt.dom.client.Document;
024import gwt.material.design.addins.client.MaterialAddins;
025import gwt.material.design.addins.client.splitpanel.constants.Dock;
026import gwt.material.design.addins.client.splitpanel.constants.Side;
027import gwt.material.design.addins.client.splitpanel.js.JsSplitPanelOptions;
028import gwt.material.design.addins.client.splitpanel.js.TouchSplitter;
029import gwt.material.design.client.MaterialDesignBase;
030import gwt.material.design.client.base.JsLoader;
031import gwt.material.design.client.base.MaterialWidget;
032import gwt.material.design.client.constants.Axis;
033
034import static gwt.material.design.addins.client.splitpanel.js.JsSplitPanel.$;
035
036//@formatter:off
037
038/**
039 * A high performance content splitter compatible with touch events
040 * <p>
041 * <h3>XML Namespace Declaration</h3>
042 * <pre>
043 * {@code
044 * xmlns:ma='urn:import:gwt.material.design.addins.client'
045 * }
046 * </pre>
047 * <p>
048 * <h3>UiBinder Usage:</h3>
049 * <pre>
050 * {@code
051 *   <ma:splitpanel.MaterialSplitPanel height="500px">
052 *       <m:MaterialPanel grid="l6 m6 s6" backgroundColor="grey lighten-2">
053 *           <m:MaterialTitle textAlign="CENTER" title="Left Zone" description="Content must be added here"/>
054 *       </m:MaterialPanel>
055 *       <m:MaterialPanel grid="l6 m6 s6" backgroundColor="grey lighten-3">
056 *           <m:MaterialTitle textAlign="CENTER" title="Right Zone" description="Content must be added here"/>
057 *       </m:MaterialPanel>
058 *   </ma:splitpanel.MaterialSplitPanel>
059 * }
060 * </pre>
061 *
062 * @author kevzlou7979
063 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#splitpanel">Split Panel</a>
064 * @see <a href="https://material.io/guidelines/layout/split-screen.html#split-screen-usage">Material Design Specification</a>
065 * @see <a href="https://github.com/colelawrence/Touch-Splitter-jQuery">TouchSplitterJQuery 0.5.1</a>
066 */
067//@formatter:on
068public class MaterialSplitPanel extends MaterialWidget implements JsLoader {
069
070    static {
071        if (MaterialAddins.isDebug()) {
072            MaterialDesignBase.injectDebugJs(MaterialSplitPanelDebugClientBundle.INSTANCE.splitPanelDebugJs());
073            MaterialDesignBase.injectCss(MaterialSplitPanelDebugClientBundle.INSTANCE.splitPanelDebugCss());
074        } else {
075            MaterialDesignBase.injectDebugJs(MaterialSplitPanelClientBundle.INSTANCE.splitPanelJs());
076            MaterialDesignBase.injectCss(MaterialSplitPanelClientBundle.INSTANCE.splitPanelCss());
077        }
078    }
079
080    private TouchSplitter touchSplitter;
081    private JsSplitPanelOptions options = JsSplitPanelOptions.create();
082
083    public MaterialSplitPanel() {
084        super(Document.get().createDivElement());
085    }
086
087    @Override
088    protected void onLoad() {
089        super.onLoad();
090
091        load();
092    }
093
094    @Override
095    public void load() {
096        options.dock = getDock().getCssName();
097        options.orientation = getAxis().getCssName();
098        touchSplitter = $(getElement()).touchSplit(options);
099    }
100
101    public TouchSplitter getTouchSplitter() {
102        return touchSplitter;
103    }
104
105    @Override
106    protected void onUnload() {
107        super.onUnload();
108
109        unload();
110    }
111
112    @Override
113    public void unload() {
114        destroy();
115    }
116
117    public void destroy() {
118        destroy(Side.ALL);
119    }
120
121    public void destroy(Side side) {
122        if (touchSplitter != null) {
123            touchSplitter.destroy(side.getCssName());
124        } else {
125            GWT.log("Please initialize the touchsplitter.", new IllegalStateException());
126        }
127    }
128
129    @Override
130    public void reload() {
131        unload();
132        load();
133    }
134
135    /**
136     * Get the bar position in percent divided by 100.
137     */
138    public double getBarPosition() {
139        return options.barPosition;
140    }
141
142    /**
143     * Set the bar position in percent.
144     */
145    public void setBarPosition(double barPosition) {
146        options.barPosition = barPosition / 100;
147    }
148
149    /**
150     * Get the bar's thickness in px.
151     */
152    public double getThickness() {
153        return options.thickness != null ? Double.parseDouble(options.thickness.replace("px", "")) : null;
154    }
155
156    /**
157     * Set the bar's thickness in px.
158     */
159    public void setThickness(double thickness) {
160        options.thickness = thickness + "px";
161    }
162
163    /**
164     * Get the Maximum left space.
165     */
166    public double getLeftMax() {
167        return options.leftMax;
168    }
169
170    /**
171     * Set the Maximum left space while dragging horizontally.
172     */
173    public void setLeftMax(double leftMax) {
174        options.leftMax = leftMax;
175    }
176
177    /**
178     * Get the Minimum left max space.
179     */
180    public double getLeftMin() {
181        return options.leftMin;
182    }
183
184    /**
185     * Set the Minimum left space while dragging horizontally.
186     */
187    public void setLeftMin(double leftMin) {
188        options.leftMin = leftMin;
189    }
190
191    /**
192     * Get the Maximum right space.
193     */
194    public double getRightMax() {
195        return options.rightMax;
196    }
197
198    /**
199     * Set the Maximum right space while dragging horizontally.
200     */
201    public void setRightMax(double rightMax) {
202        options.rightMax = rightMax;
203    }
204
205    /**
206     * Get the minimum right space.
207     */
208    public double getRightMin() {
209        return options.rightMin;
210    }
211
212    /**
213     * Set the minimum right space while dragging horizontally.
214     */
215    public void setRightMin(double rightMin) {
216        options.rightMin = rightMin;
217    }
218
219    /**
220     * Get the minimum top space.
221     */
222    public double getTopMin() {
223        return options.topMin;
224    }
225
226    /**
227     * Set the minimum top space while dragging vertically.
228     */
229    public void setTopMin(double topMin) {
230        options.topMin = topMin;
231    }
232
233    /**
234     * Get the maximum top space.
235     */
236    public double getTopMax() {
237        return options.topMax;
238    }
239
240    /**
241     * Set the maximum top space while dragging vertically.
242     */
243    public void setTopMax(double topMax) {
244        options.topMax = topMax;
245    }
246
247    /**
248     * Get the minimum bottom space.
249     */
250    public double getBottomMin() {
251        return options.bottomMin;
252    }
253
254    /**
255     * Set the minimum bottom space while dragging vertically.
256     */
257    public void setBottomMin(double bottomMin) {
258        options.bottomMin = bottomMin;
259    }
260
261    /**
262     * Get the maximum bottom space.
263     */
264    public double getBottomMax() {
265        return options.bottomMax;
266    }
267
268    /**
269     * Set the maximum bottom space while dragging vertically.
270     */
271    public void setBottomMax(double bottomMax) {
272        options.bottomMax = bottomMax;
273    }
274
275    /**
276     * Get the axis orientation of splitter component.
277     */
278    public Axis getAxis() {
279        return options.orientation != null ? Axis.fromStyleName(options.orientation) : null;
280    }
281
282    /**
283     * Set the axis orientation of splitter component (HORIZONTAL(Default) and VERTICAL).
284     */
285    public void setAxis(Axis axis) {
286        options.orientation = axis.getCssName();
287    }
288
289    /**
290     * Get the dock value.
291     */
292    public Dock getDock() {
293        return options.dock != null ? Dock.fromStyleName(options.dock) : null;
294    }
295
296    /**
297     * Set the dock value (LEFT, RIGHT -> HORIZONTAL AXIS and TOP,LEFT -> VERTICAL AXIS).
298     */
299    public void setDock(Dock dock) {
300        options.dock = dock.getCssName();
301    }
302}