ember-sortable - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

addon/components/sortable-group.js

 import Ember from 'ember';
 import layout from '../templates/components/sortable-group';
 import computed from 'ember-new-computed';
-const { $, A, Component, get, set, run } = Ember;
+const { A, Component, get, set, run } = Ember;
 const a = A;
@@ -29,33 +29,5 @@ const NO_MODEL = {};
   */
-  items: computed({
-    get() {
-      return a(); 
-    },
-  }), 
+  items: computed(() => a()),
 
   /**
-    @method _getFirstItemPosition
-    @private
-  */
-  _getFirstItemPosition: function() {
-    let element = this.element;
-    let stooge = $('<span style="position: absolute" />');
-    let prependedStoogePosition = stooge.prependTo(element).position();
-    let result;
-
-    let direction = this.get('direction');
-
-    if (direction === 'x') {
-      result = prependedStoogePosition.left;
-    }
-    if (direction === 'y') {
-      result = prependedStoogePosition.top;
-    }
-
-    stooge.remove();
-
-    return result;
-  },
-
-  /**
     Position for the first item.
@@ -65,7 +37,6 @@ @property itemPosition
   */
-  itemPosition: computed({
-    get() {
-      return this._getFirstItemPosition();
-    }
-  }).volatile().readOnly(),
+  itemPosition: computed(function() {
+    let direction = this.get('direction');
+    return this.get(`sortedItems.firstObject.${direction}`);
+  }).volatile(),
 
@@ -76,8 +47,8 @@ /**
   */
+  sortedItems: computed(function() {
+    let items = a(this.get('items'));
+    let direction = this.get('direction');
 
-  sortedItems: computed('items.@each.y', 'items.@each.x', 'direction', {
-    get() {
-      return a(this.get('items')).sortBy(this.get('direction'));
-    }
-  }).readOnly(),
+    return items.sortBy(direction);
+  }).volatile(),
 
@@ -134,6 +105,6 @@ /**
       if (direction === 'x') {
-       dimension = 'width';
+        dimension = 'width';
       }
       if (direction === 'y') {
-       dimension = 'height';
+        dimension = 'height';
       }
@@ -140,0 +111,0 @@

addon/mixins/sortable-item.js

@@ -55,3 +55,3 @@ import Ember from 'ember';
   */
-  isBusy: Ember.computed.or('isDragging', 'isDropping'),
+  isBusy: computed.or('isDragging', 'isDropping'),
 
@@ -72,10 +72,8 @@ /**
   */
-  isAnimated: computed({
-    get() {
-      let el = this.$();
-      let property = el.css('transition-property');
+  isAnimated: computed(function() {
+    let el = this.$();
+    let property = el.css('transition-property');
 
-      return /all|transform/.test(property);
-    }
-  }).volatile().readOnly(),
+    return /all|transform/.test(property);
+  }).volatile(),
 
@@ -87,42 +85,19 @@ /**
   */
-  transitionDuration: computed({
-    get() {
-      let el = this.$();
-      let rule = el.css('transition-duration');
-      let match = rule.match(/([\d\.]+)([ms]*)/);
+  transitionDuration: computed(function() {
+    let el = this.$();
+    let rule = el.css('transition-duration');
+    let match = rule.match(/([\d\.]+)([ms]*)/);
 
-      if (match) {
-        let value = parseFloat(match[1]);
-        let unit = match[2];
+    if (match) {
+      let value = parseFloat(match[1]);
+      let unit = match[2];
 
-        if (unit === 's') {
-          value = value * 1000;
-        }
-
-        return value;
+      if (unit === 's') {
+        value = value * 1000;
       }
 
-      return 0;
+      return value;
     }
-  }).volatile().readOnly(),
 
-  /**
-    Vertical position of the item relative to its offset parent.
-    @property y
-    @type Number
-  */
-  y: computed({
-    get() {
-      if (this._y === undefined) {
-        this._y = this.element.offsetTop;
-      }
-
-      return this._y;
-    },
-    set(key, value) {
-      if (value !== this._y) {
-        this._y = value;
-        this._scheduleApplyPosition();
-      }
-    }
+    return 0;
   }).volatile(),
@@ -138,3 +113,4 @@
       if (this._x === undefined) {
-        this._x = this.element.scrollLeft + this.element.offsetLeft - parseFloat(this.$().css('margin-left'));
+        let marginLeft = parseFloat(this.$().css('margin-left'));
+        this._x = this.element.scrollLeft + this.element.offsetLeft - marginLeft;
       }
@@ -153,13 +129,21 @@
   /**
-    Height of the item including margins.
-    @property height
+    Vertical position of the item relative to its offset parent.
+    @property y
     @type Number
   */
-  height: computed({
+  y: computed({
     get() {
-      let height = this.$().outerHeight();
-      let marginBottom = parseFloat(this.$().css('margin-bottom'));
-      return height + marginBottom;
+      if (this._y === undefined) {
+        this._y = this.element.offsetTop;
+      }
+
+      return this._y;
+    },
+    set(key, value) {
+      if (value !== this._y) {
+        this._y = value;
+        this._scheduleApplyPosition();
+      }
     }
-  }).volatile().readOnly(),
+  }).volatile(),
 
@@ -171,10 +155,29 @@ /**
   */
-  width: computed({
-    get() {
-      let width = this.$().outerWidth(true);
-      return width;
-    }
-  }).volatile().readOnly(),
+  width: computed(function() {
+    let el = this.$();
+    let width = el.outerWidth(true);
 
+    width += getBorderSpacing(el).horizontal;
+
+    return width;
+  }).volatile(),
+
   /**
+    Height of the item including margins.
+    @property height
+    @type Number
+  */
+  height: computed(function() {
+    let el = this.$();
+    let height = el.outerHeight();
+
+    let marginBottom = parseFloat(el.css('margin-bottom'));
+    height += marginBottom;
+
+    height += getBorderSpacing(el).vertical;
+
+    return height;
+  }).volatile(),
+
+  /**
     @method didInsertElement
@@ -228,2 +231,3 @@ */
     delete this._x;
+
     el.css({ transform: '' });
@@ -256,13 +260,38 @@ },
 
-    let drag;
-
     if (this.get('isBusy')) { return; }
 
+    let drag = this._makeDragHandler(event);
+
+    let drop = () => {
+      $(window)
+        .off('mousemove touchmove', drag)
+        .off('mouseup touchend', drop);
+
+      this._drop();
+    };
+
+    $(window)
+      .on('mousemove touchmove', drag)
+      .on('mouseup touchend', drop);
+
+    this._tellGroup('prepare');
+    this.set('isDragging', true);
+  },
+
+  /**
+    @method _makeDragHandler
+    @param {Event} startEvent
+    @return {Function}
+    @private
+  */
+  _makeDragHandler(startEvent) {
     const groupDirection = this.get('group.direction');
+    let dragOrigin;
+    let elementOrigin;
 
     if (groupDirection === 'x') {
-      let dragOrigin = getX(event);
-      let elementOrigin = this.get('x');
+      dragOrigin = getX(startEvent);
+      elementOrigin = this.get('x');
 
-      drag = event => {
+      return event => {
         let dx = getX(event) - dragOrigin;
@@ -274,7 +303,8 @@ let x = elementOrigin + dx;
     }
+
     if (groupDirection === 'y') {
-      let dragOrigin = getY(event);
-      let elementOrigin = this.get('y');
+      dragOrigin = getY(startEvent);
+      elementOrigin = this.get('y');
 
-      drag  = event => {
+      return event => {
         let dy = getY(event) - dragOrigin;
@@ -286,17 +316,2 @@ let y = elementOrigin + dy;
     }
-
-    let drop = () => {
-      $(window)
-        .off('mousemove touchmove', drag)
-        .off('mouseup touchend', drop);
-
-      this._drop();
-    };
-
-    $(window)
-      .on('mousemove touchmove', drag)
-      .on('mouseup touchend', drop);
-
-    this._tellGroup('prepare');
-    this.set('isDragging', true);
   },
@@ -359,3 +374,3 @@
 
-    if(groupDirection === 'x') {
+    if (groupDirection === 'x') {
       this.set('x', dimension);
@@ -433,2 +448,3 @@ }
 }
+
 /**
@@ -451,1 +467,21 @@ Gets the x offset for a given event.
 }
+
+/**
+  Gets a numeric border-spacing values for a given element.
+
+  @method getBorderSpacing
+  @param {Element} element
+  @return {Object}
+  @private
+*/
+function getBorderSpacing(el) {
+  el = $(el);
+
+  let css = el.css('border-spacing'); // '0px 0px'
+  let [horizontal, vertical] = css.split(' ');
+
+  return {
+    horizontal: parseFloat(horizontal),
+    vertical: parseFloat(vertical)
+  };
+}

CHANGELOG.md

 # ember-sortable changelog
 
+### 1.4.0 (2015-08-03)
+
+- [#45](https://github.com/jgwhite/ember-sortable/pull/44) Add support for tables [@jgwhite](https://github.com/jgwhite)
+- [#44](https://github.com/jgwhite/ember-sortable/pull/44) Refactor and cleanup [@jgwhite](https://github.com/jgwhite)
+
 ### 1.3.1 (2015-07-27)
@@ -4,0 +9,0 @@

package.json

 {
   "name": "ember-sortable",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Sortable UI primitives for Ember.",
@@ -22,3 +22,3 @@ "directories": {
     "broccoli-asset-rev": "^2.0.2",
-    "ember-cli": "1.13.1",
+    "ember-cli": "1.13.6",
     "ember-cli-app-version": "0.4.0",
@@ -29,3 +29,3 @@ "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-inject-live-reload": "^1.3.0",
-    "ember-cli-qunit": "0.3.15",
+    "ember-cli-qunit": "0.3.18",
     "ember-cli-release": "0.2.3",
@@ -32,0 +32,0 @@ "ember-cli-uglify": "^1.0.1",

README.md

@@ -107,3 +107,3 @@ # Ember-sortable
 
-`sortable-group` yields itself to the block so that it may be assigned explicitly to each item’s `group` property. While it would be technically possible to automatically discover the parent group, we feel establishing this relationship explicitly is clearer. Feedback welcome.
+`sortable-group` yields itself to the block so that it may be assigned explicitly to each item’s `group` property.
 
@@ -110,0 +110,0 @@ Each item takes a `model` property. This should be fairly self-explanatory but it’s important to note that it doesn’t do anything with this object besides keeping a reference for later use in `onChange`.

No alert changes

Improved metrics

Total package byte prevSize

545651

increased by0.04%

No dependency changes