diff --git a/ChangeLog.md b/ChangeLog.md index e4d6a563a..bce86a04b 100644 --- a/ChangeLog.md +++ b/ChangeLog.md @@ -1,3 +1,12 @@ +# Changes between 0.5.3 and 0.5.4 + +## WebODF + +### Fixes + +* Only highlight ODF fields in edit mode ([#816](https://github.com/kogmbh/WebODF/issues/816)) + + # Changes between 0.5.2 and 0.5.3 ## WebODF diff --git a/programs/editor/EditorSession.js b/programs/editor/EditorSession.js index db28d3091..71bdc3942 100644 --- a/programs/editor/EditorSession.js +++ b/programs/editor/EditorSession.js @@ -40,6 +40,7 @@ define("webodf/editor/EditorSession", [ runtime.loadClass("odf.OdfUtils"); runtime.loadClass("gui.CaretManager"); runtime.loadClass("gui.Caret"); + runtime.loadClass("gui.OdfFieldView"); runtime.loadClass("gui.SessionController"); runtime.loadClass("gui.SessionView"); runtime.loadClass("gui.HyperlinkTooltipView"); @@ -72,6 +73,7 @@ define("webodf/editor/EditorSession", [ formatting = odtDocument.getFormatting(), domUtils = core.DomUtils, odfUtils = odf.OdfUtils, + odfFieldView, eventNotifier = new core.EventNotifier([ EditorSession.signalMemberAdded, EditorSession.signalMemberUpdated, @@ -577,6 +579,7 @@ define("webodf/editor/EditorSession", [ selectionViewManager.destroy, self.sessionController.destroy, hyperlinkTooltipView.destroy, + odfFieldView.destroy, destroy ]; @@ -594,6 +597,8 @@ define("webodf/editor/EditorSession", [ fontStyles.appendChild(document.createTextNode(fontsCSS)); head.appendChild(fontStyles); + odfFieldView = new gui.OdfFieldView(odfCanvas); + odfFieldView.showFieldHighlight(); self.sessionController = new gui.SessionController(session, localMemberId, shadowCursor, { annotationsEnabled: config.annotationsEnabled, directTextStylingEnabled: config.directTextStylingEnabled, diff --git a/webodf/lib/gui/OdfFieldView.js b/webodf/lib/gui/OdfFieldView.js new file mode 100644 index 000000000..25117b18d --- /dev/null +++ b/webodf/lib/gui/OdfFieldView.js @@ -0,0 +1,129 @@ +/** + * Copyright (C) 2010-2014 KO GmbH + * + * @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 . + * @licend + * + * @source: http://www.webodf.org/ + * @source: https://github.com/kogmbh/WebODF/ + */ + +/*global gui, odf*/ + +/** + * Show ODF fields in an ODT document. + * + * @constructor + * @implements {core.Destroyable} + * @param {!odf.OdfCanvas} odfCanvas + */ +gui.OdfFieldView = function(odfCanvas) { + "use strict"; + var /**@type{!HTMLStyleElement}*/ + style, + document = odfCanvas.getElement().ownerDocument; + + /** + * @return {!HTMLStyleElement} + */ + function newStyleSheet() { + var head = document.getElementsByTagName('head').item(0), + sheet = /**@type{!HTMLStyleElement}*/(document.createElement('style')), + /**@type{!string}*/ + text = ""; + + sheet.type = 'text/css'; + sheet.media = 'screen, print, handheld, projection'; + odf.Namespaces.forEachPrefix(function(prefix, ns) { + text += "@namespace " + prefix + " url(" + ns + ");\n"; + }); + sheet.appendChild(document.createTextNode(text)); + head.appendChild(sheet); + return sheet; + } + + /** + * @param {!HTMLStyleElement} style + * @return {undefined} + */ + function clearCSSStyleSheet(style) { + var stylesheet = /**@type{!CSSStyleSheet}*/(style.sheet), + cssRules = stylesheet.cssRules; + + while (cssRules.length) { + stylesheet.deleteRule(cssRules.length - 1); + } + } + + /** + * @param {!Array.} selectors + * @param {!string} css + * @return {!string} + */ + function createRule(selectors, css) { + return selectors.join(",\n") + "\n" + css + "\n"; + } + + /** + * Applies a grey background to all ODF field containers as defined in the container definitions within + * this class. + * + * @return {!string} + */ + function generateFieldCSS() { + var /**@type{!Array.}*/ + cssSelectors = odf.OdfSchema.getFields().map(function(prefixedName) { return prefixedName.replace(":", "|"); }), + highlightFields = createRule(cssSelectors, "{ background-color: #D0D0D0; }"), + emptyCssSelectors = cssSelectors.map(function(selector) { return selector + ":empty::after"; }), + // Ensure fields are always visible even if they contain no content + highlightEmptyFields = createRule(emptyCssSelectors, "{ content:' '; white-space: pre; }"); + + return highlightFields + "\n" + highlightEmptyFields; + } + + /** + * @return {undefined} + */ + this.showFieldHighlight = function() { + style.appendChild(document.createTextNode(generateFieldCSS())); + }; + + /** + * @return {undefined} + */ + this.hideFieldHighlight = function() { + clearCSSStyleSheet(style); + }; + + /** + * Destroy the object. + * Do not access any member of this object after this call. + * @param {function(!Error=):undefined} callback + * @return {undefined} + */ + this.destroy = function(callback) { + if (style.parentNode) { + style.parentNode.removeChild(style); + } + callback(); + }; + + function init() { + style = newStyleSheet(); + } + init(); +}; \ No newline at end of file diff --git a/webodf/lib/manifest.json b/webodf/lib/manifest.json index e0daf686a..88d136a25 100644 --- a/webodf/lib/manifest.json +++ b/webodf/lib/manifest.json @@ -160,6 +160,9 @@ "odf.OdfNodeFilter", "odf.TextSerializer" ], + "gui.OdfFieldView": [ + "odf.OdfCanvas" + ], "gui.OdfTextBodyNodeFilter": [ "odf.OdfUtils" ], diff --git a/webodf/lib/odf/OdfCanvas.js b/webodf/lib/odf/OdfCanvas.js index 20786b758..9d004ece5 100644 --- a/webodf/lib/odf/OdfCanvas.js +++ b/webodf/lib/odf/OdfCanvas.js @@ -728,32 +728,6 @@ return /**@type{?HTMLStyleElement}*/(style); } - /** - * @param {!Array.} selectors - * @param {!string} css - * @return {!string} - */ - function createRule(selectors, css) { - return selectors.join(",\n") + "\n" + css + "\n"; - } - - /** - * Applies a grey background to all ODF field containers as defined in the container definitions within - * this class. - * - * @return {!string} - */ - function generateFieldCSS() { - var /**@type{!Array.}*/ - cssSelectors = odf.OdfSchema.getFields().map(function(prefixedName) { return prefixedName.replace(":", "|"); }), - highlightFields = createRule(cssSelectors, "{ background-color: #D0D0D0; }"), - emptyCssSelectors = cssSelectors.map(function(selector) { return selector + ":empty::after"; }), - // Ensure fields are always visible even if they contain no content - highlightEmptyFields = createRule(emptyCssSelectors, "{ content:' '; white-space: pre; }"); - - return highlightFields + "\n" + highlightEmptyFields; - } - /** * @param {!Document} document * @return {!HTMLStyleElement} @@ -790,8 +764,7 @@ style.setAttribute('media', 'screen, print, handheld, projection'); style.setAttribute('type', 'text/css'); style.setAttribute('webodfcss', '1'); - style.appendChild(document.createTextNode(css + "\n")); - style.appendChild(document.createTextNode(generateFieldCSS())); + style.appendChild(document.createTextNode(css)); head.appendChild(style); return style; } diff --git a/webodf/tools/karma.conf.js b/webodf/tools/karma.conf.js index f84c4f50e..6da6bc6f8 100644 --- a/webodf/tools/karma.conf.js +++ b/webodf/tools/karma.conf.js @@ -145,6 +145,7 @@ module.exports = function (config) { 'lib/ops/EditInfo.js', 'lib/gui/EditInfoMarker.js', 'lib/gui/HyperlinkTooltipView.js', + 'lib/gui/OdfFieldView.js', 'lib/gui/ShadowCursor.js', 'lib/gui/SelectionView.js', 'lib/gui/SelectionViewManager.js',