Rooba
/
perkeep
mirror of https://github.com/perkeep/perkeep.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Reimplement the Blob aspect using React. 

Change-Id: I819b4d1dda86fe80db203f10e1e8a1b23b0777d5
This commit is contained in:
Aaron Boodman 2014-08-17 00:31:12 -07:00
parent 8c207ebed3
commit 940150a5c7
4 changed files with 106 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
server/camlistored/ui/blob_detail.js
View File

@ -16,9 +16,99 @@ limitations under the License.
goog.provide('cam.BlobDetail'); goog.provide('cam.BlobDetail');
goog.require('cam.CacheBusterIframe'); goog.require('cam.blobref');
goog.require('cam.ServerConnection');
cam.BlobDetail.getAspect = function(baseURL, onChildFrameClick, blobref, targetSearchSession) { cam.BlobDetail = React.createClass({
BLOBREF_PATTERN_: new RegExp(cam.blobref.PATTERN, 'g'),
propTypes: {
getDetailURL: React.PropTypes.func.isRequired,
meta: React.PropTypes.object.isRequired,
serverConnection: React.PropTypes.instanceOf(cam.ServerConnection).isRequired,
},
getInitialState: function() {
return {
content: null,
metadata: null,
claims: null,
};
},
componentWillMount: function() {
this.props.serverConnection.getBlobContents(this.props.meta.blobRef, this.handleBlobContents_);
this.props.serverConnection.permanodeClaims(this.props.meta.blobRef, this.handleClaims_);
},
render: function() {
var children = [
this.getHeader_("Blob content"),
this.getCodeBlock_(this.state.content),
this.getHeader_("Indexer metadata"),
this.getCodeBlock_(this.props.meta),
];
// TODO(aa): This should really move to permanode detail.
if (this.state.claims) {
children.push(this.getHeader_("Mutation claims"));
children.push(this.getCodeBlock_(this.state.claims));
}
return React.DOM.div(
{
style: {
fontFamily: 'Open Sans',
margin: '1.5em 2em',
}
},
children);
},
getHeader_: function(title) {
return React.DOM.h1(
{
style: {
fontSize: '1.5em',
}
},
title
);
},
getCodeBlock_: function(stuff) {
return React.DOM.pre(
{
style: {
overflowX: 'auto',
},
},
stuff ? this.linkify_(JSON.stringify(stuff, null, 2)) : null
);
},
linkify_: function(code) {
var result = [];
var match;
var index = 0;
while ((match = this.BLOBREF_PATTERN_.exec(code)) !== null) {
result.push(code.substring(index, match.index));
result.push(React.DOM.a({href: this.props.getDetailURL(match[0]).toString()}, match[0]));
index = match.index + match[0].length;
}
result.push(code.substring(index));
return result;
},
handleBlobContents_: function(data) {
this.setState({content: JSON.parse(data)});
},
handleClaims_: function(data) {
this.setState({claims: data});
},
});
cam.BlobDetail.getAspect = function(getDetailURL, serverConnection, blobref, targetSearchSession) {
if(!targetSearchSession) { if(!targetSearchSession) {
return; return;
} }
@ -32,15 +122,10 @@ cam.BlobDetail.getAspect = function(baseURL, onChildFrameClick, blobref, targetS
fragment: 'blob', fragment: 'blob',
title: 'Blob', title: 'Blob',
createContent: function(size) { createContent: function(size) {
var url = baseURL.clone(); return cam.BlobDetail({
url.setParameterValue('b', blobref); getDetailURL: getDetailURL,
return cam.CacheBusterIframe({ meta: m,
baseURL: baseURL, serverConnection: serverConnection,
height: size.height,
onChildFrameClick: onChildFrameClick,
key: 'blob',
src: url,
width: size.width,
}); });
}, },
}; };

38
server/camlistored/ui/blobinfo.html
View File

@ -1,38 +0,0 @@
<!doctype html>
<html>
<head>
<title>Blob info</title>
<script src="closure/goog/base.js"></script>
<script src="./deps.js"></script>
<script src="?camli.mode=config&var=CAMLISTORE_CONFIG"></script>
<link rel="stylesheet" href="blobinfo.css">
<script>
goog.require('cam.BlobPage');
</script>
</head>
<body class="cam-blobinfo-page">
<div class="cam-blobinfo-nav"><a href="./" target="_top">Home</a></div>
<h1>Blob Contents</h1>
<div id="thumbnail"></div>
<span id="editspan" class="cam-blobinfo-nav" style="display: none;"><a href="#" id="editlink">edit</a></span>
<span id="blobdownload" class="cam-blobinfo-nav"></span>
<span id="blobdescribe" class="cam-blobinfo-nav"></span>
<span id="blobbrowse" class="cam-blobinfo-nav"></span>
<pre id="blobdata"></pre>
<h1>Indexer Metadata</h1>
<pre id="blobmeta"></pre>
<div id="claimsdiv" style="visibility: hidden">
<h1>Mutation Claims</h1>
<pre id="claims"></pre>
</div>
<script>
var page = new cam.BlobPage(CAMLISTORE_CONFIG);
page.decorate(document.body);
</script>
</body>
</html>

19
server/camlistored/ui/blobinfo.css → server/camlistored/ui/blobref.js
View File

@ -1,5 +1,5 @@
/* /*
Copyright 2011 The Camlistore Authors Copyright 2014 The Camlistore Authors
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -14,16 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.cam-blobinfo-page { goog.provide('cam.blobref');
font: 16px/1.4 normal Arial, sans-serif;
} // TODO(aa): Need to eventually implement something like ref.go, which understands all the different types of hashes.
.cam-blobinfo-page #blobdata { cam.blobref.PATTERN = 'sha1-[0-9a-f]{40}';
overflow: auto;
max-width: 800px;
}
.cam-blobinfo-nav:before {
content: "[";
}
.cam-blobinfo-nav:after {
content: "]";
}

7
server/camlistored/ui/index.js
View File

@ -33,6 +33,7 @@ goog.require('cam.BlobItemGenericContent');
goog.require('cam.BlobItemImageContent'); goog.require('cam.BlobItemImageContent');
goog.require('cam.BlobItemTwitterContent'); goog.require('cam.BlobItemTwitterContent');
goog.require('cam.BlobItemVideoContent'); goog.require('cam.BlobItemVideoContent');
goog.require('cam.blobref');
goog.require('cam.DetailView'); goog.require('cam.DetailView');
goog.require('cam.DirectoryDetail'); goog.require('cam.DirectoryDetail');
goog.require('cam.Header'); goog.require('cam.Header');
@ -63,6 +64,8 @@ cam.IndexPage = React.createClass({
cam.BlobItemGenericContent.getHandler cam.BlobItemGenericContent.getHandler
], ],
BLOBREF_PATTERN_: new RegExp('^' + cam.blobref.PATTERN + '$'),
propTypes: { propTypes: {
availWidth: React.PropTypes.number.isRequired, availWidth: React.PropTypes.number.isRequired,
availHeight: React.PropTypes.number.isRequired, availHeight: React.PropTypes.number.isRequired,
@ -147,7 +150,7 @@ cam.IndexPage = React.createClass({
var suffix = url.getPath().substr(this.baseURL_.getPath().length); var suffix = url.getPath().substr(this.baseURL_.getPath().length);
// TODO(aa): Need to implement something like ref.go that knows about the other hash types. // TODO(aa): Need to implement something like ref.go that knows about the other hash types.
var match = suffix.match(/^sha1-[0-9a-f]{40}$/); var match = suffix.match(this.BLOBREF_PATTERN_);
return match && match[0]; return match && match[0];
}, },
@ -158,7 +161,7 @@ cam.IndexPage = React.createClass({
cam.ImageDetail.getAspect, cam.ImageDetail.getAspect,
cam.PermanodeDetail.getAspect.bind(null, this.baseURL_, childFrameClickHandler), cam.PermanodeDetail.getAspect.bind(null, this.baseURL_, childFrameClickHandler),
cam.DirectoryDetail.getAspect.bind(null, this.baseURL_, childFrameClickHandler), cam.DirectoryDetail.getAspect.bind(null, this.baseURL_, childFrameClickHandler),
cam.BlobDetail.getAspect.bind(null, this.baseURL_, childFrameClickHandler), cam.BlobDetail.getAspect.bind(null, this.getDetailURL_, this.props.serverConnection),
].map(function(f) { ].map(function(f) {
return f(this.getTargetBlobref_(), this.targetSearchSession_); return f(this.getTargetBlobref_(), this.targetSearchSession_);
}, this).filter(goog.functions.identity); }, this).filter(goog.functions.identity);