| Index: trunk/extensions/VisualEditor/playground/playground.js |
| — | — | @@ -10,6 +10,12 @@ |
| 11 | 11 | $document.bind( {
|
| 12 | 12 | 'keydown.surfaceView': function( e ) {
|
| 13 | 13 | return _this.onKeyDown( e );
|
| | 14 | + },
|
| | 15 | + 'keyup.surfaceView': function( e ) {
|
| | 16 | + return _this.onKeyUp( e );
|
| | 17 | + },
|
| | 18 | + 'keypress.surfaceView': function( e ) {
|
| | 19 | + return _this.onKeyPress( e );
|
| 14 | 20 | }
|
| 15 | 21 | } );
|
| 16 | 22 | },
|
| — | — | @@ -24,24 +30,46 @@ |
| 25 | 31 |
|
| 26 | 32 | // Set initial content for the "editor"
|
| 27 | 33 | this.$editor.html("<b>Lorem Ipsum is simply dummy text</b> of the printing and typesetting industry. <b>Lorem Ipsum has been the <i>industry's</i> standard</b> dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it <u>to <b>make <i>a type</i> specimen</b> book.</u>");
|
| | 34 | + this.$editor.addClass('leafNode');
|
| 28 | 35 |
|
| 29 | 36 | this.keydown = false;
|
| 30 | 37 | this.mousedown = false;
|
| | 38 | + this.inime = false;
|
| 31 | 39 | this.prevText = app.getDOMText(this.$editor[0]);
|
| 32 | 40 |
|
| 33 | 41 | setInterval(function() {
|
| 34 | 42 | _this.loopFunc();
|
| 35 | | - }, 200);
|
| | 43 | + }, 100);
|
| 36 | 44 | };
|
| 37 | 45 |
|
| 38 | | -app.prototype.onKeyDown = function() {
|
| | 46 | +app.prototype.onKeyPress = function() {
|
| | 47 | + console.log("onKeyPress");
|
| | 48 | +};
|
| | 49 | +
|
| | 50 | +app.prototype.onKeyUp = function() {
|
| | 51 | + //console.log("onKeyUp");
|
| | 52 | + if ( this.inime ) {
|
| | 53 | + this.inime = false;
|
| | 54 | + console.log("inime = false");
|
| | 55 | + }
|
| | 56 | +};
|
| | 57 | +
|
| | 58 | +app.prototype.onKeyDown = function( e ) {
|
| 39 | 59 | this.keydown = true;
|
| 40 | 60 | //console.log("onKeyDown");
|
| | 61 | + if ( e.which === 229 ) {
|
| | 62 | + this.inime = true;
|
| | 63 | + console.log("inime = true");
|
| | 64 | + }
|
| 41 | 65 | };
|
| 42 | 66 |
|
| 43 | 67 | app.prototype.onMouseDown = function() {
|
| 44 | 68 | this.mousedown = true;
|
| 45 | 69 | //console.log("onMouseDown");
|
| | 70 | + if ( this.inime ) {
|
| | 71 | + this.inime = false;
|
| | 72 | + console.log("inime = false");
|
| | 73 | + }
|
| 46 | 74 | };
|
| 47 | 75 |
|
| 48 | 76 | app.prototype.loopFunc = function() {
|
| — | — | @@ -50,10 +78,26 @@ |
| 51 | 79 | if(text != this.prevText) {
|
| 52 | 80 | //console.log(text);
|
| 53 | 81 |
|
| 54 | | - if(this.keydown) {
|
| 55 | | - console.log("change from keyboard");
|
| | 82 | + if(this.keydown || this.inime) {
|
| | 83 | + //console.log("change from keyboard");
|
| | 84 | + // we are going to need a cursor position
|
| | 85 | + var selection = rangy.getSelection();
|
| | 86 | + var offset = this.getOffset( selection.anchorNode, selection.anchorOffset );
|
| | 87 | + var diffLength = text.length - this.prevText.length;
|
| | 88 | + //console.log("diffLength: " + diffLength);
|
| | 89 | +
|
| | 90 | + if ( diffLength > 0 ) {
|
| | 91 | + console.log( text.substring(offset - diffLength, offset) );
|
| | 92 | + } else if ( diffLength === 0 ) {
|
| | 93 | + console.log( text.substring(offset - 1, offset) );
|
| | 94 | + }
|
| | 95 | +
|
| | 96 | +
|
| | 97 | +
|
| | 98 | +
|
| 56 | 99 | } else {
|
| 57 | 100 | console.log("change not from keyboard");
|
| | 101 | + // find a change and commit to the model
|
| 58 | 102 | }
|
| 59 | 103 |
|
| 60 | 104 | this.prevText = text;
|
| — | — | @@ -87,6 +131,59 @@ |
| 88 | 132 | return ret;
|
| 89 | 133 | };
|
| 90 | 134 |
|
| | 135 | +app.prototype.getOffset = function( localNode, localOffset ) {
|
| | 136 | + var $node = $( localNode );
|
| | 137 | +
|
| | 138 | + if ( $node.hasClass( 'leafNode' ) ) {
|
| | 139 | + return localOffset;
|
| | 140 | + }
|
| | 141 | +
|
| | 142 | + while( !$node.hasClass( 'leafNode' ) ) {
|
| | 143 | + $node = $node.parent();
|
| | 144 | + }
|
| | 145 | +
|
| | 146 | + var current = [$node.contents(), 0];
|
| | 147 | + var stack = [current];
|
| | 148 | +
|
| | 149 | + var offset = 0;
|
| | 150 | +
|
| | 151 | + while ( stack.length > 0 ) {
|
| | 152 | + if ( current[1] >= current[0].length ) {
|
| | 153 | + stack.pop();
|
| | 154 | + current = stack[ stack.length - 1 ];
|
| | 155 | + continue;
|
| | 156 | + }
|
| | 157 | + var item = current[0][current[1]];
|
| | 158 | + var $item = current[0].eq( current[1] );
|
| | 159 | +
|
| | 160 | + if ( item.nodeType === 3 ) {
|
| | 161 | + if ( item === localNode ) {
|
| | 162 | + offset += localOffset;
|
| | 163 | + break;
|
| | 164 | + } else {
|
| | 165 | + offset += item.textContent.length;
|
| | 166 | + }
|
| | 167 | + } else if ( item.nodeType === 1 ) {
|
| | 168 | + if ( $( item ).attr('contentEditable') === "false" ) {
|
| | 169 | + offset += 1;
|
| | 170 | + } else {
|
| | 171 | + if ( item === localNode ) {
|
| | 172 | + offset += localOffset;
|
| | 173 | + break;
|
| | 174 | + }
|
| | 175 | +
|
| | 176 | + stack.push( [$item.contents(), 0] );
|
| | 177 | + current[1]++;
|
| | 178 | + current = stack[stack.length-1];
|
| | 179 | + continue;
|
| | 180 | + }
|
| | 181 | + }
|
| | 182 | + current[1]++;
|
| | 183 | + }
|
| | 184 | +
|
| | 185 | + return offset;
|
| | 186 | +};
|
| | 187 | +
|
| 91 | 188 | $(function() {
|
| 92 | 189 | new app();
|
| 93 | 190 | }); |
| \ No newline at end of file |
| Index: trunk/extensions/VisualEditor/playground/index.html |
| — | — | @@ -11,6 +11,7 @@ |
| 12 | 12 | }
|
| 13 | 13 | </style>
|
| 14 | 14 | <script src="../modules/jquery/jquery.js"></script>
|
| | 15 | + <script src="../modules/rangy/rangy-core.js"></script>
|
| 15 | 16 | <script src="playground.js"></script>
|
| 16 | 17 | </head>
|
| 17 | 18 | <body>
|