From b01a7d77bd74efd873aaf4af3693c96209cefb2c Mon Sep 17 00:00:00 2001 From: Ryan Cramer Date: Fri, 6 Sep 2019 15:42:10 -0400 Subject: [PATCH] Additional updates to InputfieldToggle --- .../Inputfield/InputfieldSelect.module | 4 +- .../InputfieldToggle/InputfieldToggle.css | 10 +- .../InputfieldToggle/InputfieldToggle.js | 163 ++++++++++++------ .../InputfieldToggle/InputfieldToggle.min.js | 2 +- .../InputfieldToggle/InputfieldToggle.module | 156 ++++++++--------- 5 files changed, 195 insertions(+), 140 deletions(-) diff --git a/wire/modules/Inputfield/InputfieldSelect.module b/wire/modules/Inputfield/InputfieldSelect.module index 25529c31..61814d26 100644 --- a/wire/modules/Inputfield/InputfieldSelect.module +++ b/wire/modules/Inputfield/InputfieldSelect.module @@ -608,7 +608,9 @@ class InputfieldSelect extends Inputfield { } $selected = $this->isOptionSelected($value) ? " selected='selected'" : ''; - $attrs = $this->getOptionAttributesString($value); + $attrs = $this->getOptionAttributes($value); + unset($attrs['selected'], $attrs['checked'], $attrs['value']); + $attrs = $this->getOptionAttributesString($attrs); $out .= "" . $this->entityEncode($label) . diff --git a/wire/modules/Inputfield/InputfieldToggle/InputfieldToggle.css b/wire/modules/Inputfield/InputfieldToggle/InputfieldToggle.css index 5da8e41c..6213e45d 100644 --- a/wire/modules/Inputfield/InputfieldToggle/InputfieldToggle.css +++ b/wire/modules/Inputfield/InputfieldToggle/InputfieldToggle.css @@ -19,6 +19,7 @@ text-align: center; padding: 8px 16px; margin-right: -1px; + margin-left: 0; border: 1px solid rgba(0,0,0,0.1); font-size: 16px; } @@ -27,10 +28,10 @@ cursor: pointer; } -.InputfieldToggleGroup input:checked + label { +.InputfieldToggleGroup label.InputfieldToggleCurrent, /* JS */ +.InputfieldToggleGroup input:checked + label { /* non-JS */ background-color: #999; color: #fff; - box-shadow: none; } .InputfieldToggleGroup label:first-of-type { @@ -41,3 +42,8 @@ border-radius: 0 4px 4px 0; } +.InputfieldToggleHelper { + display: none !important; +} + + diff --git a/wire/modules/Inputfield/InputfieldToggle/InputfieldToggle.js b/wire/modules/Inputfield/InputfieldToggle/InputfieldToggle.js index b43612a7..3c48365f 100644 --- a/wire/modules/Inputfield/InputfieldToggle/InputfieldToggle.js +++ b/wire/modules/Inputfield/InputfieldToggle/InputfieldToggle.js @@ -1,84 +1,139 @@ +/** + * Initialize InputfieldToggle Inputfields + * + */ function InputfieldToggleInit() { // this becomes true when we are in a click event, used to avoid double calls to handler - var isClick = false; + var isClick = false; + + // classes for checked input and label + var inputCheckedClass = 'InputfieldToggleChecked'; + var labelCheckedClass = 'InputfieldToggleCurrent'; + + // get