-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.js
42 lines (34 loc) · 1.38 KB
/
index.js
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
import './components/css-editor.js';
import './components/resizable-split-view.js';
import './components/preview-box.js';
import './components/tree-view.js';
import './components/toggle-pane-button.js';
import sassCompiler from './workspace/workspace.js';
let currentItem = sassCompiler.mainScss;
const navigation = document.getElementById('navigation');
const navigationButton = document.getElementById('navigation-button');
const editor = document.getElementById('editor');
const preview = document.getElementById('preview');
const downloadButton = document.getElementById('download');
const sourceInput = document.getElementById('src-input');
navigation.items = sassCompiler.workspace;
navigationButton.label = currentItem.name;
editor.setValue(currentItem.content);
navigation.addEventListener('selected', (event) => {
currentItem = event.detail;
navigationButton.label = currentItem.name;
editor.setValue(currentItem.content);
navigationButton.opened = false;
});
preview.appliedCss = sassCompiler.compile();
editor.addEventListener('value-changed', (event) => {
currentItem.content = event.detail.value;
preview.appliedCss = sassCompiler.compile();
});
downloadButton.addEventListener('click', () => sassCompiler.download());
sourceInput.addEventListener('keyup', (event) => {
const src = event.target.value;
if (event.key === 'Enter' && src) {
preview.mediaSrc = src;
}
});