Port the Life example to Pepper 2.

examples/graphics/life/dragger.js

+// Copyright 2011 The Native Client SDK Authors.
+// Use of this source code is governed by a BSD-style license that can
+// be found in the LICENSE file.
+
+/**
+ * @fileoverview  This class implements a mouse-drag event.  It registers for
+ * mousedown events, and when it sees one, starts capturing mousemove events
+ * until it gets a mousup event.  It manufactures three drag events: the

[dmichael(do not use this one), 2011/02/02 23:03:59]

three +kinds of+ drag events?
I haven't read all the way through, but I expect DRAG can happen more than once.

[David Springer, 2011/02/03 18:12:27]

Done.

+ * DRAG_START, DRAG and DRAG_END.
+ */
+
+// The uikit namespace.
+var uikit = uikit || {};
+
+/**
+ * Constructor for the Dragger.  Register for mousedown events that happen on
+ * |opt_target|.  If |opt_target| is null or undefined, then this object observes

[dmichael(do not use this one), 2011/02/02 23:03:59]

nit:  >80 characters

[David Springer, 2011/02/03 18:12:27]

Done.

+ * mousedown on the whole document.
+ * @param {?Element} opt_target The event target.  Defaults to the whole
+ *     document.
+ * @constructor
+ */
+uikit.Dragger = function(target) {
+  /**
+   * The event target.
+   * @type {Element}
+   * @private
+   */
+  this.target_ = target || document;
+
+  /**
+   * The array of objects that get notified of drag events.  Each object in
+   * this array get sent a handleStartDrag(), handleDrag() and handleEndDrag()

[dmichael(do not use this one), 2011/02/02 23:03:59]

get->gets (or is)

[David Springer, 2011/02/03 18:12:27]

Done.

+   * message.
+   * @type {Array.<Object>}
+   * @private
+   */
+  this.listeners_ = [];
+
+  /**
+   * Flag to indicate whether the object is in a drag sequence or not.
+   * @type {boolean}
+   * @private
+   */
+  this.isDragging_ = false;
+
+  /**
+   * The function objects that get attached as event handlers.  These are
+   * cached so that they can be removed on mouse up.
+   * @type {function}
+   * @private
+   */
+  this.boundMouseMove_ = null;
+  this.boundMouseUp_ = null;
+
+  this.target_.addEventListener('mousedown',
+                                this.onMouseDown.bind(this),
+                                false);
+}
+
+/**
+ * The ids used for drag event types.
+ * @enum {string}
+ */
+uikit.Dragger.DragEvents = {
+  DRAG_START: 'dragstart',  // Start a drag sequence
+  DRAG: 'drag',  // Mouse moved during a drag sequence.
+  DRAG_END: 'dragend'  // End a drag sewquence.
+};
+
+/**
+ * Add a drag listener.  Each listener should respond to thhree methods:

[dmichael(do not use this one), 2011/02/02 23:03:59]

s/thhree/three

[David Springer, 2011/02/03 18:12:27]

Done.

+ * handleStartDrag(), handleDrag() and handleEndDrag().  This method assumes
+ * that |listener| does not already exist in the array of listeners.
+ * @param {!Object} listener The object that will listen to drag events.
+ */
+uikit.Dragger.prototype.addDragListener = function(listener) {
+  this.listeners_.push(listener);
+}
+
+/**
+ * Handle a mousedown event: register for mousemove and mouseup, then tell
+ * the target that is has a DRAG_START event.
+ * @param {Event} event The mousedown event that triggered this method.
+ */
+uikit.Dragger.prototype.onMouseDown = function(event) {
+  this.boundMouseMove_ = this.onMouseMove.bind(this);
+  this.boundMouseUp_ = this.onMouseUp.bind(this);
+  this.target_.addEventListener('mousemove', this.boundMouseMove_);
+  this.target_.addEventListener('mouseup', this.boundMouseUp_);
+  this.isDragging_ = true;
+  var dragStartEvent = { type: uikit.Dragger.DragEvents.DRAG_START,
+                         clientX: event.offsetX,
+                         clientY: event.offsetY };

[dmichael(do not use this one), 2011/02/02 23:03:59]

It might be good to document what this event var contains on uikit.Dragger or
addDragListener.

[David Springer, 2011/02/03 18:12:27]

Good point.  It is a DOM Event object, which is documented here:
http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevents. I notice that
offsetX/Y is actually not in the W3 DOM spec... I'll look into a way to use
clientX/Y instead.

+  var i;
+  for (i = 0; i < this.listeners_.length; ++i) {
+    this.listeners_[i].handleStartDrag(this.target_, dragStartEvent);

[dmichael(do not use this one), 2011/02/02 23:03:59]

You could abstract this loop out if you wanted;  it should be pretty similar for
all 3 events.

And is the index style more common than 'for listener in this.listeners_'?  I
usually prefer a 'for each' kind of loop in languages where I have it, but I
don't know what's most common in JavaScript.

[David Springer, 2011/02/03 18:12:27]

for...in in JS can cause problems because of the dynamic nature of property
bindings.  It's safer to use the for() {} style.

As for abstracting: I could write a small function that takes name of the
handler function to call, but this is getting into some very peculiar JS.

[dmichael(do not use this one), 2011/02/03 20:08:44]

Nevermind; was neglecting that the function call is different.  I think you
could just pass the function itself, but that would be less clear, if anything. 
Forget I said it.

+  }
+}
+
+/**
+ * Handle a mousemove event: tell the target that is has a DRAG event.
+ * @param {Event} event The mousemove event that triggered this method.
+ */
+uikit.Dragger.prototype.onMouseMove = function(event) {
+  if (!this.isDragging_)
+    return;
+  var dragEvent = { type: uikit.Dragger.DragEvents.DRAG,
+                    clientX: event.offsetX,
+                    clientY: event.offsetY};
+  var i;
+  for (i = 0; i < this.listeners_.length; ++i) {
+    this.listeners_[i].handleDrag(this.target_, dragEvent);
+  }
+}
+
+/**
+ * Handle a mouseup event: un-register for mousemove and mouseup, then tell
+ * the target that is has a DRAG_END event.
+ * @param {Event} event The mouseup event that triggered this method.
+ */
+uikit.Dragger.prototype.onMouseUp = function(event) {
+  this.target_.removeEventListener('mouseup', this.boundMouseUp_, false);
+  this.target_.removeEventListener('mousemove', this.boundMouseMove_, false);
+  this.boundMouseUp_ = null;
+  this.boundMouseMove_ = null;
+  this.isDragging_ = false;
+  var dragEndEvent = { type: uikit.Dragger.DragEvents.DRAG_END,
+                       clientX: event.offsetX,
+                       clientY: event.offsetY};
+  var i;
+  for (i = 0; i < this.listeners_.length; ++i) {
+    this.listeners_[i].handleEndDrag(this.target_, dragEndEvent);
+  }
+}
+
+/**
+ * Bind a scope to a function.  Used to bind an object to |this| for event
+ * handlers.
+ * @param {!Object} scope The scope in which the function executes.  |scope|
+ *     becomes |this| during function execution.
+ * @return {function} the bound version of the original function.
+ */
+Function.prototype.bind = function(scope) {
+  var boundContext = this;
+  return function() {
+    return boundContext.apply(scope, arguments);
+  }
+}