001package gwt.material.design.addins.client.richeditor;
002
003/*
004 * #%L
005 * GwtMaterial
006 * %%
007 * Copyright (C) 2015 - 2016 GwtMaterialDesign
008 * %%
009 * Licensed under the Apache License, Version 2.0 (the "License");
010 * you may not use this file except in compliance with the License.
011 * You may obtain a copy of the License at
012 * 
013 *      http://www.apache.org/licenses/LICENSE-2.0
014 * 
015 * Unless required by applicable law or agreed to in writing, software
016 * distributed under the License is distributed on an "AS IS" BASIS,
017 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
018 * See the License for the specific language governing permissions and
019 * limitations under the License.
020 * #L%
021 */
022
023
024import com.google.gwt.core.client.JsArrayString;
025import com.google.gwt.dom.client.Element;
026import com.google.gwt.event.dom.client.*;
027import com.google.gwt.event.logical.shared.HasValueChangeHandlers;
028import com.google.gwt.event.logical.shared.ValueChangeEvent;
029import com.google.gwt.event.logical.shared.ValueChangeHandler;
030import com.google.gwt.event.shared.HandlerRegistration;
031import com.google.gwt.user.client.ui.HasHTML;
032import gwt.material.design.addins.client.MaterialAddins;
033import gwt.material.design.addins.client.richeditor.base.HasPasteHandlers;
034import gwt.material.design.addins.client.richeditor.base.MaterialRichEditorBase;
035import gwt.material.design.addins.client.richeditor.events.PasteEvent;
036import gwt.material.design.client.MaterialDesignBase;
037import gwt.material.design.client.ui.MaterialToast;
038
039//@formatter:off
040
041/**
042 * Provides a great Rich Editor with amazing options built with Material Design Look and Feel
043 *
044 * <h3>XML Namespace Declaration</h3>
045 * <pre>
046 * {@code
047 * xmlns:ma='urn:import:gwt.material.design.addins.client'
048 * }
049 * </pre>
050 *
051 * <h3>UiBinder Usage:</h3>
052 * <pre>
053 *{@code
054 * <ma:MaterialRichEditor placeholder="Type anything in here..."/>
055 * }
056 * </pre>
057 *
058 * @author kevzlou7979
059 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#richeditor">Material Rich Editor</a>
060 */
061//@formatter:on
062public class MaterialRichEditor extends MaterialRichEditorBase implements HasHTML, HasValueChangeHandlers<String>, HasFocusHandlers, HasBlurHandlers, HasKeyUpHandlers, HasKeyDownHandlers, HasPasteHandlers {
063
064    static {
065        if(MaterialAddins.isDebug()) {
066            MaterialDesignBase.injectDebugJs(MaterialRichEditorDebugClientBundle.INSTANCE.richEditorDebugJs());
067            MaterialDesignBase.injectCss(MaterialRichEditorDebugClientBundle.INSTANCE.richEditorDebugCss());
068        } else {
069            MaterialDesignBase.injectJs(MaterialRichEditorClientBundle.INSTANCE.richEditorJs());
070            MaterialDesignBase.injectCss(MaterialRichEditorClientBundle.INSTANCE.richEditorCss());
071        }
072    }
073
074    @Override
075    protected void onLoad() {
076        super.onLoad();
077        initRichEditor();
078    }
079
080    protected void initRichEditor() {
081        initRichEditor(getElement(), isAirMode(), isDisableDragAndDrop(), getPlaceholder(), getHeight(), extractOptions(getStyleOptions()), extractOptions(getFontOptions()), extractOptions(getColorOptions()), extractOptions(getUndoOptions()), extractOptions(getCkMediaOptions()), extractOptions(getMiscOptions()), extractOptions(getParaOptions()), extractOptions(getHeightOptions()));
082    }
083
084    /**
085     * Intialize the rich editor with custom properties
086     * @param e
087     * @param airMode
088     * @param placeholder
089     * @param height
090     * @param styleOptions
091     * @param fontOptions
092     * @param colorOptions
093     * @param undoOptions
094     * @param ckMediaOptions
095     * @param miscOptions
096     * @param paraOptions
097     * @param heightOptions
098     */
099    protected native void initRichEditor(Element e, boolean airMode, boolean disableDragAndDrop, String placeholder, String height, JsArrayString styleOptions, JsArrayString fontOptions, JsArrayString colorOptions, JsArrayString undoOptions, JsArrayString ckMediaOptions, JsArrayString miscOptions, JsArrayString paraOptions, JsArrayString heightOptions) /*-{
100        var that = this;
101        $wnd.jQuery(document).ready(function() {
102            var toolbar = [
103                ['style', styleOptions],
104                ['para', paraOptions],
105                ['height', heightOptions],
106                ['undo', undoOptions],
107                ['fonts', fontOptions],
108                ['color', colorOptions],
109                ['ckMedia', ckMediaOptions],
110                ['misc', miscOptions],
111            ];
112
113            $wnd.jQuery(e).materialnote({
114                toolbar: toolbar,
115                airMode: airMode,
116                disableDragAndDrop: disableDragAndDrop,
117                followingToolbar: false,
118                placeholder: placeholder,
119                height: height,
120                minHeight: 200,
121                defaultBackColor: '#777',
122                defaultTextColor: '#fff',
123            });
124            // Blur
125            $wnd.jQuery(e).on('materialnote.blur', function() {
126                that.@gwt.material.design.addins.client.richeditor.MaterialRichEditor::fireBlurEvent()();
127            });
128            // Focus
129            $wnd.jQuery(e).on('materialnote.focus', function() {
130                that.@gwt.material.design.addins.client.richeditor.MaterialRichEditor::fireFocusEvent()();
131            });
132            // Key Up
133            $wnd.jQuery(e).on('materialnote.keyup', function() {
134                that.@gwt.material.design.addins.client.richeditor.MaterialRichEditor::fireKeyUpEvent()();
135            });
136            // Key Down
137            $wnd.jQuery(e).on('materialnote.keydown', function() {
138                that.@gwt.material.design.addins.client.richeditor.MaterialRichEditor::fireKeyDownEvent()();
139            });
140            // Paste Event
141            $wnd.jQuery(e).on('materialnote.paste', function() {
142                that.@gwt.material.design.addins.client.richeditor.MaterialRichEditor::firePasteEvent()();
143            });
144            // Change Event
145            $wnd.jQuery(e).on('materialnote.change', function(we, contents, $editable) {
146                that.@gwt.material.design.addins.client.richeditor.MaterialRichEditor::fireChangeEvent(*)(contents);
147            });
148
149        });
150    }-*/;
151
152
153
154    @Override
155    public String getHTML() {
156        return getHTMLCode(getElement());
157    }
158
159    protected native String getHTMLCode(Element e) /*-{
160        return $wnd.jQuery(e).code();
161    }-*/;
162
163    @Override
164    public void setHTML(final String html) {
165        setHTMLCode(getElement(), html);
166    }
167
168    protected native void setHTMLCode(Element e, String html) /*-{
169        $wnd.jQuery(e).code(html);
170    }-*/;
171
172    @Override
173    public String getText() {
174        return getElement().getInnerText();
175    }
176
177    @Override
178    public void setText(String text) {
179        getElement().setInnerText(text);
180    }
181
182    /**
183     * Insert custom text inside the note zone
184     * @param text
185     */
186    public void insertText(String text) {
187        insertText(getElement(), text);
188    }
189
190    /**
191     * Insert custom text inside the note zone with JSNI function
192     * @param e
193     * @param text
194     */
195    protected native void insertText(Element e, String text) /*-{
196        $wnd.jQuery(document).ready(function() {
197            $wnd.jQuery(e).materialnote('insertText', text);
198        });
199    }-*/;
200
201    /**
202     * Insert custom HTML inside the note zone
203     * @param html
204     */
205    public void pasteHTML(String html) {
206        pasteHTML(getElement(), html);
207    }
208
209    /**
210     * Insert custom HTML inside the note zone with JSNI function
211     * @param e
212     * @param html
213     */
214    protected native void pasteHTML(Element e, String html) /*-{
215        $wnd.jQuery(document).ready(function () {
216            $wnd.jQuery(e).materialnote('pasteHTML', html);
217        });
218    }-*/;
219
220    @Override
221    public void clear() {
222        clear(getElement());
223    }
224
225    /**
226     * Clear the note editor with element as param
227     * @param e
228     */
229    protected native void clear(Element e) /*-{
230        $wnd.jQuery(document).ready(function() {
231            $wnd.jQuery(e).materialnote('reset');
232        });
233    }-*/;
234
235    @Override
236    public HandlerRegistration addBlurHandler(final BlurHandler blurHandler) {
237        return addHandler(new BlurHandler() {
238            @Override
239            public void onBlur(BlurEvent event) {
240                if(isEnabled()) {
241                    blurHandler.onBlur(event);
242                }
243            }
244        }, BlurEvent.getType());
245    }
246
247    protected void fireBlurEvent() {
248        fireEvent(new BlurEvent(){});
249    }
250
251    @Override
252    public HandlerRegistration addFocusHandler(final FocusHandler focusHandler) {
253        return addHandler(new FocusHandler() {
254            @Override
255            public void onFocus(FocusEvent event) {
256                if(isEnabled()) {
257                    focusHandler.onFocus(event);
258                }
259            }
260        }, FocusEvent.getType());
261    }
262
263    protected void fireFocusEvent() {
264        fireEvent(new FocusEvent(){});
265    }
266
267    @Override
268    public HandlerRegistration addKeyUpHandler(final KeyUpHandler keyUpHandler) {
269        return addHandler(new KeyUpHandler() {
270            @Override
271            public void onKeyUp(KeyUpEvent event) {
272                if(isEnabled()) {
273                    keyUpHandler.onKeyUp(event);
274                }
275            }
276        }, KeyUpEvent.getType());
277    }
278
279    protected void fireKeyUpEvent() {
280        fireEvent(new KeyUpEvent(){});
281    }
282
283    @Override
284    public HandlerRegistration addKeyDownHandler(final KeyDownHandler keyDownHandler) {
285        return addHandler(new KeyDownHandler() {
286            @Override
287            public void onKeyDown(KeyDownEvent event) {
288                if(isEnabled()) {
289                    keyDownHandler.onKeyDown(event);
290                }
291            }
292        }, KeyDownEvent.getType());
293    }
294
295    protected void fireKeyDownEvent() {
296        fireEvent(new KeyDownEvent() {});
297    }
298
299    @Override
300    public HandlerRegistration addValueChangeHandler(final ValueChangeHandler<String> valueChangeHandler) {
301        return addHandler(new ValueChangeHandler<String>() {
302            @Override
303            public void onValueChange(ValueChangeEvent<String> valueChangeEvent) {
304                if(isEnabled()) {
305                    valueChangeHandler.onValueChange(valueChangeEvent);
306                }
307            }
308        }, ValueChangeEvent.getType());
309    }
310
311    protected void fireChangeEvent(String html) {
312        ValueChangeEvent.fire(MaterialRichEditor.this, html);
313    }
314
315    @Override
316    public HandlerRegistration addPasteHandler(final PasteEvent.PasteHandler handler) {
317        return addHandler(new PasteEvent.PasteHandler() {
318            @Override
319            public void onPaste(PasteEvent event) {
320                if(isEnabled()) {
321                    handler.onPaste(event);
322                }
323            }
324        }, PasteEvent.TYPE);
325    }
326
327    protected void firePasteEvent() {
328        PasteEvent.fire(MaterialRichEditor.this);
329    }
330}