From 0c625ee1777f3da0d97fb9cac239cb1c96093175 Mon Sep 17 00:00:00 2001 From: Chris Dennis Date: Sat, 7 Nov 2015 00:25:10 +0000 Subject: [PATCH 1/2] Added support for root ems --- elementQuery.js | 33 +++++++++++++++++++++++---------- 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/elementQuery.js b/elementQuery.js index 1776c9c..d4aef27 100644 --- a/elementQuery.js +++ b/elementQuery.js @@ -26,7 +26,7 @@ if (selector != "") { var parts; if (!number && !value) { - parts = /^([0-9]*.?[0-9]+)(px|em)$/.exec(pair) + parts = /^([0-9]*.?[0-9]+)(px|em|rem)$/.exec(pair) if (parts != null) { number = Number(parts[1]); if (number + "" != "NaN") { @@ -78,7 +78,7 @@ if (selectorText) { - var regex = /(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em)(\'|\")\])(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em)(\'|\")\])?/gi; + var regex = /(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em|rem)(\'|\")\])(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em|rem)(\'|\")\])?/gi; // Split out the full selectors separated by a comma ',' var selectors = selectorText.split(","); @@ -94,7 +94,7 @@ // result[2] = min-width|max-width|min-height|max-height // result[4] = number - // result[5] = px|em + // result[5] = px|em|rem // result[7] = has another // Ensure that it contains a valid numeric value to compare against @@ -117,7 +117,7 @@ } // Remove any sibling element queries - tail = tail.replace(/(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em)(\'|\")\])/gi, ""); + tail = tail.replace(/(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em|rem)(\'|\")\])/gi, ""); selector += tail; } } @@ -265,14 +265,25 @@ // For each min|max-width|height string for (j in queryData[i]) { - // For each number px|em value pair + // For each number px|em|rem value pair for (k in queryData[i][j]) { val = queryData[i][j][k][0]; - if (queryData[i][j][k][1] == "em") { - // Convert EMs to pixels - val = val * (window.getEmPixels ? getEmPixels(element) : 16); // NOTE: Using getEmPixels() has a small performance impact + // NOTE: Using getEmPixels() has a small performance impact + switch (queryData[i][j][k][1]) { + case 'em': +console.log('eq case em'); + // Convert EMs to pixels + val = val * (window.getEmPixels ? getEmPixels(element) : 16); + break; + case 'rem': +console.log('eq case rem'); + // Convert root EMs to pixels + val = val * (window.getEmPixels ? getEmPixels() : 16); + break; + default: + // assume 'px' - val is already in pixels } /* NOTE: Using offsetWidth/Height so an element can be adjusted when it reaches a specific size. @@ -336,7 +347,7 @@ // For each min|max-width|height string for (j in queryData[i]) { - // For each number px|em value pair + // For each number px|em|rem value pair for (k in queryData[i][j]) { if (data[i] === undefined) { @@ -374,6 +385,7 @@ window.getEmPixels = function (element) { +console.log('gep:', element); var extraBody; if (!element) { @@ -401,6 +413,7 @@ } // Return the em value in pixels +console.log('gep returns', value); return value; }; -}(document, document.documentElement)); \ No newline at end of file +}(document, document.documentElement)); From b7610bede9fcfce628c813291060bc9990f37856 Mon Sep 17 00:00:00 2001 From: Chris Dennis Date: Sat, 7 Nov 2015 15:09:57 +0000 Subject: [PATCH 2/2] Added support for root ems --- elementQuery.js | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/elementQuery.js b/elementQuery.js index 1776c9c..0fac550 100644 --- a/elementQuery.js +++ b/elementQuery.js @@ -26,7 +26,7 @@ if (selector != "") { var parts; if (!number && !value) { - parts = /^([0-9]*.?[0-9]+)(px|em)$/.exec(pair) + parts = /^([0-9]*.?[0-9]+)(px|em|rem)$/.exec(pair) if (parts != null) { number = Number(parts[1]); if (number + "" != "NaN") { @@ -78,7 +78,7 @@ if (selectorText) { - var regex = /(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em)(\'|\")\])(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em)(\'|\")\])?/gi; + var regex = /(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em|rem)(\'|\")\])(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em|rem)(\'|\")\])?/gi; // Split out the full selectors separated by a comma ',' var selectors = selectorText.split(","); @@ -94,7 +94,7 @@ // result[2] = min-width|max-width|min-height|max-height // result[4] = number - // result[5] = px|em + // result[5] = px|em|rem // result[7] = has another // Ensure that it contains a valid numeric value to compare against @@ -117,7 +117,7 @@ } // Remove any sibling element queries - tail = tail.replace(/(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em)(\'|\")\])/gi, ""); + tail = tail.replace(/(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em|rem)(\'|\")\])/gi, ""); selector += tail; } } @@ -265,14 +265,23 @@ // For each min|max-width|height string for (j in queryData[i]) { - // For each number px|em value pair + // For each number px|em|rem value pair for (k in queryData[i][j]) { val = queryData[i][j][k][0]; - if (queryData[i][j][k][1] == "em") { - // Convert EMs to pixels - val = val * (window.getEmPixels ? getEmPixels(element) : 16); // NOTE: Using getEmPixels() has a small performance impact + // NOTE: Using getEmPixels() has a small performance impact + switch (queryData[i][j][k][1]) { + case 'em': + // Convert EMs to pixels + val = val * (window.getEmPixels ? getEmPixels(element) : 16); + break; + case 'rem': + // Convert root EMs to pixels + val = val * (window.getEmPixels ? getEmPixels(document.body) : 16); + break; + default: + // assume 'px' - val is already in pixels } /* NOTE: Using offsetWidth/Height so an element can be adjusted when it reaches a specific size. @@ -336,7 +345,7 @@ // For each min|max-width|height string for (j in queryData[i]) { - // For each number px|em value pair + // For each number px|em|rem value pair for (k in queryData[i][j]) { if (data[i] === undefined) { @@ -403,4 +412,4 @@ // Return the em value in pixels return value; }; -}(document, document.documentElement)); \ No newline at end of file +}(document, document.documentElement));