aboutsummaryrefslogtreecommitdiff
path: root/node_modules/labs/rich-text-editor.reel
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/labs/rich-text-editor.reel')
-rw-r--r--node_modules/labs/rich-text-editor.reel/rich-text-editor.js166
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 if (maxWidth < 150) { 1576 left = sl;