240 lines
10 KiB
Swift
240 lines
10 KiB
Swift
//
|
|
// CarouselViewController.swift
|
|
// VDSSample
|
|
//
|
|
// Created by Kanamarlapudi, Vasavi on 29/05/24.
|
|
//
|
|
|
|
import Foundation
|
|
import UIKit
|
|
import VDS
|
|
import Combine
|
|
import VDSCoreTokens
|
|
|
|
class CarouselViewController: BaseViewController<Carousel> {
|
|
|
|
let label = Label()
|
|
|
|
lazy var scalingTypePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Tilelet.AspectRatio.allCases)
|
|
}()
|
|
|
|
lazy var paginationDisplayPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Carousel.PaginationDisplay.allCases)
|
|
}()
|
|
|
|
lazy var peekPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Carousel.Peek.allCases)
|
|
}()
|
|
|
|
lazy var gutterPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Carousel.Gutter.allCases)
|
|
}()
|
|
|
|
lazy var layoutPickerSelectorView = {
|
|
PickerSelectorView(title: "1UP",
|
|
picker: self.picker,
|
|
items: UIDevice.isIPad ? CarouselScrollbar.Layout.allCases : [CarouselScrollbar.Layout.oneUP, CarouselScrollbar.Layout.twoUP, CarouselScrollbar.Layout.threeUP])
|
|
}()
|
|
|
|
lazy var paginationKindPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: ButtonIcon.Kind.allCases)
|
|
}()
|
|
|
|
lazy var horizAlignmtPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Carousel.Horizontal.allCases)
|
|
}()
|
|
|
|
lazy var vertAlignmtPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Carousel.Vertical.allCases)
|
|
}()
|
|
|
|
var paginationFloatingSwitch = Toggle()
|
|
var paginationInsetField = NumericField()
|
|
var widthTextField = NumericField()
|
|
var percentageTextField = NumericField()
|
|
var exampleSwitch = Toggle()
|
|
var emptyData: [Any] = []
|
|
var rows: [Any] = []
|
|
|
|
override func viewDidLoad() {
|
|
super.viewDidLoad()
|
|
addContentTopView(view: component)
|
|
setupPicker()
|
|
setupModel()
|
|
}
|
|
|
|
override func setupForm() {
|
|
super.setupForm()
|
|
//add form rows
|
|
addFormRow(label: "onChange", view: label)
|
|
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
|
addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
|
|
addFormRow(label: "Pagination Display", view: paginationDisplayPickerSelectorView)
|
|
addFormRow(label: "Peek", view: peekPickerSelectorView)
|
|
addFormRow(label: "Gutter", view: gutterPickerSelectorView)
|
|
addFormRow(label: "Layout", view: layoutPickerSelectorView)
|
|
addFormRow(label: "Pagination Kind", view: paginationKindPickerSelectorView)
|
|
addFormRow(label: "Pagination Float", view: paginationFloatingSwitch)
|
|
addFormRow(label: "Pagination Inset", view: paginationInsetField)
|
|
addFormRow(label: "Width", view: widthTextField)
|
|
addFormRow(label: "Percentage (1-100)", view: percentageTextField)
|
|
addFormRow(label: "Example", view: exampleSwitch)
|
|
addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView)
|
|
addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView)
|
|
|
|
widthTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
if let number {
|
|
self?.component.width = .value(number.cgFloatValue)
|
|
self?.percentageTextField.text = ""
|
|
} else {
|
|
self?.component.width = nil
|
|
}
|
|
}.store(in: &subscribers)
|
|
|
|
percentageTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
if let number {
|
|
self?.component.width = .percentage(number.cgFloatValue)
|
|
self?.widthTextField.text = ""
|
|
} else {
|
|
self?.component.width = nil
|
|
}
|
|
}.store(in: &subscribers)
|
|
|
|
paginationInsetField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
if let number {
|
|
self?.component.paginationInset = number.cgFloatValue
|
|
} else {
|
|
self?.component.paginationInset = UIDevice.isIPad ? VDSLayout.space3X : VDSLayout.space2X
|
|
}
|
|
}.store(in: &subscribers)
|
|
|
|
paginationFloatingSwitch.onChange = { [weak self] sender in
|
|
guard let self else { return }
|
|
self.component.pagination = .init(kind: paginationKindPickerSelectorView.selectedItem, floating: sender.isOn)
|
|
}
|
|
|
|
exampleSwitch.onChange = { [weak self] sender in
|
|
guard let self else { return }
|
|
component.data = sender.isOn ? rows : emptyData
|
|
component.slotAlignment = nil
|
|
}
|
|
|
|
}
|
|
|
|
func setupModel() {
|
|
//setup UI
|
|
scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
|
|
paginationDisplayPickerSelectorView.text = component.paginationDisplay.rawValue
|
|
peekPickerSelectorView.text = component.peek.rawValue
|
|
gutterPickerSelectorView.text = component.gutter.rawValue
|
|
layoutPickerSelectorView.text = component.layout.rawValue
|
|
paginationKindPickerSelectorView.text = ButtonIcon.Kind.lowContrast.rawValue
|
|
paginationFloatingSwitch.isOn = true
|
|
paginationInsetField.text = UIDevice.isIPad ? "12" : "8"
|
|
rows.append(Label().with { $0.text = "Slot 1"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
|
rows.append(Label().with { $0.text = "Slot 2"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
|
rows.append(Label().with { $0.text = "Slot 3"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
|
rows.append(Label().with { $0.text = "Slot 4"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
|
rows.append(Label().with { $0.text = "Slot 5"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
|
rows.append(Label().with { $0.text = "Slot 6"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
|
rows.append(Label().with { $0.text = "Slot 7"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
|
rows.append(Label().with { $0.text = "Slot 8"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
|
rows.append(Label().with { $0.text = "Slot 9"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
|
rows.append(Label().with { $0.text = "Slot 10"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
|
emptyData = [{},{},{},{},{},{},{},{},{},{}]
|
|
component.data = exampleSwitch.isOn ? rows : emptyData
|
|
component.renderItemStyle = .init(backgroundColor: "#d9d9d9", height: 100, width: 100, borderRadius: 12.0)
|
|
label.text = "1"
|
|
|
|
// Callback when moving the carousel. Returns initial visible slide's index in the carousel.
|
|
component.onChange = { [weak self] selectedIndex in
|
|
guard let self else { return }
|
|
label.text = "\(selectedIndex)"
|
|
}
|
|
}
|
|
|
|
func setupPicker() {
|
|
surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.surface = item
|
|
self?.contentTopView.backgroundColor = item.color
|
|
}
|
|
|
|
scalingTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.aspectRatio = item
|
|
}
|
|
|
|
paginationDisplayPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.paginationDisplay = item
|
|
if (self?.component.peek == Carousel.Peek.none) && item == .none {
|
|
DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
|
|
self?.paginationDisplayPickerSelectorView.text = "persistent"
|
|
}
|
|
}
|
|
}
|
|
|
|
peekPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.peek = item
|
|
if item == .none {
|
|
self?.paginationDisplayPickerSelectorView.text = "persistent"
|
|
} else if item == .minimum && UIDevice.isIPad {
|
|
DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
|
|
self?.peekPickerSelectorView.text = "standard"
|
|
}
|
|
} else if item == .standard && !UIDevice.isIPad && (self?.component.layout != CarouselScrollbar.Layout.oneUP) {
|
|
DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
|
|
self?.peekPickerSelectorView.text = "minimum"
|
|
}
|
|
}
|
|
}
|
|
|
|
gutterPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.gutter = item
|
|
}
|
|
|
|
layoutPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
if item != .oneUP && !UIDevice.isIPad && self?.component.peek == Carousel.Peek.standard {
|
|
DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
|
|
self?.peekPickerSelectorView.text = "minimum"
|
|
}
|
|
}
|
|
self?.component.layout = item
|
|
}
|
|
|
|
paginationKindPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
guard let self else { return }
|
|
self.component.pagination = .init(kind: item, floating: paginationFloatingSwitch.isOn)
|
|
}
|
|
|
|
vertAlignmtPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
guard let self else { return }
|
|
self.component.slotAlignment = .init(vertical: item, horizontal: horizAlignmtPickerSelectorView.selectedItem)
|
|
}
|
|
|
|
horizAlignmtPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
guard let self else { return }
|
|
self.component.slotAlignment = .init(vertical: vertAlignmtPickerSelectorView.selectedItem, horizontal: item)
|
|
}
|
|
}
|
|
}
|