| Index: trunk/parsers/wikidom/lib/jquery.flow.js |
| — | — | @@ -5,87 +5,86 @@ |
| 6 | 6 | $.flow = { 'widthCache': {} }; |
| 7 | 7 | |
| 8 | 8 | $.fn.flow = function( text ) { |
| 9 | | - var lineLimit = $(this).innerWidth(); |
| 10 | 9 | |
| 11 | | - // Wordify |
| 12 | | - var words = [], |
| 13 | | - word = { 'text': '', 'width': 0, 'metrics': [] }; |
| 14 | | - for ( var i = 0; i < text.length; i++ ) { |
| 15 | | - var char = text[i]; |
| 16 | | - // Boundary detection |
| 17 | | - var boundary = String( ' -\t\r\n\f' ).indexOf( char ) >= 0; |
| 18 | | - // Encoding |
| 19 | | - var charHtml = char |
| 20 | | - .replace( '&', '&' ) |
| | 10 | + function encodeHtml( c ) { |
| | 11 | + return c.replace( '&', '&' ) |
| 21 | 12 | .replace( ' ', ' ' ) |
| 22 | 13 | .replace( '<', '<' ) |
| 23 | 14 | .replace( '>', '>' ) |
| 24 | 15 | .replace( '\'', ''' ) |
| 25 | 16 | .replace( '"', '"' ); |
| 26 | | - // Measurement |
| 27 | | - var charWidth; |
| 28 | | - if ( typeof $.flow.widthCache[char] === 'undefined' ) { |
| 29 | | - charWidth = $.flow.widthCache[char] = |
| 30 | | - $( '<span>' + charHtml + '</span>' ).appendTo( $(this) ).width(); |
| 31 | | - } else { |
| 32 | | - charWidth = $.flow.widthCache[char]; |
| 33 | | - } |
| 34 | | - // Virtual boundary |
| 35 | | - if ( word.width + charWidth >= lineLimit ) { |
| 36 | | - words[words.length] = word; |
| 37 | | - word = { 'text': '', 'width': 0, 'metrics': [] }; |
| 38 | | - } |
| 39 | | - // Append |
| 40 | | - if ( boundary ) { |
| 41 | | - if ( word.text.length ) { |
| 42 | | - words[words.length] = word; |
| 43 | | - word = { 'text': '', 'width': 0, 'metrics': [] }; |
| 44 | | - } |
| 45 | | - words[words.length] = { 'text': char, 'width': charWidth, 'metrics': [charWidth] }; |
| 46 | | - } else { |
| 47 | | - word.text += char; |
| 48 | | - word.width += charWidth; |
| 49 | | - word.metrics[word.metrics.length] = charWidth; |
| 50 | | - } |
| 51 | 17 | } |
| 52 | | - if ( word.text.length ) { |
| 53 | | - words[words.length] = word; |
| 54 | | - } |
| 55 | 18 | |
| 56 | | - // Lineify |
| 57 | | - var lines = [], |
| 58 | | - line = { 'text': '', 'width': 0, 'metrics': [] }; |
| 59 | | - for ( var i = 0; i < words.length; i++ ) { |
| 60 | | - var hardReturn = String( '\r\n\f' ).indexOf( words[i].text ) >= 0; |
| 61 | | - if ( line.width + words[i].width > lineLimit || hardReturn ) { |
| 62 | | - lines[lines.length] = line; |
| 63 | | - line = { 'text': '', 'width': 0, 'metrics': [] }; |
| | 19 | + var breakableRe = /[\s\r\n\f]/; |
| | 20 | + |
| | 21 | + var $this = $(this); |
| | 22 | + |
| | 23 | + $this.empty(); |
| | 24 | + |
| | 25 | + var width = $this.innerWidth(); |
| | 26 | + var pos = 0; |
| | 27 | + var line = 0; |
| | 28 | + |
| | 29 | + while( pos < text.length ) { |
| | 30 | + var lineStartPos = pos; |
| | 31 | + var breakPos = pos; |
| | 32 | + |
| | 33 | + var $line = $( '<div class="editSurface-line"></div>' ).appendTo( $this ); |
| | 34 | + var lineText = ''; |
| | 35 | + var lineMetrics = []; |
| | 36 | + var lineWidth = 0; |
| | 37 | + var lastLineWidth = 0; |
| | 38 | + |
| | 39 | + while ( pos < text.length && lineWidth < width ) { |
| | 40 | + // Append text |
| | 41 | + lineText += text.charAt( pos ); |
| | 42 | + // Apply to DOM |
| | 43 | + $line.html( encodeHtml( lineText ) ); |
| | 44 | + // Get new line width from DOM |
| | 45 | + lastLineWidth = lineWidth; |
| | 46 | + lineWidth = $line.innerWidth(); |
| | 47 | + // Push difference (character width) |
| | 48 | + lineMetrics.push( lineWidth - lastLineWidth ); |
| | 49 | + if ( breakableRe( text.charAt(pos) ) ) { |
| | 50 | + breakPos = pos; |
| | 51 | + } |
| | 52 | + pos++; |
| 64 | 53 | } |
| 65 | | - if ( !hardReturn && ( line.width > 0 || words[i].text !== ' ' ) ) { |
| 66 | | - line.text += words[i].text; |
| 67 | | - line.width += words[i].width; |
| 68 | | - line.metrics = line.metrics.concat( words[i].metrics ); |
| | 54 | + |
| | 55 | + if ( lineWidth >= width ) { |
| | 56 | + if ( breakPos === lineStartPos ) { |
| | 57 | + // There was no breakable position between the start of the line and here, so we |
| | 58 | + // have some kind of long word. Or, the line width is very small. Break at the |
| | 59 | + // previous character. |
| | 60 | + pos -= 1; |
| | 61 | + breakPos = pos; |
| | 62 | + } else { |
| | 63 | + // Include the breaking character in the previous line |
| | 64 | + // TODO: How does this work with hyphens? Won't they be to far right? |
| | 65 | + breakPos++; |
| | 66 | + } |
| | 67 | + lineText = text.substring( lineStartPos, breakPos ); |
| | 68 | + $line.html( encodeHtml( lineText ) ); |
| | 69 | + pos = breakPos; |
| 69 | 70 | } |
| 70 | | - } |
| 71 | | - if ( line.text.length ) { |
| 72 | | - lines[lines.length] = line; |
| 73 | | - } |
| 74 | | - |
| 75 | | - // Flow |
| 76 | | - $(this).empty(); |
| 77 | | - for ( var i = 0; i < lines.length; i++ ) { |
| 78 | | - var $line = $( '<div class="editSurface-line"></div>' ) |
| 79 | | - .data( 'metrics', lines[i].metrics ) |
| 80 | | - .data( 'text', lines[i].text ) |
| 81 | | - .data( 'line', i ); |
| 82 | | - if ( lines[i].text.length ) { |
| 83 | | - $line.text( lines[i].text ); |
| 84 | | - } else { |
| 85 | | - $line.html( ' ' ); |
| 86 | | - $line.addClass( 'empty' ); |
| | 71 | + |
| | 72 | + $line |
| | 73 | + .data( 'metrics', lineMetrics ) |
| | 74 | + .data( 'text', lineText ) |
| | 75 | + .data( 'line', line ); |
| | 76 | + |
| | 77 | + if ( lineStartPos === pos ) { |
| | 78 | + $line.html( ' ' ) |
| 87 | 79 | } |
| 88 | | - $(this).append( $line ); |
| | 80 | + |
| | 81 | + line++; |
| 89 | 82 | } |
| | 83 | + |
| | 84 | + return $this; |
| 90 | 85 | |
| 91 | | - return $(this); |
| 92 | | -}; |
| \ No newline at end of file |
| | 86 | + // the end |
| | 87 | + |
| | 88 | + |
| | 89 | + |
| | 90 | +}; |
| | 91 | + |
| Index: trunk/parsers/wikidom/lib/jquery.editSurface.css |
| — | — | @@ -5,8 +5,8 @@ |
| 6 | 6 | |
| 7 | 7 | #selection { |
| 8 | 8 | position: absolute; |
| 9 | | - right: 3%; |
| 10 | | - width: 45%; |
| | 9 | + left: 26em; |
| | 10 | + width: 20em; |
| 11 | 11 | border: solid 1px Highlight; |
| 12 | 12 | line-height: 1.5em; |
| 13 | 13 | cursor: text; |
| — | — | @@ -14,27 +14,27 @@ |
| 15 | 15 | |
| 16 | 16 | #selection p { |
| 17 | 17 | margin: 0; |
| 18 | | - padding: 1em; |
| | 18 | + padding: 0em; |
| 19 | 19 | } |
| 20 | 20 | |
| 21 | 21 | .editSurface-container { |
| 22 | 22 | position: absolute; |
| 23 | | - left: 3%; |
| 24 | | - width: 45%; |
| | 23 | + left: 1em; |
| | 24 | + width: 24em; |
| 25 | 25 | border: solid 1px red; |
| 26 | 26 | cursor: text; |
| 27 | 27 | } |
| 28 | 28 | |
| 29 | 29 | .editSurface-paragraph { |
| 30 | | - padding: 1em; |
| | 30 | + padding: 0em; |
| 31 | 31 | } |
| 32 | 32 | |
| 33 | | -.editSurface-container .editSurface-line { |
| | 33 | +.editSurface-line { |
| | 34 | + display: inline-block; |
| 34 | 35 | height: 1.5em; |
| 35 | 36 | line-height: 1.5em; |
| 36 | | - width: 100%; |
| 37 | 37 | cursor: text; |
| 38 | | - overflow: hidden; |
| | 38 | + white-space: nowrap; |
| 39 | 39 | } |
| 40 | 40 | |
| 41 | 41 | .editSurface-range { |
| Index: trunk/parsers/wikidom/lib/jquery.editSurface.js |
| — | — | @@ -16,7 +16,9 @@ |
| 17 | 17 | .after( '<div class="editSurface-cursor"></div>' ) |
| 18 | 18 | .before( '<div class="editSurface-range"></div>' |
| 19 | 19 | + '<div class="editSurface-range"></div>' |
| 20 | | - + '<div class="editSurface-range"></div>') |
| | 20 | + + '<div class="editSurface-range"></div>'); |
| | 21 | + |
| | 22 | + $(document) |
| 21 | 23 | .mousedown( function( e ) { |
| 22 | 24 | var $target = $( e.target ); |
| 23 | 25 | // TODO: If the target is not a line, find the nearest line to the cursor and use it |
| — | — | @@ -44,8 +46,8 @@ |
| 45 | 47 | } ) |
| 46 | 48 | .mouseup( function( e ) { |
| 47 | 49 | var $target = $( e.target ); |
| 48 | | - if ( !$target.is( '.editSurface-line' ) || !sel.from || !sel.to |
| 49 | | - || ( sel.from.line === sel.to.line && sel.from.index === sel.to.index ) ) { |
| | 50 | + if ( $target.is( '.editSurface-line' ) && ( !sel.from || !sel.to |
| | 51 | + || ( sel.from.line === sel.to.line && sel.from.index === sel.to.index ) ) ) { |
| 50 | 52 | sel.from = null; |
| 51 | 53 | sel.to = null; |
| 52 | 54 | sel.start = null; |
| — | — | @@ -74,6 +76,7 @@ |
| 75 | 77 | } |
| 76 | 78 | } ); |
| 77 | 79 | |
| | 80 | + |
| 78 | 81 | // Shortcuts |
| 79 | 82 | var $document = $this.find( '.editSurface-document' ); |
| 80 | 83 | var ranges = { |
| Index: trunk/parsers/wikidom/demos/surface/index.html |
| — | — | @@ -17,23 +17,25 @@ |
| 18 | 18 | |
| 19 | 19 | <!-- Demo --> |
| 20 | 20 | <script> |
| 21 | | - var text = [ |
| 22 | | - "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.", |
| 23 | | - "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.", |
| 24 | | - "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.", |
| 25 | | - "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.", |
| 26 | | - "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.", |
| 27 | | - "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.", |
| 28 | | - "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.", |
| 29 | | - "OccasionallyThereAreWordsThatAreSoLongTheyExceedTheWidthOfTheLineAndEndUpWrappingBetweenMultipleLines.", |
| 30 | | - ].join( ' ' ); |
| 31 | | - $( '#es' ).editSurface( { |
| 32 | | - 'document': { 'blocks': [ { |
| 33 | | - 'type': 'paragraph', |
| 34 | | - 'lines': [ |
| 35 | | - { 'text': text } |
| 36 | | - ] |
| 37 | | - } ] } |
| | 21 | + $(document).ready( function() { |
| | 22 | + var text = [ |
| | 23 | + "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.", |
| | 24 | + "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.", |
| | 25 | + "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.", |
| | 26 | + "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.", |
| | 27 | + "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.", |
| | 28 | + "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.", |
| | 29 | + "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.", |
| | 30 | + "OccasionallyThereAreWordsThatAreSoLongTheyExceedTheWidthOfTheLineAndEndUpWrappingBetweenMultipleLines.", |
| | 31 | + ].join( ' ' ); |
| | 32 | + $( '#es' ).editSurface( { |
| | 33 | + 'document': { 'blocks': [ { |
| | 34 | + 'type': 'paragraph', |
| | 35 | + 'lines': [ |
| | 36 | + { 'text': text } |
| | 37 | + ] |
| | 38 | + } ] } |
| | 39 | + } ); |
| 38 | 40 | } ); |
| 39 | 41 | </script> |
| 40 | 42 | </body> |