1.2.0 • Published 8 years ago
phosphor-domutil v1.2.0
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.
npm install --save-dev browserify browserify-css
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.
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 }
}
}
1.2.0
8 years ago
1.1.0-alpha.3
8 years ago
1.1.0-alpha.2
8 years ago
1.1.0-alpha.1
8 years ago
1.1.0-alpha.0
8 years ago
1.0.1
9 years ago
1.0.0
9 years ago
0.9.6
9 years ago
0.9.5
9 years ago
0.9.4
9 years ago
0.9.3
9 years ago
0.9.2
9 years ago
0.9.1
9 years ago
0.9.0
9 years ago