MediaWiki:Gadget-ve-sandbox.js

mw.loader.using( [ 'ext.visualEditor.core', 'ext.visualEditor.mwtransclusion' ] ).then(function () {

/*!
	 * VisualEditor ContentEditable ColumnNode class.
	 *
	 * @copyright 2011-2020 VisualEditor Team and others; see http://ve.mit-license.org
	 * @license The MIT License (MIT); see LICENSE.txt
	 */
	
	/**
	 * ContentEditable Column node.
	 *
	 * @class
	 * @extends ve.ce.BranchNode
	 * @constructor
	 * @param {ve.dm.ColumnNode} model Model to observe
	 * @param {Object} [config] Configuration options
	 */
	ve.ce.ColumnNode = function VeCeColumnNode() {
		// Parent constructor
		ve.ce.ColumnNode.super.apply( this, arguments );
		
		this.$element.addClass( 've-ce-columnNode' );
		this.$element.addClass( 'dw-g-columns');
		console.log('ce: ');
		console.log(this);
	};
	
	/* Inheritance */
	
	OO.inheritClass( ve.ce.ColumnNode, ve.ce.BranchNode );
	OO.mixinClass( ve.ce.ColumnNode, ve.ce.ClassAttributeNode );
	
	/* Static Properties */
	
	ve.ce.ColumnNode.static.name = 'column';
	
	ve.ce.ColumnNode.static.tagName = 'div';
	
	ve.ce.ColumnNode.static.removeEmptyLastChildOnEnter = true;
	
	/* Registration */
	
	ve.ce.nodeFactory.register( ve.ce.ColumnNode );

/*!
 * VisualEditor DataModel ColumnNode class.
 *
 * @copyright 2011-2020 VisualEditor Team and others; see http://ve.mit-license.org
 * @license The MIT License (MIT); see LICENSE.txt
 */

/**
 * DataModel Column node.
 *
 * @class
 * @extends ve.dm.BranchNode
 * @constructor
 * @param {ve.dm.LeafNode[]} [children] Child nodes to attach
 * @param {Object} [element] Reference to element in linear model
 */
ve.dm.ColumnNode = function VeDmColumnNode() {
	// Parent constructor
	ve.dm.ColumnNode.super.apply( this, arguments );
	
	console.log(this);
};

/* Inheritance */

OO.inheritClass( ve.dm.ColumnNode, ve.dm.BranchNode );
OO.mixinClass( ve.dm.ColumnNode, ve.dm.ClassAttributeNode );

/* Static Properties */

ve.dm.ColumnNode.static.name = 'column';

ve.dm.ColumnNode.static.matchTagNames = [ 'div' ];

ve.dm.ColumnNode.static.matchFunction = function ( element ) {
		return element.classList.contains( 'dw-g-columns' );
	};

ve.dm.ColumnNode.static.toDataElement = function ( domElements ) {
	return { type: 'column' };
};

ve.dm.ColumnNode.static.toDomElements = function ( dataElement, doc ) {
	var tag = dataElement.attributes && dataElement.attributes.style === 'cols' ? 'red' : 'blue'; /*emotional support code*/
	var div = doc.createElement('div');
	div.className = 'dw-g-columns';
	return [ div ];
};

/* Registration */

console.log(ve.dm.ColumnNode);

ve.dm.modelRegistry.register( ve.dm.ColumnNode );

// --------- (start of ve.ui.ColumnAction definition) -----------------------------------------------
// This is based on [lib/ve/src/ui/actions/ve.ui.BlockquoteAction.js] from Extension:VisualEditor.

	ve.ui.ColumnAction = function VeUiColumnAction() {
		ve.ui.ColumnAction.super.apply( this, arguments );
	};
	OO.inheritClass( ve.ui.ColumnAction, ve.ui.Action );

	ve.ui.ColumnAction.static.name = 'column';
	ve.ui.ColumnAction.static.methods = [ 'wrap', 'unwrap', 'toggle' ];

	ve.ui.ColumnAction.prototype.isWrapped = function () {
		var fragment = this.surface.getModel().getFragment();
		return fragment.hasMatchingAncestor( 'column' );
	};
	ve.ui.ColumnAction.prototype.toggle = function () {
		return this[ this.isWrapped() ? 'unwrap' : 'wrap' ]();
	};
	ve.ui.ColumnAction.prototype.wrap = function () {
		var
			surfaceModel = this.surface.getModel(),
			selection = surfaceModel.getSelection(),
			fragment = surfaceModel.getFragment( null, true ),
			leaves, leavesRange;

		if ( !( selection instanceof ve.dm.LinearSelection ) ) {
			return false;
		}

		leaves = fragment.getSelectedLeafNodes();
		leavesRange = new ve.Range(
			leaves[ 0 ].getRange().start,
			leaves[ leaves.length - 1 ].getRange().end
		);
		fragment = surfaceModel.getLinearFragment( leavesRange, true );

		fragment = fragment.expandLinearSelection( 'siblings' );

		while (
			fragment.getCoveredNodes().some( function ( nodeInfo ) {
				return !nodeInfo.node.isAllowedParentNodeType( 'column' ) || nodeInfo.node.isContent();
			} )
		) {
			fragment = fragment.expandLinearSelection( 'parent' );
		}

		// Wrap everything in a <div style="column-count:2"> tag
		fragment = fragment.wrapAllNodes( { type: 'column' } );

		return true;
	};
	ve.ui.ColumnAction.prototype.unwrap = function () {
		var
			surfaceModel = this.surface.getModel(),
			selection = surfaceModel.getSelection(),
			fragment = surfaceModel.getFragment( null, true ),
			leaves, leavesRange;

		if ( !( selection instanceof ve.dm.LinearSelection ) ) {
			return false;
		}

		if ( !this.isWrapped() ) {
			return false;
		}

		leaves = fragment.getSelectedLeafNodes();
		leavesRange = new ve.Range(
			leaves[ 0 ].getRange().start,
			leaves[ leaves.length - 1 ].getRange().end
		);
		fragment = surfaceModel.getLinearFragment( leavesRange, true );

		fragment
			// Expand to cover entire <div> tag
			.expandLinearSelection( 'closest', ve.dm.ColumnNode )
			// Unwrap it
			.unwrapNodes( 0, 1 );

		return true;
	};
	ve.ui.actionFactory.register( ve.ui.ColumnAction );

// --------- (end of ve.ui.ColumnAction definition) -------------------------------------------------

	ve.ui.ColumnFormatTool = function VeUiColumnFormatTool() {
		ve.ui.ColumnFormatTool.super.apply( this, arguments );
	};
	OO.inheritClass( ve.ui.ColumnFormatTool, ve.ui.FormatTool );

	ve.ui.ColumnFormatTool.static.name = 'column';
	ve.ui.ColumnFormatTool.static.group = 'format';
	ve.ui.ColumnFormatTool.static.title = 'Column';
	ve.ui.ColumnFormatTool.static.format = { type: 'column' };
	ve.ui.ColumnFormatTool.static.commandName = 'column';
	ve.ui.toolFactory.register( ve.ui.ColumnFormatTool );

	ve.ui.commandRegistry.register(
		new ve.ui.Command(
			'column', 'column', 'toggle',
			{ supportedSelections: [ 'linear' ] }
		)
	);
} );