fix ColorCustomizer which had zero effect since adding heatmap functi…

…onality

display reset buttons on hover if colors were customized
remove key 'group' from periodic-table-data.ts

readme.md

@@ -3,7 +3,7 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/42b5fd04-c538-4e3c-bd69-73e383989cfd/deploy-status)](https://app.netlify.com/sites/ptable-elements/deploys)
 [![pre-commit.ci status](https://results.pre-commit.ci/badge/github/janosh/periodic-table/main.svg?badge_token=nUqJfPCFS4uyMwcFSDIfdQ)](https://results.pre-commit.ci/latest/github/janosh/periodic-table/main?badge_token=nUqJfPCFS4uyMwcFSDIfdQ)
 
-A dynamic Periodic Table component written in Svelte.
+Interactive Periodic Table component written in Svelte.
 
 ![Screenshot of periodic table](static/2022-06-01-screenshot.png)
 

src/colors.ts

@@ -1,4 +1,4 @@
-export const category_colors: Record<string, string> = {
+export const default_category_colors: Record<string, string> = {
   'diatomic-nonmetal': `#ff8c00`, // darkorange
   'noble-gas': `#9932cc`, // darkorchid
   'alkali-metal': `#006400`, // darkgreen
@@ -11,3 +11,6 @@ export const category_colors: Record<string, string> = {
   actinide: `#6495ed`, // cornflowerblue
   experimental: `#808080`, // gray
 }
+export const category_colors: Record<string, string> = {
+  ...default_category_colors,
+}

src/lib/ColorCustomizer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { fade } from 'svelte/transition'
-  import { category_colors } from '../colors'
+  import { category_colors, default_category_colors } from '../colors'
   import { active_category } from '../stores'
 
   export let open = false
@@ -13,14 +13,14 @@
   }
 </script>
 
+<h2
+  on:click={() => (open = !open)}
+  title={!open && collapsible ? `Click to open color picker` : null}
+  style:cursor={collapsible ? `pointer` : `default`}
+>
+  Customize Colors
+</h2>
 <div class="grid">
-  <h2
-    on:click={() => (open = !open)}
-    title={!open && collapsible ? `Click to open color picker` : null}
-    style:cursor={collapsible ? `pointer` : `default`}
-  >
-    Customize Colors
-  </h2>
   {#if open || !collapsible}
     {#each Object.keys(category_colors) as category}
       <label
@@ -37,6 +37,14 @@
           bind:value={category_colors[category]}
         />
         {category.replaceAll(`-`, ` `)}
+        {#if category_colors[category] !== default_category_colors[category]}
+          <button
+            on:click={() =>
+              (category_colors[category] = default_category_colors[category])}
+          >
+            <small>reset</small>
+          </button>
+        {/if}
       </label>
     {/each}
   {/if}
@@ -68,7 +76,16 @@
     cursor: pointer;
   }
   h2 {
-    margin: 0;
-    white-space: nowrap;
+    text-align: center;
+  }
+  label > button {
+    background: none;
+    border: none;
+    color: white;
+    opacity: 0;
+    transition: 0.3s;
+  }
+  label:hover > button {
+    opacity: 0.5;
   }
 </style>

src/lib/ElementTile.svelte

@@ -3,20 +3,21 @@
   import { Element } from '../types'
 
   export let element: Element
-  export let bg_color: string
+  export let bg_color: string | null
   export let style = ``
   export let show_number = true
   export let show_name = true
   export let value: number | undefined = undefined
   export let precision = 2
 
   $: category = element.category.replaceAll(` `, `-`)
+  // background color defaults to category color (initialized in colors.ts, user editable in ColorCustomizer.ts)
+  $: bg_color = bg_color ?? `var(--${category}-bg-color)`
 </script>
 
 <div
   class="element-tile {category}"
-  class:active={$active_category === element.category.replaceAll(` `, `-`) ||
-    $active_element?.name === element.name}
+  class:active={$active_category === category || $active_element?.name === element.name}
   {style}
   style:background-color={bg_color}
 >

src/lib/PeriodicTable.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { category_colors } from '../colors'
   import elements from '../periodic-table-data.ts'
   import { active_element, color_scale, heatmap } from '../stores'
   import ColorCustomizer from './ColorCustomizer.svelte'
@@ -23,9 +22,8 @@
 
   {#each elements as element}
     {@const value = element[$heatmap]}
-    {@const heatmap_color = value ? $color_scale(value) : `transparent`}
-    {@const default_color = category_colors[element.category.replaceAll(` `, `-`)]}
-    {@const bg_color = $heatmap ? heatmap_color : default_color}
+    {@const heatmap_color = value ? $color_scale?.(value) : `transparent`}
+    {@const bg_color = $heatmap ? heatmap_color : null}
     <a
       href={element.name.toLowerCase()}
       style="grid-column: {element.column}; grid-row: {element.row};"