fdds/js/components/colorbarPanel.js

   1 import { doubleClick, dragElement, IS_MOBILE } from '../util.js';
   2 import { controllers } from './Controller.js';
   3 import { OpacitySlider } from './opacitySlider.js';
   4
   5 export class ColorbarPanel extends HTMLElement {
   6     constructor() {
   7         super();
   8         this.innerHTML = `
   9             <div id='colorbar-panel' class='hidden'>
  10                 <div id='colorbar-tab' class='feature-controller'>
  11                     <span id='tab-text'>colorbar</span>
  12                 </div>
  13                 <div id='raster-colorbar-bg' class='colorbar-bg'>
  14                     <img id='raster-colorbar'/>
  15                     <div id='colorbar-opacity' class='hidden'>
  16                         <span id='colorbar-opacity-label'>Adjust Opacity</span>
  17                         <button id='colorbar-opacity-done'>done</button>
  18                     </div>
  19                 </div>
  20             </div>
  21         `;
  22     }
  23
  24     connectedCallback() {
  25         const colorbarBgImg = this.querySelector('#raster-colorbar-bg');
  26         dragElement(colorbarBgImg, '', true);
  27
  28         this.subscribeToColorbarURL();
  29
  30         this.initializeColorbarTab();
  31         this.intializeOpacitySlider();
  32    }
  33
  34    subscribeToColorbarURL() {
  35         const colorbarImg = this.querySelector('#raster-colorbar');
  36         controllers.colorbarURL.subscribe(() => {
  37             let colorbarURL = controllers.colorbarURL.getValue();
  38             if (colorbarURL == null) {
  39                 this.hidePanel();
  40             } else {
  41                 this.showPanel();
  42                 colorbarImg.src = colorbarURL;
  43             }
  44         });
  45    }
  46
  47    initializeColorbarTab() {
  48         const colorbarTab = this.querySelector('#colorbar-tab');
  49         const colorbarBgImg = this.querySelector('#raster-colorbar-bg');
  50         colorbarTab.onpointerdown = () => {
  51             if (colorbarBgImg.classList.contains('hidden')) {
  52                 this.showColorbar();
  53             } else {
  54                 this.hideColorbar();
  55             }
  56         }
  57    }
  58
  59    intializeOpacitySlider() {
  60         const colorbarBgImg = this.querySelector('#raster-colorbar-bg');
  61         const colorbarImg = this.querySelector('#raster-colorbar');
  62         const doneButton = this.querySelector('#colorbar-opacity-done');
  63         const colorbarOpacity = this.querySelector('#colorbar-opacity');
  64
  65         const opacityUpdateCallback = (opacity) => {
  66             colorbarBgImg.style.backgroundColor = `rgba(255, 255, 255, ${opacity})`;
  67         }
  68         const sliderWidth = IS_MOBILE ? 70 : 140;
  69         const opacitySlider = new OpacitySlider(opacityUpdateCallback, null, 1, sliderWidth);
  70         colorbarOpacity.insertBefore(opacitySlider, doneButton);
  71         let doubleClickCallback = () => {
  72             if (colorbarImg.classList.contains('hidden')) {
  73                 colorbarImg.classList.remove('hidden');
  74                 colorbarOpacity.classList.add('hidden');
  75             } else {
  76                 colorbarImg.classList.add('hidden');
  77                 colorbarOpacity.classList.remove('hidden');
  78             }
  79         }
  80        doneButton.onpointerdown = () => {
  81             colorbarImg.classList.remove('hidden');
  82             colorbarOpacity.classList.add('hidden');
  83        }
  84        doubleClick(colorbarBgImg, doubleClickCallback);
  85    }
  86
  87     hidePanel() {
  88         const colorbarImgContainer = this.querySelector('#colorbar-panel');
  89         colorbarImgContainer.classList.add('hidden');
  90     }
  91
  92     showPanel() {
  93         const colorbarImgContainer = this.querySelector('#colorbar-panel');
  94         colorbarImgContainer.classList.remove('hidden');
  95     }
  96
  97     showColorbar() {
  98         const colorbarImg = this.querySelector('#raster-colorbar-bg');
  99         colorbarImg.classList.remove('hidden');
 100     }
 101
 102     hideColorbar() {
 103         const colorbarImg = this.querySelector('#raster-colorbar-bg');
 104         colorbarImg.classList.add('hidden');
 105     }
 106 }
 107
 108 window.customElements.define('colorbar-panel', ColorbarPanel);