From a5035b4657464c55ebc22e6f59c243e715c262dd Mon Sep 17 00:00:00 2001 From: Denis Hilt Date: Sun, 17 Mar 2024 14:26:50 +0100 Subject: [PATCH] 2024, node 18, demo version --- .github/workflows/build.yml | 12 ++++++------ LICENSE | 2 +- README.md | 25 +++++++++++++------------ demo/index.html | 3 ++- demo/index.js | 3 +++ 5 files changed, 25 insertions(+), 20 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index e6545a85..e6622808 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -5,20 +5,20 @@ on: branches: - "**" pull_request: - branches: [ main ] + branches: [main] workflow_dispatch: inputs: cause: - description: 'Reason' + description: "Reason" required: true - default: 'Manual triggering' + default: "Manual triggering" jobs: build: runs-on: ubuntu-latest strategy: matrix: - node-version: [16.x] + node-version: [18.x] steps: - name: Dispatched? if: ${{ github.event_name == 'workflow_dispatch' }} @@ -27,10 +27,10 @@ jobs: echo "Build reason: ${{ github.event.inputs.cause }}" - name: Checkout - uses: actions/checkout@v2 + uses: actions/checkout@v3 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 + uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} diff --git a/LICENSE b/LICENSE index b4bcc3e6..94746530 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2023 Denis Hilt (https://github.com/dhilt) +Copyright (c) 2024 Denis Hilt (https://github.com/dhilt) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 8bfeca9a..78929569 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,7 @@ interface WorkflowParams { } ``` -This is a TypeScript definition, but speaking of JavaScript, an argument object must contain 4 fields described below. +This is a TypeScript definition, but speaking of JavaScript, an argument object must contain 4 mandatory and 1 optional fields described below. ### 1. Consumer @@ -176,13 +176,14 @@ Each item (in both `newItems` and `oldItems` lists) is an instance of the [Item `Run` callback is the most complex and environment-specific part of the `vscroll` API, which is fully depends on the environment for which the consumer is being created. Framework specific consumer should rely on internal mechanism of the framework to provide runtime DOM modifications. -There are some requirements on how the items should be processed by `run` call: - - after the `run` callback is completed, there must be `newItems.length` elements in the DOM between backward and forward padding elements; -- old items that are not in the new item list should be removed from DOM; use `oldItems[].element` references for this purpose; - - old items that are in the list should not be removed and recreated, as it may lead to an unwanted shift of the scroll position; just don't touch them; - - new items elements should be rendered in accordance with `newItems[].$index` comparable to `$index` of elements that remain: `$index` must increase continuously and the directions of increase must persist across the `run` calls; Scroller maintains `$index` internally, so you only need to properly inject a set of `newItems[].element` into the DOM; - - new elements should be rendered but not visible, and this should be achieved by "fixed" positioning and "left"/"top" coordinates placing the item element out of view; the Workflow will take care of visibility after calculations; an additional attribute `newItems[].invisible` can be used to determine if a given element should be hidden; this requirement can be changed by the `Routines` class setting, see below; - - new items elements should have "data-sid" attribute, which value should reflect `newItems[].$index`. +There are some requirements on how the items should be processed by `run` call. + +- After the `run` callback is completed, there must be `newItems.length` elements in the DOM between backward and forward padding elements. +- Old items that are not in the new items list should be removed from DOM. Use `oldItems[].element` references for this purpose. +- Old items that are in the new items list should not be removed and recreated, as this may result in unwanted scroll position shifts. Just don't touch them. +- New items elements should be rendered in the correct order. Specifically, in accordance with `newItems[].$index` comparable to `$index` of elements that remain: `$index` must increase continuously and the directions of increase must persist across the `run` calls. The scroller maintains `$index` internally, so you only need to properly inject a set of `newItems[].element` into the DOM. +- New elements should be rendered without being visible, and this should be achieved by "fixed" positioning and "left"/"top" coordinates that take the item element out of view. The Workflow will take care of visibility after calculations. An additional `newItems[].invisible` attribute can be used to determine whether a given element should be hidden. This requirement can be changed by the `Routines` class setting (see below). +- New items elements should have a "data-sid" attribute whose value should reflect `newItems[].$index`. ### 5. Routines @@ -194,7 +195,7 @@ import { Routines, Workflow } from 'vscroll'; class CustomRoutines extends Routines { ... } new Workflow({ - // consumer, element, datasource, run, + consumer, element, datasource, run, // required params Routines: CustomRoutines }) ``` @@ -213,9 +214,9 @@ If we have a table layout case where we need to specify the offset of the table ```js new Workflow({ - // consumer, element, datasource, run, + consumer, element, datasource, run, // required params Routines: class extends Routines { - getOffset(element) { + getOffset() { return document.querySelector('#viewport thead')?.offsetHeight || 0; } } @@ -292,4 +293,4 @@ VScroll will receive its own Adapter API documentation later, but for now please __________ -2023 © [Denis Hilt](https://github.com/dhilt) +2024 © [Denis Hilt](https://github.com/dhilt) diff --git a/demo/index.html b/demo/index.html index 8b3b5337..685da48d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -30,6 +30,7 @@

+

This is a minimal working demo of a virtual scroll list rendering an unlimited data in runtime. @@ -46,7 +47,7 @@

diff --git a/demo/index.js b/demo/index.js index ca555b68..f401883e 100644 --- a/demo/index.js +++ b/demo/index.js @@ -71,3 +71,6 @@ const createItemElement = item => { // run the VScroll Workflow new VScroll.Workflow(workflowParams); + +const versionElt = document.getElementById(`vscroll-core-version`); +versionElt.innerHTML = `Package version: ${VScroll.packageInfo.name} v${VScroll.packageInfo.version}.`;