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';
|
'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) {
|
||||||
|
_.forEach(attr.stopEvent.split(','), function (eventName) {
|
||||||
|
element.bind(eventName, function (e) {
|
||||||
e.stopPropagation();
|
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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
});
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue