Skip to content

Commit 891ad3c

Browse files
SandstedtSandstedt
committed
Start working with shape-swirl tutorial
1 parent 98b251a commit 891ad3c

123 files changed

Lines changed: 3952 additions & 53 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Guide to convert old pages to markdown.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Guide to convert jsx pages from the old mojs website to markdown
2+
3+
## Use find and replace in the file:
4+
- `UniteLink` replace with `a`
5+
- `a link` replace with `a href`
6+
- `Cite` replace with `blockquote`
7+
- `<span className="highlight">(.+?)<\/span>` replace with `<code>$1</code>`
8+
- `<div className="post__header">(.+?)<\/div>` replace with `<h1>$1</h1>`
9+
- `<ORXLine className="post__orx-line" />` replace with `<hr />`
10+
- `https://github.com/legomushroom/mojs/blob/master/api/` replace with `/api/`
11+
- `<Pen (.+?) />` replace with `<Pen $1></Pen>`
12+
- `<Gif className="gif--50-width" src="(.+?)" />` replace with `<img src="/assets$1" alt="Example gif" />`
13+
- `<CodeSample` replace with `<pre><code>`
14+
- `</CodeSample>` replace with `</code></pre>`
15+
- `<Pen (.+?)" height="500</Pen>` replace with `<pre><code>$1</code></pre>` code
16+
- `<Pen (.+?)</Pen>` replace with `<pre><code>$1</code></pre>`
17+
18+
## Convert to markdown
19+
- Se so you dont have any html errors in your file.
20+
- use an online markdown converter (https://www.browserling.com/tools/html-to-markdown or http://domchristie.github.io/turndown/)
21+
- Manually remove wrapping divs
22+
- Manually see if there are anything like: ``[Burst](/tutorials/burst/)``, replace it with `[`Burst`](/tutorials/burst/)`
23+
- Manually replace all codesample with <MojsDemo code=" the code " penSource="the codepen id" /> or MojsInteractive element

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,6 @@ Website for mo · js with tutorials and documentation.
1111
## Deploy
1212
* Run `npm run build`
1313
* Push to the mojs.github.io master branch using `. deploy.sh`
14+
15+
## Tips for docs writers
16+
If you need very special demo that doesn't work with the `<MojsCode>`or the `MojsInteractive` components, create a new component and add it to the folder "components". Make shure the name doen't contain a number, VuePress doesn't like that.

‎docs/.vuepress/components/MojsCode.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/*
2+
Usage:
3+
<MojsCode
4+
id="unique_id"
5+
height="200px"
6+
code=
7+
"new mojs.Shape({
8+
parent: '#unique_id',
9+
shape: 'circle',
10+
isShowStart: true,
11+
});
12+
"
13+
>
14+
```js
15+
new mojs.Shape({
16+
shape: 'circle',
17+
isShowStart: true,
18+
});
19+
```
20+
</MojsCode>
21+
*/
22+
<template>
23+
<div class="mojs-interactive">
24+
<div class="mojs-interactive__code">
25+
<slot></slot>
26+
</div>
27+
<div :id="this.id" class="mojs-interactive__result" :class="this.className" :style="style">
28+
<div v-if="controller" :id="this.id + '_controller'" class="mojs-interactive__controller"></div>
29+
</div>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
name: 'MojsCode',
36+
37+
props: {
38+
id: { type: String, default: 'code_example' },
39+
controller: { type: [String, Boolean], default: false },
40+
height: { type: String, default: '300px' },
41+
code: { type: [String, Boolean], default: '' },
42+
className: { type: String, default: '' },
43+
},
44+
45+
computed: {
46+
style () {
47+
return 'height: ' + this.height;
48+
}
49+
},
50+
51+
methods: {
52+
// Creating a function based on the string, and execute it to run the code inside it.
53+
handleCode: function(code) {
54+
if (!window || !code) return; // For SSR
55+
56+
const func = new Function(code);
57+
try {
58+
func();
59+
}
60+
catch(error) {
61+
console.error('Woops, please check your code for errors.', error)
62+
}
63+
},
64+
},
65+
66+
mounted () {
67+
import('mo-js').then(module => {
68+
import('mojs-player').then(module => {
69+
this.handleCode(this.code);
70+
});
71+
});
72+
}
73+
}
74+
</script>
75+
76+
<style>
77+
.mojs-interactive__result {
78+
position: relative;
79+
}
80+
.mojs-interactive__result {
81+
background: #f1e2d7;
82+
width: 100%;
83+
height: 400px;
84+
position: relative;
85+
overflow: hidden;
86+
}
87+
.mojs-interactive__result svg {
88+
overflow: visible
89+
}
90+
</style>

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

Lines changed: 84 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,58 @@
1-
/*
1+
/**
22
Usage:
3-
<ClientOnly>
4-
<MojsInteractive
5-
id="unique_id"
6-
:controller=true
7-
code=
3+
<MojsInteractive
4+
id="unique_id"
5+
code=
86
"new mojs.Shape({
97
parent: '#unique_id',
108
shape: 'circle',
119
radius: {20: 80},
1210
})"
13-
>
14-
</MojsInteractive>
15-
</ClientOnly>
11+
/>
12+
13+
or if you wanna declare a height or a controller:
14+
15+
<MojsInteractive
16+
id="unique_id"
17+
:controller=true
18+
height="200px"
19+
code=
20+
"new mojs.Shape({
21+
parent: '#unique_id',
22+
shape: 'circle',
23+
radius: {20: 80},
24+
})"
25+
/>
1626
*/
27+
1728
<template>
1829
<div class="mojs-interactive">
19-
<div class="mojs-interactive__code">
30+
<div
31+
class="mojs-interactive__code"
32+
:class="{ 'mojs-interactive__code--pinned': isPinned }"
33+
>
2034
<prism-editor :code="code" language="js" @change="change"></prism-editor>
35+
<button class="button button--icon button--pin" v-on:click="pin" aria-label="Pin the code on scroll">
36+
{{ isPinned ? "✖️" : "📍" }}
37+
</button>
2138
<div class="buttons">
2239
<button class="button button--secondary" v-on:click="reset">Reset</button>
2340
<button class="button" v-on:click="updateCode">Update code</button>
2441
</div>
2542
</div>
26-
<div :id="this.id" class="mojs-interactive__result" :style="style">
27-
<button class="button button--icon" v-if="isPlaying && !controller" v-on:click="pause" aria-label="Pause animation">⑊</button>
28-
<button class="button button--icon" v-if="!isPlaying && !controller" v-on:click="play" aria-label="Play animation">▶︎</button>
43+
<div
44+
:id="this.id"
45+
class="mojs-interactive__result"
46+
:style="style"
47+
>
48+
<button class="button button--icon button--control" v-if="!controller" v-on:click="playPause" :aria-label="isPlaying ? 'Pause animation' : 'Play animation'">{{isPlaying ? '⑊' : '︎︎︎▶︎'}}</button>
49+
<!-- <button class="button button--icon button--control" v-if="!isPlaying && !controller" v-on:click="play" aria-label="Play animation">▶︎</button> -->
2950
<div v-if="controller" :id="this.id + '_controller'" class="mojs-interactive__controller"></div>
3051
</div>
3152
</div>
3253
</template>
3354

3455
<script>
35-
import mojs from 'mo-js';
36-
import MojsPlayer from 'mojs-player';
37-
3856
import prism from 'prismjs';
3957
import PrismEditor from 'vue-prism-editor'
4058

@@ -54,6 +72,7 @@ Usage:
5472
return {
5573
rawCode: this.code,
5674
isPlaying: false,
75+
isPinned: false,
5776
}
5877
},
5978

@@ -85,8 +104,17 @@ Usage:
85104
const func = new Function('window["demo_' + this.id + '"] = ' + code);
86105
try {
87106
func();
88-
if (!this.controller) {
89-
window['demo_' + this.id].play();
107+
if (!this.controller) {
108+
this.timeline = new mojs.Timeline({
109+
onPlaybackComplete: () => {
110+
this.isPlaying = false;
111+
}
112+
})
113+
.add(
114+
window['demo_' + this.id]
115+
)
116+
.play();
117+
90118
this.isPlaying = true;
91119
}
92120
}
@@ -119,21 +147,28 @@ Usage:
119147
this.handleCode(this.code);
120148
},
121149

122-
pause: function() {
123-
window['demo_' + this.id].pause();
124-
this.isPlaying = false;
150+
playPause: function() {
151+
if (this.isPlaying) {
152+
this.timeline.pause();
153+
} else {
154+
this.timeline.play();
155+
156+
}
157+
this.isPlaying = !this.isPlaying;
125158
},
126159

127-
play: function() {
128-
window['demo_' + this.id].play();
129-
this.isPlaying = true;
160+
pin: function() {
161+
this.isPinned = !this.isPinned;
130162
}
131163
},
132164

133-
mounted: function () {
134-
this.handleCode(this.code);
165+
mounted () {
166+
import('mo-js').then(module => {
167+
import('mojs-player').then(module => {
168+
this.handleCode(this.code);
169+
});
170+
});
135171
}
136-
137172
}
138173
</script>
139174

@@ -147,15 +182,35 @@ Usage:
147182
bottom: 1rem;
148183
right: 1rem;
149184
}
185+
/* TODO: Add the pinned to the container, co both the code and the code exmple can be side by side.
186+
And add a placeholder block where the old elements had been so the text doesnt jump.
187+
*/
188+
.mojs-interactive__code.mojs-interactive__code--pinned {
189+
position: fixed;
190+
top: 0;
191+
right: 0;
192+
left: 0;
193+
z-index: 200;
194+
background: #2b062a;
195+
}
196+
.mojs-interactive__code.mojs-interactive__code--pinned .prism-editor-wrapper {
197+
max-height: 50vh;
198+
overflow: auto;
199+
}
200+
.mojs-interactive__code .button--pin {
201+
position: absolute;
202+
top: 0;
203+
right: 0;
204+
}
205+
150206
.mojs-interactive__result {
151207
position: relative;
152208
}
153-
.mojs-interactive__result .button {
209+
.mojs-interactive__result .button--control {
154210
position: absolute;
155211
bottom: 0;
156212
right: 0;
157213
}
158-
159214
.mojs-interactive__result {
160215
background: #f1e2d7;
161216
width: 100%;

‎docs/.vuepress/components/More.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// TODO: create an expandable componenent but a button to expand that takes the prop label
2+
<template>
3+
<Slot></Slot>
4+
</template>
5+
6+
<script>
7+
export default {
8+
9+
props: {
10+
label: { type: String, default: 'Expand to see more' },
11+
classname: { type: String, default: '' },
12+
}
13+
14+
}
15+
</script>

‎docs/.vuepress/components/ShapeSwirlCustomShapeOne.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<div class="mojs-interactive">
3+
<div class="mojs-interactive__code">
4+
<slot></slot>
5+
</div>
6+
<div :id="this.id" class="mojs-interactive__result" :style="style">
7+
<div :id="this.id + '_controller'" class="mojs-interactive__controller"></div>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
name: 'ShapeSwirlCustomShape1',
15+
16+
props: {
17+
id: { type: String, default: 'code_example' },
18+
height: { type: String, default: '300px' },
19+
},
20+
21+
computed: {
22+
style () {
23+
return 'height: ' + this.height;
24+
}
25+
},
26+
27+
mounted: function () {
28+
import("mo-js").then(module => {
29+
import("mojs-player").then(module => {
30+
class Heart extends mojs.CustomShape {
31+
getShape() {
32+
return '<path d="M92.6 7.4c-10-9.9-26-9.9-35.9 0l-4.4 4.3a3.4 3.4 0 0 1-4.7 0l-4.3-4.3c-10-9.9-26-9.9-35.9 0a25 25 0 0 0 0 35.5l22.4 22.2 13.5 13.4a9.5 9.5 0 0 0 13.4 0L70.2 65 92.6 43a25 25 0 0 0 0-35.5z"/>';
33+
}
34+
getLength() {
35+
return 200;
36+
}
37+
}
38+
39+
mojs.addShape("heart", Heart);
40+
41+
const heart = new mojs.Shape({
42+
parent: `#${this.id}`,
43+
shape: "heart",
44+
fill: "none",
45+
stroke: "#F64040",
46+
scale: { 0: 1 },
47+
strokeWidth: { 50: 0 },
48+
y: -20,
49+
duration: 1000
50+
});
51+
52+
const controllerDOM = document.getElementById(
53+
`${this.id}_controller`
54+
);
55+
56+
new MojsPlayer({
57+
add: heart,
58+
parent: controllerDOM,
59+
className: "controller",
60+
isSaveState: true,
61+
isPlaying: true,
62+
isRepeat: true,
63+
name: `${this.id}_controller`
64+
});
65+
});
66+
});
67+
}
68+
}
69+
</script>

0 commit comments

Comments
 (0)