refactor pitch slider

Author: walterbender

css/activity.css

@@ -535,6 +535,44 @@ table {
     margin-left: 53px;
 }
 
+#sliderDiv {
+    position: absolute;
+    top: 20%;
+    left: 30%;
+    background: rgba(255, 255, 255, 0.85) !important;
+}
+
+#sliderTableDiv {
+    position: relative;
+    left: 0px;
+    top: 0px;
+    border: 0 !important;
+    background: rgba(255, 255, 255, 0.85) !important;
+    width: 680px;
+}
+
+#sliderButtonsDiv {
+    position: relative;
+    left: 0px;
+    top: 0px;
+    border: 0 !important;
+    background: rgba(255, 255, 255, 0.85);
+}
+
+#sliderOuterDiv {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    right: 5em;
+    overflow-y:auto;
+    overflow-x:none;
+    background: rgba(255, 255, 255, 0.85);
+}
+
+#sliderInnerDiv {
+    overflow-x:auto;
+}
+
 .headcol {
     position:absolute;
     left: 1px;
@@ -573,37 +611,6 @@ table {
     overflow-y: scroll !important;
 }
 
-#pitchSliderDiv {
-    position: absolute;
-    top: 20%;
-    left: 30%;
-    border-style: solid;
-    border: 0 !important;
-    background: rgba(255, 255, 255, 0.85);
-    -webkit-user-select: none;
-    overflow-y: scroll !important;
-}
-
-#moveUpSliderDiv {
-    position: absolute;
-    top: 66%;
-    left: 30%;
-    border-style: solid;
-    border: 0 !important;
-    background: rgba(255, 255, 255, 0.85);
-    -webkit-user-select: none;
-}
-
-#moveDownSliderDiv {
-    position: absolute;
-    top: 74%;
-    left: 30%;
-    border-style: solid;
-    border: 0 !important;
-    background: rgba(255, 255, 255, 0.85);
-    -webkit-user-select: none;
-}
-
 #sliderInCell {
     position: absolute;
 }

index.html

@@ -104,23 +104,6 @@
         $("#pitchdrummatrix").draggable();
       });
 
-      $(function() {
-        $('#pitchSliderDiv').draggable({
-            drag: function() {
-                jQuery('#moveUpSliderDiv').css('left', jQuery(this).position().left);
-                jQuery('#moveUpSliderDiv').css('top', jQuery(this).position().top + $(window).innerWidth/4.4);
-                jQuery('#moveDownSliderDiv').css('left', jQuery(this).position().left);
-                jQuery('#moveDownSliderDiv').css('top', jQuery(this).position().top + $(window).innerWidth/3.8);
-            },
-            stop: function(){
-                jQuery('#moveUpSliderDiv').css('left', jQuery(this).position().left);
-                jQuery('#moveUpSliderDiv').css('top', jQuery(this).position().top + $(window).innerWidth/4.4);
-                jQuery('#moveDownSliderDiv').css('left', jQuery(this).position().left);
-                jQuery('#moveDownSliderDiv').css('top', jQuery(this).position().top + $(window).innerWidth/3.8);
-            }
-        });
-      });
-
       $(function() {
         $("#statusmatrix").draggable();
       });
@@ -315,6 +298,14 @@ <h2 id="planetWorldwide"></h2>
 	</div>
       </div>
 
+      <div id="sliderDiv" draggable="false">
+	<div id="sliderButtonsDiv">
+	</div>
+
+	<div id="sliderTableDiv">
+	</div>
+      </div>
+
       <div id="pitchSliderDiv" style="visibility:hidden">
       </div>
 

js/palette.js

@@ -1920,7 +1920,7 @@ function Palette(palettes, name) {
         const PERFECT8OBJ = [[0, 'perfectx', this.protoContainers[blkname].x - paletteBlocks.stage.x, this.protoContainers[blkname].y - paletteBlocks.stage.y, [null, 1, 2, null, 3]], [1, ['number', {'value': 8}], 0, 0, [0]], [2, ['number', {'value': 0}], 0, 0, [0]], [3, 'hidden', 0, 0, [0, null]]];
         const PERFECTOBJ = [[0, 'perfectx', this.protoContainers[blkname].x - paletteBlocks.stage.x, this.protoContainers[blkname].y - paletteBlocks.stage.y, [null, 1, 2, null, 3]], [1, ['number', {'value': 5}], 0, 0, [0]], [2, ['number', {'value': 0}], 0, 0, [0]], [3, 'hidden', 0, 0, [0, null]]];
         const PITCHDRUMMATRIXOBJ = [[0, 'pitchdrummatrix', this.protoContainers[blkname].x - paletteBlocks.stage.x, this.protoContainers[blkname].y - paletteBlocks.stage.y, [null, 1, 12]], [1, 'pitch', 0, 0, [0, 2, 3, 4]], [2, ['solfege', {'value': 'sol'}], 0, 0, [1]], [3, ['number', {'value': 4}], 0, 0, [1]], [4, 'pitch', 0, 0, [1, 5, 6, 7]], [5, ['solfege', {'value': 'mi'}], 0, 0, [4]], [6, ['number', {'value': 4}], 0, 0, [4]], [7, 'pitch', 0, 0, [4, 8, 9, 10]], [8, ['solfege', {'value': 're'}], 0, 0, [7]], [9, ['number', {'value': 4}], 0, 0, [7]], [10, 'playdrum', 0, 0, [7, 11, null]], [11, ['drumname', {'value': _(DEFAULTDRUM)}], 0, 0, [10]], [12, 'hiddennoflow', 0, 0, [0, null]]];
-        const PITCHSLIDEROBJ = [[0, 'pitchslider', this.protoContainers[blkname].x - paletteBlocks.stage.x, this.protoContainers[blkname].y - paletteBlocks.stage.y, [null, 1, 3]], [1, 'hertz', 0, 0, [0, 2, null]], [2, ['number', {'value': 220}], 0, 0, [1]], [3, 'hiddennoflow', 0, 0, [0, null]]];
+        const PITCHSLIDEROBJ = [[0, 'pitchslider', this.protoContainers[blkname].x - paletteBlocks.stage.x, this.protoContainers[blkname].y - paletteBlocks.stage.y, [null, 1, 3]], [1, 'hertz', 0, 0, [0, 2, null]], [2, ['number', {'value': 392}], 0, 0, [1]], [3, 'hiddennoflow', 0, 0, [0, null]]];
         const PITCHSTAIRCASEOBJ = [[0, 'pitchstaircase', this.protoContainers[blkname].x - paletteBlocks.stage.x, this.protoContainers[blkname].y - paletteBlocks.stage.y, [null, 1, 4]], [1, 'pitch', 0, 0, [0, 2, 3, null]], [2, ['solfege', {'value': 'sol'}], 0, 0, [1]], [3, ['number', {'value': 3}], 0, 0, [1]], [4, 'hiddennoflow', 0, 0, [0, null]]];
         const PLAYDRUMOBJ = [[0, 'playdrum', this.protoContainers[blkname].x - paletteBlocks.stage.x, this.protoContainers[blkname].y - paletteBlocks.stage.y, [null, 1, null]], [1, ['drumname', {'value': _(DEFAULTDRUM)}], 0, 0, [0]]];
         const PLUCKOBJ = [[0, 'pluck', this.protoContainers[blkname].x - paletteBlocks.stage.x, this.protoContainers[blkname].y - paletteBlocks.stage.y, [null, null, 1]], [1, 'hidden', 0, 0, [0, null]]];