Merge branch 'develop'

rgalus · Sep 2, 2016 · 4e1a4e4 · 4e1a4e4
2 parents 8ab480c + c6a7e72
commit 4e1a4e4
Show file tree

Hide file tree

Showing 9 changed files with 264 additions and 117 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,19 @@
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+
+end_of_line = lf
+charset = utf-8
+
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.php]
+indent_size = 4
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ Sticky-js is a library for sticky elements written in vanilla javascript. With t
 ## Features
 
 - Written in vanilla javascript, no dependencies needed
-- Lightweight (minified: ~3.15kb, gzipped: ~1.05kb)
+- Lightweight (minified: ~3.73kb, gzipped: ~1.23kb)
 - It can be sticky to the entire page or to selected parent container
 - No additional CSS needed
 
@@ -89,6 +89,7 @@ sticky.update();
 Option | Type | Default | Description
 ------ | ---- | ------- | ----
 data-margin-top | number | 0 | Margin between page and sticky element when scrolled
+data-sticky-for | number | 0 | Breakpoint which when is bigger than viewport width, sticky is activated and when is smaller, then sticky is destroyed
 
 ## Browser Compatibility
 

diff --git a/demo/index.html b/demo/index.html
@@ -90,15 +90,15 @@
 
       <section class="container" data-sticky-container>
         <div class="row column">
-          <img src="http://placehold.it/250x250" class="float-left" alt="Sticky" data-sticky data-margin-top="100">
+          <img src="http://placehold.it/250x250" class="float-left" alt="Sticky" data-sticky data-sticky-for="1023" data-margin-top="100">
           <img src="http://placehold.it/250x250" class="float-right" alt="Sticky" data-sticky data-margin-top="100">
         </div>
       </section>
 
       <section class="container" data-sticky-container>
         <div class="row column">
           <img src="http://placehold.it/250x250" class="float-left" alt="Sticky" data-sticky data-margin-top="100">
-          <img src="http://placehold.it/250x250" class="float-right" alt="Sticky" data-sticky data-margin-top="100">
+          <img src="http://placehold.it/250x250" class="float-right" alt="Sticky" data-sticky data-sticky-for="1023" data-margin-top="100">
         </div>
       </section>
 
@@ -119,4 +119,4 @@
     </script>
 
   </body>
-</html>
+</html>
diff --git a/dist/sticky.compile.js b/dist/sticky.compile.js
@@ -5,28 +5,44 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 var Sticky = function Sticky(selector) {
   var sticky = this;
 
+  sticky.version = '1.0.6';
+
   sticky.selector = selector;
 
   sticky.vp = sticky.getViewportSize();
   sticky.scrollTop = sticky.getScrollTopPosition();
+  sticky.elements = [];
 
-  sticky.initialize();
+  sticky.run();
 };
 
 Sticky.prototype = {
-  initialize: function initialize() {
+  run: function run() {
     var _this = this;
 
-    this.elements = document.querySelectorAll(this.selector);
+    var elements = document.querySelectorAll(this.selector);
 
-    // initialize sticky only when dom is fully loaded
+    // run sticky only when dom is fully loaded
     var DOMContentLoaded = setInterval(function () {
       if (document.readyState === 'interactive' || document.readyState === 'complete') {
-        for (var i = 0, len = _this.elements.length; i < len; i++) {
-          _this.activate(_this.elements[i]);
-        }
-
         clearInterval(DOMContentLoaded);
+
+        _this.iterate(elements, function (el) {
+          return _this.activate(el);
+        });
+
+        window.addEventListener('scroll', function () {
+          _this.scrollTop = _this.getScrollTopPosition();
+          _this.setPosition();
+        });
+
+        window.addEventListener('resize', function () {
+          _this.vp = _this.getViewportSize();
+          _this.updatePosition();
+        });
+
+        _this.isSet = true;
+        _this.setPosition();
       }
     }, 100);
   },
@@ -36,7 +52,11 @@ Sticky.prototype = {
 
     el.sticky = {};
 
-    el.sticky.marginTop = el.getAttribute('data-margin-top') ? parseInt(el.getAttribute('data-margin-top')) : 0;
+    el.sticky.active = false;
+
+    el.sticky.breakpoint = parseInt(el.getAttribute('data-sticky-for')) || 0;
+    el.sticky.marginTop = parseInt(el.getAttribute('data-margin-top')) || 0;
+
     el.sticky.rect = this.getRect(el);
 
     // fix when el is image that has not yet loaded and width, height = 0
@@ -49,20 +69,23 @@ Sticky.prototype = {
     el.sticky.container = this.getContainer(el);
     el.sticky.container.rect = this.getRect(el.sticky.container);
 
+    if (el.sticky.breakpoint < this.vp.width && !el.sticky.active) {
+      el.sticky.active = true;
+    }
+
     window.addEventListener('resize', function () {
       _this2.vp = _this2.getViewportSize();
-      _this2.updateRect(el);
-      _this2.setPosition(el);
-    });
 
-    window.addEventListener('scroll', function () {
-      return _this2.scrollTop = _this2.getScrollTopPosition();
-    });
-    window.addEventListener('scroll', function () {
-      return _this2.setPosition(el);
+      if (el.sticky.breakpoint < _this2.vp.width && !el.sticky.active) {
+        el.sticky.active = true;
+        _this2.setPosition();
+      } else if (el.sticky.breakpoint >= _this2.vp.width && el.sticky.active) {
+        el.sticky.active = false;
+        _this2.setPosition();
+      }
     });
 
-    this.setPosition(el);
+    this.elements.push(el);
   },
 
   getRect: function getRect(el) {
@@ -74,11 +97,15 @@ Sticky.prototype = {
     return position;
   },
 
-  updateRect: function updateRect(el) {
-    this.removeStyle(el, ['position', 'width', 'top', 'left']);
+  updateRect: function updateRect() {
+    var _this3 = this;
 
-    el.sticky.rect = this.getRect(el);
-    el.sticky.container.rect = this.getRect(el.sticky.container);
+    this.iterate(this.elements, function (el) {
+      _this3.removeStyle(el, ['position', 'width', 'top', 'left']);
+
+      el.sticky.rect = _this3.getRect(el);
+      el.sticky.container.rect = _this3.getRect(el.sticky.container);
+    });
   },
 
   getTopLeftPosition: function getTopLeftPosition(el) {
@@ -115,45 +142,59 @@ Sticky.prototype = {
     return (window.pageYOffset || document.scrollTop) - (document.clientTop || 0) || 0;
   },
 
-  setPosition: function setPosition(el) {
-    if (this.vp.height < el.sticky.rect.height) {
-      return;
-    }
+  setPosition: function setPosition() {
+    var _this4 = this;
 
-    this.removeStyle(el, ['position', 'width', 'top', 'left']);
+    this.iterate(this.elements, function (el) {
+      _this4.removeStyle(el, ['position', 'width', 'top', 'left']);
 
-    if (this.scrollTop > el.sticky.rect.top - el.sticky.marginTop) {
-      this.addStyle(el, {
-        position: 'fixed',
-        width: el.sticky.rect.width + 'px',
-        left: el.sticky.rect.left + 'px'
-      });
+      if (_this4.vp.height < el.sticky.rect.height || !el.sticky.active) {
+        return;
+      }
 
-      if (this.scrollTop + el.sticky.rect.height + el.sticky.marginTop > el.sticky.container.rect.top + el.sticky.container.rect.height) {
-        this.addStyle(el, { top: el.sticky.container.rect.top + el.sticky.container.rect.height - (this.scrollTop + el.sticky.rect.height) + 'px' });
+      if (_this4.scrollTop > el.sticky.rect.top - el.sticky.marginTop) {
+        _this4.addStyle(el, {
+          position: 'fixed',
+          width: el.sticky.rect.width + 'px',
+          left: el.sticky.rect.left + 'px'
+        });
+
+        if (_this4.scrollTop + el.sticky.rect.height + el.sticky.marginTop > el.sticky.container.rect.top + el.sticky.container.rect.height) {
+          _this4.addStyle(el, {
+            top: el.sticky.container.rect.top + el.sticky.container.rect.height - (_this4.scrollTop + el.sticky.rect.height) + 'px' });
+        } else {
+          _this4.addStyle(el, { top: el.sticky.marginTop + 'px' });
+        }
       } else {
-        this.addStyle(el, { top: el.sticky.marginTop + 'px' });
+        _this4.removeStyle(el, ['position', 'width', 'top', 'left']);
       }
-    } else {
-      this.removeStyle(el, ['position', 'width', 'top', 'left']);
-    }
+    });
   },
 
-  update: function update() {
-    var self = this;
-
-    var thisUpdate = function thisUpdate() {
-      self.update();
-    };
+  updatePosition: function updatePosition() {
+    this.updateRect();
+    this.setPosition();
+  },
 
-    for (var i = 0, len = this.elements.length; i < len; i++) {
-      if (typeof this.elements[i].sticky !== 'undefined') {
-        this.updateRect(this.elements[i]);
-        this.setPosition(this.elements[i]);
-      } else {
-        setTimeout(thisUpdate, 100);
-        break;
-      }
+  update: function update() {
+    var _this5 = this;
+
+    if (this.isSet) {
+      (function () {
+        var self = _this5;
+
+        var thisUpdate = function thisUpdate() {
+          self.update();
+        };
+
+        _this5.iterate(_this5.elements, function (element) {
+          if (typeof element.sticky !== 'undefined') {
+            _this5.updatePosition();
+          } else {
+            setTimeout(thisUpdate, 100);
+          }
+        });
+      })();
     }
   },
 
@@ -166,8 +207,14 @@ Sticky.prototype = {
   },
 
   removeStyle: function removeStyle(el, properties) {
-    for (var i = 0, len = properties.length; i < len; i++) {
-      el.style[properties[i]] = null;
+    this.iterate(properties, function (property) {
+      return el.style[property] = null;
+    });
+  },
+
+  iterate: function iterate(array, callback) {
+    for (var i = 0, len = array.length; i < len; i++) {
+      callback(array[i]);
     }
   }
 };

diff --git a/dist/sticky.min.js b/dist/sticky.min.js
diff --git a/dist/sticky.min.js.gz b/dist/sticky.min.js.gz
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -1,10 +1,12 @@
 'use strict';
 
+
 //
 // Gulp
 // --------------------------------------------------
 
 
+
 /*
  * Import gulp modules
  */
@@ -15,6 +17,14 @@ import rename from 'gulp-rename';
 import uglify from 'gulp-uglify';
 import size from 'gulp-size';
 import gzip from 'gulp-gzip';
+import browser_sync from 'browser-sync';
+
+
+
+/*
+ * Create browserSync instance
+ */
+const browserSync = browser_sync.create();
 
 
 
@@ -27,7 +37,7 @@ export { clean };
 
 
 /*
- * Build
+ * Compile js
  */
 export function js() {
   return gulp.src('./src/sticky.js')
@@ -46,14 +56,39 @@ export function js() {
 
 
 
+/*
+ * Serve
+ */
+export function serve() {
+  gulp.watch('./src/*.js', gulp.series(js))
+
+  gulp.watch('./demo/*.html').on('change', browserSync.reload);
+  gulp.watch('./dist/*.js').on('change', browserSync.reload);
+
+  return browserSync.init({
+    server: {
+      baseDir: './',
+      directory: true,
+    },
+
+    startPath: '/demo/index.html',
+  });
+}
+
+
+
 /*
  * Builder
  */
 const build = gulp.series(clean, js);
+export { build };
+
+const server = gulp.series(clean, js, serve);
+export { server };
 
 
 
 /*
  * Export a default task
  */
-export default build;
+export default server;
diff --git a/package.json b/package.json
@@ -1,10 +1,11 @@
 {
   "name": "sticky-js",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Sticky elements",
   "main": "dist/sticky.compile.js",
   "scripts": {
     "start": "gulp",
+    "build": "gulp build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -27,6 +28,7 @@
     "babel-core": "^6.11.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-register": "^6.9.0",
+    "browser-sync": "^2.14.3",
     "del": "^2.2.1",
     "gulp": "github:gulpjs/gulp#4.0",
     "gulp-babel": "^6.1.2",