404 lines
15 KiB
Swift
404 lines
15 KiB
Swift
//
|
|
// TitleLockupViewController.swift
|
|
// VDSSample
|
|
//
|
|
// Created by Matt Bruce on 12/19/22.
|
|
//
|
|
|
|
import Foundation
|
|
import UIKit
|
|
import VDS
|
|
import VDSTokens
|
|
|
|
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()
|
|
|
|
/// **********************************************
|
|
/// Text Color
|
|
lazy var colorPicker: UIColorPickerViewController = {
|
|
let picker = UIColorPickerViewController()
|
|
picker.delegate = self
|
|
return picker
|
|
}()
|
|
|
|
var currentLabelType: LabelType = .title
|
|
var colorPickerType: ColorPickerType = .light
|
|
|
|
enum LabelType {
|
|
case eyebrow, title, subtitle
|
|
}
|
|
|
|
enum TitleTextColor: String, CaseIterable {
|
|
case primary, custom
|
|
}
|
|
|
|
enum TextColor: String, CaseIterable {
|
|
case primary, secondary, custom
|
|
}
|
|
|
|
enum ColorPickerType {
|
|
case light, dark
|
|
}
|
|
|
|
/// eyebrow
|
|
var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
|
|
lazy var eyebrowColorPickerSelectorView = {
|
|
PickerSelectorView(title: "primary",
|
|
picker: self.picker,
|
|
items: TextColor.allCases)
|
|
}()
|
|
|
|
lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.light) { [weak self] picker in
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.dark) { [weak self] picker in
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
/// title
|
|
var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
|
|
lazy var titleColorPickerSelectorView = {
|
|
PickerSelectorView(title: "primary",
|
|
picker: self.picker,
|
|
items: TitleTextColor.allCases)
|
|
}()
|
|
lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.light) { [weak self] picker in
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.dark) { [weak self] picker in
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
/// subtitle
|
|
var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
|
|
lazy var subtitleColorPickerSelectorView = {
|
|
PickerSelectorView(title: "primary",
|
|
picker: self.picker,
|
|
items: TextColor.allCases)
|
|
}()
|
|
lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.light) { [weak self] picker in
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.dark) { [weak self] picker in
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
|
|
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: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView)
|
|
addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
|
|
addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
|
|
addFormRow(label: "Eyebrow Color", view: eyebrowColorPickerSelectorView)
|
|
eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
|
|
eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
|
|
append(section: eyebrowColorsFormStackView)
|
|
|
|
addFormRow(label: "Title is Bold", view: titleIsBold)
|
|
addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
|
|
addFormRow(label: "Title Text", view: titleTextField)
|
|
addFormRow(label: "Title Color", view: titleColorPickerSelectorView)
|
|
titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
|
|
titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
|
|
append(section: titleColorsFormStackView)
|
|
|
|
addFormRow(label: "Subtitle Text", view: subTitleTextField)
|
|
addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
|
|
subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
|
|
subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
|
|
append(section: subtitleColorsFormStackView)
|
|
|
|
|
|
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
|
|
|
|
setTitleModel()
|
|
updateOtherTextStyles()
|
|
}
|
|
|
|
func setTitleModel() {
|
|
var titleTextStyle: TextStyle?
|
|
if let text = titleTextField.text, !text.isEmpty {
|
|
|
|
var textColor: TitleLockup.TitleTextColor
|
|
switch titleColorPickerSelectorView.selectedItem {
|
|
case .primary:
|
|
textColor = .primary
|
|
case .custom:
|
|
if let light = titleLightColorView.selectedColor {
|
|
let dark = titleDarkColorView.selectedColor ?? light
|
|
textColor = .custom(light, dark)
|
|
} else {
|
|
textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
|
|
}
|
|
}
|
|
|
|
component.titleModel = TitleLockup.TitleModel(text: text, textColor: textColor, 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 {
|
|
var textColor: TitleLockup.TextColor
|
|
switch subtitleColorPickerSelectorView.selectedItem {
|
|
case .primary:
|
|
textColor = .primary
|
|
case .secondary:
|
|
textColor = .secondary
|
|
case .custom:
|
|
if let light = subtitleLightColorView.selectedColor {
|
|
let dark = subtitleDarkColorView.selectedColor ?? light
|
|
textColor = .custom(light, dark)
|
|
} else {
|
|
textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
|
|
}
|
|
}
|
|
component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: textColor)
|
|
debug(type: "SubTitle", textStyle: style.value.regular)
|
|
} else {
|
|
component.subTitleModel = nil
|
|
}
|
|
|
|
if let text = eyebrowTextField.text, !text.isEmpty {
|
|
var textColor: TitleLockup.TextColor
|
|
switch eyebrowColorPickerSelectorView.selectedItem {
|
|
case .primary:
|
|
textColor = .primary
|
|
case .secondary:
|
|
textColor = .secondary
|
|
case .custom:
|
|
if let light = eyebrowLightColorView.selectedColor {
|
|
let dark = eyebrowDarkColorView.selectedColor ?? light
|
|
textColor = .custom(light, dark)
|
|
} else {
|
|
textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
|
|
} }
|
|
component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: textColor, 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()
|
|
}
|
|
|
|
|
|
eyebrowColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.currentLabelType = .eyebrow
|
|
self?.eyebrowColorsFormStackView.isHidden = item != .custom
|
|
if item != .custom {
|
|
self?.setOtherModels()
|
|
}
|
|
}
|
|
|
|
titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.currentLabelType = .title
|
|
self?.titleColorsFormStackView.isHidden = item != .custom
|
|
if item != .custom {
|
|
self?.setTitleModel()
|
|
}
|
|
}
|
|
|
|
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.currentLabelType = .subtitle
|
|
self?.subtitleColorsFormStackView.isHidden = item != .custom
|
|
if item != .custom {
|
|
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)
|
|
}
|
|
}
|
|
|
|
extension TitleLockupViewController: UIColorPickerViewControllerDelegate {
|
|
|
|
func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
|
|
let selectedColor = picker.selectedColor
|
|
if let selectedColor {
|
|
colorPicker.selectedColor = selectedColor
|
|
}
|
|
present(colorPicker, animated: true)
|
|
}
|
|
|
|
func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
|
|
dismiss(animated: true)
|
|
}
|
|
|
|
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
|
|
guard let hexString = viewController.selectedColor.hexString else { return }
|
|
var lightColorView: ColorPickerView<ColorPickerType>
|
|
var darkColorView: ColorPickerView<ColorPickerType>
|
|
|
|
switch currentLabelType {
|
|
case .eyebrow:
|
|
lightColorView = eyebrowLightColorView
|
|
darkColorView = eyebrowDarkColorView
|
|
case .title:
|
|
lightColorView = titleLightColorView
|
|
darkColorView = titleDarkColorView
|
|
case .subtitle:
|
|
lightColorView = subtitleLightColorView
|
|
darkColorView = subtitleDarkColorView
|
|
}
|
|
switch colorPickerType {
|
|
case .light:
|
|
lightColorView.selectedColor = viewController.selectedColor
|
|
case .dark:
|
|
darkColorView.selectedColor = viewController.selectedColor
|
|
}
|
|
|
|
if currentLabelType == .title {
|
|
setTitleModel()
|
|
} else {
|
|
setOtherModels()
|
|
}
|
|
}
|
|
}
|