Merge pull request #1 from jwanner83/develop

Develop
jwanner83 · Jun 5, 2020 · f38a134 · f38a134
2 parents 74da5c6 + b4c9245
commit f38a134
Show file tree

Hide file tree

Showing 7 changed files with 182 additions and 94 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ A dependency free script that let elements follow your cursor without a huge ove
 ## Usage
 1. Include the `follow.min.js` script to your project
 2. Add the `data-follow` attribute to the `position: absolute` elements which you want to follow the cursor
-3. Set the factor on how big they should follow like so `data-follow="100"` (higher equals more movement, if you 
+3. Set the factor on how big they should follow like so `data-follow="100"` (higher equals less movement, if you 
 leave it empty, it is set to 10.
 
 ## Include Script
@@ -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].2/dist/follow.min.js"></script>`
+1. `<script src="https://unpkg.com/[email protected].3/dist/follow.min.js"></script>`
 
 ## Options
 ### Dynamically add new elements
@@ -35,4 +35,4 @@ In the current state, the script wont work properly with a transition on the ele
 Have a look in the `examples` folder to see some magic. 
 
 ## Contribute
-Feel free to open a Pullrequest or create a Issue on this project.
+Feel free to open a Pull request or create a Issue on this project.
diff --git a/dist/follow.min.js b/dist/follow.min.js
diff --git a/examples/basic.html b/examples/basic.html
@@ -1,35 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>Basic Example - index.js</title>
+    <meta charset="UTF-8">
+    <title>Basic Example - follow.js</title>
 
-  <style>
-    div {
-      position: absolute;
+    <style>
+        div {
+            position: absolute;
 
-      height: 100px;
-      width: 100px;
-    }
+            height: 100px;
+            width: 100px;
+        }
 
-    div:nth-child(1) {
-      top: 100px;
-      left: 200px;
-      background: red;
-    }
+        div:nth-child(1) {
+            top: 100px;
+            left: 200px;
+            background: red;
+        }
 
-    div:nth-child(2) {
-      top: 50%;
-      left: 80%;
-      background: green;
-    }
+        div:nth-child(2) {
+            top: 50%;
+            left: 80%;
+            background: green;
+        }
 
-    div:nth-child(3) {
-      top: 30%;
-      left: 100px;
-      background: yellow;
-    }
-  </style>
+        div:nth-child(3) {
+            top: 30%;
+            left: 100px;
+            background: yellow;
+        }
+    </style>
 </head>
 <body>
 <div data-follow="30"></div>

diff --git a/examples/exact.html b/examples/exact.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Exact Example - follow.js</title>
+
+    <style>
+        body, html {
+            height: 100%;
+            width: 100%;
+        }
+
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .item {
+            position: absolute;
+            height: 100px;
+            width: 100px;
+            background: black;
+        }
+
+        .grid {
+            position: absolute;
+            height: 100px;
+            width: 100px;
+            border: 1px solid red;
+        }
+    </style>
+</head>
+<body>
+<div class="item" data-follow></div>
+<section class="grid"></section>
+
+<script src="../dist/follow.min.js"></script>
+</body>
+</html>
diff --git a/src/helper.js b/src/helper.js
@@ -0,0 +1,30 @@
+// adds a dot to the given position if enabled
+export function dot (x, y, color = 'red', timeout = 3000) {
+    if (follow.debug.dot) {
+        let dot = document.createElement('i')
+        dot.style.position = 'absolute'
+        dot.style.height = '1px'
+        dot.style.width = '1px'
+        dot.style.backgroundColor = color
+        dot.style.zIndex = '100'
+        dot.style.left = x + 'px'
+        dot.style.top = y + 'px'
+        document.body.append(dot)
+
+        // because of performance issues remove the dot after the timeout
+        setTimeout(() => {
+            dot.remove()
+        }, timeout)
+    }
+}
+
+// log if enabled
+export function log (string, object = undefined) {
+    if (follow.debug.log) {
+        if (object) {
+            console.log(string, object)
+        } else {
+            console.log(string)
+        }
+    }
+}
diff --git a/src/index.js b/src/index.js
@@ -1,87 +1,104 @@
+import * as helper from './helper'
+
 window.follow = {
-  debug: false,
-  elements: [],
-  attribute: 'data-follow',
-  defaultFactor: 10,
-  init: undefined,
-  animate: undefined,
-  log: undefined
+    debug: {
+        log: false,
+        dot: false
+    },
+    elements: [],
+    attribute: 'data-follow',
+    defaultFactor: 10,
+    init: undefined,
+    animate: undefined
 }
 
 follow.init = () => {
-  // get all targets with attribute
-  let targets = document.querySelectorAll(`[${follow.attribute}]`)
-
-  // debug
-  follow.log('targets', targets)
-
-  for (let target of targets) {
-    // set the specified or the default factor
-    let factor = target.getAttribute(follow.attribute) ? target.getAttribute(follow.attribute) : follow.defaultFactor
-
-    // create element object
-    let element = {
-      factor: factor,
-      target: target,
-      x: 0,
-      y: 0,
-      startPosition: {
-        x: 0,
-        y: 0
-      }
-    }
-
-    // define start position of element to calculate correctly
-    element.startPosition.x = element.target.offsetLeft
-    element.startPosition.y = element.target.offsetTop
+    // get all targets with attribute
+    let targets = document.querySelectorAll(`[${follow.attribute}]`)
 
-    // push element to array
-    follow.elements.push(element)
-  }
+    // debug
+    helper.log('targets', targets)
+
+    for (let target of targets) {
+        // set the specified or the default factor
+        let factor = target.getAttribute(follow.attribute) ? target.getAttribute(follow.attribute) : follow.defaultFactor
+
+        // create element object
+        let element = {
+            factor: factor,
+            target: target,
+            x: 0,
+            y: 0,
+            dimensions: {
+                height: 0,
+                width: 0
+            },
+            initialPosition: {
+                x: 0,
+                y: 0
+            },
+        }
+
+        // define dimensions of the element
+        element.dimensions.height = element.target.offsetHeight
+        element.dimensions.width = element.target.offsetWidth
+
+        // define the center of the element as initial position
+        element.initialPosition.x = element.target.offsetLeft + (element.dimensions.width / 2)
+        element.initialPosition.y = element.target.offsetTop + (element.dimensions.height / 2)
+
+        // if center helper is wanted
+        helper.dot(element.initialPosition.x, element.initialPosition.y, 'red', 10000)
+
+        // push element to array
+        follow.elements.push(element)
+    }
 
-  // debug
-  follow.log('elements', follow.elements)
+    // debug
+    helper.log('elements', follow.elements)
 }
 
 follow.animate = (event) => {
-  // define mouse position
-  let mouseX = event.clientX
-  let mouseY = event.clientY
+    // define mouse position
+    let mouseX = event.clientX
+    let mouseY = event.clientY
+
+    // firefox fallback because mouse is offset by y 15 and x 9 pixel
+    if (navigator.userAgent.search("Firefox") !== -1) {
+        mouseX += 9
+        mouseY += 15
+    }
 
-  // debug
-  follow.log('mouseX', mouseX)
-  follow.log('mouseY', mouseY)
+    // add dot for mouse
+    helper.dot && helper.dot(mouseX, mouseY, 'blue')
 
-  for (let element of follow.elements) {
     // debug
-    follow.log('element', element)
+    helper.log('mouseX', mouseX)
+    helper.log('mouseY', mouseY)
 
-    // get current position of element
-    element.x = element.target.offsetLeft
-    element.y = element.target.offsetTop
+    for (let element of follow.elements) {
+        // debug
+        helper.log('element', element)
 
-    // calculate future position
-    let positionX = (mouseX - element.x) / element.factor
-    let positionY = (mouseY - element.y) / element.factor
+        // calculate additional pixels
+        let additionalX = (mouseX - element.initialPosition.x) / element.factor
+        let additionalY = (mouseY - element.initialPosition.y) / element.factor
 
-    // debug
-    follow.log('future position x', positionX)
-    follow.log('future position y', positionY)
+        // calculate future position
+        let futureX = (element.initialPosition.x + additionalX) - (element.dimensions.width / 2)
+        let futureY = (element.initialPosition.y + additionalY) - (element.dimensions.height / 2)
 
-    // set future position
-    element.target.style.left = element.startPosition.x + positionX + 'px'
-    element.target.style.top = element.startPosition.y + positionY + 'px'
-  }
-}
+        // set future position
+        element.target.style.left = futureX + 'px'
+        element.target.style.top = futureY + 'px'
+
+        // add helper dot if wanted
+        helper.dot && helper.dot(futureX, futureY, 'green')
 
-follow.log = (string, object = undefined) => {
-  if (follow.debug) {
-    if (object) {
-      console.log(string, object)
-    } else {
-      console.log(string)
+        // debug
+        helper.log('future position x', futureX)
+        helper.log('future position y', futureY)
     }
-  }
 }
 
 follow.init()

diff --git a/webpack.config.js b/webpack.config.js
@@ -7,4 +7,5 @@ module.exports = {
     filename: 'follow.min.js'
   },
   mode: 'production',
+  watch: true
 }