mediawiki-extensions-Visual.../modules/ve/ce/ve.ce.SurfaceObserver.js
Catrope 2eb77c1298 Add ve.ce.View as a common base class for ce.Node and ce.Annotation
Just like ve.dm.Model is a common base class for dm.Node, dm.Annotation
and dm.MetaItem.

ce.View abstracts the this.model and this.$ behavior, including liveness,
whitelisted HTML attribute rendering and adding a back reference in
.data(). The back reference has been renamed from .data( 'node' ) to
the more generic .data( 'view' ).

At this point this means ce.Annotation is just a shell around ce.View
(except where it defaults to a span rather than a div), but that could
change in the future.

Change-Id: I0eef5b80718e0b0fcd3f8bba096b452f0bb680d0
2013-04-09 12:05:05 -07:00

208 lines
4.9 KiB
JavaScript

/*global rangy */
/*!
* VisualEditor ContentEditable Surface class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* ContentEditable surface observer.
*
* @class
* @extends ve.EventEmitter
* @constructor
* @param {ve.ce.Document} documentView Document to observe
*/
ve.ce.SurfaceObserver = function VeCeSurfaceObserver( documentView ) {
// Parent constructor
ve.EventEmitter.call( this );
// Properties
this.documentView = documentView;
this.polling = false;
this.timeoutId = null;
this.frequency = 250; //ms
// Initialization
this.clear();
};
/* Inheritance */
ve.inheritClass( ve.ce.SurfaceObserver, ve.EventEmitter );
/* Events */
/**
* When #poll sees a change this event is emitted (before the
* properties are updated).
*
* @event contentChange
* @param {HTMLElement} node DOM node the change occured in
* @param {Object} previous Old data
* @param {Object} previous.text Old plain text content
* @param {Object} previous.hash Old DOM hash
* @param {ve.Range} previous.range Old selection
* @param {Object} next New data
* @param {Object} next.text New plain text content
* @param {Object} next.hash New DOM hash
* @param {ve.Range} next.range New selection
*/
/**
* When #poll observes a change in the document and the new
* selection does not equal as the last known selection, this event
* is emitted (before the properties are updated).
*
* @event selectionChange
* @param {ve.Range} oldRange
* @param {ve.Range} newRange
*/
/* Methods */
/**
* Clear polling data.
*
* @method
* @param {ve.Range} range Initial range to use
*/
ve.ce.SurfaceObserver.prototype.clear = function ( range ) {
this.rangyRange = null;
this.range = range || null;
this.node = null;
this.text = null;
this.hash = null;
};
/**
* Start polling.
*
* If {async} is false or undefined the first poll cycle will occur immediately and synchronously.
*
* @method
* @param {boolean} async Poll the first time asynchronously
*/
ve.ce.SurfaceObserver.prototype.start = function ( async ) {
this.polling = true;
this.poll( async );
};
/**
* Stop polling.
*
* If {poll} is false or undefined than no final poll cycle will occur and changes can be lost. If
* it's true then a final poll cycle will occur immediately and synchronously.
*
* @method
* @param {boolean} poll Poll one last time before stopping future polling
*/
ve.ce.SurfaceObserver.prototype.stop = function ( poll ) {
if ( this.polling === true ) {
if ( poll === true ) {
this.poll();
}
this.polling = false;
clearTimeout( this.timeoutId );
this.timeoutId = null;
}
};
/**
* Poll for changes.
*
* If `async` is false or undefined then polling will occcur asynchronously.
*
* TODO: fixing selection in certain cases, handling selection across multiple nodes in Firefox
*
* FIXME: Does not work well (selectionChange is not emited) when cursor is placed inside a slug
* with a mouse.
*
* @method
* @param {boolean} async Poll asynchronously
* @emits contentChange
* @emits selectionChange
*/
ve.ce.SurfaceObserver.prototype.poll = function ( async ) {
var delayPoll, $branch, node, text, hash, range, rangyRange;
if ( this.polling === false ) {
return;
}
if ( this.timeoutId !== null ) {
clearTimeout( this.timeoutId );
this.timeoutId = null;
}
delayPoll = ve.bind( function ( async ) {
this.timeoutId = setTimeout(
ve.bind( this.poll, this ),
async === true ? 0 : this.frequency
);
}, this );
if ( async === true ) {
delayPoll( true );
return;
}
range = this.range;
node = this.node;
rangyRange = ve.ce.DomRange.newFromDomSelection( rangy.getSelection() );
if ( !rangyRange.equals( this.rangyRange ) ){
this.rangyRange = rangyRange;
$branch = $( rangyRange.anchorNode ).closest( '.ve-ce-branchNode' );
if ( $branch.length ) {
node = $branch.data( 'view' );
if ( node.canHaveChildrenNotContent() ) {
node = null;
} else {
range = rangyRange.getRange();
}
}
}
if ( this.node !== node ) {
if ( node === null ) {
this.text = null;
this.hash = null;
this.node = null;
} else {
this.text = ve.ce.getDomText( node.$[0] );
this.hash = ve.ce.getDomHash( node.$[0] );
this.node = node;
}
} else {
if ( node !== null ) {
text = ve.ce.getDomText( node.$[0] );
hash = ve.ce.getDomHash( node.$[0] );
if ( this.text !== text || this.hash !== hash ) {
this.emit(
'contentChange',
node,
{ 'text': this.text, 'hash': this.hash, 'range': this.range },
{ 'text': text, 'hash': hash, 'range': range }
);
this.text = text;
this.hash = hash;
}
}
}
// Only emit selectionChange event if there's a meaningful range difference
if ( ( this.range && range ) ? !this.range.equals( range ) : ( this.range !== range ) ) {
this.emit(
'selectionChange',
this.range,
range
);
this.range = range;
}
delayPoll();
};