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.
This commit is contained in:
Carey Metcalfe 2017-10-28 14:49:54 -04:00
parent 83de1d2f25
commit dbf5010745
3 changed files with 19 additions and 56 deletions

View file

@ -1,6 +1,7 @@
'use strict'; 'use strict';
angular.module('JamStash').directive('sortable', function () { angular.module('JamStash')
.directive('sortable', function () {
return { return {
link: function (scope, elm, attrs) { link: function (scope, elm, attrs) {
elm.sortable({ 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) { .directive('ngDownload', ['$compile', function ($compile) {
return { return {
restrict: 'E', restrict: 'E',
@ -92,16 +69,20 @@ angular.module('JamStash').directive('sortable', function () {
} }
}; };
}]) }])
.directive('stopEvent', function () { .directive('stopEvent', ['lodash', function (_) {
return { return {
restrict: 'A', restrict: 'A',
link: function (scope, element, attr) { link: function (scope, element, attr) {
element.bind(attr.stopEvent, function (e) { if (attr && attr.stopEvent) {
e.stopPropagation(); _.forEach(attr.stopEvent.split(','), function (eventName) {
}); element.bind(eventName, function (e) {
e.stopPropagation();
});
});
}
} }
}; };
}) }])
.directive('ngEnter', function () { .directive('ngEnter', function () {
return function (scope, element, attrs) { return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) { 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();
});
}
};
}); });

View file

@ -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}"> <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"> <div class="itemactions">
<a class="add" href="" title="Add To Queue" ng-click="addSongToQueue(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"></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"></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)"></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"></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 class="clear"></div>
</div> </div>
<div class="track floatleft" ng-bind-html="o.track"></div> <div class="track floatleft" ng-bind-html="o.track"></div>

View file

@ -46,14 +46,14 @@
href="" href=""
title="Remove Song" title="Remove Song"
ng-click="vm.removeSongFromQueue(song)" ng-click="vm.removeSongFromQueue(song)"
stop-event="click" stop-event="click,dblclick"
></a> ></a>
<a <a
href="" href=""
title="Star" title="Star"
ng-class="{'favorite': song.starred, 'rate': ! song.starred}" ng-class="{'favorite': song.starred, 'rate': ! song.starred}"
ng-click="vm.toggleStar(song)" ng-click="vm.toggleStar(song)"
stop-event="click" stop-event="click,dblclick"
></a> ></a>
<div class="clear"></div> <div class="clear"></div>
</div> </div>