mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-15 18:39:52 +00:00
d2dfb9ac4f
* Move and rename generic parts of ve.ui to OO.ui * We now have a UI test suite because ve.Element (outside ve.ui) is now part of oojs-ui, so it needs a test suite. * Added to the MW test run (just like we do for unicodejs). * Updated csslint config (also added ve-mw and syntaxhighlight which were missing). oojs-ui still depends on the TriggerRegistry in VE, this is addressed in a follow-up commit. Change-Id: Iec147155c1ddf20b73a4d15d87b8742207032312
1371 lines
39 KiB
JavaScript
1371 lines
39 KiB
JavaScript
/*!
|
|
* VisualEditor user interface MWSyntaxHighlightDialog class.
|
|
*
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/**
|
|
* SimpleSurface is designed for MWSyntaxHighlight nodes which contains node model data and view.
|
|
* Not compatible with other nodes.
|
|
*
|
|
* @class
|
|
* @extends OO.ui.Element
|
|
*
|
|
* @constructor
|
|
* @param {String} data MWSyntaxHighlight model data
|
|
* @param {String} lang The language being edited
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface = function VeUiMWSyntaxHighlightSimpleSurface( data, lang ) {
|
|
// Parent constructor
|
|
OO.ui.Element.call( this );
|
|
// Surface properties
|
|
this.lang = lang;
|
|
// Character dimension; in px
|
|
this.charDimension = { 'height' : 0, 'width' : 0 };
|
|
// Node model data and tokenized data
|
|
this.model = data;
|
|
this.tokens = null;
|
|
// Helpers
|
|
this.tokenizer = null;
|
|
this.highlighter = null;
|
|
// Edit stack
|
|
this.undoStack = [];
|
|
this.redoStack = [];
|
|
// Mouse input properties
|
|
this.mouseDown = false;
|
|
this.mouseMove = false;
|
|
this.cursorInterval = null; // Cursor blink timer
|
|
this.selection = {
|
|
'view' : {
|
|
'start' : { 'x' : 0, 'y' : 0 },
|
|
'end' : { 'x' : 0, 'y' : 0 }
|
|
},
|
|
'model' : { 'start': 0, 'end' : 0 },
|
|
'modelSorted' : { 'start': 0, 'end' : 0 }
|
|
};
|
|
this.modelUnseleted = { 'left': '', 'right':'' };
|
|
// Key input properties
|
|
this.input = {
|
|
'start' : -1,
|
|
'old' : '',
|
|
'newer' : '',
|
|
'pushReady' : false
|
|
};
|
|
this.inputPushDelimiter = /\W/;
|
|
// Cache
|
|
this.cache = {
|
|
'editboxHeight': Infinity,
|
|
'editboxScroll': 0
|
|
};
|
|
|
|
// Element properties
|
|
// Toolbar
|
|
this.$toolbarLayer = this.$$( '<div>' );
|
|
this.$toolbar = this.$$( '<div>' );
|
|
this.$buttonUndo = this.$$( '<a>' );
|
|
this.$buttonRedo = this.$$( '<a>' );
|
|
this.$buttonIndent = this.$$( '<a>' );
|
|
this.$buttonBeautify = this.$$( '<a>' );
|
|
this.$langDropdown = this.$$( '<select>' );
|
|
// Editbox
|
|
this.$editboxLayer = this.$$( '<div>' );
|
|
this.$lineNumberLayer = this.$$( '<div>' );
|
|
this.$lineNumber = this.$$( '<div>' );
|
|
this.$textLayer = this.$$( '<div>' );
|
|
this.$text = this.$$( '<div>' );
|
|
this.$lineWrap = this.$$( '<div>' );
|
|
// Cursor
|
|
this.$cursorLineOverlay = this.$$( '<div>' );
|
|
this.$cursor = this.$$( '<div>' );
|
|
// Selection & clipboard
|
|
this.$selectionOverlay = this.$$( '<div>' );
|
|
this.$selectionTextarea = this.$$( '<textarea>' );
|
|
// Search & replace
|
|
this.$searchContainer = this.$$( '<div>' );
|
|
this.$searchBox = this.$$( '<input>' );
|
|
this.$replaceBox = this.$$( '<input>' );
|
|
this.$buttonSearch = this.$$( '<a>' );
|
|
this.$buttonReplace = this.$$( '<a>' );
|
|
this.searchRegex = null;
|
|
this.searchHasResult = false;
|
|
|
|
this.toolbar = new OO.ui.Toolbar( ve.ui.syntaxHighlightEditorToolFactory, { '$$': this.$$ });
|
|
this.toolbar.setup([{
|
|
'include':[ 'synhiUndo', 'synhiRedo', 'synhiIndent', 'synhiBeautify' ]
|
|
}]);
|
|
this.toolbar.context = this;
|
|
// Initialization
|
|
this.$
|
|
.addClass( 've-ui-simplesurface' );
|
|
this.$toolbarLayer
|
|
.addClass( 've-ui-simplesurface-container-toolbar' )
|
|
.append(
|
|
this.$toolbar
|
|
.addClass( 've-ui-simplesurface-toolbar' )/*
|
|
.append(
|
|
this.$buttonUndo.$
|
|
.addClass('ve-ui-simplesurface-toolbar-button')
|
|
.addClass('oo-ui-icon-undo') )
|
|
)
|
|
.append(
|
|
this.$buttonRedo
|
|
.addClass('ve-ui-simplesurface-toolbar-button')
|
|
.addClass('oo-ui-icon-redo') )
|
|
.append(
|
|
this.$buttonIndent
|
|
.addClass('ve-ui-simplesurface-toolbar-button')
|
|
.addClass('oo-ui-icon-indent-list') )
|
|
.append(
|
|
this.$buttonBeautify
|
|
.addClass('ve-ui-simplesurface-toolbar-button')
|
|
.addClass('oo-ui-icon-reformat') )*/
|
|
.append(
|
|
this.$langDropdown
|
|
.addClass('ve-ui-simplesurface-toolbar-dropdown') )
|
|
);
|
|
this.$editboxLayer
|
|
.addClass( 've-ui-simplesurface-container-editbox' )
|
|
.append( this.$lineNumberLayer
|
|
.addClass( 've-ui-simplesurface-container-editbox-lineNumber' )
|
|
.append( this.$lineNumber
|
|
.addClass( 've-ui-simplesurface-lineNumber' ) ) )
|
|
.append(
|
|
this.$textLayer
|
|
.addClass( 've-ui-simplesurface-container-editbox-text' )
|
|
.append(
|
|
this.$lineWrap
|
|
.addClass( 've-ui-simplesurface-text-linewrap' ) )
|
|
.append(
|
|
this.$selectionOverlay
|
|
.addClass( 've-ui-simplesurface-container-text-selection' ) )
|
|
.append(
|
|
this.$cursorLineOverlay
|
|
.addClass( 've-ui-simplesurface-cursor-line' )
|
|
.append(
|
|
this.$cursor
|
|
.addClass( 've-ui-simplesurface-cursor' ) ) )
|
|
.append(
|
|
this.$text
|
|
.addClass( 've-ui-simplesurface-text' ) ) )
|
|
.append(
|
|
this.$selectionTextarea
|
|
.addClass( 've-ui-simplesurface-textarea' ) );
|
|
this.$searchContainer
|
|
.addClass( 've-ui-simplesurface-container-search' )
|
|
.append( this.$searchBox )
|
|
.append( this.$buttonSearch
|
|
.addClass('ve-ui-simplesurface-toolbar-button')
|
|
.addClass('oo-ui-icon-search') )
|
|
.append( this.$replaceBox )
|
|
.append( this.$buttonReplace
|
|
.addClass('ve-ui-simplesurface-toolbar-button')
|
|
.addClass('oo-ui-icon-replace') );
|
|
// Make instance globally accessible for debugging
|
|
ve.instances.push( this );
|
|
};
|
|
|
|
/* Inheritance */
|
|
|
|
OO.inheritClass( ve.ui.MWSyntaxHighlightSimpleSurface , OO.ui.Element );
|
|
|
|
/* Methods */
|
|
|
|
/**
|
|
* Initialization
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.initialize = function () {
|
|
// Initialize helpers
|
|
this.tokenizer = new ve.dm.MWSyntaxHighlightTokenizer();
|
|
this.highlighter = new ve.ce.MWSyntaxHighlightHighlighter(this.lang);
|
|
// Check language support
|
|
if ( this.highlighter.isSupportedLanguage( this.lang ) ){
|
|
if ( !this.highlighter.isEnabledLanguage( this.lang ) ){
|
|
this.$.append( this.$$( '<div>' ).text( 'Cannot edit: ' + this.lang + '\nSupport has been disabled.' ) );
|
|
} else {
|
|
var langList = this.highlighter.getSupportedLanguages(), key, options = '',
|
|
self;
|
|
// Language dropdown
|
|
for (key in langList){
|
|
if (key === this.lang){
|
|
options += '<option value="'+key+'" selected>'+key.charAt(0).toUpperCase() + key.slice(1)+'</option>';
|
|
} else {
|
|
options += '<option value="'+key+'">'+key.charAt(0).toUpperCase() + key.slice(1)+'</option>';
|
|
}
|
|
}
|
|
this.$langDropdown.html(options);
|
|
// Main editor interface
|
|
this.$
|
|
.append( this.$toolbarLayer )
|
|
.append( this.toolbar.$ )
|
|
.append( this.$editboxLayer.append( this.$searchContainer ) );
|
|
// Event handlers
|
|
this.$textLayer
|
|
.on( 'mousedown', ve.bind(this.onMousedown, this))
|
|
.on( 'mousemove mouseleave', ve.bind(this.onMousemove, this))
|
|
.on( 'mouseup', ve.bind(this.onMouseup, this))
|
|
.on( 'keypress', ve.bind(this.onKeypress, this))
|
|
.on( 'keydown', ve.bind(this.onKeydown, this));
|
|
this.$text.on( 'blur', ve.bind(this.hideCursor, this));
|
|
this.$lineNumber.on( 'click', 'pre', ve.bind(this.selectLine, this));
|
|
/*this.$buttonUndo.on( 'click',
|
|
ve.bind(function(e){
|
|
if (!this.$buttonUndo.hasClass('ve-ui-simplesurface-toolbar-button-disabled')){
|
|
e.preventDefault();
|
|
e.which = 90;
|
|
e.ctrlKey = true;
|
|
this.onKeydown(e);
|
|
}
|
|
}, this));
|
|
this.$buttonRedo.on( 'click',
|
|
ve.bind(function(e){
|
|
if (!this.$buttonRedo.hasClass('ve-ui-simplesurface-toolbar-button-disabled')){
|
|
e.preventDefault();
|
|
e.which = 89;
|
|
e.ctrlKey = true;
|
|
this.onKeydown(e);
|
|
}
|
|
}, this));
|
|
this.$buttonIndent.on( 'click', ve.bind(function(e){
|
|
e.preventDefault();
|
|
this.indent();
|
|
return false;
|
|
}, this));
|
|
this.$buttonBeautify.on( 'click', ve.bind(function(e){
|
|
e.preventDefault();
|
|
this.doBeautify();
|
|
return false;
|
|
}, this) );
|
|
*/
|
|
this.$editboxLayer.on( 'scroll', ve.bind(function(){
|
|
this.cacheUpdate();
|
|
if (this.$searchContainer.css('display') !== 'none' ){
|
|
this.$searchContainer
|
|
.stop(true, true)
|
|
.animate({top:this.cache.editboxScroll}, 100);
|
|
}
|
|
}, this) );
|
|
this.$langDropdown.on( 'change', ve.bind(function(){
|
|
this.reloadRules();
|
|
}, this));
|
|
this.$searchBox.on(
|
|
'keydown mouseup cut paste change input select',
|
|
ve.bind( this.onSearchInput, this )
|
|
);
|
|
this.$buttonSearch.on( 'click', ve.bind(this.searchStep, this) );
|
|
this.$buttonReplace.on( 'click', ve.bind(this.searchReplace, this) );
|
|
this.$selectionTextarea.on( 'copy paste cut', ve.bind(this.onClipboard, this) );
|
|
$(window).bind('resize', ve.bind(this.cacheUpdate, this)); // Used to update cached css values
|
|
|
|
// Initialize helpers
|
|
this.highlighter.initialize();
|
|
this.tokenize();
|
|
this.refresh();
|
|
// Measure character metric
|
|
this.charDimension.height = parseInt(this.$lineNumber.find('pre:first').find('span').css('font-size'), 10) * 2;
|
|
this.charDimension.width = this.$lineNumber.find('pre:first').find('span').width();
|
|
// Line wrap position
|
|
this.$lineWrap.css({'left':80 * this.charDimension.width});
|
|
// Make focusable
|
|
this.$text.attr('tabindex','-1');
|
|
this.$selectionTextarea.attr('tabindex','-1');
|
|
// Caching
|
|
self = this;
|
|
setTimeout(function(){
|
|
self.cache.editboxScroll = self.$editboxLayer.scrollTop();
|
|
self.cache.editboxHeight = self.$editboxLayer.outerHeight();
|
|
}, 500); // <500 ms not working
|
|
// Initialize undo/redo buttons; show cursor
|
|
this.checkStack();
|
|
this.createSelection();
|
|
}
|
|
} else {
|
|
this.$.append( this.$$( '<div>' ).text( 'Cannot edit: ' + this.lang + '\nLanguage not supported.') );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Destroy the surface, removing all DOM elements and event listeners.
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.destroy = function () {
|
|
ve.instances.splice( ve.instances.indexOf( this ), 1 );
|
|
// Turn off event handlers
|
|
this.$textLayer.off( 'mousedown mousemove mouseup mouseleave keypress keydown' );
|
|
this.$text.off( 'blur' );
|
|
this.$lineNumber.off( 'click' );/*
|
|
this.$buttonUndo.off( 'click' );
|
|
this.$buttonRedo.off( 'click' );
|
|
this.$buttonIndent.off( 'click' );
|
|
this.$buttonBeautify.off( 'click' );*/
|
|
this.$editboxLayer.off( 'scroll' );
|
|
this.$langDropdown.off( 'change' );
|
|
this.$searchBox.off( 'keydown mouseup cut paste change input select' );
|
|
this.$buttonSearch.off( 'click' );
|
|
this.$buttonReplace.off( 'click' );
|
|
this.$selectionTextarea.off( 'copy paste cut' );
|
|
$(window).unbind('resize', this.cacheUpdate);
|
|
// Clean up
|
|
this.$.empty();
|
|
this.stopBlinkCursor();
|
|
};
|
|
|
|
/**
|
|
* Get the surface's model
|
|
*
|
|
* @method
|
|
* @returns {string} Node model data
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.getModel = function () {
|
|
return this.model;
|
|
};
|
|
|
|
/**
|
|
* Update cache
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.cacheUpdate = function () {
|
|
this.cache.editboxScroll = this.$editboxLayer.scrollTop();
|
|
this.cache.editboxHeight = this.$editboxLayer.outerHeight();
|
|
};
|
|
|
|
/**
|
|
* Reload rules
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.reloadRules = function () {
|
|
this.lang = this.$langDropdown.val();
|
|
this.highlighter.loadRules(this.lang);
|
|
this.tokenize();
|
|
this.refresh();
|
|
};
|
|
|
|
/**
|
|
* Get the language that this surface is working on
|
|
*
|
|
* @method
|
|
* @returns {string} Language name
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.getLang = function () {
|
|
return this.lang;
|
|
};
|
|
|
|
/**
|
|
* Tokenize model data;
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.tokenize = function () {
|
|
this.tokens = this.tokenizer.tokenize(this.model);
|
|
};
|
|
|
|
/**
|
|
* Display tokenized data
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.refresh = function () {
|
|
// Highlight
|
|
this.tokens = this.highlighter.mark( this.tokens, this.model, false );
|
|
// Validate
|
|
this.tokens = this.highlighter.mark( this.tokens, this.model, true );
|
|
var marked = this.highlighter.display( this.tokens );
|
|
this.$text.html( marked.tokenDisplay );
|
|
this.$lineNumber.html( marked.lineNumber );
|
|
};
|
|
|
|
/**
|
|
* Auto indentation
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.indent = function () {
|
|
this.pushStack();
|
|
var r = [
|
|
[/\{/, /\}/],
|
|
[/\[/, /\]/],
|
|
[/\(/, /\)/]
|
|
],
|
|
i;
|
|
for ( i = 0; i < r.length; i++ ){
|
|
this.doIndent(r[i]);
|
|
}
|
|
// Reset cursor
|
|
this.selection.model.start = 0;
|
|
this.selection.model.end = 0;
|
|
this.createSelection();
|
|
};
|
|
|
|
/**
|
|
* Helper method for auto indentation
|
|
*
|
|
* @method
|
|
* @param {Array} regexGroup RegExp objects
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.doIndent = function ( regexGroup ) {
|
|
var a = [], c,
|
|
l = [],
|
|
match,
|
|
A = regexGroup[0],
|
|
B = regexGroup[1],
|
|
regex = new RegExp('['+A.source + B.source+']', 'g'),
|
|
i, j,
|
|
lineArray = this.model.split('\n');
|
|
// Stack based search; record block levels
|
|
while ( (match = regex.exec( this.model ) ) !== null ){
|
|
if (A.test(match[0])){
|
|
a.push(match.index);
|
|
} else {
|
|
if (a.length !== 0){
|
|
c = a.pop();
|
|
l.push({
|
|
'idx': [this.modelToView(c).y, this.modelToView(match.index).y],
|
|
'lvl': a.length + 1
|
|
});
|
|
}
|
|
}
|
|
}
|
|
l.sort(function(a, b){return a.idx[0] - b.idx[0];});
|
|
// Replace whitespaces within each block
|
|
for ( i = 0; i < l.length; i++ ){
|
|
for ( j = l[i].idx[0] + 1; j < l[i].idx[1]; j++ ){
|
|
lineArray[j] = lineArray[j].replace(/^[ \t]*/, new Array( l[i].lvl + 1 ).join('\t'));
|
|
}
|
|
}
|
|
// Treat changes as one edit
|
|
this.selection.model.start = 0;
|
|
this.selection.model.end = this.model.length;
|
|
this.createSelection();
|
|
this.input.newer = lineArray.join('\n');
|
|
this.edit();
|
|
this.clearStack();
|
|
};
|
|
|
|
/**
|
|
* Beautify code
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.doBeautify = function () {
|
|
this.pushStack();
|
|
// Head & tail spaces
|
|
var headTail = /(\w *?)([\+\-\*\/\=><\|\&\%\!\:\?]+)( *?\w)/g,
|
|
// Inbetween spaces
|
|
between = /(\( *?.+ *?\)|\[ *?.+ *?\]|\{ *?.+ *?\}|< *?.+ *?>)/g,
|
|
// Tail only spaces
|
|
tail = /(\w *?)([,;])(?=\w)/g,
|
|
// Tab spaces
|
|
tabSpace = /( {4}| {8})/g,
|
|
// Compress duplicate spaces
|
|
dupSpace = /( {2,})/g,
|
|
// Delete trailing whitespaces
|
|
trailSpace = /([\t ]+)(?=$)/gm,
|
|
// Exclusion
|
|
exclude = [ new RegExp('(\"[^]*?\")','g'), /('[^]*?')/g ],
|
|
match, exclusions = [], i,
|
|
modelCache = [],
|
|
// Helper for inbetween spaces
|
|
betweenFunc = function(match){
|
|
return match.slice(0,1) + ' '+match.slice(1,match.length-1)+' '+match.slice(match.length-1);
|
|
};
|
|
// Calculate exclusions
|
|
for ( i = 0; i < exclude.length; i++ ){
|
|
while ( (match = exclude[i].exec( this.model ) ) !== null ){
|
|
exclusions.push({'a': match.index, 'b': match.index + match[1].length});
|
|
}
|
|
}
|
|
exclusions.sort(function(a, b){ return a.a - b.a; });
|
|
// Slice model
|
|
if (exclusions.length === 0){
|
|
modelCache.push({
|
|
'text':this.model,
|
|
'after':''
|
|
});
|
|
} else {
|
|
for ( i = 0; i < exclusions.length; i++ ){
|
|
if ( i >= 1 ){
|
|
modelCache.push({
|
|
'text':this.model.slice(exclusions[i-1].b, exclusions[i].a),
|
|
'after':this.model.slice(exclusions[i].a, exclusions[i].b)
|
|
});
|
|
} else {
|
|
modelCache.push({
|
|
'text':this.model.slice(0, exclusions[i].a),
|
|
'after':this.model.slice(exclusions[i].a, exclusions[i].b)
|
|
});
|
|
}
|
|
if ( i === exclusions.length - 1){
|
|
if (exclusions[i].b < this.model.length){
|
|
modelCache.push({
|
|
'text':this.model.slice(exclusions[i].b),
|
|
'after':''
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Reformat
|
|
for ( i = 0; i < modelCache.length; i++ ){
|
|
modelCache[i].text = modelCache[i].text.replace( headTail, '$1 $2 $3');
|
|
modelCache[i].text = modelCache[i].text.replace( between, betweenFunc);
|
|
modelCache[i].text = modelCache[i].text.replace( tail, '$1$2 ');
|
|
modelCache[i].text = modelCache[i].text.replace( tabSpace, '\t');
|
|
modelCache[i].text = modelCache[i].text.replace( dupSpace, ' ');
|
|
modelCache[i].text = modelCache[i].text.replace( trailSpace, '');
|
|
modelCache[i] = modelCache[i].text + modelCache[i].after;
|
|
}
|
|
// Treat changes as one edit
|
|
this.selection.model.start = 0;
|
|
this.selection.model.end = this.model.length;
|
|
this.createSelection();
|
|
this.input.newer = modelCache.join('');
|
|
this.edit();
|
|
this.clearStack();
|
|
// Auto indent
|
|
this.indent();
|
|
};
|
|
|
|
/**
|
|
* Toolbar button handler
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.onButtonUndo = function () {
|
|
var e = jQuery.Event();
|
|
e.which = 90;
|
|
e.ctrlKey = true;
|
|
this.onKeydown(e);
|
|
};
|
|
|
|
/**
|
|
* Toolbar button handler
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.onButtonRedo = function () {
|
|
var e = jQuery.Event();
|
|
e.which = 89;
|
|
e.ctrlKey = true;
|
|
this.onKeydown(e);
|
|
};
|
|
|
|
/**
|
|
* Mouse down handler
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} event
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.onMousedown = function ( event ) {
|
|
event.preventDefault();
|
|
this.stopBlinkCursor();
|
|
this.pushStack();
|
|
this.mouseDown = true;
|
|
var model = this.viewToModel(
|
|
this.checkViewBounding( this.findLocalView(event, this.$textLayer) )
|
|
);
|
|
if (this.mouseMove){
|
|
this.selection.model.end = model;
|
|
this.createSelection();
|
|
this.showSelection();
|
|
} else {
|
|
this.hideSelection();
|
|
this.selection.model.start = model;
|
|
this.selection.model.end = model;
|
|
this.createSelection();
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Mouse move and mouse leave handler
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} event
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.onMousemove = function ( event ) {
|
|
event.preventDefault();
|
|
if (this.mouseDown){
|
|
if (event.type === 'mousemove'){
|
|
this.selection.model.end = this.viewToModel(
|
|
this.checkViewBounding( this.findLocalView(event, this.$textLayer) )
|
|
);
|
|
this.mouseMove = true;
|
|
this.createSelection();
|
|
this.showSelection();
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Mouse up handler
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} event
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.onMouseup = function ( event ) {
|
|
event.preventDefault();
|
|
this.mouseDown = false;
|
|
this.mouseMove = false;
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Select a line
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} event
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.selectLine = function ( event ) {
|
|
var lineIndex = this.findLocalView(event, this.$lineNumber).y;
|
|
event.preventDefault();
|
|
this.pushStack();
|
|
this.selection.model.start = this.viewToModel({ 'x': 0 , 'y': lineIndex });
|
|
this.selection.model.end = this.viewToModel(this.checkViewBounding({ 'x' : 0 , 'y' : lineIndex + 1}));
|
|
if (this.selection.model.start === this.selection.model.end){
|
|
this.selection.model.end = this.viewToModel(this.checkViewBounding({ 'x' : Infinity, 'y': lineIndex}));
|
|
}
|
|
this.createSelection();
|
|
this.showSelection();
|
|
if (this.mouseMove){ this.mouseMove = false; }
|
|
if (this.mouseDown){ this.mouseDown = false; }
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* User input handler; characters
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} event
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.onKeypress = function ( event ) {
|
|
var charIn = String.fromCharCode(event.which);
|
|
if ( event.which === 13 ){
|
|
charIn = '\n';
|
|
}
|
|
this.input.newer += charIn;
|
|
this.input.pushReady = true;
|
|
this.edit(false);
|
|
if (this.inputPushDelimiter.test(charIn)){
|
|
this.pushStack();
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* User input handler; non-characters
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} event
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.onKeydown = function ( event ) {
|
|
var key = event.which,
|
|
ctrl = event.ctrlKey,
|
|
shift = event.shiftKey;
|
|
this.stopBlinkCursor();
|
|
if ( key === 9 ){ // Tab
|
|
event.preventDefault();
|
|
// Previous operation
|
|
this.pushStack();
|
|
if (this.selection.model.start === this.selection.model.end){
|
|
// Simple insertion
|
|
event.which = 9;
|
|
this.onKeypress(event);
|
|
} else {
|
|
// Initialize selection range
|
|
this.selection.modelSorted.start = this.selection.view.start.y > this.selection.view.end.y ?
|
|
parseInt(this.$text.find('pre:eq('+this.selection.view.end.y+')').find('span:first').attr('idx'),10) :
|
|
parseInt(this.$text.find('pre:eq('+this.selection.view.start.y+')').find('span:first').attr('idx'),10);
|
|
this.input.start = this.selection.modelSorted.start;
|
|
this.input.old = this.model.slice(this.selection.modelSorted.start, this.selection.modelSorted.end);
|
|
this.modelUnseleted.left = this.model.slice(0, this.selection.modelSorted.start);
|
|
this.modelUnseleted.right = this.model.slice( this.selection.modelSorted.end );
|
|
// Insert / remove tabs
|
|
if (shift){
|
|
this.input.newer = this.input.old.replace(/^\t/gm, '');
|
|
} else {
|
|
this.input.newer = this.input.old.replace(/^/gm, '\t');
|
|
}
|
|
this.hideSelection();
|
|
// Edit
|
|
this.model = [this.modelUnseleted.left,
|
|
this.input.newer,
|
|
this.modelUnseleted.right].join('');
|
|
this.input.pushReady = true;
|
|
// Refresh
|
|
this.pushStack();
|
|
this.tokenize();
|
|
this.refresh();
|
|
this.selection.model.end = this.modelUnseleted.left.length + this.input.newer.length;
|
|
this.createSelection();
|
|
}
|
|
} else if ( key === 8 ){ // Backspace
|
|
event.preventDefault();
|
|
this.pushStack(); // Previous operation
|
|
if (this.selection.model.start === this.selection.model.end){
|
|
// Delete one character
|
|
this.selection.model.start = this.checkViewBounding(this.selection.model.start - 1);
|
|
this.createSelection();
|
|
}
|
|
this.input.newer = '';
|
|
this.edit(false);
|
|
// This operation
|
|
this.input.pushReady = true;
|
|
this.pushStack();
|
|
} else if ( key === 46 ){ // Delete
|
|
event.preventDefault();
|
|
this.pushStack(); // Previous operation
|
|
if (this.selection.model.start === this.selection.model.end){
|
|
// Delete one character
|
|
this.selection.model.end = this.checkModelBounding(this.selection.model.end + 1);
|
|
this.createSelection();
|
|
}
|
|
this.input.newer = '';
|
|
this.edit(false);
|
|
// This operation
|
|
this.input.pushReady = true;
|
|
this.pushStack();
|
|
} else if ( key === 90 && ctrl ){ // Ctrl + Z, undo
|
|
event.preventDefault();
|
|
this.pushStack(); // Undo the current unstacked operation, if any
|
|
this.undo();
|
|
} else if ( key === 89 && ctrl ){ // Ctrl + Y, redo
|
|
event.preventDefault();
|
|
this.redo();
|
|
} else if ( key === 65 && ctrl ){ // Ctrl + A, select all
|
|
event.preventDefault();
|
|
this.selection.model.start = 0;
|
|
this.selection.model.end = this.checkModelBounding(Infinity);
|
|
this.createSelection();
|
|
this.showSelection();
|
|
} else if ( key >= 37 && key <= 40 ){ // Arrow keys
|
|
event.preventDefault();
|
|
this.pushStack(); // Previous operation
|
|
this.hideSelection();
|
|
if ( key === 37 ){ // Left
|
|
this.selection.model.end = this.checkModelBounding( this.selection.model.end - 1);
|
|
} else if ( key === 39 ){ // Right
|
|
this.selection.model.end = this.checkModelBounding( this.selection.model.end + 1);
|
|
} else if ( key === 38 ){ // Up
|
|
this.selection.model.end = this.viewToModel(
|
|
this.checkViewBounding({
|
|
'x': this.selection.view.end.x,
|
|
'y': this.selection.view.end.y - 1 })
|
|
);
|
|
} else if ( key === 40 ){ // Down
|
|
this.selection.model.end = this.viewToModel(
|
|
this.checkViewBounding({
|
|
'x': this.selection.view.end.x,
|
|
'y': this.selection.view.end.y + 1 })
|
|
);
|
|
}
|
|
if ( !shift ){
|
|
this.selection.model.start = this.selection.model.end;
|
|
}
|
|
this.createSelection();
|
|
if (shift){
|
|
this.showSelection();
|
|
}
|
|
} else if ( key === 70 && ctrl ){ // Ctrl + F, search & replace
|
|
event.preventDefault();
|
|
this.pushStack();
|
|
this.$searchContainer.css('display','inline-block');
|
|
this.$searchBox.focus();
|
|
} else if ( key === 67 && ctrl ){ // Ctrl + C, copy; preliminary actions
|
|
this.pushStack();
|
|
if (this.selection.model.start !== this.selection.model.end){
|
|
this.$selectionTextarea.focus();
|
|
}
|
|
} else if ( key === 86 && ctrl ){ // Ctrl + V, paste; preliminary actions
|
|
this.pushStack(); // Previous operation
|
|
this.$selectionTextarea.focus();
|
|
} else if ( key === 88 && ctrl ){ // Ctrl + X, cut; preliminary actions
|
|
this.pushStack();
|
|
if (this.selection.model.start !== this.selection.model.end){
|
|
this.$selectionTextarea.focus();
|
|
}
|
|
} else if ( key === 27 ){ // Esc
|
|
this.pushStack();
|
|
return false;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* User input handler; clipboard events
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} event
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.onClipboard = function ( event ) {
|
|
var which = event.type,
|
|
self = this;
|
|
if ( which === 'copy' ){
|
|
this.$selectionTextarea.get(0).value = this.model.slice(this.selection.modelSorted.start, this.selection.modelSorted.end);
|
|
this.$selectionTextarea.select();
|
|
// Callback after event is handled by browser
|
|
setTimeout(function(){
|
|
self.$text.focus();
|
|
self.showCursor();
|
|
self.startBlinkCursor();
|
|
},0);
|
|
} else if ( which === 'paste' ){
|
|
this.$selectionTextarea.select();
|
|
// Callback after event is handled by browser
|
|
setTimeout(function(){
|
|
self.input.newer = self.$selectionTextarea.get(0).value;
|
|
self.edit(false);
|
|
// This operation
|
|
self.input.pushReady = true;
|
|
self.pushStack();
|
|
},0);
|
|
} else if ( which === 'cut' ){
|
|
this.$selectionTextarea.get(0).value = this.model.slice(this.selection.modelSorted.start, this.selection.modelSorted.end);
|
|
this.$selectionTextarea.select();
|
|
// Callback after event is handled by browser
|
|
setTimeout(function(){
|
|
event.which = 8;
|
|
self.onKeydown(event);
|
|
},0);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Edit model data based on current operation
|
|
*
|
|
* @method
|
|
* @param {boolean} setOld (optional) Parameter passed to createSelection()
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.edit = function ( setOld ) {
|
|
this.hideSelection();
|
|
this.model = [this.modelUnseleted.left,
|
|
this.input.newer,
|
|
this.modelUnseleted.right].join('');
|
|
this.tokenize();
|
|
this.refresh();
|
|
this.selection.model.start = this.modelUnseleted.left.length;
|
|
this.selection.model.end = this.modelUnseleted.left.length + this.input.newer.length;
|
|
this.createSelection(setOld);
|
|
};
|
|
|
|
/**
|
|
* Push operation to history
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.pushStack = function () {
|
|
if (this.input.pushReady){
|
|
this.input.pushReady = false;
|
|
this.undoStack.push(this.copyStack(this.input));
|
|
this.clearStack();
|
|
this.checkStack();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Clear & reset current operation
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.clearStack = function () {
|
|
this.input.start = -1;
|
|
this.input.old = '';
|
|
this.input.newer = '';
|
|
this.input.pushReady = false;
|
|
this.selection.model.start = this.selection.model.end;
|
|
this.createSelection();
|
|
};
|
|
|
|
/**
|
|
* Reverse operation
|
|
*
|
|
* @method
|
|
* @param {Object} stack Operation
|
|
* @returns {Object} Reversed operation
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.reverseStack = function ( stack ) {
|
|
return {
|
|
'start':stack.start,
|
|
'old':stack.newer,
|
|
'newer':stack.old,
|
|
'pushReady':stack.pushReady
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Deep copy operation
|
|
*
|
|
* @method
|
|
* @param {Object} stack Operation
|
|
* @returns {Object} Deep copy of the operation
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.copyStack = function ( stack ) {
|
|
return {
|
|
'start':stack.start,
|
|
'old':stack.old,
|
|
'newer':stack.newer,
|
|
'pushReady':stack.pushReady
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Redo operations; one at each time
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.redo = function () {
|
|
if (this.redoStack.length !== 0){
|
|
this.input = this.redoStack.pop();
|
|
this.selection.model.start = this.input.start;
|
|
this.selection.model.end = this.input.start + this.input.old.length;
|
|
this.createSelection();
|
|
this.edit(false);
|
|
this.input.pushReady = true;
|
|
this.pushStack();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Undo operations; one at each time
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.undo = function () {
|
|
var toDo;
|
|
if (this.undoStack.length !== 0){
|
|
toDo = this.undoStack.pop();
|
|
this.input = this.reverseStack(toDo);
|
|
this.selection.model.start = this.input.start;
|
|
this.selection.model.end = this.input.start + this.input.old.length;
|
|
this.createSelection();
|
|
this.edit();
|
|
this.redoStack.push(this.copyStack(toDo));
|
|
this.clearStack();
|
|
this.checkStack();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Check stack height and style undo, redo buttons
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.checkStack = function () {
|
|
this.toolbar.emit( 'updateState' );
|
|
/*
|
|
if ( this.undoStack.length === 0 ){ // Grey out
|
|
this.$buttonUndo.addClass('ve-ui-simplesurface-toolbar-button-disabled');
|
|
} else {
|
|
this.$buttonUndo.removeClass('ve-ui-simplesurface-toolbar-button-disabled');
|
|
}
|
|
if ( this.redoStack.length === 0 ){ // Grey out
|
|
this.$buttonRedo.addClass('ve-ui-simplesurface-toolbar-button-disabled');
|
|
} else {
|
|
this.$buttonRedo.removeClass('ve-ui-simplesurface-toolbar-button-disabled');
|
|
}
|
|
*/
|
|
};
|
|
|
|
/**
|
|
* Check rounded view index against view borders
|
|
*
|
|
* @method
|
|
* @param {Object} roundedIndex Rounded line / column index
|
|
* @returns {Object} Bounded line / column index
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.checkViewBounding = function ( roundedIndex ){
|
|
var lineLength, docHeight,
|
|
tmp;
|
|
// vertical bound
|
|
docHeight = this.$text.find('div').children('pre').length;
|
|
if (roundedIndex.y >= docHeight){
|
|
roundedIndex.y = docHeight - 1;
|
|
} else if (roundedIndex.y < 0){
|
|
roundedIndex.y = 0;
|
|
}
|
|
// horizontal bound
|
|
tmp = this.$text.find('div pre:eq('+roundedIndex.y+')');
|
|
// ignore line breaks & phantom
|
|
lineLength =
|
|
tmp.find('span:last').text() === '\n' || tmp.find('span:last').attr('ph') ?
|
|
parseInt(tmp.attr('length'), 10) - 1 : parseInt(tmp.attr('length'), 10);
|
|
if (roundedIndex.x < 0){
|
|
roundedIndex.x = 0;
|
|
} else {
|
|
roundedIndex.x = roundedIndex.x > lineLength ? lineLength : roundedIndex.x;
|
|
}
|
|
return roundedIndex;
|
|
};
|
|
|
|
/**
|
|
* Check model index against model borders
|
|
*
|
|
* @method
|
|
* @param {int} model Model index
|
|
* @returns {int} Bounded model index
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.checkModelBounding = function ( model ){
|
|
if (model < 0){
|
|
model = 0;
|
|
} else if (model > this.model.length){
|
|
model = this.model.length;
|
|
}
|
|
return model;
|
|
};
|
|
|
|
/**
|
|
* Convert mouse coordinate to local view coordinate
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} event
|
|
* @param {jQuery.Object} localTarget Editor element object
|
|
* @returns {Object} Line / column coordinate
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.findLocalView = function ( event, localTarget ){
|
|
var x = (event.pageX - localTarget.offset().left) / this.charDimension.width,
|
|
y = (event.pageY - localTarget.offset().top) / this.charDimension.height;
|
|
if ( y >= Math.ceil(y) - 0.1 ){ // Advance to next line
|
|
y = Math.ceil(y);
|
|
} else { // Keep within current line
|
|
y = Math.floor(y);
|
|
}
|
|
x = Math.round(x);
|
|
return {
|
|
'x' : x,
|
|
'y' : y
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Start blinking cursor
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.startBlinkCursor = function () {
|
|
if (!this.cursorInterval){
|
|
var self = this;
|
|
this.cursorInterval = setInterval( function(){
|
|
if (self.$cursor.css('display') === 'none'){
|
|
self.$cursor.css('display','block');
|
|
} else {
|
|
self.$cursor.css('display','none');
|
|
}
|
|
} , 500);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Stop blinking cursor
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.stopBlinkCursor = function () {
|
|
if (this.cursorInterval){
|
|
clearInterval( this.cursorInterval );
|
|
this.cursorInterval = null;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sort selection model indices, initialize an operation, show cursor view
|
|
*
|
|
* @method
|
|
* @param {boolean} setOld (optional) Whether to affect operation's .old value; default is true
|
|
* @param {boolean} suppressFocus (optional) Whether to prevent focusing editing area; default is false
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.createSelection = function ( setOld, suppressFocus ) {
|
|
if (setOld === undefined ){
|
|
setOld = true;
|
|
}
|
|
if (suppressFocus === undefined ){
|
|
suppressFocus = false;
|
|
}
|
|
this.selection.view.start = this.modelToView( this.selection.model.start );
|
|
this.selection.view.end = this.modelToView( this.selection.model.end );
|
|
this.selection.modelSorted.start = this.selection.model.start > this.selection.model.end ?
|
|
this.selection.model.end : this.selection.model.start;
|
|
this.selection.modelSorted.end = this.selection.model.start > this.selection.model.end ?
|
|
this.selection.model.start : this.selection.model.end;
|
|
this.input.start = this.selection.modelSorted.start;
|
|
if (setOld){
|
|
this.input.old = this.model.slice(this.selection.modelSorted.start, this.selection.modelSorted.end);
|
|
}
|
|
this.modelUnseleted.left = this.model.slice(0, this.selection.modelSorted.start);
|
|
this.modelUnseleted.right = this.model.slice( this.selection.modelSorted.end );
|
|
if (!suppressFocus){
|
|
this.$text.focus();
|
|
}
|
|
this.showCursor();
|
|
};
|
|
|
|
/**
|
|
* Show cursor; scroll editor window if necessary
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.showCursor = function () {
|
|
this.$cursorLineOverlay.css({
|
|
'left':0,
|
|
'top':this.selection.view.end.y * this.charDimension.height,
|
|
'height':this.charDimension.height,
|
|
'width':this.$editboxLayer.width() - parseInt(this.$textLayer.css('margin-left'), 10) - 1,
|
|
'display':'block'
|
|
});
|
|
this.$cursor.css({
|
|
'left': this.selection.view.end.x * this.charDimension.width,
|
|
'width':this.charDimension.width,
|
|
'display':'block'
|
|
});
|
|
this.startBlinkCursor();
|
|
var bottomDiff = (this.selection.view.end.y + 1) * this.charDimension.height - this.cache.editboxScroll - this.cache.editboxHeight,
|
|
topDiff = this.cache.editboxScroll - this.selection.view.end.y * this.charDimension.height;
|
|
if ( bottomDiff > 0 ){
|
|
this.$editboxLayer
|
|
.stop(true, true)
|
|
.animate({scrollTop:this.cache.editboxScroll + bottomDiff}, 100);
|
|
} else if ( topDiff > 0 ){
|
|
this.$editboxLayer
|
|
.stop(true, true)
|
|
.animate({scrollTop: this.selection.view.end.y * this.charDimension.height}, 100);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Hide cursor
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.hideCursor = function () {
|
|
this.stopBlinkCursor();
|
|
this.$cursorLineOverlay.css({
|
|
'display':'none'
|
|
});
|
|
this.$cursor.css({
|
|
'display':'none'
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Show selection highlight
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.showSelection = function () {
|
|
this.$selectionOverlay.empty();
|
|
var startLineIdx = this.selection.view.start.y,
|
|
endLineIdx = this.selection.view.end.y,
|
|
startCharIdx = this.selection.view.start.x,
|
|
endCharIdx = this.selection.view.end.x,
|
|
i;
|
|
if (startLineIdx === endLineIdx){ // Same line
|
|
if ( startCharIdx > endCharIdx ){
|
|
startCharIdx = [endCharIdx, endCharIdx = startCharIdx][0];
|
|
}
|
|
this.$selectionOverlay
|
|
.append(
|
|
this.$$('<div>').addClass('ve-ui-simplesurface-text-selected')
|
|
.css({
|
|
'left':startCharIdx * this.charDimension.width,
|
|
'top':startLineIdx * this.charDimension.height,
|
|
'width':(endCharIdx - startCharIdx) * this.charDimension.width,
|
|
'height':this.charDimension.height
|
|
}) );
|
|
} else { // Different lines
|
|
if ( startLineIdx > endLineIdx ) {
|
|
startLineIdx = [endLineIdx, endLineIdx = startLineIdx][0];
|
|
startCharIdx = [endCharIdx, endCharIdx = startCharIdx][0];
|
|
}
|
|
// First & last line
|
|
this.$selectionOverlay
|
|
.append(
|
|
this.$$('<div>').addClass('ve-ui-simplesurface-text-selected')
|
|
.css({
|
|
'left':startCharIdx * this.charDimension.width,
|
|
'top':startLineIdx * this.charDimension.height,
|
|
'width':
|
|
(this.checkViewBounding( {'x':Infinity,'y':startLineIdx } ).x + 1 - startCharIdx) *
|
|
this.charDimension.width,
|
|
'height':this.charDimension.height
|
|
}) )
|
|
.append(
|
|
this.$$('<div>').addClass('ve-ui-simplesurface-text-selected')
|
|
.css({
|
|
'left':0,
|
|
'top':endLineIdx * this.charDimension.height,
|
|
'width': endCharIdx * this.charDimension.width,
|
|
'height':this.charDimension.height
|
|
}) );
|
|
// Middle lines
|
|
for ( i = startLineIdx + 1; i < endLineIdx; i++ ){
|
|
this.$selectionOverlay
|
|
.append(
|
|
this.$$('<div>').addClass('ve-ui-simplesurface-text-selected')
|
|
.css({
|
|
'left': 0,
|
|
'top': i * this.charDimension.height,
|
|
'width': (this.checkViewBounding( {'x':Infinity, 'y':i } ).x + 1) * this.charDimension.width,
|
|
'height':this.charDimension.height
|
|
})
|
|
);
|
|
}
|
|
}
|
|
// Display to view
|
|
this.$selectionOverlay.css('display','block');
|
|
};
|
|
|
|
/**
|
|
* Hide selection highlight
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.hideSelection = function () {
|
|
this.$selectionOverlay.empty();
|
|
this.$selectionOverlay.css('display','none');
|
|
};
|
|
|
|
/**
|
|
* Convert model index to view index
|
|
*
|
|
* @method
|
|
* @param {int} model Model index
|
|
* @returns {Object} View index
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.modelToView = function ( model ) {
|
|
var match = [],
|
|
$line = this.$text.find('pre'),
|
|
i;
|
|
for ( i = 0; i < $line.length; i++ ){
|
|
if (parseInt($line.eq(i).attr('m'),10) <= model &&
|
|
parseInt($line.eq(i).attr('n'),10) > model){
|
|
break;
|
|
}
|
|
}
|
|
$line = $line.eq(i).find('span');
|
|
match = jQuery.grep($line,function(e){
|
|
return (parseInt(e.getAttribute('idx'),10) <= model &&
|
|
parseInt(e.getAttribute('idx'),10) + e.innerText.length > model);
|
|
});
|
|
return {
|
|
'x': parseInt(match[match.length-1].getAttribute('col'), 10) +
|
|
(model - parseInt(match[match.length-1].getAttribute('idx'), 10)),
|
|
'y': i
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Convert view index to model index
|
|
*
|
|
* @method
|
|
* @param {Object} view View index
|
|
* @returns {int} Model index
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.viewToModel = function ( view ) {
|
|
var $lineChildren = this.$text.find('pre:eq('+view.y+')').find('span'),
|
|
match = jQuery.grep( $lineChildren, function(e){
|
|
return (
|
|
parseInt(e.getAttribute('col'), 10) <= view.x &&
|
|
parseInt(e.getAttribute('col'), 10) + e.innerText.length > view.x
|
|
);
|
|
}),
|
|
model = match[match.length-1].hasAttribute('tb') ?
|
|
parseInt(match[match.length-1].getAttribute('idx'), 10) :
|
|
parseInt(match[match.length-1].getAttribute('idx'), 10) +
|
|
view.x - parseInt(match[match.length-1].getAttribute('col'),10);
|
|
return model;
|
|
};
|
|
|
|
/**
|
|
* Search
|
|
*
|
|
* @method
|
|
* @param {string} value Value to search
|
|
* @returns {boolean} Whether there is a match
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.search = function ( value ) {
|
|
var regex = new RegExp( value, 'g' );
|
|
if ( !regex.test( this.model ) ){
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Search input handler
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} event
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.onSearchInput = function ( event ) {
|
|
if ( event.which === 27 ){ // Esc
|
|
this.$searchContainer.css('display','none');
|
|
this.$text.focus();
|
|
return false;
|
|
} else {
|
|
setTimeout( ve.bind( function () {
|
|
var value = this.$searchBox.get(0).value;
|
|
if ( event === undefined ){
|
|
event = {'which':0};
|
|
}
|
|
if ( event.which === 13 ){ // Enter key
|
|
this.searchStep();
|
|
} else if ( value !== '' ){
|
|
if ( !this.search( value ) ){ // No match
|
|
this.searchHasResult = false;
|
|
this.$searchBox.css({
|
|
'background':'red'
|
|
});
|
|
} else {
|
|
this.searchRegex = new RegExp( this.$searchBox.get(0).value, 'g' );
|
|
this.searchRegex.lastIndex = 0;
|
|
this.searchHasResult = true;
|
|
this.$searchBox.css({
|
|
'background':'transparent'
|
|
});
|
|
this.searchStep();
|
|
}
|
|
} else {
|
|
this.$searchBox.css({
|
|
'background':'transparent'
|
|
});
|
|
this.hideSelection();
|
|
}
|
|
}, this ) );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Step search results
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.searchStep = function () {
|
|
var match;
|
|
if ( this.searchRegex && (match = this.searchRegex.exec( this.model )) !== null ){
|
|
this.selection.model.start = match.index;
|
|
this.selection.model.end = match.index + match[0].length;
|
|
this.createSelection(undefined, true);
|
|
this.showSelection();
|
|
} else {
|
|
this.onSearchInput();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Replace search result
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ui.MWSyntaxHighlightSimpleSurface.prototype.searchReplace = function () {
|
|
if ( this.searchHasResult ){
|
|
this.input.newer = this.$replaceBox.get(0).value;
|
|
this.input.pushReady = true;
|
|
this.edit();
|
|
this.pushStack();
|
|
this.searchStep();
|
|
}
|
|
}; |