Merge pull request #18 from mojs/mojsinteractive-bugfix

Downgrading vue-prism-editor
mojs · Nov 2, 2020 · 38e8d94 · 38e8d94
2 parents f9d8c7b + 025b5b5
commit 38e8d94
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 116 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
 docs/.vuepress/dist
+.vscode
diff --git a/docs/.vuepress/components/MojsInteractive.vue b/docs/.vuepress/components/MojsInteractive.vue
@@ -79,147 +79,171 @@ circles.play()"
 
 <template>
   <div class="mojs-interactive">
-    <div
-      class="mojs-interactive__code"
-    >
-      <prism-editor :code="rawCode" language="js" @change="change"></prism-editor>
+    <div class="mojs-interactive__code">
+      <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 button--secondary" v-on:click="reset">
+          Reset
+        </button>
         <button class="button" v-on:click="updateCode">Update code</button>
       </div>
     </div>
-    <p v-if="notice" class="mojs-interactive__clicknotice">{{this.notice}}</p>
+    <p v-if="notice" class="mojs-interactive__clicknotice">{{ this.notice }}</p>
     <div
       :id="this.id"
-      :class="'mojs-interactive__result ' + (dark ? 'mojs-interactive__result--dark' : '')"
+      :class="
+        'mojs-interactive__result ' +
+        (dark ? 'mojs-interactive__result--dark' : '')
+      "
       :style="style"
     >
-      <div v-if="controller" :id="this.id + '_controller'" class="mojs-interactive__controller"></div>
+      <div
+        v-if="controller"
+        :id="this.id + '_controller'"
+        class="mojs-interactive__controller"
+      ></div>
     </div>
   </div>
 </template>
 
 <script>
-  import prism from 'prismjs';
-  import PrismEditor from 'vue-prism-editor'
-
-  export default {
-    components: {
-      PrismEditor
-    },
-
-    props: {
-      id: { type: String, default: 'code_example' }, // A unique ID
-      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: '' }
+import prism from "prismjs";
+import PrismEditor from "vue-prism-editor";
+
+export default {
+  components: {
+    PrismEditor,
+  },
+
+  props: {
+    id: { type: String, default: "code_example" }, // A unique ID
+    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 () {
+    return {
+      rawCode: this.code,
+      isPlaying: false,
+    };
+  },
+
+  computed: {
+    style() {
+      return "height: " + this.height;
     },
+  },
 
-    data: function () {
-      return {
-        rawCode: this.code,
-        isPlaying: false,
-      }
+  methods: {
+    change: function (c) {
+      this.rawCode = c;
     },
 
-    computed: {
-      style () {
-        return 'height: ' + this.height;
-      }
-    },
+    handleCode: function (code, play) {
+      if (!window) return; // For SSR
 
-    methods: {
-      change: function(c) {
-        this.rawCode = c;
-      },
+      // Do some cleaning
+      var domRef =
+        window["demo_" + this.id] ||
+        (this.global !== "" && window[this.global]);
 
-      handleCode: function(code, play) {
-
-        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 (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);
+      // Stop, remove and delete previous instance of: 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];
+      }
 
-          new Function(normalizedCode)();
-        } else {
+      // 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();
-          }
-          catch(error) {
-            console.error('Woops, please check your code for errors.', error)
-          }
+        const func = new Function('window["demo_' + this.id + '"] = ' + code);
+        try {
+          func();
+        } catch (error) {
+          console.error("Woops, please check your code for errors.", error);
         }
+      }
 
-        // Set the prop :controller=true to include a mojs player
-        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: domRef,
-            parent: parentDOM,
-            className: 'controller',
-            isSaveState: false,
-            isPlaying: play ? true : this.autoplay, // Autoplay/continue the MojsPlayer when we press the "Update code" button
-            isRepeat: true,
-            name: 'demo_' + this.id,
-          });
-        }
-      },
+      // Set the prop :controller=true to include a mojs player
+      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: domRef,
+          parent: parentDOM,
+          className: "controller",
+          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, true);
+    },
 
-      updateCode: function() {
-        this.handleCode(this.rawCode, true);
-      },
+    reset: function () {
+      this.handleCode(this.code);
+      this.rawCode = this.code;
+    },
 
-      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;
-      },
+    playPause: function () {
+      if (this.isPlaying) {
+        this.timeline.pause();
+      } else {
+        this.timeline.play();
+      }
+      this.isPlaying = !this.isPlaying;
     },
+  },
 
-    mounted () {
-      import('@mojs/core').then(module => {
-        import('@mojs/player').then(module => {
-          this.handleCode(this.code);
-        });
+  mounted() {
+    import("@mojs/core").then((module) => {
+      import("@mojs/player").then((module) => {
+        this.handleCode(this.code);
       });
-    }
-  }
+    });
+  },
+};
 </script>
 
 <style>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,6 @@
     "@mojs/curve-editor": "^1.5.0",
     "@mojs/player": "^0.43.16",
     "@vuepress/shared-utils": "^1.7.1",
-    "vue-prism-editor": "^1.2.2"
+    "vue-prism-editor": "^0.6.1"
   }
 }