Adjust scss and setToggle method structure

devhatt · Mar 15, 2024 · 2b4cda0 · 2b4cda0
1 parent b78459f
commit 2b4cda0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/src/components/Toggle/index.js b/src/components/Toggle/index.js
@@ -15,18 +15,21 @@ const html = `
 export default function Toggle({ checked = false } = {}) {
   Component.call(this, { html, events });
 
-  this.setToggle(checked);
+  const id = generateID();
+  this.selected.get('toggle-input').setAttribute('id', id);
+  this.selected.get('toggle-label').setAttribute('for', id);
 
-  this.selected.get('toggle-input').addEventListener('change', () => {
-    this.emit('toggle', this.selected.get('toggle-input').checked);
-  });
+  this.setToggle(checked, false);
+
+  this.selected.get('toggle-input').addEventListener('change', () => this.emitToggle());
 }
 
 Toggle.prototype = Object.assign(Toggle.prototype, Component.prototype, {
-  setToggle(checked) {
-    const id = generateID();
-    this.selected.get('toggle-input').setAttribute('id', id);
-    this.selected.get('toggle-label').setAttribute('for', id);
+  emitToggle() {
+    this.emit('toggle', this.selected.get('toggle-input').checked);
+  },
+  setToggle(checked, emit = true) {
     this.selected.get('toggle-input').checked = checked;
+    if (emit) this.emitToggle();
   },
 });
diff --git a/src/components/Toggle/index.scss b/src/components/Toggle/index.scss
@@ -30,12 +30,6 @@
 
     align-items: center;
 
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
     background-color: colors.$gray100;
     border-radius: 3.4rem;