Gadget-ve-sandbox.js

mw.loader.using( 'ext.visualEditor.desktopArticleTarget.init' ).done( function () {
	console.log('loader entered');
	mw.libs.ve.addPlugin( function () {
		console.log('addplugin entered');
		return mw.loader.using( ['ext.visualEditor.core'] )
		.done(function () {
			
			console.log('sandbox entered');
			/*!
				 * 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 );
			console.log('colnode CE loaded');
			/*!
			 * 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.classAttributes = {
			//		'dw-g-columns': { style: 'cols'/*'column-count: 2'*/ }
			//};
			
			ve.dm.ColumnNode.static.toDataElement = function ( domElements ) {
				//var style = domElements[ 0 ].classList.contains( 'dw-g-columns' ) ? 'cols' : '';
				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 );
			console.log('colnode DM loaded');
			
			// --------- (start of ve.ui.ColumnAction definition) -----------------------------------------------
			// This is based on [lib/ve/src/ui/actions/ve.ui.BlockquoteAction.js] from Extension:VisualEditor.
			console.log('action started');
				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' } );
					/*console.log("base: ");
					console.log(fragment.getSelectedNode());*/
					/*console.log("elem: ");
					var divElement = fragment.getSelectedNode().getElement();
					console.log(divElement);
					var divDom = fragment.getSelectedNode().toDomElements(fragment.getSelectedNode(), this.document);
					console.log(divDom);*/
					//console.log(this);
					
			
					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 );
			console.log('action loaded');
			// --------- (end of ve.ui.ColumnAction definition) -------------------------------------------------
			console.log('tool started');
				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' ] }
					)
				);
				console.log('tool loaded');
				console.log('fin');
			} );
		});
});