From 2f3fc5594dca78fc0f6dc7097e76c7081ecd9a07 Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Wed, 27 Mar 2019 12:54:18 +0000
Subject: [PATCH] =?UTF-8?q?Render=20placeholder=20citation=20as=20[?=
 =?UTF-8?q?=E2=80=A6]=20to=20show=20it=20isn't=20finished?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug: T220502
Change-Id: I11f2aea22d9b9c83d7a642e86e0c2f4c2fb3a430
---
 modules/ve-cite/ve.ce.MWReferenceNode.css |  4 ++++
 modules/ve-cite/ve.ce.MWReferenceNode.js  | 21 +++++++++++++++++++--
 modules/ve-cite/ve.dm.MWReferenceNode.js  |  3 ++-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/modules/ve-cite/ve.ce.MWReferenceNode.css b/modules/ve-cite/ve.ce.MWReferenceNode.css
index 84e7470fc..df85398a5 100644
--- a/modules/ve-cite/ve.ce.MWReferenceNode.css
+++ b/modules/ve-cite/ve.ce.MWReferenceNode.css
@@ -22,3 +22,7 @@
 	font-size: 0;
 	display: inline;
 }
+
+.ve-ce-mwReferenceNode-placeholder a:after {
+	content: '[…]';
+}
diff --git a/modules/ve-cite/ve.ce.MWReferenceNode.js b/modules/ve-cite/ve.ce.MWReferenceNode.js
index 9a4b471ea..5b41c4215 100644
--- a/modules/ve-cite/ve.ce.MWReferenceNode.js
+++ b/modules/ve-cite/ve.ce.MWReferenceNode.js
@@ -37,8 +37,11 @@ ve.ce.MWReferenceNode = function VeCeMWReferenceNode() {
 	this.internalList = this.model.getDocument().internalList;
 
 	// Events
-	this.connect( this, { setup: 'onSetup' } );
-	this.connect( this, { teardown: 'onTeardown' } );
+	this.connect( this, {
+		setup: 'onSetup',
+		teardown: 'onTeardown'
+	} );
+	this.model.connect( this, { attributeChange: 'onAttributeChange' } );
 
 	// Initialization
 	this.update();
@@ -93,6 +96,19 @@ ve.ce.MWReferenceNode.prototype.onInternalListUpdate = function ( groupsChanged
 	}
 };
 
+/**
+ * Handle attribute change events
+ *
+ * @param {string} key Attribute key
+ * @param {string} from Old value
+ * @param {string} to New value
+ */
+ve.ce.MWReferenceNode.prototype.onAttributeChange = function ( key ) {
+	if ( key === 'placeholder' ) {
+		this.update();
+	}
+};
+
 /**
  * @inheritdoc ve.ce.FocusableNode
  */
@@ -123,6 +139,7 @@ ve.ce.MWReferenceNode.prototype.update = function () {
 	} else {
 		this.$link.removeAttr( 'data-mw-group' );
 	}
+	this.$element.toggleClass( 've-ce-mwReferenceNode-placeholder', !!this.model.getAttribute( 'placeholder' ) );
 };
 
 /* Registration */
diff --git a/modules/ve-cite/ve.dm.MWReferenceNode.js b/modules/ve-cite/ve.dm.MWReferenceNode.js
index 556912876..fa5041770 100644
--- a/modules/ve-cite/ve.dm.MWReferenceNode.js
+++ b/modules/ve-cite/ve.dm.MWReferenceNode.js
@@ -313,7 +313,8 @@ ve.dm.MWReferenceNode.static.getGroup = function ( dataElement ) {
  */
 ve.dm.MWReferenceNode.static.getIndexLabel = function ( dataElement, internalList ) {
 	var refGroup = dataElement.attributes.refGroup,
-		index = ve.dm.MWReferenceNode.static.getIndex( dataElement, internalList );
+		index = dataElement.attributes.placeholder ? '…' :
+			ve.dm.MWReferenceNode.static.getIndex( dataElement, internalList );
 
 	return '[' + ( refGroup ? refGroup + ' ' : '' ) + index + ']';
 };