diff --git a/VDS.xcodeproj/project.pbxproj b/VDS.xcodeproj/project.pbxproj index 9a648e61..db7de433 100644 --- a/VDS.xcodeproj/project.pbxproj +++ b/VDS.xcodeproj/project.pbxproj @@ -12,6 +12,7 @@ 44604AD729CE196600E62B51 /* Line.swift in Sources */ = {isa = PBXBuildFile; fileRef = 44604AD629CE196600E62B51 /* Line.swift */; }; 5F21D7BF28DCEB3D003E7CD6 /* Useable.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5F21D7BE28DCEB3D003E7CD6 /* Useable.swift */; }; 5FC35BE328D51405004EBEAC /* Button.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5FC35BE228D51405004EBEAC /* Button.swift */; }; + EA0D1C372A681CCE00E5C127 /* ToggleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0D1C362A681CCE00E5C127 /* ToggleView.swift */; }; EA0FC2C62914222900DF80B4 /* ButtonGroup.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0FC2C52914222900DF80B4 /* ButtonGroup.swift */; }; EA1DA1CB2A2E36DC001C51D2 /* SelectorBase.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA1DA1CA2A2E36DC001C51D2 /* SelectorBase.swift */; }; EA1F266528B945070033E859 /* RadioSwatch.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA1F266128B945070033E859 /* RadioSwatch.swift */; }; @@ -148,6 +149,7 @@ 44604AD629CE196600E62B51 /* Line.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Line.swift; sourceTree = ""; }; 5F21D7BE28DCEB3D003E7CD6 /* Useable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Useable.swift; sourceTree = ""; }; 5FC35BE228D51405004EBEAC /* Button.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Button.swift; sourceTree = ""; }; + EA0D1C362A681CCE00E5C127 /* ToggleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ToggleView.swift; sourceTree = ""; }; EA0FC2C52914222900DF80B4 /* ButtonGroup.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonGroup.swift; sourceTree = ""; }; EA1DA1CA2A2E36DC001C51D2 /* SelectorBase.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SelectorBase.swift; sourceTree = ""; }; EA1F266128B945070033E859 /* RadioSwatch.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RadioSwatch.swift; sourceTree = ""; }; @@ -432,6 +434,7 @@ EA3361A0288B1E6F0071C351 /* Toggle */ = { isa = PBXGroup; children = ( + EA0D1C362A681CCE00E5C127 /* ToggleView.swift */, EA3361C228902D960071C351 /* Toggle.swift */, ); path = Toggle; @@ -928,6 +931,7 @@ EA89200628B526D6006B9984 /* CheckboxGroup.swift in Sources */, 44604AD429CE186A00E62B51 /* NotificationButtonModel.swift in Sources */, EAD8D2C128BFDE8B006EB6A6 /* UIGestureRecognizer+Publisher.swift in Sources */, + EA0D1C372A681CCE00E5C127 /* ToggleView.swift in Sources */, EAF7F0B9289C139800B287F5 /* ColorConfiguration.swift in Sources */, EA3361BD288B2C760071C351 /* TypeAlias.swift in Sources */, EAB1D2CF28ABEF2B00DAE764 /* Typography.swift in Sources */, diff --git a/VDS/Classes/Control.swift b/VDS/Classes/Control.swift index 35862574..cf1a9100 100644 --- a/VDS/Classes/Control.swift +++ b/VDS/Classes/Control.swift @@ -44,17 +44,12 @@ open class Control: UIControl, Handlerable, ViewProtocol, Resettable, UserInfoab open var surface: Surface = .light { didSet { setNeedsUpdate() } } /// Control is disabled or not - open var disabled: Bool = false { didSet { setNeedsUpdate(); isUserInteractionEnabled = !disabled } } - - open override var state: UIControl.State { - get { - var state = super.state - if disabled { - state.insert(.disabled) - } else { - state.remove(.disabled) + open var disabled: Bool { + get { !isEnabled } + set { + if !isEnabled != newValue { + isEnabled = !newValue } - return state } } @@ -85,14 +80,7 @@ open class Control: UIControl, Handlerable, ViewProtocol, Resettable, UserInfoab } /// Override to deal with setNeedsUpdate() - open override var isEnabled: Bool { - get { !disabled } - set { - if disabled != !newValue { - disabled = !newValue - } - } - } + open override var isEnabled: Bool { didSet { setNeedsUpdate(); isUserInteractionEnabled = isEnabled } } //-------------------------------------------------- // MARK: - Initializers diff --git a/VDS/Classes/SelectorBase.swift b/VDS/Classes/SelectorBase.swift index 2d692f48..a6d6a7f5 100644 --- a/VDS/Classes/SelectorBase.swift +++ b/VDS/Classes/SelectorBase.swift @@ -58,12 +58,10 @@ open class SelectorBase: Control, SelectorControlable { open var selectorColorConfiguration = ControlColorConfiguration() { didSet { setNeedsUpdate() }} + private var selectorView = View() //-------------------------------------------------- // MARK: - Constraints //-------------------------------------------------- - private var selectorHeightConstraint: NSLayoutConstraint? - private var selectorWidthConstraint: NSLayoutConstraint? - internal var shapeLayer: CAShapeLayer? open override func initialSetup() { @@ -75,36 +73,33 @@ open class SelectorBase: Control, SelectorControlable { open override func setup() { super.setup() - let layoutGuide = UILayoutGuide() - addLayoutGuide(layoutGuide) - - selectorHeightConstraint = layoutGuide.heightAnchor.constraint(equalToConstant: size.height) - selectorHeightConstraint?.isActive = true - - selectorWidthConstraint = layoutGuide.widthAnchor.constraint(equalToConstant: size.width) - selectorWidthConstraint?.isActive = true - - NSLayoutConstraint.activate([ - layoutGuide.topAnchor.constraint(equalTo: topAnchor), - layoutGuide.bottomAnchor.constraint(equalTo: bottomAnchor), - layoutGuide.leadingAnchor.constraint(equalTo: leadingAnchor), - layoutGuide.trailingAnchor.constraint(equalTo: trailingAnchor)]) - - layer.cornerRadius = 2.0 - layer.borderWidth = VDSFormControls.widthBorder + isAccessibilityElement = true + accessibilityTraits = .button } + open override var intrinsicContentSize: CGSize { size } + open func toggle() { } open override func updateView() { super.updateView() - - selectorHeightConstraint?.constant = size.height - selectorWidthConstraint?.constant = size.width - setNeedsLayout() layoutIfNeeded() } + open override func updateAccessibilityLabel() { + accessibilityValue = isSelected ? "1" : "0" + if !accessibilityTraits.contains(.selected) && isSelected { + accessibilityTraits.insert(.selected) + } else if accessibilityTraits.contains(.selected) && !isSelected{ + accessibilityTraits.remove(.selected) + } + + if !accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.insert(.notEnabled) + } else if accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.remove(.notEnabled) + } + } } diff --git a/VDS/Classes/SelectorGroupHandlerBase.swift b/VDS/Classes/SelectorGroupHandlerBase.swift index 09e37abb..76a6fc74 100644 --- a/VDS/Classes/SelectorGroupHandlerBase.swift +++ b/VDS/Classes/SelectorGroupHandlerBase.swift @@ -68,6 +68,21 @@ open class SelectorGroupHandlerBase: Control, Changeable { super.reset() selectorViews.forEach{ $0.reset() } } + + open override func updateAccessibilityLabel() { + if !accessibilityTraits.contains(.selected) && isSelected { + accessibilityTraits.insert(.selected) + } else if accessibilityTraits.contains(.selected) && !isSelected{ + accessibilityTraits.remove(.selected) + } + + if !accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.insert(.notEnabled) + } else if accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.remove(.notEnabled) + } + setAccessibilityLabel(for: selectorViews) + } } open class SelectorGroupSelectedHandlerBase: SelectorGroupHandlerBase{ @@ -76,4 +91,13 @@ open class SelectorGroupSelectedHandlerBase: SelectorGroup public var selectedHandler: HandlerType? { return selectorViews.filter { $0.isSelected == true }.first } + + open override func updateAccessibilityLabel() { + super.updateAccessibilityLabel() + if let selectedHandler, let value = selectedHandler.accessibilityValue, let label = selectedHandler.accessibilityLabel { + accessibilityValue = "\(label) \(value)" + } else { + accessibilityValue = nil + } + } } diff --git a/VDS/Classes/SelectorItemBase.swift b/VDS/Classes/SelectorItemBase.swift index 966b4d9c..9575f7a2 100644 --- a/VDS/Classes/SelectorItemBase.swift +++ b/VDS/Classes/SelectorItemBase.swift @@ -270,6 +270,18 @@ open class SelectorItemBase: Control, Errorable, } open override func updateAccessibilityLabel() { + accessibilityValue = isSelected ? "1" : "0" + if !accessibilityTraits.contains(.selected) && isSelected { + accessibilityTraits.insert(.selected) + } else if accessibilityTraits.contains(.selected) && !isSelected{ + accessibilityTraits.remove(.selected) + } + + if !accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.insert(.notEnabled) + } else if accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.remove(.notEnabled) + } setAccessibilityLabel(for: [label, childLabel, errorLabel]) } } diff --git a/VDS/Classes/View.swift b/VDS/Classes/View.swift index 08bb2b34..b130b56a 100644 --- a/VDS/Classes/View.swift +++ b/VDS/Classes/View.swift @@ -34,7 +34,16 @@ open class View: UIView, Handlerable, ViewProtocol, Resettable, UserInfoable { open var surface: Surface = .light { didSet { setNeedsUpdate() } } /// Whether this object is disabled or not - open var disabled: Bool = false { didSet { setNeedsUpdate(); isUserInteractionEnabled = !disabled } } + open var disabled: Bool { + get { !isEnabled } + set { + if !isEnabled != newValue { + isEnabled = !newValue + } + } + } + + open var isEnabled: Bool = true { didSet { setNeedsUpdate(); isUserInteractionEnabled = isEnabled } } //-------------------------------------------------- // MARK: - Initializers diff --git a/VDS/Components/Buttons/Button/ButtonBase.swift b/VDS/Components/Buttons/Button/ButtonBase.swift index d21af3b8..c27a4a06 100644 --- a/VDS/Components/Buttons/Button/ButtonBase.swift +++ b/VDS/Components/Buttons/Button/ButtonBase.swift @@ -55,8 +55,6 @@ open class ButtonBase: UIButton, Buttonable, Handlerable, ViewProtocol, Resettab open var surface: Surface = .light { didSet { setNeedsUpdate() }} - open var disabled: Bool = false { didSet { setNeedsUpdate(); isUserInteractionEnabled = !disabled } } - open var userInfo = [String: Primitive]() public var touchUpInsideCount: Int = 0 @@ -80,28 +78,18 @@ open class ButtonBase: UIButton, Buttonable, Handlerable, ViewProtocol, Resettab } } - /// Override to deal with setNeedsUpdate() - open override var isEnabled: Bool { - get { !disabled } + /// Whether this object is disabled or not + open var disabled: Bool { + get { !isEnabled } set { - if disabled != !newValue { - disabled = !newValue + if !isEnabled != newValue { + isEnabled = !newValue } } } - open override var state: UIControl.State { - get { - var state = super.state - if disabled { - state.insert(.disabled) - } else { - state.remove(.disabled) - } - return state - } - } - + open override var isEnabled: Bool { didSet { setNeedsUpdate(); isUserInteractionEnabled = isEnabled } } + open var textStyle: TextStyle { .defaultStyle } open var textColor: UIColor { .black } @@ -138,7 +126,6 @@ open class ButtonBase: UIButton, Buttonable, Handlerable, ViewProtocol, Resettab } open func setup() { - translatesAutoresizingMaskIntoConstraints = false titleLabel?.adjustsFontSizeToFitWidth = false @@ -172,7 +159,11 @@ open class ButtonBase: UIButton, Buttonable, Handlerable, ViewProtocol, Resettab } open func updateAccessibilityLabel() { - + if !accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.insert(.notEnabled) + } else if accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.remove(.notEnabled) + } } //-------------------------------------------------- diff --git a/VDS/Components/Buttons/TextLinkCaret/TextLinkCaret.swift b/VDS/Components/Buttons/TextLinkCaret/TextLinkCaret.swift index d1b8559c..ad95a4af 100644 --- a/VDS/Components/Buttons/TextLinkCaret/TextLinkCaret.swift +++ b/VDS/Components/Buttons/TextLinkCaret/TextLinkCaret.swift @@ -76,6 +76,7 @@ open class TextLinkCaret: ButtonBase { //-------------------------------------------------- open override func setup() { super.setup() + accessibilityTraits = .link } open override func reset() { diff --git a/VDS/Components/Checkbox/Checkbox.swift b/VDS/Components/Checkbox/Checkbox.swift index 7ea46a3f..9c22e616 100644 --- a/VDS/Components/Checkbox/Checkbox.swift +++ b/VDS/Components/Checkbox/Checkbox.swift @@ -18,6 +18,7 @@ open class Checkbox: SelectorBase { open override func setup() { super.setup() + accessibilityLabel = "Checkbox" backgroundColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .selected) backgroundColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: [.selected, .highlighted]) @@ -45,7 +46,7 @@ open class Checkbox: SelectorBase { isSelected.toggle() sendActions(for: .valueChanged) } - + open override func layoutSubviews() { super.layoutSubviews() @@ -122,3 +123,12 @@ open class Checkbox: SelectorBase { } } } + +// MARK: AppleGuidlinesTouchable +extension Checkbox: AppleGuidlinesTouchable { + + override open func point(inside point: CGPoint, with event: UIEvent?) -> Bool { + Self.acceptablyOutsideBounds(point: point, bounds: bounds) + } + +} diff --git a/VDS/Components/Checkbox/CheckboxGroup.swift b/VDS/Components/Checkbox/CheckboxGroup.swift index 530484ca..0c499e42 100644 --- a/VDS/Components/Checkbox/CheckboxGroup.swift +++ b/VDS/Components/Checkbox/CheckboxGroup.swift @@ -55,6 +55,7 @@ open class CheckboxGroup: SelectorGroupHandlerBase { } } } + setNeedsUpdate() } } diff --git a/VDS/Components/Label/Label.swift b/VDS/Components/Label/Label.swift index 0ca91cd0..7cd75b47 100644 --- a/VDS/Components/Label/Label.swift +++ b/VDS/Components/Label/Label.swift @@ -29,8 +29,6 @@ open class Label: UILabel, Handlerable, ViewProtocol, Resettable, UserInfoable { open var surface: Surface = .light { didSet { setNeedsUpdate() }} - open var disabled: Bool = false { didSet { setNeedsUpdate(); isUserInteractionEnabled = !disabled } } - open var attributes: [any LabelAttributeModel]? { didSet { setNeedsUpdate() }} open var textStyle: TextStyle = .defaultStyle { didSet { setNeedsUpdate() }} @@ -46,6 +44,18 @@ open class Label: UILabel, Handlerable, ViewProtocol, Resettable, UserInfoable { } } + /// Whether this object is disabled or not + open var disabled: Bool { + get { !isEnabled } + set { + if !isEnabled != newValue { + isEnabled = !newValue + } + } + } + + open override var isEnabled: Bool { didSet { setNeedsUpdate(); isUserInteractionEnabled = isEnabled } } + //-------------------------------------------------- // MARK: - Configuration Properties //-------------------------------------------------- diff --git a/VDS/Components/RadioBox/RadioBoxGroup.swift b/VDS/Components/RadioBox/RadioBoxGroup.swift index ef6fade0..d0f8bef2 100644 --- a/VDS/Components/RadioBox/RadioBoxGroup.swift +++ b/VDS/Components/RadioBox/RadioBoxGroup.swift @@ -23,6 +23,7 @@ open class RadioBoxGroup: SelectorGroupSelectedHandlerBase { for selector in selectorViews { selector.onClick = { [weak self] handler in self?.didSelect(handler) + self?.setNeedsUpdate() } mainStackView.addArrangedSubview(selector) } @@ -47,6 +48,7 @@ open class RadioBoxGroup: SelectorGroupSelectedHandlerBase { } } } + setNeedsUpdate() } } @@ -81,8 +83,6 @@ open class RadioBoxGroup: SelectorGroupSelectedHandlerBase { open override func setup() { super.setup() - isAccessibilityElement = true - accessibilityTraits = .button addSubview(mainStackView) ensureDevice() mainStackView.pinToSuperView() diff --git a/VDS/Components/RadioBox/RadioBoxItem.swift b/VDS/Components/RadioBox/RadioBoxItem.swift index 66d40542..380383b9 100644 --- a/VDS/Components/RadioBox/RadioBoxItem.swift +++ b/VDS/Components/RadioBox/RadioBoxItem.swift @@ -248,7 +248,21 @@ open class RadioBoxItem: Control, Changeable { } open override func updateAccessibilityLabel() { - setAccessibilityLabel(for: [textLabel, subTextLabel, subTextRightLabel]) + accessibilityValue = isSelected ? "1" : "0" + if !accessibilityTraits.contains(.selected) && isSelected { + accessibilityTraits.insert(.selected) + } else if accessibilityTraits.contains(.selected) && !isSelected{ + accessibilityTraits.remove(.selected) + } + + if !accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.insert(.notEnabled) + } else if accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.remove(.notEnabled) + } + if accessibilityLabel == nil { + setAccessibilityLabel(for: [textLabel, subTextLabel, subTextRightLabel]) + } } //-------------------------------------------------- diff --git a/VDS/Components/RadioButton/RadioButton.swift b/VDS/Components/RadioButton/RadioButton.swift index 00e7134c..65ad5485 100644 --- a/VDS/Components/RadioButton/RadioButton.swift +++ b/VDS/Components/RadioButton/RadioButton.swift @@ -36,6 +36,17 @@ open class RadioButton: SelectorBase { } + open override func toggle() { + guard !isSelected else { return } + + //removed error + if showError && isSelected == false { + showError.toggle() + } + isSelected.toggle() + sendActions(for: .valueChanged) + } + open override func layoutSubviews() { super.layoutSubviews() @@ -71,3 +82,12 @@ open class RadioButton: SelectorBase { } } } + +// MARK: AppleGuidlinesTouchable +extension RadioButton: AppleGuidlinesTouchable { + + override open func point(inside point: CGPoint, with event: UIEvent?) -> Bool { + Self.acceptablyOutsideBounds(point: point, bounds: bounds) + } + +} diff --git a/VDS/Components/RadioButton/RadioButtonGroup.swift b/VDS/Components/RadioButton/RadioButtonGroup.swift index 2a017d1b..9d8f67eb 100644 --- a/VDS/Components/RadioButton/RadioButtonGroup.swift +++ b/VDS/Components/RadioButton/RadioButtonGroup.swift @@ -23,6 +23,7 @@ open class RadioButtonGroup: SelectorGroupSelectedHandlerBase { for selector in selectorViews { selector.onClick = { [weak self] handler in self?.didSelect(handler) + self?.setNeedsUpdate() } mainStackView.addArrangedSubview(selector) } @@ -49,6 +50,7 @@ open class RadioButtonGroup: SelectorGroupSelectedHandlerBase { } } } + setNeedsUpdate() } } @@ -86,8 +88,6 @@ open class RadioButtonGroup: SelectorGroupSelectedHandlerBase { open override func setup() { super.setup() - isAccessibilityElement = true - accessibilityTraits = .button addSubview(mainStackView) mainStackView.pinToSuperView() diff --git a/VDS/Components/TextFields/EntryField/EntryField.swift b/VDS/Components/TextFields/EntryField/EntryField.swift index 6a32bae1..0a280ffb 100644 --- a/VDS/Components/TextFields/EntryField/EntryField.swift +++ b/VDS/Components/TextFields/EntryField/EntryField.swift @@ -182,7 +182,6 @@ open class EntryField: Control, Changeable { super.setup() isAccessibilityElement = true - accessibilityTraits = .button addSubview(stackView) //create the wrapping view diff --git a/VDS/Components/Toggle/Toggle.swift b/VDS/Components/Toggle/Toggle.swift index ac20ef31..ba718598 100644 --- a/VDS/Components/Toggle/Toggle.swift +++ b/VDS/Components/Toggle/Toggle.swift @@ -9,14 +9,7 @@ import Foundation import UIKit import VDSColorTokens import Combine -/** - A custom implementation of Apple's UISwitch. - - By default this class begins in the off state. - - Container: The background of the toggle control. - Knob: The circular indicator that slides on the container. - */ + @objc(VDSToggle) open class Toggle: Control, Changeable { //-------------------------------------------------- @@ -50,45 +43,18 @@ open class Toggle: Control, Changeable { } //-------------------------------------------------- - // MARK: - Private Properties + // MARK: - Constraints //-------------------------------------------------- - private var stackView = UIStackView().with { - $0.isUserInteractionEnabled = false - $0.translatesAutoresizingMaskIntoConstraints = false - $0.axis = .horizontal - $0.distribution = .fill - } - - private var toggleView = UIView().with { - $0.translatesAutoresizingMaskIntoConstraints = false - } - - private var knobView = UIView().with { - $0.translatesAutoresizingMaskIntoConstraints = false - $0.backgroundColor = .white - } - + private var leftConstraints: [NSLayoutConstraint] = [] + private var rightConstraints: [NSLayoutConstraint] = [] + private var labelConstraints: [NSLayoutConstraint] = [] + //-------------------------------------------------- // MARK: - Configuration Properties - //-------------------------------------------------- - // Sizes are from InVision design specs. - public let toggleSize = CGSize(width: 52, height: 28) - public let toggleContainerSize = CGSize(width: 52, height: 44) - public let knobSize = CGSize(width: 24, height: 24) - - private var toggleColorConfiguration = ControlColorConfiguration().with { - $0.setSurfaceColors(VDSColor.elementsSecondaryOnlight, VDSColor.paletteGray44, forState: .normal) - $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) - $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.selected, .disabled]) - $0.setSurfaceColors(VDSColor.paletteGreen26, VDSColor.paletteGreen36, forState: .selected) - } - - private var knobColorConfiguration = ControlColorConfiguration().with { - $0.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forState: .normal) - $0.setSurfaceColors(VDSColor.paletteGray95, VDSColor.paletteGray44, forState: .disabled) - $0.setSurfaceColors(VDSColor.paletteGray95, VDSColor.paletteGray44, forState: [.selected, .disabled]) - $0.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forState: .selected) - } + //-------------------------------------------------- + private let toggleContainerSize = CGSize(width: 52, height: 44) + private let spacingBetween = VDSLayout.Spacing.space3X.value + private let labelMaxWidth = 40.0 private var textStyle: TextStyle { if textSize == .small { @@ -109,7 +75,7 @@ open class Toggle: Control, Changeable { //-------------------------------------------------- // MARK: - Public Properties //-------------------------------------------------- - public var onChangeSubscriber: AnyCancellable? { + open var onChangeSubscriber: AnyCancellable? { willSet { if let onChangeSubscriber { onChangeSubscriber.cancel() @@ -117,8 +83,15 @@ open class Toggle: Control, Changeable { } } + open var toggleView = ToggleView().with { + $0.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal) + $0.isUserInteractionEnabled = false + } + open var label = Label().with { - $0.setContentCompressionResistancePriority(.required, for: .vertical) + $0.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal) + $0.setContentHuggingPriority(.defaultHigh, for: .horizontal) + $0.textColorConfiguration = ViewColorConfiguration().with { $0.setSurfaceColors(VDSColor.elementsSecondaryOnlight, VDSColor.elementsSecondaryOndark, forDisabled: true) $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forDisabled: false) @@ -129,9 +102,9 @@ open class Toggle: Control, Changeable { get { isSelected } set { if isSelected != newValue { + toggleView.isOn = newValue isSelected = newValue } - setNeedsUpdate() } } @@ -143,6 +116,8 @@ open class Toggle: Control, Changeable { open var offText: String = "Off" { didSet { setNeedsUpdate() }} + open var statusText: String { isOn ? onText : offText } + open var textSize: TextSize = .small { didSet { setNeedsUpdate() }} open var textWeight: TextWeight = .regular { didSet { setNeedsUpdate() }} @@ -152,78 +127,7 @@ open class Toggle: Control, Changeable { open var inputId: String? { didSet { setNeedsUpdate() }} open var value: AnyHashable? { didSet { setNeedsUpdate() }} - - //-------------------------------------------------- - // MARK: - Constraints - //-------------------------------------------------- - private var knobLeadingConstraint: NSLayoutConstraint? - private var knobTrailingConstraint: NSLayoutConstraint? - - //functions - //-------------------------------------------------- - // MARK: - Toggle - //-------------------------------------------------- - private func constrainKnob(){ - self.knobLeadingConstraint?.isActive = false - self.knobTrailingConstraint?.isActive = false - if isOn { - knobTrailingConstraint = toggleView.trailingAnchor.constraint(equalTo: knobView.trailingAnchor, constant: 2) - knobLeadingConstraint = knobView.leadingAnchor.constraint(greaterThanOrEqualTo: toggleView.leadingAnchor) - } else { - knobTrailingConstraint = toggleView.trailingAnchor.constraint(greaterThanOrEqualTo: knobView.trailingAnchor) - knobLeadingConstraint = knobView.leadingAnchor.constraint(equalTo: toggleView.leadingAnchor, constant: 2) - } - knobTrailingConstraint?.isActive = true - knobLeadingConstraint?.isActive = true - self.layoutIfNeeded() - } - - private func updateToggle() { - let toggleColor = toggleColorConfiguration.getColor(self) - let knobColor = knobColorConfiguration.getColor(self) - - if disabled || !isAnimated { - toggleView.backgroundColor = toggleColor - knobView.backgroundColor = knobColor - constrainKnob() - } else { - UIView.animate(withDuration: 0.2, delay: 0.0, options: .curveEaseIn, animations: { - self.toggleView.backgroundColor = toggleColor - self.knobView.backgroundColor = knobColor - }, completion: nil) - UIView.animate(withDuration: 0.33, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.5, options: [], animations: { [weak self] in - self?.constrainKnob() - }, completion: nil) - } - } - - //-------------------------------------------------- - // MARK: - Labels - //-------------------------------------------------- - private func updateLabel() { - - stackView.spacing = showText ? VDSLayout.Spacing.space3X.value : 0 - - if stackView.subviews.contains(label) { - label.removeFromSuperview() - } - - if showText { - label.textPosition = textPosition == .left ? .left : .right - label.textStyle = textStyle - label.text = isOn ? onText : offText - label.surface = surface - label.disabled = disabled - - if textPosition == .left { - stackView.insertArrangedSubview(label, at: 0) - } else { - stackView.addArrangedSubview(label) - } - } - } - //-------------------------------------------------- // MARK: - Lifecycle //-------------------------------------------------- @@ -239,41 +143,33 @@ open class Toggle: Control, Changeable { isAccessibilityElement = true accessibilityTraits = .button - addSubview(stackView) - - //set the h/w to container size, since the width "can" grow if text is there - //allow this to be greaterThanEqualTo - heightAnchor.constraint(equalToConstant: toggleContainerSize.height).isActive = true - widthAnchor.constraint(greaterThanOrEqualToConstant: toggleContainerSize.width).isActive = true + addSubview(label) + addSubview(toggleView) - //create the container for the toggle/knob - let toggleContainerView = UIView() - toggleContainerView.translatesAutoresizingMaskIntoConstraints = false - toggleContainerView.backgroundColor = .clear - toggleContainerView.widthAnchor.constraint(equalToConstant: toggleContainerSize.width).isActive = true - toggleContainerView.heightAnchor.constraint(equalToConstant: toggleContainerSize.height).isActive = true + let heightEqual = heightAnchor.constraint(equalToConstant: toggleContainerSize.height) + heightEqual.priority = .defaultLow + + let heightGreater = heightAnchor.constraint(greaterThanOrEqualToConstant: toggleContainerSize.height) + heightGreater.priority = .defaultHigh - //adding views - toggleContainerView.addSubview(toggleView) - toggleView.addSubview(knobView) - stackView.addArrangedSubview(toggleContainerView) + // Set up initial constraints for label and switch + toggleView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true - //adding constraints - toggleView.heightAnchor.constraint(equalToConstant: toggleSize.height).isActive = true - toggleView.widthAnchor.constraint(equalToConstant: toggleSize.width).isActive = true - toggleView.layer.cornerRadius = toggleSize.height / 2.0 - toggleView.bottomAnchor.constraint(greaterThanOrEqualTo: knobView.bottomAnchor).isActive = true - toggleView.centerXAnchor.constraint(equalTo: toggleContainerView.centerXAnchor).isActive = true - toggleView.centerYAnchor.constraint(equalTo: toggleContainerView.centerYAnchor).isActive = true + labelConstraints = [ + heightEqual, heightGreater, + label.widthAnchor.constraint(lessThanOrEqualToConstant: labelMaxWidth), + label.topAnchor.constraint(equalTo: topAnchor), + label.bottomAnchor.constraint(equalTo: bottomAnchor), + ] + + leftConstraints = [ + toggleView.leadingAnchor.constraint(equalTo: label.trailingAnchor, constant: spacingBetween) + ] + + rightConstraints = [ + label.leadingAnchor.constraint(equalTo: toggleView.trailingAnchor, constant: spacingBetween) + ] - knobView.layer.cornerRadius = knobSize.height / 2.0 - knobView.heightAnchor.constraint(equalToConstant: knobSize.height).isActive = true - knobView.widthAnchor.constraint(equalToConstant: knobSize.width).isActive = true - knobView.centerYAnchor.constraint(equalTo: toggleView.centerYAnchor).isActive = true - knobView.topAnchor.constraint(greaterThanOrEqualTo: toggleView.topAnchor).isActive = true - - //pin stackview to edges - stackView.pinToSuperView() } open override func reset() { @@ -290,28 +186,83 @@ open class Toggle: Control, Changeable { textPosition = .left inputId = nil value = nil - toggleView.backgroundColor = toggleColorConfiguration.getColor(self) - knobView.backgroundColor = knobColorConfiguration.getColor(self) shouldUpdateView = true setNeedsUpdate() } - /// This will toggle the state of the Toggle and execute the actionBlock if provided. + /// This will toggle the state of the Toggle open func toggle() { isOn.toggle() sendActions(for: .valueChanged) } - + //-------------------------------------------------- - // MARK: - State + // MARK: - Labels + //-------------------------------------------------- + private var showLabel: Bool { + showText && !statusText.isEmpty + } + private func updateLabel() { + label.isHidden = !showLabel + + if showLabel { + label.textPosition = textPosition == .left ? .right : .left + label.textStyle = textStyle + label.text = statusText + label.surface = surface + label.disabled = disabled + switch textPosition { + case .left: + NSLayoutConstraint.deactivate(rightConstraints) + NSLayoutConstraint.activate(leftConstraints) + case .right: + NSLayoutConstraint.deactivate(leftConstraints) + NSLayoutConstraint.activate(rightConstraints) + } + NSLayoutConstraint.activate(labelConstraints) + } else { + NSLayoutConstraint.deactivate(leftConstraints) + NSLayoutConstraint.deactivate(rightConstraints) + NSLayoutConstraint.deactivate(labelConstraints) + } + invalidateIntrinsicContentSize() + } + + //-------------------------------------------------- + // MARK: - Overrides //-------------------------------------------------- open override func updateView() { updateLabel() - updateToggle() + toggleView.surface = surface + toggleView.disabled = disabled + toggleView.isOn = isOn updateAccessibilityLabel() } open override func updateAccessibilityLabel() { + accessibilityValue = isSelected ? "1" : "0" + if !accessibilityTraits.contains(.selected) && isSelected { + accessibilityTraits.insert(.selected) + } else if accessibilityTraits.contains(.selected) && !isSelected{ + accessibilityTraits.remove(.selected) + } + + if !accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.insert(.notEnabled) + } else if accessibilityTraits.contains(.notEnabled) && !isEnabled{ + accessibilityTraits.remove(.notEnabled) + } setAccessibilityLabel(for: [label]) } + + open override var intrinsicContentSize: CGSize { + if showLabel { + label.sizeToFit() + let size = CGSize(width: label.frame.width + spacingBetween + toggleContainerSize.width, + height: max(toggleContainerSize.height, label.frame.height)) + return size + } else { + return toggleContainerSize + } + } } diff --git a/VDS/Components/Toggle/ToggleView.swift b/VDS/Components/Toggle/ToggleView.swift new file mode 100644 index 00000000..917d4676 --- /dev/null +++ b/VDS/Components/Toggle/ToggleView.swift @@ -0,0 +1,228 @@ +// +// ToggleView.swift +// VDS +// +// Created by Matt Bruce on 7/19/23. +// + +import Foundation +import UIKit +import VDSColorTokens +import Combine +/** + A custom implementation of Apple's UISwitch. + + By default this class begins in the off state. + + Container: The background of the toggle control. + Knob: The circular indicator that slides on the container. + */ +@objc(VDSToggleView) +open class ToggleView: Control, Changeable { + + //-------------------------------------------------- + // MARK: - Initializers + //-------------------------------------------------- + required public init() { + super.init(frame: .zero) + } + + public override init(frame: CGRect) { + super.init(frame: .zero) + } + + public required init?(coder: NSCoder) { + super.init(coder: coder) + } + + private var toggleView = UIView().with { + $0.translatesAutoresizingMaskIntoConstraints = false + $0.isUserInteractionEnabled = false + } + + private var knobView = UIView().with { + $0.translatesAutoresizingMaskIntoConstraints = false + $0.backgroundColor = .white + $0.isUserInteractionEnabled = false + } + + //-------------------------------------------------- + // MARK: - Configuration Properties + //-------------------------------------------------- + // Sizes are from InVision design specs. + public let toggleSize = CGSize(width: 52, height: 28) + public let knobSize = CGSize(width: 24, height: 24) + + private var toggleColorConfiguration = ControlColorConfiguration().with { + $0.setSurfaceColors(VDSColor.elementsSecondaryOnlight, VDSColor.paletteGray44, forState: .normal) + $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) + $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.selected, .disabled]) + $0.setSurfaceColors(VDSColor.paletteGreen26, VDSColor.paletteGreen36, forState: .selected) + } + + private var knobColorConfiguration = ControlColorConfiguration().with { + $0.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forState: .normal) + $0.setSurfaceColors(VDSColor.paletteGray95, VDSColor.paletteGray44, forState: .disabled) + $0.setSurfaceColors(VDSColor.paletteGray95, VDSColor.paletteGray44, forState: [.selected, .disabled]) + $0.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forState: .selected) + } + + //-------------------------------------------------- + // MARK: - Public Properties + //-------------------------------------------------- + public var onChangeSubscriber: AnyCancellable? + + open var isOn: Bool { + get { isSelected } + set { + if isSelected != newValue { + isSelected = newValue + } + setNeedsUpdate() + } + } + + open var isAnimated: Bool = true { didSet { setNeedsUpdate() }} + + open var inputId: String? { didSet { setNeedsUpdate() }} + + open var value: AnyHashable? { didSet { setNeedsUpdate() }} + + //-------------------------------------------------- + // MARK: - Constraints + //-------------------------------------------------- + private var knobLeadingConstraint: NSLayoutConstraint? + private var knobTrailingConstraint: NSLayoutConstraint? + + //-------------------------------------------------- + // MARK: - Lifecycle + //-------------------------------------------------- + open override func initialSetup() { + super.initialSetup() + onClick = { control in + control.toggle() + } + } + + open override func setup() { + super.setup() + + isAccessibilityElement = true + accessibilityTraits = .button + + addSubview(toggleView) + toggleView.addSubview(knobView) + + NSLayoutConstraint.activate([ + toggleView.widthAnchor.constraint(equalToConstant: toggleSize.width), + toggleView.heightAnchor.constraint(equalToConstant: toggleSize.height), + toggleView.centerYAnchor.constraint(equalTo: centerYAnchor), + knobView.heightAnchor.constraint(equalToConstant: knobSize.height), + knobView.widthAnchor.constraint(equalToConstant: knobSize.width), + knobView.centerYAnchor.constraint(equalTo: toggleView.centerYAnchor), + knobView.topAnchor.constraint(greaterThanOrEqualTo: toggleView.topAnchor) + ]) + + // Set cornerRadius + knobView.layer.cornerRadius = knobSize.height / 2.0 + toggleView.layer.cornerRadius = toggleSize.height / 2.0 + + // Set content hugging priority + toggleView.setContentHuggingPriority(.required, for: .horizontal) + toggleView.setContentHuggingPriority(.required, for: .vertical) + setContentHuggingPriority(.required, for: .horizontal) + setContentHuggingPriority(.required, for: .vertical) + } + + open override var intrinsicContentSize: CGSize { toggleSize } + + open override func reset() { + super.reset() + shouldUpdateView = false + isOn = false + isAnimated = true + inputId = nil + value = nil + toggleView.backgroundColor = toggleColorConfiguration.getColor(self) + knobView.backgroundColor = knobColorConfiguration.getColor(self) + shouldUpdateView = true + setNeedsUpdate() + } + + /// This will toggle the state of the Toggle and execute the actionBlock if provided. + open func toggle() { + isOn.toggle() + sendActions(for: .valueChanged) + } + + //-------------------------------------------------- + // MARK: - Toggle + //-------------------------------------------------- + private func constrainKnob(){ + self.knobLeadingConstraint?.isActive = false + self.knobTrailingConstraint?.isActive = false + if isOn { + knobTrailingConstraint = toggleView.trailingAnchor.constraint(equalTo: knobView.trailingAnchor, constant: 2) + knobLeadingConstraint = knobView.leadingAnchor.constraint(greaterThanOrEqualTo: toggleView.leadingAnchor) + } else { + knobTrailingConstraint = toggleView.trailingAnchor.constraint(greaterThanOrEqualTo: knobView.trailingAnchor) + knobLeadingConstraint = knobView.leadingAnchor.constraint(equalTo: toggleView.leadingAnchor, constant: 2) + } + knobTrailingConstraint?.isActive = true + knobLeadingConstraint?.isActive = true + self.layoutIfNeeded() + } + + private func updateToggle() { + let toggleColor = toggleColorConfiguration.getColor(self) + let knobColor = knobColorConfiguration.getColor(self) + + if disabled || !isAnimated { + toggleView.backgroundColor = toggleColor + knobView.backgroundColor = knobColor + constrainKnob() + } else { + UIView.animate(withDuration: 0.2, delay: 0.0, options: .curveEaseIn, animations: { + self.toggleView.backgroundColor = toggleColor + self.knobView.backgroundColor = knobColor + }, completion: nil) + + UIView.animate(withDuration: 0.33, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.5, options: [], animations: { [weak self] in + self?.constrainKnob() + }, completion: nil) + } + } + + //-------------------------------------------------- + // MARK: - Overrides + //-------------------------------------------------- + open override func updateView() { + updateToggle() + updateAccessibilityLabel() + } + + open override func updateAccessibilityLabel() { + accessibilityLabel = "Toggle" + accessibilityValue = isSelected ? "1" : "0" + if !accessibilityTraits.contains(.selected) && isSelected { + accessibilityTraits.insert(.selected) + } else if accessibilityTraits.contains(.selected) && !isSelected{ + accessibilityTraits.remove(.selected) + } + + if !accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.insert(.notEnabled) + } else if accessibilityTraits.contains(.notEnabled) && !isEnabled{ + accessibilityTraits.remove(.notEnabled) + } + } +} + +// MARK: AppleGuidlinesTouchable +extension ToggleView: AppleGuidlinesTouchable { + + override open func point(inside point: CGPoint, with event: UIEvent?) -> Bool { + Self.acceptablyOutsideBounds(point: point, bounds: bounds) + } + +} diff --git a/VDS/Components/Tooltip/Tooltip.swift b/VDS/Components/Tooltip/Tooltip.swift index f51cd36c..fd75c610 100644 --- a/VDS/Components/Tooltip/Tooltip.swift +++ b/VDS/Components/Tooltip/Tooltip.swift @@ -53,9 +53,9 @@ open class Tooltip: Control, TooltipLaunchable { open var title: String? { didSet { setNeedsUpdate() }} open var content: String? { didSet { setNeedsUpdate() }} - + open var contentView: UIView? { didSet { setNeedsUpdate() }} - + //-------------------------------------------------- // MARK: - Configuration //-------------------------------------------------- @@ -87,7 +87,7 @@ open class Tooltip: Control, TooltipLaunchable { $0.setSurfaceColors(VDSColor.elementsBrandhighlight, VDSColor.elementsBrandhighlight, forState: .normal) $0.setSurfaceColors(VDSColor.elementsBrandhighlight, VDSColor.elementsBrandhighlight, forState: .highlighted) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) - } + } //-------------------------------------------------- // MARK: - Initializers @@ -163,6 +163,14 @@ open class Tooltip: Control, TooltipLaunchable { //get the color for the image let imageColor = iconColorConfiguration.getColor(self) imageView.image = infoImage.withTintColor(imageColor) + } + + open override func updateAccessibilityLabel() { + if !accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.insert(.notEnabled) + } else if accessibilityTraits.contains(.notEnabled) && !isEnabled { + accessibilityTraits.remove(.notEnabled) + } var label = title if label == nil { label = content @@ -171,9 +179,9 @@ open class Tooltip: Control, TooltipLaunchable { accessibilityLabel = "Tooltip: \(label)" } } - } + // MARK: AppleGuidlinesTouchable extension Tooltip: AppleGuidlinesTouchable { diff --git a/VDS/Protocols/Changeable.swift b/VDS/Protocols/Changeable.swift index 850c9cf2..38f9cd03 100644 --- a/VDS/Protocols/Changeable.swift +++ b/VDS/Protocols/Changeable.swift @@ -17,14 +17,12 @@ extension Changeable { public var onChange: ((Self) -> ())? { get { return nil } set { + onChangeSubscriber?.cancel() if let newValue { onChangeSubscriber = publisher(for: .valueChanged) .sink { c in newValue(c) } - } else { - onChangeSubscriber?.cancel() - onChangeSubscriber = nil } } }