// // TitleLockupViewController.swift // VDSSample // // Created by Matt Bruce on 12/19/22. // import Foundation import UIKit import VDS import VDSColorTokens 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 }) }() lazy var subtitleColorPickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: [.primary, .secondary]) }() var titleIsBold = Toggle().with { $0.isOn = true } var eyebrowIsBold = Toggle().with { $0.isOn = true } var eyebrowTextField = TextField() var titleTextField = TextField() var subTitleTextField = TextField() 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) addFormRow(label: "Title is Bold", view: titleIsBold) addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold) addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView) addFormRow(label: "Other Style", view: otherStandardStylePickerSelectorView) addFormRow(label: "Eyebrow Text", view: eyebrowTextField) addFormRow(label: "Title Text", view: titleTextField) addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView) addFormRow(label: "Subtitle Text", view: subTitleTextField) 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.standardStyle.rawValue titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue eyebrowTextField.text = eyebrowModel.text titleTextField.text = titleModel.text subTitleTextField.text = subTitleModel.text setTitleModel() updateOtherTextStyles() } func setTitleModel() { var titleTextStyle: TextStyle? if let text = titleTextField.text, !text.isEmpty { component.titleModel = TitleLockup.TitleModel(text: text, 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, standardStyle: style, textColor: subtitleColorPickerSelectorView.selectedItem) debug(type: "SubTitle", textStyle: style.value.regular) } else { component.subTitleModel = nil } if let text = eyebrowTextField.text, !text.isEmpty { component.eyebrowModel = TitleLockup.EyebrowModel(text: text, 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() } subtitleColorPickerSelectorView.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 component.debugBorder(show: true) return ComponentSample(component: component) } }