// // TitleLockupViewController.swift // VDSSample // // Created by Matt Bruce on 12/19/22. // import Foundation import UIKit import VDS import VDSCoreTokens class TitleLockupViewController: BaseViewController { lazy var textAlignmentPickerSelectorView = { PickerSelectorView(title: "left", picker: self.picker, items: TitleLockup.TextAlignment.allCases) }() lazy var titleStandardStylePickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: TitleLockup.TitleStandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue }) }() lazy var otherStandardStylePickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: TitleLockup.OtherStandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue }) }() var titleIsBold = Toggle().with { $0.isOn = true } var eyebrowIsBold = Toggle().with { $0.isOn = true } var eyebrowTextField = TextField() var titleTextField = TextField() var subTitleTextField = TextField() enum TitleTextColor: String, CaseIterable { case primary, token, custom } enum TextColor: String, CaseIterable { case primary, secondary, token, custom } /// eyebrow var eyeBrowTextColor: TitleLockup.TextColor = .primary { didSet { setOtherModels() } } lazy var eyebrowTextColorFormSection = { TokenColorPickerSection(rowTitle: "Text Color", picker: self.picker).with { $0.onSelected = { [weak self] item in guard let self else { return } switch item { case .primary: eyeBrowTextColor = .primary case .secondary: eyeBrowTextColor = .secondary default: break } } $0.onTokenSelected = { [weak self] color in guard let self else { return } eyeBrowTextColor = .token(color) } $0.onColorSelected = { [weak self] color in guard let self else { return } eyeBrowTextColor = .custom(color) } } }() var subtitleTextColor: TitleLockup.TextColor = .primary { didSet { setOtherModels() } } lazy var subTitleTextColorFormSection = { TokenColorPickerSection(rowTitle: "Text Color", picker: self.picker).with { $0.onSelected = { [weak self] item in guard let self else { return } switch item { case .primary: subtitleTextColor = .primary case .secondary: subtitleTextColor = .secondary default: break } } $0.onTokenSelected = { [weak self] color in guard let self else { return } subtitleTextColor = .token(color) } $0.onColorSelected = { [weak self] color in guard let self else { return } subtitleTextColor = .custom(color) } } }() var titleTextColor: TitleLockup.TitleTextColor = .primary { didSet { setTitleModel() } } lazy var titleTextColorFormSection = { TokenColorPickerSection(rowTitle: "Text Color", picker: self.picker).with { $0.onSelected = { [weak self] item in guard let self else { return } switch item { case .primary: titleTextColor = .primary default: break } } $0.onTokenSelected = { [weak self] color in guard let self else { return } titleTextColor = .token(color) } $0.onColorSelected = { [weak self] color in guard let self else { return } titleTextColor = .custom(color) } } }() override func viewDidLoad() { super.viewDidLoad() addContentTopView(view: component) setupPicker() setupModel() } override func setupForm(){ super.setupForm() addFormRow(label: "Surface", view: surfacePickerSelectorView) addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView) append(section: .init().with({ $0.title = "Text Styles" $0.addFormRow(label: "Title", view: titleStandardStylePickerSelectorView) $0.addFormRow(label: "Eyebrow/Subtitle", view: otherStandardStylePickerSelectorView) })) append(section: .init().with({ $0.title = "\nEyebrow" $0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false) $0.addFormRow(label: "Text", view: eyebrowTextField) })) append(section: eyebrowTextColorFormSection) append(section: .init().with({ $0.title = "\nTitle" $0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false) $0.addFormRow(label: "Text", view: titleTextField) })) append(section: titleTextColorFormSection) append(section: .init().with({ $0.title = "\nSubtitle" $0.addFormRow(label: "Subtitle Text", view: subTitleTextField) })) append(section: subTitleTextColorFormSection) eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in self?.setOtherModels() }.store(in: &subscribers) titleIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in self?.setTitleModel() }.store(in: &subscribers) eyebrowTextField .textPublisher .sink { [weak self] text in self?.setOtherModels() }.store(in: &subscribers) titleTextField .textPublisher .sink { [weak self] text in self?.setTitleModel() }.store(in: &subscribers) subTitleTextField .textPublisher .sink { [weak self] text in self?.setOtherModels() }.store(in: &subscribers) } func setupModel() { let eyebrowModel = TitleLockup.EyebrowModel(text: "Today only.") let titleModel = TitleLockup.TitleModel(text: "Get more of our best") let subTitleModel = TitleLockup.SubTitleModel(text: "Get both of our best and pay less. Pair 5G Home Internet with Verizon mobile to save every month.") component.eyebrowModel = eyebrowModel component.titleModel = titleModel component.subTitleModel = subTitleModel //setup UI surfacePickerSelectorView.text = component.surface.rawValue textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue eyebrowTextField.text = eyebrowModel.text titleTextField.text = titleModel.text subTitleTextField.text = subTitleModel.text eyebrowTextColorFormSection.setDefault(value: .primary) titleTextColorFormSection.setDefault(value: .primary) subTitleTextColorFormSection.setDefault(value: .primary) setTitleModel() updateOtherTextStyles() } func setTitleModel() { var titleTextStyle: TextStyle? if let text = titleTextField.text, !text.isEmpty { component.titleModel = TitleLockup.TitleModel(text: text, textColor: titleTextColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem) titleTextStyle = titleIsBold.isOn ? titleStandardStylePickerSelectorView.selectedItem.value.bold : titleStandardStylePickerSelectorView.selectedItem.value.regular } else { component.titleModel = nil } debug(type: "Title", textStyle: titleTextStyle) } func updateOtherTextStyles() { let items = component.standardStyleConfiguration.configuration(for: titleStandardStylePickerSelectorView.selectedItem)!.allOtherStandardStyles otherStandardStylePickerSelectorView.items = items otherStandardStylePickerSelectorView.text = items.first?.rawValue ?? "" setOtherModels() } func setOtherModels() { let style = otherStandardStylePickerSelectorView.selectedItem if let text = subTitleTextField.text, !text.isEmpty { component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: subtitleTextColor) debug(type: "SubTitle", textStyle: style.value.regular) } else { component.subTitleModel = nil } if let text = eyebrowTextField.text, !text.isEmpty { component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: eyeBrowTextColor, isBold: eyebrowIsBold.isOn, standardStyle: style) debug(type: "EyeBrow", textStyle: eyebrowIsBold.isOn ? style.value.bold : style.value.regular) } else { component.eyebrowModel = nil } } func debug(type: String, textStyle: TextStyle?) { guard let textStyle else { return } //DebugLog("\n\(type)\n\(descriptionFor(style: textStyle))\n\n") } //Picker func setupPicker(){ surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.surface = item self?.contentTopView.backgroundColor = item.color } textAlignmentPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.textAlignment = item } titleStandardStylePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.setTitleModel() self?.updateOtherTextStyles() } otherStandardStylePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.setOtherModels() } } } extension TitleLockupViewController: ComponentSampleable { static func makeSample() -> ComponentSample { let component = Self.makeComponent() let eyebrowModel = TitleLockup.EyebrowModel(text: "Today only.") let titleModel = TitleLockup.TitleModel(text: "Get more of our best") let subTitleModel = TitleLockup.SubTitleModel(text: "Get both of our best and pay less. Pair 5G Home Internet with Verizon mobile to save every month.") component.eyebrowModel = eyebrowModel component.titleModel = titleModel component.subTitleModel = subTitleModel return ComponentSample(component: component) } }