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     protected void addIcons() {
187         if (listener instanceof MgnlElement) {
188             final String iconClassNames = ((MgnlElement) listener).getAttribute("icons");
189             if (iconClassNames != null && !iconClassNames.isEmpty()) {
190                 Arrays.asList(iconClassNames.split(","))
191                         .forEach(iconClassName -> {
192                             final Label label = new Label();
193                             label.setStyleName(ICON_CLASS_NAME);
194                             label.addStyleName(STATIC_ICON_CLASS_NAME);
195                             label.addStyleName(iconClassName);
196                             addButton(label);
197                         });
198             }
199         }
200     }
201 
202     /**
203      * Builder for the component-bar widget.
204      *
205      * @param <BUILDER>
206      * @param <T>
207      * @param <LISTENER>
208      */
209     public static class Builder<BUILDER extends Builder, T extends AbstractBar, LISTENER extends ControlBarListener> {
210 
211         private LISTENER listener;
212         private int level;
213         private String label;
214         private int activationStatus;
215 
216         public BUILDER withListener(LISTENER listener) {
217             this.listener = listener;
218             return (BUILDER) this;
219         }
220 
221         public BUILDER withLevel(int level) {
222             this.level = level;
223             return (BUILDER) this;
224         }
225 
226         public BUILDER withLabel(String label) {
227             this.label = label;
228             return (BUILDER) this;
229         }
230 
231         public BUILDER withActivationStatus(int activationStatus) {
232             this.activationStatus = activationStatus;
233             return (BUILDER) this;
234         }
235 
236         public T build(T controlBar) {
237             controlBar.listener = listener;
238             controlBar.initLayout();
239             controlBar.addLabel(label, level);
240             controlBar.addStatusIndicator(activationStatus);
241             controlBar.addStyles();
242 
243             return controlBar;
244         }
245     }
246 }