Rewrite of MojsInteractive.vue and moved all custom play functions to use Mojs Player

Author: Sandstedt

docs/.vuepress/components/DemoExpandingCircles.vue

@@ -3,44 +3,15 @@
   <div class="mojs-interactive">
     <slot></slot>
     <div class="mojs-interactive__result" id="demo-expanding-circle" style="background: rgb(241, 226, 215); height: 600px">
-      <button class="button button--icon button--control" v-on:click="playPause" :aria-label="isPlaying ? 'Pause animation' : 'Play animation'">{{isPlaying ? '⇤' : '︎︎︎▶︎'}}</button>
       <div id="demo-expanding-circle_controller" class="mojs-interactive__controller"></div>
     </div>
   </div>
 </template>
 
 <script>
   export default {
-    data: function () {
-      return {
-        isPlaying: false,
-        prefersReducedMotion: false,
-      }
-    },
-
-    methods: {
-      playPause: function() {
-        if (this.isPlaying) {
-          this.timeline.replayBackward(
-            this.prefersReducedMotion ? 1800 : 0
-          );
-        } else {
-          this.timeline.play(
-            this.prefersReducedMotion ? 1700 : 0
-          );
-        }
-        this.isPlaying = !this.isPlaying;
-      }
-    },
 
     mounted: function () {
-      var motionQuery = matchMedia('(prefers-reduced-motion)');
-      const handleReduceMotionChanged = () => {
-        this.prefersReducedMotion = motionQuery.matches;
-      }
-      motionQuery.addListener(handleReduceMotionChanged);
-      handleReduceMotionChanged(); // trigger once on load to check initial value
-
       import('@mojs/core').then(module => {
         import('@mojs/player').then(module => {
 
@@ -174,7 +145,7 @@
             name: "demo-expanding-circle_controller",
             className: 'controller',
             isSaveState: false,
-            isHidden: true,
+            isHidden: false,
           });
 
         });

docs/.vuepress/components/MojsCode.vue

@@ -41,7 +41,7 @@ new mojs.Shape({
 
     props: {
       id: { type: String, default: 'code_example' },
-      controller: { type: [String, Boolean], default: false },
+      controller: { type: [String, Boolean], default: true },
       height: { type: String, default: '300px' },
       code: { type: [String, Boolean], default: '' },
       dark: { type: Boolean, default: false }, // if you want the demo to be dark 🕶

docs/.vuepress/components/MojsInteractive.vue

@@ -10,11 +10,22 @@ Usage:
 })"
 />
 
-or if you wanna declare a height or a controller:
+With autoplay on the timeline:
+<MojsInteractive
+  id="unique_id"
+  autoplay
+  code=
+"new mojs.Shape({
+  parent:       '#unique_id',
+  shape:        'circle',
+  radius:       {20: 80},
+})"
+/>
+
+or if you wanna declare a height:
 
 <MojsInteractive
   id="unique_id"
-  :controller=true
   height="200px"
   code=
 "new mojs.Shape({
@@ -24,26 +35,54 @@ or if you wanna declare a height or a controller:
 })"
 />
 
-or with no controlls at all (static animation, unless you provide a .play() function):
+or with no controlls (will have no animation, unless you provide a .play() function yourself):
 
 <MojsInteractive
   id="unique_id"
-  :playbutton=false
+  :controller=false
   code=
 "new mojs.Shape({
   parent:       '#unique_id',
   shape:        'circle',
   radius:       {20: 80},
 }).play()"
 />
+
+If you want to show (and use) the decleration of the animation like this:
+
+const bouncyCircle = new mojs.Shape({
+  ...
+});
+
+bouncyCircle.play()
+
+Then you may wanna use the global mode.
+The string passed in the global prop should equal the variable you declared.
+Note that it will be global, so make sure it's unique, and use it carefully:
+
+<MojsInteractive
+  id="bouncyCircle"
+  autoplay
+  global="circles"
+  code=
+"const circles = new mojs.Shape({
+  parent:       '#bouncyCircle',
+  shape:        'circle',
+  fill:         {'#F64040': '#FC46AD'},
+});
+
+circles.play()"
+>
+</MojsInteractive>
+
 */
 
 <template>
   <div class="mojs-interactive">
     <div
       class="mojs-interactive__code"
     >
-      <prism-editor :code="code" language="js" @change="change"></prism-editor>
+      <prism-editor :code="rawCode" language="js" @change="change"></prism-editor>
       <div class="buttons">
         <button class="button button--secondary" v-on:click="reset">Reset</button>
         <button class="button" v-on:click="updateCode">Update code</button>
@@ -55,8 +94,6 @@ or with no controlls at all (static animation, unless you provide a .play() func
       :class="'mojs-interactive__result ' + (dark ? 'mojs-interactive__result--dark' : '')"
       :style="style"
     >
-      <button class="button button--icon button--control" v-if="!controller && playbutton" v-on:click="playPause" :aria-label="isPlaying ? 'Pause animation' : 'Play animation'">{{isPlaying ? '⑊' : '︎︎︎▶︎'}}</button>
-      <!-- <button class="button button--icon button--control" v-if="!isPlaying && !controller" v-on:click="play" aria-label="Play animation">▶︎</button> -->
       <div v-if="controller" :id="this.id + '_controller'" class="mojs-interactive__controller"></div>
     </div>
   </div>
@@ -73,13 +110,14 @@ or with no controlls at all (static animation, unless you provide a .play() func
 
     props: {
       id: { type: String, default: 'code_example' }, // A unique ID
-      controller: { type: [String, Boolean], default: false }, // this will create a mojs.Player controller
-      playbutton: { type: Boolean, default: true }, // use this if you want a simple contoller with a play button
+      controller: { type: [String, Boolean], default: true }, // this will create a mojs.Player controller
+      playbutton: { type: Boolean, default: false }, // use this if you want a simple contoller with a play button
       height: { type: String, default: '300px' }, // add a custom height to the container, takes all CSS values
       code: { type: String, default: '' }, // the code (as a string) to be executed
       dark: { type: Boolean, default: false }, // if you want the demo to be dark 🕶
       notice: { type: [String, Boolean], default: false }, // to show a "click somewhere to activate animation" text
       autoplay: { type: Boolean, default: false }, // if your REALY want it to autoplay. Use with responsibility!
+      global: { type: String, default: '' }
     },
 
     data: function () {
@@ -105,48 +143,46 @@ or with no controlls at all (static animation, unless you provide a .play() func
         if (!window) return; // For SSR
 
         // Do some cleaning
+        var domRef = window['demo_' + this.id] || (this.global !== '' && window[this.global]);
+
         // Stop, remove and delete previous instance of: demo_', this.id
-        if (window['demo_' + this.id]) { // the mojs animation element
-          window['demo_' + this.id].stop();
-          window['demo_' + this.id].el.remove(); // remove the DOM node
-          delete window['demo_' + this.id];
+        if (domRef && domRef.stop) { // the mojs animation element
+          domRef.stop();
+          domRef.el.remove(); // remove the DOM node
         }
         // Remove and delete previous instance of player: mojsPlayer_', this.id
         if (window['mojsPlayer_' + this.id]) { // the mojs player element
           window['mojsPlayer_' + this.id].el.remove(); // remove the DOM node
           delete window['mojsPlayer_' + this.id];
         }
 
+        // Normalize variable declaration and moves them to the windows object instead
+        // Then runs the code using new Function()
+        if (this.global !== '') {
+          let normalizedCode = code.replaceAll("const " + this.global, "window." + this.global);
+          normalizedCode = normalizedCode.replaceAll("var " + this.global, "window." + this.global);
+          normalizedCode = normalizedCode.replaceAll("let " + this.global, "window." + this.global);
+
+          new Function(normalizedCode)();
+        } else {
         // Creating a global window object from a provided mojs object (code), and play it.
-        const func = new Function('window["demo_' + this.id + '"] = ' + code);
-        try {
-          func();
-          if (!this.controller && this.playbutton) {
-            this.timeline = new mojs.Timeline({
-              onPlaybackComplete: () => {
-                this.isPlaying = false;
-              }
-            })
-            .add(
-              window['demo_' + this.id]
-            );
-            // Autoplay the timeline when we press the "Update code" button
-            if (play) {
-              this.timeline.play();
-              this.isPlaying = true;
-            }
+
+          const func = new Function('window["demo_' + this.id + '"] = ' + code);
+          try {
+            func();
+          }
+          catch(error) {
+            console.error('Woops, please check your code for errors.', error)
           }
         }
-        catch(error) {
-          console.error('Woops, please check your code for errors.', error)
-        }
-
+        
         // Set the prop :controller=true to include a mojs player
-        if (this.controller && window['demo_' + this.id]) {
+        domRef = window['demo_' + this.id] || (this.global !== '' && window[this.global]); 
+        if (this.controller && domRef) {
           const parentDOM = document.getElementById(this.id + '_controller');
           // Create a global mojs player instance
           window['mojsPlayer_' + this.id] = new MojsPlayer({
-            add: window['demo_' + this.id],
+            add: domRef,
             parent: parentDOM,
             className: 'controller',
             isSaveState: false,
@@ -163,14 +199,14 @@ or with no controlls at all (static animation, unless you provide a .play() func
 
       reset: function() {
         this.handleCode(this.code);
+        this.rawCode = this.code;
       },
 
       playPause: function() {
         if (this.isPlaying) {
           this.timeline.pause();
         } else {
           this.timeline.play();
-
         }
         this.isPlaying = !this.isPlaying;
       },

docs/.vuepress/styles/index.styl

@@ -195,12 +195,6 @@ blockquote {
 .mojs-interactive__result {
   position: relative;
 }
-.mojs-interactive__result .button--control {
-  position: absolute;
-  bottom: 0;
-  left: 0; // keep it to the left to prevent colliding with MojsPlayer expander
-  z-index: 100;
-}
 .mojs-interactive__result {
   background: #f1e2d7;
   width: 100%;

docs/tutorials/getting-started.md

@@ -14,11 +14,12 @@
 
 
 <MojsInteractive
-  id="bouncy_circle"
-  :controller=true
+  id="bouncyCircle"
+  autoplay
+  global="bouncyCircle"
   code=
-"new mojs.Shape({
-  parent:       '#bouncy_circle',
+"const bouncyCircle = new mojs.Shape({
+  parent:       '#bouncyCircle',
   shape:        'circle',
   fill:         {'#F64040': '#FC46AD'},
   radius:       {20: 80},
@@ -27,7 +28,9 @@
   isShowStart:  true,
   easing:       'elastic.inout',
   repeat:       1,
-})"
+});
+
+bouncyCircle.play()"
 >
 </MojsInteractive>
 
@@ -39,9 +42,11 @@ Or maybe a loading animation?
 
 <MojsInteractive
   id="spinner"
+  autoplay
   height="200px"
+  global="spinner"
   code=
-"new mojs.Shape({
+"const spinner = new mojs.Shape({
   parent:           '#spinner',
   shape:            'circle',
   stroke:           '#FC46AD',
@@ -62,10 +67,9 @@ Or maybe a loading animation?
   strokeDashoffset: {'-125': '-250'},
   duration:         3000,
   easing:           'cubic.out',
-  onComplete () {
-    this.replay(0); // create an infinite loop
-  }
-})"
+});
+
+spinner.play();"
 >
 </MojsInteractive>