Skip to content

Commit ddfbe00

Browse files
parthsidparaparthsidpara
authored
chore(dashboard): extract inline style and script into separate files (#114)
1 parent 5093889 commit ddfbe00

File tree

3 files changed

+143
-139
lines changed

3 files changed

+143
-139
lines changed

‎dashboard/index.html‎

Lines changed: 2 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -5,74 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
66

77
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
8-
8+
<link rel="stylesheet" href="style.css">
99
<title>PiOSK</title>
10-
<style>
11-
.input-changed {
12-
background-color: rgba(255, 193, 7, 0.2) !important;
13-
border-color: #ffc107 !important;
14-
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
15-
transition: all 0.3s ease;
16-
}
17-
.input-changed:focus {
18-
background-color: rgba(255, 193, 7, 0.3) !important;
19-
border-color: #ffc107 !important;
20-
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5) !important;
21-
}
22-
23-
/* --- Drag & Drop Styles --- */
24-
.drag-handle {
25-
cursor: grab;
26-
user-select: none;
27-
display: flex;
28-
align-items: center;
29-
padding: 0 0.75rem 0 0;
30-
color: #6c757d;
31-
}
32-
.drag-handle:active {
33-
cursor: grabbing;
34-
}
35-
.drag-handle svg {
36-
width: 18px;
37-
height: 18px;
38-
fill: currentColor;
39-
}
40-
41-
#urls ul.list-group {
42-
user-select: none;
43-
position: relative;
44-
}
45-
#urls li.list-group-item {
46-
cursor: default;
47-
transition: background 0.2s, transform 0.2s;
48-
position: relative;
49-
display: flex;
50-
align-items: center;
51-
}
52-
#urls li.list-group-item:hover {
53-
background-color: rgba(220, 53, 69, 0.1);
54-
}
55-
#urls li.list-group-item.dragging {
56-
opacity: 0.6;
57-
transform: scale(0.95);
58-
cursor: grabbing;
59-
z-index: 1000;
60-
background-color: rgba(220, 53, 69, 0.15);
61-
}
62-
#urls li.list-group-item.over::before {
63-
content: "";
64-
position: absolute;
65-
top: 0;
66-
left: 12px;
67-
right: 12px;
68-
height: 3px;
69-
background-color: #dc3545;
70-
border-radius: 2px;
71-
}
72-
#urls li.list-group-item a {
73-
user-select: text;
74-
}
75-
</style>
7610
</head>
7711
<body>
7812
<nav id="navs" class="navbar bg-body-tertiary">
@@ -137,78 +71,7 @@ <h1 class="my-1">Pi<span class="bg-danger mx-1 px-1 rounded">OSK</span></h1>
13771
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
13872
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
13973

140-
<script>
141-
$(document).ready(function() {
142-
const $urlList = $("#urls ul.list-group");
143-
144-
// Use event delegation to highlight inputs when they are changed.
145-
$('#urls').on('change', '.duration-input, .cycles-input', function() {
146-
$(this).addClass('input-changed');
147-
});
148-
149-
// Add a separate click listener to the Apply button just to remove the highlight.
150-
// This will fire alongside the listener in script.js that saves the data.
151-
$('#execute').on('click', function() {
152-
$('.input-changed').removeClass('input-changed');
153-
});
154-
155-
// --- DRAG & DROP REORDER LOGIC ---
156-
let draggingItem = null;
157-
158-
// Start dragging from the handle
159-
$urlList.on("dragstart", ".drag-handle", function (e) {
160-
draggingItem = $(this).closest("li")[0];
161-
draggingItem.classList.add("dragging");
162-
const dataTransfer = e.originalEvent.dataTransfer;
163-
dataTransfer.effectAllowed = "move";
164-
dataTransfer.setData("text/plain", "");
165-
});
166-
167-
// End dragging
168-
$urlList.on("dragend", ".drag-handle", function () {
169-
if (draggingItem) {
170-
draggingItem.classList.remove("dragging");
171-
}
172-
$urlList.find("li.list-group-item").removeClass("over");
173-
draggingItem = null;
174-
});
175-
176-
// Handle dragging over the list
177-
$urlList.on("dragover", function (e) {
178-
e.preventDefault();
179-
if (!draggingItem) return;
180-
181-
const afterElement = getDragAfterElement(this, e.clientY);
182-
$urlList.find("li.list-group-item").removeClass("over");
183-
184-
if (afterElement) {
185-
$(afterElement).addClass("over");
186-
this.insertBefore(draggingItem, afterElement);
187-
} else {
188-
this.appendChild(draggingItem);
189-
}
190-
});
191-
192-
// Helper function to find the element to drop before
193-
function getDragAfterElement(container, y) {
194-
const draggableElements = [...container.querySelectorAll("li.list-group-item:not(.dragging)")];
195-
196-
return draggableElements.reduce(
197-
(closest, child) => {
198-
const box = child.getBoundingClientRect();
199-
const offset = y - box.top - box.height / 2;
200-
if (offset < 0 && offset > closest.offset) {
201-
return { offset: offset, element: child };
202-
} else {
203-
return closest;
204-
}
205-
},
206-
{ offset: Number.NEGATIVE_INFINITY }
207-
).element;
208-
}
209-
});
210-
</script>
211-
21274
<script src="script.js"></script>
75+
<script src="ui.js"></script>
21376
</body>
21477
</html>

‎dashboard/style.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
.input-changed {
2+
background-color: rgba(255, 193, 7, 0.2) !important;
3+
border-color: #ffc107 !important;
4+
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
5+
transition: all 0.3s ease;
6+
}
7+
8+
.input-changed:focus {
9+
background-color: rgba(255, 193, 7, 0.3) !important;
10+
border-color: #ffc107 !important;
11+
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5) !important;
12+
}
13+
14+
/* --- Drag & Drop Styles --- */
15+
.drag-handle {
16+
cursor: grab;
17+
user-select: none;
18+
display: flex;
19+
align-items: center;
20+
padding: 0 0.75rem 0 0;
21+
color: #6c757d;
22+
}
23+
24+
.drag-handle:active {
25+
cursor: grabbing;
26+
}
27+
28+
.drag-handle svg {
29+
width: 18px;
30+
height: 18px;
31+
fill: currentColor;
32+
}
33+
34+
#urls ul.list-group {
35+
user-select: none;
36+
position: relative;
37+
}
38+
39+
#urls li.list-group-item {
40+
cursor: default;
41+
transition: background 0.2s, transform 0.2s;
42+
position: relative;
43+
display: flex;
44+
align-items: center;
45+
}
46+
47+
#urls li.list-group-item:hover {
48+
background-color: rgba(220, 53, 69, 0.1);
49+
}
50+
51+
#urls li.list-group-item.dragging {
52+
opacity: 0.6;
53+
transform: scale(0.95);
54+
cursor: grabbing;
55+
z-index: 1000;
56+
background-color: rgba(220, 53, 69, 0.15);
57+
}
58+
59+
#urls li.list-group-item.over::before {
60+
content: "";
61+
position: absolute;
62+
top: 0;
63+
left: 12px;
64+
right: 12px;
65+
height: 3px;
66+
background-color: #dc3545;
67+
border-radius: 2px;
68+
}
69+
70+
#urls li.list-group-item a {
71+
user-select: text;
72+
}

‎dashboard/ui.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
$(document).ready(function () {
2+
const $urlList = $("#urls ul.list-group");
3+
4+
// Use event delegation to highlight inputs when they are changed.
5+
$('#urls').on('change', '.duration-input, .cycles-input', function () {
6+
$(this).addClass('input-changed');
7+
});
8+
9+
// Add a separate click listener to the Apply button just to remove the highlight.
10+
// This will fire alongside the listener in script.js that saves the data.
11+
$('#execute').on('click', function () {
12+
$('.input-changed').removeClass('input-changed');
13+
});
14+
15+
// --- DRAG & DROP REORDER LOGIC ---
16+
let draggingItem = null;
17+
18+
// Start dragging from the handle
19+
$urlList.on("dragstart", ".drag-handle", function (e) {
20+
draggingItem = $(this).closest("li")[0];
21+
draggingItem.classList.add("dragging");
22+
const dataTransfer = e.originalEvent.dataTransfer;
23+
dataTransfer.effectAllowed = "move";
24+
dataTransfer.setData("text/plain", "");
25+
});
26+
27+
// End dragging
28+
$urlList.on("dragend", ".drag-handle", function () {
29+
if (draggingItem) {
30+
draggingItem.classList.remove("dragging");
31+
}
32+
$urlList.find("li.list-group-item").removeClass("over");
33+
draggingItem = null;
34+
});
35+
36+
// Handle dragging over the list
37+
$urlList.on("dragover", function (e) {
38+
e.preventDefault();
39+
if (!draggingItem) return;
40+
41+
const afterElement = getDragAfterElement(this, e.clientY);
42+
$urlList.find("li.list-group-item").removeClass("over");
43+
44+
if (afterElement) {
45+
$(afterElement).addClass("over");
46+
this.insertBefore(draggingItem, afterElement);
47+
} else {
48+
this.appendChild(draggingItem);
49+
}
50+
});
51+
52+
// Helper function to find the element to drop before
53+
function getDragAfterElement(container, y) {
54+
const draggableElements = [...container.querySelectorAll("li.list-group-item:not(.dragging)")];
55+
56+
return draggableElements.reduce(
57+
(closest, child) => {
58+
const box = child.getBoundingClientRect();
59+
const offset = y - box.top - box.height / 2;
60+
if (offset < 0 && offset > closest.offset) {
61+
return { offset: offset, element: child };
62+
} else {
63+
return closest;
64+
}
65+
},
66+
{ offset: Number.NEGATIVE_INFINITY }
67+
).element;
68+
}
69+
});

0 commit comments

Comments
 (0)