Skip to content

Commit 38e8d94

Browse files
SandstedtSandstedt
authored
Merge pull request #18 from mojs/mojsinteractive-bugfix
Downgrading vue-prism-editor
2 parents f9d8c7b + 025b5b5 commit 38e8d94

File tree

4 files changed

+173
-116
lines changed

4 files changed

+173
-116
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules
22
.DS_Store
33
docs/.vuepress/dist
4+
.vscode

‎docs/.vuepress/components/MojsInteractive.vue‎

Lines changed: 136 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -79,147 +79,171 @@ circles.play()"
7979

8080
<template>
8181
<div class="mojs-interactive">
82-
<div
83-
class="mojs-interactive__code"
84-
>
85-
<prism-editor :code="rawCode" language="js" @change="change"></prism-editor>
82+
<div class="mojs-interactive__code">
83+
<prism-editor
84+
:code="rawCode"
85+
language="js"
86+
@change="change"
87+
></prism-editor>
8688
<div class="buttons">
87-
<button class="button button--secondary" v-on:click="reset">Reset</button>
89+
<button class="button button--secondary" v-on:click="reset">
90+
Reset
91+
</button>
8892
<button class="button" v-on:click="updateCode">Update code</button>
8993
</div>
9094
</div>
91-
<p v-if="notice" class="mojs-interactive__clicknotice">{{this.notice}}</p>
95+
<p v-if="notice" class="mojs-interactive__clicknotice">{{ this.notice }}</p>
9296
<div
9397
:id="this.id"
94-
:class="'mojs-interactive__result ' + (dark ? 'mojs-interactive__result--dark' : '')"
98+
:class="
99+
'mojs-interactive__result ' +
100+
(dark ? 'mojs-interactive__result--dark' : '')
101+
"
95102
:style="style"
96103
>
97-
<div v-if="controller" :id="this.id + '_controller'" class="mojs-interactive__controller"></div>
104+
<div
105+
v-if="controller"
106+
:id="this.id + '_controller'"
107+
class="mojs-interactive__controller"
108+
></div>
98109
</div>
99110
</div>
100111
</template>
101112

102113
<script>
103-
import prism from 'prismjs';
104-
import PrismEditor from 'vue-prism-editor'
105-
106-
export default {
107-
components: {
108-
PrismEditor
109-
},
110-
111-
props: {
112-
id: { type: String, default: 'code_example' }, // A unique ID
113-
controller: { type: [String, Boolean], default: true }, // this will create a mojs.Player controller
114-
playbutton: { type: Boolean, default: false }, // use this if you want a simple contoller with a play button
115-
height: { type: String, default: '300px' }, // add a custom height to the container, takes all CSS values
116-
code: { type: String, default: '' }, // the code (as a string) to be executed
117-
dark: { type: Boolean, default: false }, // if you want the demo to be dark 🕶
118-
notice: { type: [String, Boolean], default: false }, // to show a "click somewhere to activate animation" text
119-
autoplay: { type: Boolean, default: false }, // if your REALY want it to autoplay. Use with responsibility!
120-
global: { type: String, default: '' }
114+
import prism from "prismjs";
115+
import PrismEditor from "vue-prism-editor";
116+
117+
export default {
118+
components: {
119+
PrismEditor,
120+
},
121+
122+
props: {
123+
id: { type: String, default: "code_example" }, // A unique ID
124+
controller: { type: [String, Boolean], default: true }, // this will create a mojs.Player controller
125+
playbutton: { type: Boolean, default: false }, // use this if you want a simple contoller with a play button
126+
height: { type: String, default: "300px" }, // add a custom height to the container, takes all CSS values
127+
code: { type: String, default: "" }, // the code (as a string) to be executed
128+
dark: { type: Boolean, default: false }, // if you want the demo to be dark 🕶
129+
notice: { type: [String, Boolean], default: false }, // to show a "click somewhere to activate animation" text
130+
autoplay: { type: Boolean, default: false }, // if your REALY want it to autoplay. Use with responsibility!
131+
global: { type: String, default: "" },
132+
},
133+
134+
data: function () {
135+
return {
136+
rawCode: this.code,
137+
isPlaying: false,
138+
};
139+
},
140+
141+
computed: {
142+
style() {
143+
return "height: " + this.height;
121144
},
145+
},
122146
123-
data: function () {
124-
return {
125-
rawCode: this.code,
126-
isPlaying: false,
127-
}
147+
methods: {
148+
change: function (c) {
149+
this.rawCode = c;
128150
},
129151
130-
computed: {
131-
style () {
132-
return 'height: ' + this.height;
133-
}
134-
},
152+
handleCode: function (code, play) {
153+
if (!window) return; // For SSR
135154
136-
methods: {
137-
change: function(c) {
138-
this.rawCode = c;
139-
},
155+
// Do some cleaning
156+
var domRef =
157+
window["demo_" + this.id] ||
158+
(this.global !== "" && window[this.global]);
140159
141-
handleCode: function(code, play) {
142-
143-
if (!window) return; // For SSR
144-
145-
// Do some cleaning
146-
var domRef = window['demo_' + this.id] || (this.global !== '' && window[this.global]);
147-
148-
// Stop, remove and delete previous instance of: demo_', this.id
149-
if (domRef && domRef.stop) { // the mojs animation element
150-
domRef.stop();
151-
domRef.el.remove(); // remove the DOM node
152-
}
153-
// Remove and delete previous instance of player: mojsPlayer_', this.id
154-
if (window['mojsPlayer_' + this.id]) { // the mojs player element
155-
window['mojsPlayer_' + this.id].el.remove(); // remove the DOM node
156-
delete window['mojsPlayer_' + this.id];
157-
}
158-
159-
// Normalize variable declaration and moves them to the windows object instead
160-
// Then runs the code using new Function()
161-
if (this.global !== '') {
162-
let normalizedCode = code.replaceAll("const " + this.global, "window." + this.global);
163-
normalizedCode = normalizedCode.replaceAll("var " + this.global, "window." + this.global);
164-
normalizedCode = normalizedCode.replaceAll("let " + this.global, "window." + this.global);
160+
// Stop, remove and delete previous instance of: demo_', this.id
161+
if (domRef && domRef.stop) {
162+
// the mojs animation element
163+
domRef.stop();
164+
domRef.el.remove(); // remove the DOM node
165+
}
166+
// Remove and delete previous instance of player: mojsPlayer_', this.id
167+
if (window["mojsPlayer_" + this.id]) {
168+
// the mojs player element
169+
window["mojsPlayer_" + this.id].el.remove(); // remove the DOM node
170+
delete window["mojsPlayer_" + this.id];
171+
}
165172
166-
new Function(normalizedCode)();
167-
} else {
173+
// Normalize variable declaration and moves them to the windows object instead
174+
// Then runs the code using new Function()
175+
if (this.global !== "") {
176+
let normalizedCode = code.replaceAll(
177+
"const " + this.global,
178+
"window." + this.global
179+
);
180+
normalizedCode = normalizedCode.replaceAll(
181+
"var " + this.global,
182+
"window." + this.global
183+
);
184+
normalizedCode = normalizedCode.replaceAll(
185+
"let " + this.global,
186+
"window." + this.global
187+
);
188+
189+
new Function(normalizedCode)();
190+
} else {
168191
// Creating a global window object from a provided mojs object (code), and play it.
169192
170-
const func = new Function('window["demo_' + this.id + '"] = ' + code);
171-
try {
172-
func();
173-
}
174-
catch(error) {
175-
console.error('Woops, please check your code for errors.', error)
176-
}
193+
const func = new Function('window["demo_' + this.id + '"] = ' + code);
194+
try {
195+
func();
196+
} catch (error) {
197+
console.error("Woops, please check your code for errors.", error);
177198
}
199+
}
178200
179-
// Set the prop :controller=true to include a mojs player
180-
domRef = window['demo_' + this.id] || (this.global !== '' && window[this.global]);
181-
if (this.controller && domRef) {
182-
const parentDOM = document.getElementById(this.id + '_controller');
183-
// Create a global mojs player instance
184-
window['mojsPlayer_' + this.id] = new MojsPlayer({
185-
add: domRef,
186-
parent: parentDOM,
187-
className: 'controller',
188-
isSaveState: false,
189-
isPlaying: play ? true : this.autoplay, // Autoplay/continue the MojsPlayer when we press the "Update code" button
190-
isRepeat: true,
191-
name: 'demo_' + this.id,
192-
});
193-
}
194-
},
201+
// Set the prop :controller=true to include a mojs player
202+
domRef =
203+
window["demo_" + this.id] ||
204+
(this.global !== "" && window[this.global]);
205+
if (this.controller && domRef) {
206+
const parentDOM = document.getElementById(this.id + "_controller");
207+
// Create a global mojs player instance
208+
window["mojsPlayer_" + this.id] = new MojsPlayer({
209+
add: domRef,
210+
parent: parentDOM,
211+
className: "controller",
212+
isSaveState: false,
213+
isPlaying: play ? true : this.autoplay, // Autoplay/continue the MojsPlayer when we press the "Update code" button
214+
isRepeat: true,
215+
name: "demo_" + this.id,
216+
});
217+
}
218+
},
219+
220+
updateCode: function () {
221+
this.handleCode(this.rawCode, true);
222+
},
195223
196-
updateCode: function() {
197-
this.handleCode(this.rawCode, true);
198-
},
224+
reset: function () {
225+
this.handleCode(this.code);
226+
this.rawCode = this.code;
227+
},
199228
200-
reset: function() {
201-
this.handleCode(this.code);
202-
this.rawCode = this.code;
203-
},
204-
205-
playPause: function() {
206-
if (this.isPlaying) {
207-
this.timeline.pause();
208-
} else {
209-
this.timeline.play();
210-
}
211-
this.isPlaying = !this.isPlaying;
212-
},
229+
playPause: function () {
230+
if (this.isPlaying) {
231+
this.timeline.pause();
232+
} else {
233+
this.timeline.play();
234+
}
235+
this.isPlaying = !this.isPlaying;
213236
},
237+
},
214238
215-
mounted () {
216-
import('@mojs/core').then(module => {
217-
import('@mojs/player').then(module => {
218-
this.handleCode(this.code);
219-
});
239+
mounted() {
240+
import("@mojs/core").then((module) => {
241+
import("@mojs/player").then((module) => {
242+
this.handleCode(this.code);
220243
});
221-
}
222-
}
244+
});
245+
},
246+
};
223247
</script>
224248

225249
<style>

‎package-lock.json‎

Lines changed: 35 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,6 @@
3333
"@mojs/curve-editor": "^1.5.0",
3434
"@mojs/player": "^0.43.16",
3535
"@vuepress/shared-utils": "^1.7.1",
36-
"vue-prism-editor": "^1.2.2"
36+
"vue-prism-editor": "^0.6.1"
3737
}
3838
}

0 commit comments

Comments
 (0)