https://github.com/convergencelabs/dom-utils
Utilities to bind a Convergence Model to the DOM.
https://github.com/convergencelabs/dom-utils
convergence dom realtime
Last synced: 6 months ago
JSON representation
Utilities to bind a Convergence Model to the DOM.
- Host: GitHub
- URL: https://github.com/convergencelabs/dom-utils
- Owner: convergencelabs
- License: mit
- Created: 2017-03-05T04:36:26.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-11-11T11:56:31.000Z (over 3 years ago)
- Last Synced: 2025-09-20T13:51:19.758Z (10 months ago)
- Topics: convergence, dom, realtime
- Language: TypeScript
- Size: 103 KB
- Stars: 4
- Watchers: 5
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Convergence DOM Utils
This project contains utilities to that make binding the DOM to a Convergence Model.
# Dependencies
This library depends on the following libraries:
* **@convergence/convergence**: The main Convergence client API.
# Building the Distribution
```shell
npm install
npm run dist
```
# Usage
```html
.edit { border: 1px solid black; height: 400px; width: 400px; margin-top: 15px; }
Content Editable Rich Text Area
Loading...
const editable = document.getElementById("editable");
const DOMAIN_URL = "http://localhost:8000/api/realtime/convergence/default";
Convergence.connectAnonymously(DOMAIN_URL).then(function (domain) {
return domain.models().open("content-editable", "test", function () {
return ConvergenceDomUtils.DomConverter.htmlToJson(
"Here is some initial text with a <b>bold</b> section and some <i>italics</i>."
);
});
}).then(function (model) {
const binder = new ConvergenceDomUtils.DomBinder(editable, model);
editable.contentEditable = true;
});
```
# API
## ConvergenceDomUtils.DomBinder
**`constructor(element: HTMLElement, data: RealTimeObject | RealTimeModel, autoBind: boolean = true)`**
Creates a new DomBinder associated with a specific HTMLElement and RealTimeObject. If an instance of RealTimeModel is passed in, the HTMLElemenet will be bound to the root element of the model. The current contents of the element will be replaced by the DOM representation contained in the RealTimeObject. The autoBind parameter configures whether or not the DomBinder will automatically bind upon construction. The default is true.
**`unbind(): void`**
Disconnects the HTMLElement from the RealTimeObject. The element and model will be left as is, but the two-way data binding will be disconnected. This method can only be called when the DomBinder is bound.
**`bind(): void`**
Sets up the two-way data binding between the element and RealTimeObject. This method can only be called when the DomBinder is not already bound.
**`isBound(): boolean`**
Determines if the HTMLElement and RealTimeObject are currently bound.
## ConvergenceDomUtils.DomConverter
**`static htmlToJson(html: string): any`**
Converts a string containing HTML into the JSON representation of the DOM Tree.
**`static nodeToJson(node: Node): any`**
Converts a DOM Node (e.g. Element, Text) into the JSON representation of the DOM Tree.
**`static jsonToNode(json: any): Node`**
Converts the JSON Representation of a DOM Tree into a DOM Node.
# Running the Example
To run the example you must first:
1. Build the distribution
2. Follow the steps in the example/config.example.js file
3. Open the example/index.html file in your browser
Note: to run the example you must have a running Convergence Server. The easiest way to get one running is using Docker:
```shell
docker run \
--name convergence \
-p 8000:80 \
convergencelabs/convergence-omnibus
```