| Index: trunk/parsers/wikidom/lib/hype/views/es.SurfaceView.js |
| — | — | @@ -15,7 +15,8 @@ |
| 16 | 16 | }; |
| 17 | 17 | |
| 18 | 18 | // References for use in closures |
| 19 | | - var surfaceView = this; |
| | 19 | + var surfaceView = this, |
| | 20 | + $document = $( document ); |
| 20 | 21 | |
| 21 | 22 | // MouseDown on surface |
| 22 | 23 | this.$.bind( { |
| — | — | @@ -24,17 +25,140 @@ |
| 25 | 26 | } |
| 26 | 27 | } ); |
| 27 | 28 | |
| | 29 | + // Hidden input |
| | 30 | + this.$input = $( '<input class="editSurface-input" />' ) |
| | 31 | + .prependTo( this.$ ) |
| | 32 | + .bind( { |
| | 33 | + 'focus' : function() { |
| | 34 | + console.log("focus"); |
| | 35 | + $document.unbind( '.editSurface' ); |
| | 36 | + $document.bind({ |
| | 37 | + 'mousemove.editSurface' : function(e) { |
| | 38 | + //return surfaceView.onMouseMove( e ); |
| | 39 | + }, |
| | 40 | + 'mouseup.editSurface' : function(e) { |
| | 41 | + //return surfaceView.onMouseUp( e ); |
| | 42 | + }, |
| | 43 | + 'keydown.editSurface' : function( e ) { |
| | 44 | + return surfaceView.onKeyDown( e ); |
| | 45 | + }, |
| | 46 | + 'keyup.editSurface' : function( e ) { |
| | 47 | + return surfaceView.onKeyUp( e ); |
| | 48 | + } |
| | 49 | + }); |
| | 50 | + }, |
| | 51 | + 'blur': function( e ) { |
| | 52 | + console.log("blur"); |
| | 53 | + $document.unbind( '.editSurface' ); |
| | 54 | + surfaceView.hideCursor(); |
| | 55 | + } |
| | 56 | + } ).focus(); |
| | 57 | + |
| 28 | 58 | // First render |
| 29 | 59 | this.documentView.renderContent(); |
| 30 | 60 | }; |
| 31 | 61 | |
| 32 | 62 | es.SurfaceView.prototype.onMouseDown = function( e ) { |
| 33 | 63 | var offset = this.documentView.getOffsetFromEvent( e ); |
| 34 | | - var position = this.documentView.getRenderedPositionFromOffset( offset ); |
| 35 | | - |
| 36 | | - this.cursor.$.css( { |
| | 64 | + this.showCursor( offset ); |
| | 65 | + if ( !this.$input.is( ':focus' ) ) { |
| | 66 | + this.$input.focus().select(); |
| | 67 | + } |
| | 68 | + return false; |
| | 69 | +}; |
| | 70 | + |
| | 71 | +es.SurfaceView.prototype.onKeyDown = function( e ) { |
| | 72 | + switch ( e.keyCode ) { |
| | 73 | + case 16: // Shift |
| | 74 | + this.keyboard.keys.shift = true; |
| | 75 | + break; |
| | 76 | + case 17: // Control |
| | 77 | + this.keyboard.keys.control = true; |
| | 78 | + break; |
| | 79 | + case 18: // Alt |
| | 80 | + this.keyboard.keys.alt = true; |
| | 81 | + break; |
| | 82 | + case 91: // Command |
| | 83 | + this.keyboard.keys.command = true; |
| | 84 | + break; |
| | 85 | + case 36: // Home |
| | 86 | + break; |
| | 87 | + case 35: // End |
| | 88 | + break; |
| | 89 | + case 37: // Left arrow |
| | 90 | + this.moveCursor( 'left' ); |
| | 91 | + break; |
| | 92 | + case 38: // Up arrow |
| | 93 | + this.moveCursor( 'up' ); |
| | 94 | + break; |
| | 95 | + case 39: // Right arrow |
| | 96 | + this.moveCursor( 'right' ); |
| | 97 | + break; |
| | 98 | + case 40: // Down arrow |
| | 99 | + this.moveCursor( 'down' ); |
| | 100 | + break; |
| | 101 | + case 8: // Backspace |
| | 102 | + break; |
| | 103 | + case 46: // Delete |
| | 104 | + break; |
| | 105 | + default: // Insert content (maybe) |
| | 106 | + break; |
| | 107 | + } |
| | 108 | + return false; |
| | 109 | +}; |
| | 110 | + |
| | 111 | +es.SurfaceView.prototype.moveCursor = function( direction ) { |
| | 112 | + if ( direction === 'left') { |
| | 113 | + this.showCursor( this.documentView.getModel().getRelativeContentOffset( this.cursor.offset, -1 ) ); |
| | 114 | + } else if ( direction === 'right' ) { |
| | 115 | + this.showCursor( this.documentView.getModel().getRelativeContentOffset( this.cursor.offset, 1 ) ); |
| | 116 | + } else if ( direction === 'up' || direction === 'down' ) { |
| | 117 | + // ... |
| | 118 | + } |
| | 119 | +}; |
| | 120 | + |
| | 121 | +/** |
| | 122 | + * Shows the cursor in a new position. |
| | 123 | + * |
| | 124 | + * @method |
| | 125 | + * @param offset {Integer} Position to show the cursor at |
| | 126 | + */ |
| | 127 | +es.SurfaceView.prototype.showCursor = function( offset ) { |
| | 128 | + if ( typeof offset !== 'undefined' ) { |
| | 129 | + this.cursor.offset = offset; |
| | 130 | + var position = this.documentView.getRenderedPositionFromOffset( this.cursor.offset ); |
| | 131 | + this.cursor.$.css( { |
| 37 | 132 | 'left': position.left, |
| 38 | 133 | 'top': position.top, |
| 39 | 134 | 'height': position.bottom - position.top |
| 40 | | - } ).show(); |
| | 135 | + } ); |
| | 136 | + this.$input.css({ |
| | 137 | + 'top': position.top, |
| | 138 | + 'height': position.bottom - position.top |
| | 139 | + }); |
| | 140 | + } |
| | 141 | + |
| | 142 | + this.cursor.$.show(); |
| | 143 | + |
| | 144 | + // cursor blinking |
| | 145 | + if ( this.cursor.interval ) { |
| | 146 | + clearInterval( this.cursor.interval ); |
| | 147 | + } |
| | 148 | + this.cursor.interval = setInterval( function( surface ) { |
| | 149 | + surface.cursor.$.css( 'display', function( index, value ) { |
| | 150 | + return value === 'block' ? 'none' : 'block'; |
| | 151 | + } ); |
| | 152 | + }, 500, this ); |
| 41 | 153 | }; |
| | 154 | + |
| | 155 | +/** |
| | 156 | + * Hides the cursor. |
| | 157 | + * |
| | 158 | + * @method |
| | 159 | + */ |
| | 160 | +es.SurfaceView.prototype.hideCursor = function() { |
| | 161 | + if( this.cursor.interval ) { |
| | 162 | + clearInterval( this.cursor.interval ); |
| | 163 | + } |
| | 164 | + this.cursor.$.hide(); |
| | 165 | +}; |