FIX #16 added tabs component and basic documentation

docs/summary.md

@@ -23,6 +23,7 @@
       * [Checkbox](#usersguide/checkbox.md)
       * [PDB](#usersguide/pdb.md)
       * [Quiz](#usersguide/quiz.md)
+      * [Tabs](#usersguide/tabs.md)
     * [Developer's Guide](#developersguide.md)
   * [Examples](#examples.md)
     * [Hemodynamics Meurs with controls](#example/hemodynamicsmeurs.md)

docs/usersguide/tabs.md

@@ -0,0 +1,48 @@
+# Tabs
+
+```html
+<bdl-tabs idlist="uvod,modelplic,modeltkani,krivkao2,krivkaco2,porovnani" 
+  titlelist="Úvod,Model plic,Model tkání,Křivka O2,KřivkaCO2,Porovnání O2 a CO2"></bdl-tabs>
+<div id="uvod">
+uvod
+</div>
+<div id="modelplic">
+modelplic
+</div>
+<div id="modeltkani">
+modeltkani
+</div>
+<div id="krivkao2">
+krivkao2
+</div>
+<div id="krivkaco2">
+krivkaco2
+</div>
+<div id="porovnani">
+porovnani
+</div>
+
+```
+Creates tabs (buttons) - associated with divs with id, you should define divs later. 
+If the tab is clicked, the associated div is made visible, others are hidden 
+
+<bdl-tabs idlist="uvod,modelplic,modeltkani,krivkao2,krivkaco2,porovnani" 
+  titlelist="Úvod,Model plic,Model tkání,Křivka O2,KřivkaCO2,Porovnání O2 a CO2"></bdl-tabs>
+<div id="uvod">
+uvod
+</div>
+<div id="modelplic">
+modelplic
+</div>
+<div id="modeltkani">
+modeltkani
+</div>
+<div id="krivkao2">
+krivkao2
+</div>
+<div id="krivkaco2">
+krivkaco2
+</div>
+<div id="porovnani">
+porovnani
+</div>

src/elements/markdown.html

@@ -20,5 +20,6 @@
   <require from="katex/dist/katex.css"></require>
   <require from="font-awesome/css/font-awesome.min.css"></require>
   <require from="./markdown.css"></require>
+  <require from="./tabs"></require>
   <div ref="mydiv"></div>
 </template>

src/elements/markdownaurelia.html

@@ -19,6 +19,7 @@
   <require from="highlight.js/styles/github.css"></require>
   <require from="katex/dist/katex.css"></require>
   <require from="./markdown.css"></require>
+  <require from="./tabs"></require>
   <div class="w3-margin">
     <!-- this is markdown aurelia component - use in aurelia plugin - otherwise use bdl-markdown -->
   <section class="w3-card-2 w3-padding">

src/elements/tabs.html

@@ -0,0 +1,5 @@
+<template>
+    <div class="w3-bar">
+        <button repeat.for="id of ids" class.bind="id.cls" click.delegate="open(id)">${id.title}</button>
+    </div>
+</template>

src/elements/tabs.js

@@ -0,0 +1,56 @@
+import {bindable} from 'aurelia-templating';
+
+export class Tabs {
+    @bindable idlist;
+    @bindable titlelist;
+    ids=[];
+    activeclass='w3-bar-item w3-button w3-white w3-border-top w3-border-left w3-border-right';
+    inactiveclass='w3-bar-item w3-button w3-border-bottom w3-theme-l5';
+    bind() {
+      if (this.idlist) {
+        //convert comma separated list of ids to array [{id:'id1',title:'id1'}]
+        this.ids = this.idlist.split(',').map(x => {return {name: x, title: x, cls: this.inactiveclass};});
+        if (this.titlelist) {
+          let titles = this.titlelist.split(',');
+          //if titles are defined, replace title in the ids array [{id:'id1',title:'title1'}]
+          for (let i = 0; i < titles.length; i++) {
+            if (this.ids[i]) this.ids[i].title = titles[i];
+          }
+        }
+      }
+    }
+    attached() {
+      console.log('tabs component', this);
+      //open first, hide all no-active
+      this.open(this.ids[0]);
+    }
+
+    open(newid) {
+      if (this.active) {
+        this.setinactive(this.active);
+        this.setactive(newid);
+        this.active = newid;
+      } else {
+        for (let id of this.ids) {
+          if (id !== this.active) {this.setinactive(id);}
+        }
+        this.setactive(newid);
+        this.active = newid;
+      }
+    }
+
+    setactive(id) {
+      let el = document.getElementById(id.name);
+      if (el) {
+        el.style.display = 'block';
+        id.cls = this.activeclass;
+      }
+    }
+    setinactive(id) {
+      let el = document.getElementById(id.name);
+      if (el) {
+        el.style.display = 'none';
+        id.cls = this.inactiveclass;
+      }
+    }
+}

src/index.js

@@ -39,6 +39,7 @@ export function configure(config) {
     PLATFORM.moduleName('./elements/markdown-book-au'),
     PLATFORM.moduleName('./elements/markdown-app.html'),
     PLATFORM.moduleName('./elements/fmi'),
-    PLATFORM.moduleName('./elements/pdb-pdbe-molstar')
+    PLATFORM.moduleName('./elements/pdb-pdbe-molstar'),
+    PLATFORM.moduleName('./elements/tabs')
   ]);
 }