Comperi

closed #676,#666,#665,#681,#677,#687,#685,#684

classes/classes.js

@@ -0,0 +1,25 @@
+/**
+ * Created by Simon on 09.05.2017.
+ */
+
+function hasClass(el, className) {
+    if (el.classList)
+        return el.classList.contains(className);
+    else
+        return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
+}
+
+function addClass(el, className) {
+    if (el.classList)
+        el.classList.add(className);
+    else if (!hasClass(el, className)) el.className += " " + className
+}
+
+function removeClass(el, className) {
+    if (el.classList)
+        el.classList.remove(className);
+    else if (hasClass(el, className)) {
+        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
+        el.className = el.className.replace(reg, ' ')
+    }
+}

element-position/element-position.js

@@ -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);
+}

element-position/example/element-position.css

@@ -0,0 +1,52 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
+  body header {
+    position: absolute;
+    width: 100%;
+    height: 150px;
+    padding: 25px;
+    box-sizing: border-box;
+    background-color: #ff00ff;
+    color: #006505;
+    font-weight: 700;
+    -webkit-transition: all 1s ease-in-out;
+    transition: all 1s ease-in-out; }
+    body header.fixed {
+      position: fixed;
+      top: 0;
+      width: 50%;
+      margin: 0 25%; }
+    body header ul {
+      list-style: none; }
+      body header ul li {
+        display: inline-block;
+        padding-left: 25px; }
+  body section {
+    width: 100%;
+    padding: 200px 25%;
+    box-sizing: border-box;
+    color: #bfffc0;
+    background-color: #00a0d2; }
+  body footer {
+    position: fixed;
+    bottom: 0;
+    width: 50%;
+    height: 100px;
+    margin: 0 25%;
+    background-color: white;
+    -webkit-transition: all 1s ease-in-out;
+    transition: all 1s ease-in-out; }
+    body footer.relative {
+      position: relative;
+      height: 700px;
+      width: 100%;
+      margin: 0; }
+    body footer ul {
+      list-style: none; }
+      body footer ul li {
+        display: inline-block;
+        padding-left: 25px; }
+
+/*# sourceMappingURL=element-position.css.map */

element-position/example/element-position.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Element-Position</title>
+    <style src="element-position.css"></style>
+    <link rel="stylesheet"
+          href="element-position.css"
+          type="text/css">
+    <script src="../../classes/classes.js"
+            type="text/javascript"></script>
+    <script src="../element-position.js"
+            type="text/javascript"></script>
+</head>
+<body>
+<header id="header">
+    <ul>
+        <li>Item</li>
+        <li>Item</li>
+        <li>Item</li>
+        <li>Item</li>
+    </ul>
+</header>
+<section>Lorem ipsum dolor sit amet,
+         consectetuer adipiscing elit.
+         Aenean commodo ligula eget dolor.
+         Aenean massa. Cum sociis natoque penatibus et
+         magnis dis parturient montes, nascetur ridiculus mus.
+         Donec quam felis, ultricies nec, pellentesque eu,
+         pretium quis, sem. Nulla consequat massa quis enim.
+         Donec pede justo, fringilla vel, aliquet nec,
+         vulputate eget, arcu. In enim justo, rhoncus ut,
+         imperdiet a, venenatis vitae, justo. Nullam dictum
+         felis eu pede mollis pretium. Integer tincidunt.
+         Cras dapibus. Vivamus elementum semper nisi. Aenean
+         vulputate eleifend tellus. Aenean leo ligula, porttitor
+         eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
+         dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
+         nulla ut metus varius laoreet. Quisque rutrum. Aenean
+         imperdiet. Etiam ultricies nisi vel augue. Curabitur
+         ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
+         Maecenas tempus, tellus eget condimentum rhoncus, sem quam
+         semper libero, sit amet adipiscing sem neque sed ipsum.
+         Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
+         Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
+         ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
+         orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
+         sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
+         eget bibendum sodales, augue velit cursus nunc.
+</section>
+<section>Lorem ipsum dolor sit amet,
+         consectetuer adipiscing elit.
+         Aenean commodo ligula eget dolor.
+         Aenean massa. Cum sociis natoque penatibus et
+         magnis dis parturient montes, nascetur ridiculus mus.
+         Donec quam felis, ultricies nec, pellentesque eu,
+         pretium quis, sem. Nulla consequat massa quis enim.
+         Donec pede justo, fringilla vel, aliquet nec,
+         vulputate eget, arcu. In enim justo, rhoncus ut,
+         imperdiet a, venenatis vitae, justo. Nullam dictum
+         felis eu pede mollis pretium. Integer tincidunt.
+         Cras dapibus. Vivamus elementum semper nisi. Aenean
+         vulputate eleifend tellus. Aenean leo ligula, porttitor
+         eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
+         dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
+         nulla ut metus varius laoreet. Quisque rutrum. Aenean
+         imperdiet. Etiam ultricies nisi vel augue. Curabitur
+         ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
+         Maecenas tempus, tellus eget condimentum rhoncus, sem quam
+         semper libero, sit amet adipiscing sem neque sed ipsum.
+         Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
+         Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
+         ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
+         orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
+         sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
+         eget bibendum sodales, augue velit cursus nunc.
+</section>
+<section>Lorem ipsum dolor sit amet,
+         consectetuer adipiscing elit.
+         Aenean commodo ligula eget dolor.
+         Aenean massa. Cum sociis natoque penatibus et
+         magnis dis parturient montes, nascetur ridiculus mus.
+         Donec quam felis, ultricies nec, pellentesque eu,
+         pretium quis, sem. Nulla consequat massa quis enim.
+         Donec pede justo, fringilla vel, aliquet nec,
+         vulputate eget, arcu. In enim justo, rhoncus ut,
+         imperdiet a, venenatis vitae, justo. Nullam dictum
+         felis eu pede mollis pretium. Integer tincidunt.
+         Cras dapibus. Vivamus elementum semper nisi. Aenean
+         vulputate eleifend tellus. Aenean leo ligula, porttitor
+         eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
+         dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
+         nulla ut metus varius laoreet. Quisque rutrum. Aenean
+         imperdiet. Etiam ultricies nisi vel augue. Curabitur
+         ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
+         Maecenas tempus, tellus eget condimentum rhoncus, sem quam
+         semper libero, sit amet adipiscing sem neque sed ipsum.
+         Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
+         Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
+         ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
+         orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
+         sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
+         eget bibendum sodales, augue velit cursus nunc.
+</section>
+<section>Lorem ipsum dolor sit amet,
+         consectetuer adipiscing elit.
+         Aenean commodo ligula eget dolor.
+         Aenean massa. Cum sociis natoque penatibus et
+         magnis dis parturient montes, nascetur ridiculus mus.
+         Donec quam felis, ultricies nec, pellentesque eu,
+         pretium quis, sem. Nulla consequat massa quis enim.
+         Donec pede justo, fringilla vel, aliquet nec,
+         vulputate eget, arcu. In enim justo, rhoncus ut,
+         imperdiet a, venenatis vitae, justo. Nullam dictum
+         felis eu pede mollis pretium. Integer tincidunt.
+         Cras dapibus. Vivamus elementum semper nisi. Aenean
+         vulputate eleifend tellus. Aenean leo ligula, porttitor
+         eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
+         dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
+         nulla ut metus varius laoreet. Quisque rutrum. Aenean
+         imperdiet. Etiam ultricies nisi vel augue. Curabitur
+         ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
+         Maecenas tempus, tellus eget condimentum rhoncus, sem quam
+         semper libero, sit amet adipiscing sem neque sed ipsum.
+         Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
+         Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
+         ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
+         orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
+         sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
+         eget bibendum sodales, augue velit cursus nunc.
+</section>
+<footer id="footer">
+    <ul>
+        <li>
+            <span class="contact"></span>
+            Contact
+        </li>
+
+        <li>
+            <span class="top"></span>
+            Top
+        </li>
+    </ul>
+</footer>
+<script type="text/javascript">
+    var height = document.height;
+
+    class_By_Y_Position("header", "fixed", "relative", 0, 0, false);
+
+    class_By_Y_Position("footer", "relative", "fixed", 0, findPos(document.getElementById('footer'))[1], true);
+</script>
+</body>
+</html>

element-position/example/element-position.scss

@@ -0,0 +1,79 @@
+body {
+  padding: 0;
+  margin: 0;
+
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  header {
+    position: absolute;
+
+    width: 100%;
+    height: 150px;
+
+    padding: 25px;
+    box-sizing: border-box;
+
+    background-color: #ff00ff;
+    color: #006505;
+
+    font-weight: 700;
+
+    transition: all 1s ease-in-out;
+
+    &.fixed {
+      position: fixed;
+      top: 0;
+
+      width: 50%;
+      margin: 0 25%;
+    }
+
+    ul {
+      list-style: none;
+
+      li {
+        display: inline-block;
+        padding-left: 25px;
+      }
+    }
+  }
+
+  section {
+
+    width: 100%;
+    padding: 200px 25%;
+    box-sizing: border-box;
+
+    color: #bfffc0;
+    background-color: #00a0d2;
+  }
+
+  footer {
+    position: fixed;
+    bottom: 0;
+
+    width: 50%;
+    height: 100px;
+
+    margin: 0 25%;
+
+    background-color: white;
+
+    transition: all 1s ease-in-out;
+
+    &.relative {
+      position: relative;
+      height: 700px;
+      width: 100%;
+      margin:0;
+    }
+
+    ul {
+      list-style: none;
+
+      li {
+        display: inline-block;
+        padding-left: 25px;
+      }
+    }
+  }
+}