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
|
import React, { useState, useRef } from 'react';
import { sidebarContent } from './Shifter/Sidebar';
import '../styles/shifter.css';
export default function Shifter() {
const [sidebar, setSidebar] = useState(0);
const [position, setPosition] = useState({
x: window.innerWidth / 2 - 350,
y: window.innerHeight / 2 - 250
});
const [isDragging, setIsDragging] = useState(false);
const dragRef = useRef({ startX: 0, startY: 0 });
function changeSidebar(window: number) {
setSidebar(window);
}
function applyButton() {
}
function closeButton() {
}
function testOption() {
console.log('Colour changed to red')
document.documentElement.style.setProperty(
'--titlebar-colour',
'red'
);
localStorage.setItem("--titlebar-colour", "red");
}
const handleMouseDown = (e: React.MouseEvent) => {
e.preventDefault();
setIsDragging(true);
dragRef.current = {
startX: e.clientX - position.x,
startY: e.clientY - position.y
};
};
React.useEffect(() => {
if (isDragging) {
const handleMouseMoveWrapper = (e: MouseEvent) => {
setPosition({
x: e.clientX - dragRef.current.startX,
y: e.clientY - dragRef.current.startY
});
};
const handleMouseUpWrapper = () => {
setIsDragging(false);
};
window.addEventListener('mousemove', handleMouseMoveWrapper);
window.addEventListener('mouseup', handleMouseUpWrapper);
return () => {
window.removeEventListener('mousemove', handleMouseMoveWrapper);
window.removeEventListener('mouseup', handleMouseUpWrapper);
};
}
}, [isDragging]);
return (
<>
<div className="window draggable" style={{
left: `${position.x}px`,
top: `${position.y}px`
}}>
<div className="titlebar" onMouseDown={handleMouseDown}>
<div className="titlebar-text">Shifter</div>
<div className="titlebar-buttons">
<div className="titlebar-box titlebar-box-link" onClick={() => closeButton()}></div>
</div>
</div>
<div className="content">
<div className="sidebar">
<aside className="sidebar-content">
<a href="#windows" className="sidebar-button" onClick={() => changeSidebar(1)}>Windows</a>
<div className="sep"/>
<a href="#reset" className="sidebar-button" onClick={() => changeSidebar(2)}>Reset</a>
<div className="sep"/>
</aside>
<a href="#apply" className="shifter-button" onClick={() => applyButton()}>Apply Changes</a>
</div>
<div className="shifter-body">
{sidebarContent(sidebar)}
</div>
</div>
</div>
</>
)
}
|
