phosphor-domutil
Utilities for working with the DOM.
Package Install
Prerequisites
npm install --save phosphor-domutil
Source Build
Prerequisites
git clone https://github.com/phosphorjs/phosphor-domutil.git
cd phosphor-domutil
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.
Any bundler that understands how to require()
files with .js
and .css
extensions can be used with this package.
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.
Cursor Override:
import {
overrideCursor
} from 'phosphor-domutil';
// force the cursor to be 'wait' for the entire document
let override = overrideCursor('wait');
// clear the override by disposing the return value
override.dispose();
Hit Testing:
import {
hitTest
} from 'phosphor-domutil';
let div = document.createElement('div');
div.style.position = 'absolute';
div.style.left = '0px';
div.style.top = '0px';
div.style.width = '100px';
div.style.height = '100px';
document.body.appendChild(div);
hitTest(div, 50, 50); // true
hitTest(div, 150, 150); // false
Box Sizing:
import {
boxSizing
} from 'phosphor-domutil';
let div = document.createElement('div');
div.style.borderTop = 'solid 10px black';
document.body.appendChild(div);
let sizing = boxSizing(div);
sizing.borderTop; // 10
sizing.paddingLeft; // 0
// etc...
Size Limits:
import {
sizeLimits
} from 'phosphor-domutil';
let div = document.createElement('div');
div.style.minWidth = '90px';
document.body.appendChild(div);
let limits = sizeLimits(div);
limits.minWidth; // 90
limits.maxHeight; // Infinity
// etc...
Custom Drag Data:
import {
clearDragData, getDragData, setDragData
} from 'phosphor-domutil';
// pseudo-code
class SomeDragSource {
evtDragStart(event: DragEvent): void {
setDragData(event, 'application/x-my-custom-data', { foo: 12, bar: 42 });
}
evtDragEnd(event: DragEvent): void {
clearDragData(event);
}
}
// pseudo-code
class SomeDropTarget {
evtDrop(event: DragEvent): void {
let data = getDragData(event, 'application/x-my-custom-data');
console.log(data); // { foo: 12, bar: 42 }
}
}