Work on audio recorder

Issue #84

src/main.js

@@ -22,7 +22,7 @@ Vue.config.productionTip = false
 
 Vue.use(VueResize);
 Vue.use(VEmojiPicker);
-Vue.use(matrix, {store: store});
+Vue.use(matrix, { store: store });
 Vue.use(VueClipboard);
 
 // Add bubble functionality to custom events.
@@ -45,6 +45,106 @@ Vue.directive('blur', {
   }
 });
 
+/**
+ * Handle long taps. Call with the timeout as argument (default 500ms) and the value
+ * can be either one function called on long tap or two functions, the
+ * first called on "short tap" and the other on "long tap".
+ * 
+ * Like this: v-linkTap:500="[tapped,longTapped]"
+ */
+Vue.directive('longTap', {
+  bind: function (el, binding, ignoredvnode) {
+    el.longTapTimeout = parseInt(binding.arg || "500");
+    el.longTapCallbacks = binding.value;
+    for (var i = el.longTapCallbacks.length; i < 2; i++) {
+      el.longTapCallbacks.splice(0, 0, null);
+    }
+
+    const touchX = function (event) {
+      if (event.type.indexOf("mouse") !== -1) {
+        return event.clientX;
+      }
+      return event.touches[0].clientX;
+    };
+    const touchY = function (event) {
+      if (event.type.indexOf("mouse") !== -1) {
+        return event.clientY;
+      }
+      return event.touches[0].clientY;
+    };
+
+    /**
+      * Triggered when our "long tap" timer hits.
+    */
+    const touchTimerElapsed = function () {
+      el.longTapHandled = true;
+      el.longTapCallbacks[1] && el.longTapCallbacks[1].call();
+      el.longTapTimer = null;
+      el.classList.remove("waiting-for-long-tap");
+    };
+
+    const touchStart = function (e) {
+        el.longTapHandled = false;
+        el.longTapStartX = touchX(e);
+        el.longTapStartY = touchY(e);
+        el.longTapTimer = setTimeout(touchTimerElapsed, el.longTapTimeout);
+        el.classList.add("waiting-for-long-tap");
+        e.preventDefault();
+    };
+
+    const touchCancel = function () {
+      el.longTapHandled = true;
+      el.longTapTimer && clearTimeout(el.longTapTimer);
+      el.longTapTimer = null;
+      el.classList.remove("waiting-for-long-tap");
+    };
+
+    const touchEnd = function () {
+      el.longTapTimer && clearTimeout(el.longTapTimer);
+      el.longTapTimer = null;
+      if (!el.longTapHandled) {
+        // Not canceled or long tapped. Just a single tap. Do we have a handler?
+        el.longTapCallbacks[0] && el.longTapCallbacks[0].call();
+      }
+      el.classList.remove("waiting-for-long-tap");
+    };
+
+    const touchMove = function (e) {
+      el.longTapCurrentX = touchX(e);
+      el.longTapCurrentY = touchY(e);
+      var tapTolerance = 4;
+      var touchMoved =
+        Math.abs(el.longTapStartX - el.longTapCurrentX) > tapTolerance ||
+        Math.abs(el.longTapStartY - el.longTapCurrentY) > tapTolerance;
+      if (touchMoved) {
+        touchCancel();
+      }
+    };
+
+    el.longTapTouchStart = touchStart;
+    el.longTapTouchEnd = touchEnd;
+    el.longTapTouchCancel = touchCancel;
+    el.longTapTouchMove = touchMove;
+    el.addEventListener("touchstart", touchStart);
+    el.addEventListener("touchend", touchEnd);
+    el.addEventListener("touchcancel", touchCancel);
+    el.addEventListener("touchmove", touchMove);
+    el.addEventListener("mousedown", touchStart);
+    el.addEventListener("mouseup", touchEnd);
+    el.addEventListener("mousemove", touchMove);
+  },
+  unbind: function (el) {
+    el.longTapTimer && clearTimeout(el.longTapTimer);
+    el.removeEventListener("touchstart", el.longTapTouchStart);
+    el.removeEventListener("touchend", el.longTapTouchEnd);
+    el.removeEventListener("touchcancel", el.longTapTouchCancel);
+    el.removeEventListener("touchmove", el.longTapTouchMove);
+    el.removeEventListener("mousedown", el.longTapTouchStart);
+    el.removeEventListener("mouseup", el.longTapTouchEnd);
+    el.removeEventListener("mousemove", el.longTapTouchMove);
+  },
+});
+
 Vue.use(navigation, router);
 
 new Vue({