skins/vector/csshover.htc

   1 <public:attach event="ondocumentready" onevent="CSSHover()" />
   2 <script>
   3 /**
   4  *      Whatever:hover - V3.11
   5  *      ------------------------------------------------------------
   6  *      Author  - Peter Nederlof, http://www.xs4all.nl/~peterned
   7  *      License - http://creativecommons.org/licenses/LGPL/2.1
   8  *
   9  *      Special thanks to Sergiu Dumitriu, http://purl.org/net/sergiu,
  10  *      for fixing the expression loop.
  11  *
  12  *      Whatever:hover is free software; you can redistribute it and/or
  13  *      modify it under the terms of the GNU Lesser General Public
  14  *      License as published by the Free Software Foundation; either
  15  *      version 2.1 of the License, or (at your option) any later version.
  16  *
  17  *      Whatever:hover is distributed in the hope that it will be useful,
  18  *      but WITHOUT ANY WARRANTY; without even the implied warranty of
  19  *      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
  20  *      Lesser General Public License for more details.
  21  *
  22  *      howto: body { behavior:url("csshover3.htc"); }
  23  *      ------------------------------------------------------------
  24  */
  25
  26 window.CSSHover = (function(){
  27
  28         // regular expressions, used and explained later on.
  29         var REG_INTERACTIVE = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i;
  30         var REG_AFFECTED = /(.*?)\:(hover|active|focus)/i;
  31         var REG_PSEUDO = /[^:]+:([a-z\-]+).*/i;
  32         var REG_SELECT = /(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;
  33         var REG_CLASS = /\.([a-z0-9_\-]*on(hover|active|focus))/i;
  34         var REG_MSIE = /msie (5|6|7)/i;
  35         var REG_COMPAT = /backcompat/i;
  36
  37         // property mapping, real css properties must be used in order to clear expressions later on...
  38         // Uses obscure css properties that no-one is likely to use. The properties are borrowed to
  39         // set an expression, and are then restored to the most likely correct value.
  40         var Properties = {
  41                 index: 0,
  42                 list: ['text-kashida', 'text-kashida-space', 'text-justify'],
  43                 get: function() {
  44                         return this.list[(this.index++)%this.list.length];
  45                 }
  46         };
  47
  48         // camelize is used to convert css properties from (eg) text-kashida to textKashida
  49         var camelize = function(str) {
  50                 return str.replace(/-(.)/mg, function(result, match){
  51                         return match.toUpperCase();
  52                 });
  53         };
  54
  55         /**
  56          *      Local CSSHover object
  57          *      --------------------------
  58          */
  59
  60         var CSSHover = {
  61
  62                 // array of CSSHoverElements, used to unload created events
  63                 elements: [],
  64
  65                 // buffer used for checking on duplicate expressions
  66                 callbacks: {},
  67
  68                 // init, called once ondomcontentready via the exposed window.CSSHover function
  69                 init:function() {
  70                         // don't run in IE8 standards; expressions don't work in standards mode anyway,
  71                         // and the stuff we're trying to fix should already work properly
  72                         if(!REG_MSIE.test(navigator.userAgent) && !REG_COMPAT.test(window.document.compatMode)) {
  73                                 return;
  74                         }
  75
  76                         // start parsing the existing stylesheets
  77                         var sheets = window.document.styleSheets, l = sheets.length;
  78                         for(var i=0; i<l; i++) {
  79                                 this.parseStylesheet(sheets[i]);
  80                         }
  81                 },
  82
  83                 // called from init, parses individual stylesheets
  84                 parseStylesheet:function(sheet) {
  85                         // check sheet imports and parse those recursively
  86                         if(sheet.imports) {
  87                                 try {
  88                                         var imports = sheet.imports;
  89                                         var l = imports.length;
  90                                         for(var i=0; i<l; i++) {
  91                                                 this.parseStylesheet(sheet.imports[i]);
  92                                         }
  93                                 } catch(securityException){
  94                                         // trycatch for various possible errors
  95                                 }
  96                         }
  97
  98                         // interate the sheet's rules and send them to the parser
  99                         try {
 100                                 var rules = sheet.rules;
 101                                 var r = rules.length;
 102                                 for(var j=0; j<r; j++) {
 103                                         this.parseCSSRule(rules[j], sheet);
 104                                 }
 105                         } catch(someException){
 106                                 // trycatch for various errors, most likely accessing the sheet's rules.
 107                         }
 108                 },
 109
 110                 // magic starts here ...
 111                 parseCSSRule:function(rule, sheet) {
 112
 113                         // The sheet is used to insert new rules into, this must be the same sheet the rule
 114                         // came from, to ensure that relative paths keep pointing to the right location.
 115
 116                         // only parse a rule if it contains an interactive pseudo.
 117                         var select = rule.selectorText;
 118                         if(REG_INTERACTIVE.test(select)) {
 119                                 var style = rule.style.cssText;
 120
 121                                 // affected elements are found by truncating the selector after the interactive pseudo,
 122                                 // eg: "div li:hover" >>  "div li"
 123                                 var affected = REG_AFFECTED.exec(select)[1];
 124
 125                                 // that pseudo is needed for a classname, and defines the type of interaction (focus, hover, active)
 126                                 // eg: "li:hover" >> "onhover"
 127                                 var pseudo = select.replace(REG_PSEUDO, 'on$1');
 128
 129                                 // the new selector is going to use that classname in a new css rule,
 130                                 // since IE6 doesn't support multiple classnames, this is merged into one classname
 131                                 // eg: "li:hover" >> "li.onhover",  "li.folder:hover" >> "li.folderonhover"
 132                                 var newSelect = select.replace(REG_SELECT, '.$2' + pseudo);
 133
 134                                 // the classname is needed for the events that are going to be set on affected nodes
 135                                 // eg: "li.folder:hover" >> "folderonhover"
 136                                 var className = REG_CLASS.exec(newSelect)[1];
 137
 138                                 // no need to set the same callback more than once when the same selector uses the same classname
 139                                 var hash = affected + className;
 140                                 if(!this.callbacks[hash]) {
 141
 142                                         // affected elements are given an expression under a borrowed css property, because fake properties
 143                                         // can't have their expressions cleared. Different properties are used per pseudo, to avoid
 144                                         // expressions from overwriting eachother. The expression does a callback to CSSHover.patch,
 145                                         // rerouted via the exposed window.CSSHover function.
 146                                         var property = Properties.get();
 147                                         var atRuntime = camelize(property);
 148
 149                                         // because the expression is added to the stylesheet, and styles are always applied to html that is
 150                                         // dynamically added to the dom, the expression will also trigger for those new elements (provided
 151                                         // they are selected by the affected selector).
 152                                         sheet.addRule(affected, property + ':expression(CSSHover(this, "'+pseudo+'", "'+className+'", "'+atRuntime+'"))');
 153
 154                                         // hash it, so an identical selector/class combo does not duplicate the expression
 155                                         this.callbacks[hash] = true;
 156                                 }
 157
 158                                 // duplicate expressions need not be set, but the style could differ
 159                                 sheet.addRule(newSelect, style);
 160                         }
 161                 },
 162
 163                 // called via the expression, patches individual nodes
 164                 patch:function(node, type, className, property) {
 165
 166                         // restores the borrowed css property to the value of its immediate parent, clearing
 167                         // the expression so that it's not repeatedly called.
 168                         try {
 169                                 var value = node.parentNode.currentStyle[property];
 170                                 node.style[property] = value;
 171                         } catch(e) {
 172                                 // the above reset should never fail, but just in case, clear the runtimeStyle if it does.
 173                                 // this will also stop the expression.
 174                                 node.runtimeStyle[property] = '';
 175                         }
 176
 177                         // just to make sure, also keep track of patched classnames locally on the node
 178                         if(!node.csshover) {
 179                                 node.csshover = [];
 180                         }
 181
 182                         // and check for it to prevent duplicate events with the same classname from being set
 183                         if(!node.csshover[className]) {
 184                                 node.csshover[className] = true;
 185
 186                                 // create an instance for the given type and class
 187                                 var element = new CSSHoverElement(node, type, className);
 188
 189                                 // and store that instance for unloading later on
 190                                 this.elements.push(element);
 191                         }
 192
 193                         // returns a dummy value to the expression
 194                         return type;
 195                 },
 196
 197                 // unload stuff onbeforeunload
 198                 unload:function() {
 199                         try {
 200
 201                                 // remove events
 202                                 var l = this.elements.length;
 203                                 for(var i=0; i<l; i++) {
 204                                         this.elements[i].unload();
 205                                 }
 206
 207                                 // and set properties to null
 208                                 this.elements = [];
 209                                 this.callbacks = {};
 210
 211                         } catch (e) {
 212                         }
 213                 }
 214         };
 215
 216         /**
 217          *      CSSHoverElement
 218          *      --------------------------
 219          */
 220
 221         // the event types associated with the interactive pseudos
 222         var CSSEvents = {
 223                 onhover:  { activator: 'onmouseenter', deactivator: 'onmouseleave' },
 224                 onactive: { activator: 'onmousedown',  deactivator: 'onmouseup' },
 225                 onfocus:  { activator: 'onfocus',      deactivator: 'onblur' }
 226         };
 227
 228         // CSSHoverElement constructor, called via CSSHover.patch
 229         function CSSHoverElement(node, type, className) {
 230
 231                 // the CSSHoverElement patches individual nodes by manually applying the events that should
 232                 // have fired by the css pseudoclasses, eg mouseenter and mouseleave for :hover.
 233
 234                 this.node = node;
 235                 this.type = type;
 236                 var replacer = new RegExp('(^|\\s)'+className+'(\\s|$)', 'g');
 237
 238                 // store event handlers for removal onunload
 239                 this.activator =   function(){ node.className += ' ' + className; };
 240                 this.deactivator = function(){ node.className = node.className.replace(replacer, ' '); };
 241
 242                 // add the events
 243                 node.attachEvent(CSSEvents[type].activator, this.activator);
 244                 node.attachEvent(CSSEvents[type].deactivator, this.deactivator);
 245         }
 246
 247         CSSHoverElement.prototype = {
 248                 // onbeforeunload, called via CSSHover.unload
 249                 unload:function() {
 250
 251                         // remove events
 252                         this.node.detachEvent(CSSEvents[this.type].activator, this.activator);
 253                         this.node.detachEvent(CSSEvents[this.type].deactivator, this.deactivator);
 254
 255                         // and set properties to null
 256                         this.activator = null;
 257                         this.deactivator = null;
 258                         this.node = null;
 259                         this.type = null;
 260                 }
 261         };
 262
 263         // add the unload to the onbeforeunload event
 264         window.attachEvent('onbeforeunload', function(){
 265                 CSSHover.unload();
 266         });
 267
 268         /**
 269          *      Public hook
 270          *      --------------------------
 271          */
 272
 273         return function(node, type, className, property) {
 274                 if(node) {
 275                         // called via the css expression; patches individual nodes
 276                         return CSSHover.patch(node, type, className, property);
 277                 } else {
 278                         // called ondomcontentready via the public:attach node
 279                         CSSHover.init();
 280                 }
 281         };
 282
 283 })();
 284 </script>