Permalink
Browse files

adding virtual dom events

  • Loading branch information...
0 parents commit 6e06da28204534a89944d23b1956b5656dd27aad Brandon Aaron committed Jan 14, 2010
@@ -0,0 +1,44 @@
+# Virtual DOM Events
+
+A collection of virtual DOM events inspired by the [work done by Chris Vanrensburg for Uize](http://www.uize.com/examples/virtual-dom-events.html). These events use the new special events hooks found in jQuery 1.4.
+
+The collection includes the following events:
+
+ * **`mouserest`** - Fires once the mouse comes to a complete stop on top of an element for a specified number of milliseconds (defaults to 500ms).
+
+ * **`mouseremainover`** - Fires once the mouse remains over (mouse can continue moving) an element for a specified number of milliseconds (defaults to 500ms).
+
+ * **`mouseremainup`** - Fires once the mouse has been down, up and remains up for a specified number of milliseconds (defaults to 500ms).
+
+ * **`mouseremaindown`** - Fires once the mouse has been down and remains down for a specified number of milliseconds (defaults to 500ms).
+
+ * **`mouseremainout`** - Fires once the mouse has been over, off and remains off an element for a specified number of milliseconds (defaults to 500ms).
+
+ * **`keyremaindown`** - Fires when a key remains down for a specified number of milliseconds (defaults to 500ms).
+
+ * **`keyremainup`** - Fires when a key has been down, up and remains up for a specified number of milliseconds (defaults to 500ms).
+
+ * **`remainfocused`** - Fires when an element remains focused for a specified number of milliseconds (defaults to 500ms).
+
+ * **`remainblurred`** - Fires when an element is focused, blurred and remains blurred for a specified number of milliseconds (defaults to 500ms).
+
+Each of the events has an optional setting called `delay` and it defaults to 500 milliseconds.
+
+Each event is broken out into its own file for easier inclusion of only what you need.
+
+## Example
+
+Here is how to use any of the events:
+
+ $('#myElement')
+ .bind('mouserest', { delay: 1000 }, wakeUp);
+
+## Demo
+
+In the source tree there is a demo.html which illustrates each of the events with different delays.
+
+## License
+
+These special events are dual licensed *(just like jQuery)* under the [MIT](http://www.opensource.org/licenses/mit-license.php) and [GPL](http://www.opensource.org/licenses/gpl-license.php) licenses.
+
+Copyright (c) 2010 [Brandon Aaron](http://brandonaaron.net)
@@ -0,0 +1,220 @@
+<!doctype html>
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Virtual DOM Events Demo</title>
+ <style type="text/css" media="screen">
+ body { font: 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; }
+ div.test { float: left; margin: 10px; border: 1px solid #000; width: 200px; }
+ div.test h2 { margin: 0; padding: 2px 5px; border-bottom: 1px solid #000; background: #ccc; font-size: 16px; }
+ div.test textarea { width: 190px; border: 0; _margin: 0 -10px; font: 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; }
+ div.test .testNode { padding: 2px 5px; height: 75px; border-bottom: 1px solid #000; background: #eee; }
+ div.test h3 { margin: 0; padding: 2px 5px; border-bottom: 1px solid #000; background: #ccc; font-size: 14px; }
+ div.test div.testLog { margin: 0; padding: 2px 5px; height: 75px; background: #eee; overflow: auto; }
+ div.test div.testLog p { margin: 0; padding: 0; font-size: 11px; }
+ </style>
+ <script src="http://code.jquery.com/jquery-1.4.js" type="text/javascript" charset="utf-8"></script>
+ <script src="jquery.mouserest.js" type="text/javascript" charset="utf-8"></script>
+ <script src="jquery.mouseremainover.js" type="text/javascript" charset="utf-8"></script>
+ <script src="jquery.mouseremaindown.js" type="text/javascript" charset="utf-8"></script>
+ <script src="jquery.mouseremainup.js" type="text/javascript" charset="utf-8"></script>
+ <script src="jquery.mouseremainout.js" type="text/javascript" charset="utf-8"></script>
+ <script src="jquery.keyremaindown.js" type="text/javascript" charset="utf-8"></script>
+ <script src="jquery.keyremainup.js" type="text/javascript" charset="utf-8"></script>
+ <script src="jquery.remainfocused.js" type="text/javascript" charset="utf-8"></script>
+ <script src="jquery.remainblurred.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript" charset="utf-8">
+ $(function() {
+
+ $('#mouserestTest')
+ .bind('mouserest', function(event) {
+ log('mouserestLog', 'mouserest 500ms');
+ })
+ .bind('mouserest', { delay: 1000 }, function(event) {
+ log('mouserestLog', 'mouserest 1000ms');
+ })
+ .bind('mouserest', { delay: 1500 }, function(event) {
+ log('mouserestLog', 'mouserest 1500ms');
+ })
+ .bind('mouserest', { delay: 2000 }, function(event) {
+ log('mouserestLog', 'mouserest 2000ms');
+ });
+
+ $('#mouseremainoverTest')
+ .bind('mouseremainover', function(event) {
+ log('mouseremainoverLog', 'mouseremainover 500ms');
+ })
+ .bind('mouseremainover', { delay: 1000 }, function(event) {
+ log('mouseremainoverLog', 'mouseremainover 1000ms');
+ })
+ .bind('mouseremainover', { delay: 1500 }, function(event) {
+ log('mouseremainoverLog', 'mouseremainover 1500ms');
+ })
+ .bind('mouseremainover', { delay: 2000 }, function(event) {
+ log('mouseremainoverLog', 'mouseremainover 2000ms');
+ });
+
+ $('#mouseremainupTest')
+ .bind('mouseremainup', function(event) {
+ log('mouseremainupLog', 'mouseremainup 500ms');
+ })
+ .bind('mouseremainup', { delay: 1000 }, function(event) {
+ log('mouseremainupLog', 'mouseremainup 1000ms');
+ })
+ .bind('mouseremainup', { delay: 1500 }, function(event) {
+ log('mouseremainupLog', 'mouseremainup 1500ms');
+ })
+ .bind('mouseremainup', { delay: 2000 }, function(event) {
+ log('mouseremainupLog', 'mouseremainup 2000ms');
+ });
+
+ $('#mouseremaindownTest')
+ .bind('mouseremaindown', function(event) {
+ log('mouseremaindownLog', 'mouseremaindown 500ms');
+ })
+ .bind('mouseremaindown', { delay: 1000 }, function(event) {
+ log('mouseremaindownLog', 'mouseremaindown 1000ms');
+ })
+ .bind('mouseremaindown', { delay: 1500 }, function(event) {
+ log('mouseremaindownLog', 'mouseremaindown 1500ms');
+ })
+ .bind('mouseremaindown', { delay: 2000 }, function(event) {
+ log('mouseremaindownLog', 'mouseremaindown 2000ms');
+ });
+
+ $('#mouseremainoutTest')
+ .bind('mouseremainout', function(event) {
+ log('mouseremainoutLog', 'mouseremainout 500ms');
+ })
+ .bind('mouseremainout', { delay: 1000 }, function(event) {
+ log('mouseremainoutLog', 'mouseremainout 1000ms');
+ })
+ .bind('mouseremainout', { delay: 1500 }, function(event) {
+ log('mouseremainoutLog', 'mouseremainout 1500ms');
+ })
+ .bind('mouseremainout', { delay: 2000 }, function(event) {
+ log('mouseremainoutLog', 'mouseremainout 2000ms');
+ });
+
+ $('#keyremaindownTest')
+ .bind('keyremaindown', function(event) {
+ log('keyremaindownLog', 'keyremaindown 500ms');
+ })
+ .bind('keyremaindown', { delay: 1000 }, function(event) {
+ log('keyremaindownLog', 'keyremaindown 1000ms');
+ })
+ .bind('keyremaindown', { delay: 1500 }, function(event) {
+ log('keyremaindownLog', 'keyremaindown 1500ms');
+ })
+ .bind('keyremaindown', { delay: 2000 }, function(event) {
+ log('keyremaindownLog', 'keyremaindown 2000ms');
+ });
+
+ $('#keyremainupTest')
+ .bind('keyremainup', function(event) {
+ log('keyremainupLog', 'keyremainup 500ms');
+ })
+ .bind('keyremainup', { delay: 1000 }, function(event) {
+ log('keyremainupLog', 'keyremainup 1000ms');
+ })
+ .bind('keyremainup', { delay: 1500 }, function(event) {
+ log('keyremainupLog', 'keyremainup 1500ms');
+ })
+ .bind('keyremainup', { delay: 2000 }, function(event) {
+ log('keyremainupLog', 'keyremainup 2000ms');
+ });
+
+ $('#remainfocusedTest')
+ .bind('remainfocused', function(event) {
+ log('remainfocusedLog', 'remainfocused 500ms');
+ })
+ .bind('remainfocused', { delay: 1000 }, function(event) {
+ log('remainfocusedLog', 'remainfocused 1000ms');
+ })
+ .bind('remainfocused', { delay: 1500 }, function(event) {
+ log('remainfocusedLog', 'remainfocused 1500ms');
+ })
+ .bind('remainfocused', { delay: 2000 }, function(event) {
+ log('remainfocusedLog', 'remainfocused 2000ms');
+ });
+
+ $('#remainblurredTest')
+ .bind('remainblurred', function(event) {
+ log('remainblurredLog', 'remainblurred 500ms');
+ })
+ .bind('remainblurred', { delay: 1000 }, function(event) {
+ log('remainblurredLog', 'remainblurred 1000ms');
+ })
+ .bind('remainblurred', { delay: 1500 }, function(event) {
+ log('remainblurredLog', 'remainblurred 1500ms');
+ })
+ .bind('remainblurred', { delay: 2000 }, function(event) {
+ log('remainblurredLog', 'remainblurred 2000ms');
+ });
+ });
+
+ function log(id, msg) {
+ $('#'+id)
+ .append('<p>' + msg + '</p>')
+ .scrollTop(999999);
+ }
+ </script>
+ </head>
+ <body>
+ <h1>Virtual DOM Events Demo</h1>
+ <div class="test">
+ <h2>mouserest</h2>
+ <div id="mouserestTest" class="testNode">mouse over me and then rest the mouse for more than half a second</div>
+ <h3>log</h3>
+ <div id="mouserestLog" class="testLog"></div>
+ </div>
+ <div class="test">
+ <h2>mouseremainover</h2>
+ <div id="mouseremainoverTest" class="testNode">mouse over me for more than half a second (mouse can keep moving)</div>
+ <h3>log</h3>
+ <div id="mouseremainoverLog" class="testLog"></div>
+ </div>
+ <div class="test">
+ <h2>mouseremaindown</h2>
+ <div id="mouseremaindownTest" class="testNode">hold mouse down on me for more than half a second (mouse may move)</div>
+ <h3>log</h3>
+ <div id="mouseremaindownLog" class="testLog"></div>
+ </div>
+ <div class="test">
+ <h2>mouseremainup</h2>
+ <div id="mouseremainupTest" class="testNode">mouse down on me, then release mouse and keep mouse up for more than half a second</div>
+ <h3>log</h3>
+ <div id="mouseremainupLog" class="testLog"></div>
+ </div>
+ <div class="test">
+ <h2>mouseremainout</h2>
+ <div id="mouseremainoutTest" class="testNode">first mouse over me, then mouse out and keep mouse out for more than half a second</div>
+ <h3>log</h3>
+ <div id="mouseremainoutLog" class="testLog"></div>
+ </div>
+ <div class="test">
+ <h2>keyremaindown</h2>
+ <textarea id="keyremaindownTest" class="testNode">first click on me, then press and hold a key down for m ore than half a second</textarea>
+ <h3>log</h3>
+ <div id="keyremaindownLog" class="testLog"></div>
+ </div>
+ <div class="test">
+ <h2>keyremainup</h2>
+ <textarea id="keyremainupTest" class="testNode">click on me, press and release a key, and don't press another for more than half a second</textarea>
+ <h3>log</h3>
+ <div id="keyremainupLog" class="testLog"></div>
+ </div>
+ <div class="test">
+ <h2>remainfocused</h2>
+ <textarea id="remainfocusedTest" class="testNode">click on me, and keep this textarea element focused for more than half a second</textarea>
+ <h3>log</h3>
+ <div id="remainfocusedLog" class="testLog"></div>
+ </div>
+ <div class="test">
+ <h2>remainblurred</h2>
+ <textarea id="remainblurredTest" class="testNode">first click on me, then click outside and keep me blurred for more than half a second</textarea>
+ <h3>log</h3>
+ <div id="remainblurredLog" class="testLog"></div>
+ </div>
+ </body>
+</html>
@@ -0,0 +1,58 @@
+/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ *
+ * Requires: jQuery 1.4+
+ */
+(function($) {
+
+var fired, timer;
+
+$.event.special.keyremaindown = {
+ setup: function() {
+ $.event.add(this, 'keypress', $.event.special.keyremaindown.handler);
+ },
+
+ add: function(handler, data, namespaces) {
+ var elem = this, timeout,
+ delay = data && data.delay || 500;
+
+ return function() {
+ var context = this, args = arguments,
+ timeout = setTimeout(function() {
+ handler.apply(context, args);
+ unbind();
+ }, delay);
+
+ $.event.add(elem, 'keyup', keyup);
+
+ function keyup() {
+ clearTimeout(timeout);
+ unbind();
+ }
+
+ function unbind() {
+ $.event.remove(elem, 'keyup', keyup);
+ }
+ };
+ },
+
+ teardown: function() {
+ $.event.remove(this, 'keypress', $.event.special.keyremaindown.handler);
+ },
+
+ handler: function(event) {
+ if (!fired) {
+ event.type = "keyremaindown";
+ $.event.handle.apply(this, arguments);
+ fired = true;
+ } else {
+ clearTimeout(timer);
+ timer = setTimeout(function() {
+ fired = false;
+ }, 250);
+ }
+ }
+};
+
+})(jQuery);
@@ -0,0 +1,48 @@
+/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ *
+ * Requires: jQuery 1.4+
+ */
+(function($) {
+
+$.event.special.keyremainup = {
+ setup: function() {
+ $.event.add(this, 'keyup', $.event.special.keyremainup.handler);
+ },
+
+ add: function(handler, data, namespaces) {
+ var elem = this,
+ delay = data && data.delay || 500;
+
+ return function() {
+ var context = this, args = arguments,
+ timeout = setTimeout(function() {
+ handler.apply(context, args);
+ unbind();
+ }, delay);
+
+ $.event.add(elem, 'keydown', keydown);
+
+ function keydown() {
+ clearTimeout(timeout);
+ unbind();
+ }
+
+ function unbind() {
+ $.event.remove(elem, 'keydown', keydown);
+ }
+ };
+ },
+
+ teardown: function() {
+ $.event.remove(this, 'keyup', $.event.special.keyremainup.handler);
+ },
+
+ handler: function(event) {
+ event.type = "keyremainup";
+ $.event.handle.apply(this, arguments);
+ }
+};
+
+})(jQuery);
Oops, something went wrong. Retry.

0 comments on commit 6e06da2

Please sign in to comment.