Skip to content

Commit

Permalink
Merge pull request #3 from ryanve/next
Browse files Browse the repository at this point in the history
0.4.0 release
  • Loading branch information
ryanve authored Sep 12, 2016
2 parents 2d6af18 + 07d9b6f commit 111028c
Show file tree
Hide file tree
Showing 12 changed files with 141 additions and 168 deletions.
7 changes: 7 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
root = true

[*]
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
2 changes: 0 additions & 2 deletions GruntFile.js

This file was deleted.

19 changes: 19 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
32 changes: 19 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
# res
#### [CSS resolution](http://www.w3.org/TR/css3-values/#resolution) detection in JavaScript
[CSS resolution](http://www.w3.org/TR/css3-values/#resolution) detection in JavaScript

```sh
npm install res --save
```

## API
<a name="methods"></a>

<a name="dpi"></a>
#### `res.dpi()`
<b>@return</b> `number` resolution in [dpi](http://www.w3.org/TR/css3-values/#dpi)
### `res.dpi()`
- Get resolution in [dpi](http://www.w3.org/TR/css3-values/#dpi)
- <b>@return</b> number

<a name="dpcm"></a>
#### `res.dpcm()`
<b>@return</b> `number` resolution in [dpcm](http://www.w3.org/TR/css3-values/#dpcm)
### `res.dpcm()`
- Get resolution in [dpcm](http://www.w3.org/TR/css3-values/#dpcm)
- <b>@return</b> number

<a name="dppx"></a>
#### `res.dppx()`
<b>@return</b> `number` resolution in [dppx](http://www.w3.org/TR/css3-values/#dppx)
### `res.dppx()`
- Get resolution in [dppx](http://www.w3.org/TR/css3-values/#dppx)
- <b>@return</b> number

## Usage

Expand All @@ -27,7 +33,7 @@ res.dpcm() // 37.79527559055118

### Technical notes
- [dppx](http://www.w3.org/TR/css3-values/#dppx) equals [`devicePixelRatio`](http://dev.w3.org/csswg/cssom-view/#dom-window-devicepixelratio)
- <b>dppx</b> is the preferred resolution unit for web design
- [dppx](http://www.w3.org/TR/css3-values/#dppx) is the preferred resolution unit for web design
- [User zoom affects resolution](../../issues/1)

### Use with care
Expand Down Expand Up @@ -56,7 +62,7 @@ res.dpcm() // 37.79527559055118
</table>

## Compatibility
#### Browsers with resolution detectable by [res](#res)
#### Browsers with resolution detectable by <b>res</b>

- Webkit (Chrome/Safari/Android)
- Firefox 18+
Expand All @@ -66,11 +72,11 @@ res.dpcm() // 37.79527559055118
**Methods return `0` where undetectable.**

## Related resources
- [actual](https://github.com/ryanve/actual)
- [CSS4 resolution](http://dev.w3.org/csswg/mediaqueries4/#resolution)
- [CSS3 resolution](http://w3.org/TR/css3-values/#resolution) and [units](http://w3.org/TR/css3-values/#absolute-lengths)
- [Resolution lab](http://ryanve.com/lab/resolution/)
- [Demo media queries](http://ryanve.com/lab/@media/#mq-resolution)
- [ryanve/actual](https://github.com/ryanve/actual)
- [Resolution lab](http://ryanve.com/lab/resolution/)

## License
MIT
MIT
44 changes: 25 additions & 19 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,51 +1,57 @@
{
"name": "res",
"description": "Device resolution detection module",
"version": "0.3.0",
"version": "0.4.0",
"homepage": "https://github.com/ryanve/res",
"license": "MIT",
"author": "Ryan Van Etten",
"keywords": ["device", "resolution", "detection", "ender"],
"keywords": [
"device",
"screen",
"browser",
"resolution",
"detection",
"responsive",
"retina",
"device-pixel-ratio",
"ender",
"mobile",
"detect",
"dpr"
],
"main": "res.js",
"scripts": {
"pretest": "jshint res.js && jshint test.js",
"test": "node test.js"
},
"repository": {
"type": "git",
"url": "https://github.com/ryanve/res.git"
},
"dependencies": {},
"optionalDependencies": {
"actual": "^0.2.0"
},
"devDependencies": {
"actual": "^0.2.0",
"aok": "^1.9.0",
"universal": "^0.1.0",
"grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-concat": "^0.4.0",
"grunt-contrib-jshint": "^0.10.0"
"jshint": "^2.9.3",
"sos": "0.0.1"
},
"jshintConfig": {
"asi": true,
"boss": true,
"browser": true,
"debug": false,
"devel": false,
"eqnull": true,
"evil": false,
"expr": true,
"globals": {},
"jquery": false,
"lastsemic": true,
"latedef": "nofunc",
"laxcomma": true,
"maxcomplexity": 10,
"maxerr": 10,
"maxerr": 4,
"maxlen": 115,
"maxparams": 4,
"node": true,
"sub": true,
"supernew": true,
"trailing": true,
"undef": true,
"unused": true,
"worker": false
"unused": true
}
}
}
56 changes: 19 additions & 37 deletions res.js
Original file line number Diff line number Diff line change
@@ -1,44 +1,26 @@
/*!
* res 0.3.0+201410120233
* https://github.com/ryanve/res
* MIT License, 2014 Ryan Van Etten
*/
!function(root, name, make) {
if (typeof module != 'undefined' && module.exports) module.exports = make(require)
else root[name] = make(function(id) { return root[id] })
}(this, 'res', function(require) {
/**
* @param {string} unit CSS resolution unit like "dppx", "dpi", or "dpcm"
* @return {number} as measured by matchMedia by github.com/ryanve/actual
*/
function res(unit) {
return require('actual')('resolution', unit.valueOf(), one[unit])
if (typeof module != 'undefined' && module.exports) module.exports = make()
else root[name] = make()
}(this, 'res', function() {

var one = {dpi: 96, dpcm: 96 / 2.54}

function ie() {
return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
}

/**
* @return {number} dppx resolution a.k.a. devicePixelRatio
*/
function ratio() {
if (typeof window == 'undefined') return 0

function dppx() {
// devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
// logicalXDPI/logicalYDPI: IE6+ (Assuming 1 could suffice here)
return +window.devicePixelRatio || Math.sqrt(screen.deviceXDPI*screen.deviceYDPI)/one.dpi || 0
return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
}

function dpcm() {
return dppx() * one.dpcm
}

/**
* @param {string} unit CSS resolution property name from `one`
*/
function expose(unit) {
var conversion = one[unit];
res[unit] = 1 == conversion ? ratio : function() {
// convert resolution to `units` units
return ratio()*conversion
}
function dpi() {
return dppx() * one.dpi
}

var one = {'dppx':1, 'dpi':96, 'dpcm':96/2.54}
expose('dppx')
expose('dpcm')
expose('dpi')
return res
});
return {'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm}
});
6 changes: 0 additions & 6 deletions res.min.js

This file was deleted.

39 changes: 0 additions & 39 deletions src/index.js

This file was deleted.

16 changes: 16 additions & 0 deletions test.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en-US">
<title>Tests</title>
<style>
html { font: 1em/1.6 monospace; background: PapayaWhip; color: MediumVioletRed }
body { width: 94%; margin: auto }
</style>

<h1>Tests</h1>
Open the console

<script src="res.js"></script>
<script src="node_modules/actual/actual.js"></script>
<script src="node_modules/sos/sos.js"></script>
<script src="node_modules/aok/aok.js"></script>
<script src="test.js"></script>
36 changes: 36 additions & 0 deletions test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
!function(root, name) {
var common = typeof module != 'undefined' && !!module.exports
var actual = common ? require('actual') : root.actual
var sos = common ? require('sos') : root.sos
var aok = common ? require('aok') : root.aok
var res = common ? require('./') : root[name]
var precision = 1/10

function isNatural(n) {
return typeof n == 'number' && n >= 0 && n === n
}

function isClose(a, b) {
var diff = a - b
if (diff !== diff) throw new Error('cannot compare')
return precision >= Math.abs(diff)
}

aok.pass(['dpi', 'dpcm', 'dppx'], function(unit) {
sos('group', unit)
var rNum = res[unit]()
var aNum = actual('resolution', unit)
aok(unit + ' return', isNatural(rNum))
if (rNum && aNum) aok(unit + ' accuracy', isClose(rNum, aNum))
sos.info(unit, rNum, 'res')
sos.info(unit, aNum, 'actual')
sos('groupEnd')
})

sos('group', 'unit conversion')
aok('dppx to dpi', isClose(96*res.dppx(), res.dpi()))
aok('dpcm to dpi', isClose(2.54*res.dpcm(), res.dpi()))
sos('groupEnd')

sos.info('All tests passed :)')
}(this, 'res');
29 changes: 0 additions & 29 deletions test/index.html

This file was deleted.

Loading

0 comments on commit 111028c

Please sign in to comment.