Tests/Element/Element.Delegation.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   5
   6                 <title>Element Delegation Tests</title>
   7
   8                 <script src="../../../Source/Core/Core.js" type="text/javascript"></script>
   9                 <script src="../../../Source/Types/Array.js" type="text/javascript"></script>
  10                 <script src="../../../Source/Types/Function.js" type="text/javascript"></script>
  11                 <script src="../../../Source/Types/Number.js" type="text/javascript"></script>
  12                 <script src="../../../Source/Types/String.js" type="text/javascript"></script>
  13                 <script src="../../../Source/Types/Object.js" type="text/javascript"></script>
  14                 <script src="../../../Source/Types/DOMEvent.js" type="text/javascript"></script>
  15                 <script src="../../../Source/Browser/Browser.js" type="text/javascript"></script>
  16                 <script src="../../../Source/Slick/Slick.Parser.js" type="text/javascript"></script>
  17                 <script src="../../../Source/Slick/Slick.Finder.js" type="text/javascript"></script>
  18                 <script src="../../../Source/Element/Element.js" type="text/javascript"></script>
  19                 <script src="../../../Source/Element/Element.Event.js" type="text/javascript"></script>
  20                 <script src="../../../Source/Element/Element.Delegation.js" type="text/javascript"></script>
  21
  22                 <style>
  23
  24                         body {
  25                                 font: 13px sans-serif;
  26                         }
  27
  28                         h1 {
  29                                 border-top: 1px dashed #AAA;
  30                                 font: normal 22px sans-serif;
  31                                 margin: 5px 0;
  32                                 padding-top: 10px;
  33                         }
  34
  35                         #content {
  36                                 top: 0;
  37                                 bottom: 0;
  38                                 left: 370px;
  39                                 position: absolute;
  40                                 overflow: auto;
  41                                 padding-bottom: 150px;
  42                                 right: 0;
  43                         }
  44
  45                         #aside {
  46                                 background: #F5F5F5;
  47                                 border-right: 1px dashed #AAA;
  48                                 bottom: 0;
  49                                 font-family: monospace;
  50                                 left: 0;
  51                                 margin-right: 10px;
  52                                 overflow: auto;
  53                                 padding: 10px;
  54                                 position: absolute;
  55                                 top: 0;
  56                                 width: 340px;
  57                         }
  58
  59                         .success {
  60                                 background: greenyellow;
  61                         }
  62
  63                         .fail {
  64                                 background: orangered;
  65                         }
  66
  67                         .box {
  68                                 background: greenyellow;
  69                                 border: 1px solid black;
  70                                 padding: 10px;
  71                                 width: 300px;
  72                         }
  73
  74                         #mouseenter_table {
  75                                 border-collapse: collapse;
  76                         }
  77
  78                         #mouseenter_table tr {
  79                                 background-color: cyan;
  80                                 color: blue;
  81                         }
  82
  83                         #mouseenter_table td {
  84                                 border: 1px solid white;
  85                                 padding: 10px;
  86                         }
  87
  88                 </style>
  89
  90         </head>
  91         <body>
  92
  93                 <div id="aside">
  94                         <h2>Log</h2>
  95                         <div id="log"></div>
  96                 </div>
  97
  98                 <script>
  99
 100                         var logger = $('log');
 101                         var log = function(msg, success){
 102                                 new Element('div', {
 103                                         'class': success == true ? 'success' : (success == false ? 'fail' : ''),
 104                                         text: msg
 105                                 }).inject(logger, 'top');
 106                         };
 107
 108                 </script>
 109
 110                 <div id="content">
 111
 112                         <h1>Simple Click events</h1>
 113
 114                         <ul id="list">
 115                                 <li>First</li>
 116                                 <li><div style="font-weight: bold">Second</div></li>
 117                                 <li>Third</li>
 118                         </ul>
 119
 120                         <script>
 121
 122                                 var secondLI = document.getElement('#list li:nth-child(2)');
 123                                 var listListener = function(event, matched){
 124                                         log('Matched element is <li>', matched.get('tag') == 'li');
 125                                         log('`this` == arguments[1]', matched == this);
 126                                         if (matched == secondLI) log('2nd event target tag == p', event.target.get('tag') == 'div');
 127                                         log('---');
 128                                 };
 129                                 var list = $('list');
 130                                 var listAdd = list.addEvent.pass(['click:relay(li)', listListener], list);
 131                                 var listRemove = list.removeEvent.pass(['click:relay(li)', listListener], list);
 132                                 listAdd();
 133
 134                         </script>
 135
 136                         <p>
 137                                 <button onclick="listAdd()">Add Events</button> -
 138                                 <button onclick="listRemove()">Remove Events</button>
 139                         </p>
 140
 141                         <h1>Mouseenter / Mouseleave</h1>
 142
 143                         <div id="mouseenter_leave">
 144                                 <div class="mouse box">
 145                                         Enter or <strong>leave</strong> this element with your <em>mouse</em>.
 146                                         The event should only fire once for each time you perform the action.
 147                                 </div>
 148                         </div>
 149
 150                         <h1>Mouseenter / Mouseleave with tr</h1>
 151
 152                         <table id="mouseenter_table">
 153                                 <tbody>
 154                                         <tr class="box">
 155                                                 <td>COLUMN 1</td>
 156                                                 <td>COLUMN 2</td>
 157                                         </tr>
 158                                 </tbody>
 159                         </table>
 160
 161                         <script>
 162                                 $('mouseenter_leave').addEvents({
 163                                         'mouseenter:relay(.mouse)': log.pass(['enter', true]),
 164                                         'mouseleave:relay(.mouse)': function(){
 165                                                 log('leave', true);
 166                                                 log('---');
 167                                         }
 168                                 });
 169                                 $('mouseenter_table').addEvents({
 170                                         'mouseenter:relay(tr)': log.pass(['entered tr', true]),
 171                                         'mouseleave:relay(tr)': function(){
 172                                                 log('left tr', true);
 173                                                 log('---');
 174                                         }
 175                                 })
 176                         </script>
 177
 178                         <h1>Focus / Blur</h1>
 179
 180                         <p>
 181                                 Click or tab to one of the input fields and the focus and blur
 182                                 events should fire.
 183                         </p>
 184
 185                         <div id="focus_blur">
 186                                 <input type="text" /><br />
 187                                 <input type="text" />
 188                         </div>
 189
 190                         <p>
 191                                 <button onclick="focusAdd()">Add Events</button> -
 192                                 <button onclick="focusRemove()">Remove Events</button>
 193                         </p>
 194
 195                         <script>
 196                                 var focusEvents = {
 197                                         'focus:relay(input)': log.pass(['focus', true]),
 198                                         'blur:relay(input)': function(){
 199                                                 log('blur', true);
 200                                                 log('---');
 201                                         }
 202                                 };
 203                                 $('focus_blur').addEvents(focusEvents);
 204                                 var focusAdd = function(){
 205                                         $('focus_blur').addEvents(focusEvents);
 206                                 }
 207                                 var focusRemove = function(){
 208                                         $('focus_blur').removeEvents(focusEvents);
 209                                 }
 210                         </script>
 211
 212                         <h1>Submit / Reset</h1>
 213
 214                         <p>
 215                                 Should work on the form and on a div wrapping the form.
 216                                 Try tabbing to the buttons and press enter, or tabbing to
 217                                 the element and press enter.
 218                         </p>
 219
 220                         <div id="submit_wrapper">
 221                                 <div>
 222                                         <form>
 223                                                 <input type="text" value="some text" />
 224                                                 <input type="submit" value="Submit" />
 225                                                 <input type="reset" value="reset" />
 226                                         </form>
 227                                         <input type="submit" value="Does nothing" />
 228                                 </div>
 229                         </div>
 230
 231                         <script>
 232                                 $('submit_wrapper').addEvents({
 233                                         'submit:relay(div)': function(event, matcher){
 234                                                 event.preventDefault();
 235                                                 log('submit on div', matcher.get('tag') == 'div');
 236                                                 log('`event.target.tagName == form`', event.target.get('tag') == 'form');
 237                                         },
 238                                         'submit:relay(form)': function(event, matcher){
 239                                                 event.preventDefault();
 240                                                 log('submit on form', matcher.get('tag') == 'form');
 241                                         },
 242                                         'reset:relay(div)': function(){
 243                                                 log('reset', true);
 244                                         }
 245                                 });
 246                         </script>
 247
 248                         <h1>Change</h1>
 249
 250                         <p>
 251                                 Change the text. When you blur the input field, the change event
 252                                 should fire for both the element which wraps the input fields
 253                                 and bubble to it, and the input fields itself.
 254                         </p>
 255
 256                         <div id="change">
 257                                 <input type="text" value="some text" class="someClass" /><br />
 258                                 <select name="yo">
 259                                         <option>First</option>
 260                                         <option>Second</option>
 261                                         <option>Third</option>
 262                                 </select><br />
 263                                 <input type="checkbox" value="1" /><br />
 264                                 <input type="radio" name="rad[]" value="1" /><input type="radio" name="rad[]" value="2" />
 265                         </div>
 266
 267                         <script>
 268                                 $('change').addEvent('change:relay(input.someClass,select,input[type="checkbox"],input[type="radio"])', function(){
 269                                         log('change', true);
 270                                 });
 271                                 $(document.body).addEvent('change:relay(#change)', function(){
 272                                         log('change bubbles', true);
 273                                 });
 274                         </script>
 275
 276                         <h1>Select</h1>
 277
 278                         <p>
 279                                 Select some text and the select event should fire
 280                         </p>
 281
 282                         <div id="select">
 283                                 <form>
 284                                         <input type="text" value="select some text in this input" id="select_input" />
 285                                 </form>
 286                         </div>
 287
 288                         <script>
 289                                 var select_input = $('select_input');
 290                                 $('select').addEvent('select:relay(form)', function(event){
 291                                         log('select', true);
 292                                         log('`event.target.tagName == input`', event.target.get('tag') == 'input');
 293                                 });
 294                         </script>
 295
 296                         <h1>Paste</h1>
 297
 298                         <div id="paste">
 299                                 <textarea></textarea>
 300                         </div>
 301
 302                         <script>
 303                                 $('paste').addEvent('paste:relay(textarea)', function(event){
 304                                         log('Paste', true);
 305                                 });
 306                         </script>
 307
 308                 </div>
 309
 310         </body>
 311 </html>
 312