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:
parent
83de1d2f25
commit
dbf5010745
3 changed files with 19 additions and 56 deletions
|
@ -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();
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue