Merge from 3.0 branch till 1264.

1 files changed, 72 insertions, 72 deletions

diff --git a/demos/quickstart/protected/pages/Advanced/Scripts2.page b/demos/quickstart/protected/pages/Advanced/Scripts2.page
index 6ee6a5d8..2c9ce220 100644
--- a/demos/quickstart/protected/pages/Advanced/Scripts2.page
+++ b/demos/quickstart/protected/pages/Advanced/Scripts2.page
@@ -9,13 +9,13 @@
 Event.observe(element, name, observer, [useCapture]);

 </com:TTextHighlighter>

 

-<p>Assuming for a moment that we want to observe when a link was clicked, 

+<p>Assuming for a moment that we want to observe when a link was clicked,

 we could do the following:</p>

 

 <com:TTextHighlighter Language="javascript" CssClass="source">

 // &lt;a id="clicker" href="http://foo.com"&gt;Click me&lt;/a&gt;

 Event.observe('clicker', 'click', function(event)

-{ 

+{

     alert('clicked!');

 });

 </com:TTextHighlighter>

@@ -24,7 +24,7 @@ Event.observe('clicker', 'click', function(event)
 

 <com:TTextHighlighter Language="javascript" CssClass="source">

 Event.observe('clicker', 'click', function(event)

-{ 

+{

     alert(Event.element(event));

 });

 </com:TTextHighlighter>

@@ -35,8 +35,8 @@ Event.observe('clicker', 'click', function(event)
 

 <com:TTextHighlighter Language="javascript" CssClass="source">

 Event.observe(document, 'keypress', function(event)

-{ 

-    if(Event.keyCode(event) == Event.KEY_TAB) 

+{

+    if(Event.keyCode(event) == Event.KEY_TAB)

         alert('Tab Pressed');

 });

 </com:TTextHighlighter>

@@ -44,37 +44,37 @@ Event.observe(document, 'keypress', function(event)
 <p>And lets say we wanted to keep track of what has been typed :</p>

 

 <com:TTextHighlighter Language="javascript" CssClass="source">

-Event.observe('search', 'keypress', function(event) 

-{ 

+Event.observe('search', 'keypress', function(event)

+{

     Element.update('search-results', $F(Event.element(event)));

 });

 </com:TTextHighlighter>

 

-<p>Prototype defines properties inside the event object for some 

-of the more common keys, so feel free to dig around in Prototype to 

+<p>Prototype defines properties inside the event object for some

+of the more common keys, so feel free to dig around in Prototype to

 see which ones those are.</p>

 

-<p>A final note on keypress events; If you'd like to detect a 

+<p>A final note on keypress events; If you'd like to detect a

 left click you can use <tt>Event.isLeftClick(event)</tt>.</p>

 

 <h2 id="6704">Getting the coordinates of the mouse pointer</h2>

 

-<p>Drag and drop, dynamic element resizing, games, and 

-much more all require the ability to track the X and Y location of 

-the mouse. Prototype makes this fairly simple. The code below tracks 

-the X and Y position of the mouse and spits out those values into 

+<p>Drag and drop, dynamic element resizing, games, and

+much more all require the ability to track the X and Y location of

+the mouse. Prototype makes this fairly simple. The code below tracks

+the X and Y position of the mouse and spits out those values into

 an input box named mouse.</p>

 

 <com:TTextHighlighter Language="javascript" CssClass="source">

 Event.observe(document, 'mousemove', function(event)

 {

-    $('mouse').value = "X: " + Event.pointerX(event) + 

+    $('mouse').value = "X: " + Event.pointerX(event) +

                        "px Y: " + Event.pointerY(event) + "px";

 });

 </com:TTextHighlighter>

 

-<p>If we wanted to observe the mouse location when it was 

-hovering over a certain element, we'd just change the document argument to 

+<p>If we wanted to observe the mouse location when it was

+hovering over a certain element, we'd just change the document argument to

 the id or element that was relevant.</p>

 

 <h2 id="6705">Stopping Propagation</h2>

@@ -83,33 +83,33 @@ the id or element that was relevant.</p>
 

 <h2 id="6706">Events, Binding, and Objects</h2>

 

-<p>Everything has been fairly straight forward so far, but things 

-start getting a little tricker when you need to work with events in 

-and object-oriented environment. You have to deal with binding and funky 

+<p>Everything has been fairly straight forward so far, but things

+start getting a little trickier when you need to work with events in

+and object-oriented environment. You have to deal with binding and funky

 looking syntax that might take a moment to get your head around.</p>

 

 <p>Lets look at some code so you can get a better understanding of what I'm talking about.</p>

 <com:TTextHighlighter Language="javascript" CssClass="source">

 EventDispenser = Class.create();

-EventDispenser.prototype = 

+EventDispenser.prototype =

 {

-  initialize: function(list) 

+  initialize: function(list)

   {

     this.list = list;

 

-    // Observe clicks on our list items     

-    $$(this.list + " li").each(function(item) 

+    // Observe clicks on our list items

+    $$(this.list + " li").each(function(item)

     {

         Event.observe(item, 'click', this.showTagName.bindEvent(this));

     }.bind(this));

 

-    // Observe when a key on the keyboard is pressed. 

-    // In the observer, we check for 

+    // Observe when a key on the keyboard is pressed.

+    // In the observer, we check for

     // the tab key and alert a message if it is pressed.

     Event.observe(document, 'keypress', this.onKeyPress.bindEvent(this));

 

-    // Observe our fake live search box.  When a user types 

-    // something into the box, the observer will take that 

+    // Observe our fake live search box.  When a user types

+    // something into the box, the observer will take that

     // value(-1) and update our search-results div with it.

     Event.observe('search', 'keypress', this.onSearch.bindEvent(this));

 

@@ -117,65 +117,65 @@ EventDispenser.prototype =
   },

 

   // Arbitrary functions to respond to events

-  showTagName: function(event) 

+  showTagName: function(event)

   {

     alert(Event.element(event).tagName);

   },

 

-  onKeyPress: function(event) 

+  onKeyPress: function(event)

   {

     var code = event.keyCode;

-    if(code == Event.KEY_TAB) 

+    if(code == Event.KEY_TAB)

         alert('Tab key was pressed');

   },

 

-  onSearch: function(event) 

+  onSearch: function(event)

   {

     Element.update('search-results', $F(Event.element(event)));

   },

 

-  onMouseMove: function(event) 

+  onMouseMove: function(event)

   {

-    $('mouse').value = "X: " + Event.pointerX(event) + 

+    $('mouse').value = "X: " + Event.pointerX(event) +

                 "px Y: " + Event.pointerY(event) + "px";

   }

 }

 </com:TTextHighlighter>

-<p>Whoa! What's going on here? Well, we've defined our a 

-custom class <tt>EventDispenser</tt>. We're going to be using this class 

-to setup events for our document. Most of this code is a 

-rewrite of the code we looked at earlier except this time, we 

+<p>Whoa! What's going on here? Well, we've defined our a

+custom class <tt>EventDispenser</tt>. We're going to be using this class

+to setup events for our document. Most of this code is a

+rewrite of the code we looked at earlier except this time, we

 are working from inside an object.</p>

 

-<p>Looking at the <tt>initialize</tt> method, we can really see how 

+<p>Looking at the <tt>initialize</tt> method, we can really see how

 things are different now. Take a look at the code below:</p>

 <com:TTextHighlighter Language="javascript" CssClass="source">

-// Observe clicks on our list items     

-$$(this.list + " li").each(function(item) 

+// Observe clicks on our list items

+$$(this.list + " li").each(function(item)

 {

     Event.observe(item, 'click', this.showTagName.bindEvent(this));

 }.bind(this));

 </com:TTextHighlighter>

 

-<p>We've got iterators, binding and all sorts of stuff going on. 

+<p>We've got iterators, binding and all sorts of stuff going on.

 Lets break down what this chunk of code is doing.</p>

 

-<p>First we are hunting for a collection of elements based on 

-it's Css selector. This uses the Prototype selector function <tt>$$()</tt>. 

-After we've found the list items we are dealing with we send 

+<p>First we are hunting for a collection of elements based on

+it's CSS selector. This uses the Prototype selector function <tt>$$()</tt>.

+After we've found the list items we are dealing with we send

 those into an each iteration where we will add our observers.</p>

 

 <com:TTextHighlighter Language="javascript" CssClass="source">

 Event.observe(item, 'click', this.showTagName.bindEvent(this));

 </com:TTextHighlighter>

 

-<p>Now looking at the code above, you'll notice the <tt>bindEvent</tt> function. 

-This takes the method before it <tt>showTagName</tt> and treats it as the 

-method that will be triggered when, in this case, 

+<p>Now looking at the code above, you'll notice the <tt>bindEvent</tt> function.

+This takes the method before it <tt>showTagName</tt> and treats it as the

+method that will be triggered when, in this case,

 someone clicks one of our list items.</p>

 

-<p>You'll also notice we pass this as an argument to the <tt>bindEvent</tt> function. 

-This simply allows us to reference the object in context <tt>EventDispenser</tt> 

+<p>You'll also notice we pass this as an argument to the <tt>bindEvent</tt> function.

+This simply allows us to reference the object in context <tt>EventDispenser</tt>

 inside our function <tt>showTagName(event)</tt>. If the <tt>showTagName</tt> function

 requires additional parameters, you can attach them to the later parameters of <tt>bindEvent</tt>. For example</p>

 <com:TTextHighlighter Language="javascript" CssClass="source">

@@ -185,58 +185,58 @@ this.showTagName.bindEvent(this, param1, param2);
 showTime : function (event, param1, param2) { ... }

 </com:TTextHighlighter>

 

-<p>Moving on, you'll see <tt>bind(this)</tt> attached to our iterator function. 

-This really has nothing to do with events, it is only here to allow me to 

-use <tt>this</tt> inside the iterator. If we didn't use <tt>bind(this)</tt>, I couldn't 

+<p>Moving on, you'll see <tt>bind(this)</tt> attached to our iterator function.

+This really has nothing to do with events, it is only here to allow me to

+use <tt>this</tt> inside the iterator. If we did not use <tt>bind(this)</tt>, I could not

 reference the method <tt>showTagName</tt> inside the iterator.</p>

 

-<p>Ok, so we'll move on to looking at our methods that actually get 

+<p>Ok, so we'll move on to looking at our methods that actually get

 called when an event occurs. Since we've been dealing with <tt>showTagName</tt>, lets look at it.</p>

 

 <com:TTextHighlighter Language="javascript" CssClass="source">

-showTagName: function(event) 

+showTagName: function(event)

 {

     alert(Event.element(event).tagName);

 }

 </com:TTextHighlighter>

 

-<p>As you can see, this function accepts one argument--the event. 

-In order for us to get the element which fired the event we need to 

+<p>As you can see, this function accepts one argument--the event.

+In order for us to get the element which fired the event we need to

 pass that argument to <tt>Event.element</tt>. Now we can manipulate it at will.</p>

 

-<p>This covers the most confusing parts of our code. The text above is also 

-relevant to the remaining parts of our code. If there is anything about 

+<p>This covers the most confusing parts of our code. The text above is also

+relevant to the remaining parts of our code. If there is anything about

 this you don't understand, feel free to ask questions in the forum.</p>

 

 <h2 id="6707">Removing Event Listeners</h2>

 

-<p>This one threw me for a loop the first time I tried to use it. 

-I tried something similar to what I did in the <tt>Event.observe</tt> 

-call with the exception of using <tt>stopObserving</tt>, but nothing seemed 

+<p>This one threw me for a loop the first time I tried to use it.

+I tried something similar to what I did in the <tt>Event.observe</tt>

+call with the exception of using <tt>stopObserving</tt>, but nothing seemed

 to change. In other words, the code below does <b>NOT</b> work.</p>

 

 <com:TTextHighlighter Language="javascript" CssClass="source">

-$$(this.list + " li").each(function(item) 

+$$(this.list + " li").each(function(item)

 {

     Event.stopObserving(item, 'click', this.showTagName);

 }.bind(this));

 </com:TTextHighlighter>

 

-<p>What's the deal here? The reason this doesn't work is because there 

+<p>What's the deal here? The reason this does not work is because there

 is no pointer to the observer. This means that when we passed <tt>this.showTagName</tt>

-in the <tt>Event.observe</tt> method before hand, we passed it as an 

-anonymous function. We can't reference an anonymous function 

-because it simply doesn't have a pointer.</p>

+in the <tt>Event.observe</tt> method before hand, we passed it as an

+anonymous function. We can't reference an anonymous function

+because it simply does not have a pointer.</p>

 

-<p>So how do we get the job done? All we need to do is give the 

-observing function a pointer, or the jargon free version: Set a variable 

+<p>So how do we get the job done? All we need to do is give the

+observing function a pointer, or the jargon free version: Set a variable

 that points to <tt>this.showTagName</tt>. Ok, lets change our code a bit.</p>

 

 <com:TTextHighlighter Language="javascript" CssClass="source">

 this.showTagObserver = this.showTagName.bindEvent(this);

 

-// Observe clicks on our list items     

-$$(this.list + " li").each(function(item) 

+// Observe clicks on our list items

+$$(this.list + " li").each(function(item)

 {

     Event.observe(item, 'click', this.showTagObserver);

 }.bind(this));

@@ -244,7 +244,7 @@ $$(this.list + " li").each(function(item)
 

 <p>Now we can remove the event listeners from our list like this:</p>

 <com:TTextHighlighter Language="javascript" CssClass="source">

-$$(this.list + " li").each(function(item) 

+$$(this.list + " li").each(function(item)

 {

     Event.stopObserving(item, 'click', this.showTagObserver);

 }.bind(this));