http://www.mediawiki.org/wiki/Special:Code/MediaWiki/89752
Revision: 89752
Author: tparscal
Date: 2011-06-08 21:43:23 +0000 (Wed, 08 Jun 2011)
Log Message:
-----------
Made cursor movement outside of line elements still cause selection to update.
Modified Paths:
--------------
trunk/parsers/wikidom/demos/surface/index.html
trunk/parsers/wikidom/lib/jquery.editSurface.js
trunk/parsers/wikidom/lib/jquery.flow.js
Added Paths:
-----------
trunk/parsers/wikidom/lib/jquery.closestToOffset.js
Modified: trunk/parsers/wikidom/demos/surface/index.html
===================================================================
--- trunk/parsers/wikidom/demos/surface/index.html 2011-06-08 21:24:03 UTC
(rev 89751)
+++ trunk/parsers/wikidom/demos/surface/index.html 2011-06-08 21:43:23 UTC
(rev 89752)
@@ -12,6 +12,7 @@
<!-- EditSurface -->
<script type="text/javascript"
src="../../lib/jquery.js"></script>
+ <script type="text/javascript"
src="../../lib/jquery.closestToOffset.js"></script>
<script type="text/javascript"
src="../../lib/jquery.flow.js"></script>
<script type="text/javascript"
src="../../lib/jquery.editSurface.js"></script>
Added: trunk/parsers/wikidom/lib/jquery.closestToOffset.js
===================================================================
--- trunk/parsers/wikidom/lib/jquery.closestToOffset.js
(rev 0)
+++ trunk/parsers/wikidom/lib/jquery.closestToOffset.js 2011-06-08 21:43:23 UTC
(rev 89752)
@@ -0,0 +1,33 @@
+$.fn.closestToOffset = function( offset ) {
+ var $e = null,
+ x = offset.left,
+ y = offset.top,
+ o,
+ d,
+ dx,
+ dy,
+ md;
+ this.each( function() {
+ var o = $(this).offset();
+ if ( ( x >= o.left ) && ( x <= o.right ) && ( y >= o.top ) && (
y <= o.bottom ) ) {
+ $e = $(this);
+ return false;
+ }
+ var offsets = [
+ [o.left, o.top],
+ [o.right, o.top],
+ [o.left, o.bottom],
+ [o.right, o.bottom]
+ ];
+ for ( var i = 0; i < offsets.length; i++ ) {
+ dx = offsets[i][0] - x;
+ dy = offsets[i][1] - y;
+ d = Math.sqrt( ( dx * dx ) + ( dy * dy ) );
+ if ( md === undefined || d < md ) {
+ md = d;
+ $e = $(this);
+ }
+ }
+ } );
+ return $e;
+};
Property changes on: trunk/parsers/wikidom/lib/jquery.closestToOffset.js
___________________________________________________________________
Added: svn:mime-type
+ text/plain
Added: svn:eol-style
+ native
Modified: trunk/parsers/wikidom/lib/jquery.editSurface.js
===================================================================
--- trunk/parsers/wikidom/lib/jquery.editSurface.js 2011-06-08 21:24:03 UTC
(rev 89751)
+++ trunk/parsers/wikidom/lib/jquery.editSurface.js 2011-06-08 21:43:23 UTC
(rev 89752)
@@ -20,48 +20,52 @@
$(document)
.mousedown( function( e ) {
- var $target = $( e.target );
- // TODO: If the target is not a line, find the nearest
line to the cursor and use it
- if ( $target.is( '.editSurface-line' ) ) {
- e.preventDefault();
- sel = {
- 'active': true,
- 'from': null,
- 'to': null,
- 'start': getCursorPosition( e ),
- 'end': null
- };
- cursor.show();
- drawSelection( $target.parent() );
- // Move cursor
- if ( sel.start ) {
- cursor.$.css( {
- 'top': sel.start.top,
- 'left': sel.start.x
- } );
- }
+ if ( !$( e.target ).is( '.editSurface-line' ) ) {
+ return;
}
+ sel = {
+ 'active': true,
+ 'from': null,
+ 'to': null,
+ 'start': getCursorPosition( e.pageX, e.pageY,
$( e.target ) ),
+ 'end': null
+ };
+ cursor.show();
+ drawSelection( sel.start.$target.parent() );
+ // Move cursor
+ if ( sel.start ) {
+ cursor.$.css( {
+ 'top': sel.start.top,
+ 'left': sel.start.x
+ } );
+ }
+ e.preventDefault();
return false;
} )
.mouseup( function( e ) {
- var $target = $( e.target );
- if ( $target.is( '.editSurface-line' ) && ( !sel.from
|| !sel.to
- || ( sel.from.line === sel.to.line &&
sel.from.index === sel.to.index ) ) ) {
- sel.from = null;
- sel.to = null;
- sel.start = null;
- sel.end = null;
- cursor.show();
+ if ( sel.active ) {
+ if ( !sel.from || !sel.to
+ || ( sel.from.line ===
sel.to.line && sel.from.index === sel.to.index ) ) {
+ sel.from = null;
+ sel.to = null;
+ sel.start = null;
+ sel.end = null;
+ cursor.show();
+ clearSelection();
+ } else {
+ drawSelection(
sel.start.$target.parent() );
+ }
+ sel.active = false;
}
- sel.active = false;
- drawSelection( $target.parent() );
} )
.mousemove( function( e ) {
- var $target = $( e.target );
- // TODO: If the target is not a line, find the nearest
line to the cursor and use it
- if ( $target.is( '.editSurface-line' ) && sel.active ) {
- sel.end = getCursorPosition( e );
- if ( sel.start && sel.end && sel.start.line <
sel.end.line
+ var $target = undefined;
+ if ( $( e.target ).is( '.editSurface-line' ) ) {
+ $target = $( e.target );
+ }
+ if ( sel.active ) {
+ sel.end = getCursorPosition( e.pageX, e.pageY,
$target );
+ if ( sel.start.line < sel.end.line
|| ( sel.start.line ===
sel.end.line
&&
sel.start.index < sel.end.index ) ) {
sel.from = sel.start;
@@ -71,7 +75,7 @@
sel.to = sel.start;
}
cursor.hide();
- drawSelection( $target.parent() );
+ drawSelection( sel.start.$target.parent() );
}
} );
@@ -105,23 +109,24 @@
}
return text;
}
- // TODO: Take x and y, and infer the target
- function getCursorPosition( e ) {
- var $target = $( e.target );
+ function getCursorPosition( x, y, $target ) {
+ if ( $target === undefined ) {
+ var $target = $( '.editSurface-line' ).closestToOffset(
{ 'left': x, 'top': y } );
+ }
var metrics = $target.data( 'metrics' );
var text = $target.data( 'text' );
var line = $target.data( 'line' );
if ( !$.isArray( metrics ) || metrics.length === 0 ) {
- return null;
+ throw "Missing metrics data error"
}
var to = metrics.length - 1;
var a;
var b = { 'l': 0, 'c': 0, 'r': 0 };
- var x = e.layerX;
+ var c = x - $target.offset().left;
for ( var i = 0; i <= to; i++ ) {
a = b;
b = { 'l': a.r, 'c': a.r + ( metrics[i] / 2 ), 'r': a.r
+ metrics[i] };
- if ( ( i === 0 && x < a.l ) || ( x > a.c && x <= b.c )
|| ( i === to && x >= b.r ) ) {
+ if ( ( i === 0 && c <= a.l ) || ( c >= a.c && c <= b.c
) || i === to ) {
var offset = $target.offset();
var height = $target.height();
return {
@@ -135,9 +140,12 @@
};
}
}
- return null;
}
+ function clearSelection() {
+ ranges.$all.hide();
+ }
+
function drawSelection( $container ) {
if ( sel.from && sel.to ) {
if ( sel.from.line === sel.to.line ) {
Modified: trunk/parsers/wikidom/lib/jquery.flow.js
===================================================================
--- trunk/parsers/wikidom/lib/jquery.flow.js 2011-06-08 21:24:03 UTC (rev
89751)
+++ trunk/parsers/wikidom/lib/jquery.flow.js 2011-06-08 21:43:23 UTC (rev
89752)
@@ -63,9 +63,13 @@
// TODO: How does this work with hyphens? Won't
they be to far right?
breakPos++;
}
+ // Move the position back to the last safe location
+ pos = breakPos;
+ // Truncate characters that won't fit
lineText = text.substring( lineStartPos, breakPos );
$line.html( encodeHtml( lineText ) );
- pos = breakPos;
+ // Don't leave metrics from truncated characters around
+ lineMetrics = lineMetrics.slice( 0, pos - lineStartPos
);
}
$line
_______________________________________________
MediaWiki-CVS mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
