diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/event-propagation.html')
-rw-r--r-- | contexts/data/lib/closure-library/closure/goog/demos/event-propagation.html | 192 |
1 files changed, 0 insertions, 192 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/event-propagation.html b/contexts/data/lib/closure-library/closure/goog/demos/event-propagation.html deleted file mode 100644 index 47eac15..0000000 --- a/contexts/data/lib/closure-library/closure/goog/demos/event-propagation.html +++ /dev/null @@ -1,192 +0,0 @@ -<!DOCTYPE html> -<html> -<!-- -Copyright 2010 The Closure Library Authors. All Rights Reserved. - -Use of this source code is governed by the Apache License, Version 2.0. -See the COPYING file for details. ---> -<head> -<title>goog.events</title> -<script src="../base.js"></script> -<script> -goog.require('goog.events'); -</script> -<link rel="stylesheet" href="css/demo.css"> -<style> - -html, body { - background-color: #FFF; - width: 100%; - height: 100%; - padding: 0px; - margin: 0px; -} - - -h1 { - font: normal 24px arial; - color: #009; - margin-top: 10px; - margin-left: 10px; - margin-right: 0px; - margin-bottom: 0px; - width: 450px; -} - -p { - font: normal 14px arial; - color: #999; - margin-top: 0px; - margin-left: 10px; - width: 450px; -} - -#tree ul { - font: normal 12px arial; - list-style: none; - margin: 0px; - padding:0px; -} - -#tree ul ul { - padding-left: 36px; -} - -html>body #tree span { - position: relative; - top: -2px; -} - -#tree div:hover { - background-color: #EEE; -} - -#tree { - width: 300px; - height: 800px; - border: 2px solid #EEE; - float: left; -} - -#log { - width: 400px; - height: 800px; - border: 2px solid #EEE; - border-left: 0px; - margin-top: 0px; - background-color: #FAFAFA; -} - -</style> -<script> - -var depth = 3; -var breadth = 2; -function writeTree(pos, preId) { - if (!pos) pos = 0; - - document.write('<ul id="ol' + (preId || '') + '">'); - - for (var i = 1; i <= breadth; i++) { - document.write('<li id="li-' + (preId || '') + i + '">'); - document.write('<div>'); - document.write('<input type="checkbox" id="chk1-' + (preId || '') + i + '" />'); - document.write('<input type="checkbox" id="chk2-' + (preId || '') + i + '" />'); - document.write('<span>'); - document.write((preId || '') + i); - document.write('</span></div>'); - if (pos < depth) writeTree(pos + 1, (preId || '') + i + '-'); - document.write('</li>'); - } - - document.write('</ul>'); -} - - -// Dirty little buffered log so that logging doesn't affect times. -var start = goog.now(); -var buffer = ''; -var timer = null; -function log(str) { - var time = ((new Date()).getTime() - start) / 1000; - buffer = '[' + time + '] ' + str + '\n' + buffer; - clearTimeout(timer); - timer = setTimeout(sendBuffer, 250); -} - -function sendBuffer() { - document.getElementById('log').value = buffer + - document.getElementById('log').value; - buffer = ''; -} - - - -function doLoad() { - if (arguments.callee.loaded) return; - arguments.callee.loaded = true; - - document.getElementById('log').value = ''; - log('LOADED'); - - log('Adding handlers'); - var lis = document.getElementById('tree').getElementsByTagName('li'); - for (var i = 0; i < lis.length; i++) { - //lis[i].addEventListener('mousedown', handleCapture, true); - //lis[i].addEventListener('mousedown', handleBubble, false); - goog.events.listen(lis[i], 'mousedown', handleCapture, true); - goog.events.listen(lis[i], 'mousedown', handleBubble, false); - } - log('Finished adding handlers'); - - - goog.events.listen(document.getElementById('log'), - 'dblclick', function() { this.value = ''; }); -} - -function handleCapture(e) { - if (e.target.tagName != 'INPUT') { - var id = e.currentTarget.id.replace(/li\-/, ''); - - if (document.getElementById('chk1-' + id).checked) { - e.stopPropagation(); - log('Capture - ' + id + ' [Cancelled]'); - } else { - log('Capture - ' + id); - } - } -} - -function handleBubble(e) { - if (e.target.tagName != 'INPUT') { - var id = e.currentTarget.id.replace(/li\-/, ''); - - if (document.getElementById('chk2-' + id).checked) { - e.stopPropagation(); - log('Bubble - ' + id + ' [Cancelled]'); - } else { - log('Bubble - ' + id); - } - } -} - -goog.events.listen(window, 'load', doLoad); - -</script> -</head> -<body> - <h1>goog.events - Stop Propagation</h1> - <p><strong>Test the cancelling of capture and bubbling events.</strong> Click - one of the nodes to see the event trace, then use the check boxes to cancel the - capture or bubble at a given branch. - (Double click the text area to clear it)</p> - - <div id="tree"> - <script>writeTree();</script> - </div> - - <textarea id="log"></textarea> - - </body> -</html> |