| Index: trunk/parsers/wikidom/lib/jquery.flow.js |
| — | — | @@ -76,7 +76,8 @@ |
| 77 | 77 | .replace( '<', '<' ) |
| 78 | 78 | .replace( '>', '>' ) |
| 79 | 79 | .replace( '\'', ''' ) |
| 80 | | - .replace( '"', '"' ); |
| | 80 | + .replace( '"', '"' ) |
| | 81 | + .replace( '\n', '<span class="invisible">⏎</span>' ); |
| 81 | 82 | word.html += charHtml; |
| 82 | 83 | if ( $.flow.charCache[char] === undefined ) { |
| 83 | 84 | // Cache miss |
| Index: trunk/parsers/wikidom/lib/jquery.editSurface.css |
| — | — | @@ -41,6 +41,10 @@ |
| 42 | 42 | display: block; |
| 43 | 43 | width: 0px; |
| 44 | 44 | } |
| | 45 | +.editSurface-line .invisible { |
| | 46 | + color: green; |
| | 47 | + padding: 0 0.25em; |
| | 48 | +} |
| 45 | 49 | |
| 46 | 50 | .editSurface-range { |
| 47 | 51 | display: none; |
| Index: trunk/parsers/wikidom/lib/jquery.editSurface.js |
| — | — | @@ -18,14 +18,29 @@ |
| 19 | 19 | + '<div class="editSurface-range"></div>' |
| 20 | 20 | + '<div class="editSurface-range"></div>'); |
| 21 | 21 | |
| 22 | | - $(document) |
| 23 | | - .mousedown( function( e ) { |
| | 22 | + // Shortcuts |
| | 23 | + var $document = $this.find( '.editSurface-document' ); |
| | 24 | + var ranges = { |
| | 25 | + '$all': $( '.editSurface-range' ), |
| | 26 | + '$first': $( '.editSurface-range:eq(0)' ), |
| | 27 | + '$fill': $( '.editSurface-range:eq(1)' ), |
| | 28 | + '$last': $( '.editSurface-range:eq(2)' ) |
| | 29 | + }; |
| | 30 | + |
| | 31 | + // Events |
| | 32 | + $(document).bind( { |
| | 33 | + 'mousedown': function( e ) { |
| 24 | 34 | var $target = $( e.target ); |
| 25 | 35 | if ( $target.is( '.editSurface-paragraph' ) ) { |
| 26 | 36 | $target = $target.children().closestToOffset( { 'left': e.pageX, 'top': e.pageY } ); |
| 27 | 37 | } |
| 28 | 38 | if ( !$target.is( '.editSurface-line' ) ) { |
| 29 | | - return; |
| | 39 | + var $line = $target.closest( '.editSurface-line' ); |
| | 40 | + if ( $line.length ) { |
| | 41 | + $target = $line; |
| | 42 | + } else { |
| | 43 | + return; |
| | 44 | + } |
| 30 | 45 | } |
| 31 | 46 | sel = { |
| 32 | 47 | 'active': true, |
| — | — | @@ -45,8 +60,8 @@ |
| 46 | 61 | } |
| 47 | 62 | e.preventDefault(); |
| 48 | 63 | return false; |
| 49 | | - } ) |
| 50 | | - .mouseup( function( e ) { |
| | 64 | + }, |
| | 65 | + 'mouseup': function( e ) { |
| 51 | 66 | if ( sel.active ) { |
| 52 | 67 | if ( !sel.from || !sel.to |
| 53 | 68 | || ( sel.from.line === sel.to.line && sel.from.char === sel.to.char ) ) { |
| — | — | @@ -61,8 +76,8 @@ |
| 62 | 77 | } |
| 63 | 78 | sel.active = false; |
| 64 | 79 | } |
| 65 | | - } ) |
| 66 | | - .mousemove( function( e ) { |
| | 80 | + }, |
| | 81 | + 'mousemove': function( e ) { |
| 67 | 82 | if ( sel.active ) { |
| 68 | 83 | var $target = $( e.target ); |
| 69 | 84 | if ( !$target.is( '.editSurface-line' ) ) { |
| — | — | @@ -86,17 +101,9 @@ |
| 87 | 102 | cursor.hide(); |
| 88 | 103 | drawSelection( sel.start.$target.parent() ); |
| 89 | 104 | } |
| 90 | | - } ); |
| | 105 | + } |
| | 106 | + } ); |
| 91 | 107 | |
| 92 | | - // Shortcuts |
| 93 | | - var $document = $this.find( '.editSurface-document' ); |
| 94 | | - var ranges = { |
| 95 | | - '$all': $( '.editSurface-range' ), |
| 96 | | - '$first': $( '.editSurface-range:eq(0)' ), |
| 97 | | - '$fill': $( '.editSurface-range:eq(1)' ), |
| 98 | | - '$last': $( '.editSurface-range:eq(2)' ) |
| 99 | | - }; |
| 100 | | - |
| 101 | 108 | // Functions |
| 102 | 109 | function getSelectionText() { |
| 103 | 110 | var text; |
| — | — | @@ -124,12 +131,11 @@ |
| 125 | 132 | l, |
| 126 | 133 | r = 0, |
| 127 | 134 | cur = x - offset.left; |
| 128 | | - for ( var w = 0, eol = line.metrics.length; w <= eol; w++ ) { |
| 129 | | - var wi = Math.min( w, eol - 1 ); |
| | 135 | + for ( var w = 0, eol = line.metrics.length - 1; w <= eol; w++ ) { |
| 130 | 136 | l = r; |
| 131 | | - r += line.metrics[wi]; |
| | 137 | + r += line.metrics[w]; |
| 132 | 138 | if ( ( w === 0 && cur <= l ) || ( cur >= l && cur <= r ) || ( w === eol ) ) { |
| 133 | | - var word = line.words[wi], |
| | 139 | + var word = line.words[w], |
| 134 | 140 | a, |
| 135 | 141 | b = { 'l': l, 'c': l, 'r': l }; |
| 136 | 142 | for ( var c = 0, eow = word.metrics.length; c <= eow; c++ ) { |
| — | — | @@ -145,7 +151,7 @@ |
| 146 | 152 | 'char': word.offset + Math.min( c, word.text.length - 1 ), |
| 147 | 153 | 'word': word.index, |
| 148 | 154 | 'line': line.index, |
| 149 | | - 'x': offset.left + ( c < eow ? b.l : a.l ), |
| | 155 | + 'x': offset.left + b.l, |
| 150 | 156 | 'top': offset.top, |
| 151 | 157 | 'bottom': offset.top + height, |
| 152 | 158 | 'height': height |
| — | — | @@ -228,7 +234,7 @@ |
| 229 | 235 | for ( var i = 0; i < paragraph.lines.length; i++ ) { |
| 230 | 236 | lines.push( paragraph.lines[i].text ); |
| 231 | 237 | } |
| 232 | | - $paragraph.flow( lines.join( ' ' ) ); |
| | 238 | + $paragraph.flow( lines.join( '\n' ) ); |
| 233 | 239 | } |
| 234 | 240 | |
| 235 | 241 | function update() { |
| Index: trunk/parsers/wikidom/demos/surface/index.html |
| — | — | @@ -19,21 +19,18 @@ |
| 20 | 20 | <!-- Demo --> |
| 21 | 21 | <script> |
| 22 | 22 | $(document).ready( function() { |
| 23 | | - var text = [ |
| 24 | | - "In text display, line wrap is the feature of continuing on a new line when a line is full, such that each line fits in the viewable window, allowing text to be read from top to bottom without any horizontal scrolling.", |
| 25 | | - "Word wrap is the additional feature of most text editors, word processors, and web browsers, of breaking lines between and not within words, except when a single word is longer than a line.", |
| 26 | | - "It is usually done on the fly when viewing or printing a document, so no line break code is manually entered, or stored.[citation needed] If the user changes the margins, the editor will either automatically reposition the line breaks to ensure that all the text will \"flow\" within the margins and remain visible, or provide the typist some convenient way to reposition the line breaks.", |
| 27 | | - "A soft return is the break resulting from line wrap or word wrap, whereas a hard return is an intentional break, creating a new paragraph.", |
| 28 | | - "The soft returns are usually placed after the ends of complete words, or after the punctuation that follows complete words. However, word wrap may also occur following a hyphen.", |
| 29 | | - "Word wrap following hyphens is sometimes not desired, and can be avoided by using a so-called non-breaking hyphen instead of a regular hyphen. On the other hand, when using word processors, invisible hyphens, called soft hyphens, can also be inserted inside words so that word wrap can occur following the soft hyphens.", |
| 30 | | - "Sometimes, word wrap is not desirable between words. In such cases, word wrap can usually be avoided by using a hard space or non-breaking space between the words, instead of regular spaces.", |
| 31 | | - "OccasionallyThereAreWordsThatAreSoLongTheyExceedTheWidthOfTheLineAndEndUpWrappingBetweenMultipleLines.", |
| 32 | | - ].join( ' ' ); |
| 33 | 23 | $( '#es' ).editSurface( { |
| 34 | 24 | 'document': { 'blocks': [ { |
| 35 | 25 | 'type': 'paragraph', |
| 36 | 26 | 'lines': [ |
| 37 | | - { 'text': text } |
| | 27 | + { 'text': "In text display, line wrap is the feature of continuing on a new line when a line is full, such that each line fits in the viewable window, allowing text to be read from top to bottom without any horizontal scrolling." }, |
| | 28 | + { 'text': "Word wrap is the additional feature of most text editors, word processors, and web browsers, of breaking lines between and not within words, except when a single word is longer than a line." }, |
| | 29 | + { 'text': "It is usually done on the fly when viewing or printing a document, so no line break code is manually entered, or stored.[citation needed] If the user changes the margins, the editor will either automatically reposition the line breaks to ensure that all the text will \"flow\" within the margins and remain visible, or provide the typist some convenient way to reposition the line breaks." }, |
| | 30 | + { 'text': "A soft return is the break resulting from line wrap or word wrap, whereas a hard return is an intentional break, creating a new paragraph." }, |
| | 31 | + { 'text': "The soft returns are usually placed after the ends of complete words, or after the punctuation that follows complete words. However, word wrap may also occur following a hyphen." }, |
| | 32 | + { 'text': "Word wrap following hyphens is sometimes not desired, and can be avoided by using a so-called non-breaking hyphen instead of a regular hyphen. On the other hand, when using word processors, invisible hyphens, called soft hyphens, can also be inserted inside words so that word wrap can occur following the soft hyphens." }, |
| | 33 | + { 'text': "Sometimes, word wrap is not desirable between words. In such cases, word wrap can usually be avoided by using a hard space or non-breaking space between the words, instead of regular spaces." }, |
| | 34 | + { 'text': "OccasionallyThereAreWordsThatAreSoLongTheyExceedTheWidthOfTheLineAndEndUpWrappingBetweenMultipleLines." } |
| 38 | 35 | ] |
| 39 | 36 | } ] } |
| 40 | 37 | } ); |