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';
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();
});
}
};
});

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}">
<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>

View file

@ -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>