Prevented autoplay on interactive code for performence and stability

Author: Sandstedt

docs/.vuepress/components/MojsInteractive.vue

@@ -23,6 +23,19 @@ or if you wanna declare a height or a controller:
   radius:       {20: 80},
 })"
 />
+
+or with no controlls at all (static animation, unless you provide a .play() function):
+
+<MojsInteractive
+  id="unique_id"
+  :playbutton=false
+  code=
+"new mojs.Shape({
+  parent:       '#unique_id',
+  shape:        'circle',
+  radius:       {20: 80},
+}).play()"
+/>
 */
 
 <template>
@@ -46,7 +59,7 @@ or if you wanna declare a height or a controller:
       :class="'mojs-interactive__result ' + (dark ? 'mojs-interactive__result--dark' : '')"
       :style="style"
     >
-      <button class="button button--icon button--control" v-if="!controller" v-on:click="playPause" :aria-label="isPlaying ? 'Pause animation' : 'Play animation'">{{isPlaying ? '⑊' : '︎︎︎▶︎'}}</button>
+      <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>
@@ -63,12 +76,14 @@ or if you wanna declare a height or a controller:
     },
 
     props: {
-      id: { type: String, default: 'code_example' },
-      controller: { type: [String, Boolean], default: false },
-      height: { type: String, default: '300px' },
-      code: { type: String, default: '' },
-      dark: { type: Boolean, default: false },
+      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
+      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!
     },
 
     data: function () {
@@ -90,36 +105,41 @@ or if you wanna declare a height or a controller:
         this.rawCode = c;
       },
 
-      handleCode: function(code) {
+      handleCode: function(code, play) {
 
         if (!window) return; // For SSR
-        
+
         // Do some cleaning
+        // 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]; 
         }
+        // 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];
         }
+
         // 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) {            
+          if (!this.controller && this.playbutton) {            
             this.timeline = new mojs.Timeline({
               onPlaybackComplete: () => {
                 this.isPlaying = false;
               }
             })
             .add(
               window['demo_' + this.id]
-            )
-            .play();
-            
-            this.isPlaying = true;
+            );
+            // Autoplay the timeline when we press the "Update code" button
+            if (play) {
+              this.timeline.play();
+              this.isPlaying = true;
+            }            
           }
         }
         catch(error) {
@@ -129,22 +149,21 @@ or if you wanna declare a height or a controller:
         // Set the prop :controller=true to include a mojs player
         if (this.controller && window['demo_' + this.id]) {
           const parentDOM = document.getElementById(this.id + '_controller');              
-          
           // Create a global mojs player instance
           window['mojsPlayer_' + this.id] = new MojsPlayer({
             add: window['demo_' + this.id],
             parent: parentDOM,
             className: 'controller',
-            isSaveState: true,
-            isPlaying: true,
+            isSaveState: false,
+            isPlaying: play ? true : this.autoplay, // Autoplay/continue the MojsPlayer when we press the "Update code" button
             isRepeat: true,
             name: 'demo_' + this.id,
           });
         }
       },
 
       updateCode: function() {
-        this.handleCode(this.rawCode);
+        this.handleCode(this.rawCode, true);
       },
 
       reset: function() {

docs/tutorials/shape-swirl/README.md

@@ -47,6 +47,7 @@ Obviously, you can style the shape as you want (play around with the different p
 
 <MojsInteractive
   id="circle"
+  :playbutton=false
   code=
 "new mojs.Shape({
   parent:       '#circle',
@@ -72,6 +73,7 @@ Numeric properties may be unit based (like `top`/`left` below) or can be express
 
 <MojsInteractive
   id="values"
+  :playbutton=false
   code=
 "new mojs.Shape({
   parent:       '#values',
@@ -96,6 +98,7 @@ The `radius` property sets shape's (no prizes for guessing) radius. Also, you ca
 
 <MojsInteractive
   id="radius_example"
+  :playbutton=false
   code=
 "new mojs.Shape({
   parent:       '#radius_example',
@@ -266,6 +269,7 @@ To keep the `APIs` declarative, `mojs` uses `delta` objects to describe transiti
 
 <MojsInteractive
   id="delta"
+  :playbutton=false
   code=
 "new mojs.Shape({
   parent:       '#delta',