-
Notifications
You must be signed in to change notification settings - Fork 4
/
_index.html
100 lines (99 loc) · 3.19 KB
/
_index.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
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Home</title>
<style>
body, html {
margin: 0;
height: 100%;
}
:root {
--gjs-left-width: 50% !important;
}
</style>
</head>
<body>
<link href="http://localhost:3001/css/grapes.min.css" rel="stylesheet">
<script src="http://localhost:3001/grapes.min.js"></script>
<script src="./index.js"></script>
<div id='basic-actions' class="panel__basic-actions" style="z-index: 9; left: 120px;"></div>
<div id="gjs"></div>
<script>
function createSettingsContainer() {
const el = document.createElement('div')
el.id = 'ds-settings-container'
el.style.display = 'none'
el.style.position = 'fixed'
el.style.top = '10%'
el.style.right = '20%'
el.style.left = '20%'
el.style.height = '80%'
el.style.backgroundColor = 'var(--ds-tertiary)'
el.style.color = 'var(--ds-secondary)'
el.style.zIndex = '10'
el.style.overflow = 'auto'
el.style.padding = '10px'
el.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)'
el.innerHTML = `
<h1>
Settings
<button onclick="document.querySelector('#ds-settings-container').style.display = 'none'">Close</button>
</h1>
<div id="ds-settings"></div>
`
document.body.appendChild(el)
return el
}
const settings = createSettingsContainer()
const editor = grapesjs.init({
container: '#gjs',
height: '100%',
fromElement: true,
//storageManager: false,
plugins: ['@silexlabs/grapesjs-data-source'],
pluginsOpts: {
'@silexlabs/grapesjs-data-source': {
dataSources: [{
id: 'countries',
type: 'graphql',
label: 'Countries',
url: 'https://countries.trevorblades.com/graphql',
method: 'POST',
headers: {},
}],
view: {
el: () => editor.Panels.getPanel('views-container').view.el,
button: () => editor.Panels.getPanel('views').get('buttons').get('open-tm'),
settingsEl: '#ds-settings',
},
filters: 'liquid',
}
}
});
editor.on("load", () => {
editor.addComponents(`<div>
<h1>About this demo</h1>
<p>For this test I configured the plugin with a demo country API: https://studio.apollographql.com/public/countries/variant/current/home</p>
<p><strong>Select a component and check it's settings on the right</strong></p>
<p>This plugin lets you set "states" on components with the data coming from the API</p>
</div>`);
editor.Panels.addPanel({
id: "basic-actions",
el: ".panel__basic-actions",
buttons: [
{
id: "show-settings",
label: "Show Settings",
command(editor) {
settings.style.display = 'block';
},
},
]
})
// Test
//settings.style.display = 'block';
});
</script>
</body>
</html>