Create confirmation dialog for file deletion.

diff --git a/web_frontend/actor.js b/web_frontend/actor.js
index 4e19729ce9dcc4baeab3b2a1eec519c1e952a3b7..029f2acd7410a2a8e3193b342516e1a48400f665 100644 (file)
--- a/web_frontend/actor.js
+++ b/web_frontend/actor.js
@@ -14,6 +14,7 @@ goog.require('goog.dom');
 goog.require('goog.events');
 goog.require('goog.positioning.ClientPosition');
 goog.require('goog.positioning.Corner');
+goog.require('goog.ui.Dialog');
 goog.require('goog.ui.Popup');
 
 /**
@@ -144,7 +145,31 @@ armadillo.Actor.prototype.createElement_ = function() {
  */
 armadillo.Actor.prototype.tileClickHandler_ = function(e) {
   if (e.target.actorOption == armadillo.Actor.options_.DELETE) {
-    console.log("DELETE DELETE DELETE " + this.file_.getName());
+    var confirm = new goog.ui.Dialog();
+    confirm.setDisposeOnHide(true);
+    confirm.setEscapeToCancel(true);
+    confirm.setModal(true);
+    confirm.setDraggable(false);
+    confirm.setHasTitleCloseButton(false);
+    confirm.setTitle('Confirm Delete');
+
+    var container = confirm.getContentElement();
+    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()));
+    goog.dom.appendChild(container, content);
+
+    var closeCallback = function(e) {
+      if (e.key != goog.ui.Dialog.DefaultButtonKeys.CANCEL) {
+        this.file_.delete();
+      }
+    };
+    // Will be removed when the event source closes.
+    goog.events.listen(confirm, goog.ui.Dialog.SELECT_EVENT,
+        closeCallback, false, this);
+
+    confirm.setVisible(true);
   }
   console.log('You clicked ' + e.target.actorOption);
 };

diff --git a/web_frontend/file.js b/web_frontend/file.js
index 2e9de77ecb083721aa57238cb3ee18f139e9f2cd..2e5ed7154c9a26cfe54fdf7a642f05845181b6bd 100644 (file)
--- a/web_frontend/file.js
+++ b/web_frontend/file.js
@@ -16,11 +16,14 @@ goog.require('goog.dom');
 /**
  * A file in a directory listing.
  * @param  {string}  File name.
+ * @param  {string}  The path the file resides at.
  * @constructor
  */
-armadillo.File = function(name) {
+armadillo.File = function(name, path) {
   goog.Disposable.call(this);
   this.name_ = name;
+  this.path_ = path;
+  console.log('creating file ' + path + name);
   this.isDirectory_ = app.isDirectory(name);
 };
 goog.inherits(armadillo.File, goog.Disposable);
@@ -83,6 +86,24 @@ armadillo.File.prototype.draw = function() {
   return this.element_;
 };
 
+/**
+ * Deletes the given file in the backend by sending a request.  On return, it
+ * will re-query the directory.
+ */
+armadillo.File.prototype.delete = function() {
+  var file = this;
+  var callback = function(data) {
+    if (data['error']) {
+      app.showError(data['message']);
+      return;
+    } else {
+      app.clearError();
+    }
+    app.list(file.path_);
+  };
+  app.sendRequest('delete', {'path':this.path_ + this.name_}, callback);
+};
+
 /**
  * Click handler for the list element.
  * @param  {Event}  e

diff --git a/web_frontend/main.js b/web_frontend/main.js
index cfee7ec4e29a52e03f1f3e332f0a9015aacba271..f69e2af32a447a2b5d682095e117efb723ba9214 100644 (file)
--- a/web_frontend/main.js
+++ b/web_frontend/main.js
@@ -36,7 +36,7 @@ armadillo.App = function() {
  * @param  {Object}  extra_data  Extra data to add.
  * @param  {Function}  callback  XHR callback.
  */
-armadillo.App.prototype.sendRequest_ = function(action, extra_data, callback) {
+armadillo.App.prototype.sendRequest = function(action, extra_data, callback) {
   var data = new goog.Uri.QueryData();
   data.set('action', action);
   data.extend(extra_data);
@@ -51,10 +51,10 @@ armadillo.App.prototype.list = function(path) {
   var callback = function(e) {
     var data = e.target.getResponseJson();
     if (data['error']) {
-      app.showError_(data['message']);
+      app.showError(data['message']);
       return;  // Error.
     } else {
-      app.clearError_();
+      app.clearError();
     }
 
     // Update the listing.
@@ -70,11 +70,11 @@ armadillo.App.prototype.list = function(path) {
 
     // Add items for each entry.
     goog.array.forEach(data, function(file) {
-      var fileObject = new armadillo.File(file);
+      var fileObject = new armadillo.File(file, path);
       goog.dom.appendChild(list, fileObject.draw());
     });
   }
-  this.sendRequest_('list', {'path':path}, callback);
+  this.sendRequest('list', {'path':path}, callback);
 };
 
 /**
@@ -107,6 +107,14 @@ armadillo.App.prototype.isDirectory = function(path) {
   return path[path.length - 1] == '/';
 };
 
+/**
+ * Gets the current path of the directory being displayed, absolute to root.
+ * @returns string
+ */
+armadillo.App.prototype.getCurrentPath = function() {
+  return this.currentPath_;
+};
+
 /**
  * Strips the last path component from a path.
  * @param  {string}  path
@@ -126,7 +134,7 @@ armadillo.App.prototype.stripLastPathComponent_ = function(path) {
 /**
  * Clears the error message.
  */
-armadillo.App.prototype.clearError_ = function() {
+armadillo.App.prototype.clearError = function() {
   this.errorEffect_.hide();
   goog.dom.setTextContent(this.errorEffect_.element, '');
 };
@@ -135,7 +143,7 @@ armadillo.App.prototype.clearError_ = function() {
  * Shows an error message.
  * @param  {string}  message
  */
-armadillo.App.prototype.showError_ = function(message) {
+armadillo.App.prototype.showError = function(message) {
   goog.dom.setTextContent(this.errorEffect_.element, message);
   this.errorEffect_.show();
 };

diff --git a/web_frontend/screen.css b/web_frontend/screen.css
index e0318f3988a9661742c1c00b5729b01a0df2a503..4c0826e230dcc7902d25528409abf9c0ec8a2dc1 100644 (file)
--- a/web_frontend/screen.css
+++ b/web_frontend/screen.css
@@ -84,3 +84,74 @@ h1 {
 .actor .tile .title {
   font-size: 0.7em;
 }
+
+/**
+ * Delete Confirmation Dialog
+ * From Google Closure Library
+ *
+ * Copyright 2009 The Closure Library Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by an Apache 2.0 License.
+ * See the COPYING file for details.
+
+ * Standard styling for goog.ui.Dialog.
+ *
+ * @author ssaviano@google.com (Steven Saviano)
+ * @author attila@google.com (Attila Bodis)
+ */
+
+.modal-dialog {
+  background: #c1d9ff;
+  border: 1px solid #3a5774;
+  color: #000;
+  padding: 4px;
+  position: absolute;
+}
+
+.modal-dialog a,
+.modal-dialog a:link,
+.modal-dialog a:visited  {
+  color: #06c;
+  cursor: pointer;
+}
+
+.modal-dialog-bg {
+  background: #666;
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.modal-dialog-title {
+  background: #e0edfe;
+  color: #000;
+  cursor: pointer;
+  font-size: 120%;
+  font-weight: bold;
+  padding: 8px 15px 8px 8px;
+  position: relative;
+  _zoom: 1; /* Ensures proper width in IE6 RTL. */
+}
+
+.modal-dialog-title-close {
+  /* Client apps may override the URL at which they serve the sprite. */
+  background: #e0edfe url(https://ssl.gstatic.com/editor/editortoolbar.png) no-repeat -528px 0;
+  cursor: default;
+  height: 15px;
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  width: 15px;
+  vertical-align: middle;
+}
+
+.modal-dialog-buttons,
+.modal-dialog-content {
+  background-color: #fff;
+  padding: 8px;
+}
+
+.goog-buttonset-default {
+  font-weight: bold;
+}
+