[Chat] Native input bar
This commit is contained in:
metacryst
17
native-input/ForumCapacitorNativeInput.podspec
Normal file
17
native-input/ForumCapacitorNativeInput.podspec
Normal file
@@ -0,0 +1,17 @@
|
||||
require 'json'
|
||||
|
||||
package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
|
||||
|
||||
Pod::Spec.new do |s|
|
||||
s.name = 'ForumCapacitorNativeInput'
|
||||
s.version = package['version']
|
||||
s.summary = package['description']
|
||||
s.license = package['license']
|
||||
s.homepage = 'https://frm.so'
|
||||
s.author = package['author']
|
||||
s.source = { :git => 'https://frm.so', :tag => s.version.to_s }
|
||||
s.source_files = 'ios/Plugin/**/*.{swift,h,m,c,cc,mm,cpp}'
|
||||
s.ios.deployment_target = '14.0'
|
||||
s.dependency 'Capacitor'
|
||||
s.swift_version = '5.1'
|
||||
end
|
||||
493
native-input/ios/Plugin/ChatInputBar.swift
Normal file
493
native-input/ios/Plugin/ChatInputBar.swift
Normal file
@@ -0,0 +1,493 @@
|
||||
import UIKit
|
||||
|
||||
/// A floating chat input bar (Liquid Glass on iOS 26+, blur material fallback)
|
||||
/// that pins itself above the keyboard and reports the bottom inset it occupies
|
||||
/// so the web layout can pad its scroll area accordingly.
|
||||
class ChatInputBar: UIView, UITextViewDelegate {
|
||||
|
||||
// MARK: Callbacks to the plugin
|
||||
var onTextChange: ((String) -> Void)?
|
||||
var onSend: ((String) -> Void)?
|
||||
var onAttach: (() -> Void)?
|
||||
var onFocusChange: ((Bool) -> Void)?
|
||||
/// Reports the bottom inset (in points == CSS px for this viewport) that the
|
||||
/// bar + keyboard occupy at the bottom of the host view.
|
||||
var onInsetChange: ((CGFloat) -> Void)?
|
||||
|
||||
// MARK: Tunables
|
||||
private let minTextHeight: CGFloat = 45 // ~25% taller than the old 36
|
||||
private let maxTextHeight: CGFloat = 150
|
||||
private let fieldVerticalPadding: CGFloat = 8
|
||||
private let barVerticalPadding: CGFloat = 8
|
||||
|
||||
// MARK: Views
|
||||
// Hosts the controls in a scroll view with `.interactive` keyboard dismiss
|
||||
// so dragging the bar down lets the keyboard follow the finger.
|
||||
private let panScroll = UIScrollView()
|
||||
private let contentView = UIView()
|
||||
private let field = UIView()
|
||||
private let fieldEffect = UIVisualEffectView(effect: ChatInputBar.makeEffect())
|
||||
private let plusEffect = UIVisualEffectView(effect: ChatInputBar.makeEffect())
|
||||
private let textView = UITextView()
|
||||
private let placeholderLabel = UILabel()
|
||||
private let plusButton = UIButton(type: .system)
|
||||
private let sendButton = UIButton(type: .system)
|
||||
|
||||
private weak var hostView: UIView?
|
||||
private var textHeightConstraint: NSLayoutConstraint!
|
||||
// Pins the *visible* bar (the field) above the keyboard. The bar view itself
|
||||
// spans the whole host so its scroll view can drive interactive dismissal.
|
||||
private var fieldBottomConstraint: NSLayoutConstraint!
|
||||
private var canSend = true
|
||||
/// True while the keyboard is up — used to widen the bar's touch-catch area
|
||||
/// (see hitTest) only when there's actually a keyboard to dismiss.
|
||||
private var keyboardUp = false
|
||||
|
||||
/// True when the running OS gave us a real, interactive `UIGlassEffect`
|
||||
/// (so the glass surfaces animate themselves on press). When false we fall
|
||||
/// back to a manual press animation on the buttons.
|
||||
private static var supportsInteractiveGlass = false
|
||||
|
||||
// MARK: Lifecycle
|
||||
|
||||
init(hostView: UIView) {
|
||||
self.hostView = hostView
|
||||
super.init(frame: .zero)
|
||||
setupViews()
|
||||
}
|
||||
|
||||
required init?(coder: NSCoder) { fatalError("init(coder:) not supported") }
|
||||
|
||||
private static func makeEffect() -> UIVisualEffect {
|
||||
// Use real Liquid Glass on iOS 26+. Resolved dynamically via the
|
||||
// Objective-C runtime so the plugin still compiles against older SDKs
|
||||
// (where the UIGlassEffect symbol does not yet exist).
|
||||
if #available(iOS 26.0, *),
|
||||
let glassClass = NSClassFromString("UIGlassEffect") as? NSObject.Type {
|
||||
let glass = glassClass.init()
|
||||
// Opt into the system's built-in touch animation (the scale + tint
|
||||
// "squish" on press). Set via KVC behind a responds(to:) guard so it
|
||||
// compiles against SDKs that lack UIGlassEffect and never crashes if
|
||||
// the property is renamed/absent — it just stays static.
|
||||
let setter = Selector("setInteractive:")
|
||||
if glass.responds(to: setter) {
|
||||
glass.setValue(true, forKey: "interactive")
|
||||
supportsInteractiveGlass = true
|
||||
}
|
||||
if let effect = glass as? UIVisualEffect { return effect }
|
||||
}
|
||||
return UIBlurEffect(style: .systemUltraThinMaterial)
|
||||
}
|
||||
|
||||
/// Adds the bar to the host view. The bar view fills the whole host (so its
|
||||
/// scroll view's bounds overlap the keyboard and can drive interactive
|
||||
/// dismissal); only the visible field/"+" capture touches (see hitTest), and
|
||||
/// the visible field is pinned just above the keyboard.
|
||||
func attach() {
|
||||
guard let host = hostView else { return }
|
||||
translatesAutoresizingMaskIntoConstraints = false
|
||||
host.addSubview(self)
|
||||
|
||||
NSLayoutConstraint.activate([
|
||||
leadingAnchor.constraint(equalTo: host.leadingAnchor),
|
||||
trailingAnchor.constraint(equalTo: host.trailingAnchor),
|
||||
topAnchor.constraint(equalTo: host.topAnchor),
|
||||
bottomAnchor.constraint(equalTo: host.bottomAnchor),
|
||||
])
|
||||
|
||||
if #available(iOS 15.0, *) {
|
||||
// keyboardLayoutGuide rides the keyboard and rests at the safe-area
|
||||
// bottom when the keyboard is dismissed.
|
||||
host.keyboardLayoutGuide.followsUndockedKeyboard = true
|
||||
fieldBottomConstraint = field.bottomAnchor.constraint(
|
||||
equalTo: host.keyboardLayoutGuide.topAnchor, constant: -barVerticalPadding)
|
||||
} else {
|
||||
fieldBottomConstraint = field.bottomAnchor.constraint(
|
||||
equalTo: host.safeAreaLayoutGuide.bottomAnchor, constant: -barVerticalPadding)
|
||||
}
|
||||
fieldBottomConstraint.isActive = true
|
||||
|
||||
observeKeyboard()
|
||||
host.layoutIfNeeded() // so the field has a real frame before measuring
|
||||
reportInset()
|
||||
}
|
||||
|
||||
func removeFromHost() {
|
||||
NotificationCenter.default.removeObserver(self)
|
||||
removeFromSuperview()
|
||||
onInsetChange?(0)
|
||||
}
|
||||
|
||||
/// The bar view spans the entire host so its scroll view can drive
|
||||
/// interactive keyboard dismissal, but only the visible field/"+" should
|
||||
/// swallow touches — every other point falls through to the web view beneath.
|
||||
/// (A touch that begins on the bar is still tracked by the scroll view's pan
|
||||
/// as the finger then drags down across the rest of the screen.)
|
||||
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
|
||||
guard let hit = super.hitTest(point, with: event) else { return nil }
|
||||
// Always let the visible controls handle their own touches.
|
||||
if hit == field || hit == plusEffect
|
||||
|| hit.isDescendant(of: field) || hit.isDescendant(of: plusEffect) {
|
||||
return hit
|
||||
}
|
||||
// While the keyboard is up, also claim an invisible strip ~1.5× the input
|
||||
// height above the field (and everything below it) so a downward drag
|
||||
// begun just above the bar still drives the interactive dismissal. Above
|
||||
// the strip, fall through to the web view.
|
||||
if keyboardUp {
|
||||
let fieldInSelf = field.convert(field.bounds, to: self)
|
||||
let catchTop = fieldInSelf.minY - 1.5 * minTextHeight
|
||||
if point.y >= catchTop { return panScroll }
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
// MARK: Setup
|
||||
|
||||
private func setupViews() {
|
||||
// The bar itself is transparent so only the field + "+" button float.
|
||||
backgroundColor = .clear
|
||||
|
||||
// Scroll view that drives the native interactive keyboard dismissal.
|
||||
// It fills the whole host so its bounds overlap the keyboard region: a
|
||||
// downward drag that begins on the bar stays inside the scroll view as it
|
||||
// travels toward the keyboard, which is what `.interactive` needs to track
|
||||
// the finger. It never really scrolls (content == frame) but
|
||||
// `alwaysBounceVertical` keeps its pan recognizer live.
|
||||
panScroll.translatesAutoresizingMaskIntoConstraints = false
|
||||
panScroll.keyboardDismissMode = .interactive
|
||||
panScroll.alwaysBounceVertical = true
|
||||
panScroll.showsVerticalScrollIndicator = false
|
||||
panScroll.showsHorizontalScrollIndicator = false
|
||||
panScroll.delaysContentTouches = false
|
||||
panScroll.backgroundColor = .clear
|
||||
if #available(iOS 11.0, *) { panScroll.contentInsetAdjustmentBehavior = .never }
|
||||
addSubview(panScroll)
|
||||
|
||||
contentView.translatesAutoresizingMaskIntoConstraints = false
|
||||
contentView.backgroundColor = .clear
|
||||
panScroll.addSubview(contentView)
|
||||
|
||||
// Circular "+" attach button — same glass + border as the input field.
|
||||
// Interaction is enabled so the interactive glass effect can observe
|
||||
// touches and run its built-in press animation.
|
||||
plusEffect.translatesAutoresizingMaskIntoConstraints = false
|
||||
plusEffect.isUserInteractionEnabled = true
|
||||
plusEffect.layer.cornerRadius = minTextHeight / 2
|
||||
plusEffect.clipsToBounds = true
|
||||
plusEffect.layer.borderWidth = 1
|
||||
plusEffect.layer.borderColor = UIColor.separator.cgColor
|
||||
contentView.addSubview(plusEffect)
|
||||
|
||||
// The button lives inside the effect's contentView so its touches are
|
||||
// delivered through the glass (required for the interactive animation).
|
||||
plusButton.translatesAutoresizingMaskIntoConstraints = false
|
||||
plusButton.setImage(UIImage(systemName: "plus"), for: .normal)
|
||||
plusButton.addTarget(self, action: #selector(attachTapped), for: .touchUpInside)
|
||||
plusEffect.contentView.addSubview(plusButton)
|
||||
addPressAnimation(to: plusButton, enabled: !ChatInputBar.supportsInteractiveGlass)
|
||||
|
||||
// Floating rounded input field.
|
||||
field.translatesAutoresizingMaskIntoConstraints = false
|
||||
field.layer.cornerRadius = 18
|
||||
field.layer.borderWidth = 1
|
||||
field.layer.borderColor = UIColor.separator.cgColor
|
||||
field.clipsToBounds = true
|
||||
contentView.addSubview(field)
|
||||
|
||||
// Glass / blur background fills the field (behind the content).
|
||||
// Interaction is enabled so tapping the input runs the glass's built-in
|
||||
// press animation; the text view and placeholder live in its contentView.
|
||||
fieldEffect.translatesAutoresizingMaskIntoConstraints = false
|
||||
fieldEffect.isUserInteractionEnabled = true
|
||||
fieldEffect.layer.cornerRadius = 18
|
||||
fieldEffect.clipsToBounds = true
|
||||
field.addSubview(fieldEffect)
|
||||
|
||||
// Growing text view.
|
||||
textView.translatesAutoresizingMaskIntoConstraints = false
|
||||
textView.backgroundColor = .clear
|
||||
textView.font = .systemFont(ofSize: 17)
|
||||
textView.isScrollEnabled = false
|
||||
textView.textContainerInset = UIEdgeInsets(top: 11, left: 6, bottom: 11, right: 6)
|
||||
textView.delegate = self
|
||||
fieldEffect.contentView.addSubview(textView)
|
||||
|
||||
// Placeholder overlay.
|
||||
placeholderLabel.translatesAutoresizingMaskIntoConstraints = false
|
||||
placeholderLabel.font = .systemFont(ofSize: 17)
|
||||
placeholderLabel.textColor = UIColor.placeholderText
|
||||
placeholderLabel.isUserInteractionEnabled = false
|
||||
fieldEffect.contentView.addSubview(placeholderLabel)
|
||||
|
||||
// Send button — a solid (non-glass) button overlaid inside the field,
|
||||
// bottom-right. Since it is not a glass surface it gets a manual press
|
||||
// animation so it still scales/dims like the glass controls.
|
||||
sendButton.translatesAutoresizingMaskIntoConstraints = false
|
||||
sendButton.setImage(UIImage(systemName: "arrow.up"), for: .normal)
|
||||
sendButton.addTarget(self, action: #selector(sendTapped), for: .touchUpInside)
|
||||
sendButton.layer.cornerRadius = 18
|
||||
sendButton.clipsToBounds = true
|
||||
field.addSubview(sendButton)
|
||||
addPressAnimation(to: sendButton, enabled: true)
|
||||
|
||||
textHeightConstraint = textView.heightAnchor.constraint(equalToConstant: minTextHeight)
|
||||
|
||||
NSLayoutConstraint.activate([
|
||||
// Scroll view fills the bar; content view matches its frame so it
|
||||
// never scrolls but its pan stays active for interactive dismiss.
|
||||
panScroll.topAnchor.constraint(equalTo: topAnchor),
|
||||
panScroll.leadingAnchor.constraint(equalTo: leadingAnchor),
|
||||
panScroll.trailingAnchor.constraint(equalTo: trailingAnchor),
|
||||
panScroll.bottomAnchor.constraint(equalTo: bottomAnchor),
|
||||
|
||||
contentView.topAnchor.constraint(equalTo: panScroll.contentLayoutGuide.topAnchor),
|
||||
contentView.leadingAnchor.constraint(equalTo: panScroll.contentLayoutGuide.leadingAnchor),
|
||||
contentView.trailingAnchor.constraint(equalTo: panScroll.contentLayoutGuide.trailingAnchor),
|
||||
contentView.bottomAnchor.constraint(equalTo: panScroll.contentLayoutGuide.bottomAnchor),
|
||||
contentView.widthAnchor.constraint(equalTo: panScroll.frameLayoutGuide.widthAnchor),
|
||||
contentView.heightAnchor.constraint(equalTo: panScroll.frameLayoutGuide.heightAnchor),
|
||||
|
||||
// Circular "+" button sized to the input's resting height, aligned
|
||||
// to the field's bottom.
|
||||
plusEffect.widthAnchor.constraint(equalToConstant: minTextHeight),
|
||||
plusEffect.heightAnchor.constraint(equalToConstant: minTextHeight),
|
||||
plusEffect.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 12),
|
||||
plusEffect.bottomAnchor.constraint(equalTo: field.bottomAnchor),
|
||||
plusButton.leadingAnchor.constraint(equalTo: plusEffect.leadingAnchor),
|
||||
plusButton.trailingAnchor.constraint(equalTo: plusEffect.trailingAnchor),
|
||||
plusButton.topAnchor.constraint(equalTo: plusEffect.topAnchor),
|
||||
plusButton.bottomAnchor.constraint(equalTo: plusEffect.bottomAnchor),
|
||||
|
||||
field.leadingAnchor.constraint(equalTo: plusEffect.trailingAnchor, constant: 8),
|
||||
field.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -12),
|
||||
// field.bottom is pinned to the keyboard guide in attach(); its top is
|
||||
// driven by the text view's height. Its vertical position is therefore
|
||||
// independent of the (full-host) content view.
|
||||
|
||||
fieldEffect.topAnchor.constraint(equalTo: field.topAnchor),
|
||||
fieldEffect.leadingAnchor.constraint(equalTo: field.leadingAnchor),
|
||||
fieldEffect.trailingAnchor.constraint(equalTo: field.trailingAnchor),
|
||||
fieldEffect.bottomAnchor.constraint(equalTo: field.bottomAnchor),
|
||||
|
||||
// Send button overlaid inside the field, bottom-right.
|
||||
sendButton.widthAnchor.constraint(equalToConstant: 36),
|
||||
sendButton.heightAnchor.constraint(equalToConstant: 36),
|
||||
sendButton.trailingAnchor.constraint(equalTo: field.trailingAnchor, constant: -4),
|
||||
sendButton.bottomAnchor.constraint(equalTo: field.bottomAnchor, constant: -4),
|
||||
|
||||
textView.leadingAnchor.constraint(equalTo: field.leadingAnchor, constant: 6),
|
||||
textView.trailingAnchor.constraint(equalTo: sendButton.leadingAnchor, constant: -4),
|
||||
textView.topAnchor.constraint(equalTo: field.topAnchor),
|
||||
textView.bottomAnchor.constraint(equalTo: field.bottomAnchor),
|
||||
textHeightConstraint,
|
||||
|
||||
placeholderLabel.leadingAnchor.constraint(equalTo: textView.leadingAnchor, constant: 11),
|
||||
placeholderLabel.centerYAnchor.constraint(equalTo: textView.centerYAnchor),
|
||||
])
|
||||
|
||||
sendButton.backgroundColor = tintColor
|
||||
updateTextHeight()
|
||||
}
|
||||
|
||||
// MARK: Public API
|
||||
|
||||
var text: String {
|
||||
get { textView.text ?? "" }
|
||||
set {
|
||||
textView.text = newValue
|
||||
textChanged(notify: false)
|
||||
}
|
||||
}
|
||||
|
||||
func setPlaceholder(_ value: String) {
|
||||
placeholderLabel.text = value
|
||||
}
|
||||
|
||||
func setEnabled(_ enabled: Bool) {
|
||||
canSend = enabled
|
||||
textView.isEditable = enabled
|
||||
sendButton.isEnabled = enabled
|
||||
plusButton.isEnabled = enabled
|
||||
alpha = enabled ? 1.0 : 0.6
|
||||
}
|
||||
|
||||
func focus() { textView.becomeFirstResponder() }
|
||||
func blur() { textView.resignFirstResponder() }
|
||||
|
||||
func setVisible(_ visible: Bool) {
|
||||
isHidden = !visible
|
||||
if !visible { onInsetChange?(0) } else { reportInset() }
|
||||
}
|
||||
|
||||
// MARK: Theme
|
||||
|
||||
func applyTheme(_ theme: [String: Any]) {
|
||||
// The field/"+" keep a clear background so the glass material shows
|
||||
// through and they read as floating; only content colors are themed.
|
||||
if let txt = (theme["text"] as? String).flatMap(UIColor.fromCSS) {
|
||||
textView.textColor = txt
|
||||
textView.tintColor = txt
|
||||
}
|
||||
if let ph = (theme["placeholder"] as? String).flatMap(UIColor.fromCSS) {
|
||||
placeholderLabel.textColor = ph
|
||||
}
|
||||
if let accent = (theme["accent"] as? String).flatMap(UIColor.fromCSS) {
|
||||
plusButton.tintColor = accent
|
||||
}
|
||||
if let sendBg = (theme["sendBackground"] as? String).flatMap(UIColor.fromCSS) {
|
||||
sendButton.backgroundColor = sendBg
|
||||
}
|
||||
if let sendTxt = (theme["sendText"] as? String).flatMap(UIColor.fromCSS) {
|
||||
sendButton.tintColor = sendTxt
|
||||
}
|
||||
if let dark = theme["dark"] as? Bool {
|
||||
overrideUserInterfaceStyle = dark ? .dark : .light
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: Actions
|
||||
|
||||
@objc private func attachTapped() { onAttach?() }
|
||||
|
||||
@objc private func sendTapped() {
|
||||
guard canSend else { return }
|
||||
onSend?(textView.text ?? "")
|
||||
}
|
||||
|
||||
// MARK: Press animation
|
||||
// Manual scale + dim used for the solid send button, and for the "+" when
|
||||
// the OS doesn't provide interactive glass (so it still feels pressable).
|
||||
|
||||
private func addPressAnimation(to button: UIButton, enabled: Bool) {
|
||||
guard enabled else { return }
|
||||
button.addTarget(self, action: #selector(pressDown(_:)),
|
||||
for: [.touchDown, .touchDragEnter])
|
||||
button.addTarget(self, action: #selector(pressUp(_:)),
|
||||
for: [.touchUpInside, .touchUpOutside, .touchCancel, .touchDragExit])
|
||||
}
|
||||
|
||||
@objc private func pressDown(_ button: UIButton) {
|
||||
UIView.animate(withDuration: 0.12, delay: 0,
|
||||
options: [.allowUserInteraction, .beginFromCurrentState]) {
|
||||
button.transform = CGAffineTransform(scaleX: 0.88, y: 0.88)
|
||||
button.alpha = 0.7
|
||||
}
|
||||
}
|
||||
|
||||
@objc private func pressUp(_ button: UIButton) {
|
||||
UIView.animate(withDuration: 0.28, delay: 0,
|
||||
usingSpringWithDamping: 0.5, initialSpringVelocity: 0.6,
|
||||
options: [.allowUserInteraction, .beginFromCurrentState]) {
|
||||
button.transform = .identity
|
||||
button.alpha = 1.0
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: UITextViewDelegate
|
||||
|
||||
func textViewDidChange(_ textView: UITextView) {
|
||||
textChanged(notify: true)
|
||||
}
|
||||
|
||||
func textViewDidBeginEditing(_ textView: UITextView) { onFocusChange?(true) }
|
||||
func textViewDidEndEditing(_ textView: UITextView) { onFocusChange?(false) }
|
||||
|
||||
private func textChanged(notify: Bool) {
|
||||
placeholderLabel.isHidden = !(textView.text ?? "").isEmpty
|
||||
updateTextHeight()
|
||||
if notify { onTextChange?(textView.text ?? "") }
|
||||
}
|
||||
|
||||
private func updateTextHeight() {
|
||||
let fitting = textView.sizeThatFits(CGSize(width: textView.bounds.width, height: .greatestFiniteMagnitude))
|
||||
let clamped = min(max(fitting.height, minTextHeight), maxTextHeight)
|
||||
if abs(textHeightConstraint.constant - clamped) > 0.5 {
|
||||
textHeightConstraint.constant = clamped
|
||||
textView.isScrollEnabled = fitting.height > maxTextHeight
|
||||
superview?.layoutIfNeeded()
|
||||
DispatchQueue.main.async { [weak self] in self?.reportInset() }
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: Inset reporting
|
||||
|
||||
private func observeKeyboard() {
|
||||
// Observe the *will* notifications — they fire at the START of the
|
||||
// keyboard animation with the final frame, so the web layout can move in
|
||||
// step with the keyboard instead of lagging until the animation ends
|
||||
// (which is what the *did* notifications would do).
|
||||
let names: [NSNotification.Name] = [
|
||||
UIResponder.keyboardWillChangeFrameNotification,
|
||||
UIResponder.keyboardWillShowNotification,
|
||||
UIResponder.keyboardWillHideNotification,
|
||||
]
|
||||
for name in names {
|
||||
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillChange(_:)),
|
||||
name: name, object: nil)
|
||||
}
|
||||
}
|
||||
|
||||
@objc private func keyboardWillChange(_ note: Notification) {
|
||||
guard let host = hostView, !isHidden else { return }
|
||||
guard let end = (note.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue else {
|
||||
reportInset(); return
|
||||
}
|
||||
// Where the bar will rest: just above the keyboard, but never below the
|
||||
// safe-area bottom (its resting place when the keyboard is dismissed).
|
||||
let kbTop = host.convert(end, from: nil).minY
|
||||
let safeBottom = host.bounds.height - host.safeAreaInsets.bottom
|
||||
let barBottom = min(kbTop, safeBottom)
|
||||
keyboardUp = barBottom < safeBottom - 0.5
|
||||
|
||||
if #available(iOS 15.0, *) {
|
||||
// keyboardLayoutGuide animates the bar itself; nothing to drive here.
|
||||
} else {
|
||||
fieldBottomConstraint.constant = (barBottom - safeBottom) - barVerticalPadding
|
||||
host.layoutIfNeeded()
|
||||
}
|
||||
|
||||
// Report the *target* inset (computed from the keyboard's end frame, since
|
||||
// the field hasn't moved yet on a *will* notification) so the web updates
|
||||
// at the animation's start.
|
||||
let fieldTop = barBottom - barVerticalPadding - field.bounds.height
|
||||
let inset = max(0, host.bounds.height - fieldTop + barVerticalPadding)
|
||||
onInsetChange?(inset)
|
||||
}
|
||||
|
||||
private func reportInset() {
|
||||
guard let host = hostView, !isHidden else { return }
|
||||
// The bar view spans the whole host, so measure the *visible* field's top
|
||||
// (in host coordinates) and report from there down to the host bottom.
|
||||
let fieldTop = field.convert(field.bounds, to: host).minY
|
||||
let inset = max(0, host.bounds.height - fieldTop + barVerticalPadding)
|
||||
onInsetChange?(inset)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - CSS color parsing
|
||||
|
||||
extension UIColor {
|
||||
/// Parses the common CSS color strings that `getComputedStyle` returns
|
||||
/// (`rgb(...)`, `rgba(...)`) plus `#rgb`/`#rrggbb`.
|
||||
static func fromCSS(_ string: String) -> UIColor? {
|
||||
let s = string.trimmingCharacters(in: .whitespaces).lowercased()
|
||||
if s.hasPrefix("#") {
|
||||
var hex = String(s.dropFirst())
|
||||
if hex.count == 3 { hex = hex.map { "\($0)\($0)" }.joined() }
|
||||
guard hex.count == 6, let v = UInt32(hex, radix: 16) else { return nil }
|
||||
return UIColor(red: CGFloat((v >> 16) & 0xff) / 255,
|
||||
green: CGFloat((v >> 8) & 0xff) / 255,
|
||||
blue: CGFloat(v & 0xff) / 255, alpha: 1)
|
||||
}
|
||||
if s.hasPrefix("rgb") {
|
||||
let inner = s.drop { $0 != "(" }.dropFirst().prefix { $0 != ")" }
|
||||
let parts = inner.split(separator: ",").map { $0.trimmingCharacters(in: .whitespaces) }
|
||||
guard parts.count >= 3,
|
||||
let r = Double(parts[0]), let g = Double(parts[1]), let b = Double(parts[2]) else { return nil }
|
||||
let a = parts.count >= 4 ? (Double(parts[3]) ?? 1) : 1
|
||||
return UIColor(red: CGFloat(r) / 255, green: CGFloat(g) / 255, blue: CGFloat(b) / 255, alpha: CGFloat(a))
|
||||
}
|
||||
return nil
|
||||
}
|
||||
}
|
||||
24
native-input/ios/Plugin/Info.plist
Normal file
24
native-input/ios/Plugin/Info.plist
Normal file
@@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>CFBundleDevelopmentRegion</key>
|
||||
<string>$(DEVELOPMENT_LANGUAGE)</string>
|
||||
<key>CFBundleExecutable</key>
|
||||
<string>$(EXECUTABLE_NAME)</string>
|
||||
<key>CFBundleIdentifier</key>
|
||||
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
|
||||
<key>CFBundleInfoDictionaryVersion</key>
|
||||
<string>6.0</string>
|
||||
<key>CFBundleName</key>
|
||||
<string>$(PRODUCT_NAME)</string>
|
||||
<key>CFBundlePackageType</key>
|
||||
<string>FMWK</string>
|
||||
<key>CFBundleShortVersionString</key>
|
||||
<string>1.0</string>
|
||||
<key>CFBundleVersion</key>
|
||||
<string>$(CURRENT_PROJECT_VERSION)</string>
|
||||
<key>NSPrincipalClass</key>
|
||||
<string></string>
|
||||
</dict>
|
||||
</plist>
|
||||
7
native-input/ios/Plugin/NativeInputPlugin.h
Normal file
7
native-input/ios/Plugin/NativeInputPlugin.h
Normal file
@@ -0,0 +1,7 @@
|
||||
#import <UIKit/UIKit.h>
|
||||
|
||||
//! Project version number for Plugin.
|
||||
FOUNDATION_EXPORT double PluginVersionNumber;
|
||||
|
||||
//! Project version string for Plugin.
|
||||
FOUNDATION_EXPORT const unsigned char PluginVersionString[];
|
||||
17
native-input/ios/Plugin/NativeInputPlugin.m
Normal file
17
native-input/ios/Plugin/NativeInputPlugin.m
Normal file
@@ -0,0 +1,17 @@
|
||||
#import <Foundation/Foundation.h>
|
||||
#import <Capacitor/Capacitor.h>
|
||||
|
||||
// Define the plugin using the CAP_PLUGIN Macro, and
|
||||
// each method the plugin supports using the CAP_PLUGIN_METHOD macro.
|
||||
CAP_PLUGIN(NativeInputPlugin, "NativeInput",
|
||||
CAP_PLUGIN_METHOD(present, CAPPluginReturnPromise);
|
||||
CAP_PLUGIN_METHOD(dismiss, CAPPluginReturnPromise);
|
||||
CAP_PLUGIN_METHOD(setText, CAPPluginReturnPromise);
|
||||
CAP_PLUGIN_METHOD(getText, CAPPluginReturnPromise);
|
||||
CAP_PLUGIN_METHOD(focus, CAPPluginReturnPromise);
|
||||
CAP_PLUGIN_METHOD(blur, CAPPluginReturnPromise);
|
||||
CAP_PLUGIN_METHOD(setPlaceholder, CAPPluginReturnPromise);
|
||||
CAP_PLUGIN_METHOD(setEnabled, CAPPluginReturnPromise);
|
||||
CAP_PLUGIN_METHOD(setTheme, CAPPluginReturnPromise);
|
||||
CAP_PLUGIN_METHOD(setVisible, CAPPluginReturnPromise);
|
||||
)
|
||||
117
native-input/ios/Plugin/NativeInputPlugin.swift
Normal file
117
native-input/ios/Plugin/NativeInputPlugin.swift
Normal file
@@ -0,0 +1,117 @@
|
||||
import Foundation
|
||||
import Capacitor
|
||||
|
||||
@objc(NativeInputPlugin)
|
||||
public class NativeInputPlugin: CAPPlugin {
|
||||
|
||||
private var bar: ChatInputBar?
|
||||
private var currentChatId: String?
|
||||
|
||||
// MARK: Helpers
|
||||
|
||||
private func hostView() -> UIView? {
|
||||
// Pin the bar as a sibling of the web view inside the same parent so it
|
||||
// can float above the web content and track the keyboard.
|
||||
return webView?.superview ?? webView
|
||||
}
|
||||
|
||||
private func ensureBar() -> ChatInputBar? {
|
||||
if let bar = bar { return bar }
|
||||
guard let host = hostView() else { return nil }
|
||||
let bar = ChatInputBar(hostView: host)
|
||||
bar.onTextChange = { [weak self] text in
|
||||
self?.notifyListeners("inputChange", data: ["text": text])
|
||||
}
|
||||
bar.onSend = { [weak self] text in
|
||||
self?.notifyListeners("send", data: ["text": text])
|
||||
}
|
||||
bar.onAttach = { [weak self] in
|
||||
self?.notifyListeners("attach", data: [:])
|
||||
}
|
||||
bar.onFocusChange = { [weak self] focused in
|
||||
self?.notifyListeners("focusChange", data: ["focused": focused])
|
||||
}
|
||||
bar.onInsetChange = { [weak self] inset in
|
||||
self?.notifyListeners("heightChange", data: ["bottomInset": Double(inset)])
|
||||
}
|
||||
bar.attach()
|
||||
self.bar = bar
|
||||
return bar
|
||||
}
|
||||
|
||||
// MARK: Plugin methods
|
||||
|
||||
@objc func present(_ call: CAPPluginCall) {
|
||||
let chatId = call.getString("chatId") ?? ""
|
||||
let placeholder = call.getString("placeholder") ?? ""
|
||||
let text = call.getString("text") ?? ""
|
||||
let canSend = call.getBool("canSend") ?? true
|
||||
let theme = call.getObject("theme")
|
||||
|
||||
DispatchQueue.main.async {
|
||||
guard let bar = self.ensureBar() else { call.reject("No host view"); return }
|
||||
bar.setVisible(true)
|
||||
if let theme = theme { bar.applyTheme(theme) }
|
||||
bar.setPlaceholder(placeholder)
|
||||
bar.setEnabled(canSend)
|
||||
// Only reset text when switching to a different chat; otherwise keep
|
||||
// whatever the user already had typed in this bar.
|
||||
if self.currentChatId != chatId {
|
||||
bar.text = text
|
||||
self.currentChatId = chatId
|
||||
}
|
||||
call.resolve()
|
||||
}
|
||||
}
|
||||
|
||||
@objc func dismiss(_ call: CAPPluginCall) {
|
||||
DispatchQueue.main.async {
|
||||
self.bar?.removeFromHost()
|
||||
self.bar = nil
|
||||
self.currentChatId = nil
|
||||
call.resolve()
|
||||
}
|
||||
}
|
||||
|
||||
@objc func setText(_ call: CAPPluginCall) {
|
||||
let text = call.getString("text") ?? ""
|
||||
DispatchQueue.main.async {
|
||||
self.bar?.text = text
|
||||
call.resolve()
|
||||
}
|
||||
}
|
||||
|
||||
@objc func getText(_ call: CAPPluginCall) {
|
||||
DispatchQueue.main.async {
|
||||
call.resolve(["text": self.bar?.text ?? ""])
|
||||
}
|
||||
}
|
||||
|
||||
@objc func focus(_ call: CAPPluginCall) {
|
||||
DispatchQueue.main.async { self.bar?.focus(); call.resolve() }
|
||||
}
|
||||
|
||||
@objc func blur(_ call: CAPPluginCall) {
|
||||
DispatchQueue.main.async { self.bar?.blur(); call.resolve() }
|
||||
}
|
||||
|
||||
@objc func setPlaceholder(_ call: CAPPluginCall) {
|
||||
let placeholder = call.getString("placeholder") ?? ""
|
||||
DispatchQueue.main.async { self.bar?.setPlaceholder(placeholder); call.resolve() }
|
||||
}
|
||||
|
||||
@objc func setEnabled(_ call: CAPPluginCall) {
|
||||
let enabled = call.getBool("enabled") ?? true
|
||||
DispatchQueue.main.async { self.bar?.setEnabled(enabled); call.resolve() }
|
||||
}
|
||||
|
||||
@objc func setTheme(_ call: CAPPluginCall) {
|
||||
let theme = call.getObject("theme") ?? [:]
|
||||
DispatchQueue.main.async { self.bar?.applyTheme(theme); call.resolve() }
|
||||
}
|
||||
|
||||
@objc func setVisible(_ call: CAPPluginCall) {
|
||||
let visible = call.getBool("visible") ?? true
|
||||
DispatchQueue.main.async { self.bar?.setVisible(visible); call.resolve() }
|
||||
}
|
||||
}
|
||||
31
native-input/package.json
Normal file
31
native-input/package.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "@forum/capacitor-native-input",
|
||||
"version": "1.0.0",
|
||||
"description": "Native iOS chat input bar (Liquid Glass) for the Forum app.",
|
||||
"main": "dist/plugin.cjs.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/esm/index.d.ts",
|
||||
"files": [
|
||||
"dist/",
|
||||
"ios/Plugin/",
|
||||
"ForumCapacitorNativeInput.podspec"
|
||||
],
|
||||
"author": "Forum",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"capacitor",
|
||||
"plugin",
|
||||
"native",
|
||||
"ios",
|
||||
"keyboard",
|
||||
"input"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"@capacitor/core": "^7.0.0"
|
||||
},
|
||||
"capacitor": {
|
||||
"ios": {
|
||||
"src": "ios"
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user