From 956bcccd2410444a17909b6bc2a901d366a2e4fe Mon Sep 17 00:00:00 2001 From: Naomi Date: Tue, 23 Apr 2013 16:36:35 -0400 Subject: [PATCH] CC-2301 : creating different states for the fade editor: cursor, fadein, fadeout. --- .../application/layouts/scripts/layout.phtml | 18 ++- airtime_mvc/public/css/playlist_builder.css | 6 + airtime_mvc/public/js/airtime/library/spl.js | 14 ++- .../public/js/waveformplaylist/controls.js | 29 ++++- .../public/js/waveformplaylist/track.js | 116 ++++++++++++++++-- 5 files changed, 164 insertions(+), 19 deletions(-) diff --git a/airtime_mvc/application/layouts/scripts/layout.phtml b/airtime_mvc/application/layouts/scripts/layout.phtml index 930218b91..1cb0da978 100644 --- a/airtime_mvc/application/layouts/scripts/layout.phtml +++ b/airtime_mvc/application/layouts/scripts/layout.phtml @@ -67,9 +67,25 @@ Stop
- Select + Cursor + Fade In + Fade Out Shift
+
+
+ Linear + Logarithmic + S-Curve + Exponential +
+
+ Linear + Logarithmic + S-Curve + Exponential +
+
diff --git a/airtime_mvc/public/css/playlist_builder.css b/airtime_mvc/public/css/playlist_builder.css index 19c06b848..7d828bd31 100644 --- a/airtime_mvc/public/css/playlist_builder.css +++ b/airtime_mvc/public/css/playlist_builder.css @@ -603,4 +603,10 @@ li.spl_empty { .playlist-tracks { overflow-x: auto; overflow-y: hidden; +} + +.playlist-fade { + position: absolute; + background-color: rgba(0,0,0,0.1); + z-index: 1000; } \ No newline at end of file diff --git a/airtime_mvc/public/js/airtime/library/spl.js b/airtime_mvc/public/js/airtime/library/spl.js index 40be88922..2aecd99a3 100644 --- a/airtime_mvc/public/js/airtime/library/spl.js +++ b/airtime_mvc/public/js/airtime/library/spl.js @@ -1120,15 +1120,16 @@ var AIRTIME = (function(AIRTIME){ { src: $parent.data("fadein") } - ]; + ], + dim = AIRTIME.utilities.findViewportDimensions(); $html.dialog({ modal: true, title: "Fade Editor", show: 'clip', hide: 'clip', - width: 900, - height: 300, + width: dim.width - 100, + height: dim.height - 100, buttons: [ //{text: "Submit", click: function() {doSomething()}}, {text: "Cancel", click: function() {$(this).dialog("close");}} @@ -1163,7 +1164,8 @@ var AIRTIME = (function(AIRTIME){ src: uri }], cueIn = $li.find('.spl_cue_in').data("cueIn"), - cueOut = $li.find('.spl_cue_out').data("cueOut"); + cueOut = $li.find('.spl_cue_out').data("cueOut"), + dim = AIRTIME.utilities.findViewportDimensions(); $html.find('.editor-cue-in').val(cueIn); $html.find('.editor-cue-out').val(cueOut); @@ -1185,8 +1187,8 @@ var AIRTIME = (function(AIRTIME){ title: "Cue Editor", show: 'clip', hide: 'clip', - width: 900, - height: 300, + width: dim.width - 100, + height: dim.height - 100, buttons: [ {text: "Save", click: function() { var cueIn = $html.find('.editor-cue-in').val(), diff --git a/airtime_mvc/public/js/waveformplaylist/controls.js b/airtime_mvc/public/js/waveformplaylist/controls.js index 097f2fba3..d83af02f0 100644 --- a/airtime_mvc/public/js/waveformplaylist/controls.js +++ b/airtime_mvc/public/js/waveformplaylist/controls.js @@ -28,6 +28,10 @@ AudioControls.prototype.events = { click: "stopAudio" }, + "btn_cursor": { + click: "changeState" + }, + "btn_select": { click: "changeState" }, @@ -36,6 +40,15 @@ AudioControls.prototype.events = { click: "changeState" }, + "btn_fadein": { + click: "changeState" + }, + + "btn_fadeout": { + click: "changeState" + }, + + "btns_fade": { click: "createFade" }, @@ -400,15 +413,25 @@ AudioControls.prototype.stopAudio = function() { AudioControls.prototype.activateButton = function(el) { if (el) { - el.classList.remove(this.classes["disabled"]); el.classList.add(this.classes["active"]); } }; +AudioControls.prototype.deactivateButton = function(el) { + if (el) { + el.classList.remove(this.classes["active"]); + } +}; + +AudioControls.prototype.enableButton = function(el) { + if (el) { + el.classList.remove(this.classes["disabled"]); + } +}; + AudioControls.prototype.disableButton = function(el) { if (el) { el.classList.add(this.classes["disabled"]); - el.classList.remove(this.classes["active"]); } }; @@ -417,7 +440,7 @@ AudioControls.prototype.changeState = function(e) { prevEl = el.parentElement.getElementsByClassName('active')[0], state = el.dataset.state; - this.disableButton(prevEl); + this.deactivateButton(prevEl); this.activateButton(el); this.config.setState(state); diff --git a/airtime_mvc/public/js/waveformplaylist/track.js b/airtime_mvc/public/js/waveformplaylist/track.js index b583ae4cb..a3123d0d7 100644 --- a/airtime_mvc/public/js/waveformplaylist/track.js +++ b/airtime_mvc/public/js/waveformplaylist/track.js @@ -5,6 +5,16 @@ var TrackEditor = function() { }; TrackEditor.prototype.states = { + cursor: { + events: { + mousedown: "selectCursorPos" + }, + + classes: [ + "state-select" + ] + }, + select: { events: { mousedown: "selectStart" @@ -14,6 +24,26 @@ TrackEditor.prototype.states = { "state-select" ] }, + + fadein: { + events: { + mousedown: "selectFadeIn" + }, + + classes: [ + "state-select" + ] + }, + + fadeout: { + events: { + mousedown: "selectFadeOut" + }, + + classes: [ + "state-select" + ] + }, shift: { events: { @@ -218,7 +248,7 @@ TrackEditor.prototype.timeShift = function(e) { scroll = this.config.getTrackScroll(), scrollX = scroll.left; - origX = editor.leftOffset/res; + origX = editor.leftOffset / res; //dynamically put an event on the element. el.onmousemove = function(e) { @@ -232,7 +262,7 @@ TrackEditor.prototype.timeShift = function(e) { el.onmouseup = function() { var delta; - el.onmousemove = document.body.onmouseup = null; + el.onmousemove = el.onmouseup = null; editor.leftOffset = editor.pixelsToSamples(updatedX); delta = editor.pixelsToSeconds(diffX); @@ -299,7 +329,10 @@ TrackEditor.prototype.setSelectedArea = function(start, end, shiftKey) { var left, right, currentStart, - currentEnd; + currentEnd, + sampLeft, + sampRight, + buffer = this.getBuffer(); //extending selected area since shift is pressed. if (shiftKey && (end - start === 0) && (this.prevSelectedArea !== undefined)) { @@ -332,8 +365,11 @@ TrackEditor.prototype.setSelectedArea = function(start, end, shiftKey) { right = end; } + sampLeft = left === undefined ? 0 : this.pixelsToSamples(left); + sampRight = right === undefined ? buffer.length - 1 : this.pixelsToSamples(right); + this.prevSelectedArea = this.selectedArea; - this.selectedArea = this.adjustSelectedArea(this.pixelsToSamples(left), this.pixelsToSamples(right)); + this.selectedArea = this.adjustSelectedArea(sampLeft, sampRight); }; TrackEditor.prototype.activateAudioSelection = function() { @@ -398,9 +434,7 @@ TrackEditor.prototype.selectStart = function(e) { }; el.onmouseup = function(e) { var endX = e.layerX || e.offsetX, - //endX = scrollX + (e.layerX || e.offsetX), minX, maxX, - cursorPos, startTime, endTime; minX = Math.min(startX, endX); @@ -411,7 +445,7 @@ TrackEditor.prototype.selectStart = function(e) { minX = editor.samplesToPixels(offset + editor.selectedArea.start); maxX = editor.samplesToPixels(offset + editor.selectedArea.end); - el.onmousemove = document.body.onmouseup = null; + el.onmousemove = el.onmouseup = null; //if more than one pixel is selected, listen to possible fade events. if (Math.abs(minX - maxX)) { @@ -421,15 +455,79 @@ TrackEditor.prototype.selectStart = function(e) { editor.deactivateAudioSelection(); } - cursorPos = startTime = editor.samplesToSeconds(offset + editor.selectedArea.start); + startTime = editor.samplesToSeconds(offset + editor.selectedArea.start); endTime = editor.samplesToSeconds(offset + editor.selectedArea.end); editor.updateEditor(-1, undefined, undefined, true); - editor.config.setCursorPos(cursorPos); + editor.config.setCursorPos(startTime); editor.notifySelectUpdate(startTime, endTime); }; }; +TrackEditor.prototype.selectCursorPos = function(e) { + var editor = this, + startX = e.layerX || e.offsetX, //relative to e.target (want the canvas). + offset = this.leftOffset, + startTime, + endTime; + + if (e.target.tagName !== "CANVAS") { + return; + } + + editor.setSelectedArea(startX, startX); + startTime = editor.samplesToSeconds(offset + editor.selectedArea.start); + endTime = editor.samplesToSeconds(offset + editor.selectedArea.end); + + editor.updateEditor(-1, undefined, undefined, true); + editor.config.setCursorPos(startTime); + editor.notifySelectUpdate(startTime, endTime); + + editor.deactivateAudioSelection(); +}; + +TrackEditor.prototype.selectFadeIn = function(e) { + var editor = this, + startX = e.layerX || e.offsetX, //relative to e.target (want the canvas). + offset = this.leftOffset, + startTime, + endTime; + + if (e.target.tagName !== "CANVAS") { + return; + } + + editor.setSelectedArea(undefined, startX); + startTime = editor.samplesToSeconds(offset + editor.selectedArea.start); + endTime = editor.samplesToSeconds(offset + editor.selectedArea.end); + + editor.updateEditor(-1, undefined, undefined, true); + editor.notifySelectUpdate(startTime, endTime); + + editor.activateAudioSelection(); +}; + +TrackEditor.prototype.selectFadeOut = function(e) { + var editor = this, + startX = e.layerX || e.offsetX, //relative to e.target (want the canvas). + offset = this.leftOffset, + startTime, + endTime; + + if (e.target.tagName !== "CANVAS") { + return; + } + + editor.setSelectedArea(startX, undefined); + startTime = editor.samplesToSeconds(offset + editor.selectedArea.start); + endTime = editor.samplesToSeconds(offset + editor.selectedArea.end); + + editor.updateEditor(-1, undefined, undefined, true); + editor.notifySelectUpdate(startTime, endTime); + + editor.activateAudioSelection(); +}; + /* end of state methods */ TrackEditor.prototype.saveFade = function(id, type, shape, start, end) {