From e0bd2e438887413a95dd345d588f807ec6114c3e Mon Sep 17 00:00:00 2001
From: Chase Porter <chaseporter@Chases-MacBook-Pro.local>
Date: Mon, 18 Oct 2021 15:51:02 -0700
Subject: [PATCH] Creates a basic opacity menu for the colorbar background.

---
 fdds/css/fdapp.css                  |  6 +++--
 fdds/js/components/colorbarPanel.js | 48 ++++++++++++++++++++++++++++++++-----
 fdds/js/util.js                     |  8 ++++---
 3 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/fdds/css/fdapp.css b/fdds/css/fdapp.css
index 1230225..da741bf 100644
--- a/fdds/css/fdapp.css
+++ b/fdds/css/fdapp.css
@@ -232,15 +232,17 @@ html, body {
   cursor: pointer;
 }
 
-#raster-colorbar-bg {
+.colorbar-bg {
   position: fixed;
   z-index: 1999;
   left: 60px;
   bottom: 103px;
   width: 150px;
   height: 350px;
-  background-color: white;
+  /* background-color: white; */
+  background-color: rgba(255, 255, 255, 1);
   border-radius: .4rem;
+  font-size: 1.2rem;
 }
 
 #raster-colorbar {
diff --git a/fdds/js/components/colorbarPanel.js b/fdds/js/components/colorbarPanel.js
index 0224259..71a10a0 100644
--- a/fdds/js/components/colorbarPanel.js
+++ b/fdds/js/components/colorbarPanel.js
@@ -1,4 +1,4 @@
-import { dragElement } from '../util.js';
+import { doubleClick, dragElement } from '../util.js';
 import { controllers } from './Controller.js';
 
 export class ColorbarPanel extends HTMLElement {
@@ -7,20 +7,31 @@ export class ColorbarPanel extends HTMLElement {
         this.innerHTML = `
             <div id='colorbar-panel' class='hidden'>
                 <div id='colorbar-tab' class='feature-controller'>
-                    <span>colorbar</span>
+                    <span id='tab-text'>colorbar</span>
                 </div>
-                <div id='raster-colorbar-bg'>
+                <div id='raster-colorbar-bg' class='colorbar-bg'>
                     <img id='raster-colorbar'/>
+                    <div id='colorbar-opacity' class='hidden'>
+                        <opacity-slider></opacity-slider>
+                        <button id='colorbar-opacity-done'>done</button>
+                    </div>
                 </div>
             </div>
         `;
     }
 
     connectedCallback() {
-        const colorbarImg = this.querySelector('#raster-colorbar');
-        const colorbarTab = this.querySelector('#colorbar-tab');
         const colorbarBgImg = this.querySelector('#raster-colorbar-bg');
+        dragElement(colorbarBgImg);
+
+        this.subscribeToColorbarURL();
+
+        this.initializeColorbarTab();
+        this.intializeOpacitySlider();
+   }
 
+   subscribeToColorbarURL() {
+        const colorbarImg = this.querySelector('#raster-colorbar');
         controllers.colorbarURL.subscribe(() => {
             let colorbarURL = controllers.colorbarURL.getValue();
             if (colorbarURL == null) {
@@ -30,6 +41,11 @@ export class ColorbarPanel extends HTMLElement {
                 colorbarImg.src = colorbarURL;
             }
         });
+   }
+
+   initializeColorbarTab() {
+        const colorbarTab = this.querySelector('#colorbar-tab');
+        const colorbarBgImg = this.querySelector('#raster-colorbar-bg');
         colorbarTab.onpointerdown = () => {
             if (colorbarBgImg.classList.contains('hidden')) {
                 this.showColorbar();
@@ -37,7 +53,27 @@ export class ColorbarPanel extends HTMLElement {
                 this.hideColorbar();
             }
         }
-        dragElement(colorbarBgImg);
+   }
+
+   intializeOpacitySlider() {
+        const colorbarBgImg = this.querySelector('#raster-colorbar-bg');
+        const colorbarImg = this.querySelector('#raster-colorbar');
+        const doneButton = this.querySelector('#colorbar-opacity-done');
+        const colorbarOpacity = this.querySelector('#colorbar-opacity');
+        let doubleClickCallback = () => {
+            if (colorbarImg.classList.contains('hidden')) {
+                colorbarImg.classList.remove('hidden');
+                colorbarOpacity.classList.add('hidden');
+            } else {
+                colorbarImg.classList.add('hidden');
+                colorbarOpacity.classList.remove('hidden');
+            }
+        }
+       doneButton.onpointerdown = () => {
+            colorbarImg.classList.remove('hidden');
+            colorbarOpacity.classList.add('hidden');
+       }
+       doubleClick(colorbarBgImg, doubleClickCallback);
    }
 
     hidePanel() {
diff --git a/fdds/js/util.js b/fdds/js/util.js
index 727977e..53b9fe4 100644
--- a/fdds/js/util.js
+++ b/fdds/js/util.js
@@ -268,7 +268,8 @@ export function darkenHex(hex) {
 export function doubleClick(elmnt, doubleClickFunction) {
   const DOUBLE_CLICK_MS = 200;
   let timeout = null;
-  elmnt.onpointerdown = (e) => {
+  elmnt.addEventListener('pointerdown', (e) => {
+  // elmnt.onpointerdown = (e) => {
     if (timeout != null) {
       e.stopPropagation();
       clearTimeout(timeout);
@@ -279,7 +280,7 @@ export function doubleClick(elmnt, doubleClickFunction) {
         timeout = null;
       }, DOUBLE_CLICK_MS);
     }
-  }
+  });
 }
 
 /** Makes given element draggable from sub element with id 'subID' */
@@ -295,7 +296,8 @@ export function dragElement(elmnt, subID='') {
     draggableElement = document.getElementById(subID);
   }
   // document.getElementById(elmnt.id + subID).onpointerdown = dragMouseDown;
-  draggableElement.onpointerdown = dragMouseDown;
+  // draggableElement.onpointerdown = dragMouseDown;
+  draggableElement.addEventListener('pointerdown', dragMouseDown);
   window.addEventListener('resize', () => {
     let offsetLeft = clientWidth - document.body.clientWidth;
     if (elmntLeft != 0 && elmnt.offsetLeft + (elmnt.clientWidth / 2) > (document.body.clientWidth / 2) && (elmntLeft - offsetLeft) > 0) {
-- 
2.11.4.GIT