# @kiralt/bjax

> Ajax link system for modern website. Convert any link in your page to ajax link.

Latest version **2.0.0-alpha.3** (published 2019-10-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kiralt/bjax
pnpm add @kiralt/bjax
yarn add @kiralt/bjax
bun add @kiralt/bjax
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0-alpha.3 |
| Published | 2019-10-31 |
| First published | 2019-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 98.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 38 |
| Author | KiraLT |
| Maintainers | lukelt |
| Keywords | ajax, bjax, link, links, system, modern, vanilla js |

## Links

- npm: https://www.npmjs.com/package/@kiralt/bjax
- Repository: https://github.com/KiraLT/Bjax
- Issues: https://github.com/KiraLT/Bjax/issues
- npm.io page: https://npm.io/package/@kiralt/bjax

## Recent versions

- 2.0.0-alpha.3 (latest) — 2019-10-31
- 2.0.0-alpha.2 — 2019-10-29
- 2.0.0-alpha.1 — 2019-10-29

## README

# Welcome to Bjax 2.0

Ajax link system for modern website. Convert any link in your page to ajax link.

**New V2 version on pure VanilaJS, lightweight and super fast!**

## Install

### NPM

```shell
npm install @kiralt/bjax
```

### Browser

```html
<script src="https://unpkg.com/@kiralt/bjax/dist/bjax.full.js"></script>
```

In browser build, all funtions will be exported on `window.Bjax`.


## Usage

### Binding links

You can convert all links to Bjax links using `bindLinks` with `a` selector.

```js
bindLinks('a')
```

Or you can bind on data-bjax selector.

```js
bindLinks('[data-bjax]')
```

### Loading part of a page

You can specify `source` and `target` using data attributes: 

```html
<a href="/" data-bjax data-source="#source" data-target="#target">My link</a>
```

Or you can specify that information when binding:

```js
bindLinks('data-bjax', {
    source: '#source',
    target: '#target'
})
```

Also, you can use `data-selector` attribute or `selector` parameter to specify both `target` & `source` with one parameter.

### Manually loading

You can load link manually using `loadLink` function.

```js
loadLink('https://my.page/second-page', {
    target: '#part'
})
```

This will download whole page and insert it into element with `part` ID.

### Bind manually

Using `liveBind` and `loadLink` you can customize bindings as much as you wish.

```js
liveBind('[data-bjax]', 'click', function(event, element) {
    event.preventDefault()
    if (element instanceof HTMLAnchorElement) {
        loadLink(element.href, {
            selector: '#container'
        })
    }
})
```

## Functions

### loadLink(url, [options])

Downloads page from `url` and updates current page using downloaded HTML. 

```js
loadLink('https://my.page/second-page')
```

*Options:*

* **target** - DOM selector where should be inserted downloaded page HTML (default is `body`).
* **source** - DOM selected which indicates which part from downloaded page should be extracted (default is `body`).
* **selector** - Overwrites both `target` and `source` (default: `undefined`).
* **shouldUpdateUrl** - indicates if the url should be updated using `url` parameter using `pushState` (default is `true`).
* **loader** - custom loader instance (default is empty loader - `{}`).
* **successCallback** - callback which is called if the function finished the work without an error.
* **errorCallback** - Callback which is called if the function had an error and failed to finish.

### bindLinks(selector, [options])

Binds `loadLink` funtion on given `selector` using `liveBind`.

```js
bindLinks('a[data-bjax]')
```

**Supports all `loadLink` options.**

*Additional options:*

* **url** - target page URL, default is `undefined` and `urlAttribute` parameter is used.
* **urlAttribute** - `url` parameter value, which is taken from clicked element (default is `href`).
* **targetAttribute** - `target` parameter value, which is taken from clicked element (default is `data-target`).
* **sourceAttribute** - `source` parameter value, which is taken from clicked element (default is `data-source`).
* **selectorAttribute** - `selector` parameter value, which is taken from clicked element (default is `data-selector`).

### liveBind(target, eventName, callback)

Listens `eventName` events on `window` object. Because it binds on `window` object, you can change inner DOM and it won't effect this bind at all.

---
_Source: https://npm.io/package/@kiralt/bjax · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._