From 6ea3792341ada61e978a4db6933ccd93cbd7087e Mon Sep 17 00:00:00 2001 From: falsandtru Date: Tue, 12 Sep 2023 05:47:15 +0900 Subject: [PATCH] Remove `lock` option --- CHANGELOG.md | 4 ++++ gh-pages/docs/apis/pjax/config/index.md | 17 --------------- index.d.ts | 1 - src/layer/domain/data/config.ts | 9 -------- src/layer/domain/router/module/fetch.ts | 3 --- src/layer/interface/service/router.ts | 9 -------- .../service/state/scroll-restoration.ts | 14 ++++++++++++- test/integration/index.test.ts | 21 +++++++------------ test/integration/usecase/assign.test.ts | 2 +- test/integration/usecase/click.test.ts | 2 +- test/integration/usecase/replace.test.ts | 2 +- test/integration/usecase/submit.test.ts | 2 +- 12 files changed, 28 insertions(+), 58 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c4386d66..a49bfed6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 3.41.0 + +- Remove `lock` option. + ## 3.40.5 - Micro refactoring. diff --git a/gh-pages/docs/apis/pjax/config/index.md b/gh-pages/docs/apis/pjax/config/index.md index 4d2f9f4e..17778922 100644 --- a/gh-pages/docs/apis/pjax/config/index.md +++ b/gh-pages/docs/apis/pjax/config/index.md @@ -38,23 +38,6 @@ Set target forms. Set target links that replace the current URL. -## lock: () => string = ... - -Give CSS to lock and protect the scroll position from unexpected scrolls caused by a browser bug. - -```ts - // Default - public readonly lock = () => ` - :root { - position: fixed; - top: ${-window.scrollY}px; - left: ${-window.scrollX}px; - right: 0; - ${window.innerWidth - document.body.clientWidth ? 'overflow-y: scroll;' : ''} - ${window.innerHeight - document.body.clientHeight ? 'overflow-x: scroll;' : ''} - }`; -``` - ## cache: Dict = `new Cache(100)` Set a dictionary object having has/get/set/delete methods of Map to cache the requests. diff --git a/index.d.ts b/index.d.ts index 1fd6855b..adaae1fb 100644 --- a/index.d.ts +++ b/index.d.ts @@ -19,7 +19,6 @@ export interface Config { readonly filter?: (el: HTMLAnchorElement | HTMLAreaElement) => boolean; readonly form?: string; readonly replace?: string; - readonly lock?: () => string; readonly cache?: Dict; readonly memory?: Dict; readonly fetch?: { diff --git a/src/layer/domain/data/config.ts b/src/layer/domain/data/config.ts index 005af77a..14cfe3e3 100644 --- a/src/layer/domain/data/config.ts +++ b/src/layer/domain/data/config.ts @@ -26,15 +26,6 @@ export class Config implements Option { } public readonly form = 'form:not([method])'; public readonly replace = ''; - public readonly lock = () => ` - :root { - position: fixed; - top: ${-window.scrollY}px; - left: ${-window.scrollX}px; - right: 0; - ${window.innerWidth - document.body.clientWidth ? 'overflow-y: scroll;' : ''} - ${window.innerHeight - document.body.clientHeight ? 'overflow-x: scroll;' : ''} - }`; public readonly cache: Dict, { etag: string; expiry: number; xhr: XMLHttpRequest; }> = new Cache(100, { sweep: { threshold: 0 } }); public readonly memory?: Dict, Document>; public readonly fetch = { diff --git a/src/layer/domain/router/module/fetch.ts b/src/layer/domain/router/module/fetch.ts index 88474ef0..80172678 100644 --- a/src/layer/domain/router/module/fetch.ts +++ b/src/layer/domain/router/module/fetch.ts @@ -20,7 +20,6 @@ export async function fetch( }, }: RouterEvent, { - lock, cache, fetch: { rewrite, @@ -37,8 +36,6 @@ export async function fetch( ): Promise> { const { scrollX, scrollY } = window; if (type === RouterEventType.Popstate) { - // 小さな画面でもチラつかない - style.textContent = lock(); io.document.documentElement.appendChild(style); } const [seq, res] = await Promise.all([ diff --git a/src/layer/interface/service/router.ts b/src/layer/interface/service/router.ts index ba8f566a..38d2d675 100644 --- a/src/layer/interface/service/router.ts +++ b/src/layer/interface/service/router.ts @@ -9,10 +9,6 @@ import { Supervisor } from 'spica/supervisor'; import { Cancellation } from 'spica/cancellation'; import { Just } from 'spica/maybe'; import { never } from 'spica/promise'; -import { bind } from 'typed-dom/listener'; - -bind(window, 'pjax:unload', () => - window.history.scrollRestoration = 'auto', true); export { Config, RouterEvent, RouterEventSource } @@ -32,9 +28,6 @@ export function route( break; case RouterEventType.Popstate: io.document.title = loadTitle(); - // 小さな画面ではチラつく - //const { scrollX, scrollY } = window; - //requestAnimationFrame(() => void window.scrollTo(scrollX, scrollY)); break; } return Just(0) @@ -53,7 +46,6 @@ export function route( page.isAvailable() && config.memory?.set(event.location.orig.path, io.document.cloneNode(true)); page.process(event.location.dest); const [scripts] = await env; - window.history.scrollRestoration = 'manual'; //progressbar(config.progressbar); return router(config, event, { process: cancellation, scripts }, io) .then(m => m @@ -71,7 +63,6 @@ export function route( .catch(reason => { kill(); page.complete(); - window.history.scrollRestoration = 'auto'; if (cancellation.isAlive() || reason instanceof FatalError) { config.fallback(event.source, reason); } diff --git a/src/layer/interface/service/state/scroll-restoration.ts b/src/layer/interface/service/state/scroll-restoration.ts index 96e427e0..bc077801 100644 --- a/src/layer/interface/service/state/scroll-restoration.ts +++ b/src/layer/interface/service/state/scroll-restoration.ts @@ -1,4 +1,16 @@ +import { isTransitable } from '../../../data/store/state'; import { bind } from 'typed-dom/listener'; +// popstateイベントは事前に検知できないため事前設定 +if (isTransitable(window.history.state)) { + window.history.scrollRestoration = 'manual'; +} +// 遷移前ページの設定 +bind(window, 'pjax:fetch', () => + window.history.scrollRestoration = 'manual', true); +// 遷移後ページの設定 +bind(document, 'pjax:ready', () => + window.history.scrollRestoration = 'manual', true); +// 通常ページへの遷移または離脱では戻しておく bind(window, 'unload', () => - window.history.scrollRestoration = 'auto', false); + window.history.scrollRestoration = 'auto', true); diff --git a/test/integration/index.test.ts b/test/integration/index.test.ts index a5815831..2caa3b79 100644 --- a/test/integration/index.test.ts +++ b/test/integration/index.test.ts @@ -8,13 +8,6 @@ describe('Integration: Package', function () { Pjax['resources'].clear(); }); - describe('state', function () { - it('scrollRestoration', function () { - assert(window.history.scrollRestoration === 'auto' || window.history.scrollRestoration === undefined); - }); - - }); - describe('event', function () { it('sequence', function (done) { const path = '/base/test/integration/fixture/basic/1.html'; @@ -31,13 +24,13 @@ describe('Integration: Package', function () { }); once(window, 'pjax:unload', ev => { assert(ev instanceof Event); - assert(window.history.scrollRestoration === 'auto'); + assert(window.history.scrollRestoration === 'manual'); assert(window.location.pathname !== path); assert(cnt === 1 && ++cnt); }); once(document, 'pjax:content', ev => { assert(ev instanceof Event); - assert(window.history.scrollRestoration === 'auto'); + assert(window.history.scrollRestoration === 'manual'); assert(window.location.pathname === path); assert(document.title === 'Title 1'); assert(document.querySelector('header')!.innerHTML === 'Header 1'); @@ -45,12 +38,12 @@ describe('Integration: Package', function () { }); once(document, 'pjax:ready', ev => { assert(ev instanceof Event); - assert(window.history.scrollRestoration === 'auto'); + assert(window.history.scrollRestoration === 'manual'); assert(cnt === 3 && ++cnt); }); once(window, 'pjax:load', ev => { assert(ev instanceof Event); - assert(window.history.scrollRestoration === 'auto'); + assert(window.history.scrollRestoration === 'manual'); assert(cnt === 4 && ++cnt); done(); }); @@ -89,7 +82,7 @@ describe('Integration: Package', function () { assert(cnt === 4 && ++cnt); assert(r === 2); assert.deepStrictEqual(areas, [document.body]); - assert(window.history.scrollRestoration === 'auto'); + assert(window.history.scrollRestoration === 'manual'); assert(window.location.pathname === path); assert(document.title === 'Title 2'); assert(document.querySelector('header')!.innerHTML === 'Header 2'); @@ -98,14 +91,14 @@ describe('Integration: Package', function () { async ready(r) { assert(cnt === 6 && ++cnt); assert(r === 3); - assert(window.history.scrollRestoration === 'auto'); + assert(window.history.scrollRestoration === 'manual'); return 4; }, async load(r, events) { assert(cnt === 8 && ++cnt); assert(r === 4); assert.deepStrictEqual(events, []); - assert(window.history.scrollRestoration === 'auto'); + assert(window.history.scrollRestoration === 'manual'); done(); } }; diff --git a/test/integration/usecase/assign.test.ts b/test/integration/usecase/assign.test.ts index 2fb94697..ce956833 100644 --- a/test/integration/usecase/assign.test.ts +++ b/test/integration/usecase/assign.test.ts @@ -28,7 +28,7 @@ describe('Integration: Usecase', function () { new Pjax({ fallback(target) { assert(target instanceof HTMLAnchorElement); - assert(window.history.scrollRestoration === 'auto'); + assert(window.history.scrollRestoration === 'manual'); done(); } }, { document, router }) diff --git a/test/integration/usecase/click.test.ts b/test/integration/usecase/click.test.ts index 3da8097c..4f5c81de 100644 --- a/test/integration/usecase/click.test.ts +++ b/test/integration/usecase/click.test.ts @@ -96,7 +96,7 @@ describe('Integration: Usecase', function () { new Pjax({ fallback(target) { assert(target === a); - assert(window.history.scrollRestoration === 'auto'); + assert(window.history.scrollRestoration === 'manual'); done(); } }, { document, router }); diff --git a/test/integration/usecase/replace.test.ts b/test/integration/usecase/replace.test.ts index 867b4f18..42b339c0 100644 --- a/test/integration/usecase/replace.test.ts +++ b/test/integration/usecase/replace.test.ts @@ -28,7 +28,7 @@ describe('Integration: Usecase', function () { new Pjax({ fallback(target) { assert(target instanceof HTMLAnchorElement); - assert(window.history.scrollRestoration === 'auto'); + assert(window.history.scrollRestoration === 'manual'); done(); } }, { document, router }) diff --git a/test/integration/usecase/submit.test.ts b/test/integration/usecase/submit.test.ts index eef53cdb..3c7f6d0b 100644 --- a/test/integration/usecase/submit.test.ts +++ b/test/integration/usecase/submit.test.ts @@ -30,7 +30,7 @@ describe('Integration: Usecase', function () { fallback(target) { form.remove(); assert(target === form); - assert(window.history.scrollRestoration === 'auto'); + assert(window.history.scrollRestoration === 'manual'); done(); } }, { document, router });