From 27a87725895ea345e9ce329b2d12da64fe6863ed Mon Sep 17 00:00:00 2001 From: Robert Sesek Date: Sun, 3 Oct 2010 15:52:01 -0400 Subject: [PATCH] First pass at the PathControl. --- build.py | 1 + web_frontend/actor.js | 9 +- web_frontend/path_control.js | 126 +++++++++++++++++++ web_frontend/screen.css | 228 +++++++++++++++++++++++++++++++++++ 4 files changed, 363 insertions(+), 1 deletion(-) create mode 100644 web_frontend/path_control.js diff --git a/build.py b/build.py index b9b4847..651ffea 100755 --- a/build.py +++ b/build.py @@ -36,6 +36,7 @@ SOURCES = [ ] SOURCES_FE = [ 'version.js', + 'path_control.js', 'actor.js', 'file.js', 'main.js', diff --git a/web_frontend/actor.js b/web_frontend/actor.js index 62c4636..b5dda81 100644 --- a/web_frontend/actor.js +++ b/web_frontend/actor.js @@ -9,6 +9,7 @@ goog.provide('armadillo.Actor'); +goog.require('armadillo.PathControl'); goog.require('goog.array'); goog.require('goog.dom'); goog.require('goog.events'); @@ -169,6 +170,11 @@ armadillo.Actor.prototype.performMove_ = function() { dialog.setTitle('Move File'); var container = dialog.getContentElement(); + + var editor = new armadillo.PathControl(this.file_.getFullPath()); + editor.render(container); + +/* goog.dom.appendChild(container, goog.dom.createDom('p', null, 'Enter a new, absolute path for this file.')); @@ -181,8 +187,9 @@ armadillo.Actor.prototype.performMove_ = function() { goog.dom.createDom('p', 'smallfont', '(Please pardon this interface. Armadillo is a work-in-progress.)')); - dialog.setVisible(true); field.focus(); +*/ + dialog.setVisible(true); }; /** diff --git a/web_frontend/path_control.js b/web_frontend/path_control.js new file mode 100644 index 0000000..da36f6c --- /dev/null +++ b/web_frontend/path_control.js @@ -0,0 +1,126 @@ +// +// Armadillo File Manager +// Copyright (c) 2010, Robert Sesek +// +// This program is free software: you can redistribute it and/or modify it under +// the terms of the GNU General Public License as published by the Free Software +// Foundation, either version 3 of the License, or any later version. +// + +goog.provide('armadillo.PathControl'); + +goog.require('goog.ui.Component'); +goog.require('goog.ui.FilteredMenu'); +goog.require('goog.ui.MenuButton'); +goog.require('goog.ui.MenuItem'); + +/** + * Creates a new path editing control for a given path. + * @param {string} path The path to create an editor for + * @param {bool} editLastComponent Whether the last component should be shown as an edit box + * @param {DomHelper} opt_domHelper Optional DOM helper + * @constructor + */ +armadillo.PathControl = function(path, editLastComponent, opt_domHelper) { + goog.ui.Component.call(this, opt_domHelper); + + /** + * Full path of the control. + * @type {string} + */ + this.path_ = path; + + /** + * Whether or not the last component is editable. + * @type {bool} + */ + this.editableLastComponent_ = editLastComponent; + + /** + * List of path components + * @type {Array} + */ + this.components_ = new Array(); +}; +goog.inherits(armadillo.PathControl, goog.ui.Component); + +/** + * Disposer + * @protected + */ +armadillo.PathControl.prototype.disposeInternal = function() { + armadillo.PathControl.superClass_.disposeInternal.call(this); + this.components_ = null; +}; + +/** + * Creates a new path control object. + */ +armadillo.PathControl.prototype.createDom = function() { + this.decorateInternal(this.dom_.createElement('div')); +}; + +/** + * @inheritDoc + */ +armadillo.PathControl.prototype.canDecorate = function() { + return true; +}; + +/** + * Decorates the given element into a path control. + * @param {Element} element + */ +armadillo.PathControl.prototype.decorateInternal = function(element) { + this.element_ = element; + var components = this.path_.split('/'); + delete components[0]; // Don't create an empty item. + + var path = ''; + goog.array.forEach(components, function (part) { + this.addChild(this.createComponentNode_('/' + path, part), true); + path += '/' + part; + }, this); +}; + +/** + * Creates a node for a single path component. + * @param {string} path The path up to this point. + * @param {string} name The current component after |path|. + */ +armadillo.PathControl.prototype.createComponentNode_ = function(path, name) { + var menu = new goog.ui.FilteredMenu(); + menu.setFilterLabel(name); + menu.setAllowMultiple(false); + this.fetchMenuContents_(path, name, menu); + + var button = new goog.ui.MenuButton(name, menu, null, this.dom_); + button.setVisible(true); + return button; +}; + +/** + * Queries the back-end for all the items at a given path and attaches them to + * the given menu. + * @param {string} path The path to get a list of items in + * @param {string} name The name to select + * @param {goog.ui.Menu} The menu to attach items to + */ +armadillo.PathControl.prototype.fetchMenuContents_ = function(path, name, menu) { + var callback = function(e) { + var data = e.target.getResponseJson(); + if (data['error']) { + app.showError(data['message']); + return; + } + goog.array.forEach(data, function (caption) { + var item = new goog.ui.MenuItem(caption); + menu.addItem(item); + if (caption == name) { + menu.setHighlighted(item); + } + }); + }; + app.sendRequest('list', {'path':path}, callback); +}; + diff --git a/web_frontend/screen.css b/web_frontend/screen.css index 30f8868..2372095 100644 --- a/web_frontend/screen.css +++ b/web_frontend/screen.css @@ -165,3 +165,231 @@ h1 { font-weight: bold; } +/* + * Copyright 2007 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. + */ + +/* Author: pupius@google.com (Daniel Pupius) */ + +/* goog.ui.FilteredMenu */ + +.goog-menu-filter { + margin: 2px; + border: 1px solid silver; + background: white; + overflow: hidden; +} + +.goog-menu-filter div { + color: gray; + position: absolute; + padding: 1px; +} + +.goog-menu-filter input { + margin: 0; + border: 0; + background: transparent; + width: 100%; +} + +/* + * 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 buttons created by goog.ui.MenuButtonRenderer. + * + * @author attila@google.com (Attila Bodis) + */ + + +/* State: resting. */ +.goog-menu-button { + /* Client apps may override the URL at which they serve the image. */ + background: #ddd url(https://ssl.gstatic.com/editor/button-bg.png) repeat-x top left; + border: 0; + color: #000; + cursor: pointer; + list-style: none; + margin: 2px; + outline: none; + padding: 0; + text-decoration: none; + vertical-align: middle; +} + +/* Pseudo-rounded corners. */ +.goog-menu-button-outer-box, +.goog-menu-button-inner-box { + border-style: solid; + border-color: #aaa; + vertical-align: top; +} +.goog-menu-button-outer-box { + margin: 0; + border-width: 1px 0; + padding: 0; +} +.goog-menu-button-inner-box { + margin: 0 -1px; + border-width: 0 1px; + padding: 3px 4px; +} + +/* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */ +* html .goog-menu-button-inner-box { + /* IE6 needs to have the box shifted to make the borders line up. */ + left: -1px; +} + +/* Pre-IE7 BiDi fixes. */ +* html .goog-menu-button-rtl .goog-menu-button-outer-box { + /* @noflip */ left: -1px; + /* @noflip */ right: auto; +} +* html .goog-menu-button-rtl .goog-menu-button-inner-box { + /* @noflip */ right: auto; +} + +/* IE7-only hack; ignored by all other browsers. */ +*:first-child+html .goog-menu-button-inner-box { + /* IE7 needs to have the box shifted to make the borders line up. */ + left: -1px; +} +/* IE7 BiDi fix. */ +*:first-child+html .goog-menu-button-rtl .goog-menu-button-inner-box { + /* @noflip */ left: 1px; + /* @noflip */ right: auto; +} + +/* Safari-only hacks. */ +::root .goog-menu-button, +::root .goog-menu-button-outer-box, +::root .goog-menu-button-inner-box { + /* Required to make pseudo-rounded corners work on Safari. */ + line-height: 0; +} +::root .goog-menu-button-caption, +::root .goog-menu-button-dropdown { + /* Required to make pseudo-rounded corners work on Safari. */ + line-height: normal; +} + +/* State: disabled. */ +.goog-menu-button-disabled { + background-image: none !important; + opacity: 0.3; + -moz-opacity: 0.3; + filter: alpha(opacity=30); +} +.goog-menu-button-disabled .goog-menu-button-outer-box, +.goog-menu-button-disabled .goog-menu-button-inner-box, +.goog-menu-button-disabled .goog-menu-button-caption, +.goog-menu-button-disabled .goog-menu-button-dropdown { + color: #333 !important; + border-color: #999 !important; +} + +/* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */ +* html .goog-menu-button-disabled { + margin: 2px 1px !important; + padding: 0 1px !important; +} + +/* IE7-only hack; ignored by all other browsers. */ +*:first-child+html .goog-menu-button-disabled { + margin: 2px 1px !important; + padding: 0 1px !important; +} + +/* State: hover. */ +.goog-menu-button-hover .goog-menu-button-outer-box, +.goog-menu-button-hover .goog-menu-button-inner-box { + border-color: #9cf #69e #69e #7af !important; /* Hover border wins. */ +} + +/* State: active, open. */ +.goog-menu-button-active, +.goog-menu-button-open { + background-color: #bbb; + background-position: bottom left; +} + +/* State: focused. */ +.goog-menu-button-focused .goog-menu-button-outer-box, +.goog-menu-button-focused .goog-menu-button-inner-box { + border-color: orange; +} + +/* Caption style. */ +.goog-menu-button-caption { + padding: 0 4px 0 0; + vertical-align: top; +} + +/* Dropdown arrow style. */ +.goog-menu-button-dropdown { + height: 15px; + width: 7px; + /* Client apps may override the URL at which they serve the sprite. */ + background: url(https://ssl.gstatic.com/editor/editortoolbar.png) no-repeat -388px 0; + vertical-align: top; +} + +/* Pill (collapsed border) styles. */ +/* TODO(gboyer): Remove specific menu button styles and have any button support being a menu button. */ +.goog-menu-button-collapse-right, +.goog-menu-button-collapse-right .goog-menu-button-outer-box, +.goog-menu-button-collapse-right .goog-menu-button-inner-box { + margin-right: 0; +} + +.goog-menu-button-collapse-left, +.goog-menu-button-collapse-left .goog-menu-button-outer-box, +.goog-menu-button-collapse-left .goog-menu-button-inner-box { + margin-left: 0; +} + +.goog-menu-button-collapse-left .goog-menu-button-inner-box { + border-left: 1px solid #fff; +} + +.goog-menu-button-collapse-left.goog-menu-button-checked +.goog-menu-button-inner-box { + border-left: 1px solid #ddd; +} + +/* + * 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 menus created by goog.ui.MenuRenderer. + * + * @author attila@google.com (Attila Bodis) + */ + + +.goog-menu { + background: #fff; + border-color: #ccc #666 #666 #ccc; + border-style: solid; + border-width: 1px; + cursor: default; + font: normal 13px Arial, sans-serif; + margin: 0; + outline: none; + padding: 4px 0; + position: absolute; + z-index: 20000; /* Arbitrary, but some apps depend on it... */ +} -- 2.22.5