From 64ddd47788f7e467267c7d8cf8e9f3dffadbc8bf Mon Sep 17 00:00:00 2001 From: mpl Date: Fri, 24 May 2013 20:00:22 +0200 Subject: [PATCH] newui: filetree Change-Id: Ibf8972a57c7253e55bcfcc679d141e933db3fe7b --- pkg/server/ui.go | 5 + server/camlistored/newui/filetree.css | 32 ++ server/camlistored/newui/filetree.html | 28 ++ server/camlistored/newui/filetree.js | 281 ++++++++++++++++++ server/camlistored/newui/server_connection.js | 21 ++ 5 files changed, 367 insertions(+) create mode 100644 server/camlistored/newui/filetree.css create mode 100644 server/camlistored/newui/filetree.html create mode 100644 server/camlistored/newui/filetree.js diff --git a/pkg/server/ui.go b/pkg/server/ui.go index 09e245bc0..3687730c3 100644 --- a/pkg/server/ui.go +++ b/pkg/server/ui.go @@ -428,6 +428,11 @@ func (ui *UIHandler) serveNewUI(rw http.ResponseWriter, req *http.Request) { serveStaticFile(rw, req, newuiFiles, file) return } + if wantsFileTreePage(req) { + file := "/filetree.html" + serveStaticFile(rw, req, newuiFiles, file) + return + } if suffix == "new" { // Add a trailing slash. diff --git a/server/camlistored/newui/filetree.css b/server/camlistored/newui/filetree.css new file mode 100644 index 000000000..5c4b05b14 --- /dev/null +++ b/server/camlistored/newui/filetree.css @@ -0,0 +1,32 @@ +/* +Copyright 2011 The Camlistore Authors. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.cam-filetree-page { + font: 16px/1.4 normal Arial, sans-serif; +} +.cam-filetree-nav:before { + content: "["; +} +.cam-filetree-nav:after { + content: "]"; +} +.cam-filetree-newp { + text-decoration: underline; + cursor: pointer; + color: darkgreen; + margin-left: .4em; + font-size: 80%; +} diff --git a/server/camlistored/newui/filetree.html b/server/camlistored/newui/filetree.html new file mode 100644 index 000000000..a1deaccab --- /dev/null +++ b/server/camlistored/newui/filetree.html @@ -0,0 +1,28 @@ + + + + Filetree + + + + + + + + + + + + +
Home
+

FileTree for

+ +
+ + + diff --git a/server/camlistored/newui/filetree.js b/server/camlistored/newui/filetree.js new file mode 100644 index 000000000..faae960be --- /dev/null +++ b/server/camlistored/newui/filetree.js @@ -0,0 +1,281 @@ +/* +Copyright 2011 The Camlistore Authors. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +/** + * @fileoverview Filetree page. + * + */ +goog.provide('camlistore.FiletreePage'); + +goog.require('goog.dom'); +goog.require('goog.events.EventType'); +goog.require('goog.ui.Component'); +goog.require('camlistore.ServerConnection'); + +/** + * @param {camlistore.ServerType.DiscoveryDocument} config Global config + * of the current server this page is being rendered for. + * @param {goog.dom.DomHelper=} opt_domHelper DOM helper to use. + * + * @extends {goog.ui.Component} + * @constructor + */ +camlistore.FiletreePage = function(config, opt_domHelper) { + goog.base(this, opt_domHelper); + + /** + * @type {Object} + * @private + */ + this.config_ = config; + + /** + * @type {camlistore.ServerConnection} + * @private + */ + this.connection_ = new camlistore.ServerConnection(config); + +}; +goog.inherits(camlistore.FiletreePage, goog.ui.Component); + + +/** + * @type {number} + * @private + */ +camlistore.FiletreePage.prototype.indentStep_ = 20; + + +function getPermanodeParam() { + var blobRef = getQueryParam('d'); + return (blobRef && isPlausibleBlobRef(blobRef)) ? blobRef : null; +} + +// Returns the first value from the query string corresponding to |key|. +// Returns null if the key isn't present. +getQueryParam = function(key) { + var params = document.location.search.substring(1).split('&'); + for (var i = 0; i < params.length; ++i) { + var parts = params[i].split('='); + if (parts.length == 2 && decodeURIComponent(parts[0]) == key) + return decodeURIComponent(parts[1]); + } + return null; +}; + +// Returns true if the passed-in string might be a blobref. +isPlausibleBlobRef = function(blobRef) { + return /^\w+-[a-f0-9]+$/.test(blobRef); +}; + + +/** + * Called when component's element is known to be in the document. + */ +camlistore.FiletreePage.prototype.enterDocument = function() { + camlistore.FiletreePage.superClass_.enterDocument.call(this); + var blobref = getPermanodeParam(); + + if (blobref) { + this.connection_.describeWithThumbnails( + blobref, + 0, + goog.bind(this.handleDescribeBlob_, this, blobref), + function(msg) { + alert("failed to get blob description: " + msg); + } + ); + } +} + +/** + * @param {string} permanode Node to describe. + * @param {camlistore.ServerType.DescribeResponse} describeResult Object of properties for the node. + * @private + */ +camlistore.FiletreePage.prototype.handleDescribeBlob_ = +function(permanode, describeResult) { + var meta = describeResult.meta; + if (!meta[permanode]) { + alert("didn't get blob " + permanode); + return; + } + var binfo = meta[permanode]; + if (!binfo) { + alert("Error describing blob " + permanode); + return; + } + if (binfo.camliType != "directory") { + alert("Does not contain a directory"); + return; + } + this.connection_.getBlobContents( + permanode, + goog.bind(function(data) { + var finfo = JSON.parse(data); + var fileName = finfo.fileName; + var curDir = document.getElementById('curDir'); + curDir.innerHTML = "" + fileName + ""; + this.buildTree_(); + }, this), + function(msg) { + alert("failed to get blobcontents: " + msg); + } + ); +} + +/** + * @private + */ +camlistore.FiletreePage.prototype.buildTree_ = function() { + var blobref = getPermanodeParam(); + var children = goog.dom.getElement("children"); + this.connection_.getFileTree(blobref, + goog.bind(function(jres) { + this.onChildrenFound_(children, 0, jres); + }, this) + ); +} + +/** + * @param {string} div node used as root for the tree + * @param {number} depth how deep we are in the tree, for indenting + * @param {camlistore.ServerType.DescribeResponse} jres describe result + * @private + */ +camlistore.FiletreePage.prototype.onChildrenFound_ = +function(div, depth, jres) { + var indent = depth * camlistore.FiletreePage.prototype.indentStep_; + div.innerHTML = ""; + for (var i = 0; i < jres.children.length; i++) { + var children = jres.children; + var pdiv = goog.dom.createElement("div"); + var alink = goog.dom.createElement("a"); + alink.style.paddingLeft=indent + "px" + alink.id = children[i].blobRef; + switch (children[i].type) { + case 'directory': + goog.dom.setTextContent(alink, "+ " + children[i].name); + goog.events.listen(alink, + goog.events.EventType.CLICK, + goog.bind(function (p, d) { + this.unFold_(p, d); + }, this, alink.id, depth), + false, this + ); + break; + case 'file': + goog.dom.setTextContent(alink, " " + children[i].name); + alink.href = "./?b=" + alink.id; + break; + default: + alert("not a file or dir"); + break; + } + var newPerm = goog.dom.createElement("span"); + newPerm.className = "cam-filetree-newp"; + goog.dom.setTextContent(newPerm, "P"); + goog.events.listen(newPerm, + goog.events.EventType.CLICK, + this.newPermWithContent_(alink.id), + false, this + ); + goog.dom.appendChild(pdiv, alink); + goog.dom.appendChild(pdiv, newPerm); + goog.dom.appendChild(div, pdiv); + } +} + + +/** + * @param {string} content blobref of the content + * @private + */ +camlistore.FiletreePage.prototype.newPermWithContent_ = +function(content) { + var fun = function(e) { + this.connection_.createPermanode( + goog.bind(function(permanode) { + this.connection_.newAddAttributeClaim( + permanode, "camliContent", content, + function() { + alert("permanode created"); + }, + function(msg) { + // TODO(mpl): "cancel" new permanode + alert("set permanode content failed: " + msg); + } + ); + }, this), + function(msg) { + alert("create permanode failed: " + msg); + } + ); + } + return goog.bind(fun, this); +} + + +/** + * @param {string} blobref dir to unfold. + * @param {number} depth so we know how much to indent. + * @private + */ +camlistore.FiletreePage.prototype.unFold_ = +function(blobref, depth) { + var node = goog.dom.getElement(blobref); + var div = goog.dom.createElement("div"); + this.connection_.getFileTree(blobref, + goog.bind(function(jres) { + this.onChildrenFound_(div, depth+1, jres); + insertAfter(node, div); + goog.events.removeAll(node); + goog.events.listen(node, + goog.events.EventType.CLICK, + goog.bind(function(p, d) { + this.fold_(p, d); + }, this, blobref, depth), + false, this + ); + }, this) + ); +} + +function insertAfter( referenceNode, newNode ) { + // nextSibling X2 because of the "P" span + referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling.nextSibling ); +} + +/** + * @param {string} nodeid id of the node to fold. + * @param {depth} depth so we know how much to indent. + * @private + */ +camlistore.FiletreePage.prototype.fold_ = +function(nodeid, depth) { + var node = goog.dom.getElement(nodeid); + // nextSibling X2 because of the "P" span + node.parentNode.removeChild(node.nextSibling.nextSibling); + goog.events.removeAll(node); + goog.events.listen(node, + goog.events.EventType.CLICK, + goog.bind(function(p, d) { + this.unFold_(p, d); + }, this, nodeid, depth), + false, this + ); +} + diff --git a/server/camlistored/newui/server_connection.js b/server/camlistored/newui/server_connection.js index c973239e8..5916cd5a1 100644 --- a/server/camlistored/newui/server_connection.js +++ b/server/camlistored/newui/server_connection.js @@ -153,6 +153,27 @@ function(success, opt_fail, e) { this.handleXhrResponseJson_(success, this.safeFail_(opt_fail), e); }; +/** + * @param {string} blobref root of the tree + * @param {function} success callback with data. + * @param {?Function} opt_fail optional failure calback + */ +camlistore.ServerConnection.prototype.getFileTree = +function(blobref, success, opt_fail) { + + // TODO(mpl): fix when we do the switch to newui. and + // redo it relatively to one of the roots anyway? + var path = "../tree/" + blobref; + + this.sendXhr_( + path, + goog.bind(this.genericHandleSearch_, this, + success, this.safeFail_(opt_fail) + ) + ); +}; + + /** * @param {function(camlistore.ServerType.SearchRecentResponse)} success callback with data. * @param {number=} opt_thumbnailSize