From eb08d80d4c93814971423525be9378b431079075 Mon Sep 17 00:00:00 2001 From: Anton Byrna Date: Wed, 3 Aug 2011 18:02:40 +0400 Subject: [PATCH 1/5] Add MaSha.bind. Now works with keyboard selection --- .gitignore | 1 + demo/demo.html | 18 +++++------ src/js/masha.js | 81 +++++++++++++++++++++++++++++++++++++------------ 3 files changed, 72 insertions(+), 28 deletions(-) diff --git a/.gitignore b/.gitignore index 5f67ac0..58e291e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ *.swo *.swp +.DS_Store diff --git a/demo/demo.html b/demo/demo.html index 1c5b0a3..ad2bbe4 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -44,15 +44,15 @@
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

6 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

7 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

8 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

9 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

diff --git a/src/js/masha.js b/src/js/masha.js index b74ac7c..1d1928e 100644 --- a/src/js/masha.js +++ b/src/js/masha.js @@ -21,6 +21,24 @@ var MaSha = function(options) { this.init(); } +MaSha.bind = function(fn, ctx, var_args) { + var context = ctx || goog.global; + + if (arguments.length > 2) { + var boundArgs = Array.prototype.slice.call(arguments, 2); + return function() { + var newArgs = Array.prototype.slice.call(arguments); + Array.prototype.unshift.apply(newArgs, boundArgs); + return fn.apply(context, newArgs); + }; + + } else { + return function() { + return fn.apply(context, arguments); + }; + } +}; + MaSha.default_options = { 'regexp': '[^\\s,;:–.!?<>…\\n\xA0\\*]+', 'selectable': 'selectable-content', @@ -73,25 +91,8 @@ MaSha.prototype = { // enumerate block elements containing a text this.enumerateElements(); - addEvent(document, 'mouseup', function(e) { - /* - * Show the marker if any text selected - */ - // XXX it's a question: bind to document or to this.selectable - // binding to document works better - - var coord = getPageXY(e); // outside timeout function because of IE - window.setTimeout(function(){ - var text = window.getSelection().toString(); - if (text == '' || !this_.regexp.test(text)) return; - if (!this_.range_is_selectable()) return; - - marker.style.top = coord.y - 33 + 'px'; - marker.style.left = coord.x + 5 + 'px'; - addClass(marker, 'show'); - }, 1); - }); - + addEvent(document, 'mouseup', MaSha.bind(this.highlight, this, marker)); + addEvent(document, 'keyup', MaSha.bind(this.highlight, this, marker)); addEvent(marker, 'click', function(e){ @@ -118,6 +119,48 @@ MaSha.prototype = { this.readHash(); }, + + highlight: function(marker, e){ + /* + * Show the marker if any text selected + */ + // XXX it's a question: bind to document or to this.selectable + // binding to document works better + + // var coord = getPageXY(e); // outside timeout function because of IE + + var selection = window.getSelection(); + + if (selection.toString().length) { + var range = window.getSelection().getRangeAt(0), + textNodes = range.getTextNodes(), + endContainer = textNodes.pop(), + endOffset = range.endOffset; + + if (endOffset === 0) { + endOffset = endContainer.nodeValue.length - 1; + } + + var r = document.createRange(); + r.setStart(endContainer, endOffset - 1); + r.setEnd(endContainer, endOffset); + + var rect = r.getClientRects().item(0); + coord = {x: rect.right, y: rect.top}; + } + + var this_ = this; + window.setTimeout(function(){ + if (selection == '' || !this_.regexp.test(selection)) { + return; + } + if (!this_.range_is_selectable()) return; + + marker.style.top = (coord.y - 33) + 'px'; + marker.style.left = (coord.x + 5) + 'px'; + addClass(marker, 'show'); + }, 1); + }, // XXX sort methods logically // XXX choose btw camelCase and underscores! From b46002a8dd7866afc9075a28dc6a27aad0810212 Mon Sep 17 00:00:00 2001 From: Anton Byrna Date: Wed, 3 Aug 2011 18:14:26 +0400 Subject: [PATCH 2/5] add getTextNodes method for MSRange --- src/js/ierange.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/js/ierange.js b/src/js/ierange.js index 772b503..acc73e4 100644 --- a/src/js/ierange.js +++ b/src/js/ierange.js @@ -243,6 +243,18 @@ DOMRange.prototype = { return frag; })(new RangeIterator(range)); }, + getTextNodes_: function(node){ + for(var i in node.childNodes){ + if(node.childNodes[i].nodeType == 3){ + arNodes[c] = node.childNodes[i]; + c++; + }else this.getTextNodes(node.childNodes[i]); + } + }, + getTextNodes: function(){ + + return this.getTextNodes_(this.startContainer); + }, deleteContents: function () { // cache range and move anchor points var range = this.cloneRange(); From 0d3609f6cb8992f8c93c5e19f12fdb39f61d6bf9 Mon Sep 17 00:00:00 2001 From: Anton Byrna Date: Wed, 3 Aug 2011 18:17:16 +0400 Subject: [PATCH 3/5] update getTextNodes --- src/js/ierange.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/js/ierange.js b/src/js/ierange.js index acc73e4..f7b4be1 100644 --- a/src/js/ierange.js +++ b/src/js/ierange.js @@ -159,6 +159,8 @@ DOMRange.prototype = { // private properties _document: null, + _textNodes: [], + // private methods _refreshProperties: function () { // collapsed attribute @@ -246,14 +248,15 @@ DOMRange.prototype = { getTextNodes_: function(node){ for(var i in node.childNodes){ if(node.childNodes[i].nodeType == 3){ - arNodes[c] = node.childNodes[i]; + this._textNodes[c] = node.childNodes[i]; c++; }else this.getTextNodes(node.childNodes[i]); } }, getTextNodes: function(){ - - return this.getTextNodes_(this.startContainer); + this._textNodes = []; + this.getTextNodes_(this.startContainer); + return this._textNodes; }, deleteContents: function () { // cache range and move anchor points From 2917ff0ba71f5c2c804aef630e2e20782fba1c06 Mon Sep 17 00:00:00 2001 From: Anton Byrna Date: Wed, 3 Aug 2011 18:18:02 +0400 Subject: [PATCH 4/5] update getTextNodes --- src/js/ierange.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/js/ierange.js b/src/js/ierange.js index f7b4be1..08b011f 100644 --- a/src/js/ierange.js +++ b/src/js/ierange.js @@ -248,8 +248,7 @@ DOMRange.prototype = { getTextNodes_: function(node){ for(var i in node.childNodes){ if(node.childNodes[i].nodeType == 3){ - this._textNodes[c] = node.childNodes[i]; - c++; + this._textNodes.push(node.childNodes[i]); }else this.getTextNodes(node.childNodes[i]); } }, From 9d8de3ca5076d104a59e62d6969cd61b3ee35f5d Mon Sep 17 00:00:00 2001 From: Anton Byrna Date: Wed, 3 Aug 2011 18:27:03 +0400 Subject: [PATCH 5/5] fix --- src/js/ierange.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/ierange.js b/src/js/ierange.js index 08b011f..7b4996a 100644 --- a/src/js/ierange.js +++ b/src/js/ierange.js @@ -249,7 +249,7 @@ DOMRange.prototype = { for(var i in node.childNodes){ if(node.childNodes[i].nodeType == 3){ this._textNodes.push(node.childNodes[i]); - }else this.getTextNodes(node.childNodes[i]); + }else this.getTextNodes_(node.childNodes[i]); } }, getTextNodes: function(){