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  {goog.ui.Control}
  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  {goog.ui.Control}
  66  */
  67 armadillo.PathControl.prototype.getNameControl = function() {
  68   return this.nameControl_;
  69 };
  70
  71 /**
  72  * Creates a new path control object.
  73  */
  74 armadillo.PathControl.prototype.createDom = function() {
  75   this.decorateInternal($.createDom('div'));
  76   return this.element_;
  77 };
  78
  79 /**
  80  * Decorates the given element into a path control.
  81  * @param  {Element}  element
  82  */
  83 armadillo.PathControl.prototype.decorateInternal = function(element) {
  84   this.element_ = element;
  85   var components = this.path_.split('/');
  86
  87   // If this is an item that lives at the root, generate a special node for
  88   // moving between items at the top level.
  89   components[0] = '/';
  90
  91   // If the last component is emtpy, do not use it because it means a directory
  92   // is being moved.
  93   if (components[components.length - 1] == '') {
  94     components.splice(-1);
  95   }
  96
  97   var path = '';
  98   $.each(components, function (i, part) {
  99     this.element_.append(this.createComponentNode_(path, part));
 100     path = app.joinPath(path, part);
 101   }.bind(this));
 102
 103   if (this.editableLastComponent_) {
 104     this.nameControl_ = $.createDom('input');
 105     this.nameControl_.attr({
 106       'type' : 'text',
 107       'name' : 'pathName',
 108       'value' : this.name_
 109     });
 110
 111     this.nameControl_.bind('change keydown', this.nameChanged_.bind(this));
 112   } else {
 113     this.nameControl_ = $.createDom('span').text(this.name_);
 114   }
 115
 116   this.element_.append(this.nameControl_);
 117 };
 118
 119 /**
 120  * @inheritDoc
 121  */
 122 armadillo.PathControl.prototype.enterDocument = function() {
 123   armadillo.PathControl.superClass_.enterDocument.call(this);
 124   this.nameControl_.getElement().focus();
 125 };
 126
 127 /**
 128  * Creates a node for a single path component.
 129  * @param  {string}  path  The path up to this point.
 130  * @param  {string}  name  The current component after |path|.
 131  */
 132 armadillo.PathControl.prototype.createComponentNode_ = function(path, name) {
 133   var menu = $.createDom('select');
 134   this.fetchMenuContents_(path, name, menu);
 135
 136   var option = $.createDom('option');
 137   option.text('Loading...').attr('selected', 'selected');
 138
 139   menu.append(option);
 140   menu.change(this.componentChanged_.bind(this));
 141
 142   return menu;
 143 };
 144
 145 /**
 146  * Queries the back-end for all the items at a given path and attaches them to
 147  * the given menu.
 148  * @param  {string}  path  The path to get a list of items in
 149  * @param  {string}  name  The name to select
 150  * @param  {goog.ui.Menu}  The menu to attach items to
 151  */
 152 armadillo.PathControl.prototype.fetchMenuContents_ = function(path, name, menu) {
 153   var fullPath = this.path_;
 154   var callback = function(data, status, xhr) {
 155     if (data['error']) {
 156       app.showError(data['message']);
 157       return;
 158     }
 159
 160     // Create an empty node for the current directory.
 161     data.splice(0, 1, '/');
 162
 163     menu.empty();
 164     $.each(data, function (i, caption) {
 165       // It only makes sense to be able to move into directories.
 166       if (!app.isDirectory(caption)) {
 167         return;
 168       }
 169       var item = $.createDom('option');
 170       var componentPath = app.joinPath(path, name, caption);
 171       item.val(componentPath).text(caption);
 172       menu.append(item);
 173       if (fullPath.substr(0, componentPath.length) == componentPath) {
 174         item.attr('selected', 'selected');
 175       }
 176     });
 177   };
 178   app.sendRequest('list', {'path' : app.joinPath(path, name)}, callback);
 179 };
 180
 181 /**
 182  * Handler for changing a component of the control.
 183  * @param  {Event}  e
 184  */
 185 armadillo.PathControl.prototype.componentChanged_ = function(e) {
 186   this.path_ = $(e.target).val();
 187   this.element_.empty();
 188   this.decorateInternal(this.element_);
 189 };
 190
 191 /**
 192  * Handler for changing the editable name component.
 193  * @param  {Event} e
 194  */
 195 armadillo.PathControl.prototype.nameChanged_ = function(e) {
 196   console.log(e);
 197   // TODO: assert(this.editableLastComponent_)
 198   this.name_ = e.target.value;
 199   e.stopPropagation();
 200   return true;
 201 };