Merge pull request #4 from moevm/bogdanov_checkbox

Add checkbox
moevm · Nov 7, 2024 · 6d43f11 · 6d43f11
2 parents 93488db + 15a8a73
commit 6d43f11
Show file tree

Hide file tree

Showing 4 changed files with 190 additions and 0 deletions.
diff --git a/main/_front/src/html/checkbox.html b/main/_front/src/html/checkbox.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport"
+				content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Document</title>
+	<link rel="stylesheet" href="../scss/style.scss">
+	<script src="../js/checkbox.js" defer></script>
+</head>
+<body>
+<div class="section">
+	<div class="container">
+		<div id="socket" class="checkbox-group" style="width: 236px;" data-value="socket">
+			<h4 class="checkbox-group__title">Cокет</h4>
+
+			<div class="checkbox" data-value="AM4">
+				<label>
+					<input type="checkbox" class="checkbox-real"/>
+					<span class="checkbox-custom"></span>
+					<span>AM4</span>
+				</label>
+			</div>
+			<div class="checkbox" data-value="AM5">
+				<label>
+					<input type="checkbox" class="checkbox-real"/>
+					<span class="checkbox-custom"></span>
+					<span>AM5</span>
+				</label>
+			</div>
+			<div class="checkbox" data-value="LGA 1151 v2">
+				<label>
+					<input type="checkbox" class="checkbox-real"/>
+					<span class="checkbox-custom"></span>
+					<span>LGA 1151 v2</span>
+				</label>
+			</div>
+			<div class="checkbox" data-value="LGA 1200">
+				<label>
+					<input type="checkbox" class="checkbox-real"/>
+					<span class="checkbox-custom"></span>
+					<span>LGA 1200</span>
+				</label>
+			</div>
+			<div class="checkbox" data-value="LGA 1700">
+				<label>
+					<input type="checkbox" class="checkbox-real"/>
+					<span class="checkbox-custom"></span>
+					<span>LGA 1700</span>
+				</label>
+			</div>
+		</div>
+		<div style="margin-bottom: 12px;"></div>
+		<div id="ram_count" class="checkbox-group" style="width: 236px;" data-value="ram_count">
+			<h4 class="checkbox-group__title">Количество слотов ОЗУ</h4>
+
+			<div class="checkbox" data-value="2">
+				<label>
+					<input type="checkbox" class="checkbox-real"/>
+					<span class="checkbox-custom"></span>
+					<span>2</span>
+				</label>
+			</div>
+			<div class="checkbox" data-value="4">
+				<label>
+					<input type="checkbox" class="checkbox-real"/>
+					<span class="checkbox-custom"></span>
+					<span>4</span>
+				</label>
+			</div>
+		</div>
+		<div style="margin-bottom: 12px;"></div>
+		<button class="btn" id="checkbox_btn">Отобразить результаты в консоль</button>
+	</div>
+</div>
+</body>
+</html>
diff --git a/main/_front/src/img/tick.svg b/main/_front/src/img/tick.svg
diff --git a/main/_front/src/js/checkbox.js b/main/_front/src/js/checkbox.js
@@ -0,0 +1,28 @@
+const socket = document.querySelector("#socket");
+const ram_count = document.querySelector("#ram_count");
+
+const getCheckboxValues = (element) => {
+	const checkboxes = element.querySelectorAll(".checkbox");
+	const values = [];
+	checkboxes.forEach(checkbox => {
+		const input = checkbox.querySelector("input");
+		// console.log(input);
+		// console.log(input.checked);
+		input.checked? values.push(checkbox.dataset.value) : undefined;
+	})
+	return values;
+}
+
+const getValues = (elemsArray) => {
+	const object = {}
+	elemsArray.forEach(elem => {
+		object[elem.dataset.value] = getCheckboxValues(elem);
+	})
+	return object;
+}
+
+const button = document.querySelector("#checkbox_btn");
+
+button.addEventListener("click", (e) => {
+	console.log(getValues([socket,  ram_count]))
+})
diff --git a/main/_front/src/scss/elems/_checkbox.scss b/main/_front/src/scss/elems/_checkbox.scss
@@ -0,0 +1,71 @@
+@import "../vars";
+
+.checkbox-group {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.checkbox-group__title {
+	font-size: 18px;
+	margin-bottom: 6px;
+	font-weight: 500;
+}
+
+.checkbox {
+	display: flex;
+	align-items: center;
+	font-size: 18px;
+	width: 100%;
+	user-select: none;
+	label {
+		height: 28px;
+		width: 100%;
+	}
+}
+
+.checkbox-real {
+	width: 0;
+	height: 0;
+	opacity: 0;
+	position: absolute;
+	z-index: -1;
+}
+
+.checkbox-real:focus + .checkbox-custom {
+	box-shadow: 0 0 4px 1px $secondary-hover;
+}
+
+.checkbox-custom {
+	display: inline-block;
+	width: 24px;
+	height: 24px;
+	background-color: $white;
+	border: 1px solid $secondary-hover;
+	border-radius: 4px;
+	margin-right: 10px;
+	vertical-align: sub;
+	transition: background-color .2s ease, border .2s ease;
+
+	position: relative;
+}
+
+.checkbox-custom::before {
+	content: "";
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	background-image: url("../../img/tick.svg");
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: contain;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.checkbox-real:checked +.checkbox-custom {
+	background-color: $primary;
+	border-color: $primary;
+}