diff options
Diffstat (limited to 'node_modules/labs/rich-text-editor.reel/rich-text-editor.js')
-rw-r--r-- | node_modules/labs/rich-text-editor.reel/rich-text-editor.js | 166 |
1 files changed, 107 insertions, 59 deletions
diff --git a/node_modules/labs/rich-text-editor.reel/rich-text-editor.js b/node_modules/labs/rich-text-editor.reel/rich-text-editor.js index 3fece294..b88d5868 100644 --- a/node_modules/labs/rich-text-editor.reel/rich-text-editor.js +++ b/node_modules/labs/rich-text-editor.reel/rich-text-editor.js | |||
@@ -12,6 +12,8 @@ var Montage = require("montage/core/core").Montage, | |||
12 | MutableEvent = require("montage/core/event/mutable-event").MutableEvent, | 12 | MutableEvent = require("montage/core/event/mutable-event").MutableEvent, |
13 | Resizer = require("node_modules/labs/rich-text-editor.reel/rich-text-resizer").Resizer, | 13 | Resizer = require("node_modules/labs/rich-text-editor.reel/rich-text-resizer").Resizer, |
14 | Sanitizer = require("node_modules/labs/rich-text-editor.reel/rich-text-sanitizer").Sanitizer; | 14 | Sanitizer = require("node_modules/labs/rich-text-editor.reel/rich-text-sanitizer").Sanitizer; |
15 | Point = require("montage/core/geometry/point").Point; | ||
16 | |||
15 | 17 | ||
16 | /** | 18 | /** |
17 | @class module:"montage/ui/rich-text-editor.reel".RichTextEditor | 19 | @class module:"montage/ui/rich-text-editor.reel".RichTextEditor |
@@ -148,7 +150,6 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/ | |||
148 | if (this._resizer) { | 150 | if (this._resizer) { |
149 | this._needsHideResizer = true; | 151 | this._needsHideResizer = true; |
150 | } | 152 | } |
151 | |||
152 | if (this._sanitizer) { | 153 | if (this._sanitizer) { |
153 | value = this._sanitizer.willSetValue(value, this._uniqueId); | 154 | value = this._sanitizer.willSetValue(value, this._uniqueId); |
154 | } | 155 | } |
@@ -296,7 +297,9 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/ | |||
296 | states: { | 297 | states: { |
297 | enumerable: true, | 298 | enumerable: true, |
298 | get: function() { | 299 | get: function() { |
299 | this.updateStates(); | 300 | if (this._statesDirty || !this._states) { |
301 | this.updateStates(); | ||
302 | } | ||
300 | return this._states; | 303 | return this._states; |
301 | } | 304 | } |
302 | }, | 305 | }, |
@@ -313,7 +316,6 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/ | |||
313 | action, | 316 | action, |
314 | states, | 317 | states, |
315 | state, | 318 | state, |
316 | statesChanged = false, | ||
317 | hasFocus = this._hasFocus; | 319 | hasFocus = this._hasFocus; |
318 | 320 | ||
319 | if (this._states == null || this._statesDirty) { | 321 | if (this._states == null || this._statesDirty) { |
@@ -339,16 +341,8 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/ | |||
339 | 341 | ||
340 | if (states[key] !== state) { | 342 | if (states[key] !== state) { |
341 | states[key] = state; | 343 | states[key] = state; |
342 | statesChanged = true; | ||
343 | } | 344 | } |
344 | } | 345 | } |
345 | |||
346 | if (statesChanged) { | ||
347 | this._states = states; | ||
348 | // As we do not use a setter, we need to manually dispatch a change event | ||
349 | this.dispatchEvent(MutableEvent.changeEventForKeyAndValue("states" , this._states)); | ||
350 | } | ||
351 | |||
352 | } | 346 | } |
353 | } | 347 | } |
354 | 348 | ||
@@ -388,6 +382,10 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/ | |||
388 | enumerable: false, | 382 | enumerable: false, |
389 | value: { | 383 | value: { |
390 | bold: {enabled: true, needsValue:false, status: true}, | 384 | bold: {enabled: true, needsValue:false, status: true}, |
385 | justifyleft: {enabled: true, needsValue:false, status: true}, | ||
386 | justifycenter: {enabled: true, needsValue:false, status: true}, | ||
387 | justifyright: {enabled: true, needsValue:false, status: true}, | ||
388 | justifyfull: {enabled: true, needsValue:false, status: true}, | ||
391 | italic: {enabled: true, needsValue:false, status: true}, | 389 | italic: {enabled: true, needsValue:false, status: true}, |
392 | underline: {enabled: true, needsValue:false, status: true}, | 390 | underline: {enabled: true, needsValue:false, status: true}, |
393 | strikethrough: {enabled: true, needsValue:false, status: true}, | 391 | strikethrough: {enabled: true, needsValue:false, status: true}, |
@@ -536,6 +534,7 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/ | |||
536 | } | 534 | } |
537 | 535 | ||
538 | this._adjustPadding(); | 536 | this._adjustPadding(); |
537 | this._markDirty(); | ||
539 | delete this._needsResetContent; | 538 | delete this._needsResetContent; |
540 | } | 539 | } |
541 | 540 | ||
@@ -1011,6 +1010,12 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/ | |||
1011 | event.preventDefault(); | 1010 | event.preventDefault(); |
1012 | event.stopPropagation(); | 1011 | event.stopPropagation(); |
1013 | 1012 | ||
1013 | // Remove the link popup | ||
1014 | if (this._needsActiveLinkOn === false && this._activeLink) { | ||
1015 | this._needsActiveLinkOn = null; | ||
1016 | this.needsDraw = true; | ||
1017 | } | ||
1018 | |||
1014 | // Update the caret | 1019 | // Update the caret |
1015 | if (event.x !== this._dragOverX || event.y !== this._dragOverY) { | 1020 | if (event.x !== this._dragOverX || event.y !== this._dragOverY) { |
1016 | this._dragOverX = event.x; | 1021 | this._dragOverX = event.x; |
@@ -1365,9 +1370,11 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/ | |||
1365 | thisRef._dispatchEditorEvent("editorChange"); | 1370 | thisRef._dispatchEditorEvent("editorChange"); |
1366 | }; | 1371 | }; |
1367 | 1372 | ||
1368 | // Clear the cached value | 1373 | if (!this._needsResetContent) { |
1369 | this._dirtyValue = true; | 1374 | // Clear the cached value |
1370 | this._dirtyTextValue = true; | 1375 | this._dirtyValue = true; |
1376 | this._dirtyTextValue = true; | ||
1377 | } | ||
1371 | 1378 | ||
1372 | if (!this._forceUpdateValuesTimeout) { | 1379 | if (!this._forceUpdateValuesTimeout) { |
1373 | this._forceUpdateValuesTimeout = setTimeout(updateValues, 1000); | 1380 | this._forceUpdateValuesTimeout = setTimeout(updateValues, 1000); |
@@ -1519,60 +1526,85 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/ | |||
1519 | popup, | 1526 | popup, |
1520 | parentNode, | 1527 | parentNode, |
1521 | nextSibling, | 1528 | nextSibling, |
1522 | w, h, l, t, docH, docW, | 1529 | w, h, l, t, |
1523 | maxWidth, | 1530 | left, right, leftWidth, rightWidth, |
1524 | style, | 1531 | style, |
1525 | popupExtraWidth = 53; // This is depending of the popup css | 1532 | popupExtraWidth = 53; // This is depending of the popup css |
1526 | 1533 | ||
1534 | var offsetLeft, | ||
1535 | offsetTop, | ||
1536 | _findOffset = function(node) { | ||
1537 | offsetLeft = node.offsetLeft; | ||
1538 | offsetTop = node.offsetTop; | ||
1539 | |||
1540 | while ((node = node.offsetParent) && node != editorElement) { | ||
1541 | offsetLeft += node.offsetLeft; | ||
1542 | offsetTop += node.offsetTop; | ||
1543 | } | ||
1544 | }; | ||
1545 | |||
1546 | |||
1527 | if (this._activeLink != element) { | 1547 | if (this._activeLink != element) { |
1528 | this._hideActiveLink(); | 1548 | this._hideActiveLink(); |
1529 | if (element) { | 1549 | if (element) { |
1550 | |||
1551 | _findOffset(element); | ||
1552 | |||
1530 | parentNode = element.parentNode; | 1553 | parentNode = element.parentNode; |
1531 | nextSibling = element.nextSibling; | 1554 | nextSibling = element.nextSibling; |
1532 | 1555 | ||
1533 | // sanity check: make sure we don't already have a popup installed for that element | 1556 | oh = editorElement.offsetHeight; |
1534 | if (!nextSibling || nextSibling.tagName !== "DIV" || !nextSibling.classList.contains("montage-link-popup")) { | 1557 | ow = editorElement.offsetWidth; |
1558 | st = editorElement.scrollTop; | ||
1559 | sl = editorElement.scrollLeft; | ||
1535 | 1560 | ||
1536 | oh = editorElement.offsetHeight; | 1561 | w = element.offsetWidth -1, |
1537 | ow = editorElement.offsetWidth; | 1562 | h = element.offsetHeight -1, |
1538 | st = editorElement.scrollTop; | 1563 | l = offsetLeft, |
1539 | sl = editorElement.scrollLeft; | 1564 | t = offsetTop, |
1540 | 1565 | ||
1541 | w = element.offsetWidth -1, | 1566 | style = ""; |
1542 | h = element.offsetHeight -1, | ||
1543 | l = element.offsetLeft, | ||
1544 | t = element.offsetTop, | ||
1545 | 1567 | ||
1546 | style = ""; | 1568 | // Should we display the popup on top or below the element? |
1547 | if (t > 60 && t - st + h + 50 > oh) { | 1569 | if (t > 60 && t - st + h + 50 > oh) { |
1548 | style = "bottom: " + (oh - t + 5) + "px;"; | 1570 | style = "bottom: " + (oh - t + 5) + "px;"; |
1549 | } else { | 1571 | } else { |
1550 | style = "top: " + (t + h + 5 ) + "px;"; | 1572 | style = "top: " + (t + h + 5 ) + "px;"; |
1551 | } | 1573 | } |
1552 | 1574 | ||
1553 | var maxWidth = ow - l - popupExtraWidth + sl; | 1575 | // Should we display the popup aligned on the left or right of the element? |
1554 |