View Javadoc

1   /**
2    * This file Copyright (c) 2011 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.templating.editor.client.widget.controlbar;
35  
36  
37  import info.magnolia.templating.editor.client.PageEditor;
38  import info.magnolia.templating.editor.client.dom.MgnlElement;
39  import info.magnolia.templating.editor.client.jsni.JavascriptUtils;
40  
41  import com.google.gwt.dom.client.Element;
42  import com.google.gwt.dom.client.Node;
43  import com.google.gwt.dom.client.Style;
44  import com.google.gwt.dom.client.Style.Float;
45  
46  
47  import com.google.gwt.user.client.ui.FlowPanel;
48  import com.google.gwt.user.client.ui.Label;
49  import com.google.gwt.user.client.ui.Widget;
50  
51  /**
52   * Base class for horizontal bars with buttons.
53   */
54  public abstract class AbstractBar extends FlowPanel {
55  
56      private String label = "";
57      private FlowPanel buttonWrapper;
58      private MgnlElement mgnlElement;
59  
60      private FlowPanel primaryButtons;
61      private FlowPanel secondaryButtons;
62  
63      public AbstractBar(MgnlElement mgnlElement) {
64  
65          this.setMgnlElement(mgnlElement);
66  
67          buttonWrapper = new FlowPanel();
68          buttonWrapper.setStylePrimaryName("mgnlEditorBarButtons");
69  
70          add(buttonWrapper);
71  
72          if (mgnlElement != null) {
73              this.label = mgnlElement.getComment().getAttribute("label");
74              if (label != null && !label.isEmpty()) {
75                  Label areaName = new Label(this.label);
76                  //tooltip. Nice to have when area label is truncated because too long.
77                  areaName.setTitle(this.label);
78                  areaName.setStylePrimaryName("mgnlEditorBarLabel");
79  
80                  //setStylePrimaryName(..) replaces gwt default css class, in this case gwt-Label
81                  add(areaName);
82              }
83          }
84  
85  
86  
87          setClassName("mgnlEditorBar");
88  
89      }
90  
91      protected void setId(String id){
92          getElement().setId(id);
93      }
94  
95      /**
96       * Adds this widget to this bar as a button. The default (primary) style applied is <code>mgnlEditorButton</code>. See also <code>editor.css</code>.
97       */
98      protected void addButton(final Widget button, final Float cssFloat) {
99          button.setStylePrimaryName("mgnlEditorButton");
100         button.getElement().getStyle().setFloat(cssFloat);
101 
102         buttonWrapper.add(button);
103     }
104 
105     /**
106      * Adds this widget to this bar as a button. The default (primary) style applied is <code>mgnlEditorButton</code>. See also <code>editor.css</code>.
107      */
108     protected void addSecondaryButton(final Widget button, final Float cssFloat) {
109         if (secondaryButtons == null) {
110             secondaryButtons = new FlowPanel();
111             secondaryButtons.setStylePrimaryName("mgnlEditorBarSecondaryButtons");
112             buttonWrapper.add(secondaryButtons);
113         }
114         button.setStylePrimaryName("mgnlEditorButton");
115         button.getElement().getStyle().setFloat(cssFloat);
116 
117         secondaryButtons.add(button);
118     }
119 
120     /**
121      * Adds this widget to this bar as a button. The default (primary) style applied is <code>mgnlEditorButton</code>. See also <code>editor.css</code>.
122      */
123     protected void addPrimaryButton(final Widget button, final Float cssFloat) {
124         if (primaryButtons == null) {
125             primaryButtons = new FlowPanel();
126             primaryButtons.setStylePrimaryName("mgnlEditorBarPrimaryButtons");
127             buttonWrapper.add(primaryButtons);
128         }
129         button.setStylePrimaryName("mgnlEditorButton");
130         button.getElement().getStyle().setFloat(cssFloat);
131 
132         primaryButtons.add(button);
133     }
134 
135     /**
136      * Adds this widget to this bar as a button. It allows overriding the default (primary) style applied <code>mgnlEditorButton</code>. See also <code>editor.css</code>.
137      */
138     protected void addButton(final Widget button, final Float cssFloat, final String primaryStyleName) {
139         if(JavascriptUtils.isEmpty(primaryStyleName)) {
140              addButton(button, cssFloat);
141              return;
142         }
143         button.setStylePrimaryName(primaryStyleName);
144         button.getElement().getStyle().setFloat(cssFloat);
145 
146         buttonWrapper.add(button);
147     }
148 
149     protected void setClassName(String className) {
150         getElement().setClassName(className);
151     }
152 
153     /**
154      * @return the element's underlying {@link Style}. You can use this object to manipulate the css style attribute of this bar widget.
155      */
156     protected Style getStyle() {
157         return getElement().getStyle();
158     }
159 
160     /**
161      *  TODO: we should not have to call onAttach ourself?
162      */
163 
164     public void attach() {
165         if (getMgnlElement().getEditElement() != null) {
166             Element parent = getMgnlElement().getEditElement();
167             parent.insertFirst(getElement());
168         }
169         else if (getMgnlElement().getFirstElement() != null && getMgnlElement().getFirstElement() == getMgnlElement().getLastElement()) {
170             attach(getMgnlElement());
171         }
172         else {
173             attach(getMgnlElement().getComment().getElement());
174         }
175     }
176 
177     public void attach(MgnlElement mgnlElement) {
178         Element element = mgnlElement.getFirstElement();
179         if (element != null) {
180             element.insertFirst(getElement());
181         }
182         onAttach();
183     }
184 
185     public void attach(Element element) {
186         final Node parentNode = element.getParentNode();
187         parentNode.insertAfter(getElement(), element);
188         onAttach();
189     }
190 
191     public void toggleVisible() {
192         setVisible(!isVisible());
193     }
194 
195     @Override
196     protected void onAttach() {
197         PageEditor.model.addElements(this.getMgnlElement(), getElement());
198         super.onAttach();
199     }
200 
201     public void setMgnlElement(MgnlElement mgnlElement) {
202         this.mgnlElement = mgnlElement;
203     }
204 
205     public MgnlElement getMgnlElement() {
206         return mgnlElement;
207     }
208 
209     public void toggleButtons(boolean visible) {
210         MgnlElement parent = mgnlElement.getParent();
211         if (parent != null) {
212             for (MgnlElement component : parent.getComponents()) {
213                 PageEditor.model.getEditBar(component).primaryButtons.setVisible(visible);
214                 PageEditor.model.getEditBar(component).secondaryButtons.setVisible(visible);
215             }
216         }
217 
218     }
219 }