Update Readme.

Readme.md

@@ -1,25 +1,25 @@
-# inlay
+# Overlay
 
-  Like an overlay, but overlaid on a particular DOM element.
+  Overlays for individual DOM elements.
 
 ## Installation
 
-    $ component install timoxley/inlay
+    $ component install timoxley/overlay
 
 ## Example
 
 ```js
 
 var domify = require('component-domify')
-var inlay = require('inlay')
-var overlay = domify('<div class="inlay"><i class="icon icon-pencil"></i></div>')
+var overlay = require(overlay)
+var overlayEl = domify('<div class="overlay"><i class="icon icon-pencil"></i></div>')
 
 var elementSelector = ElementSelector({
   selector: "#container *"
 }).on('highlight', function(el) {
-  inlay(el, overlay).show() // create overlay
+  overlay(el, overlayEl).show() // create overlay
 }).on('dehighlight', function(el) {
-  inlay(el).hide() // hide overlay
+  overlay(el).hide() // hide overlay
 })
 ```
 

component.json

@@ -1,7 +1,7 @@
 {
-  "name": "inlay",
-  "repo": "timoxley/inlay",
-  "description": "Overlay a particular dom element.",
+  "name": "overlay",
+  "repo": "timoxley/overlay",
+  "description": "Generate overlays over DOM elements.",
   "version": "0.0.1",
   "keywords": [],
   "dependencies": {},

examples/inlay/index.html

@@ -5,7 +5,7 @@
 		<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.no-responsive.no-icons.min.css" rel="stylesheet">
 		<link rel="stylesheet" href="../../build/build.css">
 		<style>
-			.inlay {
+			.overlay {
 				background-color: rgba(179, 212, 253, 0.1);
 				text-align: right;
 				vertical-align: top;
@@ -44,14 +44,14 @@ <h3>Header Level 3</h3>
     <script>
 				var ElementSelector = require('timoxley-element-selector')
 				var domify = require('component-domify')
-				var inlay = require('inlay')
-				var overlay = domify('<div class="inlay"><i class="icon icon-pencil"></i></div>')
+				var overlay = require('overlay')
+				var overlayEl = domify('<div class="overlay"><i class="icon icon-pencil"></i></div>')
 				var elementSelector = ElementSelector({
 					selector: "#container *"
 				}).on('highlight', function(el) {
-					inlay(el, overlay).show()
+					overlay(el, overlayEl).show()
 				}).on('dehighlight', function(el) {
-					inlay(el).hide()
+					overlay(el).hide()
 				})
     </script>
   </body>

index.js

@@ -1,33 +1,33 @@
-module.exports = function(container, inlayEl) {
-	if (!inlayEl) inlayEl = getInlay(container)
-	return new Inlay(container, inlayEl)
+module.exports = function(container, overlayEl) {
+	if (!overlayEl) overlayEl = getOverlay(container)
+	return new Overlay(container, overlayEl)
 }
 
-function Inlay(container, inlayEl) {
+function Overlay(container, overlayEl) {
 	this.container = container
-	this.inlayEl = inlayEl
-	this.show = show.bind(this, this.container, this.inlayEl)
-	this.hide = hide.bind(this, this.container, this.inlayEl)
+	this.overlayEl = overlayEl
+	this.show = show.bind(this, this.container, this.overlayEl)
+	this.hide = hide.bind(this, this.container, this.overlayEl)
 }
 
-function show(container, inlayEl) {
-	if (!container || !inlayEl) return
-	inlayEl.style.position = 'absolute'
-	inlayEl.style.top = container.offsetTop
-	inlayEl.style.height = container.offsetHeight
-	inlayEl.style.left = container.offsetLeft
-	inlayEl.style.width = container.offsetWidth
-	inlayEl.setAttribute('data-inlay', true)
-	inlayEl.style.pointerEvents = 'none';
-	container.appendChild(inlayEl)
+function show(container, overlayEl) {
+	if (!container || !overlayEl) return
+	overlayEl.style.position = 'absolute'
+	overlayEl.style.top = container.offsetTop
+	overlayEl.style.height = container.offsetHeight
+	overlayEl.style.left = container.offsetLeft
+	overlayEl.style.width = container.offsetWidth
+	overlayEl.setAttribute('data-overlay', true)
+	overlayEl.style.pointerEvents = 'none';
+	container.appendChild(overlayEl)
 }
 
-function hide(container, inlayEl) {
-	if (container.contains(inlayEl)) container.removeChild(inlayEl)
+function hide(container, overlayEl) {
+	if (container.contains(overlayEl)) container.removeChild(overlayEl)
 }
 
-function getInlay(container) {
-	var els = document.querySelectorAll('[data-inlay=true]')
+function getOverlay(container) {
+	var els = document.querySelectorAll('[data-overlay=true]')
 	for (var i = 0; i < els.length; i++) {
 		if (container.contains(els[i])) return els[i]
 	}