Comperi

closed #676,#666,#665,#681,#677,#687,#685,#684
2017-05-31 14:10:54 +02:00
commit 09a00d2c83
5 changed files with 475 additions and 0 deletions
@@ -0,0 +1,166 @@
+/**
+ * Created by Simon on 09.05.2017.
+ */
+//The script is very simple.
+// Hand it the object whose position
+// should be calculated and set the
+// variables curleft and curtop to 0:
+
+function findPos(obj) {
+    var curleft = curtop = 0;
+
+    if (obj.offsetParent) {
+
+        do {
+            curleft += obj.offsetLeft;
+            curtop += obj.offsetTop;
+
+        } while (obj = obj.offsetParent);
+
+        return [curleft, curtop];
+    }
+}
+
+function findPos2(element) {
+    var bodyRect = document.body.getBoundingClientRect(),
+        elemRect = element.getBoundingClientRect(),
+        offset = elemRect.top - bodyRect.top;
+
+    return []
+}
+
+function findPos3(el) {
+    var _x = 0;
+    var _y = 0;
+
+    while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
+
+        _x += el.offsetLeft - el.scrollLeft;
+        _y += el.offsetTop - el.scrollTop;
+
+        el = el.offsetParent;
+    }
+
+    return {top: _y, left: _x};
+}
+
+//var x = getOffset( document.getElementById('header') ).left;
+
+
+function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $endoffset, $absoluteoffset) {
+
+    // Default values
+    $startoffset = (typeof $startoffset !== 'undefined') ? $startoffset : 0;
+    $endoffset = (typeof $endoffset !== 'undefined') ? $endoffset : 0;
+    $activeclass = (typeof $activeclass !== 'undefined') ? $activeclass : 'active';
+    $inactiveclass = (typeof $inactiveclass !== 'undefined') ? $inactiveclass : 'inactive';
+    $absoluteoffset = (typeof $absoluteoffset !== 'undefined') ? $absoluteoffset : false;
+
+    // Variables
+    var $elementtop,
+
+    // Get element
+        $el = document.getElementById($id),
+
+    // Get Start & End Pixel From Top
+        $start = 0,
+        $end = 0,
+
+    // get el position
+
+        $elementtop = findPos($el)[1];
+
+
+    pos = function () {
+
+
+        console.log("el pos: " + $elementtop);
+
+    },
+
+        // what should we do when scrolling occurs
+        runOnScroll = function () {
+            var $scrollpos = window.scrollY;
+
+            console.log('scrollposition');
+
+
+            console.log($scrollpos);
+
+            console.log('offsets');
+            console.log($startoffset);
+            console.log($endoffset);
+
+            console.log('calcpositions');
+            console.log($start);
+            console.log($end);
+
+            console.log('positions');
+
+            // Check if we are beyond the startpoint
+            if ($scrollpos > $start) {
+
+
+                // Now Check if it has an end
+                if (
+                    $endoffset != 0 && // if endposition is set
+                    $scrollpos > ($end)// and we are beyond that point
+                ) {
+
+                    //remove the class
+                    addClass($el, $inactiveclass)
+                    removeClass($el, $activeclass);
+
+                    //Scroll back the amount of end positioning to avoid jumps
+                    // Todo maybe better to integrate in another function for scrolling/fixing etc.
+                    //window.scrollTo(0, $end);
+
+                }
+
+                // in any other case add it
+                else {
+                    removeClass($el, $inactiveclass);
+                    removeClass($el, 'before');
+
+                    addClass($el, $activeclass);
+                    addClass($el, 'after');
+                }
+            }
+
+            //In any other case than being beyond start, remove the class
+            else {
+                addClass($el, $inactiveclass);
+                addClass($el, 'before');
+
+                removeClass($el, $activeclass);
+                removeClass($el, 'after');
+            }
+        };
+
+    switch ($absoluteoffset) {
+        case true:
+
+            $start = $startoffset;
+            $end = $endoffset;
+
+            console.log("Start" + $start);
+            break;
+        case false:
+            $start = ($elementtop + $startoffset);
+            $end = ($elementtop + $endoffset);
+
+            console.log("Start" + $start);
+            break;
+    }
+
+    // and then make each element do something on scroll
+
+    // Trigger events
+    window.addEventListener("load", pos);
+    window.addEventListener("load", runOnScroll);
+
+    document.addEventListener("resize", pos);
+    document.addEventListener("resize", runOnScroll);
+
+    window.addEventListener("scroll", runOnScroll);
+}