MediaWiki
Gadget-ve-sandbox.js
From Dogcraft Wiki
mNo edit summary |
No edit summary |
||
(30 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
mw.loader.using( | 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. | |||
* | |||
ve.dm.ColumnNode = function VeDmColumnNode() { | * @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() { | |||
/* Inheritance */ | // Parent constructor | ||
ve.dm.ColumnNode.super.apply( this, arguments ); | |||
OO.inheritClass( ve.dm.ColumnNode, ve.dm.BranchNode ); | |||
OO.mixinClass( ve.dm.ColumnNode, ve.dm.ClassAttributeNode ); | console.log(this); | ||
}; | |||
/* Static Properties */ | |||
/* Inheritance */ | |||
ve.dm.ColumnNode.static.name = 'column'; | |||
OO.inheritClass( ve.dm.ColumnNode, ve.dm.BranchNode ); | |||
ve.dm.ColumnNode.static.matchTagNames = [ 'div' ]; | OO.mixinClass( ve.dm.ColumnNode, ve.dm.ClassAttributeNode ); | ||
ve.dm.ColumnNode.static.matchFunction = function ( element ) { | /* Static Properties */ | ||
ve.dm.ColumnNode.static.name = 'column'; | |||
ve.dm.ColumnNode.static. | 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. | |||
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. | |||
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; | |||
return | |||
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'); | |||
} ); | |||
}); | |||
}); |
Latest revision as of 23:15, 17 May 2022
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');
} );
});
});