1055 lines
43 KiB
Swift
1055 lines
43 KiB
Swift
//
|
|
// TiletViewController.swift
|
|
// VDSSample
|
|
//
|
|
// Created by Matt Bruce on 12/19/22.
|
|
//
|
|
|
|
import Foundation
|
|
import UIKit
|
|
import VDS
|
|
import VDSCoreTokens
|
|
import Combine
|
|
|
|
class TileletViewController: BaseViewController<Tilelet> {
|
|
|
|
lazy var titleStandardStylePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Tilelet.TitleModel.StandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
|
|
}()
|
|
|
|
lazy var otherStandardStylePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Tilelet.SubTitleModel.OtherStandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
|
|
}()
|
|
|
|
lazy var textPositionPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Tilelet.TextPosition.allCases.sorted{ $0.rawValue < $1.rawValue })
|
|
}()
|
|
|
|
lazy var paddingPickerSelectorView = {
|
|
PickerSelectorView(title: "small",
|
|
picker: self.picker,
|
|
items: Tilelet.Padding.allCases)
|
|
}()
|
|
lazy var badgeFillColorPickerSelectorView = {
|
|
PickerSelectorView(title: "red",
|
|
picker: self.picker,
|
|
items: Badge.FillColor.allCases)
|
|
}()
|
|
lazy var badgeNumberOfLinesPickerSelectorView = {
|
|
PickerSelectorView(title: "one",
|
|
picker: self.picker,
|
|
items: BadgeViewController.NumberOfLines.allCases)
|
|
}()
|
|
lazy var scalingTypePickerSelectorView = {
|
|
PickerSelectorView(title: "white",
|
|
picker: self.picker,
|
|
items: Tilelet.AspectRatio.allCases)
|
|
}()
|
|
lazy var imageFallbackColorPickerSelectorView = {
|
|
SurfacePickerSelectorView(picker: self.picker)
|
|
}()
|
|
|
|
lazy var backgroundEffectSelectorView = {
|
|
PickerSelectorView(title: "none",
|
|
picker: self.picker,
|
|
items: TileContainerViewController.BackgroundEffect.allCases)
|
|
}()
|
|
|
|
lazy var colorPicker: UIColorPickerViewController = {
|
|
let picker = UIColorPickerViewController()
|
|
picker.delegate = self
|
|
return picker
|
|
}()
|
|
|
|
var colorPickerType: ColorPickerType = .custom
|
|
enum ColorPickerType {
|
|
case gradientColor1, gradientColor2
|
|
case contentViewBackgroundColor, token, custom
|
|
}
|
|
|
|
lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true }
|
|
var backgroundColorFormStackView = FormSection().with { $0.isHidden = true }
|
|
lazy var backgroundColorPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: BackgroundColor.allCases)
|
|
.with { $0.text = BackgroundColor.white.rawValue }
|
|
}()
|
|
|
|
lazy var backgroundColorCustomColorView: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
|
|
self?.currentSurfaceColorType = .background
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
lazy var backgroundColorTokenColorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
|
}()
|
|
|
|
|
|
lazy var textAlignmentPickerSelectorView = {
|
|
PickerSelectorView(title: "left",
|
|
picker: self.picker,
|
|
items: TitleLockup.TextAlignment.allCases)
|
|
}()
|
|
|
|
/// titleLockup
|
|
var currentSurfaceColorType: SurfaceColorType = .title
|
|
enum SurfaceColorType {
|
|
case background, eyebrow, title, subtitle, directionalIcon, descriptionIcon
|
|
}
|
|
|
|
enum TitleTextColor: String, CaseIterable {
|
|
case primary, token, custom
|
|
}
|
|
|
|
enum TextColor: String, CaseIterable {
|
|
case primary, secondary, token, custom
|
|
}
|
|
|
|
enum IconColor: String, CaseIterable {
|
|
case `default`, token, custom
|
|
}
|
|
|
|
/// eyebrow
|
|
var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
|
|
var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
|
|
lazy var eyebrowColorPickerSelectorView = {
|
|
PickerSelectorView(title: "primary",
|
|
picker: self.picker,
|
|
items: TextColor.allCases)
|
|
}()
|
|
|
|
lazy var eyebrowTokenColorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
|
}()
|
|
|
|
lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
|
|
self?.currentSurfaceColorType = .eyebrow
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
/// title
|
|
var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
|
|
var titleColorFormStackView = FormSection().with { $0.isHidden = true }
|
|
lazy var titleColorPickerSelectorView = {
|
|
PickerSelectorView(title: "primary",
|
|
picker: self.picker,
|
|
items: TitleTextColor.allCases)
|
|
}()
|
|
lazy var titleTokenColorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
|
|
|
}()
|
|
|
|
lazy var titleCustomColorView: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
|
|
self?.currentSurfaceColorType = .title
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
/// subtitle
|
|
var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
|
|
var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
|
|
lazy var subtitleColorPickerSelectorView = {
|
|
PickerSelectorView(title: "primary",
|
|
picker: self.picker,
|
|
items: TextColor.allCases)
|
|
}()
|
|
lazy var subtitleTokenColorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
|
}()
|
|
|
|
lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
|
|
self?.currentSurfaceColorType = .subtitle
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
|
|
var descriptionIconTokenFormStackView = FormSection().with { $0.isHidden = true }
|
|
var descriptionIconColorFormStackView = FormSection().with { $0.isHidden = true }
|
|
lazy var descriptionNamePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue })
|
|
}()
|
|
|
|
lazy var descriptionIconSizePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Icon.Size.allCases)
|
|
}()
|
|
|
|
lazy var descriptionIconColorPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: IconColor.allCases)
|
|
.with { $0.text = IconColor.default.rawValue }
|
|
}()
|
|
|
|
lazy var descriptionIconTokenColorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
|
}()
|
|
|
|
lazy var descriptionIconCustomColorView: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.custom) { [weak self] picker in
|
|
self?.currentSurfaceColorType = .descriptionIcon
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
var directionalIconFormStackView = FormSection().with { $0.isHidden = true }
|
|
var directionalIconTokenFormStackView = FormSection().with { $0.isHidden = true }
|
|
var directionalIconColorFormStackView = FormSection().with { $0.isHidden = true }
|
|
|
|
lazy var directionalIconSizePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Icon.Size.allCases)
|
|
}()
|
|
|
|
|
|
lazy var directionalIconColorPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: IconColor.allCases)
|
|
.with { $0.text = IconColor.default.rawValue }
|
|
}()
|
|
|
|
lazy var directionalIconTokenColorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
|
}()
|
|
|
|
lazy var directionalIconCustomColorView: ColorPickerView<ColorPickerType> = {
|
|
return .init(with: ColorPickerType.custom) { [weak self] picker in
|
|
self?.currentSurfaceColorType = .directionalIcon
|
|
self?.colorPickerType = picker.pickerType
|
|
self?.selectedColorTapped(picker)
|
|
}
|
|
}()
|
|
|
|
lazy var directionIconPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Tilelet.DirectionalIcon.IconType.allCases.sorted{ $0.rawValue < $1.rawValue })
|
|
}()
|
|
|
|
lazy var directionIconSizePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Tilelet.DirectionalIcon.IconSize.allCases.sorted{ $0.rawValue < $1.rawValue })
|
|
}()
|
|
|
|
let backgroundImage = UIImage(named: "backgroundTest")!
|
|
var clickableSwitch = Toggle()
|
|
var eyebrowTextField = TextField()
|
|
var titleTextField = TextField()
|
|
var subTitleTextField = TextField()
|
|
var widthTextField = NumericField()
|
|
var heightTextField = NumericField()
|
|
var textPercentageTextField = NumericField()
|
|
var textWidthTextField = NumericField()
|
|
var showBackgroundImageSwitch = Toggle()
|
|
var showDescriptionIconSwitch = Toggle()
|
|
var showDirectionalIconSwitch = Toggle()
|
|
var badgeTextField = TextField()
|
|
var eyebrowIsBold = Toggle().with { $0.isOn = true }
|
|
var titleIsBold = Toggle().with { $0.isOn = true }
|
|
var selectedGradient1Color: String?
|
|
var selectedGradient2Color: String?
|
|
var selectedGradientColorView: UIView?
|
|
var showDropShadowSwitch = Toggle()
|
|
var backgroundColor: BackgroundColor = .black
|
|
var maxWidthTextField = NumericField()
|
|
var isLinkSwitch = Toggle()
|
|
var descriptionIconAccessibilityTextField = TextField()
|
|
|
|
var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
|
|
|
|
override func viewDidLoad() {
|
|
super.viewDidLoad()
|
|
addContentTopView(view: component)
|
|
setupPicker()
|
|
setupModel()
|
|
}
|
|
|
|
override func setupForm(){
|
|
super.setupForm()
|
|
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
|
addActionRow()
|
|
addFormRow(label: "Is Link", view: isLinkSwitch, pinTrailing: false)
|
|
addFormRow(label: "Clickable", view: clickableSwitch, pinTrailing: false)
|
|
|
|
addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
|
|
addFormRow(label: "Padding", view: paddingPickerSelectorView)
|
|
addFormRow(label: "Width", view: widthTextField)
|
|
addFormRow(label: "Height", view: heightTextField)
|
|
addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView)
|
|
addFormRow(label: "Text Width", view: textWidthTextField)
|
|
addFormRow(label: "Text Percentage", view: textPercentageTextField)
|
|
addFormRow(label: "Text Position", tooltip: .init(title:"Text Position", content: "Minimum height is configurable"), view: textPositionPickerSelectorView)
|
|
addFormRow(label: "Background Color", tooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."), view: backgroundColorPickerSelectorView)
|
|
|
|
backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView)
|
|
backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView)
|
|
append(section: backgroundColorTokenFormStackView)
|
|
append(section: backgroundColorFormStackView)
|
|
|
|
|
|
addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false)
|
|
addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
|
|
addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
|
|
addFormRow(label: "Background Effect", view: backgroundEffectSelectorView)
|
|
//Gradient Section
|
|
gradientColorsFormStackView.addFormRow(label: "Gradient Color1", view: gradientColorView1)
|
|
gradientColorsFormStackView.addFormRow(label: "Gradient Color2", view: gradientColorView2)
|
|
append(section: gradientColorsFormStackView)
|
|
|
|
append(section: .init().with({
|
|
$0.title = "Badge"
|
|
$0.addFormRow(label: "Text", view: badgeTextField)
|
|
$0.addFormRow(label: "Fill Color", view: badgeFillColorPickerSelectorView)
|
|
$0.addFormRow(label: "Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
|
|
$0.addFormRow(label: "Max Width", view: maxWidthTextField)
|
|
}))
|
|
|
|
append(section: .init().with({
|
|
$0.title = "Eyebrow"
|
|
$0.addFormRow(label: "Text Style", tooltip: .init(title: "Text Style", content: "Eyebrow and Subtitle will share the same textStyle."), view: otherStandardStylePickerSelectorView)
|
|
$0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false)
|
|
$0.addFormRow(label: "Text", view: eyebrowTextField)
|
|
$0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
|
|
}))
|
|
|
|
eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
|
|
eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
|
|
append(section: eyebrowTokenFormStackView)
|
|
append(section: eyebrowColorFormStackView)
|
|
|
|
append(section: .init().with({
|
|
$0.title = "Title"
|
|
$0.addFormRow(label: "Text Style", view: titleStandardStylePickerSelectorView)
|
|
$0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false)
|
|
$0.addFormRow(label: "Text", view: titleTextField)
|
|
$0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
|
|
}))
|
|
titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
|
|
titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
|
|
append(section: titleTokenFormStackView)
|
|
append(section: titleColorFormStackView)
|
|
|
|
append(section: .init().with({
|
|
$0.title = "Subtitle"
|
|
$0.addFormRow(label: "Text", view: subTitleTextField)
|
|
$0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
|
|
}))
|
|
subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
|
|
subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
|
|
append(section: subtitleTokenFormStackView)
|
|
append(section: subtitleColorFormStackView)
|
|
|
|
append(section: .init().with({
|
|
$0.title = "Description Icon "
|
|
$0.addFormRow(label: "Show", view: showDescriptionIconSwitch, pinTrailing: false)
|
|
}))
|
|
append(section: descriptionIconFormStackView)
|
|
descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
|
|
descriptionIconFormStackView.addFormRow(label: "Accessibility", view: descriptionIconAccessibilityTextField)
|
|
descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
|
|
descriptionIconFormStackView.addFormRow(label: "Color", view: descriptionIconColorPickerSelectorView)
|
|
descriptionIconTokenFormStackView.addFormRow(label: "Token", view: descriptionIconTokenColorView)
|
|
descriptionIconColorFormStackView.addFormRow(label: "Custom", view: descriptionIconCustomColorView)
|
|
append(section: descriptionIconTokenFormStackView)
|
|
append(section: descriptionIconColorFormStackView)
|
|
|
|
|
|
append(section: .init().with({
|
|
$0.title = "Directional Icon"
|
|
$0.addFormRow(label: "Show", view: showDirectionalIconSwitch, pinTrailing: false)
|
|
}))
|
|
append(section: directionalIconFormStackView)
|
|
directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
|
|
directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
|
|
directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView)
|
|
directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
|
|
directionalIconColorFormStackView.addFormRow(label: "Custom", view: directionalIconCustomColorView)
|
|
append(section: directionalIconTokenFormStackView)
|
|
append(section: directionalIconColorFormStackView)
|
|
|
|
clickableSwitch.onChange = { [weak self] sender in
|
|
guard let self else { return }
|
|
if sender.isOn {
|
|
self.component.onClickActionPublisher("Tilelet", label: actionLabel)
|
|
} else {
|
|
self.component.onClick = nil
|
|
}
|
|
}
|
|
|
|
isLinkSwitch.onChange = { [weak self] sender in
|
|
guard let self else { return }
|
|
self.component.accessibilityTraits = sender.isOn ? .link : .button
|
|
}
|
|
|
|
heightTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
guard let self, let number = number?.cgFloatValue else {
|
|
self?.heightTextField.text = ""
|
|
return
|
|
}
|
|
if number >= 100 && number < self.view.frame.height * 0.65 {
|
|
self.component.height = number
|
|
} else {
|
|
self.component.height = nil
|
|
}
|
|
if let val = heightTextField.text, val.count > 2, number < 100 {
|
|
heightTextField.text = ""
|
|
}
|
|
}.store(in: &subscribers)
|
|
|
|
widthTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
self?.updateComponentConstraint(pinTrailing: number == nil)
|
|
guard let self, let number = number?.cgFloatValue else {
|
|
self?.widthTextField.text = ""
|
|
return
|
|
}
|
|
if number >= 100 && number < self.view.frame.width * 0.85 {
|
|
self.component.width = number
|
|
} else {
|
|
self.component.width = nil
|
|
}
|
|
if let val = widthTextField.text, val.count > 2, number < 100 {
|
|
widthTextField.text = ""
|
|
}
|
|
}.store(in: &subscribers)
|
|
|
|
textWidthTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
if let number {
|
|
self?.component.textWidth = .value(number.cgFloatValue)
|
|
self?.textPercentageTextField.text = ""
|
|
} else {
|
|
self?.component.textWidth = nil
|
|
}
|
|
}.store(in: &subscribers)
|
|
|
|
textPercentageTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
if let number {
|
|
self?.component.textWidth = .percentage(number.cgFloatValue)
|
|
self?.textWidthTextField.text = ""
|
|
} else {
|
|
self?.component.textWidth = nil
|
|
}
|
|
}.store(in: &subscribers)
|
|
|
|
titleTextField
|
|
.textPublisher
|
|
.sink { [weak self] text in
|
|
self?.setTitleModel()
|
|
}.store(in: &subscribers)
|
|
|
|
subTitleTextField
|
|
.textPublisher
|
|
.sink { [weak self] text in
|
|
self?.setSubTitleModel()
|
|
}.store(in: &subscribers)
|
|
|
|
badgeTextField
|
|
.textPublisher
|
|
.sink { [weak self] text in
|
|
self?.setBadgeModel()
|
|
}.store(in: &subscribers)
|
|
|
|
showDescriptionIconSwitch.onChange = { [weak self] sender in
|
|
guard let self else { return }
|
|
self.setDescriptionIconForm()
|
|
}
|
|
|
|
descriptionIconAccessibilityTextField
|
|
.textPublisher
|
|
.sink { [weak self] text in
|
|
self?.setDescriptiveIconModel()
|
|
}.store(in: &subscribers)
|
|
|
|
showDirectionalIconSwitch.onChange = { [weak self] sender in
|
|
guard let self else { return }
|
|
self.setDirectionalIconForm()
|
|
}
|
|
|
|
eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
|
|
self?.setEyebrowModel()
|
|
}.store(in: &subscribers)
|
|
|
|
titleIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
|
|
self?.setTitleModel()
|
|
}.store(in: &subscribers)
|
|
|
|
paddingPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.padding = item
|
|
}
|
|
|
|
eyebrowTextField.textPublisher
|
|
.sink { [weak self] text in
|
|
self?.setEyebrowModel()
|
|
}.store(in: &subscribers)
|
|
|
|
showBackgroundImageSwitch.onChange = { [weak self] sender in
|
|
if let image = self?.backgroundImage, sender.isOn {
|
|
self?.component.backgroundImage = image
|
|
} else {
|
|
self?.component.backgroundImage = nil
|
|
}
|
|
}
|
|
|
|
showDropShadowSwitch.onChange = { [weak self] sender in
|
|
self?.component.showDropShadow = sender.isOn
|
|
}
|
|
|
|
imageFallbackColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.imageFallbackColor = item
|
|
}
|
|
|
|
maxWidthTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
guard let number else { return }
|
|
self?.component.badgeModel?.maxWidth = number.cgFloatValue
|
|
}.store(in: &subscribers)
|
|
}
|
|
|
|
func setIconColorForms() {
|
|
setDirectionalIconColorForm()
|
|
setDescriptionIconColorForm()
|
|
}
|
|
|
|
func setDescriptionIconForm() {
|
|
let showForm = showDescriptionIconSwitch.isOn
|
|
descriptionIconFormStackView.isHidden = !showForm
|
|
directionalIconFormStackView.isHidden = true
|
|
if showForm {
|
|
showDirectionalIconSwitch.isOn = false
|
|
setDescriptiveIconModel()
|
|
} else {
|
|
component.descriptiveIconModel = nil
|
|
}
|
|
setIconColorForms()
|
|
}
|
|
|
|
func setDirectionalIconForm() {
|
|
let showForm = showDirectionalIconSwitch.isOn
|
|
directionalIconFormStackView.isHidden = !showForm
|
|
descriptionIconFormStackView.isHidden = true
|
|
if showForm {
|
|
showDescriptionIconSwitch.isOn = false
|
|
setDirectionalIconModel()
|
|
} else {
|
|
component.directionalIconModel = nil
|
|
}
|
|
setIconColorForms()
|
|
}
|
|
|
|
func setDirectionalIconColorForm() {
|
|
let selectedItem = directionalIconColorPickerSelectorView.selectedItem
|
|
if showDirectionalIconSwitch.isOn && selectedItem != .default {
|
|
directionalIconTokenFormStackView.isHidden = selectedItem != .token
|
|
directionalIconColorFormStackView.isHidden = selectedItem != .custom
|
|
} else {
|
|
directionalIconTokenFormStackView.isHidden = true
|
|
directionalIconColorFormStackView.isHidden = true
|
|
}
|
|
}
|
|
|
|
func setDescriptionIconColorForm() {
|
|
let selectedItem = descriptionIconColorPickerSelectorView.selectedItem
|
|
if showDescriptionIconSwitch.isOn && selectedItem != .default {
|
|
descriptionIconTokenFormStackView.isHidden = selectedItem != .token
|
|
descriptionIconColorFormStackView.isHidden = selectedItem != .custom
|
|
} else {
|
|
descriptionIconTokenFormStackView.isHidden = true
|
|
descriptionIconColorFormStackView.isHidden = true
|
|
}
|
|
}
|
|
|
|
func setupModel() {
|
|
let titleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
|
|
let subTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
|
|
component.color = .black
|
|
component.surface = .light
|
|
component.titleModel = titleModel
|
|
component.subTitleModel = subTitleModel
|
|
component.padding = .small
|
|
//setup UI
|
|
backgroundColorPickerSelectorView.text = backgroundColor.rawValue
|
|
textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
|
|
surfacePickerSelectorView.text = component.surface.rawValue
|
|
otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
|
|
titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
|
|
titleTextField.text = titleModel.text
|
|
subTitleTextField.text = subTitleModel.text
|
|
widthTextField.text = component.width != nil ? "\(component.width!)" : ""
|
|
textPositionPickerSelectorView.text = component.textPostion.rawValue
|
|
scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
|
|
updateOtherTextStyles()
|
|
|
|
descriptionIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
|
|
descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
|
|
descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue
|
|
|
|
directionalIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
|
|
directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
|
|
directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
|
|
}
|
|
|
|
//sub models
|
|
func setBadgeModel() {
|
|
if let text = badgeTextField.text, !text.isEmpty {
|
|
component.badgeModel = Tilelet.BadgeModel(text: text, fillColor: badgeFillColorPickerSelectorView.selectedItem, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
|
|
} else {
|
|
component.badgeModel = nil
|
|
}
|
|
}
|
|
|
|
func setTitleModel() {
|
|
if let text = titleTextField.text, !text.isEmpty {
|
|
var textColor: TitleLockup.TitleTextColor
|
|
switch titleColorPickerSelectorView.selectedItem {
|
|
case .primary:
|
|
textColor = .primary
|
|
case .token:
|
|
textColor = .token(titleTokenColorView.selectedItem)
|
|
case .custom:
|
|
if let color = titleCustomColorView.selectedColor {
|
|
textColor = .custom(color)
|
|
} else {
|
|
textColor = .custom(VDSColor.elementsPrimaryOnlight)
|
|
}
|
|
}
|
|
|
|
component.titleModel = Tilelet.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
|
|
} else {
|
|
component.titleModel = nil
|
|
}
|
|
}
|
|
|
|
func setSubTitleModel() {
|
|
if let text = subTitleTextField.text, !text.isEmpty {
|
|
var textColor: TitleLockup.TextColor
|
|
switch subtitleColorPickerSelectorView.selectedItem {
|
|
case .primary:
|
|
textColor = .primary
|
|
case .secondary:
|
|
textColor = .secondary
|
|
case .token:
|
|
textColor = .token(subtitleTokenColorView.selectedItem)
|
|
case .custom:
|
|
if let color = subtitleCustomColorView.selectedColor {
|
|
textColor = .custom(color)
|
|
} else {
|
|
textColor = .custom(VDSColor.elementsPrimaryOnlight)
|
|
}
|
|
}
|
|
|
|
component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: textColor)
|
|
} else {
|
|
component.subTitleModel = nil
|
|
}
|
|
}
|
|
|
|
func setEyebrowModel() {
|
|
if let text = eyebrowTextField.text, !text.isEmpty {
|
|
var textColor: TitleLockup.TextColor
|
|
switch eyebrowColorPickerSelectorView.selectedItem {
|
|
case .primary:
|
|
textColor = .primary
|
|
case .secondary:
|
|
textColor = .secondary
|
|
case .token:
|
|
textColor = .token(eyebrowTokenColorView.selectedItem)
|
|
case .custom:
|
|
if let color = eyebrowCustomColorView.selectedColor {
|
|
textColor = .custom(color)
|
|
} else {
|
|
textColor = .custom(VDSColor.elementsPrimaryOnlight)
|
|
}
|
|
}
|
|
component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
|
|
} else {
|
|
component.eyebrowModel = nil
|
|
}
|
|
}
|
|
|
|
func setDescriptiveIconModel() {
|
|
let iconSize = descriptionIconSizePickerSelectorView.selectedItem
|
|
let iconName = descriptionNamePickerSelectorView.selectedItem
|
|
var iconColor: Tilelet.IconColor? = nil
|
|
var accessibleText: String?
|
|
if let at = descriptionIconAccessibilityTextField.text, !at.isEmpty {
|
|
accessibleText = at
|
|
}
|
|
|
|
switch descriptionIconColorPickerSelectorView.selectedItem {
|
|
case .token:
|
|
iconColor = .token(descriptionIconTokenColorView.selectedItem)
|
|
case .custom:
|
|
iconColor = .custom(descriptionIconCustomColorView.selectedColor ?? .white)
|
|
default:
|
|
break
|
|
}
|
|
component.descriptiveIconModel = .init(name: iconName, iconColor: iconColor, size: iconSize, accessibleText: accessibleText ?? nil )
|
|
}
|
|
|
|
func setDirectionalIconModel() {
|
|
let iconType = directionIconPickerSelectorView.selectedItem
|
|
let iconSize = directionIconSizePickerSelectorView.selectedItem
|
|
var iconColor: Tilelet.IconColor? = nil
|
|
switch directionalIconColorPickerSelectorView.selectedItem {
|
|
case .token:
|
|
iconColor = .token(directionalIconTokenColorView.selectedItem)
|
|
case .custom:
|
|
iconColor = .custom(directionalIconCustomColorView.selectedColor ?? .white)
|
|
default:
|
|
break
|
|
}
|
|
component.directionalIconModel = .init(iconType: iconType, iconColor: iconColor, size: iconSize)
|
|
}
|
|
|
|
func updateOtherTextStyles() {
|
|
let items = component.titleLockup.standardStyleConfiguration.configuration(for: titleStandardStylePickerSelectorView.selectedItem.value)!.allOtherStandardStyles
|
|
let otheritems = items.compactMap { Tilelet.SubTitleModel.OtherStandardStyle(rawValue: $0.rawValue)! }
|
|
otherStandardStylePickerSelectorView.items = otheritems
|
|
otherStandardStylePickerSelectorView.text = otheritems.first?.rawValue ?? ""
|
|
setSubTitleModel()
|
|
}
|
|
|
|
//Picker
|
|
func setupPicker(){
|
|
surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.surface = item
|
|
self?.contentTopView.backgroundColor = item.color
|
|
}
|
|
|
|
titleStandardStylePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
guard let self else { return }
|
|
self.setTitleModel()
|
|
self.updateOtherTextStyles()
|
|
}
|
|
|
|
otherStandardStylePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.setSubTitleModel()
|
|
}
|
|
|
|
textPositionPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
guard let self else { return }
|
|
self.component.textPostion = item
|
|
}
|
|
|
|
badgeFillColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.badgeModel?.fillColor = item
|
|
}
|
|
|
|
badgeNumberOfLinesPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.badgeModel?.numberOfLines = item.intValue
|
|
}
|
|
|
|
scalingTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.aspectRatio = item
|
|
self?.component.layoutIfNeeded()
|
|
self?.showDebug(show: self?.debugViewSwitch.isOn ?? false)
|
|
}
|
|
|
|
backgroundEffectSelectorView.onPickerDidSelect = { [weak self] item in
|
|
guard let self else { return }
|
|
if let effect = item.effect {
|
|
self.component.backgroundEffect = self.getTilelet(effect: effect)
|
|
self.gradientColorsFormStackView.isHidden = true
|
|
self.gradientColorView1.selectedColor = nil
|
|
self.gradientColorView2.selectedColor = nil
|
|
} else {
|
|
self.colorPickerType = .gradientColor1
|
|
self.gradientColorsFormStackView.isHidden = false
|
|
}
|
|
}
|
|
|
|
textAlignmentPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.titleLockup.textAlignment = item
|
|
}
|
|
|
|
backgroundColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
guard let self else { return }
|
|
if let color = getTilelet(backgroundColor: item) {
|
|
component.color = color
|
|
} else {
|
|
backgroundColorTokenFormStackView.isHidden = item != .token
|
|
backgroundColorFormStackView.isHidden = item != .custom
|
|
}
|
|
}
|
|
|
|
backgroundColorTokenColorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.color = .token(item)
|
|
}
|
|
|
|
eyebrowColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.currentSurfaceColorType = .eyebrow
|
|
self?.eyebrowTokenFormStackView.isHidden = item != .token
|
|
self?.eyebrowColorFormStackView.isHidden = item != .custom
|
|
self?.setEyebrowModel()
|
|
}
|
|
|
|
eyebrowTokenColorView.onPickerDidSelect = { [weak self] item in
|
|
self?.setEyebrowModel()
|
|
}
|
|
|
|
titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.currentSurfaceColorType = .title
|
|
self?.titleTokenFormStackView.isHidden = item != .token
|
|
self?.titleColorFormStackView.isHidden = item != .custom
|
|
self?.setTitleModel()
|
|
}
|
|
|
|
titleTokenColorView.onPickerDidSelect = { [weak self] item in
|
|
self?.setTitleModel()
|
|
}
|
|
|
|
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.currentSurfaceColorType = .subtitle
|
|
self?.subtitleTokenFormStackView.isHidden = item != .token
|
|
self?.subtitleColorFormStackView.isHidden = item != .custom
|
|
self?.setSubTitleModel()
|
|
}
|
|
|
|
subtitleTokenColorView.onPickerDidSelect = { [weak self] item in
|
|
self?.setSubTitleModel()
|
|
}
|
|
|
|
descriptionIconColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.setIconColorForms()
|
|
self?.setDescriptiveIconModel()
|
|
}
|
|
|
|
descriptionNamePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.setDescriptiveIconModel()
|
|
}
|
|
|
|
descriptionIconSizePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.setDescriptiveIconModel()
|
|
}
|
|
|
|
descriptionIconTokenColorView.onPickerDidSelect = { [weak self] item in
|
|
self?.colorPickerType = .token
|
|
self?.setDescriptiveIconModel()
|
|
}
|
|
|
|
directionalIconColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.setIconColorForms()
|
|
self?.setDirectionalIconModel()
|
|
}
|
|
|
|
directionIconPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.setDirectionalIconModel()
|
|
}
|
|
|
|
directionIconSizePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.setDirectionalIconModel()
|
|
}
|
|
|
|
directionalIconTokenColorView.onPickerDidSelect = { [weak self] item in
|
|
self?.colorPickerType = .token
|
|
self?.setDirectionalIconModel()
|
|
}
|
|
}
|
|
|
|
func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
|
|
switch effect {
|
|
case .transparency:
|
|
Tilelet.BackgroundEffect.transparency
|
|
case .gradient(let firstColor, let secondColor):
|
|
Tilelet.BackgroundEffect.gradient(firstColor, secondColor)
|
|
default:
|
|
Tilelet.BackgroundEffect.none
|
|
}
|
|
}
|
|
|
|
func getTilelet(backgroundColor: BackgroundColor) -> Tilelet.BackgroundColor? {
|
|
switch backgroundColor {
|
|
case .primary:
|
|
.primary
|
|
case .secondary:
|
|
.secondary
|
|
case .white:
|
|
.white
|
|
case .black:
|
|
.black
|
|
case .custom:
|
|
nil
|
|
case .token:
|
|
nil
|
|
}
|
|
}
|
|
}
|
|
|
|
extension TileletViewController: ComponentSampleable {
|
|
static func makeSample() -> ComponentSample {
|
|
let component = Self.makeComponent()
|
|
let titleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
|
|
let subTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
|
|
|
|
component.surface = .light
|
|
component.titleModel = titleModel
|
|
component.subTitleModel = subTitleModel
|
|
component.width = 250
|
|
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
|
|
}
|
|
}
|
|
|
|
extension TileletViewController: 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) {
|
|
let color = viewController.selectedColor
|
|
var lightColorView: ColorPickerView<ColorPickerType>
|
|
var darkColorView: ColorPickerView<ColorPickerType>
|
|
switch colorPickerType {
|
|
case .contentViewBackgroundColor:
|
|
component.contentView.backgroundColor = color
|
|
case .gradientColor1:
|
|
gradientColorView1.selectedColor = viewController.selectedColor
|
|
updateGradientColors()
|
|
case .gradientColor2:
|
|
gradientColorView2.selectedColor = viewController.selectedColor
|
|
updateGradientColors()
|
|
case .custom:
|
|
var colorView: ColorPickerView<ColorPickerType>
|
|
|
|
switch currentSurfaceColorType {
|
|
case .background:
|
|
colorView = backgroundColorCustomColorView
|
|
case .eyebrow:
|
|
colorView = eyebrowCustomColorView
|
|
case .title:
|
|
colorView = titleCustomColorView
|
|
case .subtitle:
|
|
colorView = subtitleCustomColorView
|
|
case .directionalIcon:
|
|
colorView = directionalIconCustomColorView
|
|
case .descriptionIcon:
|
|
colorView = descriptionIconCustomColorView
|
|
}
|
|
colorView.selectedColor = viewController.selectedColor
|
|
|
|
switch currentSurfaceColorType {
|
|
case .background:
|
|
component.color = .custom(color)
|
|
case .eyebrow:
|
|
setEyebrowModel()
|
|
case .title:
|
|
setTitleModel()
|
|
case .subtitle:
|
|
setSubTitleModel()
|
|
case .directionalIcon:
|
|
setDirectionalIconModel()
|
|
case .descriptionIcon:
|
|
setDescriptiveIconModel()
|
|
}
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
|
|
func updateGradientColors(){
|
|
if let selectedGradient1Color = gradientColorView1.selectedColor,
|
|
let selectedGradient2Color = gradientColorView2.selectedColor{
|
|
component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
|
|
}
|
|
}
|
|
}
|
|
|
|
extension TileletViewController {
|
|
|
|
enum BackgroundColor: String, CaseIterable {
|
|
|
|
case primary, secondary, white, black, token, custom
|
|
|
|
var color: TileContainer.BackgroundColor? {
|
|
switch self {
|
|
case .primary:
|
|
.primary
|
|
case .secondary:
|
|
.secondary
|
|
case .white:
|
|
.white
|
|
case .black:
|
|
.black
|
|
case .token:
|
|
nil
|
|
case .custom:
|
|
nil
|
|
}
|
|
}
|
|
}
|
|
}
|