v0.4.1

haltu · Sep 3, 2017 · 7b1198d · 7b1198d
1 parent e5692a4
commit 7b1198d
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 177 deletions.
diff --git a/README.md b/README.md
@@ -28,14 +28,14 @@ Muuri uses [Velocity](http://velocityjs.org/) for animating the grid items (posi
 ### 1. Get Muuri
 
 Download from GitHub:
-* [muuri.js](https://raw.githubusercontent.com/haltu/muuri/0.5.0/muuri.js) - for development (not minified, with comments).
-* [muuri.min.js](https://raw.githubusercontent.com/haltu/muuri/0.5.0/muuri.min.js) - for production (minified, no comments).
+* [muuri.js](https://raw.githubusercontent.com/haltu/muuri/0.4.1/muuri.js) - for development (not minified, with comments).
+* [muuri.min.js](https://raw.githubusercontent.com/haltu/muuri/0.4.1/muuri.min.js) - for production (minified, no comments).
 
 Or link directly via CDNJS:
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.0/muuri.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.0/muuri.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.4.1/muuri.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.4.1/muuri.min.js"></script>
 ```
 
 Or install with [npm](https://www.npmjs.com/):

diff --git a/muuri.js b/muuri.js
@@ -1,5 +1,5 @@
 /*!
- * Muuri v0.5.0-dev
+ * Muuri v0.4.1
  * https://github.com/haltu/muuri
  * Copyright (c) 2015, Haltu Oy
  *
@@ -22,13 +22,6 @@
  * SOFTWARE.
  */
 
-// TODO: Some performance issue on Firefox. When there are a lot of items and
-//       you try to hide a few items, the animation is really janky.
-// TODO: Debounce drag handlers: https://developers.google.com/web/fundamentals/
-//       performance/rendering/debounce-your-input-handlers?hl=en
-// TODO: Minimize layout thrashing.
-// TODO: Make sure that the offsets are correct after append procedures.
-
 (function (global, factory) {
 
   var namespace = 'Muuri';
@@ -73,10 +66,6 @@
   var typeString = 'string';
   var typeNumber = 'number';
 
-  // Raf loop that can be used to organize DOM write and read operations
-  // optimally in the next animation frame.
-  var rafLoop = createRafLoop();
-
   // Drag start predicate states.
   var startPredicateInactive = 0;
   var startPredicatePending = 1;
@@ -719,10 +708,8 @@
 
     // If there are items let's get window's width/height for the layout
     // animation optimization algorithm.
-    rafLoop.inspect(function () {
-      winWidth = global.innerWidth;
-      winHeight = global.innerHeight;
-    });
+    winWidth = global.innerWidth;
+    winHeight = global.innerHeight;
 
     // If there are items let's position them.
     for (i = 0; i < items.length; i++) {
@@ -1931,10 +1918,8 @@
     animEnabled = !instant && !inst._skipNextLayoutAnimation && animDuration > 0;
 
     // Process current layout callback queue with interrupted flag on if the
-    // item is currently positioning. Also cancel the possible layout animation
-    // init if it has not yet been called.
+    // item is currently positioning.
     if (isPositioning) {
-      inst._cancelLayoutAnimationInit();
       processQueue(inst._layoutQueue, true, inst);
     }
 
@@ -1971,50 +1956,35 @@
     // If animations are needed, let's dive in.
     else {
 
-      // Set item as positioning if it is not already.
+      // Get item's current left and top values.
+      currentLeft = getTranslateAsFloat(element, 'x') - offsetLeft;
+      currentTop = getTranslateAsFloat(element, 'y') - offsetTop;
+
+      // If the item is already in correct position let's quit early.
+      if (inst._left === currentLeft && inst._top === currentTop) {
+        inst._stopLayout()._finishLayout();
+        return;
+      }
+
+      // Mark as positioning and add positioning class if necessary.
       if (!isPositioning) {
         inst._isPositioning = true;
+        addClass(element, settings.itemPositioningClass);
       }
 
-      // Read the item's current left and top values in the next frame.
-      inst._layoutAnimateInitRead = rafLoop.inspect(function () {
-        inst._layoutAnimateInitRead = null;
-        currentLeft = getTranslateAsFloat(element, 'x') - offsetLeft;
-        currentTop = getTranslateAsFloat(element, 'y') - offsetTop;
-      });
-
-      // Apply the animation logic in the next frame after we have fetched the
-      // current left and top values.
-      inst._layoutAnimateInitWrite = rafLoop.modify(function () {
-
-        inst._layoutAnimateInitWrite = null;
-
-        // If the item is already in correct position let's quit early.
-        if (inst._left === currentLeft && inst._top === currentTop) {
-          inst._stopLayout()._finishLayout();
-          return;
+      // Animate.
+      inst._animate.start({
+        translateX: (currentLeft + offsetLeft) + 'px',
+        translateY: (currentTop + offsetTop) + 'px'
+      }, {
+        translateX: inst._left + offsetLeft + 'px',
+        translateY: inst._top + offsetTop + 'px'
+      }, {
+        duration: animDuration,
+        easing: animEasing,
+        onFinish: function () {
+          inst._finishLayout();
         }
-
-        // Mark as positioning and add positioning class if necessary.
-        if (!isPositioning) {
-          addClass(element, settings.itemPositioningClass);
-        }
-
-        // Animate.
-        inst._animate.start({
-          translateX: (currentLeft + offsetLeft) + 'px',
-          translateY: (currentTop + offsetTop) + 'px'
-        }, {
-          translateX: inst._left + offsetLeft + 'px',
-          translateY: inst._top + offsetTop + 'px'
-        }, {
-          duration: animDuration,
-          easing: animEasing,
-          onFinish: function () {
-            inst._finishLayout();
-          }
-        });
-
       });
 
     }
@@ -2077,9 +2047,6 @@
       return inst;
     }
 
-    // Cancel animation init.
-    inst._cancelLayoutAnimationInit();
-
     // Stop animation.
     inst._animate.stop();
 
@@ -2098,31 +2065,6 @@
 
   };
 
-  /**
-   * Cancel queued layout animation init operations.
-   *
-   * @protected
-   * @memberof Item.prototype
-   * @returns {Item}
-   */
-  Item.prototype._cancelLayoutAnimationInit = function () {
-
-    var inst = this;
-
-    if (inst._layoutAnimateInitRead) {
-      rafLoop.remove(inst._layoutAnimateInitRead);
-      inst._layoutAnimateInitRead = null;
-    }
-
-    if (inst._layoutAnimateInitWrite) {
-      rafLoop.remove(inst._layoutAnimateInitWrite);
-      inst._layoutAnimateInitWrite = null;
-    }
-
-    return inst;
-
-  };
-
   Item.prototype._show = function (instant, onFinish) {
 
     var inst = this;
@@ -3198,10 +3140,8 @@
 
     // Position the released item and get window's width/height for the layout
     // animation optimization algorithm.
-    rafLoop.inspect(function () {
-      winWidth = global.innerWidth;
-      winHeight = global.innerHeight;
-    });
+    winWidth = global.innerWidth;
+    winHeight = global.innerHeight;
     item._layout(false);
 
     return release;
@@ -4170,10 +4110,6 @@
     var yDiff;
     var axis;
 
-    // Cancel queued raf inspect and modify.
-    drag._moveInspect && rafLoop.remove(drag._moveInspect);
-    drag._moveModify && rafLoop.remove(drag._moveModify);
-
     // If item is not active, reset drag.
     if (!item._isActive) {
       drag.stop();
@@ -4208,20 +4144,16 @@
     }
 
     // Overlap handling.
-    drag._moveInspect = rafLoop.inspect(function () {
-      drag._moveInspect = null;
-      settings.dragSort && drag._checkSortOverlap();
-    });
+    settings.dragSort && drag._checkSortOverlap();
 
-    // Update element's translateX/Y values and emit dragMove event.
-    drag._moveModify = rafLoop.modify(function () {
-      drag._moveModify = null;
-      setStyles(element, {
-        transform: 'translateX(' + dragData.left + 'px) translateY(' + dragData.top + 'px)'
-      });
-      grid._emit(evDragMove, item, event);
+    // Update element's translateX/Y values.
+    setStyles(element, {
+      transform: 'translateX(' + dragData.left + 'px) translateY(' + dragData.top + 'px)'
     });
 
+    // Emit dragMove event.
+    grid._emit(evDragMove, item, event);
+
     return drag;
 
   };
@@ -4575,67 +4507,6 @@
 
   }
 
-  /**
-   * Returns a raf loop queue system that allows pushing callbacks to either
-   * the read queue or the write queue.
-   *
-   * @private
-   * @returns {Object}
-   */
-  function createRafLoop() {
-
-    var raf = (global.requestAnimationFrame
-      || global.webkitRequestAnimationFrame
-      || global.mozRequestAnimationFrame
-      || global.msRequestAnimationFrame
-      || function (cb) {
-        return global.setTimeout(cb, 16);
-      }
-    ).bind(global);
-    var reads = [];
-    var writes = [];
-
-    function addWrite(cb) {
-      writes.push(cb);
-      writes.length === 1 && !reads.length && raf(flush);
-      return cb;
-    }
-
-    function addRead(cb) {
-      reads.push(cb);
-      reads.length === 1 && !writes.length && raf(flush);
-      return cb;
-    }
-
-    function remove(cb) {
-      [writes, reads].forEach(function (queue) {
-        var index = queue.indexOf(cb);
-        index > -1 && queue.splice(index, 1);
-      });
-    }
-
-    function flush() {
-      if (reads.length || writes.length) {
-        var currentReads = reads.splice(0, reads.length);
-        var currentWrites = writes.splice(0, writes.length);
-        var i;
-        for (i = 0; i < currentReads.length; i++) {
-          currentReads[i]();
-        }
-        for (i = 0; i < currentWrites.length; i++) {
-          currentWrites[i]();
-        }
-      }
-    }
-
-    return {
-      modify: addWrite,
-      inspect: addRead,
-      remove: remove
-    };
-
-  }
-
   /**
    * Helpers - DOM utils
    * *******************
@@ -5605,7 +5476,7 @@
    */
 
   /*!
-   * muuriLayout v0.5.0-dev
+   * muuriLayout v0.4.1
    * Copyright (c) 2016 Niklas Rämö <[email protected]>
    * Released under the MIT license
    */

diff --git a/muuri.min.js b/muuri.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "muuri",
-  "version": "0.5.0-dev",
+  "version": "0.4.1",
   "description": "Responsive, sortable, filterable and draggable grid layouts.",
   "keywords": [
     "grid",

diff --git a/tests/grid-events/hideEnd.js b/tests/grid-events/hideEnd.js
@@ -20,7 +20,7 @@
     grid.hide(0, {layout: false, instant: true});
     grid.on('hideEnd', function (items) {
       assert.strictEqual(arguments.length, 1, 'callback: should have one argument');
-      assert.deepEqual(utils.sortItemsById(items), utils.sortItemsById(grid.getItems([1, 2])), 'callback: first argument should be an array of all the valid items that are were hidden');
+      assert.deepEqual(utils.sortItemsById(items), utils.sortItemsById(grid.getItems([0, 1, 2])), 'callback: first argument should be an array of all the items that were hidden');
       teardown();
     });
     grid.hide([0, 1, 2], {layout: false});

diff --git a/tests/grid-events/hideStart.js b/tests/grid-events/hideStart.js
@@ -18,7 +18,7 @@
     grid.hide(0, {layout: false, instant: true});
     grid.on('hideStart', function (items) {
       assert.strictEqual(arguments.length, 1, 'callback: should have one argument');
-      assert.deepEqual(utils.sortItemsById(items).length, utils.sortItemsById(grid.getItems([1, 2])).length, 'callback: first argument should be an array of all the valid items that are about to be hidden');
+      assert.deepEqual(utils.sortItemsById(items).length, utils.sortItemsById(grid.getItems([0, 1, 2])).length, 'callback: first argument should be an array of all the items that are about to be hidden');
     });
     grid.hide([0, 1, 2], {layout: false});
     teardown();

diff --git a/tests/grid-events/showEnd.js b/tests/grid-events/showEnd.js
@@ -19,7 +19,7 @@
 
     grid.on('showEnd', function (items) {
       assert.strictEqual(arguments.length, 1, 'callback: should have one argument');
-      assert.deepEqual(utils.sortItemsById(items), utils.sortItemsById(grid.getItems([0, 1])), 'callback: first argument should be an array of all the valid items that are were shown');
+      assert.deepEqual(utils.sortItemsById(items), utils.sortItemsById(grid.getItems([0, 1, 2])), 'callback: first argument should be an array of all the items that were shown');
       teardown();
     });
     grid.hide([0, 1], {layout: false, instant: true});

diff --git a/tests/grid-events/showStart.js b/tests/grid-events/showStart.js
@@ -17,7 +17,7 @@
 
     grid.on('showStart', function (items) {
       assert.strictEqual(arguments.length, 1, 'callback: should have one argument');
-      assert.deepEqual(utils.sortItemsById(items), utils.sortItemsById(grid.getItems([0, 1])), 'callback: first argument should be an array of all the valid items that are about to be shown');
+      assert.deepEqual(utils.sortItemsById(items), utils.sortItemsById(grid.getItems([0, 1, 2])), 'callback: first argument should be an array of all the items that are about to be shown');
     });
     grid.hide([0, 1], {layout: false, instant: true});
     grid.show([0, 1, 2], {layout: false});