From 15a8a73e1eff5efa1049052e7fd1f597dc93271b Mon Sep 17 00:00:00 2001 From: bnd1238 Date: Tue, 5 Nov 2024 18:54:01 +0300 Subject: [PATCH] Add checkbox --- main/_front/src/html/checkbox.html | 78 +++++++++++++++++++++++ main/_front/src/img/tick.svg | 13 ++++ main/_front/src/js/checkbox.js | 28 ++++++++ main/_front/src/scss/elems/_checkbox.scss | 71 +++++++++++++++++++++ 4 files changed, 190 insertions(+) create mode 100644 main/_front/src/html/checkbox.html create mode 100644 main/_front/src/img/tick.svg create mode 100644 main/_front/src/js/checkbox.js create mode 100644 main/_front/src/scss/elems/_checkbox.scss diff --git a/main/_front/src/html/checkbox.html b/main/_front/src/html/checkbox.html new file mode 100644 index 0000000..439f507 --- /dev/null +++ b/main/_front/src/html/checkbox.html @@ -0,0 +1,78 @@ + + + + + + + Document + + + + +
+
+
+

Cокет

+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+

Количество слотов ОЗУ

+ +
+ +
+
+ +
+
+
+ +
+
+ + \ No newline at end of file diff --git a/main/_front/src/img/tick.svg b/main/_front/src/img/tick.svg new file mode 100644 index 0000000..3cbdb2e --- /dev/null +++ b/main/_front/src/img/tick.svg @@ -0,0 +1,13 @@ + + + Created with Pixso. + + + + + + + + + + diff --git a/main/_front/src/js/checkbox.js b/main/_front/src/js/checkbox.js new file mode 100644 index 0000000..dc9f3bd --- /dev/null +++ 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])) +}) \ No newline at end of file diff --git a/main/_front/src/scss/elems/_checkbox.scss b/main/_front/src/scss/elems/_checkbox.scss new file mode 100644 index 0000000..396813f --- /dev/null +++ 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; +} \ No newline at end of file