Permalink
Browse files

more compression optimizations.

  • Loading branch information...
1 parent a85287f commit 935120e9e7bf3d88d1e8d7310ca690ff521b0582 @heygrady committed Dec 21, 2011
Showing with 43 additions and 25 deletions.
  1. +5 −4 Angle.js
  2. +38 −21 Length.js
View
@@ -4,15 +4,16 @@
unitValue = [180, Math.PI, 2, 0.5],
conversions = {},
runits = /^([\+\-]=)?(-?[\d+.\-]+)([a-z]+|%)(.*?)$/i,
- i = units.length,
+ parseValue,
+ i = 4,
j,
unit;
- Angle.parseValue = function (string) {
+ parseValue = Angle.parseValue = function (string) {
var matches = string.match(runits);
// TODO: matches[4] holds other values that are potentially in a list
return {
- //prefix: matches[1],
+ prefix: matches[1],
value: matches[2],
unit: matches[3]
};
@@ -34,7 +35,7 @@
Angle['to' + toUnit] = function (value) {
// overloading
if (!value.unit) {
- value = Length.parseValue(value);
+ value = parseValue(value);
}
var val = value.value * 1, // convert to a number
View
@@ -9,22 +9,27 @@
absoluteUnits = ['mm', 'cm', 'pt', 'pc', 'in', 'mozmm', 'rem', 'vh', 'vw', 'vm'],
absoluteValues = [1/25.4, 1/2.54, 1/72, 12/72],
+ conversions = {},
i = absoluteUnits.length,
len = i,
testElem = document.createElement('testunit'),
testStyle = testElem.style,
testProp = 'width',
runits = /^([\+\-]=)?(-?[\d+\.\-]+)([a-z]+|%)(.*?)$/i,
round = Math.round,
- toPx = 'ToPx',
+ _toPx = 'ToPx',
+ _fontSize = 'fontSize',
+ _fontFamily = 'fontFamily',
addEvent = window.addEventListener,
- multiplier = 1000; // IE9 gets weird with a multiplier over 1000
+ multiplier = 1000,
+ parseValue,
+ floatNum = parseFloat; // IE9 gets weird with a multiplier over 1000
// add the test element to the page
body.appendChild(testElem);
// make sure it's display block
- testStyle.display = 'block';
+ //testStyle.display = 'block';
// make sure it's invisible
testStyle.position = 'absolute';
@@ -69,15 +74,15 @@
value = 0;
}
testStyle[testProp] = 0; // reset it
- return parseFloat(value)/multiplier;
+ return floatNum(value)/multiplier;
}
// find and save the conversion of an absolute ratio to pixels
// we're pretending that rem
function testAbsoluteUnit(i) {
// All real absolute units are relative to inches
// 1 inch is usually 96px but it isn't always
- Length[absoluteUnits[i] + toPx] = i < 4 ? absoluteValues[i] * Length['in' + toPx] : pixelsPerUnit(absoluteUnits[i]);
+ conversions[absoluteUnits[i] + _toPx] = i < 4 ? absoluteValues[i] * conversions['in' + _toPx] : pixelsPerUnit(absoluteUnits[i]);
}
// loop through the absolute units and measure them
@@ -94,11 +99,25 @@
});
}
- Length.parseValue = function (string) {
+ parseValue = Length.parseValue = function (string) {
+ // handle side-based percentage keywords (used in background-position and transition-origin)
+ switch(string) {
+ case 'left': // no break
+ case 'top':
+ string = '0%';
+ break;
+ case 'right': // no break
+ case 'bottom':
+ string = '100%';
+ break;
+ case 'center':
+ string = '50%';
+ }
+
var matches = string.match(runits);
// TODO: matches[4] holds other values that are potentially in a list
return {
- //prefix: matches[1],
+ prefix: matches[1],
value: matches[2],
unit: matches[3]
};
@@ -107,28 +126,30 @@
// TODO: handle list values like margin and padding
Length.toPx = function (value, element) {
// overloading
+ // TODO: won't work with unitless numbers
if (!value.unit) {
- value = Length.parseValue(value);
+ value = parseValue(value);
}
var val = value.value,
unit = value.unit,
- ratio = Length[unit + toPx];
+ ratio = conversions[unit + _toPx],
+ fontSize;
if (unit === 'px') {
ratio = 1;
} else if (!ratio && element) {
// font-relative units require the containing element
- var fontSize = cssValue(element, "fontSize");
+ fontSize = cssValue(element, _fontSize);
if (unit === 'em') {
// em is easy-ish
- ratio = parseFloat(fontSize);
+ ratio = floatNum(fontSize);
} else {
// ex and ch require measuring actual letters in the font
// copy the font-size and font-style
- testStyle.fontSize = fontSize;
- testStyle.fontFamily = cssValue(element, 'fontFamily', 1);
+ testStyle[_fontSize] = fontSize;
+ testStyle[_fontFamily] = cssValue(element, _fontFamily, 1);
// return the conversion
ratio = pixelsPerUnit(unit);
@@ -143,18 +164,14 @@
// TODO: it would be possible to calculate for most common properties, like height, width, top, bottom, margin, padding, etc
Length.percentageToPx = function (value, relativeValue) {
// overloading
+ // TODO: won't work with unitless numbers
if (!value.unit) {
- value = Length.parseValue(value);
+ value = parseValue(value);
}
// percentages are easy with a relative value
- // TODO: it would be possibble to convert all units given the target element and the css property
- if (value.unit === '%') {
- return parseFloat(relativeValue)*value.value/100;
- }
-
- // conversion failed, likely a non-percentage unit was supplied
- return false;
+ // or conversion failed, likely a non-percentage unit was supplied
+ return value.unit === '%' ? floatNum(relativeValue) * value.value / 100 : false;
};
})(this, this.document, this.document.body);

0 comments on commit 935120e

Please sign in to comment.