// // CarouselViewController.swift // VDSSample // // Created by Kanamarlapudi, Vasavi on 29/05/24. // import Foundation import UIKit import VDS import Combine import VDSCoreTokens class CarouselViewController: BaseViewController { let label = Label() 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 selectedIndexField = NumericField() var rows: [UIView] = [] var infoLabel = Label().with { $0.textStyle = .boldBodyMedium } override func viewDidLoad() { super.viewDidLoad() infoLabel.text = "Added Border To Slot Only For VQA Test." let stack = UIStackView(arrangedSubviews: [component, infoLabel]).with { $0.axis = .vertical $0.spacing = 25 } addContentTopView(view: stack) setupPicker() setupModel() } override func setupForm() { super.setupForm() //add form rows addFormRow(label: "onChange", view: label) addFormRow(label: "Surface", view: surfacePickerSelectorView) addFormRow(label: "Pagination Display", view: paginationDisplayPickerSelectorView) addFormRow(label: "Peek", view: peekPickerSelectorView) addFormRow(label: "Gutter", view: gutterPickerSelectorView) addFormRow(label: "Layout", view: layoutPickerSelectorView) addFormRow(label: "Selected Group Index", view: selectedIndexField) addFormRow(label: "Pagination Kind", view: paginationKindPickerSelectorView) addFormRow(label: "Pagination Float", view: paginationFloatingSwitch) addFormRow(label: "Pagination Inset", view: paginationInsetField) addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView) addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView) selectedIndexField .numberPublisher .sink { [weak self] number in if let number, number.intValue >= 0 { self?.component.selectedIndex = number.intValue } else { self?.component.selectedIndex = 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) } } func setupModel() { //setup UI 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" let onClick: (ButtonBase) -> Void = { button in print("\(button.text!) clicked")} rows.append(Label().with { $0.text = "Offer you best deals on phones, tablets, home, internet and more. Pre order the new version mobiles and get off *T&C apply."; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}) rows.append(Button().with{ $0.use = .secondary; $0.text = "Secondary"; $0.onClick = onClick}) rows.append(Label().with { $0.text = "Get iPhone 15 on us. Online only. "; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}) rows.append(Button().with{ $0.use = .primary; $0.text = "Primary"; $0.onClick = onClick}) rows.append(Label().with { $0.text = "Unlimited plans. No trade-in required."; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}) rows.append(Label().with { $0.text = "With trade-in. Any condition guaranteed"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}) rows.append(Button().with{ $0.use = .primary; $0.text = "More"; $0.onClick = onClick}) rows.append(Button().with{ $0.use = .secondary; $0.text = "Shop"; $0.onClick = onClick}) rows.append(Button().with{ $0.use = .secondary; $0.text = "Buy"; $0.onClick = onClick}) rows.append(Button().with{ $0.use = .secondary; $0.text = "Offer"; $0.onClick = onClick}) component.views = rows label.text = "0" // Callback when moving the carousel. Returns selectedGroupIndex. component.onChange = { [weak self] selectedGroupIndex in guard let self else { return } label.text = "\(selectedGroupIndex)" } } func setupPicker() { surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.surface = item self?.contentTopView.backgroundColor = item.color self?.infoLabel.surface = 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 self?.label.text = "0" } 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) } } }