Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fisker/meter-polyfill
Polyfill for the meter element
https://github.com/fisker/meter-polyfill
html5 meter meter-polyfill
Last synced: 6 days ago
JSON representation
Polyfill for the meter element
- Host: GitHub
- URL: https://github.com/fisker/meter-polyfill
- Owner: fisker
- License: mit
- Created: 2016-10-22T00:55:13.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-15T23:10:44.000Z (almost 2 years ago)
- Last Synced: 2024-10-31T12:44:12.742Z (16 days ago)
- Topics: html5, meter, meter-polyfill
- Language: JavaScript
- Size: 443 KB
- Stars: 6
- Watchers: 4
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# meter-polyfill
>
Polyfill for the meter element
[](https://www.npmjs.com/package/meter-polyfill)
[](https://www.npmjs.com/package/meter-polyfill) [](https://greenkeeper.io/)
### NPM
```
npm install --save meter-polyfill
````
### Bower
```
bower install --save meter-polyfill
````
## test
https://fisker.github.io/meter-polyfill/test/meter/meter.html
for browsers supports `meter`, use `fmeter` to test
https://fisker.github.io/meter-polyfill/test/fmeter/meter.html
## api
```javascript
meterPolyfill(); // document contains meter
meterPolyfill(document.getElementById('container')); // dom contains meter
meterPolyfill(document.getElementsByTagName('div')); // domlist contains meter
meterPolyfill(meter); // meter
meterPolyfill(document.getElementsByTagName('meter')); // meters
meterPolyfill([meter1,meter2])// arrays
meterPolyfill([div1,div2])// arrays
meterPolyfill.version // version number
meterPolyfill.CLASSES // class list of value element
meterPolyfill.LEVEL_SUBOPTIMUM // LEVEL_SUBOPTIMUM;
meterPolyfill.LEVEL_OPTIMUM // LEVEL_OPTIMUM;
meterPolyfill.LEVEL_SUBSUBOPTIMUM // LEVEL_SUBSUBOPTIMUM;
meterPolyfill.calc // calculate meter/propValue
var calcResult = meterPolyfill.calc(meter); // meter
var calcResult = meterPolyfill.calc(propValues); // Object propValues
calcResult[min/max/low/high/optimum/value] // for browsers not support getters
calcResult.percentage // value width percentage(0-100)
calcResult.level // value level
calcResult.className // value className
```
## usage
```html
console.log(meterPolyfill);
```
amd loader
```html
require(['https://unpkg.com/meter-polyfill/dist/meter-polyfill.min.js'], function(meterPolyfill) {
console.log(meterPolyfill);
});
```
## known issue(s):
1. minify version does works on ie < 9
use `meter-polyfill.js` instead. until uglifyjs fix this bug
2. currently firefox shows diffently from chrome
3. old IEs
1. ie <= 8
problem: accessing properties get attribute value
solution: use meterPolyfill.calc(meter)[prop] instead
2. ie <= 7
problem: meter.labels is not live
solution: currently no solution supplied
4. innerHTML created Meter is not polyfilled imidiately.
1. call `meterPolyfill(parentNode)` manually.
2. render to the dom tree, it will be polyfilled.
5. list functions returns diffently from native, and there is no plan to change.
1. Function.prototype.toString.call(HTMLMeterElement)
2. meter.toString()
3. Object.prototype.toString.call(meter)