Merge pull request #4 from dy/parse-number

Parse number

Author: mikolalysenko

README.md

@@ -9,8 +9,8 @@ Get the scale factor to convert any CSS unit to `px` (logical pixel units).
 ```javascript
 var toPX = require('to-px')
 
-console.log(toPX('em'))
-console.log(toPX('vh'))
+console.log(toPX('1em'))
+console.log(toPX('.23vh'))
 console.log(toPX('in'))
 ```
 
@@ -25,14 +25,15 @@ npm i to-px
 # API
 
 #### `var scaleFactor = require('to-px')(unit[, element])`
-Computes the number of pixels in the unit `unit`.
 
-* `unit` is a CSS unit type
+Computes the number of pixels in the `unit` string.
+
+* `unit` is a CSS unit type or a number followed by CSS unit, eg `vh` or `2in`
 * `element` is an optional element in which the unit is computed (default is `document.body`)
 
-**Returns** The number of pixels in one `unit`
+**Returns** The number of pixels in the `unit`
 
 **Note** Conversions for `%` are not supported since they are context dependent.
 
 # License
-(c) 2015 Mikola Lysenko. MIT License
+(c) 2015 Mikola Lysenko. MIT License

topx.js renamed to browser.js

@@ -4,7 +4,8 @@ var parseUnit = require('parse-unit')
 
 module.exports = toPX
 
-var PIXELS_PER_INCH = 96
+var PIXELS_PER_INCH = getSizeBrutal('in', document.body) // 96
+
 
 function getPropertyInPX(element, prop) {
   var parts = parseUnit(getComputedStyle(element).getPropertyValue(prop))
@@ -14,19 +15,22 @@ function getPropertyInPX(element, prop) {
 //This brutal hack is needed
 function getSizeBrutal(unit, element) {
   var testDIV = document.createElement('div')
-  testDIV.style['font-size'] = '128' + unit
+  testDIV.style['height'] = '128' + unit
   element.appendChild(testDIV)
-  var size = getPropertyInPX(testDIV, 'font-size') / 128
+  var size = getPropertyInPX(testDIV, 'height') / 128
   element.removeChild(testDIV)
   return size
 }
 
 function toPX(str, element) {
+  if (!str) return null
+
   element = element || document.body
-  str = (str || 'px').trim().toLowerCase()
+  str = (str + '' || 'px').trim().toLowerCase()
   if(element === window || element === document) {
-    element = document.body 
+    element = document.body
   }
+
   switch(str) {
     case '%':  //Ambiguous, not sure if we should use width or height
       return element.clientHeight / 100.0
@@ -55,6 +59,16 @@ function toPX(str, element) {
       return PIXELS_PER_INCH / 72
     case 'pc':
       return PIXELS_PER_INCH / 6
+    case 'px':
+      return 1
   }
-  return 1
-}
+
+  // detect number of units
+  var parts = parseUnit(str)
+  if (!isNaN(parts[0]) && parts[1]) {
+    var px = toPX(parts[1], element)
+    return typeof px === 'number' ? parts[0] * px : null
+  }
+
+  return null
+}

index.js

@@ -0,0 +1,35 @@
+'use strict'
+
+var parseUnit = require('parse-unit')
+
+module.exports = toPX
+
+var PIXELS_PER_INCH = 96
+
+var defaults = {
+  'ch': 8,
+  'ex': 7.15625,
+  'em': 16,
+  'rem': 16,
+  'in': PIXELS_PER_INCH,
+  'cm': PIXELS_PER_INCH / 2.54,
+  'mm': PIXELS_PER_INCH / 25.4,
+  'pt': PIXELS_PER_INCH / 72,
+  'pc': PIXELS_PER_INCH / 6,
+  'px': 1
+}
+
+function toPX(str) {
+  if (!str) return null
+
+  if (defaults[str]) return defaults[str]
+
+  // detect number of units
+  var parts = parseUnit(str)
+  if (!isNaN(parts[0]) && parts[1]) {
+    var px = toPX(parts[1])
+    return typeof px === 'number' ? parts[0] * px : null
+  }
+
+  return null
+}

package.json

@@ -2,7 +2,8 @@
   "name": "to-px",
   "version": "1.0.1",
   "description": "Convert any CSS unit to logical pixels (\"px\")",
-  "main": "topx.js",
+  "main": "index.js",
+  "browser": "browser.js",
   "directories": {
     "test": "test"
   },
@@ -14,7 +15,7 @@
     "tape": "^3.5.0"
   },
   "scripts": {
-    "test": "tape test/*.js"
+    "test": "tape test"
   },
   "repository": {
     "type": "git",

test/test.js renamed to test/index.js

@@ -1,7 +1,7 @@
 'use strict'
 
 var tape = require('tape')
-var toPX = require('../topx')
+var toPX = require('../')
 var parseUnit = require('parse-unit')
 var almostEqual = require('almost-equal')
 
@@ -10,17 +10,32 @@ var units = ['em', 'ch', 'ex', 'rem', 'px', 'vw', 'vh', 'vmin', 'vmax', 'in', 'c
 var fontSizes = ['20px', '10px', '1em', '3in']
 
 tape('test to-px', function(t) {
+  if (typeof document === 'undefined') return t.end()
 
   function testUnitsEmpirically(element) {
     var testDiv = document.createElement('div')
     element.appendChild(testDiv)
     for(var i=0; i<units.length; ++i) {
-      testDiv.style['font-size'] = '128' + units[i]
-      var expected = parseUnit(getComputedStyle(testDiv).getPropertyValue('font-size'))[0]/128
+      testDiv.style['height'] = '128' + units[i]
+      testDiv.style.position = 'absolute'
+      testDiv.style.width = '1px'
+      var expected = parseUnit(getComputedStyle(testDiv).getPropertyValue('height'))[0]/128
+      var value = units[i]
       var actual = toPX(units[i], element)
 
-      t.ok(almostEqual(actual, expected, 0.005, almostEqual.FLT_EPSILON), 
+      t.ok(almostEqual(actual, expected, 0.005, almostEqual.FLT_EPSILON),
         'testing: ' + units[i] + ' ' + actual + ' ~ ' + expected)
+
+      value = '1' + units[i]
+      actual = toPX(value, element)
+      t.ok(almostEqual(actual, expected, 0.005, almostEqual.FLT_EPSILON),
+        'testing: ' + value + ' ' + actual + ' ~ ' + expected)
+
+      value = Math.PI + units[i]
+      actual = toPX(value, element)
+      expected *= Math.PI
+      t.ok(almostEqual(actual, expected, 0.005, almostEqual.FLT_EPSILON),
+        'testing: ' + value + ' ' + actual + ' ~ ' + expected)
     }
     element.removeChild(testDiv)
   }
@@ -39,4 +54,16 @@ tape('test to-px', function(t) {
   testUnitsEmpirically(header)
 
   t.end()
-})
+})
+
+tape('edge cases', function (t) {
+  t.equal(toPX(), null, 'no value')
+  t.equal(toPX(''), null, 'empty string')
+  t.equal(toPX(null), null, 'null value')
+  t.equal(toPX('abc'), null, 'unknown units')
+  t.equal(toPX('5def'), null, 'wrong units')
+  t.equal(toPX('10'), null, 'number no units')
+  t.equal(toPX(10), null, 'number value')
+
+  t.end()
+})