Add feature delete row in custom table (#29)

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 2023-03-07
+
+### Added
+- Improved accessiblity
+- Delete button on rows in custom data tables
+
 ## [1.1.2] - 2023-03-02
 
 ### Fixed

css/app.css

@@ -8,6 +8,8 @@
  --dropdown: url('../img/dropdown-light.svg');
  --hover: hsla(0, 0%, 0%, .1);
  --highlight: hsla(55, 100%, 78%, 0.7);
+ --error: #ff2600;
+ --disabled: #B7B7B7;
  color-scheme: light;
  }
  .dark {
@@ -18,6 +20,8 @@
  --dropdown: url('../img/dropdown-dark.svg');
  --hover: hsla(100, 100%, 100%, .2);
  --highlight: hsla(55, 100%, 19%, 0.7);
+ --error: #ff2600;
+ --disabled: #707070;
  color-scheme: dark;
  }
 }
@@ -30,6 +34,8 @@
  --dropdown: url('../img/dropdown-dark.svg');
  --hover: hsla(100, 100%, 100%, .2);
  --highlight: hsla(55, 100%, 19%, 0.7);
+ --error: #ff2600;
+ --disabled: #707070;
  color-scheme: dark;
  }
  .light {
@@ -40,6 +46,8 @@
  --dropdown: url('../img/dropdown-light.svg');
  --hover: hsla(0, 0%, 0%, .1);
  --highlight: hsla(55, 100%, 78%, 0.7);
+ --error: #ff2600;
+ --disabled: #B7B7B7;
  color-scheme: light;
  }
 }
@@ -116,6 +124,32 @@ ul li::marker {
  overflow: hidden;
 }
 
+button.remove {
+ background-color: transparent;
+ padding: .125rem;
+ border: 0;
+ color: var(--contrast);
+ border-radius: 50%;
+}
+button.remove:is(:hover, :active, :focus) {
+ background-color: transparent;
+ color: var(--error);
+}
+button.remove:disabled {
+ color: var(--disabled);
+}
+.svg-actions,
+.remove svg {
+ display: block;
+ fill: none;
+ width: 1rem;
+ height: 1rem;
+}
+
+.svg-actions {
+ display: inline-block;
+}
+
 /* FORM ELEMENTS */
 fieldset {
  margin: 0;
@@ -316,13 +350,17 @@ input[type="file"]:is(:hover, :focus, :active)::file-selector-button {
  text-align: center;
 }
 
+.text-align-start {
+ text-align: start;
+}
+
 .notice {
  font-style: italic;
  font-size: .9em;
 }
 
 .error {
- color: red;
+ color: var(--error);
 }
 
 .success {
@@ -498,6 +536,10 @@ table .medium {
 table .narrow {
  width: 10%;
 }
+table .actions {
+ padding: 0;
+ width: 2rem;
+}
 
 table.layout-fixed {
  table-layout: fixed;
@@ -634,7 +676,11 @@ table.layout-fixed {
 }
 .skills-wrapper > fieldset {
  background-color: var(--bgcolor);
- flex: 1 1 33%;
+ flex: 1 1 30%;
+}
+
+.skills-wrapper > fieldset.custom {
+ flex-basis: 40%;
 }
 
 .skills :is(tr:focus-within, tr:hover) .hl-wrapper-checkbox {
@@ -696,9 +742,6 @@ table.layout-fixed {
  height: 100%;
  box-sizing: border-box;
 }
-.talents tbody :is(td:first-child, td:last-child) {
- text-align: start;
-}
 
 /* Ambitions & party */
 .ambitions {
@@ -1041,7 +1084,7 @@ table.layout-fixed {
  border: 0;
 }
 
-.button-modal:is(:hover, :focus) {
+.button-modal:is(:hover, :active, :focus) {
  background-color: var(--lightgrey);
 }
 

js/app.js

@@ -19,6 +19,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
  const settingsTheme = document.getElementById('theme')
  const exportButton = document.getElementById('export-button');
  const importButton = document.getElementById('import-button');
+ const removeButtons = document.querySelectorAll('.remove');
 
  // Event Listeners
  simpleInputs.forEach(input => {
@@ -50,6 +51,9 @@ document.addEventListener('DOMContentLoaded', (event) => {
  settingsTheme.addEventListener('change', setTheme);
  exportButton.addEventListener('click', exportData);
  importButton.addEventListener('click', importData);
+ removeButtons.forEach(button => {
+ button.addEventListener('click', removeCustomItem);
+ });
 
  // Fill the sheet with stored data
  fillFromStorage();
@@ -98,6 +102,13 @@ document.addEventListener('DOMContentLoaded', (event) => {
  custom.forEach(custom => {
  const tbody = custom.querySelector('tbody');
  const type = custom.id;
+
+ // Remove existing rows
+ tbody.replaceChildren();
+ // add default first row
+ addNewRow(tbody, 0);
+
+ // and add new rows from storage
  let i = 0;
  while (localStorage.getItem(`${type}-name-${i}`)) {
  addNewRow(tbody, i+1);
@@ -157,12 +168,24 @@ document.addEventListener('DOMContentLoaded', (event) => {
  }
  }
 
+ // Add entry to storage
+ function setItem(key, value) {
+ if (value) {
+ localStorage.setItem(key, value);
+ }
+ }
+
+ // Remove entry from storage
+ function removeItem(key) {
+ localStorage.removeItem(key);
+ }
+
  // Store data from simple inputs
  function handleSimpleInput(event) {
  if (event.target.type === "checkbox") {
- localStorage.setItem(event.target.name, event.target.checked);
+ setItem(event.target.name, event.target.checked);
  } else {
- localStorage.setItem(event.target.name, event.target.value);
+ setItem(event.target.name, event.target.value);
  }
  }
 
@@ -181,7 +204,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
  function handleContentEditable(event) {
  const input = event.target.nextElementSibling;
  input.value = event.target.textContent;
- localStorage.setItem(input.name, input.value);
+ setItem(input.name, input.value);
  }
 
  // Store custom skill base characteristic and update related output
@@ -284,7 +307,8 @@ document.addEventListener('DOMContentLoaded', (event) => {
  const selects = clone.querySelectorAll('select');
  const contentEditable = clone.querySelectorAll('[contentEditable]');
  const labels = clone.querySelectorAll('label');
- const highlights = clone.querySelectorAll('.highlight-toggle');
+ const highlight = clone.querySelector('.highlight-toggle');
+ const remove = clone.querySelector('.remove');
 
  inputs.forEach(input => {
  input.name = input.name + n;
@@ -294,9 +318,9 @@ document.addEventListener('DOMContentLoaded', (event) => {
  }
  });
 
- selects.forEach(input => {
- input.name = input.name + n;
- input.id = input.id + n;
+ selects.forEach(select => {
+ select.name = select.name + n;
+ select.id = select.id + n;
  });
 
  labels.forEach(label => {
@@ -312,11 +336,13 @@ document.addEventListener('DOMContentLoaded', (event) => {
  contentEditable.forEach(content => {
  content.addEventListener('input', handleContentEditable);
  });
- highlights.forEach(item => {
- item.addEventListener('input', toggleHighlight);
- });
+ if (highlight) {
+ highlight.addEventListener('input', toggleHighlight);
+ };
+ remove.addEventListener('click', removeCustomItem);
 
  parent.appendChild(clone);
+ disableRemoveButton();
  }
 
  // Generate bonuses from final characteristics
@@ -393,6 +419,18 @@ document.addEventListener('DOMContentLoaded', (event) => {
  }
  }
 
+ function disableRemoveButton() {
+ const buttons = document.querySelectorAll('.remove');
+ buttons.forEach(button => {
+ const row = button.closest('tr');
+ if (row.nextElementSibling === null) {
+ button.disabled = true;
+ } else {
+ button.disabled = false;
+ }
+ })
+ }
+
  function toggleHighlight(event) {
  const parent = event.target.closest('tr');
  const value = event.target.checked;
@@ -404,6 +442,45 @@ document.addEventListener('DOMContentLoaded', (event) => {
  }
  }
 
+ // Remove custom item row
+ function removeCustomItem(event) {
+ const tbody = event.target.closest('tbody');
+ const totalRows = tbody.children;
+ const currentRow = event.target.closest('tr');
+ const indexCurrent = Array.from(totalRows).indexOf(currentRow);
+
+ const inputs = currentRow.querySelectorAll('input');
+
+ // Remove all row's entries from localStorage
+ inputs.forEach(input => {
+ removeItem(input.id);
+ });
+
+ // Reindexing others rows after the one being deleted
+ for (let i = indexCurrent + 1; i < totalRows.length - 1; i++) {
+ reindexItem(totalRows[i], i-1);
+ }
+
+ // Remove all rows and add a default first row
+ Array.from(totalRows).forEach(item => item.remove());
+ addNewRow(tbody, 0);
+
+ // Refill them all
+ fillFromStorage();
+ }
+
+ // Reindex item in storage
+ function reindexItem(el, newIndex) {
+ const inputs = el.querySelectorAll('input, select');
+
+ inputs.forEach(input => {
+ const currentKey = input.name;
+ const newKey = currentKey.replace(/-\d+$/, `-${newIndex}`);
+ setItem(newKey, localStorage.getItem(currentKey));
+ removeItem(currentKey);
+ })
+ }
+
  function exportData() {
  const formData = new FormData(form)
  const json = Object.fromEntries(formData);

package.json

@@ -1,6 +1,6 @@
 {
  "name": "wfrp-sheet",
- "version": "1.1.2",
+ "version": "1.2.0",
  "scripts": {
  "build": "npx eleventy",
  "serve": "npx eleventy --serve",

src/_data/i18n.js

@@ -11,6 +11,16 @@ module.exports = {
  'fr': 'Feuille de personnage',
  'en': 'Character sheet'
  },
+ actions: {
+ title: {
+ 'fr': 'Actions',
+ 'en': 'Actions'
+ },
+ delete: {
+ 'fr': 'Supprimer',
+ 'en': 'Delete'
+ }
+ },
  info: {
  title: {
  'fr': 'Informations du personnage',
@@ -189,7 +199,7 @@ module.exports = {
  }
  },
  initial: {
- 'fr': 'Intiales',
+ 'fr': 'Initiales',
  'en': 'Initial'
  },
  advances: {