2013-04-17 17:53:26 +00:00
|
|
|
/*!
|
|
|
|
* VisualEditor ContentEditable MWReferenceListNode class.
|
|
|
|
*
|
2014-01-05 12:05:05 +00:00
|
|
|
* @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
|
2013-04-17 17:53:26 +00:00
|
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* ContentEditable MediaWiki reference list node.
|
|
|
|
*
|
|
|
|
* @class
|
|
|
|
* @extends ve.ce.LeafNode
|
ve.ce.ProtectedNode
Objective:
Generalize the shield and phantom magic, so we can use it for pretty much
any node we like. Usually this will be used with generated content nodes,
but also with aliens (of course) and possible other stuff in the future.
Bonus:
Also fixes a bug in DM that would crash VE when you selected to the end
and hit backspace.
Changes:
*.php
* Added links to files
aliens.html
* Added attributes to aliens to make them aliens again
ve.ce.AlienNode.js
* Moved shield and phantom functionality to ve.ce.ProtectedNode
ve.ce.AlienNode.js, ve.ce.MWReferenceListNode.js,
ve.ce.MWReferenceNode.js, ve.ce.MWTemplateNode.js
* Mixed in ve.ce.ProtectedNode
ve.ce.Node.css
* Reorganized styles and updated class names
* Added simple light blue hover with outline (using inset box shadow) for
protected nodes, same style as before for aliens
ve.ce.Surface.css
* Moved phantom styles to ve.ce.Node.css
ve.ce.BranchNode.js
* Moved call to setLive(false) to happen before detach() so that the
surface object is still available and events can be disconnected
ve.ce.BranchNode.js, ve.ce.Document.js, ve.ce.js, ve.ce.Surface.js, ve.ce.SurfaceObserver.js
* Adjusted CSS class names
ve.ce.Node.js
* Moved shield template to ve.ce.ProtectedNode
ve.ce.ProtectedNode.js
* New class, mix into another class to protect it from editing
ve.ce.RelocatableNode.js
* Renamed temporary surface property to relocatingSurface to avoid
confusion when debugging
ve.ce.Surface.js
* Moved phantom template to ve.ce.ProtectedNode
ve.dm.Transaction.js
* Fixed bug where most of the internal list was being deleted when the
end of the document was selected and the user pressed backspace
Change-Id: I2468b16e1ba6785ad298e38190e33493135719c3
2013-05-07 00:07:01 +00:00
|
|
|
* @mixins ve.ce.ProtectedNode
|
|
|
|
*
|
2013-04-17 17:53:26 +00:00
|
|
|
* @constructor
|
|
|
|
* @param {ve.dm.MWReferenceListNode} model Model to observe
|
2013-09-25 10:21:09 +00:00
|
|
|
* @param {Object} [config] Configuration options
|
2013-04-17 17:53:26 +00:00
|
|
|
*/
|
ve.Element refactor
Objectives:
* Move ve.ui.Element to ve.Element
* Make CE nodes inherit from ve.Element
Changes:
ve.ui.Element.js, ve.Element.js
* Move and rename
* Move ve.ui.get$$ to ve.Element.static.get$$
* Add static getDocument and getWindow methods
* Add instance getElementDocument and getElementWindow methods
* Add getTagName method, which by default reads the static tagName property, but when overridden can return a tag name based on other factors
*.php
* Updated file link
ve.ce.*Annotation.js, ve.ce.*Node.js, ve.ce.View.js, ve.ce.Document
* Added config options pass through
* Replaced passing elements through constructor with defining static tag names
* Added getTagName overrides where needed that derive tag name from model
* Refactore dom wrapper methods, now consistently using getTagName
ve.ce.Surface.js
* Removed static initialization (not needed)
ve.dm.Model.js, ve.ui.Window.js
* Added missing docs
ve.ui.GroupElement.js, ve.ui.Layout.js, ve.ui.Widget.js,
* Updated class name for elements
ve.ui.Frame.js, ve.ui.LookupInputWidget.js
* Updated location of get$$
ve.ui.js
* Move get$$ to ve.Element
ve.js
* Add auto-init of static properties to mixinClass
Change-Id: I39ae14966456903728e4d9e53f806ddce9ca2b70
2013-05-13 20:52:59 +00:00
|
|
|
ve.ce.MWReferenceListNode = function VeCeMWReferenceListNode( model, config ) {
|
2013-04-17 17:53:26 +00:00
|
|
|
// Parent constructor
|
ve.Element refactor
Objectives:
* Move ve.ui.Element to ve.Element
* Make CE nodes inherit from ve.Element
Changes:
ve.ui.Element.js, ve.Element.js
* Move and rename
* Move ve.ui.get$$ to ve.Element.static.get$$
* Add static getDocument and getWindow methods
* Add instance getElementDocument and getElementWindow methods
* Add getTagName method, which by default reads the static tagName property, but when overridden can return a tag name based on other factors
*.php
* Updated file link
ve.ce.*Annotation.js, ve.ce.*Node.js, ve.ce.View.js, ve.ce.Document
* Added config options pass through
* Replaced passing elements through constructor with defining static tag names
* Added getTagName overrides where needed that derive tag name from model
* Refactore dom wrapper methods, now consistently using getTagName
ve.ce.Surface.js
* Removed static initialization (not needed)
ve.dm.Model.js, ve.ui.Window.js
* Added missing docs
ve.ui.GroupElement.js, ve.ui.Layout.js, ve.ui.Widget.js,
* Updated class name for elements
ve.ui.Frame.js, ve.ui.LookupInputWidget.js
* Updated location of get$$
ve.ui.js
* Move get$$ to ve.Element
ve.js
* Add auto-init of static properties to mixinClass
Change-Id: I39ae14966456903728e4d9e53f806ddce9ca2b70
2013-05-13 20:52:59 +00:00
|
|
|
ve.ce.LeafNode.call( this, model, config );
|
2013-04-17 17:53:26 +00:00
|
|
|
|
ve.ce.ProtectedNode
Objective:
Generalize the shield and phantom magic, so we can use it for pretty much
any node we like. Usually this will be used with generated content nodes,
but also with aliens (of course) and possible other stuff in the future.
Bonus:
Also fixes a bug in DM that would crash VE when you selected to the end
and hit backspace.
Changes:
*.php
* Added links to files
aliens.html
* Added attributes to aliens to make them aliens again
ve.ce.AlienNode.js
* Moved shield and phantom functionality to ve.ce.ProtectedNode
ve.ce.AlienNode.js, ve.ce.MWReferenceListNode.js,
ve.ce.MWReferenceNode.js, ve.ce.MWTemplateNode.js
* Mixed in ve.ce.ProtectedNode
ve.ce.Node.css
* Reorganized styles and updated class names
* Added simple light blue hover with outline (using inset box shadow) for
protected nodes, same style as before for aliens
ve.ce.Surface.css
* Moved phantom styles to ve.ce.Node.css
ve.ce.BranchNode.js
* Moved call to setLive(false) to happen before detach() so that the
surface object is still available and events can be disconnected
ve.ce.BranchNode.js, ve.ce.Document.js, ve.ce.js, ve.ce.Surface.js, ve.ce.SurfaceObserver.js
* Adjusted CSS class names
ve.ce.Node.js
* Moved shield template to ve.ce.ProtectedNode
ve.ce.ProtectedNode.js
* New class, mix into another class to protect it from editing
ve.ce.RelocatableNode.js
* Renamed temporary surface property to relocatingSurface to avoid
confusion when debugging
ve.ce.Surface.js
* Moved phantom template to ve.ce.ProtectedNode
ve.dm.Transaction.js
* Fixed bug where most of the internal list was being deleted when the
end of the document was selected and the user pressed backspace
Change-Id: I2468b16e1ba6785ad298e38190e33493135719c3
2013-05-07 00:07:01 +00:00
|
|
|
// Mixin constructors
|
|
|
|
ve.ce.ProtectedNode.call( this );
|
2013-06-17 20:50:47 +00:00
|
|
|
ve.ce.FocusableNode.call( this );
|
2013-12-20 23:25:24 +00:00
|
|
|
ve.ce.ClickableNode.call( this );
|
ve.ce.ProtectedNode
Objective:
Generalize the shield and phantom magic, so we can use it for pretty much
any node we like. Usually this will be used with generated content nodes,
but also with aliens (of course) and possible other stuff in the future.
Bonus:
Also fixes a bug in DM that would crash VE when you selected to the end
and hit backspace.
Changes:
*.php
* Added links to files
aliens.html
* Added attributes to aliens to make them aliens again
ve.ce.AlienNode.js
* Moved shield and phantom functionality to ve.ce.ProtectedNode
ve.ce.AlienNode.js, ve.ce.MWReferenceListNode.js,
ve.ce.MWReferenceNode.js, ve.ce.MWTemplateNode.js
* Mixed in ve.ce.ProtectedNode
ve.ce.Node.css
* Reorganized styles and updated class names
* Added simple light blue hover with outline (using inset box shadow) for
protected nodes, same style as before for aliens
ve.ce.Surface.css
* Moved phantom styles to ve.ce.Node.css
ve.ce.BranchNode.js
* Moved call to setLive(false) to happen before detach() so that the
surface object is still available and events can be disconnected
ve.ce.BranchNode.js, ve.ce.Document.js, ve.ce.js, ve.ce.Surface.js, ve.ce.SurfaceObserver.js
* Adjusted CSS class names
ve.ce.Node.js
* Moved shield template to ve.ce.ProtectedNode
ve.ce.ProtectedNode.js
* New class, mix into another class to protect it from editing
ve.ce.RelocatableNode.js
* Renamed temporary surface property to relocatingSurface to avoid
confusion when debugging
ve.ce.Surface.js
* Moved phantom template to ve.ce.ProtectedNode
ve.dm.Transaction.js
* Fixed bug where most of the internal list was being deleted when the
end of the document was selected and the user pressed backspace
Change-Id: I2468b16e1ba6785ad298e38190e33493135719c3
2013-05-07 00:07:01 +00:00
|
|
|
|
2013-07-02 19:06:56 +00:00
|
|
|
// Properties
|
|
|
|
this.internalList = null;
|
|
|
|
this.listNode = null;
|
|
|
|
|
2013-08-28 23:18:55 +00:00
|
|
|
// DOM changes
|
2013-11-01 19:45:59 +00:00
|
|
|
this.$element.addClass( 've-ce-mwReferenceListNode', 'reference' );
|
|
|
|
this.$reflist = this.$( '<ol class="references"></ol>' );
|
|
|
|
this.$refmsg = this.$( '<p>' )
|
2013-06-21 02:55:16 +00:00
|
|
|
.addClass( 've-ce-mwReferenceListNode-muted' );
|
2013-08-28 23:18:55 +00:00
|
|
|
|
2013-10-11 12:33:53 +00:00
|
|
|
// Events
|
|
|
|
this.model.connect( this, { 'attributeChange': 'onAttributeChange' } );
|
|
|
|
|
2013-08-28 23:18:55 +00:00
|
|
|
// Initialization
|
2013-06-03 20:22:35 +00:00
|
|
|
this.update();
|
2013-04-17 17:53:26 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/* Inheritance */
|
|
|
|
|
2013-10-11 21:44:09 +00:00
|
|
|
OO.inheritClass( ve.ce.MWReferenceListNode, ve.ce.LeafNode );
|
2013-04-17 17:53:26 +00:00
|
|
|
|
2013-10-11 21:44:09 +00:00
|
|
|
OO.mixinClass( ve.ce.MWReferenceListNode, ve.ce.ProtectedNode );
|
ve.ce.ProtectedNode
Objective:
Generalize the shield and phantom magic, so we can use it for pretty much
any node we like. Usually this will be used with generated content nodes,
but also with aliens (of course) and possible other stuff in the future.
Bonus:
Also fixes a bug in DM that would crash VE when you selected to the end
and hit backspace.
Changes:
*.php
* Added links to files
aliens.html
* Added attributes to aliens to make them aliens again
ve.ce.AlienNode.js
* Moved shield and phantom functionality to ve.ce.ProtectedNode
ve.ce.AlienNode.js, ve.ce.MWReferenceListNode.js,
ve.ce.MWReferenceNode.js, ve.ce.MWTemplateNode.js
* Mixed in ve.ce.ProtectedNode
ve.ce.Node.css
* Reorganized styles and updated class names
* Added simple light blue hover with outline (using inset box shadow) for
protected nodes, same style as before for aliens
ve.ce.Surface.css
* Moved phantom styles to ve.ce.Node.css
ve.ce.BranchNode.js
* Moved call to setLive(false) to happen before detach() so that the
surface object is still available and events can be disconnected
ve.ce.BranchNode.js, ve.ce.Document.js, ve.ce.js, ve.ce.Surface.js, ve.ce.SurfaceObserver.js
* Adjusted CSS class names
ve.ce.Node.js
* Moved shield template to ve.ce.ProtectedNode
ve.ce.ProtectedNode.js
* New class, mix into another class to protect it from editing
ve.ce.RelocatableNode.js
* Renamed temporary surface property to relocatingSurface to avoid
confusion when debugging
ve.ce.Surface.js
* Moved phantom template to ve.ce.ProtectedNode
ve.dm.Transaction.js
* Fixed bug where most of the internal list was being deleted when the
end of the document was selected and the user pressed backspace
Change-Id: I2468b16e1ba6785ad298e38190e33493135719c3
2013-05-07 00:07:01 +00:00
|
|
|
|
2013-10-11 21:44:09 +00:00
|
|
|
OO.mixinClass( ve.ce.MWReferenceListNode, ve.ce.FocusableNode );
|
2013-06-17 20:50:47 +00:00
|
|
|
|
2013-12-20 23:25:24 +00:00
|
|
|
OO.mixinClass( ve.ce.MWReferenceListNode, ve.ce.ClickableNode );
|
|
|
|
|
2013-04-17 17:53:26 +00:00
|
|
|
/* Static Properties */
|
|
|
|
|
2013-05-28 11:31:41 +00:00
|
|
|
ve.ce.MWReferenceListNode.static.name = 'mwReferenceList';
|
2013-04-17 17:53:26 +00:00
|
|
|
|
2013-06-06 00:48:16 +00:00
|
|
|
ve.ce.MWReferenceListNode.static.tagName = 'div';
|
|
|
|
|
2013-12-20 23:25:24 +00:00
|
|
|
ve.ce.MWReferenceListNode.static.primaryCommandName = 'referenceList';
|
|
|
|
|
2013-04-17 17:53:26 +00:00
|
|
|
/* Methods */
|
|
|
|
|
2013-07-02 19:06:56 +00:00
|
|
|
/**
|
|
|
|
* Handle setup events.
|
|
|
|
*
|
|
|
|
* @method
|
|
|
|
*/
|
|
|
|
ve.ce.MWReferenceListNode.prototype.onSetup = function () {
|
|
|
|
this.internalList = this.model.getDocument().getInternalList();
|
|
|
|
this.listNode = this.internalList.getListNode();
|
|
|
|
|
|
|
|
this.internalList.connect( this, { 'update': 'onInternalListUpdate' } );
|
|
|
|
this.listNode.connect( this, { 'update': 'onListNodeUpdate' } );
|
|
|
|
|
|
|
|
// Parent method
|
|
|
|
ve.ce.LeafNode.prototype.onSetup.call( this );
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handle teardown events.
|
|
|
|
*
|
|
|
|
* @method
|
|
|
|
*/
|
|
|
|
ve.ce.MWReferenceListNode.prototype.onTeardown = function () {
|
|
|
|
this.internalList.disconnect( this, { 'update': 'onInternalListUpdate' } );
|
|
|
|
this.listNode.disconnect( this, { 'update': 'onListNodeUpdate' } );
|
|
|
|
|
|
|
|
this.internalList = null;
|
|
|
|
this.listNode = null;
|
|
|
|
|
|
|
|
// Parent method
|
|
|
|
ve.ce.LeafNode.prototype.onTeardown.call( this );
|
|
|
|
};
|
|
|
|
|
2013-06-03 20:22:35 +00:00
|
|
|
/**
|
|
|
|
* Handle the updating of the InternalList object.
|
|
|
|
*
|
|
|
|
* This will occur after a document transaction.
|
|
|
|
*
|
|
|
|
* @method
|
|
|
|
* @param {string[]} groupsChanged A list of groups which have changed in this transaction
|
|
|
|
*/
|
|
|
|
ve.ce.MWReferenceListNode.prototype.onInternalListUpdate = function ( groupsChanged ) {
|
|
|
|
// Only update if this group has been changed
|
|
|
|
if ( ve.indexOf( this.model.getAttribute( 'listGroup' ), groupsChanged ) !== -1 ) {
|
|
|
|
this.update();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2013-06-21 02:55:16 +00:00
|
|
|
/**
|
2013-10-11 12:33:53 +00:00
|
|
|
* Rerender when the 'listGroup' attribute changes in the model.
|
2013-06-21 02:55:16 +00:00
|
|
|
*
|
|
|
|
* @param {string} key Attribute key
|
|
|
|
* @param {string} from Old value
|
|
|
|
* @param {string} to New value
|
|
|
|
*/
|
|
|
|
ve.ce.MWReferenceListNode.prototype.onAttributeChange = function ( key ) {
|
|
|
|
if ( key === 'listGroup' ) {
|
|
|
|
this.update();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2013-06-03 20:22:35 +00:00
|
|
|
/**
|
|
|
|
* Handle the updating of the InternalListNode.
|
|
|
|
*
|
|
|
|
* This will occur after changes to any InternalItemNode.
|
|
|
|
*
|
|
|
|
* @method
|
|
|
|
*/
|
|
|
|
ve.ce.MWReferenceListNode.prototype.onListNodeUpdate = function () {
|
|
|
|
// When the list node updates we're not sure which list group the item
|
|
|
|
// belonged to so we always update
|
|
|
|
// TODO: Only re-render the reference which has been edited
|
|
|
|
this.update();
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Update the reference list.
|
|
|
|
*/
|
|
|
|
ve.ce.MWReferenceListNode.prototype.update = function () {
|
2013-06-13 08:30:13 +00:00
|
|
|
var i, j, iLen, jLen, index, firstNode, key, keyedNodes, $li, modelNode, viewNode,
|
2013-06-03 20:22:35 +00:00
|
|
|
internalList = this.model.getDocument().internalList,
|
2013-06-21 02:55:16 +00:00
|
|
|
refGroup = this.model.getAttribute( 'refGroup' ),
|
2013-06-03 20:22:35 +00:00
|
|
|
listGroup = this.model.getAttribute( 'listGroup' ),
|
|
|
|
nodes = internalList.getNodeGroup( listGroup );
|
|
|
|
|
2013-06-21 02:55:16 +00:00
|
|
|
this.$reflist.detach().empty();
|
|
|
|
this.$refmsg.detach();
|
|
|
|
|
|
|
|
if ( !nodes || !nodes.indexOrder.length ) {
|
2013-09-30 12:09:20 +00:00
|
|
|
if ( refGroup !== '' ) {
|
|
|
|
this.$refmsg.text( ve.msg( 'visualeditor-referencelist-isempty', refGroup ) );
|
|
|
|
} else {
|
|
|
|
this.$refmsg.text( ve.msg( 'visualeditor-referencelist-isempty-default' ) );
|
|
|
|
}
|
2013-11-01 19:45:59 +00:00
|
|
|
this.$element.append( this.$refmsg );
|
2013-06-21 02:55:16 +00:00
|
|
|
} else {
|
2013-06-07 16:58:34 +00:00
|
|
|
for ( i = 0, iLen = nodes.indexOrder.length; i < iLen; i++ ) {
|
|
|
|
index = nodes.indexOrder[i];
|
|
|
|
firstNode = nodes.firstNodes[index];
|
2013-06-03 20:22:35 +00:00
|
|
|
|
2013-06-07 16:58:34 +00:00
|
|
|
key = internalList.keys[index];
|
2013-08-27 20:51:48 +00:00
|
|
|
keyedNodes = nodes.keyedNodes[key];
|
2013-07-25 17:11:50 +00:00
|
|
|
// Exclude references defined inside the reference list node
|
|
|
|
/*jshint loopfunc:true */
|
|
|
|
keyedNodes = keyedNodes.filter( function ( node ) {
|
|
|
|
while ( ( node = node.parent ) && node !== null ) {
|
|
|
|
if ( node instanceof ve.dm.MWReferenceListNode ) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
} );
|
|
|
|
|
2013-08-27 20:51:48 +00:00
|
|
|
if ( !keyedNodes.length ) {
|
2013-07-25 17:11:50 +00:00
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
2013-11-01 19:45:59 +00:00
|
|
|
$li = this.$( '<li>' );
|
2013-07-25 17:11:50 +00:00
|
|
|
|
|
|
|
if ( keyedNodes.length > 1 ) {
|
|
|
|
for ( j = 0, jLen = keyedNodes.length; j < jLen; j++ ) {
|
2013-06-03 20:22:35 +00:00
|
|
|
$li.append(
|
2013-11-01 19:45:59 +00:00
|
|
|
this.$( '<sup>' ).append(
|
|
|
|
this.$( '<a>' ).text( ( i + 1 ) + '.' + j )
|
2013-06-03 20:22:35 +00:00
|
|
|
)
|
|
|
|
).append( ' ' );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Generate reference HTML from first item in key
|
2013-06-13 08:30:13 +00:00
|
|
|
modelNode = internalList.getItemNode( firstNode.getAttribute( 'listIndex' ) );
|
2013-12-12 23:02:10 +00:00
|
|
|
if ( modelNode && modelNode.length ) {
|
2013-06-13 08:30:13 +00:00
|
|
|
viewNode = new ve.ce.InternalItemNode( modelNode );
|
|
|
|
// HACK: PHP parser doesn't wrap single lines in a paragraph
|
2013-11-01 19:45:59 +00:00
|
|
|
if ( viewNode.$element.children().length === 1 && viewNode.$element.children( 'p' ).length === 1 ) {
|
2013-06-13 08:30:13 +00:00
|
|
|
// unwrap inner
|
2013-11-01 19:45:59 +00:00
|
|
|
viewNode.$element.children().replaceWith( viewNode.$element.children().contents() );
|
2013-06-13 08:30:13 +00:00
|
|
|
}
|
|
|
|
$li.append(
|
2013-11-01 19:45:59 +00:00
|
|
|
this.$( '<span>' )
|
2013-06-13 08:30:13 +00:00
|
|
|
.addClass( 'reference-text' )
|
2013-11-01 19:45:59 +00:00
|
|
|
.append( viewNode.$element.clone().show() )
|
2013-06-13 08:30:13 +00:00
|
|
|
);
|
|
|
|
viewNode.destroy();
|
|
|
|
} else {
|
|
|
|
$li.append(
|
2013-11-01 19:45:59 +00:00
|
|
|
this.$( '<span>' )
|
2013-06-13 08:30:13 +00:00
|
|
|
.addClass( 've-ce-mwReferenceListNode-muted' )
|
|
|
|
.text( ve.msg( 'visualeditor-referencelist-missingref' ) )
|
|
|
|
);
|
2013-06-07 16:58:34 +00:00
|
|
|
}
|
2013-06-13 08:30:13 +00:00
|
|
|
|
2013-06-06 00:48:16 +00:00
|
|
|
this.$reflist.append( $li );
|
2013-06-03 20:22:35 +00:00
|
|
|
}
|
2013-11-01 19:45:59 +00:00
|
|
|
this.$element.append( this.$reflist );
|
2013-06-21 02:55:16 +00:00
|
|
|
}
|
2013-04-17 17:53:26 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/* Registration */
|
|
|
|
|
|
|
|
ve.ce.nodeFactory.register( ve.ce.MWReferenceListNode );
|