From 803f1b831f4ba37872f06acd2456354c90d5b092 Mon Sep 17 00:00:00 2001 From: Robert Sesek Date: Mon, 6 Sep 2010 20:48:01 -0400 Subject: [PATCH] Create confirmation dialog for file deletion. --- web_frontend/actor.js | 27 +++++++++++++++- web_frontend/file.js | 23 ++++++++++++- web_frontend/main.js | 22 +++++++++---- web_frontend/screen.css | 71 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 134 insertions(+), 9 deletions(-) diff --git a/web_frontend/actor.js b/web_frontend/actor.js index 4e19729..029f2ac 100644 --- 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 2e9de77..2e5ed71 100644 --- 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 cfee7ec..f69e2af 100644 --- 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 e0318f3..4c0826e 100644 --- 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; +} + -- 2.22.5