feat: ✨ add settings and download buttons to look-angles and multi-si…

…te-looks
thkruz · Aug 4, 2024 · 6f0f53c · 6f0f53c
1 parent e007372
commit 6f0f53c
Show file tree

Hide file tree

Showing 12 changed files with 274 additions and 165 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -147,6 +147,7 @@
     "gremlins.js": "^2.2.0",
     "jquery": "^3.7.1",
     "jquery-ui-bundle": "^1.12.1-migrate",
+    "material-icons": "^1.13.12",
     "meeusjs": "^1.0.4",
     "new-github-issue-url": "^1.0.0",
     "node-fetch": "^3.3.2",

diff --git a/public/css/fonts.css b/public/css/fonts.css
@@ -28,49 +28,6 @@
     /* Safari, Android, iOS */ url('fonts/droid/droid-sans-v6-latin-regular.svg#DroidSans') format('svg'); /* Legacy iOS */
 }
 
-/*Material Icons*/
-
-/* fallback */
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url('fonts/material-icons/material-icons.eot'); /* For IE6-8 */
-  src:
-    local('Material Icons'),
-    local('MaterialIcons-Regular'),
-    url('fonts/material-icons/material-icons.woff2') format('woff2'),
-    url('fonts/material-icons/material-icons.woff') format('woff'),
-    url('fonts/material-icons/material-icons.ttf') format('truetype');
-}
-
-.material-icons {
-  font-family: 'Material Icons', sans-serif;
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px; /* Preferred icon size */
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
-  font-feature-settings: 'liga';
-}
-
-/*Material Icons*/
-
 /*Icomoon Font*/
 
 @font-face {

diff --git a/scripts/webpack.mjs b/scripts/webpack.mjs
@@ -22,6 +22,7 @@ export const generateConfig = (env, isWatch) => {
    * @type {webpack.Configuration[]}
    */
   const webpackConfig = [];
+
   env ??= 'production';
 
   let baseConfig = getBaseConfig(dirName);
@@ -71,9 +72,11 @@ export const generateConfig = (env, isWatch) => {
 
   // split entry points main, webworkers, and possibly analysis tools
   const mainConfig = getMainConfig(baseConfig, dirName, 'dist');
+
   webpackConfig.push(mainConfig);
 
   const exampleConfig = getMainConfig(baseConfig, dirName, 'dist', '../../');
+
   exampleConfig.plugins = [
     new webpack.ProvidePlugin({
       '$': 'jquery',
@@ -84,20 +87,22 @@ export const generateConfig = (env, isWatch) => {
       beforeCompile: true,
     }),
   ];
-  const examples = readdirSync(`./public/examples`, { withFileTypes: true });
+  const examples = readdirSync('./public/examples', { withFileTypes: true });
+
   examples.forEach((example) => {
     if (!example.isDirectory()) {
       exampleConfig.plugins.push(
         new HtmlWebpackPlugin({
           filename: `../examples/${example.name}`,
           template: `./public/examples/${example.name}`,
-        })
+        }),
       );
     }
   });
   webpackConfig.push(exampleConfig);
 
   const webWorkerConfig = getWebWorkerConfig(baseConfig, dirName, 'dist', '');
+
   webpackConfig.push(webWorkerConfig);
 
   return webpackConfig;
@@ -145,7 +150,7 @@ const getBaseConfig = (dirName) => ({
       },
       {
         test: /\.css$/iu,
-        include: [/src/u, /public/u],
+        include: [/node_modules/u, /src/u, /public/u],
         use: ['style-loader', 'css-loader'],
         generator: {
           filename: './css/[name][ext]',
@@ -216,13 +221,14 @@ const getNonEmbedConfig = (baseConfig, env) => {
     new HtmlWebpackPlugin({
       filename: '../index.html',
       template: './public/index.html',
-    })
+    }),
   );
   baseConfig.module.rules.push({
     test: /\.(?:woff|woff2|eot|ttf|otf)$/iu,
     include: [/src/u],
     type: 'asset/resource',
   });
+
   return baseConfig;
 };
 

diff --git a/src/keeptrack.ts b/src/keeptrack.ts
@@ -35,6 +35,7 @@ import rocket2Jpg from '@public/img/wallpaper/rocket2.jpg';
 import rocket3Jpg from '@public/img/wallpaper/rocket3.jpg';
 import telescopeJpg from '@public/img/wallpaper/telescope.jpg';
 import thuleJpg from '@public/img/wallpaper/thule.jpg';
+import 'material-icons/iconfont/material-icons.css';
 
 import eruda from 'eruda';
 import erudaFps from 'eruda-fps';

diff --git a/src/lib/click-and-drag.ts b/src/lib/click-and-drag.ts
@@ -23,7 +23,7 @@ export const clickAndDragWidth = (el: HTMLElement | null, options: clickDragOpti
     // create new element on right edge
     const edgeEl = createElWidth_(el);
 
-    addEventsWidth_(edgeEl, el, width, minWidth, maxWidth, options.attachedElement);
+    addEventsWidth_(edgeEl, el, width, minWidth, maxWidth, options.attachedElement, options.leftOffset);
   }
 };
 
@@ -39,7 +39,7 @@ export const clickAndDragHeight = (el: HTMLElement, maxHeight?: number, callback
   addEventsHeight_(edgeEl, el, callback, maxHeight);
 };
 
-const addEventsWidth_ = (edgeEl: HTMLDivElement, el: HTMLElement, width: number, minWidth: number, maxWidth: number, attachedElement?: HTMLElement) => {
+const addEventsWidth_ = (edgeEl: HTMLDivElement, el: HTMLElement, width: number, minWidth: number, maxWidth: number, attachedElement?: HTMLElement, leftOffset?: number) => {
   let startX: number;
   let startWidth: number;
 
@@ -72,7 +72,7 @@ const addEventsWidth_ = (edgeEl: HTMLDivElement, el: HTMLElement, width: number,
         width = width > maxWidth ? maxWidth : width;
         el.style.width = `${width}px`;
 
-        if (attachedElement) {
+        if (attachedElement && !leftOffset) {
           attachedElement.style.left = `${el.getBoundingClientRect().right}px`;
         }
       });

diff --git a/src/plugins/KeepTrackPlugin.ts b/src/plugins/KeepTrackPlugin.ts
@@ -12,12 +12,29 @@ import { SelectSatManager } from './select-sat-manager/select-sat-manager';
 import { SoundNames } from './sounds/SoundNames';
 
 export interface clickDragOptions {
+  leftOffset?: number;
   isDraggable?: boolean;
   minWidth?: number;
   maxWidth?: number;
   attachedElement?: HTMLElement;
 }
 
+interface SideMenuSettingsOptions {
+  /**
+   * The width of the side menu's settings sub-menu.
+   */
+  width: number;
+  /**
+   * Override for the left offset of the side menu's settings sub-menu.
+   * If this is not set then it will default to the right edge of the side menu.
+   */
+  leftOffset?: number;
+  /**
+   * The z-index of the side menu's settings sub-menu.
+   */
+  zIndex: number;
+}
+
 /**
  * Represents a plugin for KeepTrack.
  */
@@ -84,10 +101,17 @@ export class KeepTrackPlugin {
    */
   sideMenuSettingsHtml: string;
 
+  sideMenuSettingsOptions: SideMenuSettingsOptions = {
+    width: 300,
+    leftOffset: null,
+    zIndex: 5,
+  };
+
   /**
-   * The width of the side menu's settings sub-menu.
+   * The callback to run when the download icon is clicked.
+   * Download icon is automatically added if this is defined.
    */
-  sideMenuSettingsWidth: number = 300;
+  downloadIconCb: () => void = null;
 
   /**
    * Whether the side menu settings are open.
@@ -227,6 +251,8 @@ export class KeepTrackPlugin {
       throw new Error(`${this.PLUGIN_NAME} HTML already added.`);
     }
 
+    this.sideMenuSettingsOptions.leftOffset = typeof this.sideMenuSettingsOptions.leftOffset === 'number' ? this.sideMenuSettingsOptions.leftOffset : null;
+
     if (this.bottomIconElementName || this.bottomIconLabel) {
       if (!this.bottomIconElementName || !this.bottomIconLabel) {
         throw new Error(`${this.PLUGIN_NAME} bottom icon element name, image, and label must all be defined.`);
@@ -239,26 +265,7 @@ export class KeepTrackPlugin {
 
     if (this.sideMenuElementName && this.sideMenuElementHtml) {
       if (this.sideMenuSettingsHtml) {
-        const settingsBtn = `${this.sideMenuElementName}-settings-btn`;
-        const menuWidthStr = `${this.sideMenuSettingsWidth.toString()} px !important`;
-        const sideMenuHtmlWrapped = keepTrackApi.html`
-          <div id="${this.sideMenuElementName}" class="side-menu-parent start-hidden text-select" style="z-index: 5; width: ${menuWidthStr};">
-            <div id="${this.sideMenuElementName}-content" class="side-menu">
-              <div class="row" style="margin-top: 5px;margin-bottom: 0px;display: flex;justify-content: space-evenly;align-items: center;flex-direction: row;flex-wrap: nowrap;">
-                <h5 class="center-align" style="margin-left: auto">${this.sideMenuTitle}</h5>
-                <button id="${settingsBtn}"
-                  class="center-align btn btn-ui waves-effect waves-light"
-                  style="padding: 2px; margin: 0px;margin-left: auto; color: var(--statusDarkStandby); background-color: rgba(0, 0, 0, 0);box-shadow: none;"
-                  type="button">
-                  <i class="material-icons" style="font-size: 2em;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;">
-                    settings
-                  </i>
-                </button>
-              </div>
-              <li class="divider" style="padding: 2px !important;"></li>
-              ${this.sideMenuElementHtml}
-            </div>
-          </div>`;
+        const sideMenuHtmlWrapped = this.generateSideMenuHtml_();
 
         this.addSideMenu(sideMenuHtmlWrapped);
       } else {
@@ -270,7 +277,7 @@ export class KeepTrackPlugin {
 
     if (this.sideMenuSettingsHtml) {
       const sideMenuHtmlWrapped = keepTrackApi.html`
-        <div id="${this.sideMenuElementName}-settings" class="side-menu-parent start-hidden text-select" style="z-index: 3;">
+        <div id="${this.sideMenuElementName}-settings" class="side-menu-parent start-hidden text-select" style="z-index: ${this.sideMenuSettingsOptions.zIndex.toString()};">
           <div id="${this.sideMenuElementName}-content" class="side-menu-settings" style="padding: 0px 10px;">
             <div class="row"></div>
             ${this.sideMenuSettingsHtml}
@@ -294,6 +301,13 @@ export class KeepTrackPlugin {
               getEl(`${this.sideMenuElementName}-settings-btn`).style.color = 'var(--statusDarkNormal)';
             }
           });
+
+          if (this.downloadIconCb) {
+            getEl(`${this.sideMenuElementName}-download-btn`).addEventListener('click', () => {
+              keepTrackApi.getSoundManager().play(SoundNames.EXPORT);
+              this.downloadIconCb();
+            });
+          }
         },
       });
     }
@@ -345,6 +359,49 @@ export class KeepTrackPlugin {
    */
   isRmbOnSat: boolean = false;
 
+  private generateSideMenuHtml_() {
+    const menuWidthStr = `${this.sideMenuSettingsOptions.width.toString()} px !important`;
+    const downloadIconHtml = this.downloadIconCb ? keepTrackApi.html`
+      <button id="${this.sideMenuElementName}-download-btn";
+        class="center-align btn btn-ui waves-effect waves-light"
+        style="padding: 2px; margin: 0px 0px 0px 5px; color: var(--statusDarkStandby); background-color: rgba(0, 0, 0, 0);box-shadow: none;"
+        type="button">
+        <i class="material-icons" style="font-size: 2em;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;">
+          file_download
+        </i>
+      </button>
+    ` : '';
+    const settingsIconHtml = keepTrackApi.html`
+      <button id="${this.sideMenuElementName}-settings-btn"
+        class="center-align btn btn-ui waves-effect waves-light"
+        style="padding: 2px; margin: 0px 0px 0px 5px; color: var(--statusDarkStandby); background-color: rgba(0, 0, 0, 0);box-shadow: none;"
+        type="button">
+        <i class="material-icons" style="font-size: 2em;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;">
+          settings
+        </i>
+      </button>`;
+    const spacerDiv = keepTrackApi.html`<div style="width: 30px; height: 30px; display: block; margin: 0px 5px 0px 0px;"></div>`;
+
+    const sideMenuHtmlWrapped = keepTrackApi.html`
+          <div id="${this.sideMenuElementName}" class="side-menu-parent start-hidden text-select"
+            style="z-index: 5; width: ${menuWidthStr};">
+            <div id="${this.sideMenuElementName}-content" class="side-menu">
+              <div class="row" style="margin-top: 5px;margin-bottom: 0px;display: flex;justify-content: space-evenly;align-items: center;flex-direction: row;flex-wrap: nowrap;">
+                ${spacerDiv}
+                ${this.downloadIconCb ? spacerDiv : ''}
+                <h5 class="center-align" style="margin: 0px auto">${this.sideMenuTitle}</h5>
+                ${downloadIconHtml}
+                ${settingsIconHtml}
+              </div>
+              <li class="divider" style="padding: 2px !important;"></li>
+              ${this.sideMenuElementHtml}
+            </div>
+          </div>`;
+
+
+    return sideMenuHtmlWrapped;
+  }
+
   /**
    * Adds the JS for the KeepTrackPlugin.
    * @throws {Error} If the JS has already been added.
@@ -649,7 +706,11 @@ export class KeepTrackPlugin {
 
     if (settingsMenuElement) {
       this.isSideMenuSettingsOpen = true;
-      settingsMenuElement.style.left = `${sideMenuElement.getBoundingClientRect().right}px`;
+      if (this.sideMenuSettingsOptions.leftOffset !== null) {
+        settingsMenuElement.style.left = `${this.sideMenuSettingsOptions.leftOffset}px`;
+      } else {
+        settingsMenuElement.style.left = `${sideMenuElement.getBoundingClientRect().right}px`;
+      }
       slideInRight(settingsMenuElement, 1000);
     }
   }
@@ -696,6 +757,9 @@ export class KeepTrackPlugin {
         if (this.sideMenuSettingsHtml) {
           opts.attachedElement = getEl(`${this.sideMenuElementName}-settings`);
         }
+        if (this.sideMenuSettingsOptions.leftOffset) {
+          opts.leftOffset = this.sideMenuSettingsOptions.leftOffset;
+        }
         clickAndDragWidth(getEl(this.sideMenuElementName), opts);
       },
     });

diff --git a/src/plugins/sensor/custom-sensor-plugin.ts b/src/plugins/sensor/custom-sensor-plugin.ts
@@ -12,7 +12,6 @@ import customPng from '@public/img/icons/custom.png';
 import { Degrees, DetailedSensor, Kilometers, SpaceObjectType, ZoomValue } from 'ootk';
 import { KeepTrackPlugin, clickDragOptions } from '../KeepTrackPlugin';
 import { SoundNames } from '../sounds/SoundNames';
-import { MultiSiteLookAnglesPlugin } from './multi-site-look-angles-plugin';
 
 export class CustomSensorPlugin extends KeepTrackPlugin {
   bottomIconCallback: () => void = () => {
@@ -209,9 +208,8 @@ export class CustomSensorPlugin extends KeepTrackPlugin {
     isDraggable: true,
   };
 
-  static PLUGIN_NAME = 'Custom Sensor';
   constructor() {
-    super(MultiSiteLookAnglesPlugin.PLUGIN_NAME);
+    super(CustomSensorPlugin.name);
   }
 
   helpTitle = 'Custom Sensor Menu';