W.I.P of collaborative odf editor:

- Add wodocollabtexteditor library
This commit is contained in:
Hadi Nategh
2016-08-03 18:16:20 +02:00
parent 9f6de28dea
commit 5917a70dcc
236 changed files with 17728 additions and 0 deletions

View File

@@ -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>

View File

@@ -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;
});

View File

@@ -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>

View File

@@ -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;
});

View File

@@ -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>

View File

@@ -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;
});

View File

@@ -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;
});