From dbf5010745471937fc896ab30b9f80a7c7b0a674 Mon Sep 17 00:00:00 2001
From: Carey Metcalfe <carey@cmetcalfe.ca>
Date: Sat, 28 Oct 2017 14:49:54 -0400
Subject: [PATCH] Fix double click event propagation

This fixes an issue where attempting to rapidly remove songs from the
queue would cause them to be played.

- When clicking the add/play/remove/star buttons quickly, the double
  click event would propagate and start playing the song
- Fixed by extending the `stopEvent` directive to accept a
  comma-delimited list of events to stop. This allowed for using
  `stop-event="click,dblclick"` in the html to not propagate both click
  and double click events.
- Also removed some duplicate directives that seemed to have snuck in
  during a merge.
---
 app/common/directives.js | 61 ++++++++--------------------------------
 app/common/songs.html    | 10 +++----
 app/queue/queue.html     |  4 +--
 3 files changed, 19 insertions(+), 56 deletions(-)

diff --git a/app/common/directives.js b/app/common/directives.js
index 227312a..abe5200 100644
--- a/app/common/directives.js
+++ b/app/common/directives.js
@@ -1,6 +1,7 @@
 'use strict';
 
-angular.module('JamStash').directive('sortable', function () {
+angular.module('JamStash')
+.directive('sortable', function () {
     return {
         link: function (scope, elm, attrs) {
             elm.sortable({
@@ -46,30 +47,6 @@ angular.module('JamStash').directive('sortable', function () {
         }
     };
 }])
-.directive('stopEvent', function () {
-    return {
-        restrict: 'A',
-        link: function (scope, element, attr) {
-            element.bind(attr.stopEvent, function (e) {
-                e.stopPropagation();
-            });
-        }
-    };
-})
-.directive('ngEnter', function () {
-    return {
-        scope: { onEnter: '&' },
-        link: function (scope, element) {
-            console.log(scope);
-            element.bind("keydown keypress", function (event) {
-                if (event.which === 13) {
-                    scope.onEnter();
-                    scope.$apply();
-                }
-            });
-        }
-    };
-})
 .directive('ngDownload', ['$compile', function ($compile) {
     return {
         restrict: 'E',
@@ -92,16 +69,20 @@ angular.module('JamStash').directive('sortable', function () {
         }
     };
 }])
-.directive('stopEvent', function () {
+.directive('stopEvent', ['lodash', function (_) {
     return {
         restrict: 'A',
         link: function (scope, element, attr) {
-            element.bind(attr.stopEvent, function (e) {
-                e.stopPropagation();
-            });
+            if (attr && attr.stopEvent) {
+                _.forEach(attr.stopEvent.split(','), function (eventName) {
+                    element.bind(eventName, function (e) {
+                        e.stopPropagation();
+                    });
+                });
+            }
         }
     };
-})
+}])
 .directive('ngEnter', function () {
     return function (scope, element, attrs) {
         element.bind("keydown keypress", function (event) {
@@ -114,22 +95,4 @@ angular.module('JamStash').directive('sortable', function () {
             }
         });
     };
-})
-.directive("ngMsgs", function() {
-    /* Not Using */
-    return {
-        restrict: 'E',
-        transclude : false,
-        scope: {
-             msgs: "="
-          },
-        template: '<span id="msg_{{$index}}" class="message">{{ item }}</span>',
-        link: function (scope, elm, attrs) {
-            scope.$watch(scope.Messages, function () {
-                var content = $compile((template)(scope));
-                elm.append(content);
-                $(elm).parent().fadeIn();
-            });
-        }
-    };
-});
\ No newline at end of file
+});
diff --git a/app/common/songs.html b/app/common/songs.html
index ce7d216..0503db2 100644
--- a/app/common/songs.html
+++ b/app/common/songs.html
@@ -1,10 +1,10 @@
 <li class="row song" ng-repeat="o in song" ng-click="toggleSelection(o)" ng-dblclick="playFrom($index)" ng-class="{'selected': o.selected, 'playing': o.playing}">
     <div class="itemactions">
-        <a class="add" href="" title="Add To Queue" ng-click="addSongToQueue(o)" stop-event="click"></a>
-        <!--<a class="remove" href="" title="Remove Song" ng-click="removeSongFromQueue(o)" stop-event="click"></a>-->
-        <a class="play" href="" title="Play this song" ng-click="playSong(o)" stop-event="click"></a>
-        <!--<a class="download" href="" title="Download Song" ng-click="download(o.id)"></a>-->
-        <a href="" title="Star" ng-class="{'favorite': o.starred, 'rate': !o.starred}" ng-click="toggleStar(o)" stop-event="click"></a>
+        <a class="add" href="" title="Add To Queue" ng-click="addSongToQueue(o)" stop-event="click,dblclick"></a>
+        <!--<a class="remove" href="" title="Remove Song" ng-click="removeSongFromQueue(o)" stop-event="click,dblclick"></a>-->
+        <a class="play" href="" title="Play this song" ng-click="playSong(o)" stop-event="click,dblclick"></a>
+        <!--<a class="download" href="" title="Download Song" ng-click="download(o.id)" stop-event="click,dblclick"></a>-->
+        <a href="" title="Star" ng-class="{'favorite': o.starred, 'rate': !o.starred}" ng-click="toggleStar(o)" stop-event="click,dblclick"></a>
         <div class="clear"></div>
     </div>
     <div class="track floatleft" ng-bind-html="o.track"></div>
diff --git a/app/queue/queue.html b/app/queue/queue.html
index a59f498..8bc0e4d 100644
--- a/app/queue/queue.html
+++ b/app/queue/queue.html
@@ -46,14 +46,14 @@
                         href=""
                         title="Remove Song"
                         ng-click="vm.removeSongFromQueue(song)"
-                        stop-event="click"
+                        stop-event="click,dblclick"
                     ></a>
                     <a
                         href=""
                         title="Star"
                         ng-class="{'favorite': song.starred, 'rate': ! song.starred}"
                         ng-click="vm.toggleStar(song)"
-                        stop-event="click"
+                        stop-event="click,dblclick"
                     ></a>
                     <div class="clear"></div>
                 </div>