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/ierange.js b/src/js/ierange.js index 772b503..7b4996a 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 @@ -243,6 +245,18 @@ DOMRange.prototype = { return frag; })(new RangeIterator(range)); }, + getTextNodes_: function(node){ + for(var i in node.childNodes){ + if(node.childNodes[i].nodeType == 3){ + this._textNodes.push(node.childNodes[i]); + }else this.getTextNodes_(node.childNodes[i]); + } + }, + getTextNodes: function(){ + this._textNodes = []; + this.getTextNodes_(this.startContainer); + return this._textNodes; + }, deleteContents: function () { // cache range and move anchor points var range = this.cloneRange(); 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!