Merge pull request #3 from jwanner83/develop

Develop

README.md

@@ -1,5 +1,5 @@
 # follow-js
-A dependency free script that let elements follow your cursor without a huge overhead.
+A experimental, dependency free script that let elements follow your cursor without a huge overhead.
 
 ## Usage
 1. Include the `follow.min.js` script to your project
@@ -13,7 +13,7 @@ leave it empty, it is set to 10.
 2. `<script src"node_modules/follow-js/dist/follow.min.js"></script>`
 
 ### unpkg
-1. `<script src="https://unpkg.com/[email protected].0/dist/follow.min.js"></script>`
+1. `<script src="https://unpkg.com/[email protected].1/dist/follow.min.js"></script>`
 
 ## Options
 ### Dynamically add new elements
@@ -23,7 +23,7 @@ elements to its initial position. Then add the new element and fire `follow.init
 ## Special behaviours
 ### position relative container
 If you have an element which is inside an `position: relative` container (as you can see in the examples in 
-`relative-container.html`) the element will be removed from the inside of the container and moved to the body. It will 
+`relative-container.html`) the element will be hidden from the inside of the container and copied to the body. It will 
 stay at the exact position on the page as before but will correctly follow the cursor. This might generate some problems 
 if you would like to have a special styling for those.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "follow-js",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "let elements follow your cursor",
   "main": "dist/follow.js",
   "repository": {

src/helper.js

@@ -0,0 +1,27 @@
+export function clone (element) {
+    // clone element
+    let absolute = element.target.cloneNode(true)
+
+    // give to the new element position absolute
+    absolute.style.position = 'absolute'
+
+    // add the correct dimensions to the element
+    absolute.style.height = element.dimensions.height + 'px'
+    absolute.style.width = element.dimensions.width + 'px'
+
+    // position element to exact spot
+    absolute.style.left = element.initialPosition.x - (element.dimensions.width / 2) + 'px'
+    absolute.style.top = element.initialPosition.y - (element.dimensions.height / 2) + 'px'
+
+    // append absolute element to the body
+    document.body.append(absolute)
+
+    // hide old element but not remove it to keep the space
+    element.target.style.opacity = '0'
+
+    // save element as before to add it back
+    element.before = element.target
+
+    // add new element as new target
+    element.target = absolute
+}

src/index.js

@@ -1,3 +1,4 @@
+import * as helper from './helper'
 import * as debug from './debug'
 
 window.follow = {
@@ -28,6 +29,7 @@ follow.init = () => {
         let element = {
             factor: factor,
             target: target,
+            before: undefined,
             x: 0,
             y: 0,
             dimensions: {
@@ -57,35 +59,24 @@ follow.init = () => {
         // if center helper is wanted
         debug.dot(element.initialPosition.x, element.initialPosition.y, 'red', 10000)
 
-        // if container has position relative, remove element and add back on top of all
-        let parent = element.target.parentElement
-
-        while (true) {
-            if (parent.tagName === 'BODY') {
-                break
-            }
-            if (getComputedStyle(parent).position === 'relative') {
-                // clone element
-                let absoluteElement = element.target.cloneNode(true)
-
-                // give to the new element position absolute
-                absoluteElement.style.position = 'absolute'
-
-                // position element to exact spot
-                absoluteElement.style.left = element.initialPosition.x - (element.dimensions.width / 2) + 'px'
-                absoluteElement.style.top = element.initialPosition.y - (element.dimensions.height / 2) + 'px'
-
-                // append absolute element to the body
-                document.body.append(absoluteElement)
-
-                // remove old element
-                element.target.remove()
-
-                // add new element as new target
-                element.target = absoluteElement
-                break
+        // if position isn't absolute clone element
+        if (getComputedStyle(element.target).position !== 'absolute') {
+            helper.clone(element)
+        } else {
+            // if container has position relative, remove element and add back on top of all
+            let parent = element.target.parentElement
+
+            while (true) {
+                // if parent is body break out of while
+                if (parent.tagName === 'BODY') {
+                    break
+                    // else if position is relative
+                } else if (getComputedStyle(parent).position === 'relative') {
+                    helper.clone(element)
+                    break
+                }
+                parent = parent.parentElement
             }
-            parent = parent.parentElement
         }
 
         // push element to array
@@ -106,10 +97,16 @@ follow.destroy = () => {
     // remove the event listener
     document.removeEventListener('mousemove', follow.animate)
 
-    // set the initial position for all elements
     for (const element of follow.elements) {
-        element.target.style.left = element.initialPosition.x - (element.dimensions.width / 2) + 'px'
-        element.target.style.top = element.initialPosition.y - (element.dimensions.height / 2) + 'px'
+        if (element.before) {
+            // if before element exists, bring it back and remove absolute element
+            element.before.style.opacity = '1'
+            element.target.remove()
+        } else {
+            // set the initial position for all elements
+            element.target.style.left = element.initialPosition.x - (element.dimensions.width / 2) + 'px'
+            element.target.style.top = element.initialPosition.y - (element.dimensions.height / 2) + 'px'
+        }
     }
 
     // log