From 6812edb4a6b5e3ad0a672f965fa3d38af739edb5 Mon Sep 17 00:00:00 2001 From: Robert Sesek Date: Sat, 13 Nov 2010 15:21:40 -0500 Subject: [PATCH] Start changing the Actor from a flying pop-up to a zippy expander. --- web_frontend/actor.js | 80 ++----------------------------------------- web_frontend/file.js | 27 +++++++-------- 2 files changed, 15 insertions(+), 92 deletions(-) diff --git a/web_frontend/actor.js b/web_frontend/actor.js index 63e27b7..410e0ba 100644 --- 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 5f8aa9e..86d2dd6 100644 --- 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(); }; /** -- 2.22.5