ADD binding to another component,attribute, range inputs and hashpara…

…ms fix

docs/usersguide/range.md

@@ -17,12 +17,26 @@ Example:
 E.g. setting range 1 will change range 2 and range 3 so the sum is constant:
 
 ```xml
-O2: <bdl-range id="id3" min="0" max="100" step="1" default="21" ids="id4,id5" convertors="100-2-x;2"></bdl-range>
-N:<bdl-range id="id4" min="0" max="100" step="1" default="77" ids="id3,id5" convertors="100-2-x;2"></bdl-range>
-other:<bdl-range id="id5" min="0" max="100" step="1" default="2" ids="id3,id4" convertors="21;100-21-x"></bdl-range>
+tkan1: <bdl-range id="id3" min="0" max="100" step="1" default="20" ids="id4,id5,id6,id7" convertors="20-x/5;20-x/5;20-x/5;20-x/5"></bdl-range>
+
+        tkan2:<bdl-range id="id4" min="0" max="100" step="1" default="20" ids="id3,id5" convertors="100-2-x;2"></bdl-range>
+
+        tkan3:<bdl-range id="id5" min="0" max="100" step="1" default="20" ids="id3,id4" convertors="21;100-21-x"></bdl-range>
+
+        tkan4:<bdl-range id="id6" min="0" max="100" step="1" default="20" ids="id3,id4" convertors="21;100-21-x"></bdl-range>
+
+        tkan5:<bdl-range id="id7" min="0" max="100" step="1" default="20" ids="id3,id4" convertors="21;100-21-x"></bdl-range>
 
 ```
 
-O2: <bdl-range id="id3" min="0" max="100" step="1" default="21" ids="id4,id5" convertors="100-2-x;2"></bdl-range>
-N:<bdl-range id="id4" min="0" max="100" step="1" default="77" ids="id3,id5" convertors="100-2-x;2"></bdl-range>
-other:<bdl-range id="id5" min="0" max="100" step="1" default="2" ids="id3,id4" convertors="21;100-21-x"></bdl-range>
+tkan1: <bdl-range id="id3" min="0" max="100" step="1" default="20" ids="id4,id5,id6,id7" convertors="20-(x-20)/4;20-(x-20)/4;20-(x-20)/4;20-(x-20)/4"></bdl-range>
+
+tkan2:<bdl-range id="id4" min="0" max="100" step="1" default="20" ids="id3,id5" convertors="100-2-x;2"></bdl-range>
+
+tkan3:<bdl-range id="id5" min="0" max="100" step="1" default="20" ids="id3,id4" convertors="21;100-21-x"></bdl-range>
+
+tkan4:<bdl-range id="id6" min="0" max="100" step="1" default="20" ids="id3,id4" convertors="21;100-21-x"></bdl-range>
+
+tkan5:<bdl-range id="id7" min="0" max="100" step="1" default="20" ids="id3,id4" convertors="21;100-21-x"></bdl-range>
+
+

src/elements/animate-adobe.js

@@ -104,6 +104,7 @@ export class AnimateAdobe {
     }
 
     handleResize() {
+      console.log('animateadobe handleResize()');
       //do not run if ani.lib is not defined - no adobe component is available
       if (!window.ani.lib) return;
       let w = window.ani.lib.properties.width; let h = window.ani.lib.properties.height;
@@ -164,7 +165,7 @@ export class AnimateAdobe {
     }
 
     destroyAdobe() {
-      //console.log('animate adobe destroy()');
+      console.log('animate adobe destroy()');
       if (window.stage) {
         window.stage.enableMouseOver(-1);
         window.stage.enableDOMEvents(false);
@@ -249,6 +250,7 @@ export class AnimateAdobe {
 
     //this is called after animate script is loaded into DOM, so global AdobeAn is available
     initAdobe() {
+      console.log('animateadobe initAdobe()');
       //take the first composition
       if (!window.ani.cid) {
         window.ani.cid = Object.keys(window.AdobeAn.compositions)[0]; //get the first composition
@@ -306,9 +308,12 @@ export class AnimateAdobe {
           window.ani.stopAllAnimation();
           //disable animation ticker
           window.ani.disableAnimation();
+          //TODO fix bug - model in different md not
           //sent ready signal - fmu may make step if oneshot
           let event = new CustomEvent('fmiregister');
           document.dispatchEvent(event);
+          //workaround after resize the artifacts are updated
+          //window.ani.handleResize();
         }
       }, 1000);
     }
@@ -318,6 +323,7 @@ export class AnimateAdobe {
      * @param objname
      */
     startAnimation(objname) {
+      console.log('animateadobe startAnimation() of object');
       const resolvePath = (object, path, defaultValue) => path
         .split('.')
         .reduce((o, p) => o ? o[p] : defaultValue, object);
@@ -336,6 +342,7 @@ export class AnimateAdobe {
      * @param objname
      */
     stopAnimation(objname) {
+      console.log('animateadobe stopAnimation() of object');
       const resolvePath = (object, path, defaultValue) => path
         .split('.')
         .reduce((o, p) => o ? o[p] : defaultValue, object);
@@ -352,6 +359,7 @@ export class AnimateAdobe {
      */
 
     setAnimationValue(objname, value) {
+      console.log('animateadobe setAnimationValue',value);
       //console.log('adobe-animate() setting window.ani.exportRoot.children[0][' + objname + '].gotoAndStop(' + value + ')');
       if (window.ani.exportRoot) {
         //resolve path from string
@@ -371,12 +379,14 @@ export class AnimateAdobe {
      * stops all animation
      */
     stopAllAnimation() {
+      console.log('animateadobe stopAllAnimation');
       if (window.ani.stage) {
         window.ani.stage.stop();
       }
     }
 
     disableAnimation() {
+      console.log('animateadobe disableAnimation');
       if (window.ani) {
         window.ani.animationstarted = false;
         if (window.ani.stage) {
@@ -386,6 +396,7 @@ export class AnimateAdobe {
     }
 
     enableAnimation() {
+      console.log('animateadobe enableAnimation');
       if (window.ani.stage) {window.createjs.Ticker.addEventListener('tick', window.ani.stage);}
       window.ani.animationstarted = true;
     }
@@ -418,6 +429,7 @@ export class AnimateAdobe {
      * starts animation for 20 ms and stops it again
      */
     stepAllAnimation() {
+      console.log('animateadobe stepAnimation, stop after 20ms');
       if (window.ani.stage) {
         window.ani.stage.play();
         setTimeout(()=>{window.ani.stage.stop();}, 20);
@@ -430,6 +442,7 @@ export class AnimateAdobe {
      * @param textvalue
      */
     setText(objname, textvalue) {
+      console.log('animateadobe set text:',textvalue);
       if (window.ani.exportRoot) {
         const resolvePath = (object, path, defaultValue) => path
           .split('.')
@@ -447,6 +460,8 @@ export class AnimateAdobe {
      * @param e
      */
     handleData(e) {
+      //disable fix, fmi sends startevent if oneshot after registering input again issue when one shot mode sends data - but no animation is performed e.g. in editor (oneshot do not send start signal)
+      //if (window.ani && !window.ani.animationstarted) window.ani.enableAnimation()
       let bindings = window.animatebindings;
       //const eps = 1e-12;
       if (!bindings) return;

src/elements/bind2previous.js

@@ -9,6 +9,7 @@ import {bindable} from 'aurelia-framework';
  */
 export class Bind2previous {
   @bindable fromid;
+  @bindable event = 'input'
   @bindable toid;
   @bindable toattribute;
 
@@ -19,13 +20,22 @@ export class Bind2previous {
    }*/
     this.handleValueChange = e => {
       //console.log('handleValueChange, e,fromid,toid', e);
-      if (this.toattribute) document.getElementById(this.toid)[this.toattribute] = e.target.value;
-      else document.getElementById(this.toid).value = e.target.value;
+      let value = e.detail ? e.detail.value : e.target.value;
+      if (this.toattribute) {
+        let el = document.getElementById(this.toid);
+        el.setAttribute(this.toattribute, value);
+        //fix setting depended input attributes -e.g. in <range>
+        let inputs = el.getElementsByTagName('input');
+        if (inputs.length > 0) {
+          for (let input of inputs) input.setAttribute(this.toattribute,value);
+        }
+      }
+      else document.getElementById(this.toid).value = value;
     };
   }
 
   attached() {
-    document.getElementById(this.fromid).addEventListener('input', this.handleValueChange);
+    document.getElementById(this.fromid).addEventListener(this.event, this.handleValueChange);
   }
   detached() {
     if (document.getElementById(this.fromid)) document.getElementById(this.fromid).removeEventListener('input', this.handleValueChange);

src/elements/chartjs-time.js

@@ -87,23 +87,7 @@ export class ChartjsTime extends Chartjs {
     };
     if (this.verticalline) this.type = 'LineWithLine';
     else this.type = 'line';
-    if (this.min) {
-      //sets yscale min
-      if (!this.options) this.options = {};
-      if (!this.options.scales) this.options.scales = {};
-      if (!this.options.scales.yAxes) this.options.scales.yAxes = [{}]; //chartjs 2.9.4
-      if (!this.options.scales.yAxes[0].ticks) this.options.scales.yAxes[0].ticks = {}; //chartjs 2.9.4
-      this.options.scales.yAxes[0].ticks.min = parseFloat(this.min);
-    }
-    if (this.max) {
-      //sets yscale max
-      if (!this.options) this.options = {};
-      if (!this.options.scales) this.options.scales = {};
-      if (!this.options.scales.yAxes) this.options.scales.yAxes = [{}]; //chartjs 2.9.4
-      if (!this.options.scales.yAxes[0].ticks) this.options.scales.yAxes[0].ticks = {}; //chartjs 2.9.4
-      this.options.scales.yAxes[0].ticks.max = parseFloat(this.max);
-      //if (this.min) this.options.scales.yAxes[0].ticks.stepSize = (this.options.scales.yAxes[0].ticks.max - this.options.scales.yAxes[0].ticks.min) / 10;
-    }
+
   }
 
   resetdata() {

src/elements/chartjs.js

@@ -32,6 +32,8 @@ export class Chartjs {
   @bindable canvasobj;
   @bindable throttle=200; //time to throttle chart update, if it is too much at once
   @bindable precision=4;
+  @bindable min; //min for y axis - if chart has this axis
+  @bindable max; //max for y axis - if chart has this axis
   indexsection=0;
   datalabels=false; //may be configured by subclasses
 
@@ -265,6 +267,24 @@ export class Chartjs {
       this.options.section = [];
     }
 
+    if (this.min) {
+      //sets yscale min
+      if (!this.options) this.options = {};
+      if (!this.options.scales) this.options.scales = {};
+      if (!this.options.scales.yAxes) this.options.scales.yAxes = [{}]; //chartjs 2.9.4
+      if (!this.options.scales.yAxes[0].ticks) this.options.scales.yAxes[0].ticks = {}; //chartjs 2.9.4
+      this.options.scales.yAxes[0].ticks.min = parseFloat(this.min);
+    }
+    if (this.max) {
+      //sets yscale max
+      if (!this.options) this.options = {};
+      if (!this.options.scales) this.options.scales = {};
+      if (!this.options.scales.yAxes) this.options.scales.yAxes = [{}]; //chartjs 2.9.4
+      if (!this.options.scales.yAxes[0].ticks) this.options.scales.yAxes[0].ticks = {}; //chartjs 2.9.4
+      this.options.scales.yAxes[0].ticks.max = parseFloat(this.max);
+      //if (this.min) this.options.scales.yAxes[0].ticks.stepSize = (this.options.scales.yAxes[0].ticks.max - this.options.scales.yAxes[0].ticks.min) / 10;
+    }
+
     this.tooltips = ['mousemove', 'touchstart', 'touchmove', 'click'];
   }
 

src/elements/fmi.js

@@ -108,6 +108,13 @@ export class Fmi {
         document.getElementById(target).addEventListener('fmiinput', this.handleDetailChange);
       }
     }
+    //if oneshot - do step
+    if (this.isOneshot) {
+      //console.log('oneshot scheduling startevent in promise() to do step()')
+      setTimeout(this.sendStartEvent.bind(this),1000); //TODO may cause problems sync when animation not yet loaded
+      console.log('oneshot scheduling promise() to do step()')
+      setTimeout(this.step.bind(this),1500);
+    } //do simulation step after 100 ms
   }
 
   deregisterInputs() {

src/elements/markdown-book.js

@@ -9,14 +9,14 @@ export class MarkdownBook extends WatchHashCore {
 
   constructor() {
     super();
-    this.params = 'showmenu,2;base,3';
+    this.params = 'shownav,2;showmenu,3;base,4';
+    this.shownav = true;
+    this.showmenu = true;
   }
 
   bind() {
     //this.value=this.params;//'index,0;summary,1;shownav,2';
     console.log('bdlmarkdownbook index:', this.index, 'summary:', this.summary);
-    this.shownav = true;
-    this.showmenu = true;
     super.bind();
     this.previoustitle = 'previous chapter';
     this.previoustitleshort = 'prev ...';
@@ -26,6 +26,7 @@ export class MarkdownBook extends WatchHashCore {
   /*attached() {
     this.disablenav = !((this.summary) && ((this.summary.length > 0) && (this.summary !== 'false')));
   }*/
+
   //is called if the watchhash attribute is used
   changesrc(...args) {
     /*if (name === 'summary') this.summary = index;
@@ -34,7 +35,10 @@ export class MarkdownBook extends WatchHashCore {
     //if (name === 'base') this.base = index;
     console.log('bdlmarkdownbook changesrc called, args:', args);
     //TODO - hack - first arg is showmenu
-    if (args[0]) this.showmenu = (args[0] !== 'false');
+    if (args[0]) this.shownav = (args[0] !== 'false');
+    if (args['shownav'])this.shownav = (args['shownav'] !== 'false');
+    if (args[1]) this.showmenu = (args[1] !== 'false');
+    if (args['showmenu'])this.showmenu = (args['showmenu'] !== 'false');
     //console.log('bdlmarkdownbook changesrc shownav', this.shownav);
   }
 

src/elements/markdown-book2.html

@@ -25,7 +25,7 @@
                 <markdown base="${base}" src.bind="model"></markdown>
                 </span>
                 <markdown class="w3-padding  w3-palatino" base="${base}" src="${index}" watchhash="index,0;base,3" toc.two-way="toc"></markdown>
-                <markdown-bottom-nav class="w3-padding  w3-palatino" base="${base}" index="${index}" src="${summary}"></markdown-bottom-nav>
+                <markdown-bottom-nav class="w3-padding  w3-palatino" base="${base}" index="${index}" src="${summary}" show.bind="shownav"></markdown-bottom-nav>
             </div>
         </div>
     </div>

src/elements/markdown-book2.js

@@ -13,12 +13,13 @@ export class MarkdownBook2 extends MarkdownBook {
 
     constructor() {
       super();
+      this.params = 'shownav,1;showmenu,2;base,3';
+      this.shownav = true;
+      this.showtoc = true;
     }
 
     bind() {
       super.bind();
-      this.shownav = true;
-      this.showtoc = true;
       //console.log('markdownbook bind shownav', this.shownav);
     }
 
@@ -38,4 +39,8 @@ export class MarkdownBook2 extends MarkdownBook {
       el.scrollIntoView();
       //        document.getElementById(id).scrollIntoView();
     }
+
+    changesrc(...args) {
+      super.changesrc(...args);
+    }
 }

src/elements/markdown-top-nav.html

@@ -1,7 +1,7 @@
 <template>
 <div class="w3-center w3-card-2 w3-theme-d5" style="position: sticky;top: 0">
   <span class="w3-large"><b>${navtitle}&nbsp;</b></span>
-  <span class="w3-left w3-large" click.delegate="showhidenav()" title="switch navigation">&nbsp;&nbsp;&nbsp;<i class="fa fa-bars"></i>&nbsp;</span>
+  <span class="w3-left w3-large" click.delegate="showhidenav()" title="switch fullscreen and navigation">&nbsp;&nbsp;&nbsp;<i class="fa fa-arrows-alt"></i>&nbsp;</span>
   <span class="w3-right w3-large" click.delegate="showhidetoc()" title="switch table of content">&nbsp;<i class="fa fa-file-text-o"></i>&nbsp;&nbsp;&nbsp;</span>
 </div>
 </template>

src/elements/markdown-top-nav.js

@@ -81,6 +81,19 @@ export class MarkdownTopNav {
 
     showhidenav() {
       this.nav = ! this.nav;
+      if (! this.nav) {
+        if (document.documentElement.requestFullscreen) {
+          document.documentElement.requestFullscreen();
+        } else if (document.documentElement.webkitRequestFullscreen) { /* Safari */
+          document.documentElement.webkitRequestFullscreen();
+        }
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) { /* Safari */
+          document.webkitExitFullscreen();
+        }
+      }
     }
 
     showhidetoc() {