From a6a4aa7022b1ecd2fb016a1141923b92cb27eaba Mon Sep 17 00:00:00 2001 From: Robert Sesek Date: Mon, 26 Dec 2011 16:33:28 -0500 Subject: [PATCH] Convert a large portion of actor.js to jQuery --- web_frontend/actor.js | 124 ++++++++++-------------------------------- web_frontend/file.js | 9 ++- web_frontend/utils.js | 8 +++ 3 files changed, 42 insertions(+), 99 deletions(-) diff --git a/web_frontend/actor.js b/web_frontend/actor.js index 1e34632..801ab96 100644 --- a/web_frontend/actor.js +++ b/web_frontend/actor.js @@ -8,17 +8,9 @@ // goog.provide('armadillo.Actor'); -goog.provide('armadillo.Actor.TileControlRenderer_'); goog.require('armadillo.PathControl'); goog.require('armadillo.TVRenamer'); -goog.require('goog.array'); -goog.require('goog.dom'); -goog.require('goog.events'); -goog.require('goog.events.EventHandler'); -goog.require('goog.style'); -goog.require('goog.ui.Button'); -goog.require('goog.ui.Container'); /** * The Actor is a popup that displays the various actions that can be performed @@ -28,23 +20,12 @@ goog.require('goog.ui.Container'); * @constructor */ armadillo.Actor = function(file, opt_domHelper) { - goog.ui.Container.call(this, null, null, opt_domHelper); - - this.setFocusable(false); - this.setFocusableChildrenAllowed(true); - /** * The file object on which this acts. * @type {armadillo.File} */ this.file_ = file; - /** - * Registrar for all the Actor's events. - * @type {goog.events.EventHandler} - */ - this.eh_ = new goog.events.EventHandler(); - /** * The UI element used for a specific action. * @type {goog.Disposable} @@ -57,7 +38,6 @@ armadillo.Actor = function(file, opt_domHelper) { */ this.controlContainer_ = null; } -goog.inherits(armadillo.Actor, goog.ui.Container); /** * The different options that the Actor can perform. @@ -81,34 +61,9 @@ armadillo.Actor.optionStrings_ = { 'download' : 'Download' }; -/** - * Disposer - * @protected - */ -armadillo.Actor.prototype.disposeInternal = function() { - armadillo.Actor.superClass_.disposeInternal.call(this); - - this.eh_.dispose(); - - if (this.controlContainer_) - this.controlContainer_.dispose(); - this.controlContainer_ = null; - - // Remove the actor display element. - goog.dom.removeNode(this.element_); - this.element_ = null; - - if (this.actionObject_) { - this.actionObject_.dispose(); - this.actionObject_ = null; - } - - this.file_ = null; -}; - armadillo.Actor.prototype.createDom = function() { - this.setElementInternal(this.dom_.createDom('div')); - this.decorate(this.getElement()); + this.decorateInternal($.createDom('div')); + return this.element_; }; /** @@ -117,17 +72,16 @@ armadillo.Actor.prototype.createDom = function() { */ armadillo.Actor.prototype.decorateInternal = function(element) { this.element_ = element; - goog.dom.classes.add(this.element_, 'actor'); - this.dom_.removeChildren(this.element_); + this.element_.addClass('actor'); + this.element_.empty(); for (var option in armadillo.Actor.options_) { var tile = this.createTile_(option); if (tile) { - this.addChild(tile, true); + this.element_.append(tile); } } - this.controlContainer_ = new goog.ui.Control(); - this.controlContainer_.setSupportedState(goog.ui.Component.State.FOCUSED, false); - this.addChild(this.controlContainer_, true); + this.controlContainer_ = $.createDom('div'); + this.element_.append(this.controlContainer_); }; /** @@ -139,19 +93,19 @@ armadillo.Actor.prototype.createTile_ = function(option) { var value = armadillo.Actor.options_[option]; // Create the title element. - var title = this.dom_.createDom('span', 'title', - armadillo.Actor.optionStrings_[value]); + var title = $.createDom('span').addClass('title'); + title.text(armadillo.Actor.optionStrings_[value]); - var tile = new goog.ui.Control(title, new armadillo.Actor.TileControlRenderer_()); + var tile = $.createDom('div').addClass('tile'); tile.actorOption = value; + tile.append(title); // Cannot open non-directory files. if (value == armadillo.Actor.options_.OPEN && !this.file_.isDirectory()) { return null; } - this.eh_.listen(tile, goog.ui.Component.EventType.ACTION, - this.tileClickHandler_, false, this); + tile.click(this.tileClickHandler_.bind(this)); return tile; }; @@ -161,8 +115,8 @@ armadillo.Actor.prototype.createTile_ = function(option) { */ armadillo.Actor.prototype.tileClickHandler_ = function(e) { var option = e.target.actorOption; - this.controlContainer_.removeChildren(true); - this.controlContainer_.setVisible(true); + this.controlContainer_.empty(); + this.controlContainer_.show(); if (option == armadillo.Actor.options_.OPEN) { // TODO: assert that this.file_.isDirectory(). app.navigate(this.file_.getName()); @@ -183,13 +137,13 @@ armadillo.Actor.prototype.tileClickHandler_ = function(e) { */ armadillo.Actor.prototype.performMove_ = function() { var editor = new armadillo.PathControl(this.file_.getFullPath(), true); - this.controlContainer_.addChild(editor, true); + this.controlContainer_.append(editor); var okCallback = function(e) { var newPath = editor.getPath(); this.file_.move(newPath); }; - this.createOkCancel_(goog.bind(okCallback, this), null); + this.createOkCancel_(okCallback.bind(this), null); }; /** @@ -197,16 +151,14 @@ armadillo.Actor.prototype.performMove_ = function() { * @private */ armadillo.Actor.prototype.performDelete_ = function() { - var content = goog.dom.createDom('span', null, - 'Are you sure you want to delete:', - goog.dom.createElement('br'), - goog.dom.createDom('strong', null, this.file_.getName())); - this.controlContainer_.addChild(new goog.ui.Control(content), true); + var content = $('Are you sure you want to delete:
' + + this.file_.getName() + ''); + this.controlContainer_.append(content); var okCallback = function(e) { this.file_.remove(); }; - this.createOkCancel_(goog.bind(okCallback, this), null); + this.createOkCancel_(okCallback.bind(this), null); }; /** @@ -233,15 +185,15 @@ armadillo.Actor.prototype.performDownload_ = function() { * @param {function(Event)?} cancelCallback */ armadillo.Actor.prototype.createOkCancel_ = function(okCallback, cancelCallback) { - var ok = new goog.ui.Button('OK'); + var ok = $.createDom('button').text('OK'); if (okCallback) - this.eh_.listen(ok, goog.ui.Component.EventType.ACTION, okCallback); - var cancel = new goog.ui.Button('Cancel'); + ok.click(okCallback); + var cancel = $.createDom('button').text('Cancel'); if (!cancelCallback) - cancelCallback = goog.bind(this.defaultCancelCallback_, this); - this.eh_.listen(cancel, goog.ui.Component.EventType.ACTION, cancelCallback); - this.controlContainer_.addChild(ok, true); - this.controlContainer_.addChild(cancel, true); + cancelCallback = this.defaultCancelCallback_.bind(this); + cancel.click(cancelCallback); + this.controlContainer_.append(ok); + this.controlContainer_.append(cancel); }; /** @@ -250,25 +202,5 @@ armadillo.Actor.prototype.createOkCancel_ = function(okCallback, cancelCallback) * @private */ armadillo.Actor.prototype.defaultCancelCallback_ = function(e) { - this.controlContainer_.removeChildren(true); -}; - -/** - * Tile Control Renderer - * @constructor - */ -armadillo.Actor.TileControlRenderer_ = function() { - goog.ui.ControlRenderer.call(this); -}; -goog.inherits(armadillo.Actor.TileControlRenderer_, goog.ui.ControlRenderer); - -/** - * Returns the control's contents wrapped in a DIV, with the renderer's own - * CSS class and additional state-specific classes applied to it. - * @param {goog.ui.Control} control Control to render. - * @return {Element} Root element for the control. - */ -armadillo.Actor.TileControlRenderer_.prototype.createDom = function(control) { - // Create and return DIV wrapping contents. - return control.getDomHelper().createDom('div', 'tile', control.getContent()); + this.controlContainer_.empty(); }; diff --git a/web_frontend/file.js b/web_frontend/file.js index 4b8fd84..94b0f4a 100644 --- a/web_frontend/file.js +++ b/web_frontend/file.js @@ -182,9 +182,12 @@ armadillo.File.prototype.clickHandler_ = function(e) { */ armadillo.File.prototype.actorHandler_ = function(e) { e.stopPropagation(); - if (!this.actor_.isInDocument()) - this.actor_.render(this.element_); - $(this.actor_.getElement()).slideToggle('fast'); + if (!this.actor_.element) { + var elm = this.actor_.createDom(); + elm.hide(); + $(this.element_).append(elm); + } + this.actor_.element_.slideToggle('fast'); }; /** diff --git a/web_frontend/utils.js b/web_frontend/utils.js index 07372da..aacd070 100644 --- a/web_frontend/utils.js +++ b/web_frontend/utils.js @@ -18,3 +18,11 @@ jQuery.namespace = function(ns) { parent = parent[space]; }); } + +/** + * Shortcut for creating a DOM element. + * @param {string} elm + */ +jQuery.createDom = function(elm) { + return this(document.createElement(elm)); +} -- 2.22.5