Start changing the Actor from a flying pop-up to a zippy expander.

diff --git a/web_frontend/actor.js b/web_frontend/actor.js
index 63e27b7ade2362372efcbf9aacaff581a1fe49e6..410e0bafde30794bcdaccc388a93efda3ba3a480 100644 (file)
--- a/web_frontend/actor.js
+++ b/web_frontend/actor.js
@@ -15,12 +15,9 @@ goog.require('goog.array');
 goog.require('goog.dom');
 goog.require('goog.events');
 goog.require('goog.events.EventHandler');
-goog.require('goog.positioning.ClientPosition');
-goog.require('goog.positioning.Corner');
 goog.require('goog.style');
 goog.require('goog.ui.Container');
 goog.require('goog.ui.Dialog');
-goog.require('goog.ui.Popup');
 
 /**
  * The Actor is a popup that displays the various actions that can be performed
@@ -44,29 +41,14 @@ armadillo.Actor = function(file, opt_domHelper) {
    */
   this.eh_ = new goog.events.EventHandler();
 
-  /**
-   * The Container that holds the display element.
-   * @type  {goog.ui.Popup}
-   */
-  this.popup_ = new goog.ui.Popup(this.element_);
-  this.eh_.listenOnce(this.popup_, goog.ui.PopupBase.EventType.HIDE,
-      this.onPopupClosed_, false, this);
-
   /**
    * The UI element used for a specific action.
    * @type  {goog.Disposable}
    */
   this.actionObject_ = null;
-
-  armadillo.Actor.actors_.push(this);
 }
 goog.inherits(armadillo.Actor, goog.ui.Container);
 
-/**
- * An array of all the Actors that have been created.
- */
-armadillo.Actor.actors_ = new Array();
-
 /**
  * The different options that the Actor can perform.
  */
@@ -87,18 +69,6 @@ armadillo.Actor.optionStrings_ = {
   'delete' : 'Delete'  
 };
 
-/**
- * A global property that should be checked to see if an actor is present,
- * creating a modal session.
- */
-armadillo.Actor.isModal = function() {
-  var isVisible = false;
-  goog.array.forEach(armadillo.Actor.actors_, function (e) {
-    isVisible |= e.popup_.isVisible();
-  });
-  return isVisible;
-};
-
 /**
  * Disposer
  * @protected
@@ -112,67 +82,21 @@ armadillo.Actor.prototype.disposeInternal = function() {
   goog.dom.removeNode(this.element_);
   this.element_ = null;
 
-  // Kill the popup.
-  this.popup_.dispose();
-  this.popup_ = null;
-
   if (this.actionObject_) {
     this.actionObject_.dispose();
     this.actionObject_ = null;
   }
 
-  // Remove the actor from the list.
-  goog.array.remove(armadillo.Actor.actors_, this);
-
   this.file_ = null;
 };
 
-/**
- * Shows the popup.
- * @param  {int}  x  The X position to show at
- * @param  {int}  y  The Y position to show at
- */
-armadillo.Actor.prototype.show = function(x, y) {
-  if (armadillo.Actor.isModal())
-    return;
-  this.popup_.setPinnedCorner(goog.positioning.Corner.TOP_LEFT);
-  this.popup_.setPosition(new goog.positioning.ClientPosition(x, y));
-  this.popup_.setHideOnEscape(true);
-  this.render();
-  this.popup_.setVisible(true);
-  this.file_.setHighlight(armadillo.File.Highlight.ACTIVE);
-};
-
-/**
- * Hides the popup.
- */
-armadillo.Actor.prototype.hide = function() {
-  this.file_.setHighlight(armadillo.File.Highlight.SELECTED);
-  this.popup_.setVisible(false);
-};
-
-
-/**
- * Creates a new path control object.
- */
-armadillo.Actor.prototype.createDom = function() {
-  this.decorateInternal(this.dom_.createDom('div', 'actor'));
-  this.popup_.setElement(this.element_);
-};
-
-/**
- * @inheritDoc
- */
-armadillo.Actor.prototype.canDecorate = function() {
-  return false;
-};
-
 /**
  * Decorates the given element into a path control.
  * @param  {Element}  element
  */
 armadillo.Actor.prototype.decorateInternal = function(element) {
   this.element_ = element;
+  goog.dom.classes.add(this.element_, 'actor');
   this.dom_.removeChildren(this.element_);
   for (var option in armadillo.Actor.options_) {
     var tile = this.createTile_(option);
@@ -323,7 +247,7 @@ goog.inherits(armadillo.Actor.TileControlRenderer_, goog.ui.ControlRenderer);
  * @param {goog.ui.Control} control Control to render.
  * @return {Element} Root element for the control.
  */
-goog.ui.ControlRenderer.prototype.createDom = function(control) {
+armadillo.Actor.TileControlRenderer_.prototype.createDom = function(control) {
   // Create and return DIV wrapping contents.
   return control.getDomHelper().createDom('div', 'tile', control.getContent());
 };

diff --git a/web_frontend/file.js b/web_frontend/file.js
index 5f8aa9e3c1d44eff90a2ac81561176b3797f81f1..86d2dd63dfd6cd0b57a7eb59c678cca1eca79b26 100644 (file)
--- a/web_frontend/file.js
+++ b/web_frontend/file.js
@@ -12,6 +12,7 @@ goog.provide('armadillo.File');
 goog.require('armadillo.Actor');
 goog.require('goog.Disposable');
 goog.require('goog.dom');
+goog.require('goog.ui.AnimatedZippy');
 
 /**
  * A file in a directory listing.
@@ -25,6 +26,8 @@ armadillo.File = function(name, path) {
   this.path_ = path;
   this.highlight_ = '';
   this.isDirectory_ = app.isDirectory(name);
+  this.actor_ = new armadillo.Actor(this);
+  this.zippy_ = null;
 };
 goog.inherits(armadillo.File, goog.Disposable);
 
@@ -44,6 +47,9 @@ armadillo.File.prototype.disposeInternal = function() {
   this.link_ = null;
   goog.events.unlistenByKey(this.linkListener_);
   goog.events.unlistenByKey(this.actorListener_);
+  this.actor_.dispose();
+  if (this.zippy_)
+    this.zippy_.dispose();
 };
 
 /**
@@ -160,9 +166,6 @@ armadillo.File.prototype.move = function(dest) {
  * @param  {Event}  e
  */
 armadillo.File.prototype.clickHandler_ = function(e) {
-  if (armadillo.Actor.isModal()) {
-    return;
-  }
   if (this.isDirectory_) {
     app.navigate(this.name_);
   }
@@ -174,19 +177,15 @@ armadillo.File.prototype.clickHandler_ = function(e) {
  * @param  {Event}  e
  */
 armadillo.File.prototype.actorHandler_ = function(e) {
-  if (armadillo.Actor.isModal())
-    return;
   e.stopPropagation();
-  var actor = new armadillo.Actor(this);
-  // Adjust the mouse position so that if "Open" is the first tile, it is easy
-  // to navigate.
-  var x = e.clientX;
-  var y = e.clientY;
-  if (this.isDirectory()) {
-    x -= 20;
-    y -= 20;
+  if (!this.actor_.isInDocument()) {
+    this.actor_.render(this.element_);
+    this.actor_.setVisible(true);
   }
-  actor.show(x, y);
+  if (!this.zippy_)
+    this.zippy_ = new goog.ui.AnimatedZippy(this.element_,
+        this.actor_.getElement(), false);
+  this.zippy_.toggle();
 };
 
 /**