web_frontend/path_control.js

   1 //
   2 // Armadillo File Manager
   3 // Copyright (c) 2010-2011, Robert Sesek <http://www.bluestatic.org>
   4 //
   5 // This program is free software: you can redistribute it and/or modify it under
   6 // the terms of the GNU General Public License as published by the Free Software
   7 // Foundation, either version 3 of the License, or any later version.
   8 //
   9
  10 $.namespace('armadillo.PathControl');
  11
  12 /**
  13  * Creates a new path editing control for a given path.
  14  * @param  {string}  path  The path to create an editor for
  15  * @param  {bool} editLastComponent  Whether the last component should be shown as an edit box
  16  * @param  {DomHelper}  opt_domHelper  Optional DOM helper
  17  * @constructor
  18  */
  19 armadillo.PathControl = function(path, editLastComponent, opt_domHelper) {
  20   /**
  21    * Full path of the control.
  22    * @type  {string}
  23    */
  24   this.path_ = null;
  25
  26   /**
  27    * The name of the file at the |path_|.
  28    * @type  {string}
  29    */
  30   this.name_ = null;
  31   this.setPath(path);
  32
  33   /**
  34    * Whether or not the last component is editable.
  35    * @type  {bool}
  36    */
  37   this.editableLastComponent_ = editLastComponent;
  38
  39   /**
  40    * Control UI for the name component of the path.
  41    * @type  {Element}
  42    */
  43   this.nameControl_ = null;
  44 };
  45
  46 /**
  47  * Sets the path.
  48  * @param  {string}  path
  49  */
  50 armadillo.PathControl.prototype.setPath = function(path) {
  51   this.path_ = app.stripLastPathComponent(path);
  52   this.name_ = path.substr(this.path_.length);
  53 };
  54
  55 /**
  56  * Gets the new path.
  57  * @returns  {string}
  58  */
  59 armadillo.PathControl.prototype.getPath = function() {
  60   return app.joinPath(this.path_, this.name_);
  61 };
  62
  63 /**
  64  * Gets the name control.
  65  * @returns  {Element}
  66  */
  67 armadillo.PathControl.prototype.getNameControl = function() {
  68   return this.nameControl_;
  69 };
  70
  71 /**
  72  * Creates a new path control object.
  73  * @returns  {Element}
  74  */
  75 armadillo.PathControl.prototype.createDom = function() {
  76   this.element_ = $.createDom('div');
  77   this.createDom_(this.element_);
  78   return this.element_;
  79 };
  80
  81 /**
  82  * Decorates the given element into a path control.
  83  * @param  {Element}  element
  84  */
  85 armadillo.PathControl.prototype.createDom_ = function(element) {
  86   var components = this.path_.split('/');
  87
  88   // If this is an item that lives at the root, generate a special node for
  89   // moving between items at the top level.
  90   components[0] = '/';
  91
  92   // If the last component is emtpy, do not use it because it means a directory
  93   // is being moved.
  94   if (components[components.length - 1] == '') {
  95     components.splice(-1);
  96   }
  97
  98   var path = '';
  99   $.each(components, function (i, part) {
 100     element.append(this.createComponentNode_(path, part));
 101     path = app.joinPath(path, part);
 102   }.bind(this));
 103
 104   if (this.editableLastComponent_) {
 105     this.nameControl_ = $.createDom('input');
 106     this.nameControl_.attr({
 107       'type' : 'text',
 108       'name' : 'pathName',
 109       'value' : this.name_
 110     });
 111
 112     this.nameControl_.bind('change keydown', this.nameChanged_.bind(this));
 113   } else {
 114     this.nameControl_ = $.createDom('span').text(this.name_);
 115   }
 116
 117   element.append(this.nameControl_);
 118 };
 119
 120 /**
 121  * @inheritDoc
 122  */
 123 armadillo.PathControl.prototype.enterDocument = function() {
 124   armadillo.PathControl.superClass_.enterDocument.call(this);
 125   this.nameControl_.getElement().focus();
 126 };
 127
 128 /**
 129  * Creates a node for a single path component.
 130  * @param  {string}  path  The path up to this point.
 131  * @param  {string}  name  The current component after |path|.
 132  */
 133 armadillo.PathControl.prototype.createComponentNode_ = function(path, name) {
 134   var menu = $.createDom('select');
 135   this.fetchMenuContents_(path, name, menu);
 136
 137   var option = $.createDom('option');
 138   option.text('Loading...').attr('selected', 'selected');
 139
 140   menu.append(option);
 141   menu.change(this.componentChanged_.bind(this));
 142
 143   return menu;
 144 };
 145
 146 /**
 147  * Queries the back-end for all the items at a given path and attaches them to
 148  * the given menu.
 149  * @param  {string}  path  The path to get a list of items in
 150  * @param  {string}  name  The name to select
 151  * @param  {Element}  The menu to attach items to
 152  */
 153 armadillo.PathControl.prototype.fetchMenuContents_ = function(path, name, menu) {
 154   var fullPath = this.path_;
 155   var callback = function(data, status, xhr) {
 156     if (data['error']) {
 157       app.showError(data['message']);
 158       return;
 159     }
 160
 161     // Create an empty node for the current directory.
 162     data.unshift('/');
 163
 164     menu.empty();
 165     $.each(data, function (i, caption) {
 166       // It only makes sense to be able to move into directories.
 167       if (!app.isDirectory(caption)) {
 168         return;
 169       }
 170       var item = $.createDom('option');
 171       var componentPath = app.joinPath(path, name, caption);
 172       item.val(componentPath).text(caption);
 173       menu.append(item);
 174       if (fullPath.substr(0, componentPath.length) == componentPath) {
 175         item.attr('selected', 'selected');
 176       }
 177     });
 178   };
 179   app.sendRequest('list', {'path' : app.joinPath(path, name)}, callback);
 180 };
 181
 182 /**
 183  * Handler for changing a component of the control.
 184  * @param  {Event}  e
 185  */
 186 armadillo.PathControl.prototype.componentChanged_ = function(e) {
 187   this.path_ = $(e.target).val();
 188   this.element_.empty();
 189   this.createDom_(this.element_);
 190 };
 191
 192 /**
 193  * Handler for changing the editable name component.
 194  * @param  {Event} e
 195  */
 196 armadillo.PathControl.prototype.nameChanged_ = function(e) {
 197   console.log(e);
 198   // TODO: assert(this.editableLastComponent_)
 199   this.name_ = e.target.value;
 200   e.stopPropagation();
 201   return true;
 202 };