/
content-editor-example.html
95 lines (87 loc) · 3.59 KB
/
content-editor-example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html>
<head>
<title>Edit content example</title>
</head>
<body>
<h1>Edit content example</h1>
<span>Title:</span>
<span id="title"></span>
<br>
<span>Description:</span>
<span id="description"></span>
<div id="editButtons"></div>
<script>
(async function() {
const initExampleSdk = (await import("./initExampleSdk.js")).default;
const sdk = await initExampleSdk({
settings: {
}
});
const data = {
title: "Default title",
description: "Default descript ion"
};
function updateData(newData) {
data.title = newData.title;
data.description = newData.description;
document.getElementById("title").innerHTML = data.title;
document.getElementById("description").innerHTML = data.description;
}
updateData(data);
const contentEditorPlugin = await sdk.initContentEditorPlugin({
data,
settings: {
background: "#abcdef",
showAnimation: "scale",
animationTime: 1000,
},
hooks: {
onResetButtonClicked: async () => {
return data;
},
onSaveButtonClicked: async (newData) => {
updateData(newData);
contentEditorPlugin.hide();
},
onClose: async () => {
contentEditorPlugin.hide(animationType, 300);
}
}
},
{});
let animationType;
const animationTypes = [{
label: "slideFromLeft",
args: { x: "-100vw", y: "0px", opacity: 0.5, scale: 1, time: 500 }
},{
label: "slideFromTop",
args: { x: "0px", y: "-100vh", opacity: 0.5, scale: 1, time: 500 }
},{
label: "slideFromBottom",
args: { x: "0px", y: "100vh", opacity: 0.5, scale: 1, time: 500 }
},{
label: "slideFromRight",
args: { x: "100vw", y: "0px", opacity: 0.5, scale: 1, time: 500 }
},{
label: "fade",
args: { x: "0px", y: "0px", opacity: 0, scale: 1, time: 500 }
},{
label: "scale",
args: { x: "0vw", y: "0vh", opacity: 0.5, scale: 0, time: 500 }
}]
animationTypes.forEach((button)=>{
let btn = document.createElement("button");
btn.innerHTML = button.label;
btn.onclick = async () => {
contentEditorPlugin.showSplashScreen();
await contentEditorPlugin.methods.updateData(data);
contentEditorPlugin.show(button.args);
await new Promise(resolve => setTimeout(resolve, 400)); // simulate latency
contentEditorPlugin.hideSplashScreen();
}
document.getElementById("editButtons").appendChild(btn);
});
}());
</script>
</body>
</html>