View Javadoc
1   /**
2    * This file Copyright (c) 2011-2018 Magnolia International
3    * Ltd.  (http://www.magnolia-cms.com). All rights reserved.
4    *
5    *
6    * This file is dual-licensed under both the Magnolia
7    * Network Agreement and the GNU General Public License.
8    * You may elect to use one or the other of these licenses.
9    *
10   * This file is distributed in the hope that it will be
11   * useful, but AS-IS and WITHOUT ANY WARRANTY; without even the
12   * implied warranty of MERCHANTABILITY or FITNESS FOR A
13   * PARTICULAR PURPOSE, TITLE, or NONINFRINGEMENT.
14   * Redistribution, except as permitted by whichever of the GPL
15   * or MNA you select, is prohibited.
16   *
17   * 1. For the GPL license (GPL), you can redistribute and/or
18   * modify this file under the terms of the GNU General
19   * Public License, Version 3, as published by the Free Software
20   * Foundation.  You should have received a copy of the GNU
21   * General Public License, Version 3 along with this program;
22   * if not, write to the Free Software Foundation, Inc., 51
23   * Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
24   *
25   * 2. For the Magnolia Network Agreement (MNA), this file
26   * and the accompanying materials are made available under the
27   * terms of the MNA which accompanies this distribution, and
28   * is available at http://www.magnolia-cms.com/mna.html
29   *
30   * Any modifications to this file must keep this entire header
31   * intact.
32   *
33   */
34  package info.magnolia.ui.vaadin.gwt.client.widget.controlbar;
35  
36  import info.magnolia.jcr.util.NodeTypes;
37  import info.magnolia.ui.vaadin.gwt.client.editor.dom.MgnlElement;
38  import info.magnolia.ui.vaadin.gwt.client.widget.controlbar.eventmanager.ControlBarEventManager;
39  import info.magnolia.ui.vaadin.gwt.client.widget.controlbar.listener.ControlBarListener;
40  
41  import java.util.Arrays;
42  
43  import com.google.gwt.core.client.GWT;
44  import com.google.gwt.dom.client.Element;
45  import com.google.gwt.user.client.DOM;
46  import com.google.gwt.user.client.ui.FlowPanel;
47  import com.google.gwt.user.client.ui.Label;
48  import com.google.gwt.user.client.ui.Widget;
49  
50  /**
51   * Base class for horizontal bars with buttons.
52   * The instantiation of control-bars needs to happen in the following order:
53   * <pre>
54   *     <ul>
55   *         <li>
56   *             {@link #initLayout()} sets up the layout and the widgets in the necessary order: The buttons are placed
57   *             first in the DOM, followed by the status-indicator and the label.
58   *         </li>
59   *         <li>
60   *             {@link #addLabel(String, int)} or {@link #addStatusIndicator(int)} as these are depending on their div being
61   *             present in the DOM, when added. If not called the divs will remain empty and without any class-name.
62   *         </li>
63   *     </ul>
64   * </pre>
65   *
66   * @param <LISTENER>
67   */
68  public abstract class AbstractBar<LISTENER extends ControlBarListener> extends SimpleBar {
69  
70  
71      private final static String EDITOR_BAR_LABEL_CLASS_NAME = "mgnlEditorBarLabel";
72      private final static String EDITOR_BAR_BUTTONS_CLASS_NAME = "mgnlEditorBarButtons";
73      private final static String EDITOR_BAR_WITH_STATUS_CLASS_NAME = "mgnlEditorBarStatusIndicator";
74  
75      private final static String MGNL_LEVEL_CLASS_NAME = "mgnlLevel-";
76  
77      protected final static String AREA_CLASS_NAME = "area";
78      protected final static String COMPONENT_CLASS_NAME = "component";
79  
80      protected final static String ICON_CLASS_NAME = "editorIcon";
81      protected final static String EDIT_CLASS_NAME = "icon-edit";
82      protected final static String ADD_CLASS_NAME = "icon-add-item";
83  
84      protected final static String STATIC_ICON_CLASS_NAME = "staticIcon";
85  
86      private final static String STATUS_INDICATOR_CLASS_NAME = "status-indicator";
87      private final static String STATUS_INACTIVATED_CLASS_NAME = "background-color-red icon-status-red";
88      private final static String STATUS_MODIFIED_CLASS_NAME = "background-color-yellow icon-status-orange";
89  
90      private final static int MAX_LEVEL = 6;
91  
92      protected ControlBarEventManager eventManager = GWT.create(ControlBarEventManager.class);
93      protected LISTENER listener;
94      protected boolean editable;
95  
96      private FlowPanel buttons;
97      private Element label;
98      private Element activationIndicator;
99  
100     /**
101      * Initializes the layout. The order of the elements matter.
102      * IIRC the FlowPanel is needed to propagate click- and touch-events, otherwise a div vould be used for the buttons
103      * as well.
104      */
105     protected void initLayout() {
106         this.buttons = new FlowPanel();
107         this.activationIndicator = DOM.createDiv();
108         this.label = DOM.createDiv();
109 
110         buttons.setStylePrimaryName(EDITOR_BAR_BUTTONS_CLASS_NAME);
111         insert(buttons, 0); // must be first element to allow overflowing (ellipsis) the label
112 
113         getElement().appendChild(activationIndicator);
114         getElement().appendChild(label);
115     }
116 
117     /**
118      * Adds the label to the control-bar. Sets the css class-names and adds the level-padding.
119      */
120     protected void addLabel(String text, int level) {
121         label.setClassName(EDITOR_BAR_LABEL_CLASS_NAME);
122         label.setInnerText(text);
123         // tooltip. Nice to have when area label is truncated because too long.
124         label.setTitle(text);
125         // replace the numerical level with 'max' if the #MAX_LEVEL has been reached
126         label.addClassName(MGNL_LEVEL_CLASS_NAME + (level > MAX_LEVEL ? "max" : String.valueOf(level)));
127     }
128 
129     /**
130      * Adds the status-indicator to the control-bar and the correlating css classes-names to the status-div as well
131      * as the control-bar itself for the left indentation.
132      */
133     protected void addStatusIndicator(int activationStatus) {
134         switch (activationStatus) {
135         case NodeTypes.Activatable.ACTIVATION_STATUS_MODIFIED:
136             activationIndicator.setClassName(STATUS_INDICATOR_CLASS_NAME);
137             activationIndicator.addClassName(STATUS_MODIFIED_CLASS_NAME);
138             addStyleName(EDITOR_BAR_WITH_STATUS_CLASS_NAME);
139             break;
140         case NodeTypes.Activatable.ACTIVATION_STATUS_NOT_ACTIVATED:
141             activationIndicator.setClassName(STATUS_INDICATOR_CLASS_NAME);
142             activationIndicator.addClassName(STATUS_INACTIVATED_CLASS_NAME);
143             addStyleName(EDITOR_BAR_WITH_STATUS_CLASS_NAME);
144             break;
145         // otherwise nothing, this is only run once, so no need to remove anything.
146         case NodeTypes.Activatable.ACTIVATION_STATUS_ACTIVATED:
147         default:
148             break;
149         }
150     }
151 
152     @Override
153     public void onAttach() {
154         super.onAttach();
155     }
156 
157     protected void addButton(final Widget button) {
158         buttons.add(button);
159     }
160 
161     protected void createControls() {
162         if (editable) {
163             final Label edit = new Label();
164             edit.setStyleName(ICON_CLASS_NAME);
165             edit.addStyleName(EDIT_CLASS_NAME);
166 
167             eventManager.addClickOrTouchHandler(edit, event -> listener.edit());
168             addButton(edit);
169         }
170     }
171 
172     protected void addStyles() {
173         if (listener instanceof MgnlElement) {
174             final String stylesAttribute = ((MgnlElement) listener).getAttribute("styles");
175             if (stylesAttribute != null && !stylesAttribute.isEmpty()) {
176                 Arrays.asList(stylesAttribute.split(",")).forEach(this::addStyleName);
177             }
178         }
179     }
180 
181     protected void addIcons() {
182         if (listener instanceof MgnlElement) {
183             final String iconClassNames = ((MgnlElement) listener).getAttribute("icons");
184             if (iconClassNames != null && !iconClassNames.isEmpty()) {
185                 Arrays.asList(iconClassNames.split(","))
186                         .forEach(iconClassName -> {
187                             final Label label = new Label();
188                             label.setStyleName(ICON_CLASS_NAME);
189                             label.addStyleName(STATIC_ICON_CLASS_NAME);
190                             label.addStyleName(iconClassName);
191                             addButton(label);
192                         });
193             }
194         }
195     }
196 
197     /**
198      * Builder for the component-bar widget.
199      *
200      * @param <BUILDER>
201      * @param <T>
202      * @param <LISTENER>
203      */
204     public static class Builder<BUILDER extends Builder, T extends AbstractBar, LISTENER extends ControlBarListener> {
205 
206         private LISTENER listener;
207         private int level;
208         private String label;
209         private int activationStatus;
210 
211         public BUILDER withListener(LISTENER listener) {
212             this.listener = listener;
213             return (BUILDER) this;
214         }
215 
216         public BUILDER withLevel(int level) {
217             this.level = level;
218             return (BUILDER) this;
219         }
220 
221         public BUILDER withLabel(String label) {
222             this.label = label;
223             return (BUILDER) this;
224         }
225 
226         public BUILDER withActivationStatus(int activationStatus) {
227             this.activationStatus = activationStatus;
228             return (BUILDER) this;
229         }
230 
231         public T build(T controlBar) {
232             controlBar.listener = listener;
233             controlBar.initLayout();
234             controlBar.addLabel(label, level);
235             controlBar.addStatusIndicator(activationStatus);
236             controlBar.addStyles();
237 
238             return controlBar;
239         }
240     }
241 }