[WIP] add ImportExportSheet class

src/common/helpers.js

@@ -46,7 +46,7 @@ export function addEventObserver({ el, eventName, eventHandler, selector }) {
  *
  * @param {string} tagName - A string that specifies the type of element to be created.
  * @param {object} [attributes={}] - A object with the attributes to be assigned to the new element.
- * @returns {HTMLElement}
+ * @returns {EnhancedHTMLElement}
  */
 export function createElement(tagName, attributes = {}) {
   const newElement = document.createElement(tagName);
@@ -59,7 +59,7 @@ export function createElement(tagName, attributes = {}) {
   );
   Object.assign(newElement, other);
   if (append && append.length > 0) newElement.append(...append);
-  return newElement;
+  return enhanceElement(newElement);
 }
 
 /**

src/css/book.css

@@ -105,3 +105,7 @@ ul,
   visibility: visible;
   opacity: 1;
 }
+
+.tormenta20-import-export-button {
+  margin-left: 15px;
+}

src/features/character-sheet.js

@@ -7,6 +7,7 @@ import {
   hasCSS,
 } from '../common/helpers';
 import { EquipmentSheet } from './equipments';
+import { ImportExportSheet } from './import-export';
 import { PowerSheet } from './powers';
 import { RaceSheet } from './races';
 import { SpellSheet } from './spells';
@@ -128,6 +129,11 @@ export class CharacterSheet {
       races: this.db.races,
       character: this.character,
     });
+    /** @type {ImportExportSheet} */
+    this.importExportSheet = new ImportExportSheet({
+      iframe: this.iframe,
+      character: this.character,
+    });
     /**
      * @type {EnhancedHTMLElement|null}
      * @private
@@ -223,6 +229,7 @@ export class CharacterSheet {
         this.powerSheet.load();
         this.equipmentSheet.load();
         this.raceSheet.load();
+        this.importExportSheet.load();
         // Observers
         this.observe(this.spellsContainer, () => this.spellSheet.load());
         this.observe(this.powersContainer, () => this.powerSheet.load());

src/features/import-export.js

@@ -0,0 +1,68 @@
+import { createElement, enhanceElement } from '../common/helpers';
+
+/**
+ * Create a new ImportExportSheet object.
+ *
+ * @class
+ */
+export class ImportExportSheet {
+  /**
+   * @constructs
+   * @param {Object} props
+   * @param {EnhancedHTMLElement} props.iframe
+   * @param {Object} props.character
+   */
+  constructor({ iframe, character }) {
+    /** @type {EnhancedHTMLElement} */
+    this.iframe = iframe;
+    /** @type {Object} */
+    this.character = character;
+    this._dialogHeader = null;
+  }
+
+  /** @type {EnhancedHTMLElement|null} */
+  get dialogHeader() {
+    if (this._dialogHeader === null) {
+      const characterId = this.character.get('id');
+      const selector = `iframe[name="iframe_${characterId}"]`;
+      const rawIframe = document.querySelector(selector);
+      const header = rawIframe
+        .closest('div.ui-dialog')
+        .querySelector('div.ui-dialog-titlebar');
+      this._dialogHeader = enhanceElement(header);
+    }
+    return this._dialogHeader;
+  }
+
+  addImportButton() {
+    const span = this.dialogHeader.getElement('span.ui-dialog-title');
+    const importButton = createElement('button', {
+      id: 't20-import-button',
+      classes: 'btn tormenta20-import-export-button',
+      innerHTML: 'Importar',
+    });
+    importButton.addEventObserver('click', () => {
+      console.log('import');
+    });
+    span.insertBefore(importButton, span.childNodes[2]);
+  }
+
+  addExportButton() {
+    const span = this.dialogHeader.getElement('span.ui-dialog-title');
+    const exportButton = createElement('button', {
+      id: 't20-export-button',
+      classes: 'btn tormenta20-import-export-button',
+      innerHTML: 'Exportar',
+    });
+    exportButton.addEventObserver('click', () => {
+      console.log('export');
+    });
+    span.insertBefore(exportButton, span.childNodes[3]);
+  }
+
+  /** Load the sheet import/export capabilities. */
+  load() {
+    this.addImportButton();
+    this.addExportButton();
+  }
+}