From a7d36ade5729b915763ba366b62bcb95396d8ea3 Mon Sep 17 00:00:00 2001
From: Benjamin Clark <clarkben@meta.com>
Date: Wed, 4 Dec 2024 13:03:02 -0500
Subject: [PATCH] Fix Yule log card render code and shortcut functionality.

---
 css/80_app_fb.css                 |  4 +-
 modules/ui/cards/UiYuleLogCard.js | 95 +++++++++++++++++++++----------
 2 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/css/80_app_fb.css b/css/80_app_fb.css
index 6fc40ae6a..c89b1853d 100644
--- a/css/80_app_fb.css
+++ b/css/80_app_fb.css
@@ -1133,13 +1133,13 @@ div.holiday-banner {
     margin-top: -15px;
     text-shadow: 0 0 80px rgba(223, 221, 170, 0.85),0 0 30px rgba(252, 249, 233, 0.85),0 0 6px DarkRed;
 }
-div.panel-container-yule_log {
+div.card-container-yule_log {
     padding-bottom: 0px;
     width:400px;
     height:250px;
 }
 
-div.panel-content.panel-content-yule_log {
+div.card-content.card-content-yule_log {
     background:url('https://media.giphy.com/media/ZHXz9MZbJI1YA/giphy.gif');
     height: 100%;
 }
diff --git a/modules/ui/cards/UiYuleLogCard.js b/modules/ui/cards/UiYuleLogCard.js
index fa13f4a30..9193a2f29 100644
--- a/modules/ui/cards/UiYuleLogCard.js
+++ b/modules/ui/cards/UiYuleLogCard.js
@@ -1,7 +1,9 @@
-import { select as d3_select } from 'd3-selection';
+import { selection } from 'd3-selection';
 import debounce from 'lodash-es/debounce';
 
 import { AbstractUiCard } from './AbstractUiCard';
+import { uiIcon } from '../icon.js';
+import { utilCmd } from '../../util/cmd.js';
 
 
 
@@ -19,57 +21,92 @@ export class UiYuleLogCard extends AbstractUiCard {
     this.id = 'yule_log';
 
     const l10n = context.systems.l10n;
-    this.label = l10n.tHtml('info_panels.toggle_yule_log.title');
+    this.label = l10n.tHtml('info_panels.yule_log.title');
     this.key = l10n.t('info_panels.yule_log.key');
 
-    this._selection = d3_select(null);
+    this._setupKeybinding = this._setupKeybinding.bind(this);
 
     // Ensure methods used as callbacks always have `this` bound correctly.
     // (This is also necessary when using `d3-selection.call`)
     this.render = this.render.bind(this);
     this._deferredRender = debounce(this.render, 250);
+
+    l10n
+    .on('localechange', this._setupKeybinding);
+
+    this._setupKeybinding();
   }
 
 
   /**
-   * enable
-   * @param  `selection`  A d3-selection to a `div` that the panel should render itself into
+   * render
+   * Accepts a parent selection, and renders the content under it.
+   * (The parent selection is required the first time, but can be inferred on subsequent renders)
+   * @param {d3-selection} $parent - A d3-selection to a HTMLElement that this component should render itself into
    */
-  enable(selection) {
-    if (this._enabled) return;
+  render($parent = this.$parent) {
+    if ($parent instanceof selection) {
+      this.$parent = $parent;
+    } else {
+      return;   // no parent - called too early?
+    }
+
+    const context = this.context;
+    const l10n = context.systems.l10n;
 
-    this._enabled = true;
-  }
+    if (!this.visible) return;
 
+    // .card-container
+    let $wrap = $parent.selectAll('.card-container')
+      .data([this.id], d => d);
 
-  /**
-   * disable
-   */
-  disable() {
-    if (!this._enabled) return;
+    // enter
+    const $$wrap = $wrap.enter()
+      .append('div')
+      .attr('class', d => `fillD2 card-container card-container-${d}`);
+
+    const $$title = $$wrap
+      .append('div')
+      .attr('class', 'fillD2 card-title');
 
-    this._selection.html('');  // empty DOM
+    $$title
+      .append('h3');
+
+    $$title
+      .append('button')
+      .attr('class', 'close')
+      .on('click', this.toggle)
+      .call(uiIcon('#rapid-icon-close'));
+
+    $$wrap
+      .append('div')
+      .attr('class', d => `card-content card-content-${d}`)
+      .append('ul')
+      .attr('class', 'yule-log');
+
+    // update
+    this.$wrap = $wrap = $wrap.merge($$wrap);
+
+    $wrap.selectAll('h3')
+      .text(l10n.t('info_panels.yule_log.title'));
 
-    this._enabled = false;
-    this._selection = d3_select(null);
-    this._currSourceID = null;
-    this._metadata = {};
   }
 
 
   /**
-   * render
+   * _setupKeybinding
+   * This sets up the keybinding, replacing existing if needed
    */
-  render() {
-    if (!this._enabled) return;
-
-    const selection = this._selection;
+  _setupKeybinding() {
+    const context = this.context;
+    const keybinding = context.keybinding();
+    const l10n = context.systems.l10n;
 
-    // Empty out the DOM content and rebuild from scratch..
-    selection.html('');
+    if (Array.isArray(this._keys)) {
+      keybinding.off(this._keys);
+    }
 
-    selection
-      .append('ul')
-      .attr('class', 'yule-log');
+    this._keys = [utilCmd('⌘⇧' + l10n.t('shortcuts.command.toggle_yule_log.key'))];
+    context.keybinding().on(this._keys, this.toggle);
   }
 }