https://github.com/bahrus/be-fetching
Enhances the input element with type=url with fetching support.
https://github.com/bahrus/be-fetching
Last synced: 3 months ago
JSON representation
Enhances the input element with type=url with fetching support.
- Host: GitHub
- URL: https://github.com/bahrus/be-fetching
- Owner: bahrus
- License: mit
- Created: 2022-05-10T14:58:10.000Z (about 3 years ago)
- Default Branch: baseline
- Last Pushed: 2024-05-20T00:19:39.000Z (about 1 year ago)
- Last Synced: 2024-05-20T22:21:47.309Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 386 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# be-fetching [WIP]
[](https://github.com/bahrus/be-fetching/actions/workflows/CI.yml)
[](https://bundlephobia.com/result?p=be-fetching)
*be-fetch* provides fetch support to the adorned element in a number of different ways:
## Example 1 - Enhancing the input element with type url
```html
```
When a valid url is entered, *be-fetching* fetches it. Result goes to oInput.beEnhanced.beFetching.value. oInput fires non bubbling event "enh-by-be-fetching.value-changed" when value changes. While fetch is in progress, adds css class "be-fetching-fetch-in-progress" to the adorned element.
## Example 2 - Same as example 1, but specifying the url before and after the input element.
Suppose we want the input element *be-fetching* adorns to use the input element to only provide a part of the url it should fetch?
*be-fetching* supports that as well:
```html
```
Example 3 -- specify a target [TODO]
```html
...
```
When a target is specified (as above), it will automatically set the target's aria-busy to true until the fetch is complete, and also set aria-live=polite if no other value is specified.
## Running locally
Any web server than can serve static files will do, but...
1. Install git.
2. Do a git clone or a git fork of repository https://github.com/bahrus/be-fetching
3. Install node.js
4. Open command window to folder where you cloned this repo.
5. > npm install
6. > npm run serve
7. Open http://localhost:3030/demo/ in a modern browser.
## Using from ESM Module:
```JavaScript
import 'be-fetching/be-fetching.js';
```
## Using from CDN:
```html
import 'https://esm.run/be-fetching';
```