292 lines
11 KiB
Swift
292 lines
11 KiB
Swift
//
|
|
// TitleLockupViewController.swift
|
|
// VDSSample
|
|
//
|
|
// Created by Matt Bruce on 12/19/22.
|
|
//
|
|
|
|
import Foundation
|
|
import UIKit
|
|
import VDS
|
|
import VDSCoreTokens
|
|
|
|
class TitleLockupViewController: BaseViewController<TitleLockup> {
|
|
|
|
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<TextColor>(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<TextColor>(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<TitleTextColor>(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)
|
|
}
|
|
}
|