| Index: trunk/extensions/VisualEditor/demos/playground/playground.js |
| — | — | @@ -0,0 +1,200 @@ |
| | 2 | +app = function () {
|
| | 3 | + var _this = this,
|
| | 4 | + $document = $( document );
|
| | 5 | +
|
| | 6 | + this.$editor = $('#editor');
|
| | 7 | +
|
| | 8 | + this.$editor.bind( {
|
| | 9 | + 'focus': function( e ) {
|
| | 10 | + $document.unbind( '.surfaceView' );
|
| | 11 | + $document.bind( {
|
| | 12 | + 'keydown.surfaceView': function( e ) {
|
| | 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 );
|
| | 20 | + }
|
| | 21 | + } );
|
| | 22 | + },
|
| | 23 | + 'blur': function( e ) {
|
| | 24 | + $document.unbind( '.surfaceView' );
|
| | 25 | + }
|
| | 26 | + } );
|
| | 27 | +
|
| | 28 | + this.$editor.mousedown( function(e) {
|
| | 29 | + return _this.onMouseDown( e );
|
| | 30 | + } );
|
| | 31 | +
|
| | 32 | + // Set initial content for the "editor"
|
| | 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');
|
| | 35 | +
|
| | 36 | + this.keypress = false;
|
| | 37 | + this.keyup = false;
|
| | 38 | + this.keydown = false;
|
| | 39 | + this.mousedown = false;
|
| | 40 | + this.inime = false;
|
| | 41 | + this.prevText = app.getDOMText(this.$editor[0]);
|
| | 42 | +
|
| | 43 | + setInterval(function() {
|
| | 44 | + _this.loopFunc();
|
| | 45 | + }, 100);
|
| | 46 | +};
|
| | 47 | +
|
| | 48 | +app.prototype.onKeyPress = function() {
|
| | 49 | + //console.log("onKeyPress");
|
| | 50 | + this.keypress = true;
|
| | 51 | + if ( e.which === 229 ) {
|
| | 52 | + this.inime = true;
|
| | 53 | + }
|
| | 54 | +};
|
| | 55 | +
|
| | 56 | +app.prototype.onKeyUp = function() {
|
| | 57 | + //console.log("onKeyUp");
|
| | 58 | + this.keyup = true;
|
| | 59 | + if ( this.inime ) {
|
| | 60 | + this.inime = false;
|
| | 61 | + }
|
| | 62 | +};
|
| | 63 | +
|
| | 64 | +app.prototype.onKeyDown = function( e ) {
|
| | 65 | + //console.log("onKeyDown");
|
| | 66 | + this.keydown = true;
|
| | 67 | + if ( e.which === 229 ) {
|
| | 68 | + this.inime = true;
|
| | 69 | + }
|
| | 70 | +};
|
| | 71 | +
|
| | 72 | +app.prototype.onMouseDown = function() {
|
| | 73 | + this.mousedown = true;
|
| | 74 | +
|
| | 75 | + if ( this.inime ) {
|
| | 76 | + this.inime = false;
|
| | 77 | + }
|
| | 78 | +};
|
| | 79 | +
|
| | 80 | +app.prototype.loopFunc = function() {
|
| | 81 | + var text = app.getDOMText(this.$editor[0]);
|
| | 82 | +
|
| | 83 | + if(text != this.prevText) {
|
| | 84 | +
|
| | 85 | + var selection = rangy.getSelection();
|
| | 86 | +
|
| | 87 | +
|
| | 88 | +
|
| | 89 | + // keyup in IE
|
| | 90 | + // keypress and keydown in FF and Chrome
|
| | 91 | + if ( (($.browser.msie && !this.keyup) || (!$.browser.msie && !this.keypress && !this.mousedown)) && !this.inime ) {
|
| | 92 | + console.log(this.inime);
|
| | 93 | + console.log('SPELLCHECK');
|
| | 94 | + this.prevText = text;
|
| | 95 | + this.keypress = false;
|
| | 96 | + this.keyup = false;
|
| | 97 | + this.mousedown = false;
|
| | 98 | + return;
|
| | 99 | + }
|
| | 100 | +
|
| | 101 | + console.log("keyboard");
|
| | 102 | + // we are going to need a cursor position
|
| | 103 | + var offset = this.getOffset( selection.anchorNode, selection.anchorOffset );
|
| | 104 | + var diffLength = text.length - this.prevText.length;
|
| | 105 | + //console.log("diffLength: " + diffLength);
|
| | 106 | +
|
| | 107 | + if ( diffLength > 0 ) {
|
| | 108 | + //console.log( text.substring(offset - diffLength, offset) );
|
| | 109 | + } else if ( diffLength === 0 ) {
|
| | 110 | + //console.log( text.substring(offset - 1, offset) );
|
| | 111 | + }
|
| | 112 | +
|
| | 113 | +
|
| | 114 | + this.prevText = text;
|
| | 115 | + }
|
| | 116 | + this.keypress = false;
|
| | 117 | + this.keyup = false;
|
| | 118 | + this.keydown = false;
|
| | 119 | + this.mousedown = false;
|
| | 120 | +};
|
| | 121 | +
|
| | 122 | +app.getDOMText = function( elem ) {
|
| | 123 | + var nodeType = elem.nodeType,
|
| | 124 | + ret = '';
|
| | 125 | +
|
| | 126 | + if ( nodeType === 1 || nodeType === 9 ) {
|
| | 127 | + // Use textContent || innerText for elements
|
| | 128 | + if ( typeof elem.textContent === 'string' ) {
|
| | 129 | + return elem.textContent;
|
| | 130 | + } else if ( typeof elem.innerText === 'string' ) {
|
| | 131 | + // Replace IE's carriage returns
|
| | 132 | + return elem.innerText.replace( /\r\n/g, '' );
|
| | 133 | + } else {
|
| | 134 | + // Traverse it's children
|
| | 135 | + for ( elem = elem.firstChild; elem; elem = elem.nextSibling) {
|
| | 136 | + ret += app.getDOMText( elem );
|
| | 137 | + }
|
| | 138 | + }
|
| | 139 | + } else if ( nodeType === 3 || nodeType === 4 ) {
|
| | 140 | + return elem.nodeValue;
|
| | 141 | + }
|
| | 142 | +
|
| | 143 | + return ret;
|
| | 144 | +};
|
| | 145 | +
|
| | 146 | +app.prototype.getOffset = function( localNode, localOffset ) {
|
| | 147 | + var $node = $( localNode );
|
| | 148 | +
|
| | 149 | + if ( $node.hasClass( 'leafNode' ) ) {
|
| | 150 | + return localOffset;
|
| | 151 | + }
|
| | 152 | +
|
| | 153 | + while( !$node.hasClass( 'leafNode' ) ) {
|
| | 154 | + $node = $node.parent();
|
| | 155 | + }
|
| | 156 | +
|
| | 157 | + var current = [$node.contents(), 0];
|
| | 158 | + var stack = [current];
|
| | 159 | +
|
| | 160 | + var offset = 0;
|
| | 161 | +
|
| | 162 | + while ( stack.length > 0 ) {
|
| | 163 | + if ( current[1] >= current[0].length ) {
|
| | 164 | + stack.pop();
|
| | 165 | + current = stack[ stack.length - 1 ];
|
| | 166 | + continue;
|
| | 167 | + }
|
| | 168 | + var item = current[0][current[1]];
|
| | 169 | + var $item = current[0].eq( current[1] );
|
| | 170 | +
|
| | 171 | + if ( item.nodeType === 3 ) {
|
| | 172 | + if ( item === localNode ) {
|
| | 173 | + offset += localOffset;
|
| | 174 | + break;
|
| | 175 | + } else {
|
| | 176 | + offset += item.textContent.length;
|
| | 177 | + }
|
| | 178 | + } else if ( item.nodeType === 1 ) {
|
| | 179 | + if ( $( item ).attr('contentEditable') === "false" ) {
|
| | 180 | + offset += 1;
|
| | 181 | + } else {
|
| | 182 | + if ( item === localNode ) {
|
| | 183 | + offset += localOffset;
|
| | 184 | + break;
|
| | 185 | + }
|
| | 186 | +
|
| | 187 | + stack.push( [$item.contents(), 0] );
|
| | 188 | + current[1]++;
|
| | 189 | + current = stack[stack.length-1];
|
| | 190 | + continue;
|
| | 191 | + }
|
| | 192 | + }
|
| | 193 | + current[1]++;
|
| | 194 | + }
|
| | 195 | +
|
| | 196 | + return offset;
|
| | 197 | +};
|
| | 198 | +
|
| | 199 | +$(function() {
|
| | 200 | + new app();
|
| | 201 | +}); |
| \ No newline at end of file |
| Index: trunk/extensions/VisualEditor/demos/playground/index.html |
| — | — | @@ -0,0 +1,21 @@ |
| | 2 | +<!DOCTYPE html>
|
| | 3 | +
|
| | 4 | +<html>
|
| | 5 | + <head>
|
| | 6 | + <title>Playground</title>
|
| | 7 | + <style>
|
| | 8 | + #editor {
|
| | 9 | + width: 300px;
|
| | 10 | + height: 300px;
|
| | 11 | + border: solid 1px;
|
| | 12 | + }
|
| | 13 | + </style>
|
| | 14 | + <script src="../modules/jquery/jquery.js"></script>
|
| | 15 | + <script src="../modules/rangy/rangy-core.js"></script>
|
| | 16 | + <script src="playground.js"></script>
|
| | 17 | + </head>
|
| | 18 | + <body>
|
| | 19 | + <div contenteditable="true" id="editor">
|
| | 20 | + </div>
|
| | 21 | + </body>
|
| | 22 | +</html>
|
| Property changes on: trunk/extensions/VisualEditor/demos/playground/index.html |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 1 | 23 | + text/plain |