├── .gitignore
├── Makefile
├── component.json
├── Readme.md
├── package.json
├── LICENSE
├── example
    └── index.html
└── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | components
2 | build
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | 
 2 | build: components index.js
 3 | 	@component build --dev
 4 | 
 5 | components: component.json
 6 | 	@component install --dev
 7 | 
 8 | clean:
 9 | 	rm -fr build components template.js
10 | 
11 | .PHONY: clean
12 | 


--------------------------------------------------------------------------------
/component.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "offset",
 3 |   "repo": "timoxley/offset",
 4 |   "description": "Get offset of a DOM Element or Range within the document",
 5 |   "version": "1.0.4",
 6 |   "keywords": ["coordinates"],
 7 |   "dependencies": {
 8 |     "detects/dom-support": "*",
 9 |     "webmodules/get-document": "1.0.0",
10 |     "component/within-element": "0.1.0"
11 |   },
12 |   "development": {},
13 |   "scripts": [
14 |     "index.js"
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | # document-offset
 2 | 
 3 | Get offset of a DOM Element or Range within the document.
 4 | 
 5 | ## Installation
 6 | 
 7 | ```
 8 | $ npm install document-offset
 9 | ```
10 | 
11 | ### [component(1)](http://component.io):
12 | 
13 | ```
14 | $ component install timoxley/offset
15 | ```
16 | 
17 | ## API
18 | 
19 | ### offset(el)
20 | 
21 | Get offset of an element within the document (relative to the top left
22 | of the document).
23 | 
24 | Example:
25 | 
26 | ```js
27 | var offset = require('document-offset')
28 | var target = document.getElementById('target')
29 | console.log(offset(target))
30 | // => {top: 69, left: 108}
31 | ```
32 | 
33 | ## Credit
34 | 
35 | Code adapted from jQuery.
36 | 
37 | ## License
38 | 
39 | MIT
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "document-offset",
 3 |   "description": "Get offset of a DOM Element or Range within the document",
 4 |   "version": "1.0.4",
 5 |   "keywords": [
 6 |     "browser",
 7 |     "coordinates"
 8 |   ],
 9 |   "dependencies": {
10 |     "dom-support": "*",
11 |     "get-document": "1.0.0",
12 |     "within-element": "0.1.0"
13 |   },
14 |   "scripts": {
15 |     "start": "make && echo 'Example at: http://localhost:8080/example/' && http-server"
16 |   },
17 |   "component": {
18 |     "scripts": {
19 |       "offset/index.js": "index.js"
20 |     }
21 |   },
22 |   "repository": {
23 |     "type": "git",
24 |     "url": "https://github.com/timoxley/offset.git"
25 |   },
26 |   "bugs": {
27 |     "url": "https://github.com/timoxley/offset/issues"
28 |   },
29 |   "homepage": "https://github.com/timoxley/offset",
30 |   "main": "index.js",
31 |   "contributors": "Nathan Rajlich",
32 |   "directories": {
33 |     "example": "example"
34 |   },
35 |   "author": "Tim Oxley",
36 |   "license": "MIT",
37 |   "devDependencies": {
38 |     "component": "^1.1.0",
39 |     "http-server": "^0.8.0"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Tim Oxley
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <style>
 5 |       body {
 6 |         font-family: sans-serif;
 7 |       }
 8 |       #wrap {
 9 |         width: 600px;
10 |         height: 600px;
11 |         overflow: auto;
12 |         outline: 1px solid salmon;
13 |       }
14 |       #result {
15 |         padding: 2em 1em;
16 |       }
17 | 
18 |       #content {
19 |         height: 3000px;
20 |         width: 3000px;
21 |       }
22 | 
23 |       #target {
24 |         width: 30px;
25 |         height: 30px;
26 |         background: red;
27 |         margin: 100px;
28 |       }
29 | 
30 |     </style>
31 |   </head>
32 |   <body>
33 |     <div id="result"></div>
34 |     <div id="wrap">
35 |       <div id="content">
36 |         welcome to the jungle
37 |         <div id="target"></div>
38 |     </div>
39 |   </div>
40 |   <script src="../build/build.js"></script>
41 |   <script>
42 |     var offset = require('offset')
43 |     var target = document.getElementById('target')
44 |     var content = document.getElementById('content')
45 |     var wrap = document.getElementById('wrap')
46 |     var result = document.getElementById('result')
47 |     wrap.onscroll = function() {
48 |       var offsetResult = offset(target)
49 |       result.innerText = 'red square is at top:' + offsetResult.top + 'px left:' + offsetResult.left + 'px relative to *document*.'
50 |     }
51 |     document.addEventListener('selectionchange', function (e) {
52 |       console.log('selectionchange', offset(window.getSelection().getRangeAt(0)));
53 |     });
54 |     wrap.onscroll()
55 |   </script>
56 |   </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var support = require('dom-support')
 2 | var getDocument = require('get-document')
 3 | var withinElement = require('within-element')
 4 | 
 5 | /**
 6 |  * Get offset of a DOM Element or Range within the document.
 7 |  *
 8 |  * @param {DOMElement|Range} el - the DOM element or Range instance to measure
 9 |  * @return {Object} An object with `top` and `left` Number values
10 |  * @public
11 |  */
12 | 
13 | module.exports = function offset(el) {
14 |   var doc = getDocument(el)
15 |   if (!doc) return
16 | 
17 |   // Make sure it's not a disconnected DOM node
18 |   if (!withinElement(el, doc)) return
19 | 
20 |   var body = doc.body
21 |   if (body === el) {
22 |     return bodyOffset(el)
23 |   }
24 | 
25 |   var box = { top: 0, left: 0 }
26 |   if ( typeof el.getBoundingClientRect !== "undefined" ) {
27 |     // If we don't have gBCR, just use 0,0 rather than error
28 |     // BlackBerry 5, iOS 3 (original iPhone)
29 |     box = el.getBoundingClientRect()
30 | 
31 |     if (el.collapsed && box.left === 0 && box.top === 0) {
32 |       // collapsed Range instances sometimes report 0, 0
33 |       // see: http://stackoverflow.com/a/6847328/376773
34 |       var span = doc.createElement("span");
35 | 
36 |       // Ensure span has dimensions and position by
37 |       // adding a zero-width space character
38 |       span.appendChild(doc.createTextNode("\u200b"));
39 |       el.insertNode(span);
40 |       box = span.getBoundingClientRect();
41 | 
42 |       // Remove temp SPAN and glue any broken text nodes back together
43 |       var spanParent = span.parentNode;
44 |       spanParent.removeChild(span);
45 |       spanParent.normalize();
46 |     }
47 |   }
48 | 
49 |   var docEl = doc.documentElement
50 |   var clientTop  = docEl.clientTop  || body.clientTop  || 0
51 |   var clientLeft = docEl.clientLeft || body.clientLeft || 0
52 |   var scrollTop  = window.pageYOffset || docEl.scrollTop
53 |   var scrollLeft = window.pageXOffset || docEl.scrollLeft
54 | 
55 |   return {
56 |     top: box.top  + scrollTop  - clientTop,
57 |     left: box.left + scrollLeft - clientLeft
58 |   }
59 | }
60 | 
61 | function bodyOffset(body) {
62 |   var top = body.offsetTop
63 |   var left = body.offsetLeft
64 | 
65 |   if (support.doesNotIncludeMarginInBodyOffset) {
66 |     top  += parseFloat(body.style.marginTop || 0)
67 |     left += parseFloat(body.style.marginLeft || 0)
68 |   }
69 | 
70 |   return {
71 |     top: top,
72 |     left: left
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------