Skip to content
This repository
Browse code

Add mouseenter/mouseleave event handlers which ensure an update is tr…

…iggered so that :hover styles take effect. Also adds a custom pie_hover class which can be used to add hover styles in IE6 on non-link elements.
  • Loading branch information...
commit 643433122b787270f8f9ed1aff0c4f0e8434651e 1 parent f15300e
authored May 04, 2010
3  sources/PIE_open.js
@@ -3,7 +3,8 @@ var PIE = window['PIE'];
3 3
 if( !PIE ) {
4 4
     PIE = window['PIE'] = {
5 5
         CSS_PREFIX: '-pie-',
6  
-        STYLE_PREFIX: 'Pie'
  6
+        STYLE_PREFIX: 'Pie',
  7
+        CLASS_PREFIX: 'pie_'
7 8
     };
8 9
 
9 10
     // Detect IE6
2  sources/closure_externs.js
@@ -2,5 +2,7 @@
2 2
 
3 3
 function update(){};
4 4
 function propChanged(){};
  5
+function mouseEntered(){};
  6
+function mouseLeft(){};
5 7
 function init(){};
6 8
 function cleanup(){};
2  sources/closure_preservefunctions.js
@@ -2,5 +2,7 @@
2 2
 
3 3
 update();
4 4
 propChanged();
  5
+mouseEntered();
  6
+mouseLeft();
5 7
 init();
6 8
 cleanup();
21  sources/event_handlers.js
@@ -38,7 +38,7 @@ function update() {
38 38
  */
39 39
 function propChanged() {
40 40
     init();
41  
-    var name = event.propertyName,
  41
+    var name = event && event.propertyName,
42 42
         i, len, toUpdate;
43 43
     if( name === 'style.display' || name === 'style.visibility' ) {
44 44
         for( i = 0, len = renderers.length; i < len; i++ ) {
@@ -60,6 +60,25 @@ function propChanged() {
60 60
 
61 61
 
62 62
 /**
  63
+ * Handle mouseenter events. Adds a custom class to the element to allow IE6 to add
  64
+ * hover styles to non-link elements.
  65
+ */
  66
+function mouseEntered() {
  67
+    element.className += ' ' + PIE.CLASS_PREFIX + 'hover';
  68
+    //must delay this because the mouseleave event fires before the :hover styles are added.
  69
+    setTimeout( propChanged, 0 );
  70
+}
  71
+/**
  72
+ * Handle mouseleave events
  73
+ */
  74
+function mouseLeft() {
  75
+    element.className = element.className.replace( new RegExp( '\\b' + PIE.CLASS_PREFIX + 'hover\\b', 'g' ), '' );
  76
+    //must delay this because the mouseleave event fires before the :hover styles are removed.
  77
+    setTimeout( propChanged, 0 );
  78
+}
  79
+
  80
+
  81
+/**
63 82
  * Handle property changes on ancestors of the element; see initAncestorPropChangeListeners()
64 83
  * which adds these listeners as requested with the -pie-watch-ancestors CSS property.
65 84
  */
2  sources/htc_open.txt
@@ -3,6 +3,8 @@
3 3
     <PUBLIC:ATTACH EVENT="onresize" FOR="window" ONEVENT="update()" /><!-- for IE8 -->
4 4
     <PUBLIC:ATTACH EVENT="onmove" FOR="element" ONEVENT="update()" />
5 5
     <PUBLIC:ATTACH EVENT="onpropertychange" FOR="element" ONEVENT="propChanged()" />
  6
+    <PUBLIC:ATTACH EVENT="onmouseenter" FOR="element" ONEVENT="mouseEntered()" />
  7
+    <PUBLIC:ATTACH EVENT="onmouseout" FOR="element" ONEVENT="mouseLeft()" />
6 8
     <PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="init()" />
7 9
     <PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" />
8 10
 
51  tests/hover-tests.html
... ...
@@ -0,0 +1,51 @@
  1
+<!DOCTYPE html>
  2
+
  3
+<html>
  4
+<head>
  5
+
  6
+    <style type="text/css">
  7
+
  8
+        html, body {
  9
+            font: 12px sans-serif;
  10
+        }
  11
+
  12
+        .tester {
  13
+            behavior: url(../build/PIE_uncompressed.htc);
  14
+        }
  15
+
  16
+        #test1 {
  17
+            float: left;
  18
+            padding: 2em;
  19
+            border-radius: 8px;
  20
+            background: #F99;
  21
+        }
  22
+        #test1:hover {
  23
+            background: #9F9;
  24
+        }
  25
+
  26
+        #test2 {
  27
+            float: left;
  28
+            clear: left;
  29
+            padding: 2em;
  30
+            margin-top: 3em;
  31
+            background: #F99;
  32
+            border-radius: 8px;
  33
+        }
  34
+        #test2:hover,
  35
+        #test2.pie_hover {
  36
+            background: #9F9;
  37
+        }
  38
+
  39
+    </style>
  40
+
  41
+</head>
  42
+<body>
  43
+
  44
+    <p>
  45
+        <a href="#" class="tester" id="test1">Link</a>
  46
+    </p>
  47
+
  48
+    <div class="tester" id="test2">Non-link</div>
  49
+
  50
+</body>
  51
+</html>

0 notes on commit 6434331

Please sign in to comment.
Something went wrong with that request. Please try again.