CC-2301 : waveform editors are now in their own separate pop up. controls working for fades/cues. should add more specific states for fade editor.

This commit is contained in:
Naomi 2013-04-16 17:24:30 -04:00
parent 13c8e5f146
commit 0385285741
3 changed files with 58 additions and 49 deletions

View file

@ -57,6 +57,14 @@
<script id="tmpl-pl-fades" type="text/template">
<div class="waveform-fades">
<div class="playlist-tracks"></div>
<div>
<span class="btn_play ui-state-default">Play</span>
<span class="btn_stop ui-state-default">Stop</span>
</div>
<div>
<span class="btn_select ui-state-default" data-state="select">Select</span>
<span class="btn_shift ui-state-default" data-state="shift">Shift</span>
</div>
</div>
</script>
</body>

View file

@ -1064,10 +1064,6 @@ var AIRTIME = (function(AIRTIME){
mod.showFadesWaveform = function(e) {
var $el = $(e.target),
$parent = $el.parent(),
trackEditor = new TrackEditor(),
audioControls = new AudioControls(),
trackElem,
config,
$html = $($("#tmpl-pl-fades").html()),
tracks = [
{
@ -1078,8 +1074,6 @@ var AIRTIME = (function(AIRTIME){
}
];
//$el.replaceWith(html);
$html.dialog({
modal: true,
title: "Fade Editor",
@ -1090,10 +1084,10 @@ var AIRTIME = (function(AIRTIME){
buttons: [
//{text: "Submit", click: function() {doSomething()}},
{text: "Cancel", click: function() {$(this).dialog("close");}}
]
});
],
open: function (event, ui) {
config = new Config({
var config = new Config({
resolution: 15000,
state: "shift",
mono: true,
@ -1105,23 +1099,19 @@ var AIRTIME = (function(AIRTIME){
var playlistEditor = new PlaylistEditor();
playlistEditor.setConfig(config);
playlistEditor.init(tracks);
}
});
};
mod.showCuesWaveform = function(e) {
var $el = $(e.target),
$parent = $el.parent(),
uri = $parent.data("uri"),
trackEditor = new TrackEditor(),
audioControls = new AudioControls(),
trackElem,
config,
$html = $($("#tmpl-pl-cues").html()),
tracks = [{
src: uri
}];
//$el.replaceWith(html);
$html.dialog({
modal: true,
title: "Cue Editor",
@ -1132,10 +1122,10 @@ var AIRTIME = (function(AIRTIME){
buttons: [
//{text: "Submit", click: function() {doSomething()}},
{text: "Cancel", click: function() {$(this).dialog("close");}}
]
});
],
open: function (event, ui) {
config = new Config({
var config = new Config({
resolution: 15000,
mono: true,
waveHeight: 80,
@ -1146,6 +1136,8 @@ var AIRTIME = (function(AIRTIME){
var playlistEditor = new PlaylistEditor();
playlistEditor.setConfig(config);
playlistEditor.init(tracks);
}
});
};
mod.init = function() {

View file

@ -202,10 +202,10 @@ AudioControls.prototype.init = function(config) {
container = this.config.getContainer();
state = this.config.getState();
tmpBtn = document.getElementById("btn_"+state);
tmpBtn = document.getElementsByClassName("btn_"+state)[0];
if (tmpBtn) {
tmpBtn.className = this.classes["btn-state-active"];
this.activateButton(tmpBtn);
}
for (className in events) {
@ -388,18 +388,27 @@ AudioControls.prototype.stopAudio = function() {
this.fire('stopaudio', this);
};
AudioControls.prototype.setButtonState = function(el, classname) {
el && el.className = this.classes[classname];
AudioControls.prototype.activateButton = function(el) {
if (el) {
el.classList.remove(this.classes["disabled"]);
el.classList.add(this.classes["active"]);
}
};
AudioControls.prototype.disableButton = function(el) {
if (el) {
el.classList.add(this.classes["disabled"]);
el.classList.remove(this.classes["active"]);
}
};
AudioControls.prototype.changeState = function(e) {
var el = e.currentTarget,
prevEl = el.parentElement.getElementsByClassName('active')[0],
state = el.dataset.state;
this.el.getElementsByClassName('active')[0].className = classes["btn-state-default"];
this.setButtonState("btn-state-default");
this.setButtonState(el, "btn-state-active");
this.disableButton(prevEl);
this.activateButton(el);
this.config.setState(state);
this.fire('changestate', this);