-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
67 lines (57 loc) · 2.95 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
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8" />
<link rel="stylesheet" href="index.css">
<title>Contextify Test</title>
</header>
<body>
<div class="center" id="body">Right click anywhere</div>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://kit.fontawesome.com/df7df855c2.js" crossorigin="anonymous"></script>
<script src="Contextify.js"> </script>
<script>
const randomColour = function(event) {
let r = Math.floor(Math.random() * 255) + 1;
let g = Math.floor(Math.random() * 255) + 1;
let b = Math.floor(Math.random() * 255) + 1;
event.button.style.cssText = 'background-color: rgba(' + r + ',' + g + ',' + b + ', 1.0)';
};
const screenshot = function(event) {
html2canvas(document.querySelector('#body')).then(function(canvas) {
saveAs(canvas.toDataURL());
});
menu.hide();
}
let themesSubmenu = [
{ icon: 'fa-swatchbook', type: 'button', hotkey: 'Alt + 1', text: 'Dark Theme', click: function(event) { event.parent.assignTheme('dark'); } },
{ icon: 'fa-swatchbook', type: 'button', hotkey: 'Alt + 2', text: 'Light Theme', click: function(event) { event.parent.assignTheme('light'); } },
{ icon: 'fa-swatchbook', type: 'button', hotkey: 'Alt + 3', text: 'Acid Theme', click: function(event) { event.parent.assignTheme('acid'); } },
{ icon: 'fa-swatchbook', type: 'button', hotkey: 'Alt + 4', text: 'Minimal Theme', click: function(event) { event.parent.assignTheme('min'); } },
{ icon: 'fa-swatchbook', type: 'button', hotkey: 'Alt + 5', text: 'Soft Theme', click: function(event) { event.parent.assignTheme('soft'); } },
{ icon: 'fa-swatchbook', type: 'button', hotkey: 'Alt + 6', text: 'Simple Theme', click: function(event) { event.parent.assignTheme('simple'); } }
];
const contextMenu = new Contextify([
{ icon: 'fa-arrow-left', type: 'button', hotkey: '1234567', text: 'Back', enabled: false },
{ icon: 'fa-arrow-right', type: 'button', text: 'Forward', enabled: false },
{ type: 'separator'},
{ icon: 'fa-swatchbook', type: 'button', text: 'Themes', child: themesSubmenu },
{ icon: 'fa-palette', type: 'button', text: 'Colour Changing', click: randomColour },
{ type: 'separator'},
{ icon: 'fa-camera', type: 'button', text: 'Screenshot', click: screenshot },
{ icon: 'fa-times-circle', type: 'button', text: 'Cancel', click: function() { contextMenu.hide(false); } }
], "dark", document.body);
function saveAs(uri) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = 'screenshot.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
else window.open(uri);
}
</script>
</body>
</html>