added component for vocabulary

vocabulary/ccm.vocabulary.js

@@ -0,0 +1,101 @@
+/**
+ * @overview ccmjs-based web component for vocabulary
+ * @author André Kless <[email protected]> 2021
+ * @license The MIT License (MIT)
+ * @version latest (1.0.0)
+ */
+
+( () => {
+  const component = {
+    name: 'vocabulary',
+    ccm: 'https://ccmjs.github.io/ccm/versions/ccm-27.1.1.min.js',
+    config: {
+      "css": [ "ccm.load",
+        [  // serial
+          "https://ccmjs.github.io/akless-components/libs/bootstrap-5/css/bootstrap.min.css",
+          "https://ccmjs.github.io/akless-components/qa_slidecast_builder/resources/styles.min.css"
+        ],
+        "https://ccmjs.github.io/akless-components/libs/bootstrap-5/css/bootstrap-icons.min.css",
+        { "url": "https://ccmjs.github.io/akless-components/libs/bootstrap-5/css/bootstrap-fonts.min.css", "context": "head" },
+      ],
+      "data": { "store": [ "ccm.store" ] },
+      "helper": [ "ccm.load", "https://ccmjs.github.io/akless-components/modules/versions/helper-7.8.0.min.mjs" ],
+      "html": [ "ccm.load", "https://ccmjs.github.io/akless-components/vocabulary/resources/templates.mjs" ],
+      "libs": [ "ccm.load", "https://ccmjs.github.io/akless-components/libs/bootstrap-5/js/bootstrap.bundle.min.js" ]
+    },
+    Instance: function () {
+
+      /**
+       * shortcut to help functions
+       * @type {Object.<string,Function>}
+       */
+      let $;
+
+      /**
+       * app state data
+       * @type {Object}
+       */
+      let data;
+
+      /**
+       * when the instance is created, when all dependencies have been resolved and before the dependent sub-instances are initialized and ready
+       * @returns {Promise<void>}
+       */
+      this.init = async () => {
+
+        // set shortcut to help functions
+        $ = Object.assign( {}, this.ccm.helper, this.helper ); $.use( this.ccm );
+
+      };
+
+      /**
+       * when all dependencies are solved after creation and before the app starts
+       * @returns {Promise<void>}
+       */
+      this.ready = async () => {
+
+      }
+
+      /**
+       * starts the app
+       * @returns {Promise<void>}
+       */
+      this.start = async () => {
+
+        // get app state data
+        data = $.assign( { languages: [ '', '' ], translations: [ [ '', '' ] ] }, await $.dataset( this.data ) );
+
+        // render main HTML structure
+        render();
+
+      };
+
+      /**
+       * returns the current app state data
+       * @returns {Object}
+       */
+      this.getValue = () => $.clone( this.translations );
+
+      /** updates main HTML template */
+      const render = () => this.html.render( this.html.main( data, events ), this.element );
+
+      /**
+       * contains all event handlers
+       * @type {Object.<string,Function>}
+       */
+      const events = {
+        onChangeLanguage: async ( value, col ) => {
+          data.languages[ col ] = value;
+          await this.store.set( data );
+        },
+        onChangeVocabulary: async ( value, row, col ) => {
+          data.translations[ col ][ row ] = value;
+          await this.store.set( data );
+          render();
+        }
+      };
+
+    }
+  };
+  let b="ccm."+component.name+(component.version?"-"+component.version.join("."):"")+".js";if(window.ccm&&null===window.ccm.files[b])return window.ccm.files[b]=component;(b=window.ccm&&window.ccm.components[component.name])&&b.ccm&&(component.ccm=b.ccm);"string"===typeof component.ccm&&(component.ccm={url:component.ccm});let c=(component.ccm.url.match(/(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)/)||[""])[0];if(window.ccm&&window.ccm[c])window.ccm[c].component(component);else{var a=document.createElement("script");document.head.appendChild(a);component.ccm.integrity&&a.setAttribute("integrity",component.ccm.integrity);component.ccm.crossorigin&&a.setAttribute("crossorigin",component.ccm.crossorigin);a.onload=function(){(c="latest"?window.ccm:window.ccm[c]).component(component);document.head.removeChild(a)};a.src=component.ccm.url}
+} )();

vocabulary/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="author" content="André Kless <[email protected]> 2021">
+<meta name="license" content="The MIT License (MIT)">
+<title>Demo | Vocabulary Trainer</title>
+<style>body { margin: 0; }</style>
+<script src="https://ccmjs.github.io/akless-components/vocabulary/versions/ccm.vocabulary-1.0.0.js"></script>
+<ccm-vocabulary-1-0-0 src='["ccm.load","https://ccmjs.github.io/akless-components/vocabulary/resources/resources.mjs#demo"]'></ccm-vocabulary-1-0-0>

vocabulary/resources/resources.mjs

@@ -0,0 +1,44 @@
+/**
+ * @overview data-based resources of ccmjs-based web component for vocabulary
+ * @author André Kless <[email protected]> 2021
+ * @license The MIT License (MIT)
+ */
+
+/**
+ * test configuration (relative paths)
+ * @type {Object}
+ */
+export const test = {
+  "css": [ "ccm.load",
+    [  // serial
+      "./../libs/bootstrap-5/css/bootstrap.css",
+      "./../vocabulary/resources/styles.css"
+    ],
+    "./../libs/bootstrap-5/css/bootstrap-icons.css",
+    { "url": "./../libs/bootstrap-5/css/bootstrap-fonts.css", "context": "head" }
+  ],
+  "data": {
+    "store": [ "ccm.store", {
+      "foo": {
+        "languages": [ "Deutsch", "Englisch" ],
+        "translations": [
+          [ "Haus", "House" ],
+          [ "Apfel", "Apple" ],
+          [ "Schule", "School" ]
+        ]
+      }
+    } ],
+    "key": "foo"
+  },
+  "helper.1": "./../modules/helper.mjs",
+  "html.1": "./../vocabulary/resources/templates.mjs",
+  "libs.1": "./../libs/bootstrap-5/js/bootstrap.bundle.min.js"
+};
+
+/**
+ * demo configuration (absolute paths)
+ * @type {Object}
+ */
+export const demo = {
+
+};

vocabulary/resources/styles.css

@@ -0,0 +1,18 @@
+/**
+ * @overview default layout of ccmjs-based web component for vocabulary
+ * @author André Kless <[email protected]> 2021
+ * @license The MIT License (MIT)
+ */
+
+input {
+  border: none;
+  background: transparent;
+  border-bottom: 1px solid #fff;
+  outline: none;
+  color: black;
+  width: 100%;
+}
+
+th input {
+  font-weight: bold;
+}

vocabulary/resources/templates.mjs

@@ -0,0 +1,54 @@
+/**
+ * @overview HTML templates of ccmjs-based web component for vocabulary
+ * @author André Kless <[email protected]> 2021
+ */
+
+import { html, render } from 'https://ccmjs.github.io/akless-components/libs/lit/lit.js';
+export { render };
+
+/**
+ * returns the main HTML template
+ * @param {Object} data - app state data
+ * @param {Object.<string,Function>} events - contains all event handlers
+ * @returns {TemplateResult} main HTML template
+ */
+export function main( data, events ) {
+  data.translations = data.translations.filter( translation => translation.toString() !== ',' );
+  data.translations.push( [ '', '' ] );
+  return html`
+    <table class="table">
+      <thead>
+        <tr>
+          <th scope="col">
+            <input .value="${ data.languages[ 0 ] }" placeholder="Sprache eingeben..." @change=${ event => events.onChangeLanguage( event.target.value, 0 ) }>
+          </th>
+          <th scope="col">
+            <input .value="${ data.languages[ 1 ] }" placeholder="Sprache eingeben..." @change=${ event => events.onChangeLanguage( event.target.value, 1 ) }>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        ${ data.translations.map( translation ) }
+      </tbody>
+    </table>
+  `;
+
+  /**
+   * returns the HTML template for a row in the vocabulary table
+   * @param {[string,string]} [values] - vocabulary word with translation
+   * @param {number} i - vocabulary index
+   * @returns {TemplateResult}
+   */
+  function translation( [ word, translation ], i ) {
+    return html`
+      <tr>
+        <td>
+          <input placeholder="Vokabel eingeben..." .value="${ word }" @change=${ event => events.onChangeVocabulary( event.target.value.trim(), 0, i ) }>
+        </td>
+        <td>
+          <input placeholder="Übersetzung eingeben..." .value="${ translation }" @change=${ event => events.onChangeVocabulary( event.target.value.trim(), 1, i ) }>
+        </td>
+      </tr>
+    `;
+  }
+}

vocabulary/test.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="author" content="André Kless <[email protected]> 2021">
+<meta name="license" content="The MIT License (MIT)">
+<title>Test | Vocabulary Trainer</title>
+<style>body { margin: 0; }</style>
+<script src="./../libs/ccm/ccm.js"></script>
+<ccm-app ccm="latest" component="./ccm.vocabulary.js" src='["ccm.load","./resources/resources.mjs#test"]'></ccm-app>

vocabulary/versions/ccm.vocabulary-1.0.0.js

@@ -0,0 +1,102 @@
+/**
+ * @overview ccmjs-based web component for vocabulary
+ * @author André Kless <[email protected]> 2021
+ * @license The MIT License (MIT)
+ * @version 1.0.0
+ */
+
+( () => {
+  const component = {
+    name: 'vocabulary',
+    version: [ 1, 0, 0 ],
+    ccm: 'https://ccmjs.github.io/ccm/versions/ccm-27.1.1.min.js',
+    config: {
+      "css": [ "ccm.load",
+        [  // serial
+          "https://ccmjs.github.io/akless-components/libs/bootstrap-5/css/bootstrap.min.css",
+          "https://ccmjs.github.io/akless-components/qa_slidecast_builder/resources/styles.min.css"
+        ],
+        "https://ccmjs.github.io/akless-components/libs/bootstrap-5/css/bootstrap-icons.min.css",
+        { "url": "https://ccmjs.github.io/akless-components/libs/bootstrap-5/css/bootstrap-fonts.min.css", "context": "head" },
+      ],
+      "data": { "store": [ "ccm.store" ] },
+      "helper": [ "ccm.load", "https://ccmjs.github.io/akless-components/modules/versions/helper-7.8.0.min.mjs" ],
+      "html": [ "ccm.load", "https://ccmjs.github.io/akless-components/vocabulary/resources/templates.mjs" ],
+      "libs": [ "ccm.load", "https://ccmjs.github.io/akless-components/libs/bootstrap-5/js/bootstrap.bundle.min.js" ]
+    },
+    Instance: function () {
+
+      /**
+       * shortcut to help functions
+       * @type {Object.<string,Function>}
+       */
+      let $;
+
+      /**
+       * app state data
+       * @type {Object}
+       */
+      let data;
+
+      /**
+       * when the instance is created, when all dependencies have been resolved and before the dependent sub-instances are initialized and ready
+       * @returns {Promise<void>}
+       */
+      this.init = async () => {
+
+        // set shortcut to help functions
+        $ = Object.assign( {}, this.ccm.helper, this.helper ); $.use( this.ccm );
+
+      };
+
+      /**
+       * when all dependencies are solved after creation and before the app starts
+       * @returns {Promise<void>}
+       */
+      this.ready = async () => {
+
+      }
+
+      /**
+       * starts the app
+       * @returns {Promise<void>}
+       */
+      this.start = async () => {
+
+        // get app state data
+        data = $.assign( { languages: [ '', '' ], translations: [ [ '', '' ] ] }, await $.dataset( this.data ) );
+
+        // render main HTML structure
+        render();
+
+      };
+
+      /**
+       * returns the current app state data
+       * @returns {Object}
+       */
+      this.getValue = () => $.clone( this.translations );
+
+      /** updates main HTML template */
+      const render = () => this.html.render( this.html.main( data, events ), this.element );
+
+      /**
+       * contains all event handlers
+       * @type {Object.<string,Function>}
+       */
+      const events = {
+        onChangeLanguage: async ( value, col ) => {
+          data.languages[ col ] = value;
+          await this.store.set( data );
+        },
+        onChangeVocabulary: async ( value, row, col ) => {
+          data.translations[ col ][ row ] = value;
+          await this.store.set( data );
+          render();
+        }
+      };
+
+    }
+  };
+  let b="ccm."+component.name+(component.version?"-"+component.version.join("."):"")+".js";if(window.ccm&&null===window.ccm.files[b])return window.ccm.files[b]=component;(b=window.ccm&&window.ccm.components[component.name])&&b.ccm&&(component.ccm=b.ccm);"string"===typeof component.ccm&&(component.ccm={url:component.ccm});let c=(component.ccm.url.match(/(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)/)||[""])[0];if(window.ccm&&window.ccm[c])window.ccm[c].component(component);else{var a=document.createElement("script");document.head.appendChild(a);component.ccm.integrity&&a.setAttribute("integrity",component.ccm.integrity);component.ccm.crossorigin&&a.setAttribute("crossorigin",component.ccm.crossorigin);a.onload=function(){(c="latest"?window.ccm:window.ccm[c]).component(component);document.head.removeChild(a)};a.src=component.ccm.url}
+} )();