fix: optimized swiping and address bar toggle on tap
This commit is contained in:
randogoth
parent
ac998b394d
commit
0e2027c9e2
5 changed files with 466 additions and 78 deletions
|
|
@ -2,6 +2,8 @@ import 'dart:io' show Process;
|
|||
|
||||
import 'package:flutter/foundation.dart'
|
||||
show defaultTargetPlatform, TargetPlatform;
|
||||
import 'package:flutter/gestures.dart'
|
||||
show kLongPressTimeout, kTouchSlop, PointerDownEvent, PointerUpEvent;
|
||||
import 'package:url_launcher/url_launcher.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/rendering.dart' show ScrollDirection;
|
||||
|
|
@ -47,6 +49,16 @@ class _ReaderScreenState extends State<ReaderScreen> {
|
|||
bool _showBrokenText = false;
|
||||
final _checkedSubscriptions = <String>{};
|
||||
|
||||
// The finger behind a possible tap on the page, tracked outside the
|
||||
// gesture arena because taps over selectable text lose it.
|
||||
Offset? _tapDownPosition;
|
||||
Duration _tapDownTime = Duration.zero;
|
||||
|
||||
/// Whether the tap in flight acted on the page: opened a link, submitted
|
||||
/// a form or pressed a control in one of the chrome's own pages. Such a
|
||||
/// tap leaves the bar where it was.
|
||||
bool _tapActed = false;
|
||||
|
||||
/// Touch devices navigate with gestures; the others are pointer hosts
|
||||
/// whose readers reach the chrome with the mouse and the keyboard.
|
||||
static bool get _isTouch => switch (defaultTargetPlatform) {
|
||||
|
|
@ -85,73 +97,135 @@ class _ReaderScreenState extends State<ReaderScreen> {
|
|||
}
|
||||
}
|
||||
|
||||
void _onPageTapDown(PointerDownEvent event) {
|
||||
_tapDownPosition = event.position;
|
||||
_tapDownTime = event.timeStamp;
|
||||
_tapActed = false;
|
||||
}
|
||||
|
||||
/// A short tap on the page shows a hidden address bar and hides a shown
|
||||
/// one. A page that fits the viewport never scrolls, so a hidden bar has
|
||||
/// nothing else to bring it back.
|
||||
void _onPageTapUp(PointerUpEvent event) {
|
||||
if (_tapDownPosition == null || !_isTouch) return;
|
||||
final travel = (event.position - _tapDownPosition!).distance;
|
||||
_tapDownPosition = null;
|
||||
// A finger that travelled was scrolling or swiping; one that held that
|
||||
// long began a selection. Both leave the bar where it was.
|
||||
if (travel > kTouchSlop) return;
|
||||
if (event.timeStamp - _tapDownTime >= kLongPressTimeout) return;
|
||||
|
||||
// A tap that acts on the page — a link, a form — runs as the gesture
|
||||
// arena settles after this event, so the decision waits for the frame
|
||||
// that carries it.
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (!mounted) return;
|
||||
// A tap that opened something, or that put the focus in a field of
|
||||
// the page, is not a tap on the reading surface.
|
||||
if (_tapActed) return;
|
||||
if (_focusInPageField()) return;
|
||||
setState(() => _chromeVisible = !_chromeVisible);
|
||||
});
|
||||
}
|
||||
|
||||
/// Whether a page field, such as a search box, holds the focus: a tap
|
||||
/// that gave it the focus is a tap into a form, not on the page.
|
||||
bool _focusInPageField() => FocusManager.instance.primaryFocus?.context
|
||||
?.findAncestorWidgetOfExactType<TextField>() !=
|
||||
null;
|
||||
|
||||
/// Runs [action] for a control in one of the chrome's own error pages;
|
||||
/// pressing it acts on the page, so the bar keeps its place.
|
||||
VoidCallback _press(VoidCallback action) => () {
|
||||
_tapActed = true;
|
||||
action();
|
||||
};
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final deps = AppScope.of(context).deps;
|
||||
|
||||
final reader = Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
AnimatedSlide(
|
||||
offset: _chromeVisible ? Offset.zero : const Offset(0, -1),
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.easeOut,
|
||||
child: AnimatedSize(
|
||||
// A phone draws under the status bar, so the chrome starts below it;
|
||||
// the reader content above and beside it already reaches the edges.
|
||||
body: SafeArea(
|
||||
top: true,
|
||||
bottom: false,
|
||||
left: false,
|
||||
right: false,
|
||||
child: Column(
|
||||
children: [
|
||||
AnimatedSlide(
|
||||
offset: _chromeVisible ? Offset.zero : const Offset(0, -1),
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.easeOut,
|
||||
alignment: Alignment.topCenter,
|
||||
child: _chromeVisible
|
||||
? AddressBar(focusNode: _addressFocus)
|
||||
: const SizedBox(width: double.infinity),
|
||||
child: AnimatedSize(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.easeOut,
|
||||
alignment: Alignment.topCenter,
|
||||
child: _chromeVisible
|
||||
? AddressBar(focusNode: _addressFocus)
|
||||
: const SizedBox(width: double.infinity),
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: SignalBuilder(builder: (context) {
|
||||
final browser = deps.browser;
|
||||
final page = browser.currentPage.value;
|
||||
// The swipe peek uses the current page's palette when there is
|
||||
// one, so the neighbor slides in on matching paper.
|
||||
final peekBackground = page == null
|
||||
? Theme.of(context).scaffoldBackgroundColor
|
||||
: paletteFor(
|
||||
pageVariant: page.variant,
|
||||
readerVariant: deps.settings.variant.value,
|
||||
dark: Theme.of(context).brightness == Brightness.dark,
|
||||
url: page.url,
|
||||
).background;
|
||||
Expanded(
|
||||
child: SignalBuilder(builder: (context) {
|
||||
final browser = deps.browser;
|
||||
final page = browser.currentPage.value;
|
||||
// The swipe peek uses the current page's palette when there is
|
||||
// one, so the neighbor slides in on matching paper.
|
||||
final peekBackground = page == null
|
||||
? Theme.of(context).scaffoldBackgroundColor
|
||||
: paletteFor(
|
||||
pageVariant: page.variant,
|
||||
readerVariant: deps.settings.variant.value,
|
||||
dark: Theme.of(context).brightness == Brightness.dark,
|
||||
url: page.url,
|
||||
).background;
|
||||
|
||||
// The 40em column plus its padding: swipes are accepted
|
||||
// anywhere in the margin beside it.
|
||||
final contentWidth =
|
||||
42 * 17.0 * deps.settings.fontScale.value;
|
||||
// The 40em column plus its padding: swipes are accepted
|
||||
// anywhere in the margin beside it.
|
||||
final contentWidth =
|
||||
42 * 17.0 * deps.settings.fontScale.value;
|
||||
|
||||
return SwipeNavigator(
|
||||
canGoBack: browser.canGoBack,
|
||||
canGoForward: browser.canGoForward,
|
||||
backView: _neighborView(browser.backPage.value),
|
||||
forwardView: _neighborView(browser.forwardPage.value),
|
||||
backTitle: browser.backPage.value?.title,
|
||||
forwardTitle: browser.forwardPage.value?.title,
|
||||
background: peekBackground,
|
||||
contentWidth: page == null ? null : contentWidth,
|
||||
onBack: browser.back,
|
||||
onForward: browser.forward,
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned.fill(child: _body(context, page)),
|
||||
if (browser.loading.value)
|
||||
const Positioned(
|
||||
top: 8,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: LinearProgressIndicator(minHeight: 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
],
|
||||
return SwipeNavigator(
|
||||
canGoBack: browser.canGoBack,
|
||||
canGoForward: browser.canGoForward,
|
||||
backView: _neighborView(browser.backPage.value),
|
||||
forwardView: _neighborView(browser.forwardPage.value),
|
||||
backTitle: browser.backPage.value?.title,
|
||||
forwardTitle: browser.forwardPage.value?.title,
|
||||
background: peekBackground,
|
||||
contentWidth: page == null ? null : contentWidth,
|
||||
// A touch host has no margin beside the column, so there
|
||||
// the page itself carries the back and forward swipes.
|
||||
swipesAnywhere: _isTouch,
|
||||
onBack: browser.back,
|
||||
onForward: browser.forward,
|
||||
// Opaque, so a tap on a blank stretch of the page counts
|
||||
// too; the widgets inside keep their own taps.
|
||||
child: Listener(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onPointerDown: _onPageTapDown,
|
||||
onPointerUp: _onPageTapUp,
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned.fill(child: _body(context, page)),
|
||||
if (browser.loading.value)
|
||||
const Positioned(
|
||||
top: 8,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: LinearProgressIndicator(minHeight: 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
|
|
@ -252,9 +326,14 @@ class _ReaderScreenState extends State<ReaderScreen> {
|
|||
fontFamily: font,
|
||||
fontScale: fontScale,
|
||||
visitedUrls: visited,
|
||||
onLinkTap: (url) => deps.browser.open(url),
|
||||
onFormSubmit: (form, values) =>
|
||||
deps.browser.submitForm(form.action, form.method, values),
|
||||
onLinkTap: (url) {
|
||||
_tapActed = true;
|
||||
deps.browser.open(url);
|
||||
},
|
||||
onFormSubmit: (form, values) {
|
||||
_tapActed = true;
|
||||
deps.browser.submitForm(form.action, form.method, values);
|
||||
},
|
||||
onFormChange: (form, values) =>
|
||||
deps.browser.narrowWhileTyping(form.action, values),
|
||||
fetchImageBytes: deps.browser.fetchImageBytes,
|
||||
|
|
@ -322,7 +401,7 @@ class _ReaderScreenState extends State<ReaderScreen> {
|
|||
],
|
||||
const SizedBox(height: 16),
|
||||
FilledButton(
|
||||
onPressed: () => deps.browser.reload(),
|
||||
onPressed: _press(() => deps.browser.reload()),
|
||||
child: Text(strings.t('error-try-again')),
|
||||
),
|
||||
],
|
||||
|
|
@ -355,7 +434,7 @@ class _ReaderScreenState extends State<ReaderScreen> {
|
|||
const SizedBox(height: 16),
|
||||
if (held.isEmpty)
|
||||
FilledButton(
|
||||
onPressed: () => deps.browser.open(MewsUrls.certificates),
|
||||
onPressed: _press(() => deps.browser.open(MewsUrls.certificates)),
|
||||
child: Text(strings.t('certificates-add')),
|
||||
)
|
||||
else
|
||||
|
|
@ -363,13 +442,13 @@ class _ReaderScreenState extends State<ReaderScreen> {
|
|||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: FilledButton.tonal(
|
||||
onPressed: () => deps.browser.chooseCertificate(certificate.id),
|
||||
onPressed: _press(() => deps.browser.chooseCertificate(certificate.id)),
|
||||
child: Text(certificate.name),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
OutlinedButton(
|
||||
onPressed: () => deps.browser.reload(),
|
||||
onPressed: _press(() => deps.browser.reload()),
|
||||
child: Text(strings.t('error-try-again')),
|
||||
),
|
||||
],
|
||||
|
|
@ -395,12 +474,12 @@ class _ReaderScreenState extends State<ReaderScreen> {
|
|||
Text(strings.t('error-certificate-changed'), textAlign: TextAlign.center),
|
||||
const SizedBox(height: 16),
|
||||
FilledButton(
|
||||
onPressed: () => deps.browser.trustPresentedCertificate(),
|
||||
onPressed: _press(() => deps.browser.trustPresentedCertificate()),
|
||||
child: Text(strings.t('error-certificate-trust')),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
OutlinedButton(
|
||||
onPressed: () => deps.browser.reload(),
|
||||
onPressed: _press(() => deps.browser.reload()),
|
||||
child: Text(strings.t('error-try-again')),
|
||||
),
|
||||
],
|
||||
|
|
@ -457,13 +536,13 @@ class _ReaderScreenState extends State<ReaderScreen> {
|
|||
Text(strings.t('error-load-failed'), textAlign: TextAlign.center),
|
||||
const SizedBox(height: 16),
|
||||
FilledButton(
|
||||
onPressed: () => deps.browser.reload(),
|
||||
onPressed: _press(() => deps.browser.reload()),
|
||||
child: Text(strings.t('error-try-again')),
|
||||
),
|
||||
if (canOpenOutside) ...[
|
||||
const SizedBox(height: 8),
|
||||
OutlinedButton(
|
||||
onPressed: () => _openOutside(failed),
|
||||
onPressed: _press(() => _openOutside(failed)),
|
||||
child: Text(strings.t('error-open-in-browser')),
|
||||
),
|
||||
],
|
||||
|
|
@ -485,7 +564,7 @@ class _ReaderScreenState extends State<ReaderScreen> {
|
|||
Text(strings.t('error-broken-page'), textAlign: TextAlign.center),
|
||||
const SizedBox(height: 16),
|
||||
FilledButton(
|
||||
onPressed: () => setState(() => _showBrokenText = true),
|
||||
onPressed: _press(() => setState(() => _showBrokenText = true)),
|
||||
child: Text(strings.t('error-broken-page-show-text')),
|
||||
),
|
||||
],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue