CC-2301 : creating different states for the fade editor:

cursor, fadein, fadeout.

airtime_mvc/application/layouts/scripts/layout.phtml

@@ -67,9 +67,25 @@
     <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_select ui-state-default" data-state="cursor">Cursor</span>
+    <span class="btn_fadein ui-state-default" data-state="fadein">Fade In</span>
+	<span class="btn_fadeout ui-state-default" data-state="fadeout">Fade Out</span>
     <span class="btn_shift ui-state-default" data-state="shift">Shift</span>
   </div>
+  <div id="btns_fade" class="btns_fade">
+    <div class="fade-in-ctrls">
+      <a class="disabled" data-type="FadeIn" data-shape="linear">Linear</a>
+      <a class="disabled" data-type="FadeIn" data-shape="logarithmic">Logarithmic</a>
+      <a class="disabled" data-type="FadeIn" data-shape="sCurve">S-Curve</a>
+      <a class="disabled" data-type="FadeIn" data-shape="exponential">Exponential</a>
+    </div>
+    <div class="fade-out-ctrls">
+      <a class="disabled" data-type="FadeOut" data-shape="linear">Linear</a>
+      <a class="disabled" data-type="FadeOut" data-shape="logarithmic">Logarithmic</a>
+      <a class="disabled" data-type="FadeOut" data-shape="sCurve">S-Curve</a>
+      <a class="disabled" data-type="FadeOut" data-shape="exponential">Exponential</a>
+    </div>
+  </div>
 </div>
 </script>
 </body>

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;
 }

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,
+            width: dim.width - 100,
-            height: 300,
+            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,
+            width: dim.width - 100,
-            height: 300,
+            height: dim.height - 100,
             buttons: [
                 {text: "Save", click: function() {
                 	var cueIn = $html.find('.editor-cue-in').val(),

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);

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) {