1.0.6 • Published 8 years ago
phosphor-nodewrapper v1.0.6
phosphor-nodewrapper
A base class for creating objects which wrap a DOM node.
Package Install
Prerequisites
npm install --save phosphor-nodewrapper
Source Build
Prerequisites
git clone https://github.com/phosphorjs/phosphor-nodewrapper.git
cd phosphor-nodewrapper
npm install
Rebuild
npm run clean
npm run build
Run Tests
Follow the source build instructions first.
# run tests in Firefox
npm test
# run tests in Chrome
npm run test:chrome
# run tests in IE
npm run test:ie
Build Docs
Follow the source build instructions first.
npm run docs
Navigate to docs/index.html
.
Supported Runtimes
The runtime versions which are currently known to work are listed below. Earlier versions may also work, but come with no guarantees.
- IE 11+
- Firefox 32+
- Chrome 38+
Bundle for the Browser
Follow the package install instructions first.
npm install --save-dev browserify
browserify myapp.js -o mybundle.js
Usage Examples
Note: This module is fully compatible with Node/Babel/ES6/ES5. Simply omit the type declarations when using a language other than TypeScript.
import { NodeWrapper } from 'phosphor-nodewrapper';
class Button extends NodeWrapper {
static createNode(): HTMLElement {
var node = document.createElement('button');
var icon = document.createElement('span');
var text = document.createElement('span');
node.appendChild(icon);
node.appendChild(text);
return node;
}
constructor(text?: string) {
super();
this.addClass('Button');
if (text) this.text = text;
}
get text(): string {
return this.node.lastChild.textContent;
}
set text(text: string) {
this.node.lastChild.textContent = text;
}
get disabled(): boolean {
return this.hasClass('mod-disabled');
}
set disabled(disabled: boolean) {
this.toggleClass('mod-disabled', disabled);
}
}