-
Notifications
You must be signed in to change notification settings - Fork 95
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Convert "Info Panels" -> "Info Cards", upgrade all to class components
This includes: Background, History, Measurement, Location "Cards" is more the correct UI term for what these things are. This converts them all to the newer way of organizing the UI code. This was a tricky conversion because previously `uiInfo` managed much of the rendering and state for the card components Now each component can stand alone and manage its own status.
- Loading branch information
Showing
20 changed files
with
779 additions
and
672 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import { selection } from 'd3-selection'; | ||
|
|
||
| import { uiCmd } from './cmd.js'; | ||
|
|
||
| import { UiBackgroundCard } from './cards/UiBackgroundCard.js'; | ||
| import { UiHistoryCard } from './cards/UiHistoryCard.js'; | ||
| import { UiLocationCard } from './cards/UiLocationCard.js'; | ||
| import { UiMeasurementCard } from './cards/UiMeasurementCard.js'; | ||
|
|
||
|
|
||
|
|
||
| /** | ||
| * UiInfoCards | ||
| * This component acts as the container for the information cards. | ||
| * "Cards" are user interface elements that can float on top of the map | ||
| * and provide extra information about the map or the selection. | ||
| */ | ||
| export class UiInfoCards { | ||
|
|
||
| /** | ||
| * @constructor | ||
| * @param `context` Global shared application context | ||
| */ | ||
| constructor(context) { | ||
| this.context = context; | ||
|
|
||
| this._wasVisible = new Set(); | ||
|
|
||
| // Create child components | ||
| this.BackgroundCard = new UiBackgroundCard(context); | ||
| this.HistoryCard = new UiHistoryCard(context); | ||
| this.LocationCard = new UiLocationCard(context); | ||
| this.MeasurementCard = new UiMeasurementCard(context); | ||
|
|
||
| // Info Cards | ||
| this.cards = [ | ||
| this.BackgroundCard, | ||
| this.HistoryCard, | ||
| this.LocationCard, | ||
| this.MeasurementCard | ||
| ]; | ||
|
|
||
| // D3 selections | ||
| this.$parent = null; | ||
|
|
||
| // 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.toggle = this.toggle.bind(this); | ||
|
|
||
| // bind ⌘I to show/hide all cards | ||
| const l10n = context.systems.l10n; | ||
| this.key = uiCmd('⌘' + l10n.t('info_panels.key')); | ||
| context.keybinding().on(this.key, this.toggle); | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * 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 | ||
| */ | ||
| render($parent = this.$parent) { | ||
| if ($parent instanceof selection) { | ||
| this.$parent = $parent; | ||
| } else { | ||
| return; // no parent - called too early? | ||
| } | ||
|
|
||
| // .info-cards container | ||
| let $wrap = $parent.selectAll('.info-cards') | ||
| .data([0]); | ||
|
|
||
| const $$wrap = $wrap.enter() | ||
| .append('div') | ||
| .attr('class', 'info-cards'); | ||
|
|
||
| $wrap = $wrap.merge($$wrap); | ||
|
|
||
| for (const Card of this.cards) { | ||
| $wrap.call(Card.render); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * toggle | ||
| * Toggles all info cards on/off | ||
| * @param {Event} e - event that triggered the toggle (if any) | ||
| */ | ||
| toggle(e) { | ||
| if (e) e.preventDefault(); | ||
|
|
||
| // Which cards are currently visible? | ||
| const currVisible = new Set(); | ||
| for (const Card of this.cards) { | ||
| if (Card.visible) { | ||
| currVisible.add(Card); | ||
| } | ||
| } | ||
|
|
||
| // Some cards are shown - toggle them off | ||
| if (currVisible.size) { | ||
| this._wasVisible = currVisible; | ||
| for (const Card of currVisible) { | ||
| Card.hide(e); | ||
| } | ||
|
|
||
| // No cards are shown - toggle them on | ||
| } else { | ||
| if (!this._wasVisible.size) { | ||
| this._wasVisible.add(this.MeasurementCard); // at least 1 should be visible | ||
| } | ||
| for (const Card of this._wasVisible) { | ||
| Card.show(e); | ||
| } | ||
| } | ||
|
|
||
| this.render(); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.