diff --git a/playground/index.html b/playground/index.html new file mode 100644 index 0000000000..99a51c679b --- /dev/null +++ b/playground/index.html @@ -0,0 +1,20 @@ + + + + + Playground + + + + + +
+
+ + diff --git a/playground/playground.js b/playground/playground.js new file mode 100644 index 0000000000..3e05413b75 --- /dev/null +++ b/playground/playground.js @@ -0,0 +1,79 @@ +app = function () { + var _this = this, + $document = $( document ); + + this.$editor = $('#editor'); + + this.$editor.bind( { + 'focus': function( e ) { + $document.unbind( '.surfaceView' ); + $document.bind( { + 'keydown.surfaceView': function( e ) { + return _this.onKeyDown( e ); + } + } ); + }, + 'blur': function( e ) { + $document.unbind( '.surfaceView' ); + } + } ); + + this.$editor.mousedown( function(e) { + return _this.onMouseDown( e ); + } ); + + // Set initial content for the "editor" + this.$editor.html("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."); + + this.prevText = app.getDOMText(this.$editor[0]); + + setInterval(function() { + _this.loopFunc(); + }, 200); +}; + +app.prototype.onKeyDown = function() { + console.log("onKeyDown"); +}; + +app.prototype.onMouseDown = function() { + console.log("onMouseDown"); +}; + +app.prototype.loopFunc = function() { + var text = app.getDOMText(this.$editor[0]); + + if(text != this.prevText) { + console.log(text); + + this.prevText = text; + } +}; + +app.getDOMText = function( elem ) { + var nodeType = elem.nodeType, + ret = ''; + + if ( nodeType === 1 || nodeType === 9 ) { + // Use textContent || innerText for elements + if ( typeof elem.textContent === 'string' ) { + return elem.textContent; + } else if ( typeof elem.innerText === 'string' ) { + // Replace IE's carriage returns + return elem.innerText.replace( /\r\n/g, '' ); + } else { + // Traverse it's children + for ( elem = elem.firstChild; elem; elem = elem.nextSibling) { + ret += app.getDOMText( elem ); + } + } + } else if ( nodeType === 3 || nodeType === 4 ) { + return elem.nodeValue; + } + + return ret; +}; + +$(function() { + new app(); +}); \ No newline at end of file