mediawiki-extensions-VisualEditor/modules/ve-mw/ce/nodes/ve.ce.MWLanguageVariantNode.js

/*!
 * VisualEditor ContentEditable MWLanguageVariantNode class.
 *
 * @copyright 2011-2017 VisualEditor Team and others; see AUTHORS.txt
 * @license The MIT License (MIT); see LICENSE.txt
 */

/**
 * ContentEditable MediaWiki language variant node, used for
 * LanguageConverter markup.
 *
 * @class
 * @abstract
 * @extends ve.ce.LeafNode
 * @mixins ve.ce.FocusableNode
 * @constructor
 * @param {ve.dm.MWLanguageVariantNode} model Model to observe
 * @param {Object} [config] Configuration options
 */
ve.ce.MWLanguageVariantNode = function VeCeMWLanguageVariantNode( model, config ) {
	// Parent constructor
	ve.ce.MWLanguageVariantNode.super.call( this, model, config );

	// Mixin constructors
	ve.ce.FocusableNode.call( this, this.$element, config );

	// DOM changes
	this.$element.addClass( 've-ce-mwLanguageVariantNode' );
	this.$holder = this.appendHolder(); // null for a hidden node

	// Events
	this.model.connect( this, { update: 'onUpdate' } );
	this.model.connect( this, { update: 'updateInvisibleIcon' } );

	// Initialization
	this.onUpdate();
};

/* Inheritance */

OO.inheritClass( ve.ce.MWLanguageVariantNode, ve.ce.LeafNode );

OO.mixinClass( ve.ce.MWLanguageVariantNode, ve.ce.FocusableNode );

/* Static Properties */

ve.ce.MWLanguageVariantNode.static.iconWhenInvisible = 'language';

ve.ce.MWLanguageVariantNode.static.maxPreviewLength = 20;

/* Static Methods */

/**
 * @inheritdoc
 */
ve.ce.MWLanguageVariantNode.static.getDescription = function ( model ) {
	// This is shown when you hover over the node.
	var variantInfo = model.getVariantInfo(),
		messageKey = 'visualeditor-mwlanguagevariant-' + model.getRuleType(),
		languageCodes = [],
		languageString;
	if ( variantInfo.name ) {
		languageCodes = [ variantInfo.name.t ];
	} else if ( variantInfo.filter ) {
		languageCodes = variantInfo.filter.l;
	} else if ( variantInfo.twoway ) {
		languageCodes = variantInfo.twoway.map( function ( item ) {
			return item.l;
		} );
	} else if ( variantInfo.oneway ) {
		languageCodes = variantInfo.oneway.map( function ( item ) {
			return item.l;
		} );
	}
	languageString = languageCodes.map( function ( code ) {
		return ve.init.platform.getLanguageName( code.toLowerCase() );
	} ).join( ve.msg( 'comma-separator' ) );
	return ve.msg( messageKey, languageString );
};

/**
 * Create a preview-safe version of some text
 *
 * The text preview is a trimmed down version of the actual rule. This
 * means that we strip whitespace and newlines, and truncate to a
 * fairly short length. The goal is to provide a fair representation of
 * typical short rules, and enough context for long rules that the
 * user can tell whether they want to see the full view by focusing the
 * node / hovering.
 *
 * @param  {string} text
 * @return {string|OO.ui.HtmlSnippet}
 */
ve.ce.MWLanguageVariantNode.static.getTextPreview = function ( text ) {
	text = text.trim().replace( /\s+/, ' ' );
	if ( text.length > this.maxPreviewLength ) {
		text = new OO.ui.HtmlSnippet( ve.escapeHtml( ve.graphemeSafeSubstring( text, 0, this.maxPreviewLength ) ) + '…' );
	}
	return text;
};

/* Methods */

/**
 * Handle model update events.
 *
 * @method
 */
ve.ce.MWLanguageVariantNode.prototype.onUpdate = function () {
	var variantInfo = this.model.getVariantInfo(),
		$element,
		html;
	if ( this.model.isHidden() ) {
		$element = $( '<div>' );
		this.model.constructor.static.insertPreviewElements(
			// For compactness, just annotate hidden rule w/ its
			// current variant output.
			$element[ 0 ], variantInfo
		);
		// Create plain-text summary of this rule (ellipsize if necessary)
		html = this.constructor.static.getTextPreview( $element.text() );
		if ( this.icon ) {
			this.icon.setLabel( html );
		}
	} else {
		this.model.constructor.static.insertPreviewElements(
			this.$holder[ 0 ], variantInfo
		);
		if ( this.icon ) {
			this.icon.setLabel( null );
		}
	}
};

/**
 * Create a {jQuery} appropriate for holding the output of this
 * conversion rule.
 * @method
 * @return {jQuery}
 */
ve.ce.MWLanguageVariantNode.prototype.appendHolder = function () {
	var tagName = this.constructor.static.tagName,
		document = this.$element[ 0 ].ownerDocument,
		$holder = $( document.createElement( tagName ) );
	$holder.addClass( 've-ce-mwLanguageVariantNode-holder' );
	this.$element.append( $holder );
	return $holder;
};

/**
 * @inheritdoc
 */
ve.ce.MWLanguageVariantNode.prototype.createInvisibleIcon = function () {
	// Unlike ancestor method, this adds a label to the (unframed) icon.
	var icon = new OO.ui.ButtonWidget( {
		classes: [ 've-ce-focusableNode-invisibleIcon' ],
		framed: false,
		icon: this.constructor.static.iconWhenInvisible
	} );
	this.icon = icon;
	this.onUpdate(); // update label of icon
	return icon.$element;
};

/**
 * ContentEditable MediaWiki language variant block node.
 *
 * @class
 * @extends ve.ce.MWLanguageVariantNode
 *
 * @constructor
 * @param {ve.dm.MWLanguageVariantBlockNode} model Model to observe
 * @param {Object} [config] Configuration options
 */
ve.ce.MWLanguageVariantBlockNode = function VeCeMWLanguageVariantBlockNode() {
	// Parent constructor
	ve.ce.MWLanguageVariantBlockNode.super.apply( this, arguments );
};

/* Inheritance */

OO.inheritClass( ve.ce.MWLanguageVariantBlockNode, ve.ce.MWLanguageVariantNode );

ve.ce.MWLanguageVariantBlockNode.static.name = 'mwLanguageVariantBlock';

ve.ce.MWLanguageVariantBlockNode.static.tagName = 'div';

/**
 * ContentEditable MediaWiki language variant inline node.
 *
 * @class
 * @extends ve.ce.LeafNode
 * @mixins ve.ce.MWLanguageVariantNode
 *
 * @constructor
 * @param {ve.dm.MWLanguageVariantInlineNode} model Model to observe
 * @param {Object} [config] Configuration options
 */
ve.ce.MWLanguageVariantInlineNode = function VeCeMWLanguageVariantInlineNode() {
	// Parent constructor
	ve.ce.MWLanguageVariantInlineNode.super.apply( this, arguments );
};

/* Inheritance */

OO.inheritClass( ve.ce.MWLanguageVariantInlineNode, ve.ce.MWLanguageVariantNode );

ve.ce.MWLanguageVariantInlineNode.static.name = 'mwLanguageVariantInline';

ve.ce.MWLanguageVariantInlineNode.static.tagName = 'span';

/**
 * ContentEditable MediaWiki language variant hidden node.
 *
 * @class
 * @extends ve.ce.MWLanguageVariantNode
 *
 * @constructor
 * @param {ve.dm.MWLanguageVariantHiddenNode} model Model to observe
 * @param {Object} [config] Configuration options
 */
ve.ce.MWLanguageVariantHiddenNode = function VeCeMWLanguageVariantHiddenNode() {
	// Parent constructor
	ve.ce.MWLanguageVariantHiddenNode.super.apply( this, arguments );
};

/* Inheritance */

OO.inheritClass( ve.ce.MWLanguageVariantHiddenNode, ve.ce.MWLanguageVariantNode );

ve.ce.MWLanguageVariantHiddenNode.static.name = 'mwLanguageVariantHidden';

ve.ce.MWLanguageVariantHiddenNode.static.tagName = 'span';

ve.ce.MWLanguageVariantHiddenNode.prototype.appendHolder = function () {
	// No holder for a hidden node.
	return null;
};

/* Registration */

ve.ce.nodeFactory.register( ve.ce.MWLanguageVariantBlockNode );
ve.ce.nodeFactory.register( ve.ce.MWLanguageVariantInlineNode );
ve.ce.nodeFactory.register( ve.ce.MWLanguageVariantHiddenNode );