diff --git a/README.md b/README.md index b8b1bf4..72e167c 100644 --- a/README.md +++ b/README.md @@ -64,11 +64,13 @@ elementQuery({"header":{"min-width":["500px","31.250em"],"max-width":["800px"]}} * JavaScript * Sizzle (http://sizzlejs.com/) or jQuery (http://jquery.com/) +Note: elementQuery can be loaded via requireJS-style AMD. The scripts define named modules called 'getEmPixels' and 'elementQuery'. The elementQuery module explicitly depends upon the getEmPixels module, so you actually only need to require() elementQuery. + ## Size and delivery Currently, the **master branch** of `elementQuery.js` compresses to around 2367 bytes (~2.3 KB) and the **prod branch** of `elementQuery.js` compresses to around 1788 bytes (~1.7 KB), after minify and gzip. -To minify, you might try these online tools: [Microsoft Ajax Minifier](http://ajaxmin.codeplex.com/), [Uglify](http://marijnhaverbeke.nl/uglifyjs), [Yahoo Compressor](http://refresh-sf.com/yui/), or [Closure Compiler](http://closure-compiler.appspot.com/home). Serve with gzip compression. +For development, include getEmPixels.js and elementQuery.js. For production, use the combined, minified JS in elementQuery.min.js, or roll your own - you might try these online tools: [Microsoft Ajax Minifier](http://ajaxmin.codeplex.com/), [Uglify](http://marijnhaverbeke.nl/uglifyjs), [Yahoo Compressor](http://refresh-sf.com/yui/), or [Closure Compiler](http://closure-compiler.appspot.com/home). Serve with gzip compression. ## Support diff --git a/elementQuery.js b/elementQuery.js index 1776c9c..e6f76f9 100644 --- a/elementQuery.js +++ b/elementQuery.js @@ -3,404 +3,382 @@ // Enable strict mode "use strict"; - // Use Sizzle standalone or from jQuery - var sizzle = window.Sizzle || jQuery.find; + var main = function () { + // Set the number of sizzle selectors to cache (default is 50) + //sizzle.selectors.cacheLength = 50; - // Set the number of sizzle selectors to cache (default is 50) - //sizzle.selectors.cacheLength = 50; + var queryData = {}; - var queryData = {}; + var cssRules = null; - var cssRules = null; - - var setCssRules = function () { - if (document.styleSheets[0]) { - cssRules = (document.styleSheets[0].cssRules !== undefined) ? "cssRules" : "rules"; + var setCssRules = function () { + if (document.styleSheets[0]) { + cssRules = (document.styleSheets[0].cssRules !== undefined) ? "cssRules" : "rules"; + } } - } - var addQueryDataValue = function (selector, type, pair, number, value) { + var addQueryDataValue = function (selector, type, pair, number, value) { - selector = trim(selector); + selector = trim(selector); - if (selector != "") { - var parts; - if (!number && !value) { - parts = /^([0-9]*.?[0-9]+)(px|em)$/.exec(pair) - if (parts != null) { - number = Number(parts[1]); - if (number + "" != "NaN") { - value = parts[2]; + if (selector != "") { + var parts; + if (!number && !value) { + parts = /^([0-9]*.?[0-9]+)(px|em)$/.exec(pair) + if (parts != null) { + number = Number(parts[1]); + if (number + "" != "NaN") { + value = parts[2]; + } } } - } - if (value) { - // Compile the sizzle selector - if (sizzle.compile) { - sizzle.compile(selector); - } + if (value) { + // Compile the sizzle selector + if (sizzle.compile) { + sizzle.compile(selector); + } - // Update the queryData object - if (queryData[selector] === undefined) { - queryData[selector] = {}; - } - if (queryData[selector][type] === undefined) { - queryData[selector][type] = {}; + // Update the queryData object + if (queryData[selector] === undefined) { + queryData[selector] = {}; + } + if (queryData[selector][type] === undefined) { + queryData[selector][type] = {}; + } + queryData[selector][type][pair] = [number, value]; } - queryData[selector][type][pair] = [number, value]; } - } - }; + }; - var updateQueryData = function (data, doUpdate) { + var updateQueryData = function (data, doUpdate) { - var i, j, k; - for (i in data) { - for (j in data[i]) { - if (typeof data[i][j] == "string") { - addQueryDataValue(i, j, data[i][j]); - } - else if (typeof data[i][j] == "object") { - for (k = 0; k < data[i][j].length; k++) { - addQueryDataValue(i, j, data[i][j][k]); + var i, j, k; + for (i in data) { + for (j in data[i]) { + if (typeof data[i][j] == "string") { + addQueryDataValue(i, j, data[i][j]); + } + else if (typeof data[i][j] == "object") { + for (k = 0; k < data[i][j].length; k++) { + addQueryDataValue(i, j, data[i][j][k]); + } } } } - } - - if (doUpdate == true) { - refresh(); - } - }; - - var processSelector = function (selectorText) { - - 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; - - // Split out the full selectors separated by a comma ',' - var selectors = selectorText.split(","); - var i, selector, result, number, prevIndex, k, tail, t; - for (i = 0; i < selectors.length; i++) { - - selector = null; - prevIndex = 0; - k = 0; - while (k == 0 || result != null) { - result = regex.exec(selectors[i]); - if (result != null) { - - // result[2] = min-width|max-width|min-height|max-height - // result[4] = number - // result[5] = px|em - // result[7] = has another - // Ensure that it contains a valid numeric value to compare against - number = Number(result[4]); - if (number + "" != "NaN") { - - if (selector == null) { - // New set: update the current selector - selector = selectors[i].substring(prevIndex, result.index); - - // Append second half of the selector - tail = selectors[i].substring(result.index + result[1].length); - if (tail.length > 0) { - - t = tail.indexOf(" "); - if (t != 0) { - if (t > 0) { - // Take only the current part - tail = tail.substring(0, t); + if (doUpdate == true) { + refresh(); + } + }; + + var processSelector = function (selectorText) { + + 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; + + // Split out the full selectors separated by a comma ',' + var selectors = selectorText.split(","); + var i, selector, result, number, prevIndex, k, tail, t; + for (i = 0; i < selectors.length; i++) { + + selector = null; + prevIndex = 0; + k = 0; + while (k == 0 || result != null) { + result = regex.exec(selectors[i]); + if (result != null) { + + // result[2] = min-width|max-width|min-height|max-height + // result[4] = number + // result[5] = px|em + // result[7] = has another + + // Ensure that it contains a valid numeric value to compare against + number = Number(result[4]); + if (number + "" != "NaN") { + + if (selector == null) { + // New set: update the current selector + selector = selectors[i].substring(prevIndex, result.index); + + // Append second half of the selector + tail = selectors[i].substring(result.index + result[1].length); + if (tail.length > 0) { + + t = tail.indexOf(" "); + if (t != 0) { + if (t > 0) { + // Take only the current part + tail = tail.substring(0, t); + } + + // Remove any sibling element queries + tail = tail.replace(/(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em)(\'|\")\])/gi, ""); + selector += tail; } - - // Remove any sibling element queries - tail = tail.replace(/(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em)(\'|\")\])/gi, ""); - selector += tail; } } - } - // Update the queryData object - addQueryDataValue(selector, result[2], result[4] + result[5], number, result[5]); - } + // Update the queryData object + addQueryDataValue(selector, result[2], result[4] + result[5], number, result[5]); + } - if (result[7] === undefined || result[7] == "") { - // Reached the end of the set - prevIndex = result.index + result[1].length; - selector = null; - } - else { - // Update result index to process next item in the set - regex.lastIndex = result.index + result[1].length; + if (result[7] === undefined || result[7] == "") { + // Reached the end of the set + prevIndex = result.index + result[1].length; + selector = null; + } + else { + // Update result index to process next item in the set + regex.lastIndex = result.index + result[1].length; + } } + k++; } - k++; } } - } - }; + }; - var processStyleSheet = function (styleSheet, force) { - - if (cssRules == null) { - setCssRules(); - } - if (styleSheet[cssRules] && styleSheet[cssRules].length > 0) { + var processStyleSheet = function (styleSheet, force) { + + if (cssRules == null) { + setCssRules(); + } + if (styleSheet[cssRules] && styleSheet[cssRules].length > 0) { - var ownerNode = styleSheet.ownerNode || styleSheet.owningElement; - if (force || (ownerNode.getAttribute("data-elementquery-bypass") === null && ownerNode.getAttribute("data-elementquery-processed") === null)) { + var ownerNode = styleSheet.ownerNode || styleSheet.owningElement; + if (force || (ownerNode.getAttribute("data-elementquery-bypass") === null && ownerNode.getAttribute("data-elementquery-processed") === null)) { - var i, j, rule; + var i, j, rule; - for (i = 0; i < styleSheet[cssRules].length; i++) { - rule = styleSheet[cssRules][i]; + for (i = 0; i < styleSheet[cssRules].length; i++) { + rule = styleSheet[cssRules][i]; - // Check nested rules in media queries etc - if (rule[cssRules] && rule[cssRules].length > 0) { - for (j = 0; j < rule[cssRules].length; j++) { - processSelector(rule[cssRules][j].selectorText); + // Check nested rules in media queries etc + if (rule[cssRules] && rule[cssRules].length > 0) { + for (j = 0; j < rule[cssRules].length; j++) { + processSelector(rule[cssRules][j].selectorText); + } + } + else { + processSelector(rule.selectorText); } } - else { - processSelector(rule.selectorText); - } - } - // Flag the style sheet as processed - ownerNode.setAttribute("data-elementquery-processed", ""); + // Flag the style sheet as processed + ownerNode.setAttribute("data-elementquery-processed", ""); + } } - } - }; + }; - // Refactor from jQuery.trim() - var trim = function (text) { - if (text == null) { - return ""; - } - else { - var core_trim = "".trim; - if (core_trim && !core_trim.call("\uFEFF\xA0")) { - return core_trim.call(text); + // Refactor from jQuery.trim() + var trim = function (text) { + if (text == null) { + return ""; } else { - return (text + "").replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ""); - } - } - }; - - // Refactor from jquery().addClass() and jquery().removeClass() - var clean = function (element, attr) { - // This expression is here for better compressibility - var val = element.getAttribute(attr); - return val ? (" " + val + " ").replace(/[\t\r\n]/g, " ") : " "; - }; - - // Refactor from jquery().addClass() - var addTo = function (element, attr, value) { - - if (element.nodeType === 1) { - var val = trim(value); - if (val != "") { - var cur = clean(element, attr); - - if (cur.indexOf(" " + val + " ") < 0) { - // Add the value if its not already there - element.setAttribute(attr, trim(cur + val)); + var core_trim = "".trim; + if (core_trim && !core_trim.call("\uFEFF\xA0")) { + return core_trim.call(text); + } + else { + return (text + "").replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ""); } } - } - }; - - // Refactor from jquery().removeClass() - var removeFrom = function (element, attr, value) { - - if (element.nodeType === 1) { - var val = trim(value); - if (val != "") { - var cur = clean(element, attr); - var updated = false; - while (cur.indexOf(" " + val + " ") >= 0) { - // Remove the value - cur = cur.replace(" " + val + " ", " "); - updated = true; + }; + + // Refactor from jquery().addClass() and jquery().removeClass() + var clean = function (element, attr) { + // This expression is here for better compressibility + var val = element.getAttribute(attr); + return val ? (" " + val + " ").replace(/[\t\r\n]/g, " ") : " "; + }; + + // Refactor from jquery().addClass() + var addTo = function (element, attr, value) { + + if (element.nodeType === 1) { + var val = trim(value); + if (val != "") { + var cur = clean(element, attr); + + if (cur.indexOf(" " + val + " ") < 0) { + // Add the value if its not already there + element.setAttribute(attr, trim(cur + val)); + } } - if (updated) { - // Update the attribute - element.setAttribute(attr, trim(cur)); + } + }; + + // Refactor from jquery().removeClass() + var removeFrom = function (element, attr, value) { + + if (element.nodeType === 1) { + var val = trim(value); + if (val != "") { + var cur = clean(element, attr); + var updated = false; + while (cur.indexOf(" " + val + " ") >= 0) { + // Remove the value + cur = cur.replace(" " + val + " ", " "); + updated = true; + } + if (updated) { + // Update the attribute + element.setAttribute(attr, trim(cur)); + } } } - } - }; + }; - var init = function () { + var init = function () { - // Process the style sheets - var i; - for (i = 0; i < document.styleSheets.length; i++) { - processStyleSheet(document.styleSheets[i]); - } + // Process the style sheets + var i; + for (i = 0; i < document.styleSheets.length; i++) { + processStyleSheet(document.styleSheets[i]); + } - refresh(); - } + refresh(); + } - var refresh = function () { + var refresh = function () { - var i, ei, j, k, elements, element, val; + var i, ei, j, k, elements, element, val; - // For each selector - for (i in queryData) { + // For each selector + for (i in queryData) { - // Get the items matching the selector - elements = sizzle(i); + // Get the items matching the selector + elements = sizzle(i); - if (elements.length > 0) { + if (elements.length > 0) { - // For each matching element - for (ei = 0; ei < elements.length; ei++) { - element = elements[ei]; + // For each matching element + for (ei = 0; ei < elements.length; ei++) { + element = elements[ei]; - // For each min|max-width|height string - for (j in queryData[i]) { + // For each min|max-width|height string + for (j in queryData[i]) { - // For each number px|em value pair - for (k in queryData[i][j]) { + // For each number px|em value pair + for (k in queryData[i][j]) { - val = queryData[i][j][k][0]; + 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 - } + 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 offsetWidth/Height so an element can be adjusted when it reaches a specific size. - /* For Nested queries scrollWidth/Height or clientWidth/Height may sometime be desired but are not supported. */ + /* NOTE: Using offsetWidth/Height so an element can be adjusted when it reaches a specific size. + /* For Nested queries scrollWidth/Height or clientWidth/Height may sometime be desired but are not supported. */ - if ((j == "min-width" && element.offsetWidth >= val) || - (j == "max-width" && element.offsetWidth <= val) || - (j == "min-height" && element.offsetHeight >= val) || - (j == "max-height" && element.offsetHeight <= val)) { - // Add matching attr value - addTo(element, j, k); - } - else { - // Remove non-matching attr value - removeFrom(element, j, k); + if ((j == "min-width" && element.offsetWidth >= val) || + (j == "max-width" && element.offsetWidth <= val) || + (j == "min-height" && element.offsetHeight >= val) || + (j == "max-height" && element.offsetHeight <= val)) { + // Add matching attr value + addTo(element, j, k); + } + else { + // Remove non-matching attr value + removeFrom(element, j, k); + } } } } } } - } - if (!window.addEventListener && window.attachEvent) { - // Force a repaint in IE7 and IE8 - var className = document.documentElement.className; - document.documentElement.className = " " + className; - document.documentElement.className = className; + if (!window.addEventListener && window.attachEvent) { + // Force a repaint in IE7 and IE8 + var className = document.documentElement.className; + document.documentElement.className = " " + className; + document.documentElement.className = className; + } } - } - // Expose some public functions - window.elementQuery = function (arg1, arg2) { + // Expose some public functions + var elementQuery = function (arg1, arg2) { - if (arg1 && typeof arg1 == "object") { - if (arg1.cssRules || arg1.rules) { - // Process a new style sheet - processStyleSheet(arg1, true); + if (arg1 && typeof arg1 == "object") { + if (arg1.cssRules || arg1.rules) { + // Process a new style sheet + processStyleSheet(arg1, true); - if (arg2 == true) { - refresh(); + if (arg2 == true) { + refresh(); + } + } else { + // Add new selector queries + updateQueryData(arg1, arg2); } - } else { - // Add new selector queries - updateQueryData(arg1, arg2); } - } - else if (!arg1 && !arg2) { - refresh(); - } - }; + else if (!arg1 && !arg2) { + refresh(); + } + }; - //NOTE: For development purposes only! - window.elementQuery.selectors = function () { + //NOTE: For development purposes only! + elementQuery.selectors = function () { - var data = {}; - var i, j, k; + var data = {}; + var i, j, k; - // For each selector - for (i in queryData) { + // For each selector + for (i in queryData) { - // For each min|max-width|height string - for (j in queryData[i]) { + // For each min|max-width|height string + for (j in queryData[i]) { - // For each number px|em value pair - for (k in queryData[i][j]) { + // For each number px|em value pair + for (k in queryData[i][j]) { - if (data[i] === undefined) { - data[i] = {}; - } - if (data[i][j] === undefined) { - data[i][j] = []; + if (data[i] === undefined) { + data[i] = {}; + } + if (data[i][j] === undefined) { + data[i][j] = []; + } + data[i][j][data[i][j].length] = k; } - data[i][j][data[i][j].length] = k; } } - } - return data; - }; - - if (window.addEventListener) { - window.addEventListener("resize", refresh, false); - window.addEventListener("DOMContentLoaded", init, false); - window.addEventListener("load", init, false); - } - else if (window.attachEvent) { - window.attachEvent("onresize", refresh); - window.attachEvent("onload", init); - } -}(this, document, undefined)); - -/*! getEmPixels | Author: Tyson Matanich (http://matanich.com), 2013 | License: MIT */ -(function (document, documentElement) { - // Enable strict mode - "use strict"; - - // Form the style on the fly to result in smaller minified file - var important = "!important;"; - var style = "position:absolute" + important + "visibility:hidden" + important + "width:1em" + important + "font-size:1em" + important + "padding:0" + important; + return data; + }; - window.getEmPixels = function (element) { - - var extraBody; - - if (!element) { - // Emulate the documentElement to get rem value (documentElement does not work in IE6-7) - element = extraBody = document.createElement("body"); - extraBody.style.cssText = "font-size:1em" + important; - documentElement.insertBefore(extraBody, document.body); + if (window.addEventListener) { + window.addEventListener("resize", refresh, false); + window.addEventListener("DOMContentLoaded", init, false); + window.addEventListener("load", init, false); + } + else if (window.attachEvent) { + window.attachEvent("onresize", refresh); + window.attachEvent("onload", init); } - // Create and style a test element - var testElement = document.createElement("i"); - testElement.style.cssText = style; - element.appendChild(testElement); - - // Get the client width of the test element - var value = testElement.clientWidth; + return elementQuery; + } - if (extraBody) { - // Remove the extra body element - documentElement.removeChild(extraBody); - } - else { - // Remove the test element - element.removeChild(testElement); - } + // Detect AMD + var haveDefine = typeof define === "function" && define.amd; + + // Expose AMD module if necessary, otherwise attach to global + if (haveDefine) { + define('elementQuery', ['sizzle', 'getEmPixels'], function () { + var elementQuery = main(); + return elementQuery; + }); + } else { + // Use Sizzle standalone or from jQuery + var sizzle = window.Sizzle || jQuery.find; + // Go! + var elementQuery = main(); + // Export API to global + window.elementQuery = elementQuery; + } - // Return the em value in pixels - return value; - }; -}(document, document.documentElement)); \ No newline at end of file +}(this, document, undefined)); diff --git a/elementQuery.min.js b/elementQuery.min.js index 1a89d87..a67aa63 100644 --- a/elementQuery.min.js +++ b/elementQuery.min.js @@ -1,4 +1,37 @@ -/*! elementQuery | Author: Tyson Matanich (http://matanich.com), 2013 | License: MIT */ -(function(n,t,i){"use strict";var o=n.Sizzle||jQuery.find,r={},u=null,v=function(){t.styleSheets[0]&&(u=t.styleSheets[0].cssRules!==i?"cssRules":"rules")},s=function(n,t,u,f,s){if(n=e(n),n!=""){var h;f||s||(h=/^([0-9]*.?[0-9]+)(px|em)$/.exec(u),h!=null&&(f=Number(h[1]),f+""!="NaN"&&(s=h[2]))),s&&(o.compile&&o.compile(n),r[n]===i&&(r[n]={}),r[n][t]===i&&(r[n][t]={}),r[n][t][u]=[f,s])}},y=function(n,t){var i,r,u;for(i in n)for(r in n[i])if(typeof n[i][r]=="string")s(i,r,n[i][r]);else if(typeof n[i][r]=="object")for(u=0;u0&&(o=r.indexOf(" "),o!=0&&(o>0&&(r=r.substring(0,o)),r=r.replace(/(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em)(\'|\")\])/gi,""),u+=r))),s(u,t[2],t[4]+t[5],h,t[5])),t[7]===i||t[7]==""?(c=t.index+t[1].length,u=null):a.lastIndex=t.index+t[1].length),l++},l=function(n,t){var r,f,e,i;if(u==null&&v(),n[u]&&n[u].length>0&&(r=n.ownerNode||n.owningElement,t||r.getAttribute("data-elementquery-bypass")===null&&r.getAttribute("data-elementquery-processed")===null)){for(f=0;f0)for(e=0;e=0;)r=r.replace(" "+u+" "," "),f=!0;f&&n.setAttribute(t,e(r))}},h=function(){for(var n=0;n0)for(h=0;h=f||i=="max-width"&&u.offsetWidth<=f||i=="min-height"&&u.offsetHeight>=f||i=="max-height"&&u.offsetHeight<=f?p(u,i,s):w(u,i,s)}!n.addEventListener&&n.attachEvent&&(l=t.documentElement.className,t.documentElement.className=" "+l,t.documentElement.className=l)};n.elementQuery=function(n,t){n&&typeof n=="object"?n.cssRules||n.rules?(l(n,!0),t==!0&&f()):y(n,t):n||t||f()},n.elementQuery.selectors=function(){var t={},n,u,f;for(n in r)for(u in r[n])for(f in r[n][u])t[n]===i&&(t[n]={}),t[n][u]===i&&(t[n][u]=[]),t[n][u][t[n][u].length]=f;return t},n.addEventListener?(n.addEventListener("resize",f,!1),n.addEventListener("DOMContentLoaded",h,!1),n.addEventListener("load",h,!1)):n.attachEvent&&(n.attachEvent("onresize",f),n.attachEvent("onload",h))})(this,document,undefined); -/*! getEmPixels | Author: Tyson Matanich (http://matanich.com), 2013 | License: MIT */ -(function(n,t){"use strict";var i="!important;",r="position:absolute"+i+"visibility:hidden"+i+"width:1em"+i+"font-size:1em"+i+"padding:0"+i;window.getEmPixels=function(u){var f,e,o;return u||(u=f=n.createElement("body"),f.style.cssText="font-size:1em"+i,t.insertBefore(f,n.body)),e=n.createElement("i"),e.style.cssText=r,u.appendChild(e),o=e.clientWidth,f?t.removeChild(f):u.removeChild(e),o}})(document,document.documentElement); \ No newline at end of file + +(function(window,document,undefined){"use strict";var main=function(){var queryData={};var cssRules=null;var setCssRules=function(){if(document.styleSheets[0]){cssRules=(document.styleSheets[0].cssRules!==undefined)?"cssRules":"rules";}} +var addQueryDataValue=function(selector,type,pair,number,value){selector=trim(selector);if(selector!=""){var parts;if(!number&&!value){parts=/^([0-9]*.?[0-9]+)(px|em)$/.exec(pair) +if(parts!=null){number=Number(parts[1]);if(number+""!="NaN"){value=parts[2];}}} +if(value){if(sizzle.compile){sizzle.compile(selector);} +if(queryData[selector]===undefined){queryData[selector]={};} +if(queryData[selector][type]===undefined){queryData[selector][type]={};} +queryData[selector][type][pair]=[number,value];}}};var updateQueryData=function(data,doUpdate){var i,j,k;for(i in data){for(j in data[i]){if(typeof data[i][j]=="string"){addQueryDataValue(i,j,data[i][j]);} +else if(typeof data[i][j]=="object"){for(k=0;k0){t=tail.indexOf(" ");if(t!=0){if(t>0){tail=tail.substring(0,t);} +tail=tail.replace(/(\[(min\-width|max\-width|min\-height|max\-height)\~\=(\'|\")([0-9]*.?[0-9]+)(px|em)(\'|\")\])/gi,"");selector+=tail;}}} +addQueryDataValue(selector,result[2],result[4]+result[5],number,result[5]);} +if(result[7]===undefined||result[7]==""){prevIndex=result.index+result[1].length;selector=null;} +else{regex.lastIndex=result.index+result[1].length;}} +k++;}}}};var processStyleSheet=function(styleSheet,force){if(cssRules==null){setCssRules();} +if(styleSheet[cssRules]&&styleSheet[cssRules].length>0){var ownerNode=styleSheet.ownerNode||styleSheet.owningElement;if(force||(ownerNode.getAttribute("data-elementquery-bypass")===null&&ownerNode.getAttribute("data-elementquery-processed")===null)){var i,j,rule;for(i=0;i0){for(j=0;j=0){cur=cur.replace(" "+val+" "," ");updated=true;} +if(updated){element.setAttribute(attr,trim(cur));}}}};var init=function(){var i;for(i=0;i0){for(ei=0;ei=val)||(j=="max-width"&&element.offsetWidth<=val)||(j=="min-height"&&element.offsetHeight>=val)||(j=="max-height"&&element.offsetHeight<=val)){addTo(element,j,k);} +else{removeFrom(element,j,k);}}}}}} +if(!window.addEventListener&&window.attachEvent){var className=document.documentElement.className;document.documentElement.className=" "+className;document.documentElement.className=className;}} +var elementQuery=function(arg1,arg2){if(arg1&&typeof arg1=="object"){if(arg1.cssRules||arg1.rules){processStyleSheet(arg1,true);if(arg2==true){refresh();}}else{updateQueryData(arg1,arg2);}} +else if(!arg1&&!arg2){refresh();}};elementQuery.selectors=function(){var data={};var i,j,k;for(i in queryData){for(j in queryData[i]){for(k in queryData[i][j]){if(data[i]===undefined){data[i]={};} +if(data[i][j]===undefined){data[i][j]=[];} +data[i][j][data[i][j].length]=k;}}} +return data;};if(window.addEventListener){window.addEventListener("resize",refresh,false);window.addEventListener("DOMContentLoaded",init,false);window.addEventListener("load",init,false);} +else if(window.attachEvent){window.attachEvent("onresize",refresh);window.attachEvent("onload",init);} +return elementQuery;} +var haveDefine=typeof define==="function"&&define.amd;if(haveDefine){define('elementQuery',['sizzle','getEmPixels'],function(){var elementQuery=main();return elementQuery;});}else{var sizzle=window.Sizzle||jQuery.find;var elementQuery=main();window.elementQuery=elementQuery;}}(this,document,undefined));(function(document,documentElement){"use strict";var important="!important;";var style="position:absolute"+important+"visibility:hidden"+important+"width:1em"+important+"font-size:1em"+important+"padding:0"+important;var getEmPixels=function(element){var extraBody;if(!element){element=extraBody=document.createElement("body");extraBody.style.cssText="font-size:1em"+important;documentElement.insertBefore(extraBody,document.body);} +var testElement=document.createElement("i");testElement.style.cssText=style;element.appendChild(testElement);var value=testElement.clientWidth;if(extraBody){documentElement.removeChild(extraBody);} +else{element.removeChild(testElement);} +return value;};var haveDefine=typeof define==="function"&&define.amd;if(haveDefine){define('getEmPixels',[],function(){return getEmPixels;});}else{window.getEmPixels=getEmPixels;}}(document,document.documentElement)); \ No newline at end of file diff --git a/getEmPixels.js b/getEmPixels.js new file mode 100644 index 0000000..4b7d0c5 --- /dev/null +++ b/getEmPixels.js @@ -0,0 +1,53 @@ +/*! getEmPixels | Author: Tyson Matanich (http://matanich.com), 2013 | License: MIT */ +(function (document, documentElement) { + // Enable strict mode + "use strict"; + + // Form the style on the fly to result in smaller minified file + var important = "!important;"; + var style = "position:absolute" + important + "visibility:hidden" + important + "width:1em" + important + "font-size:1em" + important + "padding:0" + important; + + var getEmPixels = function (element) { + + var extraBody; + + if (!element) { + // Emulate the documentElement to get rem value (documentElement does not work in IE6-7) + element = extraBody = document.createElement("body"); + extraBody.style.cssText = "font-size:1em" + important; + documentElement.insertBefore(extraBody, document.body); + } + + // Create and style a test element + var testElement = document.createElement("i"); + testElement.style.cssText = style; + element.appendChild(testElement); + + // Get the client width of the test element + var value = testElement.clientWidth; + + if (extraBody) { + // Remove the extra body element + documentElement.removeChild(extraBody); + } + else { + // Remove the test element + element.removeChild(testElement); + } + + // Return the em value in pixels + return value; + }; + + // Detect AMD + var haveDefine = typeof define === "function" && define.amd; + + // Expose AMD module if necessary, otherwise attach to global + if (haveDefine) { + define('getEmPixels', [], function () { + return getEmPixels; + }); + } else { + window.getEmPixels = getEmPixels; + } +}(document, document.documentElement)); \ No newline at end of file