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_LABEL_SECTION_CLASS_NAME = "mgnlEditorBarLabelSection";
73  
74      private final static String EDITOR_BAR_BUTTONS_CLASS_NAME = "mgnlEditorBarButtons";
75      private final static String EDITOR_BAR_WITH_STATUS_CLASS_NAME = "mgnlEditorBarStatusIndicator";
76  
77      private final static String MGNL_LEVEL_CLASS_NAME = "mgnlLevel-";
78  
79      protected final static String AREA_CLASS_NAME = "area";
80      protected final static String COMPONENT_CLASS_NAME = "component";
81  
82      protected final static String ICON_CLASS_NAME = "editorIcon";
83      protected final static String EDIT_CLASS_NAME = "icon-edit";
84      protected final static String ADD_CLASS_NAME = "icon-add-item";
85  
86      protected final static String STATIC_ICON_CLASS_NAME = "staticIcon";
87  
88      private final static String STATUS_INDICATOR_CLASS_NAME = "status-indicator";
89      private final static String STATUS_INACTIVATED_CLASS_NAME = "background-color-red icon-status-red";
90      private final static String STATUS_MODIFIED_CLASS_NAME = "background-color-yellow icon-status-orange";
91  
92      private final static int MAX_LEVEL = 6;
93  
94      protected ControlBarEventManager eventManager = GWT.create(ControlBarEventManager.class);
95      protected LISTENER listener;
96      protected boolean editable;
97  
98      private FlowPanel buttons;
99      private Element label;
100     private Element activationIndicator;
101 
102     /**
103      * Initializes the layout. The order of the elements matter.
104      * IIRC the FlowPanel is needed to propagate click- and touch-events, otherwise a div vould be used for the buttons
105      * as well.
106      */
107     protected void initLayout() {
108         this.buttons = new FlowPanel();
109         this.buttons.setStylePrimaryName(EDITOR_BAR_BUTTONS_CLASS_NAME);
110 
111         this.activationIndicator = DOM.createDiv();
112         this.label = DOM.createDiv();
113         FlowPanel labelSection = new FlowPanel();
114         labelSection.setStylePrimaryName(EDITOR_BAR_LABEL_SECTION_CLASS_NAME);
115         labelSection.getElement().insertFirst(activationIndicator);
116         labelSection.getElement().appendChild(label);
117 
118         add(labelSection);
119         add(buttons);
120     }
121 
122     /**
123      * Adds the label to the control-bar. Sets the css class-names and adds the level-padding.
124      */
125     protected void addLabel(String text, int level) {
126         label.setClassName(EDITOR_BAR_LABEL_CLASS_NAME);
127         label.setInnerText(text);
128         // tooltip. Nice to have when area label is truncated because too long.
129         label.setTitle(text);
130         // replace the numerical level with 'max' if the #MAX_LEVEL has been reached
131         label.addClassName(MGNL_LEVEL_CLASS_NAME + (level > MAX_LEVEL ? "max" : String.valueOf(level)));
132     }
133 
134     /**
135      * Adds the status-indicator to the control-bar and the correlating css classes-names to the status-div as well
136      * as the control-bar itself for the left indentation.
137      */
138     protected void addStatusIndicator(int activationStatus) {
139         switch (activationStatus) {
140         case NodeTypes.Activatable.ACTIVATION_STATUS_MODIFIED:
141             activationIndicator.setClassName(STATUS_INDICATOR_CLASS_NAME);
142             activationIndicator.addClassName(STATUS_MODIFIED_CLASS_NAME);
143             addStyleName(EDITOR_BAR_WITH_STATUS_CLASS_NAME);
144             break;
145         case NodeTypes.Activatable.ACTIVATION_STATUS_NOT_ACTIVATED:
146             activationIndicator.setClassName(STATUS_INDICATOR_CLASS_NAME);
147             activationIndicator.addClassName(STATUS_INACTIVATED_CLASS_NAME);
148             addStyleName(EDITOR_BAR_WITH_STATUS_CLASS_NAME);
149             break;
150         // otherwise nothing, this is only run once, so no need to remove anything.
151         case NodeTypes.Activatable.ACTIVATION_STATUS_ACTIVATED:
152         default:
153             break;
154         }
155     }
156 
157     @Override
158     public void onAttach() {
159         super.onAttach();
160     }
161 
162     protected void addButton(final Widget button) {
163         buttons.add(button);
164     }
165 
166     protected void createControls() {
167         if (editable) {
168             final Label edit = new Label();
169             edit.setStyleName(ICON_CLASS_NAME);
170             edit.addStyleName(EDIT_CLASS_NAME);
171 
172             eventManager.addClickOrTouchHandler(edit, event -> listener.edit());
173             addButton(edit);
174         }
175     }
176 
177     protected void addStyles() {
178         if (listener instanceof MgnlElement) {
179             final String stylesAttribute = ((MgnlElement) listener).getAttribute("styles");
180             if (stylesAttribute != null && !stylesAttribute.isEmpty()) {
181                 Arrays.asList(stylesAttribute.split(",")).forEach(this::addStyleName);
182             }
183         }
184     }
185 
186     /**
187      * Icon is added to the control-bar bases on the {@code icons} attribute defined via {@link MgnlElement}.
188      * <br><br>
189      * The value of {@code icons} could be cssClasses (one or many cssClasses needed to form an icon and separated by space {@code ' '}), or combine of cssClasses and tooltip (seperated by semicolon {@code ';'})
190      * <br><br>
191      * E.g - An icon should have a format likes: icons="cssClass anotherClass;This is tooltip value".
192      */
193     protected void addIcons() {
194         if (listener instanceof MgnlElement) {
195             final String icons = ((MgnlElement) listener).getAttribute("icons");
196             if (icons != null && !icons.isEmpty()) {
197                 String[] iconAttributes = icons.split(";");
198                 String cssClasses;
199                 String tooltip;
200                 if (icons.length() >= 2) {
201                     cssClasses = iconAttributes[0];
202                     tooltip = iconAttributes[1];
203                 } else {
204                     cssClasses = iconAttributes[0];
205                     tooltip = "";
206                 }
207                 final Label icon = new Label();
208                 icon.setStyleName(ICON_CLASS_NAME);
209                 icon.addStyleName(STATIC_ICON_CLASS_NAME);
210                 icon.addStyleName(cssClasses);
211                 icon.setTitle(tooltip);
212                 addButton(icon);
213             }
214         }
215     }
216 
217     /**
218      * Builder for the component-bar widget.
219      *
220      * @param <BUILDER>
221      * @param <T>
222      * @param <LISTENER>
223      */
224     public static class Builder<BUILDER extends Builder, T extends AbstractBar, LISTENER extends ControlBarListener> {
225 
226         private LISTENER listener;
227         private int level;
228         private String label;
229         private int activationStatus;
230 
231         public BUILDER withListener(LISTENER listener) {
232             this.listener = listener;
233             return (BUILDER) this;
234         }
235 
236         public BUILDER withLevel(int level) {
237             this.level = level;
238             return (BUILDER) this;
239         }
240 
241         public BUILDER withLabel(String label) {
242             this.label = label;
243             return (BUILDER) this;
244         }
245 
246         public BUILDER withActivationStatus(int activationStatus) {
247             this.activationStatus = activationStatus;
248             return (BUILDER) this;
249         }
250 
251         public T build(T controlBar) {
252             controlBar.listener = listener;
253             controlBar.initLayout();
254             controlBar.addLabel(label, level);
255             controlBar.addStatusIndicator(activationStatus);
256             controlBar.addStyles();
257 
258             return controlBar;
259         }
260     }
261 }