From f3a8b6fe0a0f68a43103347fc065734fbaedddb6 Mon Sep 17 00:00:00 2001 From: xangelo Date: Wed, 25 Jan 2023 13:43:20 -0500 Subject: [PATCH] bug: stop scrolling page when moving through search results Disable scrolling the page when moving through search results. Will auto-focus on result if it is off screen. --- public/assets/bundle.js | 46 +++++++++++++++++++++++++++++++---------- src/cursor.ts | 17 ++++----------- src/dom.ts | 9 ++++++++ src/search.ts | 11 +++++++++- 4 files changed, 58 insertions(+), 25 deletions(-) create mode 100644 src/dom.ts diff --git a/public/assets/bundle.js b/public/assets/bundle.js index 0a39e1d..ae072e4 100644 --- a/public/assets/bundle.js +++ b/public/assets/bundle.js @@ -18624,12 +18624,13 @@ save(); /*!***********************!*\ !*** ./src/cursor.ts ***! \***********************/ -/***/ ((__unused_webpack_module, exports) => { +/***/ ((__unused_webpack_module, exports, __webpack_require__) => { "use strict"; Object.defineProperty(exports, "__esModule", ({ value: true })); exports.Cursor = void 0; +const dom_1 = __webpack_require__(/*! dom */ "./src/dom.ts"); class Cursor { constructor() { } @@ -18650,7 +18651,7 @@ class Cursor { const el = document.querySelector(elementId); if (el) { el.classList.add('cursor'); - if (!this.isVisible(elementId)) { + if (!(0, dom_1.isVisible)(el)) { el.scrollIntoView(true); } } @@ -18669,18 +18670,32 @@ class Cursor { isNodeExpanded() { return this.get().classList.contains('expanded'); } - isVisible(elementId) { - const el = document.querySelector(elementId); - var rect = el.getBoundingClientRect(); - return (rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && - rect.right <= (window.innerWidth || document.documentElement.clientWidth)); - } } exports.Cursor = Cursor; +/***/ }), + +/***/ "./src/dom.ts": +/*!********************!*\ + !*** ./src/dom.ts ***! + \********************/ +/***/ ((__unused_webpack_module, exports) => { + +"use strict"; + +Object.defineProperty(exports, "__esModule", ({ value: true })); +exports.isVisible = void 0; +function isVisible(element) { + const rect = element.getBoundingClientRect(); + return (rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= (window.innerWidth || document.documentElement.clientWidth)); +} +exports.isVisible = isVisible; + + /***/ }), /***/ "./src/help.ts": @@ -19058,6 +19073,7 @@ exports.Search = void 0; const lyra_1 = __webpack_require__(/*! @lyrasearch/lyra */ "./node_modules/@lyrasearch/lyra/dist/cjs/index.cjs"); const lodash_1 = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js"); const keyboardjs_1 = __importDefault(__webpack_require__(/*! keyboardjs */ "./node_modules/keyboardjs/dist/keyboard.js")); +const dom_1 = __webpack_require__(/*! dom */ "./src/dom.ts"); const searchModal = `
@@ -19086,18 +19102,26 @@ class Search { keyboardjs_1.default.setContext('navigation'); }); keyboardjs_1.default.bind('down', e => { + e.preventDefault(); document.getElementById('search-query').blur(); const el = document.querySelector('.search-result.selected'); if (el.nextElementSibling) { el.classList.remove('selected'); el.nextElementSibling.classList.add('selected'); + if (!(0, dom_1.isVisible)(el.nextElementSibling)) { + el.nextElementSibling.scrollIntoView(); + } } }); - keyboardjs_1.default.bind('up', () => { + keyboardjs_1.default.bind('up', e => { + e.preventDefault(); const el = document.querySelector('.search-result.selected'); if (el.previousElementSibling) { el.classList.remove('selected'); el.previousElementSibling.classList.add('selected'); + if (!(0, dom_1.isVisible)(el.previousElementSibling)) { + el.previousElementSibling.scrollIntoView(); + } } }); keyboardjs_1.default.bind('enter', e => { diff --git a/src/cursor.ts b/src/cursor.ts index 4dc7cc7..cd44b6d 100644 --- a/src/cursor.ts +++ b/src/cursor.ts @@ -1,3 +1,5 @@ +import {isVisible} from "dom"; + export class Cursor { constructor() { @@ -20,11 +22,11 @@ export class Cursor { set(elementId: string) { this.unset(); - const el = document.querySelector(elementId); + const el = document.querySelector(elementId) as HTMLElement; if(el) { el.classList.add('cursor'); - if(!this.isVisible(elementId)) { + if(!isVisible(el)) { el.scrollIntoView(true); } } @@ -47,15 +49,4 @@ export class Cursor { isNodeExpanded(): boolean { return this.get().classList.contains('expanded'); } - - isVisible(elementId: string) { - const el = document.querySelector(elementId) as HTMLElement; - var rect = el.getBoundingClientRect(); - return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && - rect.right <= (window.innerWidth || document.documentElement.clientWidth) - ); - } } diff --git a/src/dom.ts b/src/dom.ts new file mode 100644 index 0000000..481c5ed --- /dev/null +++ b/src/dom.ts @@ -0,0 +1,9 @@ +export function isVisible(element: HTMLElement): boolean { + const rect = element.getBoundingClientRect(); + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= (window.innerWidth || document.documentElement.clientWidth) + ); +} diff --git a/src/search.ts b/src/search.ts index 9bbff3c..0329c2f 100644 --- a/src/search.ts +++ b/src/search.ts @@ -2,6 +2,7 @@ import { create, insert, insertBatch, search } from '@lyrasearch/lyra'; import { map } from 'lodash'; import { OutlineNode } from 'outline'; import keyboardJS from 'keyboardjs'; +import {isVisible} from 'dom'; const searchModal = `
@@ -38,19 +39,27 @@ export class Search { }); keyboardJS.bind('down', e => { + e.preventDefault(); document.getElementById('search-query').blur(); const el = document.querySelector('.search-result.selected'); if(el.nextElementSibling) { el.classList.remove('selected'); el.nextElementSibling.classList.add('selected'); + if(!isVisible(el.nextElementSibling as HTMLElement)) { + el.nextElementSibling.scrollIntoView(); + } } }); - keyboardJS.bind('up', () => { + keyboardJS.bind('up', e => { + e.preventDefault(); const el = document.querySelector('.search-result.selected'); if(el.previousElementSibling) { el.classList.remove('selected'); el.previousElementSibling.classList.add('selected'); + if(!isVisible(el.previousElementSibling as HTMLElement)) { + el.previousElementSibling.scrollIntoView(); + } } }) -- 2.25.1