ADD range to manipulate single animate obj

creative-connections · May 18, 2023 · 2500c9c · 2500c9c
1 parent dbdc637
commit 2500c9c
Show file tree

Hide file tree

Showing 7 changed files with 41,278 additions and 5 deletions.
diff --git a/dist/bodylight.bundle.js b/dist/bodylight.bundle.js
diff --git a/dist/bodylight.bundle.map b/dist/bodylight.bundle.map
diff --git a/src_aurelia-bodylight-plugin/docs/SrdceRezZluteHotovo.js b/src_aurelia-bodylight-plugin/docs/SrdceRezZluteHotovo.js
diff --git a/src_aurelia-bodylight-plugin/docs/example/animationrange.md b/src_aurelia-bodylight-plugin/docs/example/animationrange.md
@@ -0,0 +1,17 @@
+# Animation driven by range component
+
+```
+<bdl-animate-adobe src="SrdceRezZluteHotovo.js" width="800" height="600" name="SrdceRezZluteHotovo" fromid="id1" responsive="true" playafterstart="false"></bdl-animate-adobe>
+
+
+<bdl-range id="id1" title="" min="0" max="100" default="0" step="1" showicons="false" globalanim="true" animobj="children.0.LevaPredsin_anim"></bdl-range>
+
+<bdl-range id="id2" title="" min="0" max="100" default="0" step="1" showicons="false" globalanim="true" animobj="children.0.PravaPredsin_anim"></bdl-range>
+```
+
+<bdl-animate-adobe src="SrdceRezZluteHotovo.js" width="800" height="600" name="SrdceRezZluteHotovo" fromid="id1" responsive="true" playafterstart="false"></bdl-animate-adobe>
+
+
+<bdl-range id="id1" title="" min="0" max="100" default="0" step="1" showicons="false" globalanim="true" animobj="children.0.LevaPredsin_anim"></bdl-range>
+
+<bdl-range id="id2" title="" min="0" max="100" default="0" step="1" showicons="false" globalanim="true" animobj="children.0.PravaPredsin_anim"></bdl-range>
diff --git a/src_aurelia-bodylight-plugin/docs/summary.md b/src_aurelia-bodylight-plugin/docs/summary.md
@@ -43,4 +43,5 @@
     * [Performance](#example/performance.md)
     * [Remote Value](#example/remotevaluedemo.md)
     * [Manequin Demo](#example/manequindemo.md)
+    * [Animation Range](#example/animationrange.md)
   * [About](#about.md)
diff --git a/src_aurelia-bodylight-plugin/package.json b/src_aurelia-bodylight-plugin/package.json
@@ -1,7 +1,7 @@
 {
   "name": "aurelia-bodylight-plugin",
   "description": "Bodylight plugin for Aurelia framework",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/creative-connections/Bodylight.js-Components.git"

diff --git a/src_aurelia-bodylight-plugin/src/elements/range.js b/src_aurelia-bodylight-plugin/src/elements/range.js
@@ -10,6 +10,7 @@ export class Range {
     @bindable title;
     @bindable showicons = true;
     @bindable globalanim = false;
+    @bindable animobj;
     //@bindable firedata = false; //'position'
     @bindable fireevent = 'input'; //name of the event to be dispatched - should be same as fmi eventlisten
     refinput;
@@ -172,8 +173,21 @@ export class Range {
             //single value is change e.g. externally
             this.setValue(newValue);
             if (this.globalanim) {
-                if (window.ani && window.ani.exportRoot)
-                    window.ani.exportRoot.children[0].gotoAndStop(newValue);
+                if (this.animobj) {
+                    //animate local object
+                    if (!window.ani.animationstarted ) window.ani.enableAnimation();
+
+                    if (window.ani) window.ani.setAnimationValue(this.animobj, newValue);
+                }
+                else {
+                    //animate globally
+                    if (window.ani && window.ani.exportRoot) {
+                        for (animchild of window.ani.exportRoot.children) {
+                        if (typeof animchild.gotoAndStop === 'function')
+                           animchild.gotoAndStop (newValue);                    
+                        }
+                    }
+                }
             }
         }
     }