# js-client-widget

> Extendable javascript class to easily build some Client script + Popin Widget

Latest version **1.1.17** (published 2023-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install js-client-widget
pnpm add js-client-widget
yarn add js-client-widget
bun add js-client-widget
```

## 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 | 1.1.17 |
| Published | 2023-04-28 |
| First published | 2022-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 165.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | ldbglobe, david_le |

## Links

- npm: https://www.npmjs.com/package/js-client-widget
- Repository: https://github.com/ldbglobe/js-client-widget
- npm.io page: https://npm.io/package/js-client-widget

## Dependencies (2)

- [js-class.messenger](https://npm.io/package/js-class.messenger.md) ^1.0.7
- [js-class.event-dispatcher](https://npm.io/package/js-class.event-dispatcher.md) ^1.0.0

## Recent versions

- 1.1.17 (latest) — 2023-04-28
- 1.1.16 — 2022-06-17
- 1.1.15 — 2022-06-13
- 1.1.14 — 2022-06-13
- 1.1.13 — 2022-05-18
- 1.1.12 — 2022-05-18
- 1.1.11 — 2022-05-17
- 1.1.10 — 2022-05-17
- 1.1.9 — 2022-05-09
- 1.1.8 — 2022-05-06
- 1.1.7 — 2022-05-06
- 1.1.6 — 2022-05-05
- 1.1.5 — 2022-05-05
- 1.1.4 — 2022-05-05
- 1.1.3 — 2022-05-04
- … 14 more at https://npm.io/package/js-client-widget/versions

## README

# JS-Client-Widget

Extendable javascript class to easily build some Client script + Popin Widget

## Install

```/bash
npm i js-client-widget
```

```/bash
yarn add js-client-widget
```

## Usage

```js
// myClient.js
import { ClientBase } from "js-client-widget"
class Client extends ClientBase {
	constructor(param) {
		param = param || {};
		super(param);
	}
}
```

```js
// myWidget.js
import { WidgetBase } from "js-client-widget"
class Widget extends WidgetBase {
	constructor(param) {
		param = param || {};
		super(param);
	}
}
```

## Client/Widget interraction (Events handling)

```js
// adding an event listener on one side (client or widget)
// eg. in the constructor
this.on('TEST',() => console.log('TEST received '));
```

```js
/**
 * and just fire an event on the other site (client or widget)
 * eg. from a custom internal method or directly from the instance var using the .fire() method
 * myClient.fire(eventName, data, dest)
 * @param (string)eventName 
 * @param (mixed)data (must be JSON encodable)
 * @param (mixed)dest [null,"widget","client"] Target of the event
 */ 
myClient.fire('TEST',"optionnal additional data !!will be JSON.stringified!!");
```



## Demonstration

You can consult an extended client/widget demonstration here
[ldbglobe.github.io/js-client-widget/example/dist](https://ldbglobe.github.io/js-client-widget/example/dist)

Or a native implementation (direct call of the components classes)
[ldbglobe.github.io/js-client-widget/example-native](https://ldbglobe.github.io/js-client-widget/example-native)

Client
```html
<script>
var counter = 0;
var client = new ClientComponent({widgetUrl:'widget.html'});
client.on('counter++',function(){counter++; refresh(); })
client.on('counter--',function(){counter--; refresh(); })
function refresh(){
	document.querySelector('.counter').innerHTML = counter;
}
</script>
<button onclick="client.open();">Open</button>
<span class="counter">0</span>
```

Widget
```html
<script>
var widget = new WidgetComponent();
</script>
<button onclick="widget.fire('counter--');">-</button>
<button onclick="widget.fire('counter++');">+</button>
```

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