mediawiki-extensions-Visual.../modules/ve-mw/ce/nodes/ve.ce.MWReferenceListNode.js

198 lines
5.3 KiB
JavaScript
Raw Normal View History

/*!
* VisualEditor ContentEditable MWReferenceListNode class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @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
*
* @constructor
* @param {ve.dm.MWReferenceListNode} model Model to observe
* @param {Object} [config] Config options
*/
ve.ce.MWReferenceListNode = function VeCeMWReferenceListNode( model, config ) {
// Parent constructor
ve.ce.LeafNode.call( this, model, config );
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 );
ve.ce.FocusableNode.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
// Properties
this.internalList = null;
this.listNode = null;
// Initialization
this.$
.addClass( 've-ce-mwReferenceListNode', 'reference' )
.prop( 'contenteditable', false );
this.$reflist = $( '<ol class="references"></ol>' );
this.$refmsg = $( '<p>' )
.addClass( 've-ce-mwReferenceListNode-muted' );
this.update();
};
/* Inheritance */
ve.inheritClass( ve.ce.MWReferenceListNode, 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
ve.mixinClass( ve.ce.MWReferenceListNode, ve.ce.ProtectedNode );
ve.mixinClass( ve.ce.MWReferenceListNode, ve.ce.FocusableNode );
/* Static Properties */
ve.ce.MWReferenceListNode.static.name = 'mwReferenceList';
ve.ce.MWReferenceListNode.static.tagName = 'div';
/* Methods */
/**
* 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 );
};
/**
* 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();
}
};
/**
* Handle attribute change events.
*
* @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();
}
};
/**
* 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 () {
var i, j, iLen, jLen, index, firstNode, key, keyedNodes, $li, modelNode, viewNode,
internalList = this.model.getDocument().internalList,
refGroup = this.model.getAttribute( 'refGroup' ),
listGroup = this.model.getAttribute( 'listGroup' ),
nodes = internalList.getNodeGroup( listGroup );
this.$reflist.detach().empty();
this.$refmsg.detach();
if ( !nodes || !nodes.indexOrder.length ) {
this.$refmsg.text( ve.msg( 'visualeditor-referencelist-isempty', refGroup ) );
this.$.append( this.$refmsg );
} else {
for ( i = 0, iLen = nodes.indexOrder.length; i < iLen; i++ ) {
index = nodes.indexOrder[i];
firstNode = nodes.firstNodes[index];
$li = $( '<li>' );
key = internalList.keys[index];
keyedNodes = nodes.keyedNodes[key] || [];
for ( j = 0, jLen = keyedNodes.length; j < jLen; j++ ) {
if ( keyedNodes.length > 1 ) {
$li.append(
$( '<sup>' ).append(
$( '<a>' ).text( ( i + 1 ) + '.' + j )
)
).append( ' ' );
}
}
// Generate reference HTML from first item in key
modelNode = internalList.getItemNode( firstNode.getAttribute( 'listIndex' ) );
if ( modelNode.length ) {
viewNode = new ve.ce.InternalItemNode( modelNode );
// HACK: PHP parser doesn't wrap single lines in a paragraph
if ( viewNode.$.children().length === 1 && viewNode.$.children( 'p' ).length === 1 ) {
// unwrap inner
viewNode.$.children().replaceWith( viewNode.$.children().contents() );
}
$li.append(
$( '<span>' )
.addClass( 'reference-text' )
.append( viewNode.$.clone().show() )
);
viewNode.destroy();
} else {
$li.append(
$( '<span>' )
.addClass( 've-ce-mwReferenceListNode-muted' )
.text( ve.msg( 'visualeditor-referencelist-missingref' ) )
);
}
this.$reflist.append( $li );
}
this.$.append( this.$reflist );
}
};
/* Registration */
ve.ce.nodeFactory.register( ve.ce.MWReferenceListNode );