swaping to use hammerjs to do the drag/drop implementation

adopted-ember-addons · Jan 9, 2017 · 7b9cd7c · 7b9cd7c
1 parent f6760ca
commit 7b9cd7c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/addon/components/paper-slider.js b/addon/components/paper-slider.js
@@ -5,7 +5,8 @@ import Ember from 'ember';
 import layout from '../templates/components/paper-slider';
 import FocusableMixin from 'ember-paper/mixins/focusable-mixin';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
-const { Component, computed, inject, String: { htmlSafe } } = Ember;
+const { Component, computed, inject, run, String: { htmlSafe } } = Ember;
+/* global Hammer */
 
 /**
  * @class PaperSlider
@@ -29,6 +30,24 @@ export default Component.extend(FocusableMixin, ColorMixin, {
   step: 1,
   tabindex: 0,
 
+  didInsertElement() {
+    this._super(...arguments);
+
+    this._setupSlider();
+  },
+
+  _setupSlider() {
+    let thumbContainer = this.$('.md-thumb-container').get(0);
+    let sliderHammer = new Hammer(thumbContainer);
+    this._thumbContainerHammer = sliderHammer;
+
+    // Enable dragging the slider
+    sliderHammer.get('pan').set({ threshold: 1 });
+    sliderHammer.on('panstart', run.bind(this, this._dragStart))
+      .on('panmove', run.bind(this, this._drag))
+      .on('panend', run.bind(this, this._dragEnd));
+  },
+
   trackContainer: computed(function() {
     return this.$('.md-track-container');
   }),
@@ -85,22 +104,17 @@ export default Component.extend(FocusableMixin, ColorMixin, {
 
   setValueFromEvent(event) {
     // let exactVal = this.percentToValue(this.positionToPercent(event.deltaX || event.clientX));
-    let exactVal = this.percentToValue(this.positionToPercent(event.clientX || event.originalEvent.touches[0].clientX));
+    let exactVal = this.percentToValue(this.positionToPercent(event.clientX || event.srcEvent.clientX));
     let closestVal = this.minMaxValidator(this.stepValidator(exactVal));
 
     this.set('value', closestVal);
   },
 
-  dragStart(event) {
+  _dragStart(event) {
     if (this.get('disabled')) {
       return;
     }
 
-    let dragIcon = document.createElement('img');
-    dragIcon.setAttribute('style', 'width:1px;height:1px;border:none;display:block');
-    dragIcon.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
-    event.dataTransfer.setDragImage(dragIcon, 0, 0);
-
     this.set('active', true);
     this.set('dragging', true);
     this.$().focus();
@@ -110,20 +124,18 @@ export default Component.extend(FocusableMixin, ColorMixin, {
     this.setValueFromEvent(event);
   },
 
-  dragEnd(event) {
+  _dragEnd() {
     if (this.get('disabled')) {
       return;
     }
 
-    event.stopPropagation();
-
     this.beginPropertyChanges();
     this.set('active', false);
     this.set('dragging', false);
     this.endPropertyChanges();
   },
 
-  drag(event) {
+  _drag(event) {
     if (this.get('disabled') || !this.get('dragging')) {
       return;
     }

diff --git a/addon/templates/components/paper-slider.hbs b/addon/templates/components/paper-slider.hbs
@@ -1,4 +1,4 @@
-<div class="md-slider-wrapper" draggable={{enabled}}>
+<div class="md-slider-wrapper">
     <div class="md-track-container">
         <div class="md-track"></div>
         <div class="md-track md-track-fill" style={{activeTrackStyle}}></div>