FIX #21 add carousel, list of images to be shown in slideshow, config…

…urable interval between slides, control buttons to show specific slide, automatic slideshow

docs/summary.md

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

docs/usersguide/carousel.md

@@ -0,0 +1,15 @@
+# carousel
+
+introduce slideshow with control icons
+
+`<bdl-carousel images="1.jpg|2.jpg|3.jpg"></bdl-carousel>`
+
+carousel also uses 'slot' to project content so using
+
+`<bdl-carousel badges="3"><img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /></bdl-carousel>`
+
+Demo1:
+
+<bdl-carousel images="Bodylight_loading2_amber.gif|Bodylight_loading2_black.gif|Bodylight_loading2_grey.gif" infos="this is amber| This is black.| This is grey." interval="5"></bdl-carousel>
+
+Demo2 slot:

src/elements/carousel.css

@@ -0,0 +1,2 @@
+.w3-left, .w3-right, .w3-badge {cursor:pointer}
+.w3-badge {height:13px;width:13px;padding:0}

src/elements/carousel.html

@@ -0,0 +1,13 @@
+<template>
+  <require from="./carousel.css"></require>
+  <div class="w3-content w3-display-container w3-center">
+    <img repeat.for="img of imgs" class="mySlides w3-animate-right" src="${img.src}" show.bind="img.show" >
+    <slot></slot>
+    <div class="w3-center w3-display-bottommiddle" style="width:100%">
+      <div class="w3-left" click.delegate="plusDivsC(-1)">&#10094;</div>
+      <div class="w3-right" click.delegate="plusDivsC(1)">&#10095;</div>
+      <span repeat.for="item of items" class.bind="item.show?'w3-badge demo w3-border w3-amber w3-hover-amber':'w3-badge demo w3-border w3-transparent w3-hover-amber'" click.delegate="currentDiv(item)"></span>
+    </div>
+  </div>
+  <div class="w3-center"><i>${currentinfo}</i></div>
+</template>

src/elements/carousel.js

@@ -0,0 +1,100 @@
+import {bindable} from 'aurelia-framework';
+
+export class Carousel {
+  slideIndex = 0;
+  @bindable images;
+  @bindable badges;
+  @bindable infos;
+  items = [];
+  imgs = [];
+  infoarray = [];
+  currentinfo = '';
+  @bindable interval;
+  timeoutinterval = 15000; //default is 15000 ms
+
+  //showDivs(slideIndex);
+
+  bind() {
+    //either badges are defined - images in slot, or images are defined
+    //badges = 5, defines number of dots/badges generated
+    //create items array - numbers from 0 to 'badges -1'
+    if (this.badges) {
+      let numbadges = parseInt(this.badges, 10);
+      for (let i = 0; i < numbadges; i++) {
+        this.items.push({index: i, show: (i === 0)});
+      }
+    } else {
+      //images='i1.jpg|i2.jpg' if defined then <img> are generated
+      //split by |, and add it to imgs array
+      if (this.images) {
+        let imagesarray = this.images.split('|'); //split by pipe or comma
+        for (let i = 0; i < imagesarray.length; i++) {
+          this.imgs.push({src: imagesarray[i], show: (i === 0)});
+          this.items.push({index: i, show: (i === 0)});
+        }
+      }
+    }
+    if (this.infos) {
+      this.infoarray = this.infos.split('|');
+      this.currentinfo = this.infoarray[0];
+    }
+    //if defined, then recount timeoutinterval to ms based on interval attribute
+    if (this.interval) {
+      let is = parseInt(this.interval, 10);
+      this.timeoutinterval = is * 1000;
+    }
+  }
+
+  attached() {
+    let carouselobj = this;
+    if (this.timeoutinterval > 0) this.timeoutvar = setTimeout(() => {carouselobj.carousel();}, carouselobj.timeoutinterval);
+  }
+
+  carousel() {
+    //increment slideindex and schedule next increment
+    this.plusDivs(1);
+    // keep this instance as local var
+    let carouselobj = this;
+    //schedule next slideshow in timeoutinterval (5s)
+    if (this.timeoutinterval > 0) this.timeoutvar = setTimeout(() => {carouselobj.carousel();}, carouselobj.timeoutinterval);
+  }
+
+  plusDivs(n) {
+    this.showDivs(this.slideIndex += n);
+  }
+  plusDivsC(n) {
+    //cancel timeout - based on button click
+    if (this.timeoutvar) {
+      clearTimeout(this.timeoutvar);
+      this.timeoutvar = null;
+    }
+    //call plusdivs
+    this.plusDivs(n);
+  }
+  currentDiv(nitem) {
+    //cancel timeout
+    if (this.timeoutvar) {
+      clearTimeout(this.timeoutvar);
+      this.timeoutvar = null;
+    }
+    //show the requested div
+    let n = nitem.index;
+    this.showDivs(this.slideIndex = n);
+  }
+
+  showDivs(n) {
+    let i;
+    //let x = document.getElementsByClassName('mySlides');
+    //let x;
+    //let dots = document.getElementsByClassName('demo');
+    if (n >= this.items.length) {this.slideIndex = 0;}
+    if (n < 0) {this.slideIndex = this.items.length - 1;}
+    for (i = 0; i < this.items.length; i++) {
+      this.imgs[i].show = false;
+      this.items[i].show = false;
+    }
+    this.imgs[this.slideIndex].show = true;
+    this.items[this.slideIndex].show = true;
+    if (this.infoarray.length > this.slideIndex) this.currentinfo = this.infoarray[this.slideIndex];
+  }
+}

src/index.js

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