Skip to content

Commit

Permalink
Implement v2 with TypeScript
Browse files Browse the repository at this point in the history
* Update the implementation

* Improve code quality

* Remove deprecated property access

* Configure Codebeat

* Make some cosmetic updates

Co-authored-by: alpanayotov <alexander.panayotov@gmail.com>
  • Loading branch information
scriptex and alpanayotov authored Nov 24, 2022
1 parent 14bbc13 commit 9bcc30e
Show file tree
Hide file tree
Showing 23 changed files with 2,194 additions and 2,108 deletions.
28 changes: 28 additions & 0 deletions .codebeatsettings
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"TYPESCRIPT": {
"ABC": [
20,
40,
80,
120
],
"LOC": [
50,
80,
120,
160
],
"TOTAL_LOC": [
400,
500,
640,
900
],
"BLOCK_NESTING": [
6,
8,
10,
12
]
}
}
15 changes: 15 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"env": {
"node": true,
"browser": true
},
"extends": ["prettier", "plugin:@typescript-eslint/recommended"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "tsconfig.json",
"sourceType": "module"
},
"plugins": ["@typescript-eslint"],
"ignorePatterns": ["*.js", "*.mjs"],
"rules": {}
}
12 changes: 3 additions & 9 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
@@ -1,21 +1,14 @@
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Build

on:
push:
branches: [master]
pull_request:
branches: [master]
on: [push, pull_request]

jobs:
build:
runs-on: ubuntu-latest

strategy:
matrix:
node-version: [12.x, 14.x, 16.x]
node-version: [18.x]

steps:
- uses: actions/checkout@v3
Expand All @@ -24,4 +17,5 @@ jobs:
with:
node-version: ${{ matrix.node-version }}
- run: yarn
- run: yarn lint
- run: yarn build
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,5 @@ node_modules/
.Trashes
ehthumbs.db
Thumbs.db

dist
40 changes: 20 additions & 20 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ yarn-debug.log*
yarn-error.log*

# Dependency directory
node_modules/
node_modules

# Misc
.DS_Store
Expand All @@ -17,27 +17,27 @@ node_modules/
ehthumbs.db
Thumbs.db

# EditorConfig
# Config folders and files
.github
_config.yml
_.config.yml
.codebeatsettings
.editorconfig

# Git
.gitignore
.eslintrc
.gitattributes

# CI
.travis.yml

# lock files
yarn.lock

# Prettier
.prettierrc
.gitignore
.nvmrc
.prettierignore

# Config
.babelrc
.github
.prettierrc
.stylelintignore
.stylelintrc
.travis.yml
.whitesource
renovate.json
rollup.config.js
webpack.config.js
tsconfig.json
tslint.json
yarn.lock

!dist
demo
rollup.config.mjs
1 change: 1 addition & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ node_js:
install:
- yarn
script:
- yarn lint
- yarn build
12 changes: 6 additions & 6 deletions .whitesource
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"checkRunSettings": {
"vulnerableCheckRunConclusionLevel": "success"
},
"issueSettings": {
"minSeverityLevel": "LOW"
}
"generalSettings": {
"shouldScanRepo": true
},
"checkRunSettings": {
"vulnerableCheckRunConclusionLevel": "success"
}
}
50 changes: 17 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

# Infinite Scroll

A vanilla ES2017 module for loading more items as you scroll the page down.
> A module for loading more items as you scroll the page down.
## Install

Expand All @@ -23,22 +23,6 @@ or
yarn add @three11/infinite-scroll
```

or

Just download this repository and link the files located in dist folder:

```html
<script src="path-to-infinite-scroll/dist/infinite-scroll.min.js"></script>
```

or

Include it from Unpkg CDN

```html
<script src="//unpkg.com/@three11/infinite-scroll/dist/infinite-scroll.min.js"></script>
```

## Usage

First, `import` the module:
Expand All @@ -57,22 +41,22 @@ const infiniteScroll = new InfiniteScroll();

The default settings are:

```javascript
element : '.js-infinite', // The container of the instance
next : '.js-infinite__next', // The link to the next page
item : '.js-infinite__item', // The item
disabledClass : 'disabled', // Disabled class name
hiddenClass : 'hidden', // Hidden class name
responseType : 'text/html', // Type of the AJAX response
```

There is one callback:

```javascript
onComplete(container) {}
```

This is a function which runs after the items have been added to the DOM and accepts a single argument `container` which refers to the element which contains the instance of the module.
| Name | Type | Description | Default value |
| ---------------------- | ----------------------------- | ----------------------------------------------------------- | ---------------------- |
| `element` | string | CSS selector for the items container | '.js-infinite' |
| `next` | string | CSS selector for the next page link | '.js-infinite\_\_next' |
| `item` | string | CSS selector for the item which will be loaded | '.js-infinite\_\_item' |
| `disabledClass` | string | Class name to add to the next page link | 'disabled' |
| `hiddenClass` | string | Class name to add to the next page link | 'hidden' |
| `responseType` | DOMParserSupportedType | Type of the AJAX response | 'text/html' |
| `requestMethod` | 'GET', 'POST', 'PUT', 'PATCH' | HTTP request type | 'GET' |
| `viewportTriggerPoint` | number | Position in the viewport after which the loading will start | window.innerHeight / 2 |
| `debounceTime` | number | Time to wait before triggering the next loading (in ms) | 500 |
| `onComplete` | function | A function to run after successful load | null |

## Typescript

This module offers full Typescript support out of the box.

## License

Expand Down
14 changes: 14 additions & 0 deletions _.config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
plugins:
- jekyll-relative-links
relative_links:
enabled: true
collections: true
include:
- CONTRIBUTING.md
- README.md
- LICENSE.md
- COPYING.md
- CODE_OF_CONDUCT.md
- CONTRIBUTING.md
- ISSUE_TEMPLATE.md
- PULL_REQUEST_TEMPLATE.md
2 changes: 1 addition & 1 deletion _config.yml
Original file line number Diff line number Diff line change
@@ -1 +1 @@
theme: jekyll-theme-slate
theme: jekyll-theme-slate
123 changes: 123 additions & 0 deletions demo/docs.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Infinite Scroll Demo</title>

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light" aria-label="Menu">
<div class="container">
<a class="navbar-brand" href="index.html">Infinite Scroll</a>

<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="docs.html">Documentation</a>
</li>

<li class="nav-item">
<a class="nav-link" aria-current="page" href="https://github.com/three11/infinite-scroll">
Github
</a>
</li>

<li class="nav-item">
<a class="nav-link" href="https://www.npmjs.com/package/@three11/infinite-scroll">NPM</a>
</li>
</ul>
</div>
</div>
</nav>

<section class="bg-secondary py-5 text-center text-light">
<div class="container">
<h1 class="display-5 fw-bold">
<span class="bi bi-mouse"></span>
<br />
Infinite scroll
</h1>

<h2 class="display-7 fw-bold">Load more items as you scroll down the page</h2>

<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Usage:</p>

<p><code class="text-light bg-dark px-2 py-2">npm i @three11/infinite-scroll</code></p>

<p>or</p>

<p><code class="text-light bg-dark px-2 py-2">yarn add @three11/infinite-scroll</code></p>

<p>then</p>

<p>
<code class="text-light bg-dark px-2 py-2">
import InfiniteScroll from '@three11/infinite-scroll';
</code>
</p>

<p>and then</p>

<p>
<code class="text-light bg-dark px-2 py-2">const infiniteScroll = new InfiniteScroll();</code>
</p>

<p>or use custom settings</p>

<p>
<code>
<!-- prettier-ignore -->
<pre class="text-light text-start bg-dark px-2 py-2">
const infiniteScroll = new InfiniteScroll({
element: '.infinite-scroll-container',
next: '.infinite-scroll-next-page',
item: '.infinite-scroll-item',
disabledClass: 'is--disabled',
hiddenClass: 'is--hidden',
responseType: 'text/html',
viewportTriggerPoint: win.innerHeight - 200,
debounceTime: 100,
onComplete(container) {
console.log(container)
},
});</pre>
</code>
</p>
</div>
</div>
</section>

<div class="container">
<footer class="d-flex flex-wrap justify-content-center align-items-center py-3 my-4 border-top">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
</a>

<span class="mb-3 mb-md-0 text-muted">© 2022 Three 11</span>
</footer>
</div>
</body>
</html>
Loading

0 comments on commit 9bcc30e

Please sign in to comment.