forked from GreenAsh/code-highlighter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
settings.html
78 lines (70 loc) · 3.01 KB
/
settings.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Highlighter Settings</title>
<link rel="stylesheet" type="text/css" href="https://miro.com/app/static/styles.1.0.css" />
<script type="text/javascript" src="https://miro.com/app/static/sdk.1.1.js"></script>
<script type="text/javascript" src="settings.js"></script>
<style>
.miro-btn {
margin-left: 16px;
}
</style>
</head>
<body>
<div style="padding: 20px 10px">
<a href="javascript:closeModal()" style="position: absolute; right: 20px; top: 20px;">close</a>
<span class="miro-h1">Syntax Highlighter Settings</span>
<hr>
<p>To highlight your code, select the text field and click {} button again</p>
<section id="languages" style="padding: 10px; line-height: 58px; text-align: center;"></section>
<section id="themes" style="padding: 10px; line-height: 58px; text-align: center;">
<span class="miro-h3">Theme </span>
<select id="themes_select" class="miro-select miro-select--secondary">
</select>
</section>
</div>
</body>
</html>
<script type="text/javascript">
const languages = document.getElementById('languages');
const currentLang = code.highlighter.settings.getLang();
for (let lang in code.highlighter.settings.languages) {
const button = document.createElement("button");
button.id = lang;
button.className = `miro-btn miro-btn--${currentLang === lang ? 'primary' : 'secondary'} miro-btn--medium`;
button.textContent = lang;
if (code.highlighter.settings.languages[lang] === 1) {
button.onclick = () => {
const selectedButton = document.getElementById(code.highlighter.settings.getLang());
selectedButton.className = selectedButton.className.replace('primary','secondary');
code.highlighter.settings.setLang(lang);
button.className = button.className.replace('secondary','primary');
closeModal();
};
} else {
button.disabled = true;
}
languages.appendChild(button);
}
const themeChooser = document.getElementById('themes_select');
for (let themeText in code.highlighter.settings.themes) {
let themeOption = document.createElement('option');
let themId = code.highlighter.settings.themes[themeText];
themeOption.textContent = themeText;
themeOption.value = themId;
themeOption.selected = themId === code.highlighter.settings.getTheme();
themeChooser.appendChild(themeOption);
}
themeChooser.onchange = () => {
const selectedTheme = themeChooser.options[themeChooser.selectedIndex].value;
if (code.highlighter.settings.getTheme() !== selectedTheme) {
code.highlighter.settings.setTheme(selectedTheme);
miro.showNotification('saved');
}
};
function closeModal() {
miro.board.ui.closeModal();
}
</script>