Fixed cascading css class toggle on play buttons in mix list

This commit is contained in:
Fergal Moran
2014-01-28 20:23:21 +00:00
parent 2006f09299
commit 8310daa56f
3 changed files with 31 additions and 22 deletions

View File

@@ -79,23 +79,26 @@ define ['underscore', 'moment', 'app', 'vent', 'app.lib/dssView', 'utils',
@_setupStateUI()
_setupStateUI: ->
@ui.playButton.removeClass("play").removeClass("resume").removeClass("pause")
@ui.playButtonIcon.removeClass("icon-play").removeClass("icon-pause")
if @mixState is 1 #playing
@ui.playButton.addClass("pause")
@ui.playButtonIcon.removeClass("icon-play").addClass("icon-pause")
else if @mixState is 2 #paused
@ui.playButton.addClass("resume")
@ui.playButtonIcon.removeClass("icon-pause").addClass("icon-play")
if @app.audioController.isPlayingId @model.id
@ui.playButton.removeClass("play").removeClass("resume").removeClass("pause")
@ui.playButtonIcon.removeClass("icon-play").removeClass("icon-pause")
if @mixState is 1 #playing
@ui.playButton.addClass("pause")
@ui.playButtonIcon.removeClass("icon-play").addClass("icon-pause")
else if @mixState is 2 #paused
@ui.playButton.addClass("resume")
@ui.playButtonIcon.removeClass("icon-pause").addClass("icon-play")
mixPlay: (button) ->
vent.trigger('mix:init', @model, $(@el))
mixPause: ->
vent.trigger('mix:pause', @model, $(@el))
if @app.audioController.isPlayingId @model.id
vent.trigger('mix:pause', @model, $(@el))
mixResume: ->
vent.trigger('mix:resume', @model, $(@el))
if @app.audioController.isPlayingId @model.id
vent.trigger('mix:resume', @model, $(@el))
mixFavourite: ->
console.log("MixItemView: favouriteMix")

View File

@@ -91,14 +91,16 @@
};
MixItemView.prototype._setupStateUI = function() {
this.ui.playButton.removeClass("play").removeClass("resume").removeClass("pause");
this.ui.playButtonIcon.removeClass("icon-play").removeClass("icon-pause");
if (this.mixState === 1) {
this.ui.playButton.addClass("pause");
return this.ui.playButtonIcon.removeClass("icon-play").addClass("icon-pause");
} else if (this.mixState === 2) {
this.ui.playButton.addClass("resume");
return this.ui.playButtonIcon.removeClass("icon-pause").addClass("icon-play");
if (this.app.audioController.isPlayingId(this.model.id)) {
this.ui.playButton.removeClass("play").removeClass("resume").removeClass("pause");
this.ui.playButtonIcon.removeClass("icon-play").removeClass("icon-pause");
if (this.mixState === 1) {
this.ui.playButton.addClass("pause");
return this.ui.playButtonIcon.removeClass("icon-play").addClass("icon-pause");
} else if (this.mixState === 2) {
this.ui.playButton.addClass("resume");
return this.ui.playButtonIcon.removeClass("icon-pause").addClass("icon-play");
}
}
};
@@ -107,11 +109,15 @@
};
MixItemView.prototype.mixPause = function() {
return vent.trigger('mix:pause', this.model, $(this.el));
if (this.app.audioController.isPlayingId(this.model.id)) {
return vent.trigger('mix:pause', this.model, $(this.el));
}
};
MixItemView.prototype.mixResume = function() {
return vent.trigger('mix:resume', this.model, $(this.el));
if (this.app.audioController.isPlayingId(this.model.id)) {
return vent.trigger('mix:resume', this.model, $(this.el));
}
};
MixItemView.prototype.mixFavourite = function() {

View File

@@ -78,8 +78,8 @@
<div class="row">
<div class="player-footer">
<div class="play-button footer-button">
<a class="mix-state-toggle play blue" data-bypass="true" style="">
<i class="icon-play bigger-180"></i>
<a id="play-button-<%= id %>" class="mix-state-toggle play blue" data-bypass="true" style="">
<i id="play-state-icon-<%= id %>" class="icon-play bigger-180"></i>
</a>
</div>
{% if user.is_authenticated %}