Actualización

main/inc/lib/javascript/wodotexteditor/widgets/aboutDialog.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (C) 2014 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global define, dojo, runtime, webodf */
+
+define("webodf/editor/widgets/aboutDialog", ["dijit/Dialog"], function (Dialog) {
+    "use strict";
+
+    var editorBase = dojo.config && dojo.config.paths && dojo.config.paths["webodf/editor"],
+        kogmbhImageUrl = editorBase + "/images/kogmbh.png";
+
+    runtime.assert(editorBase, "webodf/editor path not defined in dojoConfig");
+
+    return function AboutDialog(callback) {
+        var self = this;
+
+        /*jslint emptyblock: true*/
+        this.onToolDone = function () {};
+        /*jslint emptyblock: false*/
+
+        function init() {
+            // TODO: translation, once the the about text has been decided about
+            var dialog;
+
+            // Dialog
+            dialog = new Dialog({
+                style: "width: 400px",
+                title: "Wodo.TextEditor",
+                autofocus: false,
+                content: "<p>Wodo.TextEditor is an easy to use Javascript-based plugin for webpages. " +
+                            "It provides a stand-alone editor for text documents in the OpenDocument Format. " +
+                            "Done with WebODF.</p>" +
+                            //TODO: add proper link directly to page about the component
+                            "<p>Learn more on the <a href=\"http://webodf.org/\" target=\"_blank\">WebODF website</a>.</p>" +
+                            "<p>Version " + webodf.Version + "</p>" +
+                            "<p>Made by <a href=\"http://kogmbh.com\" target=\"_blank\"><img src=\"" + kogmbhImageUrl + "\" width=\"172\" height=\"40\" alt=\"KO GmbH\" style=\"vertical-align: top;\"></a>.</p>"
+            });
+            dialog.onHide = function () { self.onToolDone(); };
+
+            callback(dialog);
+        }
+
+        init();
+    };
+
+});

main/inc/lib/javascript/wodotexteditor/widgets/annotation.js

@@ -0,0 +1,95 @@
+/**
+ * Copyright (C) 2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global define, require, runtime, gui */
+
+define("webodf/editor/widgets/annotation", [
+    "dijit/form/Button"],
+
+    function (Button) {
+        "use strict";
+
+        var AnnotationControl = function (callback) {
+            var self = this,
+                editorSession,
+                widget = {},
+                addAnnotationButton,
+                annotationController;
+
+
+            addAnnotationButton = new Button({
+                label: runtime.tr('Annotate'),
+                disabled: true,
+                showLabel: false,
+                iconClass: 'dijitIconBookmark',
+                onClick: function () {
+                    if (annotationController) {
+                        annotationController.addAnnotation();
+                        self.onToolDone();
+                    }
+                }
+            });
+
+            widget.children = [addAnnotationButton];
+            widget.startup = function () {
+                widget.children.forEach(function (element) {
+                    element.startup();
+                });
+            };
+
+            widget.placeAt = function (container) {
+                widget.children.forEach(function (element) {
+                    element.placeAt(container);
+                });
+                return widget;
+            };
+
+            function onAnnotatableChanged(isAnnotatable) {
+                addAnnotationButton.setAttribute('disabled', !isAnnotatable);
+            }
+
+            this.setEditorSession = function (session) {
+                if (editorSession) {
+                    annotationController.unsubscribe(gui.AnnotationController.annotatableChanged, onAnnotatableChanged);
+                }
+
+                editorSession = session;
+                if (editorSession) {
+                    annotationController = editorSession.sessionController.getAnnotationController();
+                    annotationController.subscribe(gui.AnnotationController.annotatableChanged, onAnnotatableChanged);
+                    onAnnotatableChanged(annotationController.isAnnotatable());
+                } else {
+                    addAnnotationButton.setAttribute('disabled', true);
+                }
+            };
+
+            /*jslint emptyblock: true*/
+            this.onToolDone = function () {};
+            /*jslint emptyblock: false*/
+
+            callback(widget);
+        };
+
+        return AnnotationControl;
+    });

main/inc/lib/javascript/wodotexteditor/widgets/dialogWidgets/alignmentPane.html

@@ -0,0 +1,59 @@
+<html> 
+	<head>
+	</head> 
+		<body>
+            <div data-dojo-type="dijit/form/Form" id="alignmentPaneForm" data-dojo-id="alignmentPaneForm">
+
+				<h3 text-i18n="Options">Options</h3>
+
+			    <input type="radio" data-dojo-type="dijit/form/RadioButton" name="textAlign" id="radioLeft" checked value="left"/>
+			    <label text-i18n="Left" for="radioLeft"></label> <br/>
+			    <input type="radio" data-dojo-type="dijit/form/RadioButton" name="textAlign" id="radioCenter" value="center"/>
+			    <label text-i18n="Center" for="radioCenter"></label> <br/>
+			    <input type="radio" data-dojo-type="dijit/form/RadioButton" name="textAlign" id="radioRight" value="right"/>
+			    <label text-i18n="Right" for="radioRight"></label> <br/>
+			    <input type="radio" data-dojo-type="dijit/form/RadioButton" name="textAlign" id="radioJustified" value="justify"/>
+			    <label text-i18n="Justified" for="radioJustified"></label> <br/>
+				
+				<h3><span text-i18n="Spacing"></span> <small>(mm)</small></h3>
+
+				<div style = "margin-top: 10px;">
+					<div style = "float: right; margin-right: 200px;">
+						<label text-i18n="Top" for="topMargin"></label>
+						<input data-dojo-type="dijit/form/NumberSpinner" id="topMargin"
+					    value="0"
+					    data-dojo-props="smallDelta:1, constraints:{min:0,max:100}"
+					    name="topMargin"
+					    />
+					</div>
+                    <br><br>
+					<div style = "float: left;">
+						<label text-i18n="Left" for="leftMargin"></label>
+						<input data-dojo-type="dijit/form/NumberSpinner" id="leftMargin"
+					    value="0"
+					    data-dojo-props="smallDelta:1, constraints:{min:0,max:100}"
+					    name="leftMargin"
+					    />
+					</div>
+					<div style = "float: right; margin-right: 50px;">
+					    <label text-i18n="Right" for="rightMargin"></label>
+						<input data-dojo-type="dijit/form/NumberSpinner" id="rightMargin"
+					    value="0"
+					    data-dojo-props="smallDelta:1, constraints:{min:0,max:100}"
+					    name="rightMargin"
+					    />
+					</div>
+					<br/><br>
+					<div style = "float: right; margin-right: 200px;">
+						<label text-i18n="Bottom" for="bottomMargin"></label>
+						<input data-dojo-type="dijit/form/NumberSpinner" id="bottomMargin"
+					    value="0"
+					    data-dojo-props="smallDelta:1, constraints:{min:0,max:100}"
+					    name="bottomMargin"
+					    />
+					</div>
+				</div>
+
+			</div>
+		</body> 
+</html> 

main/inc/lib/javascript/wodotexteditor/widgets/dialogWidgets/alignmentPane.js

@@ -0,0 +1,118 @@
+/**
+ * Copyright (C) 2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global runtime,core,define,require,dijit */
+
+define("webodf/editor/widgets/dialogWidgets/alignmentPane", [
+    "webodf/editor/widgets/dialogWidgets/idMangler"],
+function (IdMangler) {
+    "use strict";
+
+    runtime.loadClass("core.CSSUnits");
+
+    var AlignmentPane = function (callback) {
+        var self = this,
+            idMangler = new IdMangler(),
+            editorSession,
+            contentPane,
+            form;
+
+        this.widget = function () {
+            return contentPane;
+        };
+
+        this.value = function () {
+            return form.get('value');
+        };
+
+        this.setStyle = function (styleName) {
+            var style = editorSession.getParagraphStyleAttributes(styleName)['style:paragraph-properties'],
+                cssUnits = new core.CSSUnits(),
+                s_topMargin,
+                s_bottomMargin,
+                s_leftMargin,
+                s_rightMargin,
+                s_textAlign;
+
+            if (style !== undefined) {
+                s_topMargin = cssUnits.convertMeasure(style['fo:margin-top'], 'mm');
+                s_leftMargin = cssUnits.convertMeasure(style['fo:margin-left'], 'mm');
+                s_rightMargin = cssUnits.convertMeasure(style['fo:margin-right'], 'mm');
+                s_bottomMargin = cssUnits.convertMeasure(style['fo:margin-bottom'], 'mm');
+                s_textAlign = style['fo:text-align'];
+
+                form.attr('value', {
+                    topMargin: isNaN(s_topMargin) ? 0 : s_topMargin,
+                    bottomMargin: isNaN(s_bottomMargin) ? 0 : s_bottomMargin,
+                    leftMargin: isNaN(s_leftMargin) ? 0 : s_leftMargin,
+                    rightMargin: isNaN(s_rightMargin) ? 0 : s_rightMargin,
+                    textAlign: s_textAlign && s_textAlign.length ? s_textAlign : 'left'
+                });
+            } else {
+                form.attr('value', {
+                    topMargin: 0,
+                    bottomMargin: 0,
+                    leftMargin: 0,
+                    rightMargin: 0,
+                    textAlign: 'left'
+                });
+            }
+        };
+
+        this.setEditorSession = function (session) {
+            editorSession = session;
+        };
+
+        function init(cb) {
+            require([
+                "dojo",
+                "dojo/ready",
+                "dijit/layout/ContentPane"],
+                function (dojo, ready, ContentPane) {
+                    var editorBase = dojo.config && dojo.config.paths &&
+                            dojo.config.paths['webodf/editor'];
+                    runtime.assert(editorBase, "webodf/editor path not defined in dojoConfig");
+                    ready(function () {
+                        contentPane = new ContentPane({
+                            title: runtime.tr("Alignment"),
+                            href: editorBase+"/widgets/dialogWidgets/alignmentPane.html",
+                            preload: true,
+                            ioMethod: idMangler.ioMethod
+                        });
+                        contentPane.onLoad = function () {
+                            form = idMangler.byId('alignmentPaneForm');
+                            runtime.translateContent(form.domNode);
+                        };
+                        return cb();
+                    });
+            });
+        }
+
+        init(function () {
+            return callback(self);
+        });
+    };
+
+    return AlignmentPane;
+});

main/inc/lib/javascript/wodotexteditor/widgets/dialogWidgets/editHyperlinkPane.html

@@ -0,0 +1,30 @@
+<html>
+    <head></head>
+    <body>
+        <div data-dojo-type="dijit/form/Form" id="editHyperlinkPaneForm" data-dojo-id="editHyperlinkPaneForm">
+            <div>
+                <label text-i18n="Display Text" for="linkDisplayText"></label><br/>
+                <input data-dojo-type="dijit/form/TextBox" id="linkDisplayText"
+                       value=""
+                       data-dojo-props="trim:true"
+                       name="linkDisplayText" />
+                <input data-dojo-type="dijit/form/TextBox" id="isReadOnlyText"
+                       type ="hidden"
+                       value=""
+                       data-dojo-props="trim:true"
+                       name="isReadOnlyText" />
+            </div>
+            <div>
+                <label text-i18n="URL" for="linkUrl"></label><br/>
+                <input data-dojo-type="dijit/form/TextBox" id="linkUrl"
+                value="http://"
+                data-dojo-props="trim:true, intermediateChanges:true"
+                name="linkUrl" />
+            </div>
+            <div>
+                <button data-dojo-type="dijit/form/Button" id="saveHyperlinkChangeButton" type="submit">Ok</button>
+                <button data-dojo-type="dijit/form/Button" id="cancelHyperlinkChangeButton" data-dojo-id="cancelHyperlinkChangeButton">Cancel</button>
+            </div>
+        </div>
+    </body>
+</html> 

main/inc/lib/javascript/wodotexteditor/widgets/dialogWidgets/editHyperlinkPane.js

@@ -0,0 +1,106 @@
+/**
+ * Copyright (C) 2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global runtime,core,define,require,document,dijit */
+
+define("webodf/editor/widgets/dialogWidgets/editHyperlinkPane", [
+    "dojo",
+    "dijit/layout/ContentPane",
+    "webodf/editor/widgets/dialogWidgets/idMangler"],
+
+    function (dojo, ContentPane, IdMangler) {
+        "use strict";
+
+        runtime.loadClass("core.CSSUnits");
+
+        var EditHyperlinkPane = function () {
+            var self = this,
+                editorBase = dojo.config && dojo.config.paths && dojo.config.paths['webodf/editor'],
+                idMangler = new IdMangler(),
+                contentPane,
+                form,
+                displayTextField,
+                linkField,
+                initialValue;
+
+            runtime.assert(editorBase, "webodf/editor path not defined in dojoConfig");
+
+            function onSave() {
+                if (self.onSave) {
+                    self.onSave();
+                }
+                return false;
+            }
+
+            function onCancel() {
+                form.set('value', initialValue);
+                if (self.onCancel) {
+                    self.onCancel();
+                }
+            }
+
+            contentPane = new ContentPane({
+                title: runtime.tr("editLink"),
+                href: editorBase+"/widgets/dialogWidgets/editHyperlinkPane.html",
+                preload: true,
+                ioMethod: idMangler.ioMethod,
+                onLoad : function () {
+                    form = idMangler.byId('editHyperlinkPaneForm');
+                    form.onSubmit = onSave;
+                    idMangler.byId('cancelHyperlinkChangeButton').onClick = onCancel;
+                    displayTextField = idMangler.byId('linkDisplayText');
+                    linkField = idMangler.byId('linkUrl');
+                    linkField.on("change", function(value) {
+                        displayTextField.set('placeHolder', value);
+                    });
+
+                    runtime.translateContent(form.domNode);
+                    if (initialValue) {
+                        form.set('value', initialValue);
+                        displayTextField.set('disabled', initialValue.isReadOnlyText);
+                        initialValue = undefined;
+                    }
+                    displayTextField.set('placeHolder', linkField.value);
+                }
+            });
+
+            this.widget = function () {
+                return contentPane;
+            };
+
+            this.value = function () {
+                return form && form.get('value');
+            };
+
+            this.set = function (value) {
+                initialValue = value;
+                if (form) {
+                    form.set('value', value);
+                    displayTextField.set('disabled', value.isReadOnlyText);
+                }
+            };
+        };
+
+        return EditHyperlinkPane;
+});

main/inc/lib/javascript/wodotexteditor/widgets/dialogWidgets/fontEffectsPane.html

@@ -0,0 +1,58 @@
+<html> 
+	<head>
+	</head> 
+		<body>
+            <div data-dojo-type="dijit/form/Form" id="fontEffectsPaneForm" data-dojo-id="fontEffectsPaneForm">
+
+				<h3 text-i18n="Style"></h3>
+
+			    <input data-dojo-type="dijit/form/CheckBox" name="textStyle" id="radioBold" value="bold"/>
+			    <label text-i18n="Bold" for="radioBold"></label> <br/>
+			    <input data-dojo-type="dijit/form/CheckBox" name="textStyle" id="radioItalic" value="italic"/>
+			    <label text-i18n="Italic" for="radioItalic"></label> <br/>
+			    <input data-dojo-type="dijit/form/CheckBox" name="textStyle" id="radioUnderline" value="underline"/>
+			    <label text-i18n="Underline" for="radioUnderline"></label> <br/>
+
+			    <h3 text-i18n="Font"></h3>
+                <br>
+			    <div id = 'fontPicker' class="labeledSelect" style = "float: left;">
+                    <label text-i18n="Family" for="fontName"></label>
+                </div>
+
+            	<div style = "float: left; margin-left: 30px;">
+					<label for="fontSize"><span text-i18n="Size"></span> (pt) </label>
+					<input data-dojo-type="dijit/form/NumberSpinner" id="fontSize"
+				    value="12"
+				    data-dojo-props="smallDelta:1, constraints:{min:6,max:96}"
+				    name="fontSize"
+				    />
+				</div>
+				<br /><br />
+
+				<h3 text-i18n="Color"></h3>
+                <br>
+                <input data-dojo-type="dijit/form/TextBox" name = "color" id = "textColorTB" style="display: none;"/>
+                <div data-dojo-type="dijit/form/DropDownButton">
+				    <span><span text-i18n="Text" id = "textColor"></span></span>
+				    <div data-dojo-type="dijit/TooltipDialog">
+                        <div data-dojo-type="dojox.widget.ColorPicker" id="textColorPicker"></div>
+				    </div>
+				</div>
+
+                <input data-dojo-type="dijit/form/TextBox" name = "backgroundColor" id = "backgroundColorTB" style="display: none;"/>
+				<div data-dojo-type="dijit/form/DropDownButton">
+				    <span><span text-i18n="Background" id = "backgroundColor"></span></span>
+				    <div data-dojo-type="dijit/TooltipDialog">
+                        <div data-dojo-type="dojox.widget.ColorPicker" id="backgroundColorPicker"></div>
+					</div>
+				</div>
+
+				<br /> <br />
+
+				<div class="dialogPreviewBox" style="overflow: hidden;">
+					<p id="previewText" style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet diam vestibulum massa malesuada quis dignissim libero blandit. Duis sit amet volutpat nisl.</p>
+				</div>
+
+			</div>
+		</body> 
+</html> 

main/inc/lib/javascript/wodotexteditor/widgets/dialogWidgets/fontEffectsPane.js

@@ -0,0 +1,199 @@
+/**
+ * Copyright (C) 2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global runtime,define,require,document,dijit */
+
+define("webodf/editor/widgets/dialogWidgets/fontEffectsPane", [
+    "webodf/editor/widgets/dialogWidgets/idMangler"],
+function (IdMangler) {
+    "use strict";
+
+    var FontEffectsPane = function (callback) {
+        var self = this,
+            idMangler = new IdMangler(),
+            editorSession,
+            contentPane,
+            form,
+            preview,
+            textColorPicker,
+            backgroundColorPicker,
+            fontPicker;
+
+        this.widget = function () {
+            return contentPane;
+        };
+
+        this.value = function () {
+            var textProperties = form.get('value'),
+                textStyle = textProperties.textStyle;
+
+            textProperties.fontWeight = (textStyle.indexOf('bold') !== -1)
+                                            ? 'bold'
+                                            : 'normal';
+            textProperties.fontStyle = (textStyle.indexOf('italic') !== -1)
+                                            ? 'italic'
+                                            : 'normal';
+            textProperties.underline = (textStyle.indexOf('underline') !== -1)
+                                            ? 'solid'
+                                            : 'none';
+
+            delete textProperties.textStyle;
+            return textProperties;
+        };
+
+        this.setStyle = function (styleName) {
+            var style = editorSession.getParagraphStyleAttributes(styleName)['style:text-properties'],
+                s_bold,
+                s_italic,
+                s_underline,
+                s_fontSize,
+                s_fontName,
+                s_color,
+                s_backgroundColor;
+
+            if (style !== undefined) {
+                s_bold = style['fo:font-weight'];
+                s_italic = style['fo:font-style'];
+                s_underline = style['style:text-underline-style'];
+                s_fontSize = parseFloat(style['fo:font-size']);
+                s_fontName = style['style:font-name'];
+                s_color = style['fo:color'];
+                s_backgroundColor = style['fo:background-color'];
+
+                form.attr('value', {
+                    fontName: s_fontName && s_fontName.length ? s_fontName : 'Arial',
+                    fontSize: isNaN(s_fontSize) ? 12 : s_fontSize,
+                    textStyle: [
+                        s_bold,
+                        s_italic,
+                        s_underline === 'solid' ? 'underline' : undefined
+                    ]
+                });
+                textColorPicker.set('value', s_color && s_color.length ? s_color : '#000000');
+                backgroundColorPicker.set('value', s_backgroundColor && s_backgroundColor.length ? s_backgroundColor : '#ffffff');
+
+            } else {
+                // TODO: Use default style here
+                form.attr('value', {
+                    fontFamily: 'sans-serif',
+                    fontSize: 12,
+                    textStyle: []
+                });
+                textColorPicker.set('value', '#000000');
+                backgroundColorPicker.set('value', '#ffffff');
+            }
+
+        };
+
+        /*jslint unparam: true*/
+        function init(cb) {
+            require([
+                "dojo",
+                "dojo/ready",
+                "dijit/layout/ContentPane",
+                "dojox/widget/ColorPicker", // referenced in fontEffectsPane.html
+                "webodf/editor/widgets/fontPicker"
+            ], function (dojo, ready, ContentPane, ColorPicker, FontPicker) {
+                var editorBase = dojo.config && dojo.config.paths &&
+                            dojo.config.paths['webodf/editor'];
+                runtime.assert(editorBase, "webodf/editor path not defined in dojoConfig");
+                ready(function () {
+                    contentPane = new ContentPane({
+                        title: runtime.tr("Font Effects"),
+                        href: editorBase + "/widgets/dialogWidgets/fontEffectsPane.html",
+                        preload: true,
+                        ioMethod: idMangler.ioMethod
+                    });
+
+                    contentPane.onLoad = function () {
+                        var textColorTB = idMangler.byId('textColorTB'),
+                            backgroundColorTB = idMangler.byId('backgroundColorTB');
+
+                        form = idMangler.byId('fontEffectsPaneForm');
+                        runtime.translateContent(form.domNode);
+
+                        preview = idMangler.getElementById('previewText');
+                        textColorPicker = idMangler.byId('textColorPicker');
+                        backgroundColorPicker = idMangler.byId('backgroundColorPicker');
+
+                        // Bind dojox widgets' values to invisible form elements, for easy parsing
+                        textColorPicker.onChange = function (value) {
+                            textColorTB.set('value', value);
+                        };
+                        backgroundColorPicker.onChange = function (value) {
+                            backgroundColorTB.set('value', value);
+                        };
+
+                        fontPicker = new FontPicker(function (picker) {
+                            picker.widget().startup();
+                            idMangler.getElementById('fontPicker').appendChild(picker.widget().domNode);
+                            picker.widget().name = 'fontName';
+                            picker.setEditorSession(editorSession);
+                        });
+
+                        // Automatically update preview when selections change
+                        form.watch('value', function () {
+                            if (form.value.textStyle.indexOf('bold') !== -1) {
+                                preview.style.fontWeight = 'bold';
+                            } else {
+                                preview.style.fontWeight = 'normal';
+                            }
+                            if (form.value.textStyle.indexOf('italic') !== -1) {
+                                preview.style.fontStyle = 'italic';
+                            } else {
+                                preview.style.fontStyle = 'normal';
+                            }
+                            if (form.value.textStyle.indexOf('underline') !== -1) {
+                                preview.style.textDecoration = 'underline';
+                            } else {
+                                preview.style.textDecoration = 'none';
+                            }
+
+                            preview.style.fontSize = form.value.fontSize + 'pt';
+                            preview.style.fontFamily = fontPicker.getFamily(form.value.fontName);
+                            preview.style.color = form.value.color;
+                            preview.style.backgroundColor = form.value.backgroundColor;
+                        });
+                    };
+
+                    return cb();
+                });
+            });
+        }
+        /*jslint unparam: false*/
+
+        this.setEditorSession = function(session) {
+            editorSession = session;
+            if (fontPicker) {
+                fontPicker.setEditorSession(editorSession);
+            }
+        };
+
+        init(function () {
+            return callback(self);
+        });
+    };
+
+    return FontEffectsPane;
+});

main/inc/lib/javascript/wodotexteditor/widgets/dialogWidgets/idMangler.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright (C) 2014 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global define, document, dojo, dijit */
+
+define("webodf/editor/widgets/dialogWidgets/idMangler", ["dojo", "dijit"], function (dojo, dijit) {
+    "use strict";
+    var instanceCount = 0;
+
+    /**
+     * Mangles html id attributes and associated references so that the same HTML code can be copied into
+     * a page multiple times without identifier clashes. This also provides helper functions for retrieving
+     * these now-mangled identifiers.
+     * @constructor
+     */
+    function IdMangler() {
+        var suffix;
+
+        /**
+         * Returns the supplied text with identifiers mangled
+         * @param {!string} text
+         * @return {!string}
+         */
+        function mangleIds(text) {
+            /*jslint regexp: true*/
+            var newText = text.replace(/((id|for|data-dojo-id)\s*=\s*["'][^"']+)/g, "$1" + suffix);
+            /*jslint regexp: false*/
+            return newText;
+        }
+        this.mangleIds = mangleIds;
+
+        /**
+         * Replacement method for ContentPane's ioMethod
+         * @return {*} See http://dojotoolkit.org/api/?qs=1.9/dojo/_base/xhr#1_9dojo__base_xhr_get for return details
+         */
+        this.ioMethod = function() {
+            var args = Array.prototype.slice.call(arguments, 0);
+            return dojo.xhr.get.apply(dojo, args).then(function(html) {
+                return mangleIds(html);
+            });
+        };
+
+        /**
+         * Replacement for dijit.byId
+         * @param {!string} id
+         * @return {*} See http://dojotoolkit.org/api/?qs=1.9/dojo/_base/xhr#1_9dijit_registry_byId for return details
+         */
+        this.byId = function(id) {
+            return dijit.byId(id + suffix);
+        };
+
+        /**
+         * Replacement for document.getElementById
+         * @param {!string} id
+         * @return {HTMLElement|*}
+         */
+        this.getElementById = function(id) {
+            return document.getElementById(id + suffix);
+        };
+
+        function init() {
+            suffix = "_" + instanceCount;
+            instanceCount += 1;
+        }
+        init();
+    }
+
+    return IdMangler;
+});

main/inc/lib/javascript/wodotexteditor/widgets/editHyperlinks.js

@@ -0,0 +1,202 @@
+/**
+ * Copyright (C) 2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global define, require, document, odf, runtime, core, gui */
+
+define("webodf/editor/widgets/editHyperlinks", [
+    "webodf/editor/EditorSession",
+    "webodf/editor/widgets/dialogWidgets/editHyperlinkPane",
+    "dijit/form/Button",
+    "dijit/form/DropDownButton",
+    "dijit/TooltipDialog"],
+
+    function (EditorSession, EditHyperlinkPane, Button, DropDownButton, TooltipDialog) {
+        "use strict";
+
+        runtime.loadClass("odf.OdfUtils");
+        runtime.loadClass("odf.TextSerializer");
+        runtime.loadClass("core.EventSubscriptions");
+
+        var EditHyperlinks = function (callback) {
+            var self = this,
+                widget = {},
+                editorSession,
+                hyperlinkController,
+                linkEditorContent,
+                editHyperlinkButton,
+                removeHyperlinkButton,
+                odfUtils = odf.OdfUtils,
+                textSerializer = new odf.TextSerializer(),
+                eventSubscriptions = new core.EventSubscriptions(),
+                dialog;
+
+            function updateLinkEditorContent() {
+                var selection = editorSession.getSelectedRange(),
+                    linksInSelection = editorSession.getSelectedHyperlinks(),
+                    linkTarget = linksInSelection[0] ? odfUtils.getHyperlinkTarget(linksInSelection[0]) : "http://";
+
+                if (selection && selection.collapsed && linksInSelection.length === 1) {
+                    // Selection is collapsed within a single hyperlink. Assume user is modifying the hyperlink
+                    linkEditorContent.set({
+                        linkDisplayText: textSerializer.writeToString(linksInSelection[0]),
+                        linkUrl: linkTarget,
+                        isReadOnlyText: true
+                    });
+                } else if (selection && !selection.collapsed) {
+                    // User has selected part of a hyperlink or a block of text. Assume user is attempting to modify the
+                    // existing hyperlink, or wants to convert the selection into a hyperlink
+                    linkEditorContent.set({
+                        // TODO Improve performance by rewriting to not clone the range contents
+                        linkDisplayText: textSerializer.writeToString(selection.cloneContents()),
+                        linkUrl: linkTarget,
+                        isReadOnlyText: true
+                    });
+                } else {
+                    // Selection is collapsed and is not in an existing hyperlink
+                    linkEditorContent.set({
+                        linkDisplayText: "",
+                        linkUrl: linkTarget,
+                        isReadOnlyText: false
+                    });
+                }
+            }
+
+            function updateHyperlinkButtons() {
+                var controllerEnabled = hyperlinkController && hyperlinkController.isEnabled(),
+                    linksInSelection;
+
+                // Enable to disable all widgets initially
+                widget.children.forEach(function (element) {
+                    element.set('disabled', controllerEnabled !== true, false);
+                });
+                if (controllerEnabled) {
+                    // Specifically enable the remove hyperlink button only if there are links in the current selection
+                    linksInSelection = editorSession.getSelectedHyperlinks();
+                    removeHyperlinkButton.set('disabled', linksInSelection.length === 0, false);
+                }
+            }
+
+            function updateSelectedLink(hyperlinkData) {
+                var selection = editorSession.getSelectedRange(),
+                    selectionController = editorSession.sessionController.getSelectionController(),
+                    selectedLinkRange,
+                    linksInSelection = editorSession.getSelectedHyperlinks();
+
+                if (hyperlinkData.isReadOnlyText === "true") {
+                    if (selection && selection.collapsed && linksInSelection.length === 1) {
+                        // Editing the single link the cursor is currently within
+                        selectedLinkRange = selection.cloneRange();
+                        selectedLinkRange.selectNode(linksInSelection[0]);
+                        selectionController.selectRange(selectedLinkRange, true);
+                    }
+                    hyperlinkController.removeHyperlinks();
+                    hyperlinkController.addHyperlink(hyperlinkData.linkUrl);
+                } else {
+                    hyperlinkController.addHyperlink(hyperlinkData.linkUrl, hyperlinkData.linkDisplayText);
+                    linksInSelection = editorSession.getSelectedHyperlinks();
+                    selectedLinkRange = selection.cloneRange();
+                    selectedLinkRange.selectNode(linksInSelection[0]);
+                    selectionController.selectRange(selectedLinkRange, true);
+                }
+            }
+
+            this.setEditorSession = function (session) {
+                eventSubscriptions.unsubscribeAll();
+                hyperlinkController = undefined;
+                editorSession = session;
+                if (editorSession) {
+                    hyperlinkController = editorSession.sessionController.getHyperlinkController();
+                    eventSubscriptions.addFrameSubscription(editorSession, EditorSession.signalCursorMoved, updateHyperlinkButtons);
+                    eventSubscriptions.addFrameSubscription(editorSession, EditorSession.signalParagraphChanged, updateHyperlinkButtons);
+                    eventSubscriptions.addFrameSubscription(editorSession, EditorSession.signalParagraphStyleModified, updateHyperlinkButtons);
+                    eventSubscriptions.addSubscription(hyperlinkController, gui.HyperlinkController.enabledChanged, updateHyperlinkButtons);
+                }
+                updateHyperlinkButtons();
+            };
+
+            /*jslint emptyblock: true*/
+            this.onToolDone = function () {};
+            /*jslint emptyblock: false*/
+
+            function init() {
+                textSerializer.filter = new odf.OdfNodeFilter();
+
+                linkEditorContent = new EditHyperlinkPane();
+                dialog = new TooltipDialog({
+                    title: runtime.tr("Edit link"),
+                    content: linkEditorContent.widget(),
+                    onShow: updateLinkEditorContent
+                });
+
+                editHyperlinkButton = new DropDownButton({
+                    label: runtime.tr('Edit link'),
+                    showLabel: false,
+                    disabled: true,
+                    iconClass: 'dijitEditorIcon dijitEditorIconCreateLink',
+                    dropDown: dialog
+                });
+
+                removeHyperlinkButton = new Button({
+                    label: runtime.tr('Remove link'),
+                    showLabel: false,
+                    disabled: true,
+                    iconClass: 'dijitEditorIcon dijitEditorIconUnlink',
+                    onClick: function () {
+                        hyperlinkController.removeHyperlinks();
+                        self.onToolDone();
+                    }
+                });
+
+                linkEditorContent.onSave = function () {
+                    var hyperlinkData = linkEditorContent.value();
+                    editHyperlinkButton.closeDropDown(false);
+                    updateSelectedLink(hyperlinkData);
+                    self.onToolDone();
+                };
+
+                linkEditorContent.onCancel = function () {
+                    editHyperlinkButton.closeDropDown(false);
+                    self.onToolDone();
+                };
+
+                widget.children = [editHyperlinkButton, removeHyperlinkButton];
+                widget.startup = function () {
+                    widget.children.forEach(function (element) {
+                        element.startup();
+                    });
+                };
+
+                widget.placeAt = function (container) {
+                    widget.children.forEach(function (element) {
+                        element.placeAt(container);
+                    });
+                    return widget;
+                };
+                callback(widget);
+            }
+            init();
+        };
+
+        return EditHyperlinks;
+});

main/inc/lib/javascript/wodotexteditor/widgets/fontPicker.js

@@ -0,0 +1,133 @@
+/**
+ * Copyright (C) 2012 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+/*global define,require,document */
+define("webodf/editor/widgets/fontPicker", [
+    "dijit/form/Select",
+    "dojox/html/entities"],
+
+    function (Select, htmlEntities) {
+        "use strict";
+
+        /**
+         * @constructor
+         */
+        var FontPicker = function (callback) {
+            var self = this,
+                editorSession,
+                select,
+                documentFonts = [];
+
+            select = new Select({
+                name: 'FontPicker',
+                disabled: true,
+                maxHeight: 200,
+                style: {
+                    width: '150px'
+                }
+            });
+            // prevent browser translation service messing up ids
+            select.domNode.setAttribute("translate", "no");
+            select.domNode.classList.add("notranslate");
+            select.dropDown.domNode.setAttribute("translate", "no");
+            select.dropDown.domNode.classList.add("notranslate");
+
+            this.widget = function () {
+                return select;
+            };
+
+            this.value = function () {
+                return select.get('value');
+            };
+
+            this.setValue = function (value) {
+                select.set('value', value);
+            };
+
+            /**
+             * Returns the font family for a given font name. If unavailable,
+             * return the name itself (e.g. editor fonts won't have a name-family separation
+             * @param {!string} name
+             * @return {!string}
+             */
+            this.getFamily = function (name) {
+                var i;
+                for (i = 0; i < documentFonts.length; i += 1) {
+                    if ((documentFonts[i].name === name) && documentFonts[i].family) {
+                        return documentFonts[i].family;
+                    }
+                }
+                return name;
+            };
+            // events
+            this.onAdd = null;
+            this.onRemove = null;
+
+            function populateFonts() {
+                var i,
+                    name,
+                    family,
+                    editorFonts = editorSession ? editorSession.availableFonts : [],
+                    selectionList = [];
+
+                documentFonts = editorSession ? editorSession.getDeclaredFonts() : [];
+
+                // First populate the fonts used in the document
+                for (i = 0; i < documentFonts.length; i += 1) {
+                    name = documentFonts[i].name;
+                    family = documentFonts[i].family || name;
+                    selectionList.push({
+                        label: '<span style="font-family: ' + htmlEntities.encode(family) + ';">' + htmlEntities.encode(name)+ '</span>',
+                        value: name
+                    });
+                }
+                if (editorFonts.length) {
+                    // Then add a separator
+                    selectionList.push({
+                        type: 'separator'
+                    });
+                }
+                // Lastly populate the fonts provided by the editor
+                for (i = 0; i < editorFonts.length; i += 1) {
+                    selectionList.push({
+                        label: '<span style="font-family: ' + htmlEntities.encode(editorFonts[i]) + ';">' + htmlEntities.encode(editorFonts[i]) + '</span>',
+                        value: editorFonts[i]
+                    });
+                }
+
+                select.removeOption(select.getOptions());
+                select.addOption(selectionList);
+            }
+
+            this.setEditorSession = function(session) {
+                editorSession = session;
+                populateFonts();
+                select.setAttribute('disabled', !editorSession);
+            };
+            populateFonts();
+
+            callback(self);
+        };
+
+        return FontPicker;
+});

main/inc/lib/javascript/wodotexteditor/widgets/imageInserter.js

@@ -0,0 +1,179 @@
+/**
+ * Copyright (C) 2012-2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global define, require, document, Image, FileReader, window, runtime, ops, gui */
+
+define("webodf/editor/widgets/imageInserter", [
+    "dijit/form/Button",
+    "webodf/editor/EditorSession"],
+
+    function (Button, EditorSession) {
+        "use strict";
+
+        var ImageInserter = function (callback) {
+            var self = this,
+                widget = {},
+                insertImageButton,
+                editorSession,
+                fileLoader,
+                textController,
+                imageController;
+
+            /**
+             *
+             * @param {!string} mimetype
+             * @param {!string} content base64 encoded string
+             * @param {!number} width
+             * @param {!number} height
+             */
+            function insertImage(mimetype, content, width, height) {
+                textController.removeCurrentSelection();
+                imageController.insertImage(mimetype, content, width, height);
+            }
+
+            /**
+             * @param {!string} content  as datauri
+             * @param {!string} mimetype
+             * @return {undefined}
+             */
+            function insertImageOnceLoaded(mimetype, content) {
+                var hiddenImage = new Image();
+
+                hiddenImage.style.position = "absolute";
+                hiddenImage.style.left = "-99999px";
+                document.body.appendChild(hiddenImage);
+                hiddenImage.onload = function () {
+                    // remove the data:image/jpg;base64, bit
+                    content = content.substring(content.indexOf(",") + 1);
+                    insertImage(mimetype, content, hiddenImage.width, hiddenImage.height);
+                    // clean up
+                    document.body.removeChild(hiddenImage);
+                    self.onToolDone();
+                };
+                hiddenImage.src = content;
+            }
+
+            function fileSelectHandler(evt) {
+                var file, files, reader;
+                files = (evt.target && evt.target.files) || (evt.dataTransfer && evt.dataTransfer.files);
+                if (files && files.length === 1) {
+                    file = files[0];
+                    reader = new FileReader();
+                    reader.onloadend = function () {
+                        if (reader.readyState === 2) {
+                            insertImageOnceLoaded(file.type, reader.result);
+                        } else {
+                            runtime.log("Image could not be loaded");
+                            self.onToolDone();
+                        }
+                    };
+                    reader.readAsDataURL(file);
+                }
+            }
+
+            function createFileLoader() {
+                var form = document.createElement("form"),
+                    input = document.createElement("input");
+                form.appendChild(input);
+                form.id = "imageForm";
+                form.style.display = "none";
+                input.id = "imageLoader";
+                input.setAttribute("type", "file");
+                input.setAttribute("accept", "image/*");
+                input.addEventListener("change", fileSelectHandler, false);
+                document.body.appendChild(form);
+                return {input: input, form: form};
+            }
+
+            insertImageButton = new Button({
+                label: runtime.tr("Insert Image"),
+                disabled: true,
+                showLabel: false,
+                iconClass: "dijitEditorIcon dijitEditorIconInsertImage",
+                onClick: function () {
+                    if (!fileLoader) {
+                        fileLoader = createFileLoader();
+                    }
+                    fileLoader.form.reset();
+                    fileLoader.input.click();
+                }
+            });
+
+            widget.children = [insertImageButton];
+            widget.startup = function () {
+                widget.children.forEach(function (element) {
+                    element.startup();
+                });
+            };
+
+            widget.placeAt = function (container) {
+                widget.children.forEach(function (element) {
+                    element.placeAt(container);
+                });
+                return widget;
+            };
+
+            function enableButtons(isEnabled) {
+                widget.children.forEach(function (element) {
+                    element.setAttribute('disabled', !isEnabled);
+                });
+            }
+            function handleCursorMoved(cursor) {
+                if (imageController.isEnabled()) {
+                    var disabled = cursor.getSelectionType() === ops.OdtCursor.RegionSelection;
+                    // LO/AOO pops up the picture/frame option dialog if image is selected when pressing the button
+                    // Since we only support inline images, disable the button for now.
+                    insertImageButton.setAttribute('disabled', disabled);
+                }
+            }
+
+            this.setEditorSession = function (session) {
+                if (editorSession) {
+                    editorSession.unsubscribe(EditorSession.signalCursorMoved, handleCursorMoved);
+                    imageController.unsubscribe(gui.ImageController.enabledChanged, enableButtons);
+                }
+
+                editorSession = session;
+                if (editorSession) {
+                    textController = editorSession.sessionController.getTextController();
+                    imageController = editorSession.sessionController.getImageController();
+
+                    editorSession.subscribe(EditorSession.signalCursorMoved, handleCursorMoved);
+                    imageController.subscribe(gui.ImageController.enabledChanged, enableButtons);
+
+                    enableButtons(imageController.isEnabled());
+                } else {
+                    enableButtons(false);
+                }
+            };
+
+            /*jslint emptyblock: true*/
+            this.onToolDone = function () {};
+            /*jslint emptyblock: false*/
+
+            callback(widget);
+        };
+
+        return ImageInserter;
+    });

main/inc/lib/javascript/wodotexteditor/widgets/paragraphAlignment.js

@@ -0,0 +1,194 @@
+/**
+ * Copyright (C) 2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global define, require, ops, gui, runtime */
+
+define("webodf/editor/widgets/paragraphAlignment", [
+    "dijit/form/ToggleButton",
+    "dijit/form/Button",
+    "webodf/editor/EditorSession"],
+
+    function (ToggleButton, Button) {
+        "use strict";
+
+        var ParagraphAlignment = function (callback) {
+            var self = this,
+                editorSession,
+                widget = {},
+                directFormattingController,
+                justifyLeft,
+                justifyCenter,
+                justifyRight,
+                justifyFull,
+                indent,
+                outdent;
+
+            justifyLeft = new ToggleButton({
+                label: runtime.tr('Align Left'),
+                disabled: true,
+                showLabel: false,
+                checked: false,
+                iconClass: "dijitEditorIcon dijitEditorIconJustifyLeft",
+                onChange: function () {
+                    directFormattingController.alignParagraphLeft();
+                    self.onToolDone();
+                }
+            });
+
+            justifyCenter = new ToggleButton({
+                label: runtime.tr('Center'),
+                disabled: true,
+                showLabel: false,
+                checked: false,
+                iconClass: "dijitEditorIcon dijitEditorIconJustifyCenter",
+                onChange: function () {
+                    directFormattingController.alignParagraphCenter();
+                    self.onToolDone();
+                }
+            });
+
+            justifyRight = new ToggleButton({
+                label: runtime.tr('Align Right'),
+                disabled: true,
+                showLabel: false,
+                checked: false,
+                iconClass: "dijitEditorIcon dijitEditorIconJustifyRight",
+                onChange: function () {
+                    directFormattingController.alignParagraphRight();
+                    self.onToolDone();
+                }
+            });
+
+            justifyFull = new ToggleButton({
+                label: runtime.tr('Justify'),
+                disabled: true,
+                showLabel: false,
+                checked: false,
+                iconClass: "dijitEditorIcon dijitEditorIconJustifyFull",
+                onChange: function () {
+                    directFormattingController.alignParagraphJustified();
+                    self.onToolDone();
+                }
+            });
+
+            outdent = new Button({
+                label: runtime.tr('Decrease Indent'),
+                disabled: true,
+                showLabel: false,
+                iconClass: "dijitEditorIcon dijitEditorIconOutdent",
+                onClick: function () {
+                    directFormattingController.outdent();
+                    self.onToolDone();
+                }
+            });
+
+            indent = new Button({
+                label: runtime.tr('Increase Indent'),
+                disabled: true,
+                showLabel: false,
+                iconClass: "dijitEditorIcon dijitEditorIconIndent",
+                onClick: function () {
+                    directFormattingController.indent();
+                    self.onToolDone();
+                }
+            });
+
+            widget.children = [justifyLeft,
+                justifyCenter,
+                justifyRight,
+                justifyFull,
+                outdent,
+                indent ];
+
+            widget.startup = function () {
+                widget.children.forEach(function (element) {
+                    element.startup();
+                });
+            };
+
+            widget.placeAt = function (container) {
+                widget.children.forEach(function (element) {
+                    element.placeAt(container);
+                });
+                return widget;
+            };
+
+            function updateStyleButtons(changes) {
+                var buttons = {
+                    isAlignedLeft: justifyLeft,
+                    isAlignedCenter: justifyCenter,
+                    isAlignedRight: justifyRight,
+                    isAlignedJustified: justifyFull
+                };
+
+                Object.keys(changes).forEach(function (key) {
+                    var button = buttons[key];
+                    if (button) {
+                        // The 3rd parameter to set(...) is false to avoid firing onChange when setting the value programmatically.
+                        button.set('checked', changes[key], false);
+                    }
+                });
+            }
+
+            function enableStyleButtons(enabledFeatures) {
+                widget.children.forEach(function (element) {
+                    element.setAttribute('disabled', !enabledFeatures.directParagraphStyling);
+                });
+            }
+
+            this.setEditorSession = function (session) {
+                if (editorSession) {
+                    directFormattingController.unsubscribe(gui.DirectFormattingController.paragraphStylingChanged, updateStyleButtons);
+                    directFormattingController.unsubscribe(gui.DirectFormattingController.enabledChanged, enableStyleButtons);
+                }
+
+                editorSession = session;
+                if (editorSession) {
+                    directFormattingController = editorSession.sessionController.getDirectFormattingController();
+
+                    directFormattingController.subscribe(gui.DirectFormattingController.paragraphStylingChanged, updateStyleButtons);
+                    directFormattingController.subscribe(gui.DirectFormattingController.enabledChanged, enableStyleButtons);
+
+                    enableStyleButtons(directFormattingController.enabledFeatures());
+                } else {
+                    enableStyleButtons({directParagraphStyling: false});
+                }
+
+                updateStyleButtons({
+                    isAlignedLeft:      editorSession ? directFormattingController.isAlignedLeft() :      false,
+                    isAlignedCenter:    editorSession ? directFormattingController.isAlignedCenter() :    false,
+                    isAlignedRight:     editorSession ? directFormattingController.isAlignedRight() :     false,
+                    isAlignedJustified: editorSession ? directFormattingController.isAlignedJustified() : false
+                });
+            };
+
+            /*jslint emptyblock: true*/
+            this.onToolDone = function () {};
+            /*jslint emptyblock: false*/
+
+            callback(widget);
+        };
+
+        return ParagraphAlignment;
+    });

main/inc/lib/javascript/wodotexteditor/widgets/paragraphStyles.js

@@ -0,0 +1,185 @@
+/**
+ * Copyright (C) 2012-2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global define, require, runtime, ops */
+
+define("webodf/editor/widgets/paragraphStyles", [
+    "dijit/form/Select",
+    "dojox/html/entities",
+    "webodf/editor/EditorSession"],
+
+    function (Select, htmlEntities, EditorSession) {
+    "use strict";
+
+    /**
+     * @constructor
+     */
+    var ParagraphStyles = function (callback) {
+        var self = this,
+            editorSession,
+            select,
+            defaultStyleUIId = ":default";
+
+        this.widget = function () {
+            return select;
+        };
+
+        /*
+         * In this widget, we name the default style
+         * (which is referred to as "" in webodf) as
+         * ":default". The ":" is disallowed in an NCName, so this
+         * avoids clashes with other styles.
+         */
+
+        this.value = function () {
+            var value = select.get('value');
+            if (value === defaultStyleUIId) {
+                value = "";
+            }
+            return value;
+        };
+
+        this.setValue = function (value) {
+            if (value === "") {
+                value = defaultStyleUIId;
+            }
+            select.set('value', value, false);
+        };
+
+        // events
+        this.onAdd = null;
+        this.onRemove = null;
+        /*jslint emptyblock: true*/
+        this.onChange = function () {};
+        /*jslint emptyblock: false*/
+
+        function populateStyles() {
+            var i, selectionList, availableStyles;
+
+            // Populate the Default Style always 
+            selectionList = [{
+                label: runtime.tr("Default Style"),
+                value: defaultStyleUIId
+            }];
+            availableStyles = editorSession ? editorSession.getAvailableParagraphStyles() : [];
+
+            for (i = 0; i < availableStyles.length; i += 1) {
+                selectionList.push({
+                    label: htmlEntities.encode(availableStyles[i].displayName) || htmlEntities.encode(availableStyles[i].name),
+                    value: availableStyles[i].name
+                });
+            }
+
+            select.removeOption(select.getOptions());
+            select.addOption(selectionList);
+        }
+
+        function addStyle(styleInfo) {
+            var stylens = "urn:oasis:names:tc:opendocument:xmlns:style:1.0",
+                newStyleElement;
+
+            if (styleInfo.family !== 'paragraph') {
+                return;
+            }
+
+            newStyleElement = editorSession.getParagraphStyleElement(styleInfo.name);
+            select.addOption({
+                label: htmlEntities.encode(newStyleElement.getAttributeNS(stylens, 'display-name')),
+                value: styleInfo.name
+            });
+
+            if (self.onAdd) {
+                self.onAdd(styleInfo.name);
+            }
+        }
+
+        function removeStyle(styleInfo) {
+            if (styleInfo.family !== 'paragraph') {
+                return;
+            }
+
+            select.removeOption(styleInfo.name);
+
+            if (self.onRemove) {
+                self.onRemove(styleInfo.name);
+            }
+        }
+
+        function handleCursorMoved(cursor) {
+            var disabled = cursor.getSelectionType() === ops.OdtCursor.RegionSelection;
+            select.setAttribute('disabled', disabled);
+        }
+
+        this.setEditorSession = function(session) {
+            if (editorSession) {
+                editorSession.unsubscribe(EditorSession.signalCommonStyleCreated, addStyle);
+                editorSession.unsubscribe(EditorSession.signalCommonStyleDeleted, removeStyle);
+                editorSession.unsubscribe(EditorSession.signalCursorMoved, handleCursorMoved);
+            }
+
+            editorSession = session;
+            if (editorSession) {
+                editorSession.subscribe(EditorSession.signalCommonStyleCreated, addStyle);
+                editorSession.subscribe(EditorSession.signalCommonStyleDeleted, removeStyle);
+                editorSession.subscribe(EditorSession.signalCursorMoved, handleCursorMoved);
+            }
+            select.setAttribute('disabled', !editorSession);
+
+            populateStyles();
+        };
+
+        // init
+        function init() {
+            select = new Select({
+                name: 'ParagraphStyles',
+                maxHeight: 200,
+                style: {
+                    width: '100px'
+                }
+            });
+            // prevent browser translation service messing up ids
+            select.domNode.setAttribute("translate", "no");
+            select.domNode.classList.add("notranslate");
+            select.dropDown.domNode.setAttribute("translate", "no");
+            select.dropDown.domNode.classList.add("notranslate");
+
+            populateStyles();
+
+            // Call ParagraphStyles's onChange handler every time
+            // the select's onchange is called, and pass the value
+            // as reported by ParagraphStyles.value(), because we do not
+            // want to expose the internal naming like ":default" outside this
+            // class.
+            select.onChange = function () {
+                self.onChange(self.value());
+            };
+
+            return callback(self);
+        }
+
+        init();
+    };
+
+    return ParagraphStyles;
+});

main/inc/lib/javascript/wodotexteditor/widgets/paragraphStylesDialog.js

@@ -0,0 +1,358 @@
+/**
+ * Copyright (C) 2012-2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global define, require, dojo, dijit, runtime */
+
+define("webodf/editor/widgets/paragraphStylesDialog", [
+    "webodf/editor/widgets/dialogWidgets/idMangler"],
+function (IdMangler) {
+    "use strict";
+    return function ParagraphStylesDialog(callback) {
+        var self = this,
+            idMangler = new IdMangler(),
+            editorSession,
+            dialog,
+            stylePicker, alignmentPane, fontEffectsPane;
+
+        function makeWidget(callback) {
+            require([
+                "dijit/Dialog",
+                "dijit/TooltipDialog",
+                "dijit/popup",
+                "dijit/layout/LayoutContainer",
+                "dijit/layout/TabContainer",
+                "dijit/layout/ContentPane",
+                "dijit/form/Button",
+                "dijit/form/DropDownButton"], function (Dialog, TooltipDialog, popup, LayoutContainer, TabContainer, ContentPane, Button, DropDownButton) {
+                var tr = runtime.tr,
+                    mainLayoutContainer,
+                    tabContainer,
+                    topBar,
+                    actionBar,
+                    cloneButton,
+                    deleteButton,
+                    cloneTooltip,
+                    cloneDropDown,
+                    /**
+                    * Mapping of the properties from edit pane properties to the attributes of style:text-properties
+                    * @const@type{Array.<!{propertyName:string,attributeName:string,unit:string}>}
+                    */
+                    textPropertyMapping = [{
+                        propertyName:  'fontSize',
+                        attributeName: 'fo:font-size',
+                        unit:          'pt'
+                    }, {
+                        propertyName:  'fontName',
+                        attributeName: 'style:font-name'
+                    }, {
+                        propertyName:  'color',
+                        attributeName: 'fo:color'
+                    }, {
+                        propertyName:  'backgroundColor',
+                        attributeName: 'fo:background-color'
+                    }, {
+                        propertyName:  'fontWeight',
+                        attributeName: 'fo:font-weight'
+                    }, {
+                        propertyName:  'fontStyle',
+                        attributeName: 'fo:font-style'
+                    }, {
+                        propertyName:  'underline',
+                        attributeName: 'style:text-underline-style'
+                    }, {
+                        propertyName:  'strikethrough',
+                        attributeName: 'style:text-line-through-style'
+                    }],
+                    /**
+                    * Mapping of the properties from edit pane properties to the attributes of style:paragraph-properties
+                    * @const@type{Array.<!{propertyName:string,attributeName:string,unit:string}>}
+                    */
+                    paragraphPropertyMapping = [{
+                        propertyName:  'topMargin',
+                        attributeName: 'fo:margin-top',
+                        unit:          'mm'
+                    }, {
+                        propertyName:  'bottomMargin',
+                        attributeName: 'fo:margin-bottom',
+                        unit:          'mm'
+                    }, {
+                        propertyName:  'leftMargin',
+                        attributeName: 'fo:margin-left',
+                        unit:          'mm'
+                    }, {
+                        propertyName:  'rightMargin',
+                        attributeName: 'fo:margin-right',
+                        unit:          'mm'
+                    }, {
+                        propertyName:  'textAlign',
+                        attributeName: 'fo:text-align'
+                    }],
+                    originalFontEffectsPaneValue,
+                    originalAlignmentPaneValue;
+
+                /**
+                * Sets attributes of a node by the properties of the object properties,
+                * based on the mapping defined in propertyMapping.
+                * @param {!Object} properties
+                * @param {!Array.<!{propertyName:string,attributeName:string,unit:string}>} propertyMapping
+                * @return {!Object}
+                */
+                function mappedProperties(properties, propertyMapping) {
+                    var i, m, value,
+                        result = {};
+                    for (i = 0; i < propertyMapping.length; i += 1) {
+                        m = propertyMapping[i];
+                        value = properties[m.propertyName];
+                        // Set a value as the attribute of a node, if that value is defined.
+                        // If there is a unit specified, it is suffixed to the value.
+                        if (value !== undefined) {
+                            result[m.attributeName] = (m.unit !== undefined) ? value + m.unit : value;
+                        }
+                    }
+                    return result;
+                }
+
+                /**
+                 * Returns an flat object containing only the key-value mappings
+                 * from the 'new' flat object which are different from the 'old' object's.
+                 * @param {!Object} oldProperties
+                 * @param {!Object} newProperties
+                 * @return {!Object}
+                 */
+                function updatedProperties(oldProperties, newProperties) {
+                    var properties = {};
+                    Object.keys(newProperties).forEach(function (key) {
+                        if (newProperties[key] !== oldProperties[key]) {
+                            properties[key] = newProperties[key];
+                        }
+                    });
+                    return properties;
+                }
+
+                function accept() {
+                    editorSession.updateParagraphStyle(stylePicker.value(), {
+                        "style:paragraph-properties": mappedProperties(
+                                                        updatedProperties(originalAlignmentPaneValue, alignmentPane.value()),
+                                                        paragraphPropertyMapping
+                                                     ),
+                        "style:text-properties": mappedProperties(
+                                                    updatedProperties(originalFontEffectsPaneValue, fontEffectsPane.value()),
+                                                    textPropertyMapping
+                                                 )
+                    });
+
+                    dialog.hide();
+                }
+
+                function cancel() {
+                    dialog.hide();
+                }
+
+                function setStyle(value) {
+                    if (value !== stylePicker.value()) {
+                        stylePicker.setValue(value);
+                    }
+
+                    alignmentPane.setStyle(value);
+                    fontEffectsPane.setStyle(value);
+                    originalAlignmentPaneValue = alignmentPane.value();
+                    originalFontEffectsPaneValue = fontEffectsPane.value();
+
+                    // If it is a default (nameless) style or is used, make it undeletable.
+                    if (value === "" || editorSession.isStyleUsed(editorSession.getParagraphStyleElement(value))) {
+                        deleteButton.domNode.style.display = 'none';
+                    } else {
+                        deleteButton.domNode.style.display = 'block';
+                    }
+                }
+
+                /**
+                * Creates and enqueues a paragraph-style cloning operation.
+                * Remembers the id of the created style in newStyleName, so the
+                * style picker can be set to it, once the operation has been applied.
+                * @param {!string} styleName id of the style to clone
+                * @param {!string} newStyleDisplayName display name of the new style
+                */
+                function cloneStyle(styleName, newStyleDisplayName) {
+                    var newStyleName = editorSession.cloneParagraphStyle(styleName, newStyleDisplayName);
+                    setStyle(newStyleName);
+                }
+
+                function deleteStyle(styleName) {
+                    editorSession.deleteStyle(styleName);
+                }
+                // Dialog
+                dialog = new Dialog({
+                    title: tr("Paragraph Styles")
+                });
+
+                mainLayoutContainer = new LayoutContainer({
+                    style: "height: 520px; width: 450px;"
+                });
+
+                topBar = new ContentPane({
+                    region: "top",
+                    style: "margin: 0; padding: 0"
+                });
+                mainLayoutContainer.addChild(topBar);
+
+                cloneTooltip = new TooltipDialog({
+                    content: idMangler.mangleIds(
+                        '<h2 style="margin: 0;">' + tr("Clone this Style") + '</h2><br/>' +
+                        '<label for="name">' + tr("New Name:") + '</label> <input data-dojo-type="dijit/form/TextBox" id="name" name="name"><br/><br/>'),
+                    style: "width: 300px;"
+                });
+                cloneButton = new Button({
+                    label: tr("Create"),
+                    onClick: function () {
+                        cloneStyle(stylePicker.value(), cloneTooltip.get('value').name);
+                        cloneTooltip.reset();
+                        popup.close(cloneTooltip);
+                    }
+                });
+                cloneTooltip.addChild(cloneButton);
+                cloneDropDown = new DropDownButton({
+                    label: tr("Clone"),
+                    showLabel: false,
+                    iconClass: 'dijitEditorIcon dijitEditorIconCopy',
+                    dropDown: cloneTooltip,
+                    style: "float: right; margin-bottom: 5px;"
+                });
+                topBar.addChild(cloneDropDown, 1);
+
+                deleteButton = new Button({
+                    label: tr("Delete"),
+                    showLabel: false,
+                    iconClass: 'dijitEditorIcon dijitEditorIconDelete',
+                    style: "float: right; margin-bottom: 5px;",
+                    onClick: function () {
+                        deleteStyle(stylePicker.value());
+                    }
+                });
+                topBar.addChild(deleteButton, 2);
+
+                // Tab Container
+                tabContainer = new TabContainer({
+                    region: "center"
+                });
+                mainLayoutContainer.addChild(tabContainer);
+
+                actionBar = dojo.create("div", {
+                    "class": "dijitDialogPaneActionBar"
+                });
+                new dijit.form.Button({
+                    label: tr("OK"),
+                    onClick: accept
+                }).placeAt(actionBar);
+                new dijit.form.Button({
+                    label: tr("Cancel"),
+                    onClick: cancel
+                }).placeAt(actionBar);
+                dialog.domNode.appendChild(actionBar);
+
+
+                require([
+                    "webodf/editor/widgets/paragraphStyles",
+                    "webodf/editor/widgets/dialogWidgets/alignmentPane",
+                    "webodf/editor/widgets/dialogWidgets/fontEffectsPane"
+                ], function (ParagraphStyles, AlignmentPane, FontEffectsPane) {
+                    var p, a, f;
+
+                    p = new ParagraphStyles(function (paragraphStyles) {
+                        stylePicker = paragraphStyles;
+                        stylePicker.widget().startup();
+                        stylePicker.widget().domNode.style.float = "left";
+                        stylePicker.widget().domNode.style.width = "350px";
+                        stylePicker.widget().domNode.style.marginTop = "5px";
+                        topBar.addChild(stylePicker.widget(), 0);
+
+                        stylePicker.onRemove = function () {
+                            // The style picker automatically falls back
+                            // to the first entry if the currently selected
+                            // entry is deleted. So it is safe to simply
+                            // open the new auto-selected entry after removal.
+                            setStyle(stylePicker.value());
+                        };
+
+                        stylePicker.onChange = setStyle;
+                        stylePicker.setEditorSession(editorSession);
+                    });
+                    a = new AlignmentPane(function (pane) {
+                        alignmentPane = pane;
+                        alignmentPane.widget().startup();
+                        tabContainer.addChild(alignmentPane.widget());
+                        alignmentPane.setEditorSession(editorSession);
+                    });
+                    f = new FontEffectsPane(function (pane) {
+                        fontEffectsPane = pane;
+                        fontEffectsPane.widget().startup();
+                        tabContainer.addChild(fontEffectsPane.widget());
+                        fontEffectsPane.setEditorSession(editorSession);
+                    });
+
+                    dialog.onShow = function () {
+                        var currentStyle = editorSession.getCurrentParagraphStyle();
+                        setStyle(currentStyle);
+                    };
+
+                    dialog.onHide = self.onToolDone;
+
+                    // only done to make jslint see the var used
+                    return p || a || f;
+                });
+
+                dialog.addChild(mainLayoutContainer);
+                mainLayoutContainer.startup();
+
+                return callback(dialog);
+            });
+        }
+
+        this.setEditorSession = function (session) {
+            editorSession = session;
+            if (stylePicker) {
+                stylePicker.setEditorSession(session);
+            }
+            if (alignmentPane) {
+                alignmentPane.setEditorSession(session);
+            }
+            if (fontEffectsPane) {
+                fontEffectsPane.setEditorSession(session);
+            }
+            if (!editorSession && dialog) { // TODO: check show state
+                dialog.hide();
+            }
+        };
+
+        /*jslint emptyblock: true*/
+        this.onToolDone = function () {};
+        /*jslint emptyblock: false*/
+
+        // init
+        makeWidget(function (dialog) {
+            return callback(dialog);
+        });
+    };
+
+});

main/inc/lib/javascript/wodotexteditor/widgets/simpleStyles.js

@@ -0,0 +1,208 @@
+/**
+ * Copyright (C) 2012-2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global define, require, runtime, gui, ops */
+
+define("webodf/editor/widgets/simpleStyles", [
+    "webodf/editor/widgets/fontPicker",
+    "dijit/form/ToggleButton",
+    "dijit/form/NumberSpinner"],
+
+    function (FontPicker, ToggleButton, NumberSpinner) {
+        "use strict";
+
+        var SimpleStyles = function (callback) {
+            var self = this,
+                editorSession,
+                widget = {},
+                directFormattingController,
+                boldButton,
+                italicButton,
+                underlineButton,
+                strikethroughButton,
+                fontSizeSpinner,
+                fontPicker,
+                fontPickerWidget;
+
+            boldButton = new ToggleButton({
+                label: runtime.tr('Bold'),
+                disabled: true,
+                showLabel: false,
+                checked: false,
+                iconClass: "dijitEditorIcon dijitEditorIconBold",
+                onChange: function (checked) {
+                    directFormattingController.setBold(checked);
+                    self.onToolDone();
+                }
+            });
+
+            italicButton = new ToggleButton({
+                label: runtime.tr('Italic'),
+                disabled: true,
+                showLabel: false,
+                checked: false,
+                iconClass: "dijitEditorIcon dijitEditorIconItalic",
+                onChange: function (checked) {
+                    directFormattingController.setItalic(checked);
+                    self.onToolDone();
+                }
+            });
+
+            underlineButton = new ToggleButton({
+                label: runtime.tr('Underline'),
+                disabled: true,
+                showLabel: false,
+                checked: false,
+                iconClass: "dijitEditorIcon dijitEditorIconUnderline",
+                onChange: function (checked) {
+                    directFormattingController.setHasUnderline(checked);
+                    self.onToolDone();
+                }
+            });
+
+            strikethroughButton = new ToggleButton({
+                label: runtime.tr('Strikethrough'),
+                disabled: true,
+                showLabel: false,
+                checked: false,
+                iconClass: "dijitEditorIcon dijitEditorIconStrikethrough",
+                onChange: function (checked) {
+                    directFormattingController.setHasStrikethrough(checked);
+                    self.onToolDone();
+                }
+            });
+
+            fontSizeSpinner = new NumberSpinner({
+                label: runtime.tr('Size'),
+                disabled: true,
+                showLabel: false,
+                value: 12,
+                smallDelta: 1,
+                constraints: {min: 6, max: 96},
+                intermediateChanges: true,
+                onChange: function (value) {
+                    directFormattingController.setFontSize(value);
+                },
+                onClick: function () {
+                    self.onToolDone();
+                },
+                onInput: function () {
+                    // Do not process any input in the text box;
+                    // even paste events will not be processed
+                    // so that no corrupt values can exist
+                    return false;
+                }
+            });
+
+            /*jslint emptyblock: true*/
+            fontPicker = new FontPicker(function () {});
+            /*jslint emptyblock: false*/
+            fontPickerWidget = fontPicker.widget();
+            fontPickerWidget.setAttribute('disabled', true);
+            fontPickerWidget.onChange = function (value) {
+                directFormattingController.setFontName(value);
+                self.onToolDone();
+            };
+
+            widget.children = [boldButton, italicButton, underlineButton, strikethroughButton, fontPickerWidget, fontSizeSpinner];
+            widget.startup = function () {
+                widget.children.forEach(function (element) {
+                    element.startup();
+                });
+            };
+
+            widget.placeAt = function (container) {
+                widget.children.forEach(function (element) {
+                    element.placeAt(container);
+                });
+                return widget;
+            };
+
+            function updateStyleButtons(changes) {
+                // The 3rd parameter to set(...) is false to avoid firing onChange when setting the value programmatically.
+                var updateCalls = {
+                    isBold: function (value) { boldButton.set('checked', value, false); },
+                    isItalic: function (value) { italicButton.set('checked', value, false); },
+                    hasUnderline: function (value) { underlineButton.set('checked', value, false); },
+                    hasStrikeThrough: function (value) { strikethroughButton.set('checked', value, false); },
+                    fontSize: function (value) { 
+                        fontSizeSpinner.set('intermediateChanges', false); // Necessary due to https://bugs.dojotoolkit.org/ticket/11588
+                        fontSizeSpinner.set('value', value, false);
+                        fontSizeSpinner.set('intermediateChanges', true);
+                    },
+                    fontName: function (value) { fontPickerWidget.set('value', value, false); }
+                };
+
+                Object.keys(changes).forEach(function (key) {
+                    var updateCall = updateCalls[key];
+                    if (updateCall) {
+                        updateCall(changes[key]);
+                    }
+                });
+            }
+
+            function enableStyleButtons(enabledFeatures) {
+                widget.children.forEach(function (element) {
+                    element.setAttribute('disabled', !enabledFeatures.directTextStyling);
+                });
+            }
+
+            this.setEditorSession = function (session) {
+                if (editorSession) {
+                    directFormattingController.unsubscribe(gui.DirectFormattingController.textStylingChanged, updateStyleButtons);
+                    directFormattingController.unsubscribe(gui.DirectFormattingController.enabledChanged, enableStyleButtons);
+                }
+
+                editorSession = session;
+                fontPicker.setEditorSession(editorSession);
+                if (editorSession) {
+                    directFormattingController = editorSession.sessionController.getDirectFormattingController();
+
+                    directFormattingController.subscribe(gui.DirectFormattingController.textStylingChanged, updateStyleButtons);
+                    directFormattingController.subscribe(gui.DirectFormattingController.enabledChanged, enableStyleButtons);
+
+                    enableStyleButtons(directFormattingController.enabledFeatures());
+                } else {
+                    enableStyleButtons({ directTextStyling: false});
+                }
+
+                updateStyleButtons({
+                    isBold: editorSession ? directFormattingController.isBold() : false,
+                    isItalic: editorSession ? directFormattingController.isItalic() : false,
+                    hasUnderline: editorSession ? directFormattingController.hasUnderline() : false,
+                    hasStrikeThrough: editorSession ? directFormattingController.hasStrikeThrough() : false,
+                    fontSize: editorSession ? directFormattingController.fontSize() : undefined,
+                    fontName: editorSession ? directFormattingController.fontName() : undefined
+                });
+            };
+
+            /*jslint emptyblock: true*/
+            this.onToolDone = function () {};
+            /*jslint emptyblock: false*/
+
+            callback(widget);
+        };
+
+        return SimpleStyles;
+});

main/inc/lib/javascript/wodotexteditor/widgets/toolbarWidgets/currentStyle.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright (C) 2012-2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global define, require */
+
+define("webodf/editor/widgets/toolbarWidgets/currentStyle",
+       ["webodf/editor/EditorSession"],
+
+    function (EditorSession) {
+        "use strict";
+
+        return function CurrentStyle(callback) {
+            var self = this,
+                editorSession,
+                paragraphStyles;
+
+            function selectParagraphStyle(info) {
+                if (paragraphStyles) {
+                    if (info.type === 'style') {
+                        paragraphStyles.setValue(info.styleName);
+                    }
+                }
+            }
+
+            function setParagraphStyle() {
+                if (editorSession) {
+                    editorSession.setCurrentParagraphStyle(paragraphStyles.value());
+                }
+                self.onToolDone();
+            }
+
+            function makeWidget(callback) {
+                require(["webodf/editor/widgets/paragraphStyles"], function (ParagraphStyles) {
+                    var p = new ParagraphStyles(function (pStyles) {
+                        paragraphStyles = pStyles;
+
+                        paragraphStyles.widget().onChange = setParagraphStyle;
+
+                        paragraphStyles.setEditorSession(editorSession);
+                        return callback(paragraphStyles.widget());
+                    });
+                    return p; // make sure p is not unused
+                });
+            }
+
+            this.setEditorSession = function (session) {
+                if (editorSession) {
+                    editorSession.unsubscribe(EditorSession.signalParagraphChanged, selectParagraphStyle);
+                }
+                editorSession = session;
+                if (paragraphStyles) {
+                    paragraphStyles.setEditorSession(editorSession);
+                }
+                if (editorSession) {
+                    editorSession.subscribe(EditorSession.signalParagraphChanged, selectParagraphStyle);
+                    // TODO: selectParagraphStyle(editorSession.getCurrentParagraphStyle());
+                }
+            };
+
+            /*jslint emptyblock: true*/
+            this.onToolDone = function () {};
+            /*jslint emptyblock: false*/
+
+            makeWidget(function (widget) {
+                return callback(widget);
+            });
+        };
+    });

main/inc/lib/javascript/wodotexteditor/widgets/undoRedoMenu.js

@@ -0,0 +1,112 @@
+/**
+ * Copyright (C) 2012-2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global define, require, runtime*/
+
+define("webodf/editor/widgets/undoRedoMenu",
+    ["webodf/editor/EditorSession", "dijit/form/Button"],
+
+    function (EditorSession, Button) {
+        "use strict";
+
+        return function UndoRedoMenu(callback) {
+            var self = this,
+                editorSession,
+                undoButton,
+                redoButton,
+                widget = {};
+
+            undoButton = new Button({
+                label: runtime.tr('Undo'),
+                showLabel: false,
+                disabled: true, // TODO: get current session state
+                iconClass: "dijitEditorIcon dijitEditorIconUndo",
+                onClick: function () {
+                    if (editorSession) {
+                        editorSession.undo();
+                        self.onToolDone();
+                    }
+                }
+            });
+
+            redoButton = new Button({
+                label: runtime.tr('Redo'),
+                showLabel: false,
+                disabled: true, // TODO: get current session state
+                iconClass: "dijitEditorIcon dijitEditorIconRedo",
+                onClick: function () {
+                    if (editorSession) {
+                        editorSession.redo();
+                        self.onToolDone();
+                    }
+                }
+            });
+
+            widget.children = [undoButton, redoButton];
+            widget.startup = function () {
+                widget.children.forEach(function (element) {
+                    element.startup();
+                });
+            };
+
+            widget.placeAt = function (container) {
+                widget.children.forEach(function (element) {
+                    element.placeAt(container);
+                });
+                return widget;
+            };
+
+            function checkUndoButtons(e) {
+                if (undoButton) {
+                    undoButton.set('disabled', e.undoAvailable === false);
+                }
+                if (redoButton) {
+                    redoButton.set('disabled', e.redoAvailable === false);
+                }
+            }
+
+            this.setEditorSession = function (session) {
+                if (editorSession) {
+                    editorSession.unsubscribe(EditorSession.signalUndoStackChanged, checkUndoButtons);
+                }
+
+                editorSession = session;
+                if (editorSession) {
+                    editorSession.subscribe(EditorSession.signalUndoStackChanged, checkUndoButtons);
+                    // TODO: checkUndoButtons(editorSession.getundoredoavailablalalo());
+                } else {
+                    widget.children.forEach(function (element) {
+                        element.setAttribute('disabled', true);
+                    });
+                }
+            };
+
+            /*jslint emptyblock: true*/
+            this.onToolDone = function () {};
+            /*jslint emptyblock: false*/
+
+            // init
+            callback(widget);
+        };
+    });

main/inc/lib/javascript/wodotexteditor/widgets/zoomSlider.js

@@ -0,0 +1,93 @@
+/**
+ * Copyright (C) 2012-2013 KO GmbH <copyright@kogmbh.com>
+ *
+ * @licstart
+ * This file is part of WebODF.
+ *
+ * WebODF is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License (GNU AGPL)
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * WebODF is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
+ * @licend
+ *
+ * @source: http://www.webodf.org/
+ * @source: https://github.com/kogmbh/WebODF/
+ */
+
+/*global define, require, gui*/
+
+define("webodf/editor/widgets/zoomSlider", [
+    "dijit/form/HorizontalSlider"],
+
+    function (HorizontalSlider) {
+        "use strict";
+
+        // The slider zooms from -1 to +1, which corresponds
+        // to zoom levels of 1/extremeZoomFactor to extremeZoomFactor.
+        return function ZoomSlider(callback) {
+            var self = this,
+                editorSession,
+                slider,
+                extremeZoomFactor = 4;
+
+            function updateSlider(zoomLevel) {
+                slider.set('value', Math.log(zoomLevel) / Math.log(extremeZoomFactor), false);
+            }
+
+            this.setEditorSession = function (session) {
+                var zoomHelper;
+                if (editorSession) {
+                    editorSession.getOdfCanvas().getZoomHelper().unsubscribe(gui.ZoomHelper.signalZoomChanged, updateSlider);
+                }
+
+                editorSession = session;
+                if (editorSession) {
+                    zoomHelper = editorSession.getOdfCanvas().getZoomHelper();
+                    zoomHelper.subscribe(gui.ZoomHelper.signalZoomChanged, updateSlider);
+                    updateSlider(zoomHelper.getZoomLevel());
+                }
+                slider.setAttribute('disabled', !editorSession);
+            };
+
+            /*jslint emptyblock: true*/
+            this.onToolDone = function () {};
+            /*jslint emptyblock: false*/
+
+            // init
+            function init() {
+                slider = new HorizontalSlider({
+                    name: 'zoomSlider',
+                    disabled: true,
+                    value: 0,
+                    minimum: -1,
+                    maximum: 1,
+                    discreteValues: 0.01,
+                    intermediateChanges: true,
+                    style: {
+                        width: '150px',
+                        height: '25px',
+                        float: 'right'
+                    }
+                });
+
+                slider.onChange = function (value) {
+                    if (editorSession) {
+                        editorSession.getOdfCanvas().getZoomHelper().setZoomLevel(Math.pow(extremeZoomFactor, value));
+                    }
+                    self.onToolDone();
+                };
+
+                return callback(slider);
+            }
+
+            init();
+        };
+    });