Merge pull request #1 from firstandthird/feature

Adding features
firstandthird · Nov 7, 2017 · 224345d · 224345d
2 parents c310548 + 570448b
commit 224345d
Show file tree

Hide file tree

Showing 9 changed files with 8,811 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+node_modules
+dist/
+test/*.dist*
+npm-debug.log
+.idea
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,3 @@
+test
+node_modules
+.git
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,18 @@
+before_script:
+  - 'npm run build'
+language: node_js
+node_js:
+  - "7"
+  - "6"
+cache:
+  directories:
+    - travis_phantomjs
+
+before_install:
+  # Upgrade PhantomJS to v2.1.1.
+  - "export PHANTOMJS_VERSION=2.1.1"
+  - "export PATH=$PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64/bin:$PATH"
+  - "if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then rm -rf $PWD/travis_phantomjs; mkdir -p $PWD/travis_phantomjs; fi"
+  - "if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then wget https://github.com/Medium/phantomjs/releases/download/v$PHANTOMJS_VERSION/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2 -O $PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2; fi"
+  - "if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then tar -xvf $PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2 -C $PWD/travis_phantomjs; fi"
+  - "phantomjs --version"
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# Domorallax
+
+Uncomplicated parallax with Domodule. See [example](example/index.html) for more information.
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <title>Parallax</title>
+  <link rel="stylesheet" href="http://clientkit.io/clientkit.css">
+  <style>
+    body {
+      min-height: 3000px;
+    }
+
+    .parallax {
+      height: 600px;
+      position: relative;
+    }
+
+    .parallax-wrapper {
+      position: absolute;
+      overflow: hidden;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+    }
+
+    .parallax .container {
+      align-items: center;
+      height: 600px;
+      display: flex;
+      justify-content: center;
+    }
+  </style>
+</head>
+<body>
+  <section class="parallax">
+    <div class="parallax-wrapper" data-module="Domorallax">
+      <div class="bg-image" style="background-image: url(http://www.resplashed.com/img/3807f0d166a0.jpg)"></div>
+    </div>
+    <div class="container">
+      <h1 class="heading-1 heading--light">Domorallax</h1>
+    </div>
+  </section>
+
+  <section class="padding-yaxis-lg">
+    <div class="container">
+      <p class="heading-3 text-center">Smooth parallax scrolling using Domodule</p>
+    </div>
+  </section>
+
+  <section class="parallax">
+    <div class="parallax-wrapper" data-module="Domorallax">
+      <div class="bg-image" style="background-image: url(http://www.resplashed.com/img/5a4f59265cc0.jpg)"></div>
+    </div>
+  </section>
+
+  <section class="padding-yaxis-lg">
+    <div class="container">
+      <p class="heading-3 text-center">Configurable speed</p>
+    </div>
+  </section>
+
+  <section class="parallax">
+    <div class="parallax-wrapper" data-module="Domorallax" data-module-speed="0.2">
+      <div class="bg-image" style="background-image: url(http://www.resplashed.com/img/4e009c52f26d.jpg)"></div>
+    </div>
+  </section>
+
+  <section class="parallax">
+    <div class="parallax-wrapper" data-module="Domorallax" data-module-speed="-0.5">
+      <div class="bg-image" style="background-image: url(http://www.resplashed.com/img/45b5efdfcf4a.jpg)"></div>
+    </div>
+  </section>
+
+  <section class="parallax">
+    <div class="parallax-wrapper" data-module="Domorallax" data-module-speed="1.4">
+      <div class="bg-image" style="background-image: url(http://www.resplashed.com/img/8e1bfa626121.jpg)"></div>
+    </div>
+  </section>
+
+<script src="../dist/domorallax.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,239 @@
+import { prefixedTransform, on, ready, find, styles } from 'domassist';
+import Domodule from 'domodule';
+
+const rAF = window.requestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.mozRequestAnimationFrame ||
+  window.msRequestAnimationFrame ||
+  window.oRequestAnimationFrame ||
+  (callback => setTimeout(callback, 1000 / 60));
+const transformProp = prefixedTransform();
+const wSizes = {};
+const oldWSizes = {};
+const instances = [];
+
+function updateWSizes() {
+  wSizes.width = window.innerWidth || document.documentElement.clientWidth;
+  wSizes.height = window.innerHeight || document.documentElement.clientHeight;
+}
+
+// rAF Loop
+function animate() {
+  if (!instances.length) {
+    return;
+  }
+
+  wSizes.y = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
+
+  const isResized = oldWSizes.width !== wSizes.width ||
+    oldWSizes.height !== wSizes.height;
+  const isScrolled = isResized || oldWSizes.y !== wSizes.y;
+
+  if (isResized || isScrolled) {
+    instances.forEach(instance => {
+      if (isResized) {
+        instance.onResize();
+      }
+
+      if (isScrolled) {
+        instance.onScroll();
+      }
+    });
+  }
+
+  oldWSizes.width = wSizes.width;
+  oldWSizes.height = wSizes.height;
+  oldWSizes.y = wSizes.y;
+
+  rAF(animate);
+}
+
+updateWSizes();
+on(window, 'resize', updateWSizes);
+on(window, 'orientationchange', updateWSizes);
+on(window, 'load', updateWSizes);
+
+class Domorallax extends Domodule {
+  get defaults() {
+    return {
+      speed: 0.5,
+      position: 'fixed'
+    };
+  }
+
+  postInit() {
+    this.options.speed = Math.min(2, Math.max(-1, parseFloat(this.options.speed)));
+    // For now let's keep this simple
+    this.image = this.el.children[0];
+
+    this.checkEnabled();
+  }
+
+  checkEnabled() {
+    let enabled = true;
+
+    if (this.options.on) {
+      enabled = window.matchMedia(this.options.on).matches;
+    }
+
+    if (this.enabled !== enabled) {
+      if (enabled) {
+        this.checkParents();
+      } else {
+        // Wipe everything
+        this.el.style[transformProp] = '';
+        this.image.removeAttribute('style');
+      }
+    }
+
+    if (enabled) {
+      this.calculate();
+      this.clip();
+      this.onScroll(true);
+    }
+
+    this.enabled = enabled;
+  }
+
+  checkParents() {
+    let parentWithTransform = 0;
+    let parent = this.el;
+
+    while (parent !== null && parent !== document && parentWithTransform === 0) {
+      const style = window.getComputedStyle(parent);
+      const parentTransform = style.getPropertyValue('-webkit-transform') ||
+        style.getPropertyValue('transform');
+
+      if (parentTransform && parentTransform !== 'none') {
+        parentWithTransform = 1;
+
+        // Add transform on container if there is parent with transform
+        this.el.style[transformProp] = 'translateX(0) translateY(0)';
+      }
+
+      parent = parent.parentNode;
+    }
+
+    if (parentWithTransform) {
+      this.options.position = 'absolute';
+    }
+  }
+
+  clip() {
+    if (this.options.position !== 'fixed') {
+      return;
+    }
+
+    const rect = this.el.getBoundingClientRect();
+    const { width, height } = rect;
+
+    if (!this.clipStyles) {
+      this.clipStyles = document.createElement('style');
+      this.clipStyles.setAttribute('type', 'text/css');
+      this.clipStyles.setAttribute('id', `domorallax-clip-${this.id}`);
+      const head = document.head || document.getElementsByTagName('head')[0];
+      head.appendChild(this.clipStyles);
+    }
+
+    const content = [
+      `[data-module-uid="${this.id}"] {`,
+      `   clip: rect(0 ${width}px ${height}px 0);`,
+      `   clip: rect(0, ${width}px, ${height}px, 0);`,
+      '}',
+    ].join('\n');
+
+    if (this.clipStyles.styleSheet) {
+      this.clipStyles.styleSheet.cssText = content;
+    } else {
+      this.clipStyles.innerHTML = content;
+    }
+  }
+
+  calculate() {
+    const rect = this.el.getBoundingClientRect();
+    const elHeight = rect.height;
+    const speed = this.options.speed;
+    let scrollDist = 0;
+    let height = elHeight;
+
+    if (speed < 0) {
+      scrollDist = speed * Math.max(elHeight, wSizes.height);
+    } else {
+      scrollDist = speed * (elHeight + wSizes.height);
+    }
+
+    if (speed > 1) {
+      height = Math.abs(scrollDist - wSizes.height);
+    } else if (speed < 0) {
+      height = scrollDist / speed + Math.abs(scrollDist);
+    } else {
+      height += Math.abs(wSizes.height - elHeight) * (1 - speed);
+    }
+
+    scrollDist /= 2;
+
+    const marginTop = (wSizes.height - height) / 2;
+    this.scrollDistance = scrollDist;
+
+    styles(this.image, {
+      height: `${height}px`,
+      marginTop: `${marginTop}px`,
+      left: `${rect.left}px`,
+      width: `${rect.width}px`,
+      top: 0,
+      pointerEvents: 'none',
+      overflow: 'hidden',
+      position: this.options.position,
+      willChange: 'transform'
+    });
+  }
+
+  onScroll(force = false) {
+    if (!this.enabled) {
+      return;
+    }
+
+    const rect = this.el.getBoundingClientRect();
+    const { top, height } = rect;
+    this.elInViewPort = rect.bottom >= 0 &&
+      rect.right >= 0 &&
+      rect.top <= wSizes.height &&
+      rect.left <= wSizes.width;
+
+    // Stop if not in viewport
+    if (!force && !this.elInViewPort) {
+      return;
+    }
+
+    const fromViewportCenter = 1 - 2 * (wSizes.height - top) / (wSizes.height + height);
+    let y = (this.scrollDistance * fromViewportCenter);
+
+    if (this.options.position === 'absolute') {
+      y -= top;
+    }
+
+    this.image.style[transformProp] = `translate3d(0, ${y}px, 0)`;
+  }
+
+  onResize() {
+    this.checkEnabled();
+  }
+}
+
+// Control discovery to control rAF process
+export default function discover() {
+  const els = find('[data-module="Domorallax"]');
+
+  els.forEach(el => {
+    if (!el.dataset.moduleUid) {
+      instances.push(new Domorallax(el));
+    }
+
+    // Don't start the rAF cycle unless at least one
+    if (instances.length === 1) {
+      animate();
+    }
+  });
+}
+
+ready(discover);