Clean up. Reorg

dev/generic-test-harness.html

@@ -259,7 +259,7 @@
             ]
         };
 
-    igv.createBrowser(document.getElementById("igv-container"), config_offscreen_scroll).then(browser => {
+    igv.createBrowser(document.getElementById("igv-container"), config).then(browser => {
         console.log(`browser ${ browser.guid } is good to go`)
     });
 

dev/ui/example.html

@@ -23,14 +23,12 @@ <h1>UI classes demo</h1>
 </div>
 
 <script type="module">
-    import $ from "../../js/vendor/jquery-3.3.1.slim.js"
-
     import AlertDialog from "../../js/ui/components/alertDialog.js"
     import InputDialog from "../../js/ui/components/inputDialog.js"
     import SliderDialog from "../../js/ui/components/sliderDialog.js"
     import Popover from "../../js/ui/popover.js"
     import Dropdown from "../../js/ui/dropdown.js"
-    import ColorPicker from "../../js/ui/components/colorPicker.js"
+    import GenericColorPicker from "../../js/ui/components/genericColorPicker.js"
     import Panel from "../../js/ui/components/panel.js"
     import Textbox from "../../js/ui/components/textbox.js"
     import Dialog from "../../js/ui/components/dialog.js"
@@ -48,6 +46,8 @@ <h1>UI classes demo</h1>
 
     let popover
 
+    const dropdown = new Dropdown(parent, {top: 48, left: -48})
+
     const menuItems = [
         {
             label: "foo",
@@ -64,33 +64,42 @@ <h1>UI classes demo</h1>
         }
     ]
 
-    const dropdown = new Dropdown(parent, {top: 48, left: -48})
     dropdown.configure(menuItems)
 
+    const colorPickerConfig =
+        {
+            parent,
+            width: 364,
+        };
+
+    const colorPicker = new GenericColorPicker(colorPickerConfig)
 
-    const colorPicker = new ColorPicker({
-        parent: parent,
-        width: 364,
-        //defaultColor: 'aqua',
-        colorHandler: (color) => alertDialog.present("Color selected: " + color)
-    })
+    const colorHandlers =
+        {
+            color: rgbString => {
+                console.log(`color ${ rgbString }`)
+            },
+            altColor: rgbString => {
+                console.log(`altColor ${ rgbString }`)
+            },
+        };
+
+    colorPicker.configure('rgb(150,150,150)', colorHandlers['color'], 'rgb(150,150,150)')
+
+    document.getElementById("color-id").addEventListener("click", event => colorPicker.present(event))
 
     document.getElementById("alert-id").addEventListener("click", (ev => alertDialog.present("Alert")))
 
     document.getElementById("slider-id").addEventListener("click", (ev => {
 
-        const callback = value => {
-            console.log(`slider value ${value}`)
-        }
-
         const config =
             {
                 label: "Slider Label",
                 value: 0.125,
                 min: 0,
                 max: 1,
                 scaleFactor: 1000,
-                callback
+                callback: value => console.log(`slider value ${value}`)
             }
 
         sliderDialog.present(config, ev)
@@ -100,9 +109,7 @@ <h1>UI classes demo</h1>
         inputDialog.present({
             label: "Enter a value",
             value: "foo",
-            callback: function (value) {
-                alertDialog.present("Value entered: " + value)
-            }
+            callback: value => alertDialog.present("Value entered: " + value)
         }, ev)
     }))
 
@@ -132,11 +139,7 @@ <h1>UI classes demo</h1>
         popover.present(event)
     })
 
-    document.getElementById("dropdown-id").addEventListener("click", event => {
-        dropdown.present(event)
-    })
-
-    document.getElementById("color-id").addEventListener("click", (ev) => colorPicker.show())
+    document.getElementById("dropdown-id").addEventListener("click", event => dropdown.present(event))
 
     let colorScale = new DivergingGradientScale({
         "type": "doubleGradient",
@@ -148,13 +151,7 @@ <h1>UI classes demo</h1>
         "highColor": "rgb(164,0,30)"
     })
 
-    document.getElementById("form-id").addEventListener("click", e => {
-
-
-        ColorScaleEditor.open(colorScale, parent, (cs) => colorScale = cs)
-
-    })
-
+    document.getElementById("form-id").addEventListener("click", e => ColorScaleEditor.open(colorScale, parent, (cs) => colorScale = cs))
 
 </script>
 

js/ui/components/genericColorPicker.js

@@ -1,6 +1,6 @@
 import * as DOMUtils from "../utils/dom-utils.js"
 import Picker from "../../../node_modules/vanilla-picker/dist/vanilla-picker.csp.mjs"
-import GenericContainer from '../genericContainer.js'
+import GenericContainer from './genericContainer.js'
 import {genericColorPickerPalette} from "../../util/colorPalletes.js"
 
 class GenericColorPicker extends GenericContainer {

js/ui/genericContainer.js → js/ui/components/genericContainer.js

@@ -1,6 +1,6 @@
-import * as UIUtils from "./utils/ui-utils.js"
-import * as DOMUtils from "./utils/dom-utils.js"
-import makeDraggable from "./utils/draggable.js"
+import * as UIUtils from "../utils/ui-utils.js"
+import * as DOMUtils from "../utils/dom-utils.js"
+import makeDraggable from "../utils/draggable.js"
 
 
 class GenericContainer {

js/ui/popover.js

@@ -1,7 +1,6 @@
 import * as Icon from './utils/icons.js'
 import * as DOMUtils from "./utils/dom-utils.js"
 import makeDraggable from "./utils/draggable.js"
-import ColorPicker from "./components/colorPicker.js"
 import {createIcon} from "./utils/icons.js"
 
 class Popover {