%PDF- %PDF-
| Direktori : /www/varak.net/wiki.varak.net/extensions/VisualEditor/lib/ve/src/ce/nodes/ |
| Current File : /www/varak.net/wiki.varak.net/extensions/VisualEditor/lib/ve/src/ce/nodes/ve.ce.TableCellNode.js |
/*!
* VisualEditor ContentEditable TableCellNode class.
*
* @copyright 2011-2016 VisualEditor Team and others; see http://ve.mit-license.org
*/
/**
* ContentEditable table cell node.
*
* @class
* @extends ve.ce.BranchNode
* @mixins ve.ce.TableCellableNode
* @constructor
* @param {ve.dm.TableCellNode} model Model to observe
* @param {Object} [config] Configuration options
*/
ve.ce.TableCellNode = function VeCeTableCellNode() {
var rowspan, colspan;
// Parent constructor
ve.ce.TableCellNode.super.apply( this, arguments );
// Mixin constructors
ve.ce.TableCellableNode.call( this );
rowspan = this.model.getRowspan();
colspan = this.model.getColspan();
// DOM changes
this.$element
// The following classes can be used here:
// ve-ce-tableCellNode-data
// ve-ce-tableCellNode-header
.addClass( 've-ce-tableCellNode ve-ce-tableCellNode-' + this.model.getAttribute( 'style' ) );
// Set attributes (keep in sync with #onSetup)
if ( rowspan > 1 ) {
this.$element.attr( 'rowspan', rowspan );
}
if ( colspan > 1 ) {
this.$element.attr( 'colspan', colspan );
}
// Add tooltip
this.$element.attr( 'title', ve.msg( 'visualeditor-tablecell-tooltip' ) );
// Events
this.model.connect( this, {
update: 'onUpdate',
attributeChange: 'onAttributeChange'
} );
};
/* Inheritance */
OO.inheritClass( ve.ce.TableCellNode, ve.ce.BranchNode );
OO.mixinClass( ve.ce.TableCellNode, ve.ce.TableCellableNode );
/* Static Properties */
ve.ce.TableCellNode.static.name = 'tableCell';
/* Methods */
/**
* Get the HTML tag name.
*
* Tag name is selected based on the model's style attribute.
*
* @return {string} HTML tag name
* @throws {Error} Invalid style
*/
ve.ce.TableCellNode.prototype.getTagName = function () {
var style = this.model.getAttribute( 'style' ),
types = { data: 'td', header: 'th' };
if ( !Object.prototype.hasOwnProperty.call( types, style ) ) {
throw new Error( 'Invalid style' );
}
return types[ style ];
};
/**
* Set the editing mode of a table cell node
*
* @param {boolean} enable Enable editing
*/
ve.ce.TableCellNode.prototype.setEditing = function ( enable ) {
this.$element
.toggleClass( 've-ce-tableCellNode-editing', enable )
.prop( 'contentEditable', enable.toString() );
this.getRoot().getSurface().setActiveNode( enable ? this : null );
};
/**
* Handle model update events.
*
* If the style changed since last update the DOM wrapper will be replaced with an appropriate one.
*
* @method
*/
ve.ce.TableCellNode.prototype.onUpdate = function () {
this.updateTagName();
};
/**
* @inheritdoc
*/
ve.ce.TableCellNode.prototype.onSetup = function () {
var rowspan, colspan;
// Parent method
ve.ce.TableCellNode.super.prototype.onSetup.call( this );
rowspan = this.model.getRowspan();
colspan = this.model.getColspan();
// Set attributes (duplicated from constructor in case this.$element is replaced)
if ( rowspan > 1 ) {
this.$element.attr( 'rowspan', rowspan );
} else {
this.$element.removeAttr( 'rowspan' );
}
if ( colspan > 1 ) {
this.$element.attr( 'colspan', colspan );
} else {
this.$element.removeAttr( 'colspan' );
}
};
/**
* Handle attribute changes to keep the live HTML element updated.
*/
ve.ce.TableCellNode.prototype.onAttributeChange = function ( key, from, to ) {
switch ( key ) {
case 'colspan':
case 'rowspan':
if ( to > 1 ) {
this.$element.attr( key, to );
} else {
this.$element.removeAttr( key );
}
break;
case 'style':
// The following classes can be used here:
// ve-ce-tableCellNode-data
// ve-ce-tableCellNode-header
this.$element
.removeClass( 've-ce-tableCellNode-' + from )
.addClass( 've-ce-tableCellNode-' + to );
this.updateTagName();
break;
}
};
/* Registration */
ve.ce.nodeFactory.register( ve.ce.TableCellNode );