selectivizr.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
  1. /*
  2. selectivizr v1.0.2 - (c) Keith Clark, freely distributable under the terms
  3. of the MIT license.
  4. selectivizr.com
  5. */
  6. /*
  7. Notes about this source
  8. -----------------------
  9. * The #DEBUG_START and #DEBUG_END comments are used to mark blocks of code
  10. that will be removed prior to building a final release version (using a
  11. pre-compression script)
  12. References:
  13. -----------
  14. * CSS Syntax : http://www.w3.org/TR/2003/WD-css3-syntax-20030813/#style
  15. * Selectors : http://www.w3.org/TR/css3-selectors/#selectors
  16. * IE Compatability : http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
  17. * W3C Selector Tests : http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/tests/
  18. */
  19. (function(win) {
  20. // If browser isn't IE, then stop execution! This handles the script
  21. // being loaded by non IE browsers because the developer didn't use
  22. // conditional comments.
  23. if (/*@cc_on!@*/true) return;
  24. // =========================== Init Objects ============================
  25. var doc = document;
  26. var root = doc.documentElement;
  27. var xhr = getXHRObject();
  28. var ieVersion = /MSIE (\d+)/.exec(navigator.userAgent)[1];
  29. // If were not in standards mode, IE is too old / new or we can't create
  30. // an XMLHttpRequest object then we should get out now.
  31. if (doc.compatMode != 'CSS1Compat' || ieVersion<6 || ieVersion>8 || !xhr) {
  32. return;
  33. }
  34. // ========================= Common Objects ============================
  35. // Compatiable selector engines in order of CSS3 support. Note: '*' is
  36. // a placholder for the object key name. (basically, crude compression)
  37. var selectorEngines = {
  38. "NW" : "*.Dom.select",
  39. "MooTools" : "$$",
  40. "DOMAssistant" : "*.$",
  41. "Prototype" : "$$",
  42. "YAHOO" : "*.util.Selector.query",
  43. "Sizzle" : "*",
  44. "jQuery" : "*",
  45. "dojo" : "*.query"
  46. };
  47. var selectorMethod;
  48. var enabledWatchers = []; // array of :enabled/:disabled elements to poll
  49. var ie6PatchID = 0; // used to solve ie6's multiple class bug
  50. var patchIE6MultipleClasses = true; // if true adds class bloat to ie6
  51. var namespace = "slvzr";
  52. // Stylesheet parsing regexp's
  53. var RE_COMMENT = /(\/\*[^*]*\*+([^\/][^*]*\*+)*\/)\s*/g;
  54. var RE_IMPORT = /@import\s*(?:(?:(?:url\(\s*(['"]?)(.*)\1)\s*\))|(?:(['"])(.*)\3))[^;]*;/g;
  55. var RE_ASSET_URL = /\burl\(\s*(["']?)(?!data:)([^"')]+)\1\s*\)/g;
  56. var RE_PSEUDO_STRUCTURAL = /^:(empty|(first|last|only|nth(-last)?)-(child|of-type))$/;
  57. var RE_PSEUDO_ELEMENTS = /:(:first-(?:line|letter))/g;
  58. var RE_SELECTOR_GROUP = /(^|})\s*([^\{]*?[\[:][^{]+)/g;
  59. var RE_SELECTOR_PARSE = /([ +~>])|(:[a-z-]+(?:\(.*?\)+)?)|(\[.*?\])/g;
  60. var RE_LIBRARY_INCOMPATIBLE_PSEUDOS = /(:not\()?:(hover|enabled|disabled|focus|checked|target|active|visited|first-line|first-letter)\)?/g;
  61. var RE_PATCH_CLASS_NAME_REPLACE = /[^\w-]/g;
  62. // HTML UI element regexp's
  63. var RE_INPUT_ELEMENTS = /^(INPUT|SELECT|TEXTAREA|BUTTON)$/;
  64. var RE_INPUT_CHECKABLE_TYPES = /^(checkbox|radio)$/;
  65. // Broken attribute selector implementations (IE7/8 native [^=""], [$=""] and [*=""])
  66. var BROKEN_ATTR_IMPLEMENTATIONS = ieVersion>6 ? /[\$\^*]=(['"])\1/ : null;
  67. // Whitespace normalization regexp's
  68. var RE_TIDY_TRAILING_WHITESPACE = /([(\[+~])\s+/g;
  69. var RE_TIDY_LEADING_WHITESPACE = /\s+([)\]+~])/g;
  70. var RE_TIDY_CONSECUTIVE_WHITESPACE = /\s+/g;
  71. var RE_TIDY_TRIM_WHITESPACE = /^\s*((?:[\S\s]*\S)?)\s*$/;
  72. // String constants
  73. var EMPTY_STRING = "";
  74. var SPACE_STRING = " ";
  75. var PLACEHOLDER_STRING = "$1";
  76. // =========================== Patching ================================
  77. // --[ patchStyleSheet() ]----------------------------------------------
  78. // Scans the passed cssText for selectors that require emulation and
  79. // creates one or more patches for each matched selector.
  80. function patchStyleSheet( cssText ) {
  81. return cssText.replace(RE_PSEUDO_ELEMENTS, PLACEHOLDER_STRING).
  82. replace(RE_SELECTOR_GROUP, function(m, prefix, selectorText) {
  83. var selectorGroups = selectorText.split(",");
  84. for (var c = 0, cs = selectorGroups.length; c < cs; c++) {
  85. var selector = normalizeSelectorWhitespace(selectorGroups[c]) + SPACE_STRING;
  86. var patches = [];
  87. selectorGroups[c] = selector.replace(RE_SELECTOR_PARSE,
  88. function(match, combinator, pseudo, attribute, index) {
  89. if (combinator) {
  90. if (patches.length>0) {
  91. applyPatches( selector.substring(0, index), patches );
  92. patches = [];
  93. }
  94. return combinator;
  95. }
  96. else {
  97. var patch = (pseudo) ? patchPseudoClass( pseudo ) : patchAttribute( attribute );
  98. if (patch) {
  99. patches.push(patch);
  100. return "." + patch.className;
  101. }
  102. return match;
  103. }
  104. }
  105. );
  106. }
  107. return prefix + selectorGroups.join(",");
  108. });
  109. };
  110. // --[ patchAttribute() ]-----------------------------------------------
  111. // returns a patch for an attribute selector.
  112. function patchAttribute( attr ) {
  113. return (!BROKEN_ATTR_IMPLEMENTATIONS || BROKEN_ATTR_IMPLEMENTATIONS.test(attr)) ?
  114. { className: createClassName(attr), applyClass: true } : null;
  115. };
  116. // --[ patchPseudoClass() ]---------------------------------------------
  117. // returns a patch for a pseudo-class
  118. function patchPseudoClass( pseudo ) {
  119. var applyClass = true;
  120. var className = createClassName(pseudo.slice(1));
  121. var isNegated = pseudo.substring(0, 5) == ":not(";
  122. var activateEventName;
  123. var deactivateEventName;
  124. // if negated, remove :not()
  125. if (isNegated) {
  126. pseudo = pseudo.slice(5, -1);
  127. }
  128. // bracket contents are irrelevant - remove them
  129. var bracketIndex = pseudo.indexOf("(")
  130. if (bracketIndex > -1) {
  131. pseudo = pseudo.substring(0, bracketIndex);
  132. }
  133. // check we're still dealing with a pseudo-class
  134. if (pseudo.charAt(0) == ":") {
  135. switch (pseudo.slice(1)) {
  136. case "root":
  137. applyClass = function(e) {
  138. return isNegated ? e != root : e == root;
  139. }
  140. break;
  141. case "target":
  142. // :target is only supported in IE8
  143. if (ieVersion == 8) {
  144. applyClass = function(e) {
  145. var handler = function() {
  146. var hash = location.hash;
  147. var hashID = hash.slice(1);
  148. return isNegated ? (hash == EMPTY_STRING || e.id != hashID) : (hash != EMPTY_STRING && e.id == hashID);
  149. };
  150. addEvent( win, "hashchange", function() {
  151. toggleElementClass(e, className, handler());
  152. })
  153. return handler();
  154. }
  155. break;
  156. }
  157. return false;
  158. case "checked":
  159. applyClass = function(e) {
  160. if (RE_INPUT_CHECKABLE_TYPES.test(e.type)) {
  161. addEvent( e, "propertychange", function() {
  162. if (event.propertyName == "checked") {
  163. toggleElementClass( e, className, e.checked !== isNegated );
  164. }
  165. })
  166. }
  167. return e.checked !== isNegated;
  168. }
  169. break;
  170. case "disabled":
  171. isNegated = !isNegated;
  172. case "enabled":
  173. applyClass = function(e) {
  174. if (RE_INPUT_ELEMENTS.test(e.tagName)) {
  175. addEvent( e, "propertychange", function() {
  176. if (event.propertyName == "$disabled") {
  177. toggleElementClass( e, className, e.$disabled === isNegated );
  178. }
  179. });
  180. enabledWatchers.push(e);
  181. e.$disabled = e.disabled;
  182. return e.disabled === isNegated;
  183. }
  184. return pseudo == ":enabled" ? isNegated : !isNegated;
  185. }
  186. break;
  187. case "focus":
  188. activateEventName = "focus";
  189. deactivateEventName = "blur";
  190. case "hover":
  191. if (!activateEventName) {
  192. activateEventName = "mouseenter";
  193. deactivateEventName = "mouseleave";
  194. }
  195. applyClass = function(e) {
  196. addEvent( e, isNegated ? deactivateEventName : activateEventName, function() {
  197. toggleElementClass( e, className, true );
  198. })
  199. addEvent( e, isNegated ? activateEventName : deactivateEventName, function() {
  200. toggleElementClass( e, className, false );
  201. })
  202. return isNegated;
  203. }
  204. break;
  205. // everything else
  206. default:
  207. // If we don't support this pseudo-class don't create
  208. // a patch for it
  209. if (!RE_PSEUDO_STRUCTURAL.test(pseudo)) {
  210. return false;
  211. }
  212. break;
  213. }
  214. }
  215. return { className: className, applyClass: applyClass };
  216. };
  217. // --[ applyPatches() ]-------------------------------------------------
  218. // uses the passed selector text to find DOM nodes and patch them
  219. function applyPatches(selectorText, patches) {
  220. var elms;
  221. // Although some selector libraries can find :checked :enabled etc.
  222. // we need to find all elements that could have that state because
  223. // it can be changed by the user.
  224. var domSelectorText = selectorText.replace(RE_LIBRARY_INCOMPATIBLE_PSEUDOS, EMPTY_STRING);
  225. // If the dom selector equates to an empty string or ends with
  226. // whitespace then we need to append a universal selector (*) to it.
  227. if (domSelectorText == EMPTY_STRING || domSelectorText.charAt(domSelectorText.length - 1) == SPACE_STRING) {
  228. domSelectorText += "*";
  229. }
  230. // Ensure we catch errors from the selector library
  231. try {
  232. elms = selectorMethod( domSelectorText );
  233. } catch (ex) {
  234. // #DEBUG_START
  235. log( "Selector '" + selectorText + "' threw exception '" + ex + "'" );
  236. // #DEBUG_END
  237. }
  238. if (elms) {
  239. for (var d = 0, dl = elms.length; d < dl; d++) {
  240. var elm = elms[d];
  241. var cssClasses = elm.className;
  242. for (var f = 0, fl = patches.length; f < fl; f++) {
  243. var patch = patches[f];
  244. if (!hasPatch(elm, patch)) {
  245. if (patch.applyClass && (patch.applyClass === true || patch.applyClass(elm) === true)) {
  246. cssClasses = toggleClass(cssClasses, patch.className, true );
  247. }
  248. }
  249. }
  250. elm.className = cssClasses;
  251. }
  252. }
  253. };
  254. // --[ hasPatch() ]-----------------------------------------------------
  255. // checks for the exsistence of a patch on an element
  256. function hasPatch( elm, patch ) {
  257. return new RegExp("(^|\\s)" + patch.className + "(\\s|$)").test(elm.className);
  258. };
  259. // =========================== Utility =================================
  260. function createClassName( className ) {
  261. return namespace + "-" + ((ieVersion == 6 && patchIE6MultipleClasses) ?
  262. ie6PatchID++
  263. :
  264. className.replace(RE_PATCH_CLASS_NAME_REPLACE, function(a) { return a.charCodeAt(0) }));
  265. };
  266. // --[ log() ]----------------------------------------------------------
  267. // #DEBUG_START
  268. function log( message ) {
  269. if (win.console) {
  270. win.console.log(message);
  271. }
  272. };
  273. // #DEBUG_END
  274. // --[ trim() ]---------------------------------------------------------
  275. // removes leading, trailing whitespace from a string
  276. function trim( text ) {
  277. return text.replace(RE_TIDY_TRIM_WHITESPACE, PLACEHOLDER_STRING);
  278. };
  279. // --[ normalizeWhitespace() ]------------------------------------------
  280. // removes leading, trailing and consecutive whitespace from a string
  281. function normalizeWhitespace( text ) {
  282. return trim(text).replace(RE_TIDY_CONSECUTIVE_WHITESPACE, SPACE_STRING);
  283. };
  284. // --[ normalizeSelectorWhitespace() ]----------------------------------
  285. // tidies whitespace around selector brackets and combinators
  286. function normalizeSelectorWhitespace( selectorText ) {
  287. return normalizeWhitespace(selectorText.
  288. replace(RE_TIDY_TRAILING_WHITESPACE, PLACEHOLDER_STRING).
  289. replace(RE_TIDY_LEADING_WHITESPACE, PLACEHOLDER_STRING)
  290. );
  291. };
  292. // --[ toggleElementClass() ]-------------------------------------------
  293. // toggles a single className on an element
  294. function toggleElementClass( elm, className, on ) {
  295. var oldClassName = elm.className;
  296. var newClassName = toggleClass(oldClassName, className, on);
  297. if (newClassName != oldClassName) {
  298. elm.className = newClassName;
  299. elm.parentNode.className += EMPTY_STRING;
  300. }
  301. };
  302. // --[ toggleClass() ]--------------------------------------------------
  303. // adds / removes a className from a string of classNames. Used to
  304. // manage multiple class changes without forcing a DOM redraw
  305. function toggleClass( classList, className, on ) {
  306. var re = RegExp("(^|\\s)" + className + "(\\s|$)");
  307. var classExists = re.test(classList);
  308. if (on) {
  309. return classExists ? classList : classList + SPACE_STRING + className;
  310. } else {
  311. return classExists ? trim(classList.replace(re, PLACEHOLDER_STRING)) : classList;
  312. }
  313. };
  314. // --[ addEvent() ]-----------------------------------------------------
  315. function addEvent(elm, eventName, eventHandler) {
  316. elm.attachEvent("on" + eventName, eventHandler);
  317. };
  318. // --[ getXHRObject() ]-------------------------------------------------
  319. function getXHRObject()
  320. {
  321. if (win.XMLHttpRequest) {
  322. return new XMLHttpRequest;
  323. }
  324. try {
  325. return new ActiveXObject('Microsoft.XMLHTTP');
  326. } catch(e) {
  327. return null;
  328. }
  329. };
  330. // --[ loadStyleSheet() ]-----------------------------------------------
  331. function loadStyleSheet( url ) {
  332. xhr.open("GET", url, false);
  333. xhr.send();
  334. return (xhr.status==200) ? xhr.responseText : EMPTY_STRING;
  335. };
  336. // --[ resolveUrl() ]---------------------------------------------------
  337. // Converts a URL fragment to a fully qualified URL using the specified
  338. // context URL. Returns null if same-origin policy is broken
  339. function resolveUrl( url, contextUrl ) {
  340. function getProtocolAndHost( url ) {
  341. return url.substring(0, url.indexOf("/", 8));
  342. };
  343. // absolute path
  344. if (/^https?:\/\//i.test(url)) {
  345. return getProtocolAndHost(contextUrl) == getProtocolAndHost(url) ? url : null;
  346. }
  347. // root-relative path
  348. if (url.charAt(0)=="/") {
  349. return getProtocolAndHost(contextUrl) + url;
  350. }
  351. // relative path
  352. var contextUrlPath = contextUrl.split(/[?#]/)[0]; // ignore query string in the contextUrl
  353. if (url.charAt(0) != "?" && contextUrlPath.charAt(contextUrlPath.length - 1) != "/") {
  354. contextUrlPath = contextUrlPath.substring(0, contextUrlPath.lastIndexOf("/") + 1);
  355. }
  356. return contextUrlPath + url;
  357. };
  358. // --[ parseStyleSheet() ]----------------------------------------------
  359. // Downloads the stylesheet specified by the URL, removes it's comments
  360. // and recursivly replaces @import rules with their contents, ultimately
  361. // returning the full cssText.
  362. function parseStyleSheet( url ) {
  363. if (url) {
  364. return loadStyleSheet(url).replace(RE_COMMENT, EMPTY_STRING).
  365. replace(RE_IMPORT, function( match, quoteChar, importUrl, quoteChar2, importUrl2 ) {
  366. return parseStyleSheet(resolveUrl(importUrl || importUrl2, url));
  367. }).
  368. replace(RE_ASSET_URL, function( match, quoteChar, assetUrl ) {
  369. quoteChar = quoteChar || EMPTY_STRING;
  370. return " url(" + quoteChar + resolveUrl(assetUrl, url) + quoteChar + ") ";
  371. });
  372. }
  373. return EMPTY_STRING;
  374. };
  375. // --[ init() ]---------------------------------------------------------
  376. function init() {
  377. // honour the <base> tag
  378. var url, stylesheet;
  379. var baseTags = doc.getElementsByTagName("BASE");
  380. var baseUrl = (baseTags.length > 0) ? baseTags[0].href : doc.location.href;
  381. /* Note: This code prevents IE from freezing / crashing when using
  382. @font-face .eot files but it modifies the <head> tag and could
  383. trigger the IE stylesheet limit. It will also cause FOUC issues.
  384. If you choose to use it, make sure you comment out the for loop
  385. directly below this comment.
  386. var head = doc.getElementsByTagName("head")[0];
  387. for (var c=doc.styleSheets.length-1; c>=0; c--) {
  388. stylesheet = doc.styleSheets[c]
  389. head.appendChild(doc.createElement("style"))
  390. var patchedStylesheet = doc.styleSheets[doc.styleSheets.length-1];
  391. if (stylesheet.href != EMPTY_STRING) {
  392. url = resolveUrl(stylesheet.href, baseUrl)
  393. if (url) {
  394. patchedStylesheet.cssText = patchStyleSheet( parseStyleSheet( url ) )
  395. stylesheet.disabled = true
  396. setTimeout( function () {
  397. stylesheet.owningElement.parentNode.removeChild(stylesheet.owningElement)
  398. })
  399. }
  400. }
  401. }
  402. */
  403. for (var c = 0; c < doc.styleSheets.length; c++) {
  404. stylesheet = doc.styleSheets[c]
  405. if (stylesheet.href != EMPTY_STRING) {
  406. url = resolveUrl(stylesheet.href, baseUrl);
  407. if (url) {
  408. stylesheet.cssText = patchStyleSheet( parseStyleSheet( url ) );
  409. }
  410. }
  411. }
  412. // :enabled & :disabled polling script (since we can't hook
  413. // onpropertychange event when an element is disabled)
  414. if (enabledWatchers.length > 0) {
  415. setInterval( function() {
  416. for (var c = 0, cl = enabledWatchers.length; c < cl; c++) {
  417. var e = enabledWatchers[c];
  418. if (e.disabled !== e.$disabled) {
  419. if (e.disabled) {
  420. e.disabled = false;
  421. e.$disabled = true;
  422. e.disabled = true;
  423. }
  424. else {
  425. e.$disabled = e.disabled;
  426. }
  427. }
  428. }
  429. },250)
  430. }
  431. };
  432. // Bind selectivizr to the ContentLoaded event.
  433. ContentLoaded(win, function() {
  434. // Determine the "best fit" selector engine
  435. for (var engine in selectorEngines) {
  436. var members, member, context = win;
  437. if (win[engine]) {
  438. members = selectorEngines[engine].replace("*", engine).split(".");
  439. while ((member = members.shift()) && (context = context[member])) {}
  440. if (typeof context == "function") {
  441. selectorMethod = context;
  442. init();
  443. return;
  444. }
  445. }
  446. }
  447. });
  448. /*!
  449. * ContentLoaded.js by Diego Perini, modified for IE<9 only (to save space)
  450. *
  451. * Author: Diego Perini (diego.perini at gmail.com)
  452. * Summary: cross-browser wrapper for DOMContentLoaded
  453. * Updated: 20101020
  454. * License: MIT
  455. * Version: 1.2
  456. *
  457. * URL:
  458. * http://javascript.nwbox.com/ContentLoaded/
  459. * http://javascript.nwbox.com/ContentLoaded/MIT-LICENSE
  460. *
  461. */
  462. // @w window reference
  463. // @f function reference
  464. function ContentLoaded(win, fn) {
  465. var done = false, top = true,
  466. init = function(e) {
  467. if (e.type == "readystatechange" && doc.readyState != "complete") return;
  468. (e.type == "load" ? win : doc).detachEvent("on" + e.type, init, false);
  469. if (!done && (done = true)) fn.call(win, e.type || e);
  470. },
  471. poll = function() {
  472. try { root.doScroll("left"); } catch(e) { setTimeout(poll, 50); return; }
  473. init('poll');
  474. };
  475. if (doc.readyState == "complete") fn.call(win, EMPTY_STRING);
  476. else {
  477. if (doc.createEventObject && root.doScroll) {
  478. try { top = !win.frameElement; } catch(e) { }
  479. if (top) poll();
  480. }
  481. addEvent(doc,"readystatechange", init);
  482. addEvent(win,"load", init);
  483. }
  484. };
  485. })(this);