From b701127f047602ec79876e1def47ca5e43d8522c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20Ho=CC=88=C3=9Fl?= Date: Mon, 5 Sep 2016 20:03:41 +0200 Subject: [PATCH 1/2] Fix a styling problem --- openslides/core/static/css/app.css | 2 ++ openslides/core/static/css/projector.css | 2 ++ 2 files changed, 4 insertions(+) diff --git a/openslides/core/static/css/app.css b/openslides/core/static/css/app.css index e49f37135..17b72f83c 100644 --- a/openslides/core/static/css/app.css +++ b/openslides/core/static/css/app.css @@ -397,6 +397,7 @@ img { color: gray; font-family: Courier, serif; font-size: 13px; + font-weight: normal; } .motion-text.line-numbers-inline .os-line-break { @@ -410,6 +411,7 @@ img { content: attr(data-line-number); vertical-align: top; font-size: 11px; + font-weight: normal; color: gray; font-family: Courier, serif; margin-top: -3px; diff --git a/openslides/core/static/css/projector.css b/openslides/core/static/css/projector.css index 3267a36da..e13d19eff 100644 --- a/openslides/core/static/css/projector.css +++ b/openslides/core/static/css/projector.css @@ -394,6 +394,7 @@ tr.elected td { color: gray; font-family: Courier, serif; font-size: 13px; + font-weight: normal; } .motion-text.line-numbers-inline .os-line-break { @@ -407,6 +408,7 @@ tr.elected td { content: attr(data-line-number); vertical-align: top; font-size: 0.75em; + font-weight: normal; color: gray; font-family: Courier, serif; margin-top: -5px; From a341071e91681c9e8cee92d7a9e4edd807ce3cf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20Ho=CC=88=C3=9Fl?= Date: Mon, 5 Sep 2016 20:31:43 +0200 Subject: [PATCH 2/2] Line-Breaking Bugfix: break before an inline element if the first word of the element exceeds the current line --- .../static/js/motions/linenumbering.js | 69 +++++++++++++------ .../motions/linenumbering.service.test.js | 14 ++++ 2 files changed, 63 insertions(+), 20 deletions(-) diff --git a/openslides/motions/static/js/motions/linenumbering.js b/openslides/motions/static/js/motions/linenumbering.js index f4038ed1d..a09c2bd44 100644 --- a/openslides/motions/static/js/motions/linenumbering.js +++ b/openslides/motions/static/js/motions/linenumbering.js @@ -51,6 +51,23 @@ angular.module('OpenSlidesApp.motions.lineNumbering', []) return isLineNumber; }; + this._createLineBreak = function () { + var br = document.createElement('br'); + br.setAttribute('class', 'os-line-break'); + return br; + }; + + this._createLineNumber = function () { + var node = document.createElement('span'); + var lineNumber = this._currentLineNumber; + this._currentLineNumber++; + node.setAttribute('class', 'os-line-number line-number-' + lineNumber); + node.setAttribute('data-line-number', lineNumber + ''); + node.setAttribute('contenteditable', 'false'); + node.innerHTML = ' '; // Prevent tinymce from stripping out empty span's + return node; + }; + /** * Splits a TEXT_NODE into an array of TEXT_NODEs and BR-Elements separating them into lines. * Each line has a maximum length of 'length', with one exception: spaces are accepted to exceed the length. @@ -69,28 +86,13 @@ angular.module('OpenSlidesApp.motions.lineNumbering', []) lastBreakableIndex = null, service = this; - var createLineBreak = function() { - var br = document.createElement('br'); - br.setAttribute('class', 'os-line-break'); - return br; - }; - var createLineNumber = function() { - var node = document.createElement('span'); - var lineNumber = service._currentLineNumber; - service._currentLineNumber++; - node.setAttribute('class', 'os-line-number line-number-' + lineNumber); - node.setAttribute('data-line-number', lineNumber + ''); - node.setAttribute('contenteditable', 'false'); - node.innerHTML = ' '; // Prevent tinymce from stripping out empty span's - return node; - }; var addLine = function (text) { var newNode = document.createTextNode(text); if (firstTextNode) { firstTextNode = false; } else { - out.push(createLineBreak()); - out.push(createLineNumber()); + out.push(service._createLineBreak()); + out.push(service._createLineNumber()); } out.push(newNode); }; @@ -101,11 +103,11 @@ angular.module('OpenSlidesApp.motions.lineNumbering', []) // This happens if a previous inline element exactly stretches to the end of the line if (this._currentInlineOffset >= length) { - out.push(createLineBreak()); - out.push(createLineNumber()); + out.push(service._createLineBreak()); + out.push(service._createLineNumber()); this._currentInlineOffset = 0; } else if (this._prependLineNumberToFirstText) { - out.push(createLineNumber()); + out.push(service._createLineNumber()); } this._prependLineNumberToFirstText = false; @@ -163,6 +165,17 @@ angular.module('OpenSlidesApp.motions.lineNumbering', []) } }; + this._lengthOfFirstInlineWord = function (node) { + if (!node.firstChild) { + return 0; + } + if (node.firstChild.nodeType == TEXT_NODE) { + var parts = node.firstChild.nodeValue.split(' '); + return parts[0].length; + } else { + return this._lengthOfFirstInlineWord(node.firstChild); + } + }; this._insertLineNumbersToInlineNode = function (node, length) { var oldChildren = [], i; @@ -181,6 +194,14 @@ angular.module('OpenSlidesApp.motions.lineNumbering', []) node.appendChild(ret[j]); } } else if (oldChildren[i].nodeType == ELEMENT_NODE) { + var firstword = this._lengthOfFirstInlineWord(oldChildren[i]), + overlength = ((this._currentInlineOffset + firstword) > length && this._currentInlineOffset > 0); + if (overlength && this._isInlineElement(oldChildren[i])) { + this._currentInlineOffset = 0; + node.appendChild(this._createLineBreak()); + node.appendChild(this._createLineNumber()); + } + var changedNode = this._insertLineNumbersToNode(oldChildren[i], length); this._moveLeadingLineBreaksToOuterNode(changedNode, node); node.appendChild(changedNode); @@ -252,6 +273,14 @@ angular.module('OpenSlidesApp.motions.lineNumbering', []) node.appendChild(ret[j]); } } else if (oldChildren[i].nodeType == ELEMENT_NODE) { + var firstword = this._lengthOfFirstInlineWord(oldChildren[i]), + overlength = ((this._currentInlineOffset + firstword) > length && this._currentInlineOffset > 0); + if (overlength && this._isInlineElement(oldChildren[i])) { + this._currentInlineOffset = 0; + node.appendChild(this._createLineBreak()); + node.appendChild(this._createLineNumber()); + } + var changedNode = this._insertLineNumbersToNode(oldChildren[i], length); this._moveLeadingLineBreaksToOuterNode(changedNode, node); node.appendChild(changedNode); diff --git a/tests/karma/motions/linenumbering.service.test.js b/tests/karma/motions/linenumbering.service.test.js index 812359269..1edcd9b49 100644 --- a/tests/karma/motions/linenumbering.service.test.js +++ b/tests/karma/motions/linenumbering.service.test.js @@ -212,5 +212,19 @@ describe('linenumbering', function () { expect(outHtml).toBe(expected); expect(lineNumberingService.stripLineNumbers(outHtml)).toBe(inHtml); }); + + it('breaks before an inline element, if the first word of the new inline element is longer than the remaining line (1)', function () { + var inHtml = "

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.

"; + var outHtml = lineNumberingService.insertLineNumbers(inHtml, 80); + expect(outHtml).toBe('

' + noMarkup(1) + 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie ' + brMarkup(2) + 'consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan ' + brMarkup(3) + 'et iusto odio.

'); + expect(lineNumberingService.stripLineNumbers(outHtml)).toBe(inHtml); + }); + + it('breaks before an inline element, if the first word of the new inline element is longer than the remaining line (2)', function () { + var inHtml = "

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.

"; + var outHtml = lineNumberingService.insertLineNumbers(inHtml, 80); + expect(outHtml).toBe('

' + noMarkup(1) + 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie ' + brMarkup(2) + 'consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan ' + brMarkup(3) + 'et iusto odio.

'); + expect(lineNumberingService.stripLineNumbers(outHtml)).toBe(inHtml); + }); }); });