├── .nvmrc
├── .husky
    ├── .gitignore
    ├── pre-commit
    └── prepare-commit-msg
├── .eslintignore
├── module
    ├── src
    │   ├── tests
    │   │   ├── jest-setup.ts
    │   │   └── specs
    │   │   │   ├── strictCallbackAndRootMargin.test.ts
    │   │   │   └── options.test.ts
    │   ├── common
    │   │   ├── types.ts
    │   │   ├── sides.ts
    │   │   └── options.ts
    │   ├── async
    │   │   ├── rootMargin.ts
    │   │   ├── index.ts
    │   │   ├── options.ts
    │   │   └── strictCallbackAndRootMargin.ts
    │   ├── index.ts
    │   ├── shortcuts.ts
    │   ├── jquery
    │   │   └── plugin.js
    │   └── sync
    │   │   └── index.ts
    ├── .gitignore
    ├── tsconfig.cjs.json
    ├── tsconfig.esm.json
    ├── .unimportedrc.json
    ├── jest.config.ts
    ├── tsconfig.json
    └── package.json
├── app
    ├── .ts-prunerc
    ├── .eslintrc.json
    ├── cypress
    │   ├── tsconfig.json
    │   └── e2e
    │   │   ├── basic.cy.ts
    │   │   └── boundaries.cy.ts
    ├── cypress.config.ts
    ├── .unimportedrc.json
    ├── .gitignore
    ├── src
    │   ├── scripts
    │   │   ├── dom.ts
    │   │   ├── main.ts
    │   │   ├── store.ts
    │   │   ├── boundaries.ts
    │   │   ├── output.ts
    │   │   ├── boxes.ts
    │   │   └── events.ts
    │   ├── styles
    │   │   ├── _boundaries.scss
    │   │   ├── _buttons.scss
    │   │   ├── main.scss
    │   │   ├── _boxes.scss
    │   │   └── _control-panel.scss
    │   └── index.html
    ├── tsconfig.json
    └── package.json
├── .gitattributes
├── .prettierrc
├── .github
    ├── dependabot.yml
    └── workflows
    │   ├── linting-and-unit-tests.yml
    │   ├── dependabot-auto-merge.yaml
    │   ├── publish-npm-github-packages.yml
    │   ├── cypress.yml
    │   └── github-pages-static.yml
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── package.json
└── README.md


/.nvmrc:
--------------------------------------------------------------------------------
1 | 20
2 | 


--------------------------------------------------------------------------------
/.husky/.gitignore:
--------------------------------------------------------------------------------
1 | _
2 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | jest.config.js
3 | .eslintrc.js
4 | 


--------------------------------------------------------------------------------
/module/src/tests/jest-setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom'
2 | 


--------------------------------------------------------------------------------
/app/.ts-prunerc:
--------------------------------------------------------------------------------
1 | {
2 |     "ignore": "./dist",
3 |     "error": true
4 | }
5 | 


--------------------------------------------------------------------------------
/app/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |     "extends": ["plugin:cypress/recommended"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | npx lint-staged
5 | 


--------------------------------------------------------------------------------
/.husky/prepare-commit-msg:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | exec </dev/tty || true
5 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Set the repository to show as TypeScript rather than JS in GitHub
2 | *.js linguist-detectable=false


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |     "singleQuote": true,
3 |     "trailingComma": "all",
4 |     "arrowParens": "always",
5 |     "printWidth": 120,
6 |     "tabWidth": 4,
7 |     "semi": false
8 | }
9 | 


--------------------------------------------------------------------------------
/app/cypress/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "es5",
 4 |         "lib": ["es5", "dom"],
 5 |         "types": ["cypress", "node"],
 6 |         "resolveJsonModule": true
 7 |     },
 8 |     "include": ["./**/*.ts*"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/module/.gitignore:
--------------------------------------------------------------------------------
1 | dist-legacy
2 | 
3 | # NPM needs the readme to be in this folder when publishing; the root's README will be copied to this folder during build time, but we don't want to commit it
4 | README.md
5 | # License isn't strictly necessary, but I'd prefer to expose it to NPM directly
6 | LICENSE
7 | 


--------------------------------------------------------------------------------
/app/cypress.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'cypress'
 2 | import installLogsPrinter from 'cypress-terminal-report/src/installLogsPrinter'
 3 | 
 4 | export default defineConfig({
 5 |     projectId: 'e6vu7j',
 6 |     e2e: {
 7 |         supportFile: false,
 8 |         setupNodeEvents(on /* , config */) {
 9 |             installLogsPrinter(on)
10 |         },
11 |     },
12 | })
13 | 


--------------------------------------------------------------------------------
/module/tsconfig.cjs.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "./tsconfig.json",
 3 |     "compilerOptions": {
 4 |         "module": "commonjs",
 5 |         "outDir": "./dist/cjs",
 6 |         "target": "es2015",
 7 |         "rootDir": "src",
 8 |         "baseUrl": "src"
 9 |     },
10 |     "include": ["src/**/*.ts*"],
11 |     "exclude": ["../node_modules", "node_modules", "src/tests/*"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 | - package-ecosystem: npm
 4 |   directory: "/"
 5 |   schedule:
 6 |     interval: daily
 7 |   open-pull-requests-limit: 5
 8 | - package-ecosystem: npm
 9 |   directory: "/app"
10 |   schedule:
11 |     interval: daily
12 |   open-pull-requests-limit: 5
13 | - package-ecosystem: npm
14 |   directory: "/module"
15 |   schedule:
16 |     interval: daily
17 |   open-pull-requests-limit: 5
18 | 


--------------------------------------------------------------------------------
/module/tsconfig.esm.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "./tsconfig.json",
 3 |     "compilerOptions": {
 4 |         "rootDir": "src",
 5 |         "baseUrl": "src",
 6 |         "declaration": true,
 7 |         "declarationMap": true,
 8 |         "outDir": "./dist/esm",
 9 |         "target": "es2020",
10 |         "module": "esnext"
11 |     },
12 |     "include": ["src/**/*.ts*"],
13 |     "exclude": ["../node_modules", "node_modules", "src/tests/*"]
14 | }
15 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     parser: '@typescript-eslint/parser',
 3 |     parserOptions: {
 4 |         warnOnUnsupportedTypeScriptVersion: false,
 5 |     },
 6 |     plugins: ['@typescript-eslint'],
 7 |     extends: [
 8 |         'eslint:recommended',
 9 |         'plugin:@typescript-eslint/eslint-recommended',
10 |         'plugin:@typescript-eslint/recommended',
11 |     ],
12 |     env: {
13 |         jest: true,
14 |         node: true,
15 |     },
16 |     rules: {},
17 | }
18 | 


--------------------------------------------------------------------------------
/module/.unimportedrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "entry": ["src/index.ts"],
 3 |     "pathTransforms": {
 4 |         "(\\.(?!/jquery/plugin).+)\\.js$": "$1.ts"
 5 |     },
 6 |     "ignorePatterns": [
 7 |         "src/tests/**/*.ts",
 8 |         "**/node_modules/**",
 9 |         "**/*.test.{js,jsx,ts,tsx}",
10 |         "./dist",
11 |         "src/index.ts",
12 |         "jest.config.ts"
13 |     ],
14 |     "ignoreUnimported": ["src/tests/**/*.ts"],
15 |     "ignoreUnused": [],
16 |     "ignoreUnresolved": [],
17 |     "rootDir": "./src"
18 | }
19 | 


--------------------------------------------------------------------------------
/app/.unimportedrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "entry": ["./src/scripts/main.ts"],
 3 | 	"extensions": [".ts", ".d.ts"],
 4 |     "pathTransforms": {
 5 |         "(\\.(?!\/jquery\/plugin).+)\\.js$": "$1.ts"
 6 |     },
 7 |     "ignorePatterns": [
 8 |     "**/node_modules/**",
 9 |     "**/*.tests.{js,jsx,ts,tsx}",
10 |     "**/*.test.{js,jsx,ts,tsx}",
11 |     "**/*.spec.{js,jsx,ts,tsx}",
12 |     "**/tests/**",
13 |     "**/__tests__/**",
14 |     "**/*.d.ts"
15 |   ],
16 |   "ignoreUnimported": [],
17 |   "ignoreUnused": [],
18 |   "ignoreUnresolved": []
19 | }


--------------------------------------------------------------------------------
/app/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/module/src/common/types.ts:
--------------------------------------------------------------------------------
 1 | export type Side = 'top' | 'right' | 'bottom' | 'left'
 2 | 
 3 | export type MultipleSides = `${Side} ${Side}` | `${Side} ${Side} ${Side}`
 4 | 
 5 | export type Boundaries = {
 6 |     [b in Side]?: number | 'ignore' | null
 7 | }
 8 | 
 9 | // What the user provides
10 | export type UserOptions = {
11 |     container?: HTMLElement | Window | Document
12 | } & Boundaries
13 | 
14 | // What we use internally
15 | export type Config = {
16 |     container: HTMLElement | Window | Document
17 | } & {
18 |     [b in Side]: number | 'ignore'
19 | }
20 | 


--------------------------------------------------------------------------------
/app/src/scripts/dom.ts:
--------------------------------------------------------------------------------
 1 | // Query function that returns a proper array
 2 | export function query(selector: string, node?: HTMLElement): Array<HTMLElement> {
 3 |     if (typeof node === 'undefined') {
 4 |         node = document.body
 5 |     }
 6 | 
 7 |     return Array.from(node.querySelectorAll(selector))
 8 | }
 9 | 
10 | export function showAll(selector: string) {
11 |     query(selector).forEach((elem) => {
12 |         elem.style.display = elem.nodeName === 'SPAN' ? 'inline' : 'block'
13 |     })
14 | }
15 | 
16 | export function hideAll(selector: string) {
17 |     query(selector).forEach((elem) => {
18 |         elem.style.display = 'none'
19 |     })
20 | }
21 | 


--------------------------------------------------------------------------------
/app/src/styles/_boundaries.scss:
--------------------------------------------------------------------------------
 1 | .boundary {
 2 |     position: fixed;
 3 |     border: 0 dashed #03c;
 4 |     background-color: #3cf;
 5 |     background-color: rgba(51, 153, 255, 0.3);
 6 |     overflow: hidden;
 7 |     z-index: 2;
 8 | }
 9 | 
10 | .boundary-top {
11 |     left: 0;
12 |     width: 100%;
13 |     border-bottom-width: 1px;
14 | }
15 | 
16 | .boundary-right {
17 |     top: 0;
18 |     height: 100%;
19 |     border-left-width: 1px;
20 | }
21 | 
22 | .boundary-bottom {
23 |     left: 0;
24 |     width: 100%;
25 |     border-top-width: 1px;
26 | }
27 | 
28 | .boundary-left {
29 |     top: 0;
30 |     height: 100%;
31 |     border-right-width: 1px;
32 | }
33 | 


--------------------------------------------------------------------------------
/module/src/common/sides.ts:
--------------------------------------------------------------------------------
 1 | import { MultipleSides, Side, UserOptions } from './types.js'
 2 | 
 3 | // This order must match the shorthand used for CSS, e.g. for `margin: T R B L`
 4 | export const sides: Side[] = ['top', 'right', 'bottom', 'left']
 5 | 
 6 | export function isSide(side: string | Partial<UserOptions> | undefined): side is Side {
 7 |     return Boolean(side) && typeof side === 'string' && (sides as string[]).includes(side)
 8 | }
 9 | 
10 | export function isMultipleSides(sideList: string | Partial<UserOptions> | undefined): sideList is MultipleSides {
11 |     if (typeof sideList !== 'string') {
12 |         return false
13 |     }
14 | 
15 |     return sideList.split(' ').every((side) => sideList.includes(side))
16 | }
17 | 


--------------------------------------------------------------------------------
/module/jest.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'jest'
 2 | 
 3 | const config: Config = {
 4 |     testEnvironment: 'jsdom',
 5 |     rootDir: '.',
 6 |     testPathIgnorePatterns: ['.js'],
 7 |     setupFilesAfterEnv: ['<rootDir>/src/tests/jest-setup.ts'],
 8 |     transform: {
 9 |         '^.+\\.(ts|tsx)?$': [
10 |             'ts-jest',
11 |             {
12 |                 // Disable type-checking by Jest because it's tedious while debugging (we'll rely on our lint scripts to prevent pushing bad code)
13 |                 isolatedModules: true,
14 |                 useESM: true
15 |             },
16 |         ],
17 |     },
18 |     moduleNameMapper: {
19 |         "(.+)\\.js": "$1"
20 |     },
21 |     extensionsToTreatAsEsm: [".ts"],
22 | }
23 | 
24 | export default config
25 | 


--------------------------------------------------------------------------------
/app/src/scripts/main.ts:
--------------------------------------------------------------------------------
 1 | import { createBoxHtml } from './boxes'
 2 | import { addEventHandlers } from './events'
 3 | import store from './store'
 4 | 
 5 | // Demo code
 6 | function demo() {
 7 |     function init() {
 8 |         const $codeOutput = document.querySelector('.code-output code')
 9 | 
10 |         if ($codeOutput) {
11 |             store.setState({
12 |                 $codeOutput,
13 |             })
14 |         }
15 | 
16 |         const $boundaryPreview = document.querySelector('.boundary-preview')
17 | 
18 |         if ($boundaryPreview) {
19 |             store.setState({
20 |                 $boundaryPreview,
21 |             })
22 |         }
23 | 
24 |         createBoxHtml()
25 |         addEventHandlers()
26 |     }
27 | 
28 |     window.addEventListener('load', init)
29 | }
30 | 
31 | demo()
32 | 


--------------------------------------------------------------------------------
/app/src/styles/_buttons.scss:
--------------------------------------------------------------------------------
 1 | .button {
 2 |     display: inline-block;
 3 |     white-space: nowrap;
 4 |     background-color: rgba(0, 0, 0, 0.05);
 5 |     border: 1px solid rgba(0, 0, 0, 0.1);
 6 |     padding: 0.25em 0.5em;
 7 |     margin: 0.5em;
 8 |     text-decoration: none;
 9 |     color: #333;
10 |     cursor: pointer;
11 |     border-radius: 0.2em;
12 |     background-clip: padding-box;
13 | 
14 |     &:hover {
15 |         background-color: rgba(0, 0, 0, 0.1);
16 |     }
17 | 
18 |     &:active {
19 |         position: relative;
20 |         top: 1px;
21 |     }
22 | 
23 |     &:focus {
24 |         outline: 0;
25 |         background: rgba(0, 0, 0, 0.07);
26 |     }
27 | }
28 | 
29 | // Smaller buttons
30 | .button.small {
31 |     &:before {
32 |         font-size: 1em;
33 |         margin: 0 0.5em 0 -1em;
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/app/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "es6",
 4 |         "module": "CommonJS",
 5 |         "lib": ["dom", "dom.iterable", "esnext"],
 6 |         "outDir": "dist",
 7 |         "allowJs": true,
 8 |         "skipLibCheck": true,
 9 |         "strict": true,
10 |         "forceConsistentCasingInFileNames": true,
11 |         "esModuleInterop": true,
12 |         "moduleResolution": "node",
13 |         "resolveJsonModule": true,
14 |         "isolatedModules": true,
15 |         "jsx": "preserve",
16 |         "incremental": true,
17 |         "types": ["jest"]
18 |     },
19 |     "include": [
20 |         "src/**/*.ts",
21 |         "../module/**/*.d.ts",
22 |         "../module/src/async/**/*.ts",
23 |         "../module/src/sync/**/*.ts",
24 |         "../module/src/common/**/*.ts"
25 |     ],
26 |     "exclude": ["node_modules", "./cypress"]
27 | }
28 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | dist/
 2 | node_modules/
 3 | yarn-error.log
 4 | *.sublime-*
 5 | *.DS_Store
 6 | .vscode/
 7 | app/cypress/e2e/examples
 8 | app/cypress/fixtures
 9 | app/cypress/support
10 | .parcel-cache/
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | 
19 | # Directory for instrumented libs generated by jscoverage/JSCover
20 | dist-cov
21 | 
22 | # Coverage directory used by tools like istanbul
23 | coverage
24 | *.lcov
25 | 
26 | # node-waf configuration
27 | .lock-wscript
28 | 
29 | # Compiled binary addons (https://nodejs.org/api/addons.html)
30 | build/Release
31 | 
32 | # Snowpack dependency directory (https://snowpack.dev/)
33 | web_modules/
34 | 
35 | # TypeScript cache
36 | *.tsbuildinfo
37 | 
38 | # Optional npm cache directory
39 | .npm
40 | 
41 | # Optional eslint cache
42 | .eslintcache
43 | 
44 | # dotenv environment variables file
45 | .env.test
46 | .env.local
47 | 


--------------------------------------------------------------------------------
/module/src/async/rootMargin.ts:
--------------------------------------------------------------------------------
 1 | import { Config } from '../common/types.js'
 2 | import { sides } from '../common/sides.js'
 3 | 
 4 | /**
 5 |  * Determines the rootMargin value for IntersectionObserver
 6 |  *
 7 |  * Loose mode uses very large (but ultimately arbitrary) values for sides that should be ignored.
 8 |  *
 9 |  * Strict mode calculates these values by measuring the screen and the target element, but that is costly and it
10 |  * seems very unlikely that these arbitrary values will produce inaccurate results for our purposes.
11 |  */
12 | export function determineRootMargin(config: Config, mode: 'loose' | 'strict'): IntersectionObserverInit['rootMargin'] {
13 |     const ignoreValue = mode === 'loose' ? -9999999 : 0
14 | 
15 |     return sides
16 |         .map((side) => {
17 |             const value = config[side]
18 | 
19 |             return `${-1 * (value === 'ignore' ? ignoreValue : value)}px`
20 |         })
21 |         .join(' ')
22 | }
23 | 


--------------------------------------------------------------------------------
/module/src/async/index.ts:
--------------------------------------------------------------------------------
 1 | import { getConfig } from '../common/options.js'
 2 | import { MultipleSides, Side, UserOptions } from '../common/types.js'
 3 | import { getIntersectionObserverOptions } from './options.js'
 4 | 
 5 | /**
 6 |  * Determines whether an element is within the viewport
 7 |  * @param  {HTMLElement}      elem           DOM Element (required)
 8 |  * @param  {String | Object}  userOptions    Optional settings
 9 |  * @return {Promise<Boolean>}                Whether the element was completely within the viewport
10 |  */
11 | export async function withinViewportAsync(
12 |     elem: HTMLElement,
13 |     userOptions?: Side | MultipleSides | Partial<UserOptions>,
14 | ): Promise<boolean> {
15 |     return new Promise((resolve) => {
16 |         const config = getConfig('async', elem, userOptions)
17 |         const opts = getIntersectionObserverOptions('loose', config, resolve, elem)
18 | 
19 |         new IntersectionObserver(...opts).observe(elem)
20 |     })
21 | }
22 | 


--------------------------------------------------------------------------------
/.github/workflows/linting-and-unit-tests.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
 2 | # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
 3 | 
 4 | name: Linting and Unit Tests
 5 | 
 6 | on: [push]
 7 | 
 8 | jobs:
 9 |   build:
10 | 
11 |     runs-on: ubuntu-latest
12 | 
13 |     strategy:
14 |       matrix:
15 |         node-version: [18.x, 20.x]
16 |         # See supported Node.js release schedule at https://github.com/nodejs/release#release-schedule
17 | 
18 |     steps:
19 |       - uses: actions/checkout@v3
20 |       - name: Use Node.js ${{ matrix.node-version }}
21 |         uses: actions/setup-node@v3
22 |         with:
23 |           node-version: ${{ matrix.node-version }}
24 |           cache: 'yarn'
25 |       - run: yarn install
26 |       - run: yarn build
27 |       - run: yarn lint
28 |       - run: yarn test
29 | 


--------------------------------------------------------------------------------
/.github/workflows/dependabot-auto-merge.yaml:
--------------------------------------------------------------------------------
 1 | # Copied from:
 2 | # https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/automating-dependabot-with-github-actions#enable-auto-merge-on-a-pull-request
 3 | name: Dependabot auto-merge
 4 | on: pull_request_target
 5 | 
 6 | permissions:
 7 |   pull-requests: write
 8 |   contents: write
 9 | 
10 | jobs:
11 |   dependabot:
12 |     runs-on: ubuntu-latest
13 |     if: ${{ github.actor == 'dependabot[bot]' }}
14 |     steps:
15 |       - name: Dependabot metadata
16 |         id: metadata
17 |         uses: dependabot/fetch-metadata@v1.1.1
18 |         with:
19 |           github-token: "${{ secrets.GITHUB_TOKEN }}"
20 |       - name: Enable auto-merge for Dependabot PRs
21 |         if: ${{ steps.metadata.outputs.update-type == 'version-update:semver-minor' }}
22 |         run: gh pr merge --auto --squash "$PR_URL"
23 |         env:
24 |           PR_URL: ${{ github.event.pull_request.html_url }}
25 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
26 | 


--------------------------------------------------------------------------------
/module/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "es6",
 4 |         "module": "commonjs",
 5 |         "lib": ["dom", "dom.iterable", "esnext"],
 6 |         "declaration": true,
 7 |         "declarationMap": true,
 8 |         "sourceMap": true,
 9 |         "outDir": "./dist",
10 |         "rootDir": ".",
11 |         "baseUrl": ".",
12 |         "strict": true,
13 |         "noImplicitAny": true,
14 |         "strictNullChecks": true,
15 |         "strictFunctionTypes": true,
16 |         "strictPropertyInitialization": true,
17 |         "noImplicitThis": true,
18 |         "noUnusedLocals": true,
19 |         "noUnusedParameters": true,
20 |         "noImplicitReturns": true,
21 |         "moduleResolution": "node",
22 |         "typeRoots": ["../node_modules/@types", "types"],
23 |         "forceConsistentCasingInFileNames": true,
24 |         "preserveConstEnums": true,
25 |         "esModuleInterop": true,
26 |         "resolveJsonModule": true,
27 |         "types": ["node", "jest"],
28 |         "skipLibCheck": true,
29 |         "allowJs": true
30 |     },
31 |     "include": ["src/**/*.ts*", "jest.config.ts"],
32 |     "exclude": ["../node_modules", "node_modules", "./dist"],
33 |     "ts-node": {
34 |         "esm": true
35 |     }
36 | }
37 | 


--------------------------------------------------------------------------------
/app/src/styles/main.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font: 1em/1.2em -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Calibri, 'Myriad Pro', Tahoma, sans-serif;
 3 |     overflow: scroll;
 4 |     background-color: lightblue;
 5 |     margin: 0;
 6 |     padding: 0;
 7 | }
 8 | 
 9 | @import './_buttons.scss';
10 | @import './_boxes.scss';
11 | @import './_control-panel.scss';
12 | @import './_boundaries.scss';
13 | 
14 | a {
15 |     color: rgba(51, 102, 204, 1);
16 | 
17 |     &:active,
18 |     &:focus,
19 |     &:hover {
20 |         color: rgba(51, 102, 204, 0.75);
21 |         text-decoration: none;
22 |     }
23 | }
24 | 
25 | h1 {
26 |     text-align: center;
27 |     font-size: 24px;
28 |     margin-top: 0;
29 | }
30 | 
31 | h2 {
32 |     font-size: 18px;
33 |     color: #555;
34 | }
35 | 
36 | code {
37 |     font: 0.9em/1em Menlo, Consolas, monospace;
38 |     color: darken(rgba(51, 153, 255), 40%);
39 |     background-color: rgba(51, 153, 255, 0.05);
40 |     padding: 0.2em;
41 | }
42 | 
43 | #arbitrary-viewport-container {
44 |     background-color: white;
45 |     margin: 12.5%;
46 |     width: 75%;
47 |     height: 400px;
48 |     height: 75vh;
49 |     overflow: scroll;
50 | }
51 | 
52 | .sr-only {
53 |     position: absolute;
54 |     left: -10000px;
55 |     top: auto;
56 |     width: 1px;
57 |     height: 1px;
58 |     overflow: hidden;
59 | }
60 | 


--------------------------------------------------------------------------------
/app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "@patik/within-viewport-demo",
 3 |     "version": "3.0.1",
 4 |     "private": true,
 5 |     "source": "src/index.html",
 6 |     "scripts": {
 7 |         "start": "yarn clear-parcel-cache && parcel",
 8 |         "clear-parcel-cache": "shx rm -rf ../.parcel-cache",
 9 |         "build": "yarn clear-parcel-cache && parcel build --no-scope-hoist --public-url \"/within-viewport\"",
10 |         "typecheck": "tsc --noEmit",
11 |         "code-lint": "eslint --ext .ts --fix ./src/**/*.ts",
12 |         "lint": "yarn typecheck && yarn code-lint && yarn unused-exports",
13 |         "unused-exports": "unimported --no-cache"
14 |     },
15 |     "dependencies": {
16 |         "prismjs": "^1.29.0",
17 |         "zustand": "^4.5.0"
18 |     },
19 |     "devDependencies": {
20 |         "@types/jquery": "^3.5.16",
21 |         "@types/lodash": "^4.17.0",
22 |         "@types/prismjs": "^1.26.0",
23 |         "cypress-terminal-report": "^5.3.2",
24 |         "eslint-plugin-prettier": "^5.0.0",
25 |         "parcel": "^2.12.0"
26 |     },
27 |     "lint-staged": {
28 |         "*.ts": "eslint --cache --cache-location .eslintcache --fix"
29 |     },
30 |     "author": {
31 |         "name": "Craig Patik",
32 |         "email": "craig@patik.com",
33 |         "url": "https://patik.com"
34 |     },
35 |     "license": "BSD-3-Clause"
36 | }
37 | 


--------------------------------------------------------------------------------
/app/src/scripts/store.ts:
--------------------------------------------------------------------------------
 1 | import { createStore } from 'zustand/vanilla'
 2 | import { Config } from '../../../module/src/common/types'
 3 | 
 4 | interface State {
 5 |     $boxes: HTMLElement[]
 6 |     $codeOutput: HTMLElement | Element
 7 |     $boundaryPreview: HTMLElement | Element
 8 |     boundaries: Omit<Config, 'container'> // Just the boundaries
 9 |     // Which version of `withinViewport` should be called
10 |     methodType: 'async' | 'sync'
11 | 
12 |     // These represent the (singular) container that we're using as the viewport. If it's some DOM element, these values are both the same. But if it's the whole window, then we need to use either `window` or `document.body` for certain tasks, hence the two separate variables.
13 |     containerForDOM: HTMLElement
14 |     containerForEvents: HTMLElement | Window
15 | }
16 | 
17 | export default createStore<State>()(() => ({
18 |     containerForDOM: document.body,
19 |     containerForEvents: window,
20 | 
21 |     // These are crappy defaults, but I want TS to consider them to be defined at all times since I will init them before doing anything else
22 |     $codeOutput: document.body.lastElementChild ?? document.body,
23 |     $boundaryPreview: document.body.firstElementChild ?? document.body,
24 | 
25 |     $boxes: [],
26 |     methodType: 'async',
27 |     boundaries: {
28 |         top: 0,
29 |         right: 0,
30 |         bottom: 0,
31 |         left: 0,
32 |     },
33 | }))
34 | 


--------------------------------------------------------------------------------
/module/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { withinViewport } from './sync/index.js'
 2 | 
 3 | export { withinViewportAsync } from './async/index.js'
 4 | export { withinViewport } from './sync/index.js'
 5 | export * from './shortcuts.js'
 6 | 
 7 | const global = (function (scope) {
 8 |     if (typeof self !== 'undefined') {
 9 |         return self
10 |     }
11 |     if (typeof window !== 'undefined') {
12 |         return window
13 |     }
14 | 
15 |     return scope
16 | })(this)
17 | 
18 | async function setupJquery() {
19 |     if (!global) {
20 |         return
21 |     }
22 | 
23 |     const setupJQueryPlugin = (await import('./jquery/plugin.js')) as unknown as (jQuery: unknown) => void
24 | 
25 |     if (typeof setupJQueryPlugin === 'function') {
26 |         if ('jQuery' in global) {
27 |             setupJQueryPlugin(global.jQuery)
28 |         } else if ('$' in global) {
29 |             setupJQueryPlugin(global.$)
30 |         }
31 |     }
32 | }
33 | 
34 | setupJquery()
35 | 
36 | /**
37 |  * Temporary shim for the old function name—please switch to the camelCase `withinViewport` name.
38 |  *
39 |  * @deprecated
40 |  */
41 | export function withinviewport(...args: Parameters<typeof withinViewport>) {
42 |     const result = withinViewport(...args)
43 | 
44 |     try {
45 |         // Some *really* old browsers don't have a console
46 |         console.error(
47 |             'The lowercase name `withinviewport` is deprecated. Instead, use the camelCase name `withinViewport`.',
48 |         )
49 |     } catch (e) {
50 |         //
51 |     }
52 | 
53 |     return result
54 | }
55 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | # BSD 3-Clause License
 2 | 
 3 | Copyright (c) 2023, Craig Patik [(patik.com)](https://patik.com)
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | * Redistributions of source code must retain the above copyright notice, this
10 |   list of conditions and the following disclaimer.
11 | 
12 | * Redistributions in binary form must reproduce the above copyright notice,
13 |   this list of conditions and the following disclaimer in the documentation
14 |   and/or other materials provided with the distribution.
15 | 
16 | * Neither the name of the copyright holder nor the names of its
17 |   contributors may be used to endorse or promote products derived from
18 |   this software without specific prior written permission.
19 | 
20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30 | 


--------------------------------------------------------------------------------
/.github/workflows/publish-npm-github-packages.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will run tests using node and then publish a package to both NPM and GitHub Packages when a release is created
 2 | # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
 3 | 
 4 | name: Publish to NPM and GitHub Packages
 5 | 
 6 | on:
 7 |   release:
 8 |     types: [created]
 9 | 
10 | jobs:
11 |   build:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v3
15 |       - uses: actions/setup-node@v3
16 |         with:
17 |           node-version: '20.x'
18 |       - run: yarn install
19 |       - run: yarn build
20 |       - run: yarn test
21 | 
22 |   publish-npm:
23 |     needs: build
24 |     runs-on: ubuntu-latest
25 |     permissions:
26 |       contents: read
27 |       packages: write
28 |     steps:
29 |       - uses: actions/checkout@v3
30 |       - uses: actions/setup-node@v3
31 |         with:
32 |           node-version: '20.x'
33 |           registry-url: 'https://registry.npmjs.org'
34 |       - run: yarn install
35 |       - run: yarn --cwd module build
36 |       - run: yarn --cwd module publish
37 |         env:
38 |           NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_TOKEN}}
39 | 
40 |   publish-gpr:
41 |     needs: build
42 |     runs-on: ubuntu-latest
43 |     permissions:
44 |       contents: read
45 |       packages: write
46 |     steps:
47 |       - uses: actions/checkout@v3
48 |       - uses: actions/setup-node@v3
49 |         with:
50 |           node-version: '20.x'
51 |           registry-url: https://npm.pkg.github.com/
52 |       - run: yarn install
53 |       - run: yarn --cwd module build
54 |       - run: yarn --cwd module publish
55 |         env:
56 |           NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_TOKEN}}
57 |           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
58 | 


--------------------------------------------------------------------------------
/.github/workflows/cypress.yml:
--------------------------------------------------------------------------------
 1 | name: Cypress E2E
 2 | on: [push]
 3 | jobs:
 4 |   cypress-run:
 5 |     runs-on: ubuntu-latest
 6 |     # Runs tests in parallel with matrix strategy https://docs.cypress.io/guides/guides/parallelization
 7 |     # https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs
 8 |     # Also see warning here https://github.com/cypress-io/github-action#parallel
 9 |     strategy:
10 |       fail-fast: false # https://github.com/cypress-io/github-action/issues/48
11 |       matrix:
12 |         containers: [1, 2] # Uses 2 parallel instances
13 |     steps:
14 |       - name: Checkout
15 |         uses: actions/checkout@v3
16 |       - name: Cypress run
17 |         # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
18 |         uses: cypress-io/github-action@v4
19 |         with:
20 |           # Starts web server for E2E tests - replace with your own server invocation
21 |           # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server
22 |           start: yarn start:ci
23 |           project: ./app
24 |           wait-on: 'http://localhost:1234' # Waits for above
25 |           # Records to Cypress Dashboard
26 |           # https://docs.cypress.io/guides/dashboard/projects#Set-up-a-project-to-record
27 |           # record: true
28 |           # parallel: true # Runs test in parallel using settings above
29 |         env:
30 |           # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY
31 |           # in GitHub repo → Settings → Secrets → Actions
32 |           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
33 |           # Creating a token https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
34 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
35 | 


--------------------------------------------------------------------------------
/app/src/scripts/boundaries.ts:
--------------------------------------------------------------------------------
 1 | import { Side } from '../../../module/src/common/types'
 2 | import { query } from './dom'
 3 | 
 4 | function drawTopBoundary(distStr: string) {
 5 |     query('.boundary-top').forEach((elem) => {
 6 |         elem.style.top = distStr
 7 |         elem.style.height = distStr
 8 |         elem.style.marginTop = `-${distStr}`
 9 |     })
10 | }
11 | 
12 | function drawRightBoundary(distStr: string) {
13 |     query('.boundary-right').forEach((elem) => {
14 |         elem.style.right = distStr
15 |         elem.style.width = distStr
16 |         elem.style.marginRight = `-${distStr}`
17 |     })
18 | }
19 | 
20 | function drawBottomBoundary(distStr: string) {
21 |     query('.boundary-bottom').forEach((elem) => {
22 |         elem.style.bottom = distStr
23 |         elem.style.height = distStr
24 |         elem.style.marginBottom = `-${distStr}`
25 |     })
26 | }
27 | 
28 | function drawLeftBoundary(distStr: string) {
29 |     query('.boundary-left').forEach((elem) => {
30 |         elem.style.left = distStr
31 |         elem.style.width = distStr
32 |         elem.style.marginLeft = `-${distStr}`
33 |     })
34 | }
35 | 
36 | // Overlay a boundary line on the viewport when one is set by the user
37 | export function drawBound(side: Side | 'all', dist: number) {
38 |     const distStr = `${dist}px`
39 | 
40 |     switch (side) {
41 |         case 'top': {
42 |             drawTopBoundary(distStr)
43 |             break
44 |         }
45 | 
46 |         case 'right': {
47 |             drawRightBoundary(distStr)
48 |             break
49 |         }
50 | 
51 |         case 'bottom': {
52 |             drawBottomBoundary(distStr)
53 |             break
54 |         }
55 | 
56 |         case 'left': {
57 |             drawLeftBoundary(distStr)
58 |             break
59 |         }
60 | 
61 |         default: {
62 |             drawTopBoundary(distStr)
63 |             drawRightBoundary(distStr)
64 |             drawBottomBoundary(distStr)
65 |             drawLeftBoundary(distStr)
66 |             break
67 |         }
68 |     }
69 | }
70 | 


--------------------------------------------------------------------------------
/module/src/async/options.ts:
--------------------------------------------------------------------------------
 1 | import { AsyncConfig } from '../common/options.js'
 2 | import { determineRootMargin } from './rootMargin.js'
 3 | import { strictCallbackAndRootMargin } from './strictCallbackAndRootMargin.js'
 4 | 
 5 | /**
 6 |  * Generates the arguments for IntersectionObserver()
 7 |  *
 8 |  * Loose mode uses very large (but ultimately arbitrary) values for sides that should be ignored.
 9 |  *
10 |  * Strict mode calculates these values by measuring the screen and the target element, but that is costly and it
11 |  * seems very unlikely that these arbitrary values will produce inaccurate results for our purposes.
12 |  */
13 | export function getIntersectionObserverOptions(
14 |     mode: 'strict',
15 |     config: AsyncConfig,
16 |     resolve: (value: boolean | PromiseLike<boolean>) => void,
17 |     elem: HTMLElement,
18 | ): [callback: IntersectionObserverCallback, options: IntersectionObserverInit]
19 | export function getIntersectionObserverOptions(
20 |     mode: 'loose',
21 |     config: AsyncConfig,
22 |     resolve: (value: boolean | PromiseLike<boolean>) => void,
23 |     elem?: HTMLElement,
24 | ): [callback: IntersectionObserverCallback, options: IntersectionObserverInit]
25 | export function getIntersectionObserverOptions(
26 |     mode: 'strict' | 'loose',
27 |     config: AsyncConfig,
28 |     resolve: (value: boolean | PromiseLike<boolean>) => void,
29 |     elem?: HTMLElement,
30 | ) {
31 |     if (mode === 'strict' && elem) {
32 |         return strictCallbackAndRootMargin(elem, config, resolve)
33 |     }
34 | 
35 |     return [
36 |         (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
37 |             entries.forEach((entry) => {
38 |                 observer.disconnect()
39 |                 const { isIntersecting } = entry
40 | 
41 |                 resolve(isIntersecting)
42 |                 return
43 |             })
44 |         },
45 |         {
46 |             rootMargin: determineRootMargin(config, 'loose'),
47 |             root: config.container,
48 |             threshold: 1.0,
49 |         },
50 |     ]
51 | }
52 | 


--------------------------------------------------------------------------------
/.github/workflows/github-pages-static.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy Parcel site to Pages
 2 | 
 3 | on:
 4 |   # Runs on pushes targeting the default branch
 5 |   push:
 6 |     branches: ["main"]
 7 | 
 8 |   # Allows you to run this workflow manually from the Actions tab
 9 |   workflow_dispatch:
10 | 
11 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
12 | permissions:
13 |   contents: read
14 |   pages: write
15 |   id-token: write
16 | 
17 | # Allow one concurrent deployment
18 | concurrency:
19 |   group: "pages"
20 |   cancel-in-progress: true
21 | 
22 | jobs:
23 |   # Build job
24 |   build:
25 |     runs-on: ubuntu-latest
26 |     steps:
27 |       - name: Checkout
28 |         uses: actions/checkout@v3
29 |       - name: Detect package manager
30 |         id: detect-package-manager
31 |         run: |
32 |           if [ -f "${{ github.workspace }}/yarn.lock" ]; then
33 |             echo "manager=yarn" >> $GITHUB_OUTPUT
34 |             echo "command=install" >> $GITHUB_OUTPUT
35 |             echo "runner=yarn" >> $GITHUB_OUTPUT
36 |             exit 0
37 |           elif [ -f "${{ github.workspace }}/package.json" ]; then
38 |             echo "manager=npm" >> $GITHUB_OUTPUT
39 |             echo "command=ci" >> $GITHUB_OUTPUT
40 |             echo "runner=npx --no-install" >> $GITHUB_OUTPUT
41 |             exit 0
42 |           else
43 |             echo "Unable to determine packager manager"
44 |             exit 1
45 |           fi
46 |       - name: Setup Node
47 |         uses: actions/setup-node@v3
48 |         with:
49 |           node-version: "16"
50 |           cache: ${{ steps.detect-package-manager.outputs.manager }}
51 |       - name: Install dependencies
52 |         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
53 |       - name: Build with Parcel
54 |         run: ${{ steps.detect-package-manager.outputs.runner }} build
55 |       - name: Upload artifact
56 |         uses: actions/upload-pages-artifact@v1
57 |         with:
58 |           path: ./app/dist
59 | 
60 |   # Deployment job
61 |   deploy:
62 |     environment:
63 |       name: github-pages
64 |       url: ${{ steps.deployment.outputs.page_url }}
65 |     runs-on: ubuntu-latest
66 |     needs: build
67 |     steps:
68 |       - name: Deploy to GitHub Pages
69 |         id: deployment
70 |         uses: actions/deploy-pages@v1
71 | 


--------------------------------------------------------------------------------
/module/src/shortcuts.ts:
--------------------------------------------------------------------------------
 1 | import { withinViewportAsync } from './async/index.js'
 2 | import { withinViewport } from './sync/index.js'
 3 | 
 4 | /**
 5 |  * Shortcut methods for each side of the viewport
 6 |  */
 7 | /**
 8 |  * Test if an element is below the top edge of the viewport
 9 |  *
10 |  * @example `topAsync(elem)` is the same as `withinViewport(elem, 'top')`
11 |  */
12 | 
13 | export function top(element: HTMLElement): boolean {
14 |     return withinViewport(element, 'top')
15 | }
16 | /**
17 |  * Test if an element is within the right edge of the viewport
18 |  *
19 |  * @example `right(elem)` is the same as `withinViewport(elem, 'right')`
20 |  */
21 | 
22 | export function right(element: HTMLElement): boolean {
23 |     return withinViewport(element, 'right')
24 | }
25 | /**
26 |  * Test if an element is above the bottom edge of the viewport
27 |  *
28 |  * @example `bottom(elem)` is the same as `withinViewport(elem, 'bottom')`
29 |  */
30 | 
31 | export function bottom(element: HTMLElement): boolean {
32 |     return withinViewport(element, 'bottom')
33 | }
34 | /**
35 |  * Test if an element is within the left edge of the viewport
36 |  *
37 |  * @example `left(elem)` is the same as `withinViewport(elem, 'left')`
38 |  */
39 | 
40 | export function left(element: HTMLElement): boolean {
41 |     return withinViewport(element, 'left')
42 | }
43 | /**
44 |  * Test if an element is below the top edge of the viewport
45 |  *
46 |  * @example `topAsync(elem)` is the same as `withinViewportAsync(elem, 'top')`
47 |  */
48 | 
49 | export async function topAsync(element: HTMLElement): Promise<boolean> {
50 |     return await withinViewportAsync(element, 'top')
51 | }
52 | /**
53 |  * Test if an element is within the right edge of the viewport
54 |  *
55 |  * @example `rightAsync(elem)` is the same as `withinViewportAsync(elem, 'right')`
56 |  */
57 | 
58 | export async function rightAsync(element: HTMLElement): Promise<boolean> {
59 |     return withinViewportAsync(element, 'right')
60 | }
61 | /**
62 |  * Test if an element is above the bottom edge of the viewport
63 |  *
64 |  * @example `bottomAsync(elem)` is the same as `withinViewportAsync(elem, 'bottom')`
65 |  */
66 | 
67 | export async function bottomAsync(element: HTMLElement): Promise<boolean> {
68 |     return withinViewportAsync(element, 'bottom')
69 | }
70 | /**
71 |  * Test if an element is within the left edge of the viewport
72 |  *
73 |  * @example `leftAsync(elem)` is the same as `withinViewportAsync(elem, 'left')`
74 |  */
75 | 
76 | export async function leftAsync(element: HTMLElement): Promise<boolean> {
77 |     return withinViewportAsync(element, 'left')
78 | }
79 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "@patik/within-viewport",
 3 |     "description": "Determine whether an element is completely within the browser viewport",
 4 |     "version": "3.0.1",
 5 |     "private": true,
 6 |     "workspaces": [
 7 |         "module",
 8 |         "app"
 9 |     ],
10 |     "scripts": {
11 |         "dev": "yarn --cwd module tsc && yarn --cwd app dev",
12 |         "start": "yarn --cwd app start",
13 |         "start:ci": "yarn build && yarn --cwd app start",
14 |         "build": "yarn --cwd module build && yarn --cwd app build",
15 |         "clean": "git clean -fdx",
16 |         "cover": "yarn --cwd module test --collectCoverage",
17 |         "lint": "yarn workspaces run lint",
18 |         "preversion": "yarn workspaces run preversion",
19 |         "postversion": "git push && git push --tags",
20 |         "test": "yarn --cwd module test",
21 |         "cypress:open": "cypress open --project ./app",
22 |         "prepare": "husky install"
23 |     },
24 |     "devDependencies": {
25 |         "@jest/globals": "^29.6.1",
26 |         "@parcel/transformer-sass": "^2.11.0",
27 |         "@types/jest": "^29.5.5",
28 |         "@types/node": "20.5.0",
29 |         "@types/react": "18.2.46",
30 |         "@types/react-dom": "18.2.18",
31 |         "@typescript-eslint/eslint-plugin": "^5.62.0",
32 |         "@typescript-eslint/parser": "^5.62.0",
33 |         "cypress": "^12.17.1",
34 |         "eslint": "8.56.0",
35 |         "eslint-config-next": "13.5.1",
36 |         "eslint-config-prettier": "^9.1.0",
37 |         "eslint-plugin-cypress": "^2.15.2",
38 |         "eslint-plugin-jsx-a11y": "^6.8.0",
39 |         "eslint-plugin-node": "^11.1.0",
40 |         "eslint-plugin-prettier": "^5.0.0",
41 |         "husky": "^8.0.3",
42 |         "jest": "^29.7.0",
43 |         "prettier": "^3.2.5",
44 |         "shx": "^0.3.4",
45 |         "ts-jest": "^29.1.1",
46 |         "ts-node": "^10.9.1",
47 |         "ts-prune": "^0.10.3",
48 |         "typescript": "^5.5.2",
49 |         "unimported": "^1.31.1"
50 |     },
51 |     "repository": {
52 |         "type": "git",
53 |         "url": "https://github.com/patik/within-viewport.git"
54 |     },
55 |     "author": {
56 |         "name": "Craig Patik",
57 |         "email": "craig@patik.com",
58 |         "url": "https://patik.com"
59 |     },
60 |     "license": "BSD-3-Clause",
61 |     "keywords": [
62 |         "viewport",
63 |         "IntersectionObserver",
64 |         "window",
65 |         "DOM",
66 |         "visible",
67 |         "visibility",
68 |         "element",
69 |         "view",
70 |         "within-viewport",
71 |         "browser",
72 |         "detect",
73 |         "event",
74 |         "infinite-scroll",
75 |         "scroll"
76 |     ]
77 | }
78 | 


--------------------------------------------------------------------------------
/app/src/styles/_boxes.scss:
--------------------------------------------------------------------------------
 1 | $boxWidth: 18vw;
 2 | 
 3 | // Oversized container that holds the boxes
 4 | #box-container {
 5 |     background-color: #fff;
 6 |     z-index: 1;
 7 | 
 8 |     // The boxes that we're monitoring
 9 |     div {
10 |         border: 1px solid rgba(0, 51, 102, 1);
11 |         color: #444;
12 |         background-color: #ddd;
13 |         text-align: center;
14 |         transition: background-color 0.3s ease, color 0.3s ease;
15 |     }
16 | 
17 |     &.flex-vp {
18 |         display: flex;
19 |         flex-wrap: wrap;
20 |         min-width: calc(10 * $boxWidth + 21px);
21 | 
22 |         div {
23 |             display: flex;
24 |             flex: 1 0 $boxWidth;
25 |             justify-content: center;
26 |             align-content: center;
27 |             align-items: center;
28 | 
29 |             position: relative;
30 |             width: $boxWidth;
31 |             min-width: $boxWidth;
32 |             max-width: $boxWidth;
33 |             height: $boxWidth;
34 | 
35 |             transition: background-color 0.3s ease, color 0.3s ease;
36 | 
37 |             & > span:first-child {
38 |                 font-size: 1.2em;
39 | 
40 |                 @media screen and (max-width: 768px) {
41 |                     font-size: 1em;
42 |                 }
43 |             }
44 | 
45 |             & > span:last-child {
46 |                 font-size: 0.8em;
47 |                 position: absolute;
48 |                 bottom: 0;
49 |                 right: 5px;
50 | 
51 |                 @media screen and (max-width: 768px) {
52 |                     font-size: 0.6em;
53 |                 }
54 |             }
55 |         }
56 |     }
57 | 
58 |     &.no-flex-vp {
59 |         div {
60 |             float: left;
61 |             display: block;
62 |             border: 1px solid rgba(0, 51, 102, 1);
63 |             color: #444;
64 |             background-color: #ddd;
65 |             text-align: center;
66 |             transition: background-color 0.3s ease, color 0.3s ease;
67 |             position: relative;
68 | 
69 |             &:nth-child(11n) {
70 |                 clear: right;
71 |             }
72 | 
73 |             & > span {
74 |                 font-size: 1.2em;
75 |             }
76 | 
77 |             & > span + span {
78 |                 font-size: 0.6em;
79 |                 position: absolute;
80 |                 bottom: 0;
81 |                 right: 5px;
82 |                 line-height: 2em;
83 |             }
84 |         }
85 |     }
86 | 
87 |     // A box that's within the viewport
88 |     // Extra class needed for specificity only for `.no-flex` situations
89 |     .in-view,
90 |     &.no-flex-vp .in-view {
91 |         color: #ddd;
92 |         background-color: rgba(51, 102, 204, 1);
93 |     }
94 | }
95 | 


--------------------------------------------------------------------------------
/app/src/scripts/output.ts:
--------------------------------------------------------------------------------
 1 | import { Boundaries } from '../../../module/src/common/types'
 2 | import store from './store'
 3 | import { highlightElement } from 'prismjs'
 4 | import 'prismjs/themes/prism-okaidia.min.css'
 5 | 
 6 | /**
 7 |  * Exposes type annotations to an Object.keys array
 8 |  */
 9 | function objectKeysArray<T extends Record<string | number, unknown>>(
10 |     record: T,
11 | ): ((keyof T & string) | `${keyof T & number}`)[] {
12 |     return Object.keys(record)
13 | }
14 | 
15 | function getContainerName(elem: HTMLElement) {
16 |     return `my${elem.nodeName.charAt(0)}${elem.nodeName.slice(1).toLowerCase()}`
17 | }
18 | 
19 | type UserOptions = Partial<Boundaries & { container: string }>
20 | 
21 | // Cleanup some JSON stuff that wouldn't appear in regular JS
22 | function getCleanJson(options: UserOptions) {
23 |     return (
24 |         JSON.stringify(options, null, '\t')
25 | 
26 |             // Values in the `sides` array
27 |             .replace(/"(top|right|bottom|left)":/g, '$1:')
28 |             // Right-hand side property names
29 |             .replace(/"(sides|container|top|right|bottom|left)":/g, '$1:')
30 |             //
31 |             .replace(/"(top|right|bottom|left|ignore)"/g, `'$1'`)
32 |             // Container element's var name
33 |             .replace(/container:\s"(my\w+)"/g, `container: $1`)
34 |     )
35 | }
36 | 
37 | export function updateCodeOutput() {
38 |     const { boundaries, methodType, $codeOutput, containerForDOM } = store.getState()
39 |     const options: UserOptions = {}
40 | 
41 |     objectKeysArray(boundaries).forEach((side) => {
42 |         if (boundaries[side] !== 0) {
43 |             options[side] = boundaries[side]
44 |         }
45 |     })
46 | 
47 |     if (containerForDOM.nodeName !== 'BODY') {
48 |         options.container = getContainerName(containerForDOM)
49 |     }
50 | 
51 |     const methodName = `withinViewport${methodType === 'async' ? 'Async' : ''}`
52 |     let optionsText = ''
53 | 
54 |     if (objectKeysArray(options).length > 0) {
55 |         optionsText = `, ${getCleanJson(options)}`
56 |     }
57 | 
58 |     $codeOutput.innerHTML = `${methodName}(elem${optionsText})`
59 | 
60 |     highlightElement($codeOutput)
61 | }
62 | 
63 | export function updateBoundaryPreview() {
64 |     const { boundaries, $boundaryPreview } = store.getState()
65 | 
66 |     const options: UserOptions = {}
67 | 
68 |     objectKeysArray(boundaries).forEach((side) => {
69 |         if (boundaries[side] !== 0) {
70 |             options[side] = boundaries[side]
71 |         }
72 |     })
73 | 
74 |     if (objectKeysArray(options).length > 0) {
75 |         const text = getCleanJson(options)
76 |             // Remove opening and closing braces
77 |             .replace(/^\{|\}$/g, '')
78 |             // Add units to numbers
79 |             .replace(/(\d+)\b/g, '$1px')
80 |             // Remove quotes around 'ignore'
81 |             .replace(/'ignore'/g, 'ignore')
82 | 
83 |         $boundaryPreview.innerHTML = text
84 |     } else {
85 |         $boundaryPreview.innerHTML = `(defaults)`
86 |     }
87 | }
88 | 


--------------------------------------------------------------------------------
/module/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "withinviewport",
 3 |     "description": "Determine whether an element is completely within the browser viewport",
 4 |     "version": "3.0.1",
 5 |     "type": "module",
 6 |     "repository": {
 7 |         "type": "git",
 8 |         "url": "https://github.com/patik/within-viewport.git"
 9 |     },
10 |     "devDependencies": {
11 |         "@testing-library/dom": "^9.3.1",
12 |         "@testing-library/jest-dom": "^6.4.2",
13 |         "eslint-config-prettier": "^9.1.0",
14 |         "eslint-plugin-cypress": "^2.15.2",
15 |         "eslint-plugin-jest-dom": "^5.1.0",
16 |         "jest": "^29.7.0",
17 |         "jest-environment-jsdom": "^29.7.0"
18 |     },
19 |     "dependencies": {},
20 |     "bugs": {
21 |         "url": "https://github.com/patik/within-viewport/issues"
22 |     },
23 |     "homepage": "https://github.com/patik/within-viewport",
24 |     "exports": {
25 |         ".": {
26 |             "import": {
27 |                 "types": "./dist/esm/index.d.ts",
28 |                 "default": "./dist/esm/index.js"
29 |             },
30 |             "require": {
31 |                 "types": "./dist/cjs/index.d.ts",
32 |                 "default": "./dist/cjs/index.js"
33 |             }
34 |         }
35 |     },
36 |     "types": "./dist/cjs/index.d.ts",
37 |     "main": "./dist/cjs/index.js",
38 |     "module": "./dist/esm/index.js",
39 |     "files": [
40 |         "./dist/"
41 |     ],
42 |     "scripts": {
43 |         "build": "yarn build-commonjs && yarn build-esm && yarn addcjstype && yarn addesmtype",
44 |         "build-commonjs": "shx rm -rf dist/cjs/* && yarn tsc --project ./tsconfig.cjs.json && shx cp ../README.md ./README.md && shx cp ../LICENSE ./LICENSE",
45 |         "build-esm": "shx rm -rf dist/esm/* && yarn tsc --project ./tsconfig.esm.json && shx cp ../README.md ./README.md && shx cp ../LICENSE ./LICENSE",
46 |         "clean": "git clean -fdx",
47 |         "cover": "yarn test --collectCoverage",
48 |         "typecheck": "tsc --noEmit",
49 |         "code-lint": "eslint --ext .ts --fix ./src/**/*.ts",
50 |         "lint": "yarn typecheck && yarn run code-lint && yarn unused-exports",
51 |         "preversion": "yarn build && yarn cover",
52 |         "test": "yarn jest --coverage",
53 |         "unused-exports": "unimported --no-cache",
54 |         "cypress:open": "cypress open",
55 |         "addcjstype": "shx cat >dist/cjs/package.json <<!EOF\n{\n    \"type\": \"commonjs\"\n}\n!EOF",
56 |         "addesmtype": "shx cat >dist/esm/package.json <<!EOF\n{\n    \"type\": \"module\"\n}\n!EOF"
57 |     },
58 |     "keywords": [
59 |         "viewport",
60 |         "IntersectionObserver",
61 |         "window",
62 |         "DOM",
63 |         "visible",
64 |         "visibility",
65 |         "element",
66 |         "view",
67 |         "within-viewport",
68 |         "browser",
69 |         "detect",
70 |         "event",
71 |         "infinite-scroll",
72 |         "scroll"
73 |     ],
74 |     "author": {
75 |         "name": "Craig Patik",
76 |         "email": "craig@patik.com",
77 |         "url": "https://patik.com"
78 |     },
79 |     "license": "BSD-3-Clause",
80 |     "lint-staged": {
81 |         "*.ts": "eslint --cache --cache-location .eslintcache --fix"
82 |     },
83 |     "engines": {
84 |         "node": ">=12.0"
85 |     }
86 | }
87 | 


--------------------------------------------------------------------------------
/app/src/styles/_control-panel.scss:
--------------------------------------------------------------------------------
  1 | /* Floating intro and controls window */
  2 | 
  3 | .control-panel {
  4 |     $padding: 0.75em;
  5 |     $width: 500px;
  6 |     $verticalMargin: 3em;
  7 | 
  8 |     position: fixed;
  9 |     top: $verticalMargin;
 10 | 
 11 |     max-width: 500px;
 12 |     max-height: calc(100vh - $verticalMargin - $verticalMargin);
 13 |     overflow: scroll;
 14 | 
 15 |     padding: $padding;
 16 | 
 17 |     // Center it
 18 |     left: 50%;
 19 |     margin-left: calc(-1 * ($width / 2 + $padding + $padding));
 20 | 
 21 |     @media screen and (max-width: 768px) {
 22 |         max-width: 100vw;
 23 |         margin: 0;
 24 |         left: 0;
 25 |     }
 26 | 
 27 |     background-color: white;
 28 |     opacity: 1;
 29 |     border: 1px solid rgba(51, 102, 204, 0.5);
 30 |     border-radius: 4px;
 31 |     box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
 32 |     transition: all 0.3s ease;
 33 |     z-index: 3;
 34 | 
 35 |     &.collapsed {
 36 |         opacity: 0.5;
 37 | 
 38 |         @media screen and (max-width: 768px) {
 39 |             max-width: 60vw;
 40 |             margin: 0 auto;
 41 |             left: 0;
 42 |             right: 0;
 43 |         }
 44 |     }
 45 | }
 46 | 
 47 | #toggler {
 48 |     position: absolute;
 49 |     top: 0;
 50 |     right: 0;
 51 | }
 52 | 
 53 | :not(.shown-while-collapsed) {
 54 |     .collapsed & {
 55 |         display: none;
 56 |     }
 57 | }
 58 | 
 59 | form {
 60 |     margin: 0 0 1em 0;
 61 |     border: 1px solid rgba(51, 102, 204, 0.07);
 62 |     background-color: rgba(51, 102, 204, 0.04);
 63 |     border-radius: 3px;
 64 | }
 65 | 
 66 | fieldset {
 67 |     border: none;
 68 |     margin: 0;
 69 |     padding: 0;
 70 | }
 71 | 
 72 | .form-wrapper {
 73 |     display: flex;
 74 |     padding: 1em;
 75 | }
 76 | 
 77 | .form-name {
 78 |     margin-right: 1em;
 79 | }
 80 | 
 81 | .form-field {
 82 |     flex-grow: 1;
 83 | }
 84 | 
 85 | .boundary-form {
 86 |     padding: 1em;
 87 | 
 88 |     input[type='number'] {
 89 |         width: 4em;
 90 |     }
 91 | 
 92 |     .independent-sides-wrapper div {
 93 |         text-align: center;
 94 |     }
 95 | 
 96 |     fieldset {
 97 |         padding: 0;
 98 |     }
 99 | }
100 | 
101 | .boundary-item {
102 |     display: flex;
103 |     align-items: center;
104 |     padding: 1em;
105 |     margin-bottom: 1em;
106 |     background-color: rgba(51, 102, 204, 0.06);
107 |     border-radius: 3px;
108 | 
109 |     .boundary-item-name {
110 |         flex-shrink: 1;
111 |         flex-basis: 4em;
112 |     }
113 | 
114 |     .boundary-item-threshold {
115 |         flex-grow: 1;
116 | 
117 |         label {
118 |             font-size: 0.8em;
119 |         }
120 |     }
121 | 
122 |     .boundary-item-ignorw {
123 |         flex-shrink: 1;
124 |     }
125 | }
126 | 
127 | details {
128 |     & > summary {
129 |         cursor: pointer;
130 | 
131 |         .boundary-preview {
132 |             font-size: 0.8em;
133 |             margin-left: 1em;
134 |             padding: 0.5em;
135 |         }
136 | 
137 |         legend {
138 |             display: inline;
139 |         }
140 |     }
141 | 
142 |     &[open] > summary {
143 |         margin-bottom: 1em;
144 |     }
145 | }
146 | 
147 | .code-output {
148 |     padding: 0.5em;
149 | }
150 | 
151 | hr {
152 |     border-color: rgba(51, 102, 204, 0.1);
153 | }
154 | 


--------------------------------------------------------------------------------
/module/src/common/options.ts:
--------------------------------------------------------------------------------
  1 | import { Config, MultipleSides, Side, UserOptions } from './types.js'
  2 | import { isSide, isMultipleSides, sides } from './sides.js'
  3 | 
  4 | export type SyncConfig = {
  5 |     container: HTMLElement | Window
  6 | } & {
  7 |     [b in Side]: number | 'ignore'
  8 | }
  9 | 
 10 | export type AsyncConfig = {
 11 |     container: HTMLElement | Document
 12 | } & {
 13 |     [b in Side]: number | 'ignore'
 14 | }
 15 | 
 16 | /**
 17 |  * Combines user options with default settings to produce a complete configuration object
 18 |  *
 19 |  * Reason for overloading: basically, the async method cannot work with `container:window`, and the sync method cannot work with `container:document`, and I want each of those methods to receive the correct types, so each overload has a different return type.
 20 |  */
 21 | export function getConfig(
 22 |     methodType: 'sync',
 23 |     elem: HTMLElement,
 24 |     userOptions?: Side | MultipleSides | Partial<UserOptions>,
 25 | ): SyncConfig
 26 | export function getConfig(
 27 |     methodType: 'async',
 28 |     elem: HTMLElement,
 29 |     userOptions?: Side | MultipleSides | Partial<UserOptions>,
 30 | ): AsyncConfig
 31 | export function getConfig(
 32 |     methodType: 'sync' | 'async',
 33 |     elem: HTMLElement,
 34 |     userOptions?: Side | MultipleSides | Partial<UserOptions>,
 35 | ) {
 36 |     // Don't bother running in non-browser environments
 37 |     if (typeof window === 'undefined') {
 38 |         return
 39 |     }
 40 | 
 41 |     if (typeof elem !== 'object' || (elem && 'nodeType' in elem && elem.nodeType !== 1)) {
 42 |         throw new Error('First argument must be an element')
 43 |     }
 44 | 
 45 |     const defaultSettings = {
 46 |         container: window,
 47 |         top: 0,
 48 |         right: 0,
 49 |         bottom: 0,
 50 |         left: 0,
 51 |     }
 52 | 
 53 |     let settings: Config
 54 | 
 55 |     // Settings argument may be a simple string (`top`, `right`, etc)
 56 |     if (isSide(userOptions)) {
 57 |         settings = {
 58 |             ...defaultSettings,
 59 |         }
 60 | 
 61 |         // Ignore all the other sides
 62 |         sides.forEach((side) => {
 63 |             if (side !== userOptions) {
 64 |                 settings[side] = 'ignore'
 65 |             }
 66 |         })
 67 |     } else if (isMultipleSides(userOptions)) {
 68 |         settings = {
 69 |             ...defaultSettings,
 70 |         }
 71 | 
 72 |         // Ignore all the other sides
 73 |         sides.forEach((side) => {
 74 |             if (!userOptions.split(' ').includes(side)) {
 75 |                 settings[side] = 'ignore'
 76 |             }
 77 |         })
 78 |     } else {
 79 |         settings = Object.assign({}, defaultSettings, userOptions)
 80 |     }
 81 | 
 82 |     // Build configuration from defaults and user-provided settings and metadata
 83 |     const config: Config = Object.assign({}, defaultSettings, settings)
 84 | 
 85 |     // Use the window as the container if the user specified the body or a non-element
 86 |     if (
 87 |         config.container === document.body ||
 88 |         (config.container && 'nodeName' in config.container && config.container.nodeName === 'BODY') ||
 89 |         (config.container && 'nodeType' in config.container && config.container.nodeType !== 1)
 90 |     ) {
 91 |         config.container = methodType === 'sync' ? window : document
 92 |     }
 93 |     // For the asynchronous method, the container cannot be the window
 94 |     else if (methodType === 'async' && config.container === window) {
 95 |         config.container = document
 96 |     }
 97 | 
 98 |     return config
 99 | }
100 | 


--------------------------------------------------------------------------------
/app/cypress/e2e/basic.cy.ts:
--------------------------------------------------------------------------------
 1 | const baseUrl = `http://localhost:1234`
 2 | 
 3 | export {}
 4 | ;['async', 'sync'].forEach((method) => {
 5 |     describe(`Basic rendering`, () => {
 6 |         before(() => {
 7 |             cy.visit(baseUrl)
 8 | 
 9 |             // Open the form and select the correct method
10 |             cy.get('.boundary-form details').click()
11 | 
12 |             cy.get(`#method-${method}`).scrollIntoView().check()
13 | 
14 |             // Close the form again so the tests start with a fresh state
15 |             cy.get('.boundary-form details').click()
16 |         })
17 | 
18 |         describe(`${method} method`, () => {
19 |             it('Renders the page', () => {
20 |                 cy.visit(baseUrl)
21 | 
22 |                 cy.get('#box-container > div').should('have.length.at.least', 100)
23 | 
24 |                 // Has some that are considered in view, and some that are out
25 |                 cy.get('#box-container [aria-hidden="true"]').should('have.length.at.least', 10)
26 |                 cy.get('#box-container [aria-hidden="false"]').should('have.length.at.least', 10)
27 |             })
28 | 
29 |             it('Updates the boxes when scrolling down', () => {
30 |                 cy.visit(baseUrl)
31 | 
32 |                 let inViewCount = 0
33 |                 let outOfViewCount = 0
34 | 
35 |                 cy.get('#box-container [aria-hidden="true"]')
36 |                     .then(($elem) => {
37 |                         outOfViewCount = $elem.length
38 |                     })
39 |                     .then(() => {
40 |                         cy.get('#box-container [aria-hidden="false"]')
41 |                             .then(($elem) => {
42 |                                 inViewCount = $elem.length
43 |                             })
44 |                             .then(() => {
45 |                                 // Scroll down just enough for some boxes to become out of view
46 |                                 cy.scrollTo(0, 10)
47 | 
48 |                                 // Now there should be fewer boxes in view
49 |                                 cy.get('#box-container [aria-hidden="false"]').should('have.length.below', inViewCount)
50 | 
51 |                                 // And there should be more boxes out of view
52 |                                 cy.get('#box-container [aria-hidden="true"]').should(
53 |                                     'have.length.above',
54 |                                     outOfViewCount,
55 |                                 )
56 |                             })
57 |                     })
58 |             })
59 | 
60 |             it('Updates the boxes when scrolling right', () => {
61 |                 cy.visit(baseUrl)
62 | 
63 |                 let inViewCount = 0
64 |                 let outOfViewCount = 0
65 | 
66 |                 cy.get('#box-container [aria-hidden="true"]')
67 |                     .then(($elem) => {
68 |                         outOfViewCount = $elem.length
69 |                     })
70 |                     .then(() => {
71 |                         cy.get('#box-container [aria-hidden="false"]')
72 |                             .then(($elem) => {
73 |                                 inViewCount = $elem.length
74 |                             })
75 |                             .then(() => {
76 |                                 // Scroll down just enough for some boxes to become out of view
77 |                                 cy.scrollTo(10, 0)
78 | 
79 |                                 // Now there should be fewer boxes in view
80 |                                 cy.get('#box-container [aria-hidden="false"]').should('have.length.below', inViewCount)
81 | 
82 |                                 // And there should be more boxes out of view
83 |                                 cy.get('#box-container [aria-hidden="true"]').should(
84 |                                     'have.length.above',
85 |                                     outOfViewCount,
86 |                                 )
87 |                             })
88 |                     })
89 |             })
90 |         })
91 |     })
92 | })
93 | 


--------------------------------------------------------------------------------
/module/src/jquery/plugin.js:
--------------------------------------------------------------------------------
  1 | /* global withinviewport */
  2 | /* eslint-disable @typescript-eslint/no-extra-semi */
  3 | 
  4 | /**
  5 |  * Within Viewport jQuery Plugin
  6 |  *
  7 |  * @description Companion plugin for withinviewport.js - determines whether an element is completely within the browser viewport
  8 |  * @author      Craig Patik, https://patik.com/
  9 |  * @version     3.0.1
 10 |  */
 11 | const setup = function ($) {
 12 |     /**
 13 |      * $.withinviewport()
 14 |      * @description          jQuery method
 15 |      * @param  {Object}      [settings] optional settings
 16 |      * @return {Collection}  Contains all elements that were within the viewport
 17 |      */
 18 |     $.fn.withinviewport = function (settings) {
 19 |         var opts
 20 |         var elems
 21 | 
 22 |         if (typeof settings === 'string') {
 23 |             settings = {
 24 |                 sides: settings,
 25 |             }
 26 |         }
 27 | 
 28 |         opts = $.extend({}, settings, {
 29 |             sides: 'all',
 30 |         })
 31 |         elems = []
 32 | 
 33 |         this.each(function () {
 34 |             if (withinviewport(this, opts)) {
 35 |                 elems.push(this)
 36 |             }
 37 |         })
 38 | 
 39 |         return $(elems)
 40 |     }
 41 | 
 42 |     // Main custom selector
 43 |     $.extend($.expr[':'], {
 44 |         'within-viewport': function (element) {
 45 |             return withinviewport(element, 'all')
 46 |         },
 47 |     })
 48 | 
 49 |     /**
 50 |      * Optional enhancements and shortcuts
 51 |      *
 52 |      * @description Uncomment or comment these pieces as they apply to your project and coding preferences
 53 |      */
 54 | 
 55 |     // Shorthand jQuery methods
 56 | 
 57 |     $.fn.withinviewporttop = function (settings) {
 58 |         var opts
 59 |         var elems
 60 | 
 61 |         if (typeof settings === 'string') {
 62 |             settings = {
 63 |                 sides: settings,
 64 |             }
 65 |         }
 66 | 
 67 |         opts = $.extend({}, settings, {
 68 |             sides: 'top',
 69 |         })
 70 |         elems = []
 71 | 
 72 |         this.each(function () {
 73 |             if (withinviewport(this, opts)) {
 74 |                 elems.push(this)
 75 |             }
 76 |         })
 77 | 
 78 |         return $(elems)
 79 |     }
 80 | 
 81 |     $.fn.withinviewportright = function (settings) {
 82 |         var opts
 83 |         var elems
 84 | 
 85 |         if (typeof settings === 'string') {
 86 |             settings = {
 87 |                 sides: settings,
 88 |             }
 89 |         }
 90 | 
 91 |         opts = $.extend({}, settings, {
 92 |             sides: 'right',
 93 |         })
 94 |         elems = []
 95 | 
 96 |         this.each(function () {
 97 |             if (withinviewport(this, opts)) {
 98 |                 elems.push(this)
 99 |             }
100 |         })
101 | 
102 |         return $(elems)
103 |     }
104 | 
105 |     $.fn.withinviewportbottom = function (settings) {
106 |         var opts
107 |         var elems
108 | 
109 |         if (typeof settings === 'string') {
110 |             settings = {
111 |                 sides: settings,
112 |             }
113 |         }
114 | 
115 |         opts = $.extend({}, settings, {
116 |             sides: 'bottom',
117 |         })
118 |         elems = []
119 | 
120 |         this.each(function () {
121 |             if (withinviewport(this, opts)) {
122 |                 elems.push(this)
123 |             }
124 |         })
125 | 
126 |         return $(elems)
127 |     }
128 | 
129 |     $.fn.withinviewportleft = function (settings) {
130 |         var opts
131 |         var elems
132 | 
133 |         if (typeof settings === 'string') {
134 |             settings = {
135 |                 sides: settings,
136 |             }
137 |         }
138 | 
139 |         opts = $.extend({}, settings, {
140 |             sides: 'left',
141 |         })
142 |         elems = []
143 | 
144 |         this.each(function () {
145 |             if (withinviewport(this, opts)) {
146 |                 elems.push(this)
147 |             }
148 |         })
149 | 
150 |         return $(elems)
151 |     }
152 | 
153 |     // Custom jQuery selectors
154 |     $.extend($.expr[':'], {
155 |         'within-viewport-top': function (element) {
156 |             return withinviewport(element, 'top')
157 |         },
158 |         'within-viewport-right': function (element) {
159 |             return withinviewport(element, 'right')
160 |         },
161 |         'within-viewport-bottom': function (element) {
162 |             return withinviewport(element, 'bottom')
163 |         },
164 |         'within-viewport-left': function (element) {
165 |             return withinviewport(element, 'left')
166 |         },
167 |         // Example custom selector:
168 |         //,
169 |         // 'within-viewport-top-left-45': function (element) {
170 |         //     return withinviewport(element, {sides:'top left', top: 45, left: 45});
171 |         // }
172 |     })
173 | }
174 | 
175 | if (typeof module === 'object') {
176 |     module.exports = setup
177 | }
178 | 
179 | export default setup
180 | 


--------------------------------------------------------------------------------
/app/src/scripts/boxes.ts:
--------------------------------------------------------------------------------
  1 | import { cloneDeep, debounce } from 'lodash'
  2 | import { withinViewportAsync } from '../../../module/src/async/index'
  3 | import { withinViewport } from '../../../module/src/sync/index'
  4 | import { query } from './dom'
  5 | import store from './store'
  6 | 
  7 | // To reduce fragmentation, lump browses into two groups: those that support both flexbox and viewport units, and those that do not
  8 | const canUseFlexAndVPUnits = (function () {
  9 |     const areViewportUnitsSupported = (function () {
 10 |         try {
 11 |             const div = document.createElement('div')
 12 | 
 13 |             div.style.width = '50vw'
 14 |             document.body.appendChild(div)
 15 | 
 16 |             const elemWidth = parseInt(getComputedStyle(div, null).width, 10)
 17 |             const halfWidth = parseInt(String(window.innerWidth / 2), 10)
 18 | 
 19 |             return elemWidth === halfWidth
 20 |         } catch (e) {
 21 |             console.error('Error when determining if the client supports viewport units: ', e)
 22 |             return false
 23 |         }
 24 |     })()
 25 | 
 26 |     const isFlexboxSupported = document.createElement('p').style.flex === ''
 27 | 
 28 |     return isFlexboxSupported && areViewportUnitsSupported
 29 | })()
 30 | 
 31 | function determineBoxWidth() {
 32 |     if (canUseFlexAndVPUnits) {
 33 |         return '18vw'
 34 |     }
 35 | 
 36 |     let boxWidth = 20
 37 | 
 38 |     // Make sure the demo will be wider than the device's screen so that vertical scroll bars appear
 39 |     //    but not so wide that you can't see at least four on screen at a time with a maximized browser window
 40 |     if (screen.width >= screen.height) {
 41 |         // Screen is wide/landscape
 42 |         boxWidth = parseInt(String((screen.width + 400) / 10), 10)
 43 |     } else {
 44 |         boxWidth = parseInt(String((screen.height + 400) / 10), 10)
 45 |     }
 46 | 
 47 |     return `${boxWidth}px`
 48 | }
 49 | 
 50 | export function createBoxHtml() {
 51 |     const boxCount = 200
 52 |     let boxHTML = ''
 53 |     const boxWidth = determineBoxWidth()
 54 | 
 55 |     // Add a container and put the boxes inside
 56 |     const boxContainer = document.createElement('div')
 57 | 
 58 |     if (canUseFlexAndVPUnits) {
 59 |         let i = 0
 60 |         // Generate boxes which will each be tested for their viewport within-ness
 61 |         while (i < boxCount) {
 62 |             boxHTML += `<div data-boxid="${i}">&nbsp;</div>`
 63 |             i++
 64 |         }
 65 | 
 66 |         boxContainer.classList.add('flex-vp')
 67 |     } else {
 68 |         let i = 0
 69 |         while (i < boxCount) {
 70 |             // Set the styles so everything is nice and proportional to this device's screen
 71 |             boxHTML += `<div data-boxid="${i}" style="width: ${boxWidth}; height: ${boxWidth}; line-height: ${boxWidth};">&nbsp;</div>`
 72 |             i++
 73 |         }
 74 | 
 75 |         boxContainer.classList.add('no-flex-vp')
 76 |         boxContainer.style.cssText = `width: ${parseInt(boxWidth, 10) * 10 + 20}px;`
 77 |     }
 78 | 
 79 |     boxContainer.innerHTML = boxHTML
 80 |     boxContainer.id = 'box-container'
 81 |     boxContainer.tabIndex = 0 // Make it focusable for Cypress tests
 82 | 
 83 |     store.getState().containerForDOM.appendChild(boxContainer)
 84 | 
 85 |     store.setState({
 86 |         $boxes: query('div', boxContainer),
 87 |     })
 88 | 
 89 |     // Update the <div>s for the first time
 90 |     updateBoxes()
 91 | }
 92 | 
 93 | function setBoxIsIn(box: HTMLElement) {
 94 |     box.innerHTML = `<span>in</span><span>${box.getAttribute('data-boxid') ?? ''}</span>`
 95 |     box.setAttribute('aria-hidden', 'false')
 96 |     box.classList.add('in-view')
 97 |     box.classList.remove('out-of-view')
 98 | }
 99 | 
100 | function setBoxIsOut(box: HTMLElement) {
101 |     box.innerHTML = `<span>out</span><span>${box.getAttribute('data-boxid') ?? ''}</span>`
102 |     box.setAttribute('aria-hidden', 'true')
103 |     box.classList.remove('in-view')
104 |     box.classList.add('out-of-view')
105 | }
106 | 
107 | // Update each box's class to reflect whether it was determined to be within the viewport or not
108 | export const updateBoxes = debounce(
109 |     function () {
110 |         const { boundaries, methodType, $boxes, containerForDOM } = store.getState()
111 |         const options = cloneDeep({
112 |             ...boundaries,
113 |             container: containerForDOM,
114 |         })
115 | 
116 |         if (methodType === 'async') {
117 |             $boxes.forEach((box) => {
118 |                 withinViewportAsync(box, options).then((result) => {
119 |                     if (result) {
120 |                         setBoxIsIn(box)
121 |                     } else {
122 |                         setBoxIsOut(box)
123 |                     }
124 |                 })
125 |             })
126 |         } else {
127 |             $boxes.forEach((box) => {
128 |                 if (withinViewport(box, options)) {
129 |                     setBoxIsIn(box)
130 |                 } else {
131 |                     setBoxIsOut(box)
132 |                 }
133 |             })
134 |         }
135 |     },
136 |     // This is kind of a bullshit value for debouncing, but it helps with Cypress tests. When DOM events fire rapidly and often, it can lead to many overlapping calls to this function, and the last call might not necessarily have the most up to date options.
137 |     0,
138 | )
139 | 


--------------------------------------------------------------------------------
/module/src/sync/index.ts:
--------------------------------------------------------------------------------
  1 | import { getConfig } from '../common/options.js'
  2 | import { sides } from '../common/sides.js'
  3 | import { MultipleSides, Side, UserOptions } from '../common/types.js'
  4 | 
  5 | declare global {
  6 |     interface Window {
  7 |         scrollTop: HTMLElement['scrollTop']
  8 |         scrollLeft: HTMLElement['scrollLeft']
  9 |         getBoundingClientRect: HTMLElement['getBoundingClientRect']
 10 |     }
 11 | }
 12 | 
 13 | /**
 14 |  * Determines whether an element is within the viewport
 15 |  * @param  {Object}  elem           DOM Element (required)
 16 |  * @param  {Object}  userOptions    Optional settings
 17 |  * @return {Boolean}                Whether the element was completely within the viewport
 18 |  */
 19 | export function withinViewport(elem: HTMLElement, userOptions?: Side | MultipleSides | Partial<UserOptions>): boolean {
 20 |     let containerBoundingRect: DOMRect
 21 |     let containerScrollTop = 0
 22 |     let containerScrollLeft = 0
 23 |     const scrollBarWidths = [0, 0]
 24 | 
 25 |     const config = getConfig('sync', elem, userOptions)
 26 |     const isContainerTheWindow = config.container === window
 27 | 
 28 |     // Get the element's bounding rectangle with respect to the viewport
 29 |     const elemBoundingRect = elem.getBoundingClientRect()
 30 | 
 31 |     // Get viewport dimensions and offsets
 32 |     if (config.container === window) {
 33 |         containerBoundingRect = document.documentElement.getBoundingClientRect()
 34 |         containerScrollTop = document.body.scrollTop
 35 |         containerScrollLeft = window.scrollX || document.body.scrollLeft
 36 |     } else if (config.container && config.container !== window) {
 37 |         containerBoundingRect = config.container.getBoundingClientRect()
 38 |         containerScrollTop = config.container.scrollTop
 39 |         containerScrollLeft = config.container.scrollLeft
 40 |     }
 41 | 
 42 |     // Don't count the space consumed by scrollbars
 43 |     if (containerScrollLeft) {
 44 |         scrollBarWidths[0] = 18
 45 |     }
 46 | 
 47 |     if (containerScrollTop) {
 48 |         scrollBarWidths[1] = 16
 49 |     }
 50 | 
 51 |     // Element testing methods
 52 |     const isWithin = {
 53 |         // Element is below the top edge of the viewport
 54 |         top() {
 55 |             if (config.top === 'ignore') {
 56 |                 return true
 57 |             }
 58 | 
 59 |             if (isContainerTheWindow) {
 60 |                 return elemBoundingRect.top >= config.top
 61 |             }
 62 | 
 63 |             return (
 64 |                 elemBoundingRect.top >=
 65 |                 containerScrollTop - (containerScrollTop - containerBoundingRect.top) + config.top
 66 |             )
 67 |         },
 68 | 
 69 |         // Element is to the left of the right edge of the viewport
 70 |         right() {
 71 |             if (config.right === 'ignore') {
 72 |                 return true
 73 |             }
 74 | 
 75 |             // Note that `elemBoundingRect.right` is the distance from the *left* of the viewport to the element's far right edge
 76 | 
 77 |             if (isContainerTheWindow) {
 78 |                 return elemBoundingRect.right <= containerBoundingRect.right + containerScrollLeft - config.right
 79 |             }
 80 | 
 81 |             return elemBoundingRect.right <= containerBoundingRect.right - scrollBarWidths[0] - config.right
 82 |         },
 83 | 
 84 |         // Element is above the bottom edge of the viewport
 85 |         bottom() {
 86 |             if (config.bottom === 'ignore') {
 87 |                 return true
 88 |             }
 89 | 
 90 |             let containerHeight = 0
 91 | 
 92 |             if (config.container === window) {
 93 |                 // FIXME
 94 |                 containerHeight = config.container.innerHeight
 95 |             } else {
 96 |                 containerHeight = containerBoundingRect.bottom
 97 |             }
 98 | 
 99 |             // Note that `elemBoundingRect.bottom` is the distance from the *top* of the viewport to the element's bottom edge
100 |             return elemBoundingRect.bottom <= containerHeight - scrollBarWidths[1] - config.bottom
101 |         },
102 | 
103 |         // Element is to the right of the left edge of the viewport
104 |         left() {
105 |             if (config.left === 'ignore') {
106 |                 return true
107 |             }
108 | 
109 |             if (isContainerTheWindow) {
110 |                 return elemBoundingRect.left >= config.left
111 |             }
112 | 
113 |             return (
114 |                 elemBoundingRect.left >=
115 |                 containerScrollLeft - (containerScrollLeft - containerBoundingRect.left) + config.left
116 |             )
117 |         },
118 | 
119 |         // Element is within all four boundaries
120 |         all() {
121 |             // Test each boundary in order of efficiency and likeliness to be false. This way we can avoid running all four functions on most elements.
122 |             //     1. Top: Quickest to calculate + most likely to be false
123 |             //     2. Bottom: Not quite as quick to calculate, but also very likely to be false
124 |             //     3-4. Left and right are both equally unlikely to be false since most sites only scroll vertically, but left is faster to calculate
125 |             return isWithin.top() && isWithin.bottom() && isWithin.left() && isWithin.right()
126 |         },
127 |     }
128 | 
129 |     // Test the element against each side of the viewport that was requested
130 |     return sides.every((side) => isWithin[side]())
131 | }
132 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Within Viewport
  2 | 
  3 | ***Determine whether elements are completely within the viewport***
  4 | 
  5 | Includes:
  6 | 
  7 | - The synchronous function, `withinViewport()`
  8 |   - Continues to support [legacy browsers](#browser-support)
  9 | - The asynchronous, promise-based function, `withinViewportAsync()`
 10 |   - More performant, but only for [modern browsers](https://caniuse.com/intersectionobserver) (e.g. post IE 11)
 11 | - Optional jQuery plugin with handy selectors and shorthand methods
 12 | - TypeScript support
 13 | - Support for CommonJS and ESM modules
 14 | 
 15 | All of the above offer the same features.
 16 | 
 17 | ## Install
 18 | 
 19 | ```sh
 20 | yarn add withinviewport
 21 | ```
 22 | 
 23 | or
 24 | 
 25 | ```sh
 26 | npm install withinviewport
 27 | ```
 28 | 
 29 | And then in your JavaScript or TypeScript:
 30 | 
 31 | ```js
 32 | import { withinViewport /* or withinViewportAsync */ } from 'withinviewport'
 33 | ```
 34 | 
 35 | Both CommonJS and ESM modules are provided.
 36 | 
 37 | ## Usage
 38 | 
 39 | ### Basic
 40 | 
 41 | ```js
 42 | // Returns true if the element is entirely within view of the window
 43 | const elem = document.getElementById('#myElement')
 44 | 
 45 | withinViewport(elem) // returns a boolean
 46 | withinViewportAsync(elem) // returns a Promise<boolean>
 47 | ```
 48 | 
 49 | ### Advanced
 50 | 
 51 | All options work the same for both the synchronous and asynchronous functions.
 52 | 
 53 | ```js
 54 | // Test against only some sides of the window for faster performance
 55 | withinViewport(elem, { left: 'ignore' })
 56 | ```
 57 | 
 58 | ```js
 59 | // Pick another element to act as the viewport (instead of `window`)
 60 | withinViewport(elem, { container: document.getElementById('myElem') })
 61 | ```
 62 | 
 63 | ```js
 64 | // Define your own viewport crop by specifying thresholds for each side
 65 | // Example: element is at least 12px inside the top and right of the viewport
 66 | withinViewport(elem, { top: 12, right: 12 })
 67 | ```
 68 | 
 69 | For more options, see [Options](#options) section below.
 70 | 
 71 | ### Shorthand notation
 72 | 
 73 | ```js
 74 | // This will only check the bottom and right of the viewport, ignoring the top and left
 75 | withinViewport(elem, 'bottom right')
 76 | left(elem)
 77 | ```
 78 | 
 79 | ## jQuery plugin
 80 | 
 81 | Be sure to include the full version of the script as well
 82 | 
 83 | ```js
 84 | <script src="withinviewport.js"></script>
 85 | <script src="jquery.js"></script>
 86 | <script src="jquery.withinviewport.js"></script>
 87 | ```
 88 | 
 89 | ### Basic usage
 90 | 
 91 | ```js
 92 | // Returns true if the element is entirely within the viewport
 93 | $('#myElement').is(':within-viewport')
 94 | ```
 95 | 
 96 | ```js
 97 | // Returns a jQuery object of all <div>s that are within the viewport
 98 | $('div').withinViewport()
 99 | ```
100 | 
101 | ### Advanced usage
102 | 
103 | There are shorthand selectors and methods for testing against only one edge of the viewport.
104 | 
105 | ```js
106 | // Returns true if the element is within the left edge of the viewport
107 | // Also works with 'top', 'right', and 'bottom'
108 | $('#myElement').is(':within-viewport-left')
109 | ```
110 | 
111 | ```js
112 | // Returns a jQuery collection of all <div>s within the left edge of the viewport
113 | $('div').withinViewportLeft()
114 | ```
115 | 
116 | ```js
117 | // Same as above, but only elements that are at least 12px inside the left edge
118 | $('div').withinViewportLeft({ left: 12 })
119 | ```
120 | 
121 | These shortcuts will result in slightly better performance if you're testing hundreds or thousands of elements.
122 | 
123 | #### Live updating
124 | 
125 | If you're looking to keep tabs on elements' whereabouts at all times, you can bind to the `window`'s `resize` and `scroll` events. However, for performance reasons, it's strongly recommended to [throttle](https://lodash.com/docs/#throttle) your event listener or use something like [James Padolsey's `scrollStop` event](https://web.archive.org/web/20210824132834/https://j11y.io/javascript/special-scroll-events-for-jquery/). Firing on every `window.scroll` event will [bring your UI to its knees](https://ejohn.org/blog/learning-from-twitter/).
126 | 
127 | ```js
128 | $(window).on('resize scrollStop', _.throttle(function() {
129 |     // Your code here...
130 | 
131 |     // Example:
132 |     $('div')
133 |         // Momentarily declare all divs out of the viewport...
134 |         .removeClass('within-viewport')
135 |         // Then filter them to reveal which ones are still within it
136 |         .filter(':within-viewport')
137 |             .addClass('within-viewport')
138 | }, 100));
139 | ```
140 | 
141 | ## Options
142 | 
143 | All options work the same across the synchronous and asynchronous functions and the jQuery plugin.
144 | 
145 | ### Custom viewport element
146 | 
147 | If you want to test whether an element is within a scrollable parent element (e.g. which has `overflow: auto` or `scroll`), assign the parent element to the `container` property:
148 | 
149 | ```js
150 | withinViewport(elem, {
151 |     container: document.querySelector('.parent-element')
152 | })
153 | ```
154 | 
155 | ### Custom boundaries
156 | 
157 | For example, a fixed header with a height of 100px that spans the entire width of the page effectively lowers the viewport by 100px from the top edge of the browser window:
158 | 
159 | ```js
160 | withinViewport(elem, { top: 100 })
161 | ```
162 | 
163 | If you only care about some edges of the viewport, you can specify them to improve performance:
164 | 
165 | ```js
166 | withinViewport(elem, 'left bottom')
167 | ```
168 | 
169 | You can also combine optins:
170 | 
171 | ```js
172 | withinViewport(elem, { left: 40, container: myDiv })
173 | $('div').withinViewport({ right: -70, top: 'ignore' })
174 | ```
175 | 
176 | You can specify *negative threshold values* to allow elements to reside outside the viewport.
177 | 
178 | ## Migrating from v2 to v3
179 | 
180 | The `sides` option has been deprecated. The following calls are equivalent:
181 | 
182 | ```js
183 | // 2.x: specifying which sides to *monitor*
184 | withinViewport(elem, { sides: ['left', 'right']})
185 | 
186 | // 3.x: specifying which sides to *ignore*
187 | withinViewport(elem, { top: 'ignore', bottom: 'ignore' })
188 | ```
189 | 
190 | ## Browser Support
191 | 
192 | For the synchronous functions:
193 | 
194 | - IE 7(?) and higher
195 | - All the others except Opera Mini
196 |   - Tested in the latest stable Chrome, Firefox, Safari, and Edge
197 | 
198 | The asynchronous functions work in any browser that supports promises and [IntersectionObserver](https://caniuse.com/intersectionobserver).
199 | 
200 | All functions (both versions) are transpiled to ES5.
201 | 
202 | ## Credit
203 | 
204 | Within Viewport is inspired by these similar utilities which only reflect whether an element is at least partially in view:
205 | 
206 | - Remy Sharp's [Element 'in view' Event Plugin](https://remysharp.com/2009/01/26/element-in-view-event-plugin/)
207 | - Mike Tuupola's [Viewport Selectors for jQuery](https://github.com/tuupola/jquery_viewport)
208 | 
209 | ## License
210 | 
211 | Have fun with it &mdash; [BSD-3-Clause](https://choosealicense.com/licenses/bsd-3-clause/). See included [LICENSE](LICENSE) file.
212 | 
213 | ## Author
214 | 
215 | [Craig Patik](https://patik.com)
216 | 


--------------------------------------------------------------------------------
/module/src/tests/specs/strictCallbackAndRootMargin.test.ts:
--------------------------------------------------------------------------------
  1 | // Basically, all the JSON-able parts of an IntersectionObserverEntry
  2 | type PartialIntersectionObserverEntry = Pick<IntersectionObserverEntry, 'intersectionRatio' | 'isIntersecting'> & {
  3 |     boundingClientRect: Omit<IntersectionObserverEntry['boundingClientRect'], 'toJSON'>
  4 | } & {
  5 |     intersectionRect: Omit<IntersectionObserverEntry['intersectionRect'], 'toJSON'>
  6 | } & {
  7 |     rootBounds: Omit<IntersectionObserverEntry['rootBounds'], 'toJSON'>
  8 | }
  9 | 
 10 | // At left, within top, within bottom, within right
 11 | const leftEdge: PartialIntersectionObserverEntry = {
 12 |     boundingClientRect: {
 13 |         x: 0,
 14 |         y: 47.1875,
 15 |         width: 195.140625,
 16 |         height: 195.140625,
 17 |         top: 47.1875,
 18 |         right: 195.140625,
 19 |         bottom: 242.328125,
 20 |         left: 0,
 21 |     },
 22 |     intersectionRect: {
 23 |         x: 0,
 24 |         y: 47.1875,
 25 |         width: 195.140625,
 26 |         height: 195.140625,
 27 |         top: 47.1875,
 28 |         right: 195.140625,
 29 |         bottom: 242.328125,
 30 |         left: 0,
 31 |     },
 32 |     intersectionRatio: 1,
 33 |     isIntersecting: true,
 34 |     rootBounds: { x: 0, y: 0, width: 1073, height: 968, top: 0, right: 1073, bottom: 968, left: 0 },
 35 | }
 36 | 
 37 | // At left, partially out of the top, within bottom, within right
 38 | const leftEdgePartialTop: PartialIntersectionObserverEntry = {
 39 |     boundingClientRect: {
 40 |         x: 0,
 41 |         y: -43.8125,
 42 |         width: 195.140625,
 43 |         height: 195.140625,
 44 |         top: -43.8125,
 45 |         right: 195.140625,
 46 |         bottom: 151.328125,
 47 |         left: 0,
 48 |     },
 49 |     intersectionRect: {
 50 |         x: 0,
 51 |         y: 0,
 52 |         width: 195.140625,
 53 |         height: 151.328125,
 54 |         top: 0,
 55 |         right: 195.140625,
 56 |         bottom: 151.328125,
 57 |         left: 0,
 58 |     },
 59 |     intersectionRatio: 0.7755134105682373,
 60 |     isIntersecting: false,
 61 |     rootBounds: { x: 0, y: 0, width: 1073, height: 968, top: 0, right: 1073, bottom: 968, left: 0 },
 62 | }
 63 | 
 64 | // At left, totally out of the top, within bottom, within right
 65 | const leftEdgeOffTop: PartialIntersectionObserverEntry = {
 66 |     boundingClientRect: {
 67 |         x: 0,
 68 |         y: -236.8125,
 69 |         width: 195.140625,
 70 |         height: 195.140625,
 71 |         top: -236.8125,
 72 |         right: 195.140625,
 73 |         bottom: -41.671875,
 74 |         left: 0,
 75 |     },
 76 |     intersectionRect: { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 },
 77 |     intersectionRatio: 0,
 78 |     isIntersecting: false,
 79 |     rootBounds: { x: 0, y: 0, width: 1073, height: 968, top: 0, right: 1073, bottom: 968, left: 0 },
 80 | }
 81 | 
 82 | // At left, within top, partially off bottom, within right
 83 | const leftEdgePartiallyOffBottom: PartialIntersectionObserverEntry = {
 84 |     boundingClientRect: {
 85 |         x: 0,
 86 |         y: 831.1875,
 87 |         width: 195.140625,
 88 |         height: 195.140625,
 89 |         top: 831.1875,
 90 |         right: 195.140625,
 91 |         bottom: 1026.328125,
 92 |         left: 0,
 93 |     },
 94 |     intersectionRect: {
 95 |         x: 0,
 96 |         y: 831.1875,
 97 |         width: 195.140625,
 98 |         height: 136.8125,
 99 |         top: 831.1875,
100 |         right: 195.140625,
101 |         bottom: 968,
102 |         left: 0,
103 |     },
104 |     intersectionRatio: 0.7010849714279175,
105 |     isIntersecting: false,
106 |     rootBounds: { x: 0, y: 0, width: 1073, height: 968, top: 0, right: 1073, bottom: 968, left: 0 },
107 | }
108 | 
109 | // Should only pass with bottom:ignore + left:0, or bottom:ignore + left:ignore
110 | // At left, within top, totally off bottom, within right
111 | const leftEdgeTotallyOffBottom: PartialIntersectionObserverEntry = {
112 |     boundingClientRect: {
113 |         x: 0,
114 |         y: 990.1875,
115 |         width: 195.140625,
116 |         height: 195.140625,
117 |         top: 990.1875,
118 |         right: 195.140625,
119 |         bottom: 1185.328125,
120 |         left: 0,
121 |     },
122 |     intersectionRect: { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 },
123 |     intersectionRatio: 0,
124 |     isIntersecting: false,
125 |     rootBounds: { x: 0, y: 0, width: 1073, height: 968, top: 0, right: 1073, bottom: 968, left: 0 },
126 | }
127 | 
128 | // Should only pass with both left = ignore and bottom = ignore
129 | // Partially off left, within top, totally off bottom, within right
130 | const partialLeftTotallyOffBottom: PartialIntersectionObserverEntry = {
131 |     boundingClientRect: {
132 |         x: -44,
133 |         y: 990.1875,
134 |         width: 195.140625,
135 |         height: 195.140625,
136 |         top: 990.1875,
137 |         right: 151.140625,
138 |         bottom: 1185.328125,
139 |         left: -44,
140 |     },
141 |     intersectionRect: { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 },
142 |     intersectionRatio: 0,
143 |     isIntersecting: false,
144 |     rootBounds: { x: 0, y: 0, width: 1073, height: 968, top: 0, right: 1073, bottom: 968, left: 0 },
145 | }
146 | 
147 | // Should only pass with left:ignore
148 | // Partially off left, within top, within bottom, within right
149 | const partialLeft: PartialIntersectionObserverEntry = {
150 |     boundingClientRect: {
151 |         x: -55,
152 |         y: 685.1875,
153 |         width: 195.140625,
154 |         height: 195.140625,
155 |         top: 685.1875,
156 |         right: 140.140625,
157 |         bottom: 880.328125,
158 |         left: -55,
159 |     },
160 |     intersectionRect: {
161 |         x: 0,
162 |         y: 685.1875,
163 |         width: 140.140625,
164 |         height: 195.140625,
165 |         top: 685.1875,
166 |         right: 140.140625,
167 |         bottom: 880.328125,
168 |         left: 0,
169 |     },
170 |     intersectionRatio: 0.7181406617164612,
171 |     isIntersecting: false,
172 |     rootBounds: { x: 0, y: 0, width: 1073, height: 968, top: 0, right: 1073, bottom: 968, left: 0 },
173 | }
174 | 
175 | // Should pass: left:ignore + top:ignore
176 | // Partially off left, partially off top, within bottom, within right
177 | const partialLeftPartialTop: PartialIntersectionObserverEntry = {
178 |     boundingClientRect: {
179 |         x: -87,
180 |         y: -92.8125,
181 |         width: 195.140625,
182 |         height: 195.140625,
183 |         top: -92.8125,
184 |         right: 108.140625,
185 |         bottom: 102.328125,
186 |         left: -87,
187 |     },
188 |     intersectionRect: {
189 |         x: 0,
190 |         y: 0,
191 |         width: 108.140625,
192 |         height: 102.328125,
193 |         top: 0,
194 |         right: 108.140625,
195 |         bottom: 102.328125,
196 |         left: 0,
197 |     },
198 |     intersectionRatio: 0.290597528219223,
199 |     isIntersecting: false,
200 |     rootBounds: { x: 0, y: 0, width: 1073, height: 968, top: 0, right: 1073, bottom: 968, left: 0 },
201 | }
202 | 
203 | // Should pass: left:ignore + top:ignore
204 | // Partially off left, totally off top, within bottom, within right
205 | const partialLeftTotallyOffTop: PartialIntersectionObserverEntry = {
206 |     boundingClientRect: {
207 |         x: -87,
208 |         y: -253.8125,
209 |         width: 195.140625,
210 |         height: 195.140625,
211 |         top: -253.8125,
212 |         right: 108.140625,
213 |         bottom: -58.671875,
214 |         left: -87,
215 |     },
216 |     intersectionRect: { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 },
217 |     intersectionRatio: 0,
218 |     isIntersecting: false,
219 |     rootBounds: { x: 0, y: 0, width: 1073, height: 968, top: 0, right: 1073, bottom: 968, left: 0 },
220 | }
221 | 
222 | describe.each([
223 |     leftEdge,
224 |     leftEdgePartialTop,
225 |     leftEdgeOffTop,
226 |     leftEdgePartiallyOffBottom,
227 |     leftEdgeTotallyOffBottom,
228 |     partialLeftTotallyOffBottom,
229 |     partialLeft,
230 |     partialLeftPartialTop,
231 |     partialLeftTotallyOffTop,
232 | ])('strict mode', (variation) => {
233 |     test('test', () => {
234 |         // TODO
235 |         expect(variation).toHaveProperty('rootBounds')
236 |     })
237 | })
238 | 


--------------------------------------------------------------------------------
/module/src/async/strictCallbackAndRootMargin.ts:
--------------------------------------------------------------------------------
  1 | import { AsyncConfig } from '../common/options.js'
  2 | import { determineRootMargin } from './rootMargin.js'
  3 | 
  4 | function isWithinTop(entry: IntersectionObserverEntry) {
  5 |     const { intersectionRect, boundingClientRect } = entry
  6 |     const isHeightAndWidthZero = intersectionRect.height === 0 && intersectionRect.width === 0
  7 | 
  8 |     return (
  9 |         // Below the top of the viewport
 10 |         (!isHeightAndWidthZero && intersectionRect.y > 0) ||
 11 |         // Totally out of the viewport to the left
 12 |         (isHeightAndWidthZero && boundingClientRect.y > 0)
 13 |     )
 14 | }
 15 | 
 16 | function getElemWidth(elem: AsyncConfig['container']) {
 17 |     // Is an element, but no the Document
 18 |     return 'clientWidth' in elem
 19 |         ? elem.clientWidth
 20 |         : // Must be the body, but we need to use the window to get the viewport dimensions
 21 |           window.innerWidth
 22 | }
 23 | 
 24 | function getElemHeight(elem: AsyncConfig['container']) {
 25 |     // Is an element, but no the Document
 26 |     return 'clientHeight' in elem
 27 |         ? elem.clientHeight
 28 |         : // Must be the body, but we need to use the window to get the viewport dimensions
 29 |           window.innerHeight
 30 | }
 31 | 
 32 | function isWithinRight(entry: IntersectionObserverEntry, config: AsyncConfig, debug = false) {
 33 |     const { intersectionRect, boundingClientRect } = entry
 34 |     const isHeightAndWidthZero = intersectionRect.height === 0 && intersectionRect.width === 0
 35 | 
 36 |     if (!isHeightAndWidthZero && intersectionRect.right < getElemWidth(config.container)) {
 37 |         if (debug) {
 38 |             console.log('right A ')
 39 |         }
 40 |         return true
 41 |     }
 42 |     // Totally out of the viewport to the bottom
 43 |     if (
 44 |         isHeightAndWidthZero &&
 45 |         boundingClientRect.right > 0 &&
 46 |         boundingClientRect.right < getElemWidth(config.container)
 47 |     ) {
 48 |         if (debug) {
 49 |             console.log('right B ', getElemWidth(config.container))
 50 |         }
 51 |         return true
 52 |     }
 53 | 
 54 |     // Totally out of the viewport to the left
 55 |     if (isHeightAndWidthZero && boundingClientRect.right < 0) {
 56 |         if (debug) {
 57 |             console.log('right C')
 58 |         }
 59 |         return true
 60 |     }
 61 | 
 62 |     if (debug) {
 63 |         console.log('right D')
 64 |     }
 65 |     return false
 66 | }
 67 | 
 68 | function isWithinBottom(entry: IntersectionObserverEntry, config: AsyncConfig, debug = false) {
 69 |     const { intersectionRect, boundingClientRect } = entry
 70 |     const isHeightAndWidthZero = intersectionRect.height === 0 && intersectionRect.width === 0
 71 |     const containerHeight = getElemHeight(config.container)
 72 | 
 73 |     if (!isHeightAndWidthZero && intersectionRect.bottom < containerHeight) {
 74 |         if (debug) {
 75 |             console.log('bottom A')
 76 |         }
 77 |         return true
 78 |     }
 79 | 
 80 |     if (!isHeightAndWidthZero && intersectionRect.bottom < containerHeight) {
 81 |         if (debug) {
 82 |             console.log('bottom B ', containerHeight)
 83 |         }
 84 |         return true
 85 |     }
 86 | 
 87 |     // Totally out of the viewport to the left
 88 |     if (isHeightAndWidthZero && boundingClientRect.bottom > 0 && boundingClientRect.bottom < containerHeight) {
 89 |         if (debug) {
 90 |             console.log('bottom C ', containerHeight, config.container)
 91 |         }
 92 |         return true
 93 |     }
 94 | 
 95 |     // Totally out of the viewport to the top
 96 |     if (isHeightAndWidthZero && boundingClientRect.bottom < 0 && boundingClientRect.top < 0) {
 97 |         if (debug) {
 98 |             console.log('bottom C ', containerHeight, config.container)
 99 |         }
100 |         return true
101 |     }
102 | 
103 |     return false
104 | }
105 | 
106 | function isWithinLeft(entry: IntersectionObserverEntry) {
107 |     const { intersectionRect, boundingClientRect } = entry
108 |     const isHeightAndWidthZero = intersectionRect.height === 0 && intersectionRect.width === 0
109 | 
110 |     return (
111 |         (!isHeightAndWidthZero && intersectionRect.x > 0) ||
112 |         // Partially out of the viewport to the top
113 |         (!isHeightAndWidthZero && intersectionRect.x === 0 && boundingClientRect.x === 0) ||
114 |         // Totally out of the viewport to the bottom
115 |         (isHeightAndWidthZero && boundingClientRect.left >= 0 && boundingClientRect.x >= 0)
116 |     )
117 | }
118 | 
119 | /**
120 |  * Sets the root margin by measuring the screen and the target element, which can be costly
121 |  */
122 | export function strictCallbackAndRootMargin(
123 |     elem: HTMLElement,
124 |     config: AsyncConfig,
125 |     resolve: (value: boolean | PromiseLike<boolean>) => void,
126 |     debug = elem.getAttribute('data-boxid') === '90',
127 | ): [callback: IntersectionObserverCallback, options?: IntersectionObserverInit] {
128 |     return [
129 |         (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
130 |             entries.forEach((entry) => {
131 |                 observer.disconnect()
132 |                 const { isIntersecting } = entry
133 | 
134 |                 if (debug) {
135 |                     const { boundingClientRect, intersectionRect, intersectionRatio, isIntersecting, rootBounds } =
136 |                         entry
137 |                     console.log(entry)
138 |                     console.log(
139 |                         JSON.stringify({
140 |                             boundingClientRect,
141 |                             intersectionRect,
142 |                             intersectionRatio,
143 |                             isIntersecting,
144 |                             rootBounds,
145 |                         }),
146 |                     )
147 |                 }
148 | 
149 |                 if (!entry.isIntersecting) {
150 |                     const { top, right, bottom, left } = config
151 | 
152 |                     let numSidesPassing = 0
153 | 
154 |                     if (top === 'ignore' || isWithinTop(entry)) {
155 |                         numSidesPassing++
156 |                         if (debug) {
157 |                             console.log('top + ', top)
158 |                         }
159 |                     } else if (debug) {
160 |                         console.log('top -')
161 |                     }
162 | 
163 |                     if (right === 'ignore' || isWithinRight(entry, config, debug)) {
164 |                         numSidesPassing++
165 |                         if (debug) {
166 |                             console.log('right + ', right)
167 |                         }
168 |                     } else if (debug) {
169 |                         console.log('right -')
170 |                     }
171 | 
172 |                     if (bottom === 'ignore' || isWithinBottom(entry, config, debug)) {
173 |                         numSidesPassing++
174 |                         if (debug) {
175 |                             console.log('bottom + ', bottom)
176 |                         }
177 |                     } else if (debug) {
178 |                         console.log('bottom -')
179 |                     }
180 | 
181 |                     if (left === 'ignore' || isWithinLeft(entry)) {
182 |                         numSidesPassing++
183 |                         if (debug) {
184 |                             console.log('left + ', left)
185 |                         }
186 |                     } else if (debug) {
187 |                         console.log('left -')
188 |                     }
189 | 
190 |                     if (debug) {
191 |                         console.log('numSidesPassing ', numSidesPassing)
192 |                         console.log('returning ', numSidesPassing === 4)
193 |                     }
194 | 
195 |                     resolve(numSidesPassing === 4)
196 |                     return
197 |                 }
198 | 
199 |                 if (debug) {
200 |                     console.log('returning ', isIntersecting)
201 |                 }
202 |                 resolve(isIntersecting)
203 |                 return
204 |             })
205 |         },
206 |         {
207 |             rootMargin: determineRootMargin(config, 'strict'),
208 |             root: config.container,
209 |             threshold: 1.0,
210 |         },
211 |     ]
212 | }
213 | 


--------------------------------------------------------------------------------
/module/src/tests/specs/options.test.ts:
--------------------------------------------------------------------------------
  1 | import { AsyncConfig, getConfig, SyncConfig } from '../../common/options.js'
  2 | import { MultipleSides, Side, UserOptions } from '../../common/types.js'
  3 | 
  4 | const div = document.createElement('div')
  5 | document.body.appendChild(div)
  6 | 
  7 | const syncTestCases: Array<{
  8 |     userOptions: undefined | Side | MultipleSides | Partial<UserOptions>
  9 |     name: string
 10 |     result: SyncConfig // Boundaries & { container: HTMLElement | Window | { nodeName: string } }
 11 | }> = [
 12 |     {
 13 |         name: 'undefined',
 14 |         userOptions: undefined,
 15 |         result: { top: 0, right: 0, bottom: 0, left: 0, container: window },
 16 |     },
 17 |     {
 18 |         name: '`left`',
 19 |         userOptions: 'left',
 20 |         result: { top: 'ignore', right: 'ignore', bottom: 'ignore', left: 0, container: window },
 21 |     },
 22 |     {
 23 |         name: '`right bottom`',
 24 |         userOptions: 'right bottom',
 25 |         result: { top: 'ignore', right: 0, bottom: 0, left: 'ignore', container: window },
 26 |     },
 27 |     {
 28 |         name: 'container is the body',
 29 |         userOptions: { container: document.body },
 30 |         result: { top: 0, right: 0, bottom: 0, left: 0, container: window },
 31 |     },
 32 |     {
 33 |         name: 'container is an arbitary div',
 34 |         userOptions: { container: document.createElement('div') },
 35 |         result: { top: 0, right: 0, bottom: 0, left: 0, container: document.createElement('div') },
 36 |     },
 37 |     {
 38 |         name: 'sides=left; container is an arbitary div',
 39 |         userOptions: {
 40 |             top: 'ignore',
 41 |             right: 'ignore',
 42 |             bottom: 'ignore',
 43 |             left: 0,
 44 |             container: document.createElement('div'),
 45 |         },
 46 |         result: { top: 'ignore', right: 'ignore', bottom: 'ignore', left: 0, container: document.createElement('div') },
 47 |     },
 48 |     {
 49 |         name: 'sides=right,bottom; container is an arbitary div',
 50 |         userOptions: { top: 'ignore', right: 0, bottom: 0, left: 'ignore', container: document.createElement('div') },
 51 |         result: { top: 'ignore', right: 0, bottom: 0, left: 'ignore', container: document.createElement('div') },
 52 |     },
 53 | ]
 54 | 
 55 | describe.each(syncTestCases)('Synchronous getConfig', (testCase) => {
 56 |     describe.each([document.body, document.createElement('div')])(`user options: ${testCase.name}`, (targetElem) => {
 57 |         test(`target elem: ${targetElem.nodeName}`, () => {
 58 |             const result = getConfig('sync', targetElem, testCase.userOptions)
 59 | 
 60 |             expect(result).toStrictEqual(testCase.result)
 61 |         })
 62 |     })
 63 | })
 64 | 
 65 | const asyncTestCases: Array<{
 66 |     userOptions: undefined | Side | MultipleSides | Partial<UserOptions>
 67 |     name: string
 68 |     result: AsyncConfig
 69 | }> = [
 70 |     {
 71 |         name: 'undefined',
 72 |         userOptions: undefined,
 73 |         result: { top: 0, right: 0, bottom: 0, left: 0, container: document },
 74 |     },
 75 |     {
 76 |         name: '`left`',
 77 |         userOptions: 'left',
 78 |         result: { top: 'ignore', right: 'ignore', bottom: 'ignore', left: 0, container: document },
 79 |     },
 80 |     {
 81 |         name: '`right bottom`',
 82 |         userOptions: 'right bottom',
 83 |         result: { top: 'ignore', right: 0, bottom: 0, left: 'ignore', container: document },
 84 |     },
 85 |     {
 86 |         name: 'container is the body',
 87 |         userOptions: { container: document.body },
 88 |         result: { top: 0, right: 0, bottom: 0, left: 0, container: document },
 89 |     },
 90 |     {
 91 |         name: 'container is an arbitary div',
 92 |         userOptions: { container: document.createElement('div') },
 93 |         result: { top: 0, right: 0, bottom: 0, left: 0, container: document.createElement('div') },
 94 |     },
 95 |     {
 96 |         name: 'sides=left; container is an arbitary div',
 97 |         userOptions: {
 98 |             top: 'ignore',
 99 |             right: 'ignore',
100 |             bottom: 'ignore',
101 |             left: 0,
102 |             container: document.createElement('div'),
103 |         },
104 |         result: { top: 'ignore', right: 'ignore', bottom: 'ignore', left: 0, container: document.createElement('div') },
105 |     },
106 |     {
107 |         name: 'sides=right,bottom; container is an arbitary div',
108 |         userOptions: { top: 'ignore', right: 0, bottom: 0, left: 'ignore', container: document.createElement('div') },
109 |         result: { top: 'ignore', right: 0, bottom: 0, left: 'ignore', container: document.createElement('div') },
110 |     },
111 | ]
112 | 
113 | describe.each(asyncTestCases)('Asynchronous getConfig', (testCase) => {
114 |     describe.each([document.body, document.createElement('div')])(`user options: ${testCase.name}`, (targetElem) => {
115 |         test(`target elem: ${targetElem.nodeName}`, () => {
116 |             const result = getConfig('async', targetElem, testCase.userOptions)
117 | 
118 |             expect(result).toStrictEqual(testCase.result)
119 |         })
120 |     })
121 | })
122 | 
123 | describe('Other getConfig use cases', () => {
124 |     describe(`Throws an error when HTML element is missing or invalid`, () => {
125 |         describe(`No element provided`, () => {
126 |             test(`Synchronous getConfig, without options`, () => {
127 |                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
128 |                 // @ts-ignore We want this to be a type error, but let's test it anyway
129 |                 expect(() => getConfig('sync')).toThrowError('First argument must be an element')
130 |             })
131 | 
132 |             test(`Synchronous getConfig, with options`, () => {
133 |                 expect(() =>
134 |                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
135 |                     // @ts-ignore We want this to be a type error, but let's test it anyway
136 |                     getConfig('sync', undefined, {
137 |                         top: 'ignore',
138 |                         right: 'ignore',
139 |                         bottom: 'ignore',
140 |                         left: 0,
141 |                         container: document.createElement('div'),
142 |                     }),
143 |                 ).toThrowError('First argument must be an element')
144 |             })
145 | 
146 |             test(`Asynchronous getConfig, without options`, () => {
147 |                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
148 |                 // @ts-ignore We want this to be a type error, but let's test it anyway
149 |                 expect(() => getConfig('async')).toThrowError('First argument must be an element')
150 |             })
151 | 
152 |             test(`Asynchronous getConfig, with options`, () => {
153 |                 expect(() =>
154 |                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
155 |                     // @ts-ignore We want this to be a type error, but let's test it anyway
156 |                     getConfig('async', undefined, {
157 |                         top: 'ignore',
158 |                         right: 'ignore',
159 |                         bottom: 'ignore',
160 |                         left: 0,
161 |                         container: document.createElement('div'),
162 |                     }),
163 |                 ).toThrowError('First argument must be an element')
164 |             })
165 |         })
166 | 
167 |         describe.each([document.createComment('alpha'), document.createTextNode('bravo')])(
168 |             `Wrong type of element`,
169 |             (badElement) => {
170 |                 describe.each(['sync', 'async'])(`${badElement.nodeName} node`, (configType) => {
171 |                     test(`${configType}ronous getConfig, without options`, () => {
172 |                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
173 |                         // @ts-ignore We want this to be a type error, but let's test it anyway
174 |                         expect(() => getConfig(configType, badElement)).toThrowError(
175 |                             'First argument must be an element',
176 |                         )
177 |                     })
178 | 
179 |                     test(`${configType}, synchronous getConfig, with options`, () => {
180 |                         expect(() =>
181 |                             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
182 |                             // @ts-ignore We want this to be a type error, but let's test it anyway
183 |                             getConfig(configType, badElement, {
184 |                                 top: 'ignore',
185 |                                 right: 'ignore',
186 |                                 bottom: 'ignore',
187 |                                 left: 0,
188 |                                 container: document.createElement('div'),
189 |                             }),
190 |                         ).toThrowError('First argument must be an element')
191 |                     })
192 |                 })
193 |             },
194 |         )
195 |     })
196 | })
197 | 


--------------------------------------------------------------------------------
/app/src/scripts/events.ts:
--------------------------------------------------------------------------------
  1 | import { isSide } from '../../../module/src/common/sides'
  2 | import { drawBound } from './boundaries'
  3 | import { createBoxHtml, updateBoxes } from './boxes'
  4 | import { hideAll, query, showAll } from './dom'
  5 | import { updateBoundaryPreview, updateCodeOutput } from './output'
  6 | import store from './store'
  7 | 
  8 | // Only certain combinations of browsers/OSes allow capturing arrow key strokes, unfortunately
  9 | // Windows: Firefox, Trident, Safari, Opera; Mac: Chrome, Safari, Opera; Not Firefox
 10 | function areNudgeControlsSupported() {
 11 |     return (
 12 |         ('oscpu' in navigator &&
 13 |             navigator.oscpu &&
 14 |             typeof navigator.oscpu === 'string' &&
 15 |             /Windows/.test(navigator.oscpu) &&
 16 |             /Firefox|Trident|Safari|Presto/.test(navigator.userAgent)) ||
 17 |         (/Macintosh/.test(navigator.userAgent) && /Chrome|Safari|Presto/.test(navigator.userAgent))
 18 |     )
 19 | }
 20 | 
 21 | const selectors = {
 22 |     methodRadios: '[name="method-form"]',
 23 |     containerRadios: '[name="container-form"]',
 24 |     boundaryCheckboxes: '.boundary-form input[type="checkbox"]',
 25 |     boundaryNumberInputs: '.boundary-form input[type="number"]',
 26 | }
 27 | 
 28 | // Setup event listeners
 29 | export function addEventHandlers() {
 30 |     const { containerForEvents } = store.getState()
 31 | 
 32 |     // Scroll or resize the viewport
 33 |     containerForEvents.addEventListener('resize', updateBoxes)
 34 |     containerForEvents.addEventListener('scroll', updateBoxes)
 35 | 
 36 |     // Method radio buttons
 37 |     query(selectors.methodRadios).forEach((elem) => {
 38 |         elem.addEventListener('change', onMethodChange)
 39 |     })
 40 | 
 41 |     // Container radio buttons
 42 |     query(selectors.containerRadios).forEach((elem) => {
 43 |         elem.addEventListener('change', onContainerFormChange)
 44 |     })
 45 | 
 46 |     // Boundary radio buttons
 47 |     query(selectors.boundaryCheckboxes).forEach((elem) => {
 48 |         elem.addEventListener('change', onBoundaryCheckboxChange)
 49 |     })
 50 | 
 51 |     // Boundary number entry
 52 |     // Note that this `change` will also fire after `blur` the field, which is annoying
 53 |     // e.g. if this input is focused when the ignore checkbox is checked, this could fire *after* the checkbox handler, overwriting a newer state
 54 |     query(selectors.boundaryNumberInputs).forEach((elem) => {
 55 |         elem.addEventListener('keyup', onBoundaryValueChange)
 56 |         elem.addEventListener('change', onBoundaryValueChange)
 57 |         // 'click' is for spinners on input[number] control
 58 |         elem.addEventListener('click', onBoundaryValueChange)
 59 |     })
 60 | 
 61 |     // Nudge controls
 62 |     if (areNudgeControlsSupported()) {
 63 |         document.body.addEventListener('keydown', onNudge)
 64 |         showAll('.nudge-instructions')
 65 |     }
 66 | 
 67 |     // Controls toggler
 68 |     document.getElementById('toggler')?.addEventListener('click', onControlsToggle)
 69 | }
 70 | 
 71 | /**
 72 |  * When we changed which element is used as the viewport, we need to 'move' the event handlers to the correct element
 73 |  */
 74 | function resetContainerEventHandlers(previousContainer: HTMLElement | Window, nextContainer: HTMLElement | Window) {
 75 |     updateBoxes.cancel()
 76 | 
 77 |     // Remove handlers from the old container
 78 |     previousContainer.removeEventListener('resize', updateBoxes)
 79 |     previousContainer.removeEventListener('scroll', updateBoxes)
 80 | 
 81 |     // Add handlers to the new container
 82 |     nextContainer.addEventListener('resize', updateBoxes)
 83 |     nextContainer.addEventListener('scroll', updateBoxes)
 84 | }
 85 | 
 86 | // When the method/version radio buttons change
 87 | function onMethodChange(evt: Event) {
 88 |     // TODO - Make TS work properly with DOM events
 89 |     const target = evt.target as HTMLInputElement | null
 90 |     const whichRadio = target?.value ?? ''
 91 | 
 92 |     if (whichRadio === 'async') {
 93 |         store.setState({
 94 |             methodType: 'async',
 95 |         })
 96 |     } else {
 97 |         store.setState({
 98 |             methodType: 'sync',
 99 |         })
100 |     }
101 | 
102 |     // Update the page
103 |     updateBoxes()
104 |     updateCodeOutput()
105 | }
106 | 
107 | // When the container radio buttons change
108 | function onContainerFormChange(evt: Event) {
109 |     // TODO - Make TS work properly with DOM events
110 |     const target = evt.target as HTMLInputElement | null
111 |     const whichRadio = target?.value ?? ''
112 | 
113 |     // Remove any previously-existing box containers
114 |     const boxContainer = document.getElementById('box-container')
115 | 
116 |     if (boxContainer) {
117 |         boxContainer.parentNode?.removeChild(boxContainer)
118 |     }
119 | 
120 |     const viewportContainer = document.getElementById('arbitrary-viewport-container')
121 |     const previousContainerForEvens = store.getState().containerForEvents
122 | 
123 |     if (whichRadio === 'window') {
124 |         store.setState({
125 |             containerForDOM: document.body,
126 |             containerForEvents: window,
127 |         })
128 |         resetContainerEventHandlers(previousContainerForEvens, window)
129 | 
130 |         if (viewportContainer) {
131 |             viewportContainer.style.display = 'none'
132 |         }
133 |     } else {
134 |         if (viewportContainer) {
135 |             viewportContainer.style.display = 'block'
136 | 
137 |             store.setState({
138 |                 containerForDOM: viewportContainer,
139 |                 containerForEvents: viewportContainer,
140 |             })
141 | 
142 |             resetContainerEventHandlers(previousContainerForEvens, viewportContainer)
143 |         }
144 |     }
145 | 
146 |     // Update the page
147 |     createBoxHtml()
148 |     updateCodeOutput()
149 | }
150 | 
151 | // When the boundary radio buttons change, e.g. choosing whether to ignore a side
152 | function onBoundaryCheckboxChange(evt: Event) {
153 |     // TODO - Make TS work properly with DOM events
154 |     const target = evt.target as HTMLInputElement | null
155 | 
156 |     if (!target) {
157 |         throw new Error('Could not get event target')
158 |     }
159 | 
160 |     const side = target.name.replace(/boundary-/, '')
161 | 
162 |     if (!isSide(side)) {
163 |         throw new Error('Could not get side from input name')
164 |     }
165 | 
166 |     const numberInput = document.querySelector<HTMLInputElement>(`input[id="boundary-${side}-value"]`)
167 | 
168 |     if (!numberInput) {
169 |         throw new Error('Could not find numeric input')
170 |     }
171 | 
172 |     if (target.checked) {
173 |         store.setState((state) => ({
174 |             boundaries: {
175 |                 ...state.boundaries,
176 |                 [side]: 'ignore',
177 |             },
178 |         }))
179 | 
180 |         numberInput.disabled = true
181 |         hideAll(`.boundary-${side}`)
182 |     } else {
183 |         store.setState((state) => ({
184 |             boundaries: {
185 |                 ...state.boundaries,
186 |                 [side]: parseInt(numberInput.value, 10),
187 |             },
188 |         }))
189 | 
190 |         numberInput.disabled = false
191 |         showAll(`.boundary-${side}`)
192 |     }
193 | 
194 |     // Update the page
195 |     updateBoxes()
196 |     updateCodeOutput()
197 |     updateBoundaryPreview()
198 | }
199 | 
200 | // When a boundary value changes
201 | function onBoundaryValueChange(evt: Event) {
202 |     // TODO - Make TS work properly with DOM events
203 |     const target = evt.target as HTMLInputElement | null
204 |     const val = parseInt(target?.value ?? '', 10)
205 |     const side = target?.id.replace(/^boundary-(\w+)-value$/, '$1')
206 | 
207 |     if (!isSide(side)) {
208 |         throw new Error('Input ID must be a valid side')
209 |     }
210 | 
211 |     store.setState((state) => ({
212 |         boundaries: {
213 |             ...state.boundaries,
214 |             [side]: val,
215 |         },
216 |     }))
217 | 
218 |     // Positive value was entered (negative values are allowed, but the boundaries would be off screen)
219 |     if (val > 0) {
220 |         showAll(`.boundary-${side}`)
221 |         drawBound(side, val)
222 |     }
223 |     // Hide visual boundary, but store the negative value
224 |     else {
225 |         hideAll(`.boundary-${side}`)
226 |     }
227 | 
228 |     // Update the page
229 |     updateBoxes()
230 |     updateCodeOutput()
231 |     updateBoundaryPreview()
232 | }
233 | 
234 | // When shift + arrow key is pressed, nudge the page by 1px
235 | function onNudge(evt: KeyboardEvent) {
236 |     // TODO - Make TS work properly with DOM events
237 |     const target = evt.target as HTMLInputElement | null
238 | 
239 |     // Ignore this event when an input field has focus
240 |     if (target?.nodeName === 'INPUT') {
241 |         return true
242 |     }
243 | 
244 |     if (!evt.shiftKey) {
245 |         return
246 |     }
247 | 
248 |     let code = evt.code
249 | 
250 |     // For older browsers that don't support `code`, convert the `keyCode` to a `code`
251 |     if (typeof code === 'undefined' && 'keyCode' in evt) {
252 |         switch (evt.keyCode) {
253 |             case 37: {
254 |                 code = 'ArrowLeft'
255 |                 break
256 |             }
257 |             case 38: {
258 |                 code = 'ArrowUp'
259 |                 break
260 |             }
261 |             case 39: {
262 |                 code = 'ArrowRight'
263 |                 break
264 |             }
265 |             case 40: {
266 |                 code = 'ArrowDown'
267 |                 break
268 |             }
269 |             default: {
270 |                 // Some other, non-arrow key was pressed
271 |                 break
272 |             }
273 |         }
274 |     }
275 | 
276 |     if (!code || !/^Arrow\w+/.test(code)) {
277 |         return
278 |     }
279 | 
280 |     const scrollVals: Record<string, [number, number]> = {
281 |         ArrowUp: [0, -1],
282 |         ArrowLeft: [-1, 0],
283 |         ArrowRight: [1, 0],
284 |         ArrowDown: [0, 1],
285 |     }
286 | 
287 |     store.getState().containerForEvents.scrollBy(scrollVals[code][0], scrollVals[code][1])
288 | 
289 |     evt.preventDefault()
290 | }
291 | 
292 | function onControlsToggle() {
293 |     document.querySelector('.control-panel')?.classList.toggle('collapsed')
294 | 
295 |     const toggler = document.getElementById('toggler')
296 | 
297 |     if (!toggler) {
298 |         return
299 |     }
300 | 
301 |     if (toggler.innerHTML === 'Collapse') {
302 |         toggler.innerHTML = 'Expand'
303 |     } else {
304 |         toggler.innerHTML = 'Collapse'
305 |     }
306 | }
307 | 


--------------------------------------------------------------------------------
/app/src/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8" />
  5 |         <title>Within Viewport - Determine whether an element is completely within the browser viewport</title>
  6 |         <link href="styles/main.scss" rel="stylesheet" media="all" />
  7 |         <meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui,viewport-fit=cover" />
  8 |         <meta name="author" content="Craig Patik" />
  9 |         <meta
 10 |             name="description"
 11 |             content="Node modules that determines whether an element is completely within the browser viewport"
 12 |         />
 13 |         <meta
 14 |             name="keywords"
 15 |             content="viewport, IntersectionObserver, window, DOM, visible, visibility, element, view, within viewport, browser, detect, event, infinite scrolling, scroll"
 16 |         />
 17 |         <link rel="canonical" href="https://patik.github.io/within-viewport" />
 18 |         <meta name="HandheldFriendly" content="True" />
 19 |         <meta name="MobileOptimized" content="320" />
 20 |         <meta name="apple-mobile-web-app-capable" content="yes" />
 21 |         <meta name="apple-touch-fullscreen" content="yes" />
 22 |     </head>
 23 |     <body>
 24 |         <div class="control-panel" role="main">
 25 |             <h1 class="shown-while-collapsed">Within Viewport</h1>
 26 |             <div id="toggler" class="button small shown-while-collapsed">Collapse</div>
 27 |             <p class="shown-while-collapsed">
 28 |                 Scroll around the page. Boxes that are completely within the viewport will darken.
 29 |                 <span class="nudge-instructions" style="display: none">
 30 |                     Press <code class="shown-while-collapsed">shift + arrow key</code> to nudge the page by 1 pixel at a
 31 |                     time.
 32 |                 </span>
 33 |             </p>
 34 | 
 35 |             <hr />
 36 | 
 37 |             <h2>Options</h2>
 38 | 
 39 |             <form action="." method="post" class="container-form">
 40 |                 <fieldset>
 41 |                     <legend class="sr-only">Viewport element</legend>
 42 |                     <div class="form-wrapper">
 43 |                         <div class="form-name" aria-hidden="true">Viewport element:</div>
 44 | 
 45 |                         <div class="form-field">
 46 |                             <input type="radio" name="container-form" value="window" id="container-window" checked />
 47 |                             <label for="container-window"><code>window</code></label>
 48 |                         </div>
 49 | 
 50 |                         <div class="form-field">
 51 |                             <input type="radio" name="container-form" value="div" id="container-div" />
 52 |                             <label for="container-div">An arbitrary <code>&lt;div&gt;</code></label>
 53 |                         </div>
 54 |                     </div>
 55 |                 </fieldset>
 56 |             </form>
 57 | 
 58 |             <form action="." method="post" class="boundary-form">
 59 |                 <fieldset>
 60 |                     <details>
 61 |                         <summary>Boundaries <code class="boundary-preview">(defaults)</code></summary>
 62 |                         <legend class="sr-only">Boundaries</legend>
 63 | 
 64 |                         <fieldset>
 65 |                             <legend class="sr-only">Top</legend>
 66 |                             <div class="boundary-item">
 67 |                                 <div class="boundary-item-name" aria-hidden="true">Top</div>
 68 |                                 <div class="boundary-item-threshold">
 69 |                                     <input type="number" value="0" id="boundary-top-value" step="1" tabindex="1" />
 70 |                                     <label for="boundary-top-value"
 71 |                                         ><span class="sr-only">Set a threshold for the top edge. Number of </span>pixels
 72 |                                         from the edge</label
 73 |                                     >
 74 |                                 </div>
 75 |                                 <div class="boundary-item-ignore">
 76 |                                     <input type="checkbox" name="boundary-top" value="ignore" id="top-ignore" />
 77 |                                     <label for="top-ignore">Ignore</label>
 78 |                                 </div>
 79 |                             </div>
 80 |                         </fieldset>
 81 | 
 82 |                         <fieldset>
 83 |                             <legend class="sr-only">Right</legend>
 84 |                             <div class="boundary-item">
 85 |                                 <div class="boundary-item-name" aria-hidden="true">Right</div>
 86 |                                 <div class="boundary-item-threshold">
 87 |                                     <input type="number" value="0" id="boundary-right-value" step="1" tabindex="1" />
 88 |                                     <label for="boundary-right-value"
 89 |                                         ><span class="sr-only">Set a threshold for the right edge. Number of </span
 90 |                                         >pixels from the edge</label
 91 |                                     >
 92 |                                 </div>
 93 |                                 <div class="boundary-item-ignore">
 94 |                                     <input type="checkbox" name="boundary-right" value="ignore" id="right-ignore" />
 95 |                                     <label for="right-ignore">Ignore</label>
 96 |                                 </div>
 97 |                             </div>
 98 |                         </fieldset>
 99 | 
100 |                         <fieldset>
101 |                             <legend class="sr-only">Bottom</legend>
102 |                             <div class="boundary-item">
103 |                                 <div class="boundary-item-name" aria-hidden="true">Bottom</div>
104 |                                 <div class="boundary-item-threshold">
105 |                                     <input type="number" value="0" id="boundary-bottom-value" step="1" tabindex="1" />
106 |                                     <label for="boundary-bottom-value"
107 |                                         ><span class="sr-only">Set a threshold for the bottom edge. Number of </span
108 |                                         >pixels from the edge</label
109 |                                     >
110 |                                 </div>
111 |                                 <div class="boundary-item-ignore">
112 |                                     <input type="checkbox" name="boundary-bottom" value="ignore" id="bottom-ignore" />
113 |                                     <label for="bottom-ignore">Ignore</label>
114 |                                 </div>
115 |                             </div>
116 |                         </fieldset>
117 | 
118 |                         <fieldset>
119 |                             <legend class="sr-only">Left</legend>
120 |                             <div class="boundary-item">
121 |                                 <div class="boundary-item-name" aria-hidden="true">Left</div>
122 |                                 <div class="boundary-item-threshold">
123 |                                     <input type="number" value="0" id="boundary-left-value" step="1" tabindex="1" />
124 |                                     <label for="boundary-left-value"
125 |                                         ><span class="sr-only">Set a threshold for the left edge. Number of </span
126 |                                         >pixels from the edge</label
127 |                                     >
128 |                                 </div>
129 |                                 <div class="boundary-item-ignore">
130 |                                     <input type="checkbox" name="boundary-left" value="ignore" id="left-ignore" />
131 |                                     <label for="left-ignore">Ignore</label>
132 |                                 </div>
133 |                             </div>
134 |                         </fieldset>
135 |                     </details>
136 |                 </fieldset>
137 |             </form>
138 | 
139 |             <form action="." method="post" class="method-form">
140 |                 <fieldset>
141 |                     <legend class="sr-only">Method</legend>
142 |                     <div class="form-wrapper">
143 |                         <div class="form-name" aria-hidden="true">Method:</div>
144 | 
145 |                         <div class="form-field">
146 |                             <input type="radio" name="method-form" value="async" id="method-async" checked />
147 |                             <label for="method-async"
148 |                                 ><abbr title="Uses IntersectionObserver, more performant">Asynchronous</abbr></label
149 |                             >
150 |                         </div>
151 | 
152 |                         <div class="form-field">
153 |                             <input type="radio" name="method-form" value="sync" id="method-sync" />
154 |                             <label for="method-sync"
155 |                                 ><abbr title="Uses old school DOM measurements, less performant"
156 |                                     >Synchronous</abbr
157 |                                 ></label
158 |                             >
159 |                         </div>
160 |                     </div>
161 |                 </fieldset>
162 |             </form>
163 | 
164 |             <details class="code-output">
165 |                 <summary>Show code</summary>
166 |                 <pre><code class="language-js">withinViewportAsync(elem)</code></pre>
167 |             </details>
168 | 
169 |             <hr />
170 | 
171 |             <p style="text-align: center">
172 |                 <a href="https://www.npmjs.com/package/withinviewport">Node module</a> &bull;
173 |                 <a href="https://github.com/patik/within-viewport">GitHub</a> &bull;
174 |                 <a href="https://patik.com/blog/within-viewport-javascript-and-jquery-plugin/">Blog post</a>
175 |             </p>
176 |         </div>
177 |         <div style="display: none" id="arbitrary-viewport-container"></div>
178 |         <!-- Boundary lines -->
179 |         <div style="display: none" class="boundary boundary-top"></div>
180 |         <div style="display: none" class="boundary boundary-right"></div>
181 |         <div style="display: none" class="boundary boundary-bottom"></div>
182 |         <div style="display: none" class="boundary boundary-left"></div>
183 | 
184 |         <script src="scripts/main.ts" type="module"></script>
185 |     </body>
186 | </html>
187 | 


--------------------------------------------------------------------------------
/app/cypress/e2e/boundaries.cy.ts:
--------------------------------------------------------------------------------
  1 | const baseUrl = `http://localhost:1234`
  2 | 
  3 | export {}
  4 | 
  5 | const scrollSpeed = 1000
  6 | 
  7 | ;['async', 'sync'].forEach((method) => {
  8 |     describe(`Boundaries`, () => {
  9 |         before(() => {
 10 |             cy.visit(baseUrl)
 11 | 
 12 |             // Open the form and select the correct method
 13 |             cy.get('.boundary-form details').click()
 14 | 
 15 |             cy.get(`#method-${method}`).scrollIntoView().check()
 16 | 
 17 |             // Close the form again so the tests start with a fresh state
 18 |             cy.get('.boundary-form details').click()
 19 |         })
 20 | 
 21 |         describe(`${method} method`, () => {
 22 |             it('Setting a positive left boundary reduces the number of boxes that are in view', () => {
 23 |                 cy.visit(baseUrl).scrollTo(0, 0)
 24 | 
 25 |                 let inViewCount = 0
 26 |                 let outOfViewCount = 0
 27 | 
 28 |                 cy.get('#box-container .out-of-view')
 29 |                     .then(($elem) => {
 30 |                         outOfViewCount = $elem.length
 31 |                     })
 32 |                     .then(() => {
 33 |                         cy.get('#box-container .in-view')
 34 |                             .then(($elem) => {
 35 |                                 inViewCount = $elem.length
 36 |                             })
 37 |                             .then(() => {
 38 |                                 // Open the form
 39 |                                 cy.get('.boundary-form details').click()
 40 | 
 41 |                                 cy.get('#boundary-left-value').type('10').trigger('change').trigger('blur')
 42 | 
 43 |                                 // Now there should be fewer boxes in view...
 44 |                                 cy.get('#box-container .in-view').should('have.length.below', inViewCount)
 45 | 
 46 |                                 // ...but make sure it's a sane number
 47 |                                 cy.get('#box-container .in-view').should('have.length.above', 1)
 48 | 
 49 |                                 // And there should be more boxes out of view
 50 |                                 cy.get('#box-container .out-of-view').should('have.length.above', outOfViewCount)
 51 |                             })
 52 |                     })
 53 |             })
 54 | 
 55 |             it('Ignoring the left boundary removes the effect it had', () => {
 56 |                 cy.visit(baseUrl).scrollTo(0, 0)
 57 | 
 58 |                 let inViewCount = 0
 59 |                 let outOfViewCount = 0
 60 | 
 61 |                 cy.get('#box-container .out-of-view')
 62 |                     .then(($elem) => {
 63 |                         outOfViewCount = $elem.length
 64 |                     })
 65 |                     .then(() => {
 66 |                         cy.get('#box-container .in-view')
 67 |                             .then(($elem) => {
 68 |                                 inViewCount = $elem.length
 69 |                             })
 70 |                             .then(() => {
 71 |                                 // Open the form
 72 |                                 cy.get('.boundary-form details').click()
 73 | 
 74 |                                 cy.get('#boundary-left-value')
 75 |                                     .type('{selectall}10')
 76 |                                     .trigger('change')
 77 |                                     .trigger('blur')
 78 |                                     .then(() => {
 79 |                                         // Now there should be fewer boxes in view...
 80 |                                         cy.get('#box-container .in-view').should('have.length.below', inViewCount)
 81 | 
 82 |                                         // ...but make sure it's a sane number
 83 |                                         cy.get('#box-container .in-view').should('have.length.above', 1)
 84 | 
 85 |                                         // And there should be more boxes out of view
 86 |                                         cy.get('#box-container .out-of-view').should(
 87 |                                             'have.length.above',
 88 |                                             outOfViewCount,
 89 |                                         )
 90 | 
 91 |                                         // Now ignore the boundary
 92 |                                         cy.get('#left-ignore')
 93 |                                             .check()
 94 |                                             .then(() => {
 95 |                                                 // The counts should be back to how they were at the beginning
 96 |                                                 cy.get('#box-container .in-view').should('have.length', inViewCount)
 97 |                                                 cy.get('#box-container .out-of-view').should(
 98 |                                                     'have.length',
 99 |                                                     outOfViewCount,
100 |                                                 )
101 |                                             })
102 |                                     })
103 |                             })
104 |                     })
105 |             })
106 | 
107 |             it('Scrolling right a lot, then setting a small positive left boundary, has no effect on the number of boxes that are in view', () => {
108 |                 cy.visit(baseUrl).scrollTo(0, 0)
109 | 
110 |                 let inViewCount = 0
111 |                 let outOfViewCount = 0
112 | 
113 |                 cy.get('#box-container .out-of-view')
114 |                     .then(($elem) => {
115 |                         outOfViewCount = $elem.length
116 |                     })
117 |                     .then(() => {
118 |                         cy.get('#box-container .in-view')
119 |                             .then(($elem) => {
120 |                                 inViewCount = $elem.length
121 |                             })
122 |                             .then(() => {
123 |                                 // Shift focus to the page before scrolling
124 |                                 cy.get('#box-container').first().focus()
125 | 
126 |                                 // First, scroll further than the boundary we'll be setting later
127 |                                 cy.scrollTo('bottomRight', { duration: scrollSpeed })
128 | 
129 |                                 // Open the form
130 |                                 cy.get('.boundary-form details').click()
131 | 
132 |                                 // Set a boundary that is smaller than the amount we have scrolled
133 |                                 cy.get('#boundary-left-value').type('10').trigger('change')
134 | 
135 |                                 // Now there should be the same number of boxes in view
136 |                                 cy.get('#box-container .in-view').should('have.length', inViewCount)
137 | 
138 |                                 // And there should be same number of boxes out of view
139 |                                 cy.get('#box-container .out-of-view').should('have.length', outOfViewCount)
140 |                             })
141 |                     })
142 |             })
143 | 
144 |             it('Scrolling right, setting a positive left boundary, and then scrolling back only part way, results in the same number of boxes that are in view', () => {
145 |                 cy.visit(baseUrl).scrollTo(0, 0)
146 | 
147 |                 let inViewCount = 0
148 |                 let outOfViewCount = 0
149 | 
150 |                 cy.get('#box-container .out-of-view')
151 |                     .then(($elem) => {
152 |                         outOfViewCount = $elem.length
153 |                     })
154 |                     .then(() => {
155 |                         cy.get('#box-container .in-view')
156 |                             .then(($elem) => {
157 |                                 inViewCount = $elem.length
158 |                             })
159 |                             .then(() => {
160 |                                 cy.log(
161 |                                     `Finished counting, found ${inViewCount} in-view boxes and ${outOfViewCount} out-of-view boxes. About to perform first scroll.`,
162 |                                 )
163 |                                 cy.scrollTo('bottomRight', { duration: scrollSpeed }).then(() => {
164 |                                     cy.log(`Finished first scroll. Now filling in the boundary form.`)
165 |                                     console.log(`Finished first scroll. Now filling in the boundary form.`)
166 | 
167 |                                     // Open the form
168 |                                     cy.get('.boundary-form details').click()
169 | 
170 |                                     cy.get('#boundary-left-value').type('10').trigger('change')
171 | 
172 |                                     // Shift focus back to the page before scrolling
173 |                                     cy.get('#box-container').first().focus()
174 | 
175 |                                     cy.log('About to perform second scroll')
176 |                                     console.log('About to perform second scroll')
177 | 
178 |                                     cy.get('body').scrollTo('50%', 0)
179 | 
180 |                                     cy.log(
181 |                                         `Finished second scroll. Now looking for in-view boxes to make sure there are exactly ${inViewCount} of them`,
182 |                                     )
183 |                                     console.log(
184 |                                         `Finished second scroll. Now looking for in-view boxes to make sure there are exactly ${inViewCount} of them`,
185 |                                     )
186 |                                     // Now there should be fewer boxes in view
187 |                                     cy.get('#box-container .in-view').should('have.length', inViewCount)
188 | 
189 |                                     cy.log(
190 |                                         `Lastly, looking for out-of-view boxes to make sure there are exactly ${outOfViewCount} of them`,
191 |                                     )
192 |                                     console.log(
193 |                                         `Lastly, looking for out-of-view boxes to make sure there are exactly ${outOfViewCount} of them`,
194 |                                     )
195 | 
196 |                                     // And there should be more boxes out of view
197 |                                     cy.get('#box-container .out-of-view').should('have.length', outOfViewCount)
198 |                                     cy.log(`Done`)
199 |                                     console.log(`Done`)
200 |                                 })
201 |                             })
202 |                     })
203 |             })
204 |         })
205 |     })
206 | })
207 | 


--------------------------------------------------------------------------------