Skip to content

Commit 20ba615

Browse files
SandstedtSandstedt
committed
Updated implementation of vue-prism-editor
1 parent 6433b70 commit 20ba615

File tree

1 file changed

+147
-110
lines changed

1 file changed

+147
-110
lines changed

‎docs/.vuepress/components/MojsInteractive.vue

Lines changed: 147 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -79,147 +79,184 @@ 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+
v-model="code"
85+
:highlight="highlighter"
86+
:code="rawCode"
87+
language="js"
88+
@change="change"
89+
></prism-editor>
8690
<div class="buttons">
87-
<button class="button button--secondary" v-on:click="reset">Reset</button>
91+
<button class="button button--secondary" v-on:click="reset">
92+
Reset
93+
</button>
8894
<button class="button" v-on:click="updateCode">Update code</button>
8995
</div>
9096
</div>
91-
<p v-if="notice" class="mojs-interactive__clicknotice">{{this.notice}}</p>
97+
<p v-if="notice" class="mojs-interactive__clicknotice">{{ this.notice }}</p>
9298
<div
9399
:id="this.id"
94-
:class="'mojs-interactive__result ' + (dark ? 'mojs-interactive__result--dark' : '')"
100+
:class="
101+
'mojs-interactive__result ' +
102+
(dark ? 'mojs-interactive__result--dark' : '')
103+
"
95104
:style="style"
96105
>
97-
<div v-if="controller" :id="this.id + '_controller'" class="mojs-interactive__controller"></div>
106+
<div
107+
v-if="controller"
108+
:id="this.id + '_controller'"
109+
class="mojs-interactive__controller"
110+
></div>
98111
</div>
99112
</div>
100113
</template>
101114

102115
<script>
103-
import prism from 'prismjs';
104-
import PrismEditor from 'vue-prism-editor'
105-
106-
export default {
107-
components: {
108-
PrismEditor
116+
// import Prism Editor
117+
import { PrismEditor } from "vue-prism-editor";
118+
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
119+
120+
// import highlighting library (you can use any library you want just return html string)
121+
import { highlight, languages } from "prismjs/components/prism-core";
122+
import "prismjs/components/prism-clike";
123+
import "prismjs/components/prism-javascript";
124+
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
125+
126+
export default {
127+
components: {
128+
PrismEditor,
129+
},
130+
131+
props: {
132+
id: { type: String, default: "code_example" }, // A unique ID
133+
controller: { type: [String, Boolean], default: true }, // this will create a mojs.Player controller
134+
playbutton: { type: Boolean, default: false }, // use this if you want a simple contoller with a play button
135+
height: { type: String, default: "300px" }, // add a custom height to the container, takes all CSS values
136+
code: { type: String, default: "" }, // the code (as a string) to be executed
137+
dark: { type: Boolean, default: false }, // if you want the demo to be dark 🕶
138+
notice: { type: [String, Boolean], default: false }, // to show a "click somewhere to activate animation" text
139+
autoplay: { type: Boolean, default: false }, // if your REALY want it to autoplay. Use with responsibility!
140+
global: { type: String, default: "" },
141+
},
142+
143+
data: function () {
144+
return {
145+
rawCode: this.code,
146+
isPlaying: false,
147+
};
148+
},
149+
150+
computed: {
151+
style() {
152+
return "height: " + this.height;
109153
},
154+
},
110155
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: '' }
156+
methods: {
157+
highlighter: function (code) {
158+
return highlight(code, languages.js); // languages.<insert language> to return html with markup
121159
},
122160
123-
data: function () {
124-
return {
125-
rawCode: this.code,
126-
isPlaying: false,
127-
}
128-
},
129-
130-
computed: {
131-
style () {
132-
return 'height: ' + this.height;
133-
}
161+
change: function (c) {
162+
this.rawCode = c;
134163
},
135164
136-
methods: {
137-
change: function(c) {
138-
this.rawCode = c;
139-
},
165+
handleCode: function (code, play) {
166+
if (!window) return; // For SSR
140167
141-
handleCode: function(code, play) {
168+
// Do some cleaning
169+
var domRef =
170+
window["demo_" + this.id] ||
171+
(this.global !== "" && window[this.global]);
142172
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);
173+
// Stop, remove and delete previous instance of: demo_', this.id
174+
if (domRef && domRef.stop) {
175+
// the mojs animation element
176+
domRef.stop();
177+
domRef.el.remove(); // remove the DOM node
178+
}
179+
// Remove and delete previous instance of player: mojsPlayer_', this.id
180+
if (window["mojsPlayer_" + this.id]) {
181+
// the mojs player element
182+
window["mojsPlayer_" + this.id].el.remove(); // remove the DOM node
183+
delete window["mojsPlayer_" + this.id];
184+
}
165185
166-
new Function(normalizedCode)();
167-
} else {
186+
// Normalize variable declaration and moves them to the windows object instead
187+
// Then runs the code using new Function()
188+
if (this.global !== "") {
189+
let normalizedCode = code.replaceAll(
190+
"const " + this.global,
191+
"window." + this.global
192+
);
193+
normalizedCode = normalizedCode.replaceAll(
194+
"var " + this.global,
195+
"window." + this.global
196+
);
197+
normalizedCode = normalizedCode.replaceAll(
198+
"let " + this.global,
199+
"window." + this.global
200+
);
201+
202+
new Function(normalizedCode)();
203+
} else {
168204
// Creating a global window object from a provided mojs object (code), and play it.
169205
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-
}
206+
const func = new Function('window["demo_' + this.id + '"] = ' + code);
207+
try {
208+
func();
209+
} catch (error) {
210+
console.error("Woops, please check your code for errors.", error);
177211
}
212+
}
178213
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-
},
214+
// Set the prop :controller=true to include a mojs player
215+
domRef =
216+
window["demo_" + this.id] ||
217+
(this.global !== "" && window[this.global]);
218+
if (this.controller && domRef) {
219+
const parentDOM = document.getElementById(this.id + "_controller");
220+
// Create a global mojs player instance
221+
window["mojsPlayer_" + this.id] = new MojsPlayer({
222+
add: domRef,
223+
parent: parentDOM,
224+
className: "controller",
225+
isSaveState: false,
226+
isPlaying: play ? true : this.autoplay, // Autoplay/continue the MojsPlayer when we press the "Update code" button
227+
isRepeat: true,
228+
name: "demo_" + this.id,
229+
});
230+
}
231+
},
195232
196-
updateCode: function() {
197-
this.handleCode(this.rawCode, true);
198-
},
233+
updateCode: function () {
234+
this.handleCode(this.rawCode, true);
235+
},
199236
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-
},
237+
reset: function () {
238+
this.handleCode(this.code);
239+
this.rawCode = this.code;
213240
},
214241
215-
mounted () {
216-
import('@mojs/core').then(module => {
217-
import('@mojs/player').then(module => {
218-
this.handleCode(this.code);
219-
});
242+
playPause: function () {
243+
if (this.isPlaying) {
244+
this.timeline.pause();
245+
} else {
246+
this.timeline.play();
247+
}
248+
this.isPlaying = !this.isPlaying;
249+
},
250+
},
251+
252+
mounted() {
253+
import("@mojs/core").then((module) => {
254+
import("@mojs/player").then((module) => {
255+
this.handleCode(this.code);
220256
});
221-
}
222-
}
257+
});
258+
},
259+
};
223260
</script>
224261

225262
<style>

0 commit comments

Comments
 (0)