| Index: trunk/parsers/wikidom/lib/jquery.editSurface.css |
| — | — | @@ -1,6 +1,6 @@ |
| 2 | 2 | body { |
| 3 | 3 | font-family: "Arial"; |
| 4 | | - font-size: 0.8em; |
| | 4 | + font-size: 1em; |
| 5 | 5 | } |
| 6 | 6 | |
| 7 | 7 | #selection { |
| Index: trunk/parsers/wikidom/lib/jquery.editSurface.js |
| — | — | @@ -24,21 +24,21 @@ |
| 25 | 25 | // TODO: If the target is not a line, find the nearest line to the cursor and use it |
| 26 | 26 | if ( $target.is( '.editSurface-line' ) ) { |
| 27 | 27 | e.preventDefault(); |
| 28 | | - e.stopPropagation(); |
| 29 | 28 | sel = { |
| 30 | 29 | 'active': true, |
| 31 | 30 | 'from': null, |
| 32 | 31 | 'to': null, |
| 33 | | - 'start': getSelection( e ), |
| | 32 | + 'start': getCursorPosition( e ), |
| 34 | 33 | 'end': null |
| 35 | 34 | }; |
| | 35 | + console.log( sel.start ); |
| 36 | 36 | cursor.show(); |
| 37 | 37 | drawSelection( $target.parent() ); |
| 38 | 38 | // Move cursor |
| 39 | 39 | if ( sel.start ) { |
| 40 | 40 | cursor.$.css( { |
| 41 | 41 | 'top': sel.start.top, |
| 42 | | - 'left': sel.start.left |
| | 42 | + 'left': sel.start.x |
| 43 | 43 | } ); |
| 44 | 44 | } |
| 45 | 45 | } |
| — | — | @@ -61,8 +61,8 @@ |
| 62 | 62 | var $target = $( e.target ); |
| 63 | 63 | // TODO: If the target is not a line, find the nearest line to the cursor and use it |
| 64 | 64 | if ( $target.is( '.editSurface-line' ) && sel.active ) { |
| 65 | | - sel.end = getSelection( e ); |
| 66 | | - if ( sel.start.line < sel.end.line |
| | 65 | + sel.end = getCursorPosition( e ); |
| | 66 | + if ( sel.start && sel.end && sel.start.line < sel.end.line |
| 67 | 67 | || ( sel.start.line === sel.end.line |
| 68 | 68 | && sel.start.index < sel.end.index ) ) { |
| 69 | 69 | sel.from = sel.start; |
| — | — | @@ -106,7 +106,8 @@ |
| 107 | 107 | } |
| 108 | 108 | return text; |
| 109 | 109 | } |
| 110 | | - function getSelection( e ) { |
| | 110 | + // TODO: Take x and y, and infer the target |
| | 111 | + function getCursorPosition( e ) { |
| 111 | 112 | var $target = $( e.target ); |
| 112 | 113 | var metrics = $target.data( 'metrics' ); |
| 113 | 114 | var text = $target.data( 'text' ); |
| — | — | @@ -115,23 +116,22 @@ |
| 116 | 117 | return null; |
| 117 | 118 | } |
| 118 | 119 | var to = metrics.length - 1; |
| 119 | | - var l = 0; |
| 120 | | - var r = 0; |
| | 120 | + var a; |
| | 121 | + var b = { 'l': 0, 'c': 0, 'r': 0 }; |
| | 122 | + var x = e.layerX; |
| 121 | 123 | for ( var i = 0; i <= to; i++ ) { |
| 122 | | - l = r; |
| 123 | | - r += metrics[i]; |
| 124 | | - if ( ( e.layerX > l && e.layerX <= r ) || ( e.layerX >= r && i == to ) ) { |
| | 124 | + a = b; |
| | 125 | + b = { 'l': a.r, 'c': a.r + ( metrics[i] / 2 ), 'r': a.r + metrics[i] }; |
| | 126 | + if ( ( i === 0 && x < a.l ) || ( x > a.c && x <= b.c ) || ( i === to && x >= b.r ) ) { |
| 125 | 127 | var offset = $target.offset(); |
| 126 | 128 | var height = $target.height(); |
| 127 | 129 | return { |
| 128 | 130 | '$target': $target, |
| 129 | 131 | 'index': i, |
| 130 | 132 | 'line': line, |
| | 133 | + 'x': offset.left + b.l, |
| 131 | 134 | 'top': offset.top, |
| 132 | | - 'left': offset.left + l, |
| 133 | | - 'right': r, |
| 134 | 135 | 'bottom': offset.top + height, |
| 135 | | - 'width': r - l, |
| 136 | 136 | 'height': height |
| 137 | 137 | }; |
| 138 | 138 | } |
| — | — | @@ -145,9 +145,9 @@ |
| 146 | 146 | // 1 line |
| 147 | 147 | if ( sel.from.index !== sel.to.index ) { |
| 148 | 148 | ranges.$first.show().css( { |
| 149 | | - 'left': sel.from.left, |
| | 149 | + 'left': sel.from.x, |
| 150 | 150 | 'top': sel.from.top, |
| 151 | | - 'width': sel.to.right - sel.from.right, |
| | 151 | + 'width': sel.to.x - sel.from.x, |
| 152 | 152 | 'height': sel.from.height |
| 153 | 153 | } ); |
| 154 | 154 | ranges.$fill.hide(); |
| — | — | @@ -159,9 +159,9 @@ |
| 160 | 160 | } else if ( sel.from.line < sel.to.line ) { |
| 161 | 161 | // 2+ lines |
| 162 | 162 | ranges.$first.show().css( { |
| 163 | | - 'left': sel.from.left, |
| | 163 | + 'left': sel.from.x, |
| 164 | 164 | 'top': sel.from.top, |
| 165 | | - 'width': ( $container.innerWidth() - sel.from.left ) |
| | 165 | + 'width': ( $container.innerWidth() - sel.from.x ) |
| 166 | 166 | + $container.offset().left, |
| 167 | 167 | 'height': sel.from.height |
| 168 | 168 | } ); |
| — | — | @@ -178,7 +178,7 @@ |
| 179 | 179 | ranges.$last.show().css( { |
| 180 | 180 | 'left': $container.offset().left, |
| 181 | 181 | 'top': sel.to.top, |
| 182 | | - 'width': sel.to.left - $container.offset().left, |
| | 182 | + 'width': sel.to.x - $container.offset().left, |
| 183 | 183 | 'height': sel.to.height |
| 184 | 184 | } ); |
| 185 | 185 | // XXX: Demo code! |