Digital ACT-191 ONEAPP-6830 story: scrollbar thumb advancement logic, changes to active track color and opacity.

This commit is contained in:
vasavk 2024-03-21 01:49:10 +05:30
parent 11618e88a0
commit fadb996c6e

View File

@ -104,16 +104,18 @@ open class CarouselScrollbar: View {
//-------------------------------------------------- //--------------------------------------------------
// Sizes are from InVision design specs. // Sizes are from InVision design specs.
internal var containerSize: CGSize { CGSize(width: 45, height: 44) } internal var containerSize: CGSize { CGSize(width: 45, height: 44) }
internal var _selectedLayout: Layout = .oneUP
internal var _numberOfSlides: Int? = 1
internal var heightConstraint: NSLayoutConstraint?
private let trackViewWidth = 96 private let trackViewWidth = 96
private let trackViewHeight: CGFloat = 4 private let trackViewHeight: CGFloat = 4
private let minThumbWidth: Float = 16.0 private let minThumbWidth: Float = 16.0
private var thumbWidth: Float = 16.0 private var thumbWidth: Float = 16.0
private var actualThumbWidth: Float = 0.0 private var actualThumbWidth: Float = 0.0
private var _selectedLayout: Layout = .oneUP private let cornerRadius: CGFloat = 4.0
private var _numberOfSlides: Int? = 1 private let activeOpacity: Float = 0.15
internal var cornerRadius: CGFloat = 4.0 private let defaultOpacity: Float = 1
internal var heightConstraint: NSLayoutConstraint?
/// Track view with fixed width /// Track view with fixed width
internal var trackView: UIView = { internal var trackView: UIView = {
@ -175,16 +177,20 @@ open class CarouselScrollbar: View {
///Left active overlay ///Left active overlay
leftActiveOverlay.frame = CGRectMake(trackView.frame.origin.x, 20, CGFloat(trackViewWidth), trackViewHeight) leftActiveOverlay.frame = CGRectMake(trackView.frame.origin.x, 20, CGFloat(trackViewWidth), trackViewHeight)
leftActiveOverlay.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.handleTap(_:))))
leftActiveOverlay.isUserInteractionEnabled = true leftActiveOverlay.isUserInteractionEnabled = true
leftActiveOverlay.layer.cornerRadius = cornerRadius leftActiveOverlay.layer.cornerRadius = cornerRadius
let leftPressRecognizer = UILongPressGestureRecognizer(target: self, action: #selector(self.leftLongPressed(_:)))
leftPressRecognizer.minimumPressDuration = 0
leftActiveOverlay.addGestureRecognizer(leftPressRecognizer)
addSubview(leftActiveOverlay) addSubview(leftActiveOverlay)
///Right active overlay ///Right active overlay
rightActiveOverlay.frame = CGRectMake(thumbView.frame.origin.x + thumbView.frame.size.width, 20, CGFloat(trackViewWidth), trackViewHeight) rightActiveOverlay.frame = CGRectMake(thumbView.frame.origin.x + thumbView.frame.size.width, 20, CGFloat(trackViewWidth), trackViewHeight)
rightActiveOverlay.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.handleTap(_:))))
rightActiveOverlay.isUserInteractionEnabled = true rightActiveOverlay.isUserInteractionEnabled = true
rightActiveOverlay.layer.cornerRadius = cornerRadius rightActiveOverlay.layer.cornerRadius = cornerRadius
let rightPressRecognizer = UILongPressGestureRecognizer(target: self, action: #selector(self.rightLongPressed(_:)))
rightPressRecognizer.minimumPressDuration = 0
rightActiveOverlay.addGestureRecognizer(rightPressRecognizer)
addSubview(rightActiveOverlay) addSubview(rightActiveOverlay)
//Thumbview //Thumbview
@ -192,7 +198,7 @@ open class CarouselScrollbar: View {
thumbView.layer.cornerRadius = cornerRadius thumbView.layer.cornerRadius = cornerRadius
thumbView.addGestureRecognizer(UIPanGestureRecognizer(target: self, action:(#selector(self.handleGesture(_:))))) thumbView.addGestureRecognizer(UIPanGestureRecognizer(target: self, action:(#selector(self.handleGesture(_:)))))
addSubview(thumbView) addSubview(thumbView)
updateFrames() updateActiveOverlayFrames()
} }
open override func updateView() { open override func updateView() {
@ -217,21 +223,17 @@ open class CarouselScrollbar: View {
//-------------------------------------------------- //--------------------------------------------------
// MARK: - Private Methods // MARK: - Private Methods
//-------------------------------------------------- //--------------------------------------------------
@objc func handleTap(_ gestureRecognizer: UITapGestureRecognizer) { func updateThumbViewToLeft() {
// handling code
let tag = gestureRecognizer.view?.tag
switch tag! {
case 2 :
thumbView.frame.origin.x = thumbView.frame.origin.x - CGFloat(actualThumbWidth) thumbView.frame.origin.x = thumbView.frame.origin.x - CGFloat(actualThumbWidth)
updateFrames() updateActiveOverlayFrames()
case 3 :
thumbView.frame.origin.x = thumbView.frame.origin.x + CGFloat(actualThumbWidth)
updateFrames()
default:
print("default")
}
} }
func updateThumbViewToRight() {
thumbView.frame.origin.x = thumbView.frame.origin.x + CGFloat(actualThumbWidth)
updateActiveOverlayFrames()
}
//TO DO: Drag functionality pending
@objc func handleGesture(_ sender: UIPanGestureRecognizer) { @objc func handleGesture(_ sender: UIPanGestureRecognizer) {
switch sender.state { switch sender.state {
@ -252,24 +254,64 @@ open class CarouselScrollbar: View {
} }
} }
@objc func leftLongPressed(_ gesture: UILongPressGestureRecognizer) {
if gesture.state == .began {
leftActiveOverlay.backgroundColor = activeOverlayColorConfiguration.getColor(self)
leftActiveOverlay.layer.opacity = activeOpacity
} else if gesture.state == .cancelled {
leftActiveOverlay.backgroundColor = .clear
leftActiveOverlay.layer.opacity = defaultOpacity
} else if gesture.state == .ended {
leftActiveOverlay.backgroundColor = .clear
leftActiveOverlay.layer.opacity = defaultOpacity
DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(100)) { [weak self] in
self?.updateThumbViewToLeft()
}
}
}
@objc func rightLongPressed(_ gesture: UILongPressGestureRecognizer) {
if gesture.state == .began {
rightActiveOverlay.backgroundColor = activeOverlayColorConfiguration.getColor(self)
rightActiveOverlay.layer.opacity = activeOpacity
} else if gesture.state == .cancelled {
rightActiveOverlay.backgroundColor = .clear
rightActiveOverlay.layer.opacity = defaultOpacity
} else if gesture.state == .ended {
rightActiveOverlay.backgroundColor = .clear
rightActiveOverlay.layer.opacity = defaultOpacity
DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(100)) { [weak self] in
self?.updateThumbViewToRight()
}
}
}
private func setThumbWidth() { private func setThumbWidth() {
let width = Float (trackViewWidth / (numberOfSlides ?? 1) * _selectedLayout.value) let width = Float (trackViewWidth / (numberOfSlides ?? 1) * _selectedLayout.value)
actualThumbWidth = (width > Float(trackViewWidth)) ? Float(trackViewWidth) : width actualThumbWidth = (width > Float(trackViewWidth)) ? Float(trackViewWidth) : width
thumbWidth = (width < Float(trackViewWidth) && width > minThumbWidth) ? width : ((width > Float(trackViewWidth)) ? Float(trackViewWidth) : minThumbWidth) thumbWidth = (width <= Float(trackViewWidth) && width > minThumbWidth) ? width : ((width > Float(trackViewWidth)) ? Float(trackViewWidth) : minThumbWidth)
thumbView.frame.size.width = CGFloat(thumbWidth) thumbView.frame.size.width = CGFloat(thumbWidth)
thumbView.frame.origin.x = trackView.frame.origin.x thumbView.frame.origin.x = trackView.frame.origin.x
updateFrames() updateActiveOverlayFrames()
} }
private func updateFrames() { private func updateActiveOverlayFrames() {
//left active overlay origin - x, width // adjusting thumb position if it goes beyond trackView.
leftActiveOverlay.frame.size.width = thumbView.frame.origin.x - trackView.frame.origin.x let thumbPosition = thumbView.frame.origin.x + thumbView.frame.size.width
let trackPosition = trackView.frame.origin.x + trackView.frame.size.width
if thumbPosition > trackPosition {
thumbView.frame.origin.x = trackPosition - thumbView.frame.size.width
} else if thumbView.frame.origin.x < trackView.frame.origin.x {
thumbView.frame.origin.x = trackView.frame.origin.x
}
//right active overlay origin - x, width //left active overlay position update
let position1 = thumbView.frame.origin.x + thumbView.frame.size.width leftActiveOverlay.frame.size.width = thumbView.frame.origin.x - trackView.frame.origin.x + cornerRadius
let position2 = trackView.frame.origin.x + trackView.frame.size.width
rightActiveOverlay.frame.origin.x = position1 //left active overlay position update
rightActiveOverlay.frame.size.width = position2 - position1 rightActiveOverlay.frame.origin.x = thumbView.frame.origin.x + thumbView.frame.size.width - cornerRadius
rightActiveOverlay.frame.size.width = (trackView.frame.origin.x + trackView.frame.size.width) - (thumbView.frame.origin.x + thumbView.frame.size.width) + cornerRadius
} }
} }