DLynch has uploaded a new change for review.
https://gerrit.wikimedia.org/r/313833
Change subject: ce.CommentNode: inline preview of comment
......................................................................
ce.CommentNode: inline preview of comment
Bug: T147089
Change-Id: I23eea7593ef2531ae91fa533732cfb5c36b9a4b9
---
M build/modules.json
M demos/ve/desktop.html
M demos/ve/mobile.html
M src/ce/nodes/ve.ce.CommentNode.js
A src/ce/styles/nodes/ve.ce.CommentNode.css
M tests/dm/ve.dm.example.js
6 files changed, 72 insertions(+), 4 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor
refs/changes/33/313833/1
diff --git a/build/modules.json b/build/modules.json
index 195b5f5..08e62b5 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -533,6 +533,7 @@
"src/ce/styles/nodes/ve.ce.DocumentNode.css",
"src/ce/styles/nodes/ve.ce.GeneratedContentNode.css",
"src/ce/styles/nodes/ve.ce.HorizontalRuleNode.css",
+ "src/ce/styles/nodes/ve.ce.CommentNode.css",
"src/ce/styles/annotations/ve.ce.LanguageAnnotation.css",
"src/ce/styles/annotations/ve.ce.LinkAnnotation.css",
"src/ce/styles/nodes/ve.ce.ResizableNode.css",
diff --git a/demos/ve/desktop.html b/demos/ve/desktop.html
index 9ebeb7b..9a2fcfd 100644
--- a/demos/ve/desktop.html
+++ b/demos/ve/desktop.html
@@ -35,6 +35,7 @@
<link rel=stylesheet
href="../../src/ce/styles/nodes/ve.ce.DocumentNode.css" class="stylesheet-ve">
<link rel=stylesheet
href="../../src/ce/styles/nodes/ve.ce.GeneratedContentNode.css"
class="stylesheet-ve">
<link rel=stylesheet
href="../../src/ce/styles/nodes/ve.ce.HorizontalRuleNode.css"
class="stylesheet-ve">
+ <link rel=stylesheet
href="../../src/ce/styles/nodes/ve.ce.CommentNode.css" class="stylesheet-ve">
<link rel=stylesheet
href="../../src/ce/styles/annotations/ve.ce.LanguageAnnotation.css"
class="stylesheet-ve">
<link rel=stylesheet
href="../../src/ce/styles/annotations/ve.ce.LinkAnnotation.css"
class="stylesheet-ve">
<link rel=stylesheet
href="../../src/ce/styles/nodes/ve.ce.ResizableNode.css" class="stylesheet-ve">
diff --git a/demos/ve/mobile.html b/demos/ve/mobile.html
index 3aa4cb8..4168a23 100644
--- a/demos/ve/mobile.html
+++ b/demos/ve/mobile.html
@@ -35,6 +35,7 @@
<link rel=stylesheet
href="../../src/ce/styles/nodes/ve.ce.DocumentNode.css" class="stylesheet-ve">
<link rel=stylesheet
href="../../src/ce/styles/nodes/ve.ce.GeneratedContentNode.css"
class="stylesheet-ve">
<link rel=stylesheet
href="../../src/ce/styles/nodes/ve.ce.HorizontalRuleNode.css"
class="stylesheet-ve">
+ <link rel=stylesheet
href="../../src/ce/styles/nodes/ve.ce.CommentNode.css" class="stylesheet-ve">
<link rel=stylesheet
href="../../src/ce/styles/annotations/ve.ce.LanguageAnnotation.css"
class="stylesheet-ve">
<link rel=stylesheet
href="../../src/ce/styles/annotations/ve.ce.LinkAnnotation.css"
class="stylesheet-ve">
<link rel=stylesheet
href="../../src/ce/styles/nodes/ve.ce.ResizableNode.css" class="stylesheet-ve">
diff --git a/src/ce/nodes/ve.ce.CommentNode.js
b/src/ce/nodes/ve.ce.CommentNode.js
index 74d7a87..9a6a252 100644
--- a/src/ce/nodes/ve.ce.CommentNode.js
+++ b/src/ce/nodes/ve.ce.CommentNode.js
@@ -22,7 +22,15 @@
// Mixin constructors
ve.ce.FocusableNode.call( this, this.$element, config );
+ this.$element.data( 'view', this );
+
+ // Events
+ this.connect( this, { setup: 'onSetup' } );
+ this.model.connect( this, { attributeChange: 'onAttributeChange' } );
+
// DOM changes
+ this.$text = $( '<span>' ).addClass( 've-ce-commentNode-text' );
+ this.$element.append( this.$text );
this.$element.addClass( 've-ce-commentNode' );
};
@@ -39,6 +47,8 @@
ve.ce.CommentNode.static.iconWhenInvisible = 'notice';
+ve.ce.CommentNode.static.maxCommentLength = 20;
+
/* Static Methods */
/**
@@ -51,8 +61,49 @@
/**
* @inheritdoc ve.ce.FocusableNode
*/
-ve.ce.CommentNode.prototype.hasRendering = function () {
- return false;
+// ve.ce.CommentNode.prototype.hasRendering = function () {
+// return false;
+// };
+
+/**
+ * Update the rendering of the 'text' attribute
+ * when it changes in the model.
+ *
+ * @method
+ * @param {string} key Attribute key
+ * @param {string} from Old value
+ * @param {string} to New value
+ */
+ve.ce.CommentNode.prototype.onAttributeChange = function ( key, from, to ) {
+ switch ( key ) {
+ case 'text':
+ this.updateText( to );
+ break;
+ }
+};
+
+/**
+ * Handle node setup.
+ *
+ * @method
+ */
+ve.ce.CommentNode.prototype.onSetup = function ( ) {
+ this.updateText( this.model.getAttribute( 'text' ) );
+};
+
+ve.ce.CommentNode.prototype.updateText = function ( text ) {
+ // The text preview is a trimmed down version of the actual comment.
This
+ // means that we strip whitespace, replace newlines, and truncate to a
+ // fairly short length. The goal is to provide a fair representation of
+ // typical short comments, and enough context for long comments that the
+ // user can tell whether they want to see the full view by focusing the
+ // node / hovering.
+ text = text.trim().replace( /\n+/, ' ' );
+ if ( text.length > this.constructor.static.maxCommentLength ) {
+ text = ve.graphemeSafeSubstring( text, 0,
this.constructor.static.maxCommentLength ) + '...';
+ }
+ this.$text.text( text );
+ this.$text.toggle( text.length > 0 );
};
/* Registration */
diff --git a/src/ce/styles/nodes/ve.ce.CommentNode.css
b/src/ce/styles/nodes/ve.ce.CommentNode.css
new file mode 100644
index 0000000..8b0d7ff
--- /dev/null
+++ b/src/ce/styles/nodes/ve.ce.CommentNode.css
@@ -0,0 +1,14 @@
+/*!
+ * VisualEditor ContentEditable CommentNode styles.
+ *
+ * @copyright 2011-2016 VisualEditor Team and others; see
http://ve.mit-license.org
+ */
+
+.ve-ce-commentNode-text {
+ border-radius: 0.25em;
+ padding: 0 0.25em;
+ background: #ababab;
+ color: #fff;
+ font-weight: normal;
+ font-family: 'Courier New', 'Courier', monospace;
+}
diff --git a/tests/dm/ve.dm.example.js b/tests/dm/ve.dm.example.js
index e8fdb10..9da3fb0 100644
--- a/tests/dm/ve.dm.example.js
+++ b/tests/dm/ve.dm.example.js
@@ -1724,9 +1724,9 @@
ceHtml: '<p class="ve-ce-branchNode ve-ce-contentBranchNode
ve-ce-paragraphNode">' +
'<b class="ve-ce-textStyleAnnotation
ve-ce-boldAnnotation">' +
ve.dm.example.inlineSlug +
- '<span class="ve-ce-leafNode
ve-ce-focusableNode ve-ce-commentNode" contenteditable="false"></span>' +
+ '<span class="ve-ce-leafNode
ve-ce-focusableNode ve-ce-commentNode" contenteditable="false"><span
class="ve-ce-commentNode-text"></span></span>' +
'bar' +
- '<span class="ve-ce-leafNode
ve-ce-focusableNode ve-ce-commentNode" contenteditable="false"></span>' +
+ '<span class="ve-ce-leafNode
ve-ce-focusableNode ve-ce-commentNode" contenteditable="false"><span
class="ve-ce-commentNode-text"></span></span>' +
'</b>' +
ve.dm.example.inlineSlug +
'</p>'
--
To view, visit https://gerrit.wikimedia.org/r/313833
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I23eea7593ef2531ae91fa533732cfb5c36b9a4b9
Gerrit-PatchSet: 1
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: DLynch <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
