mirror of https://github.com/perkeep/perkeep.git
Reimplement the Blob aspect using React.
Change-Id: I819b4d1dda86fe80db203f10e1e8a1b23b0777d5
This commit is contained in:
Aaron Boodman
parent
8c207ebed3
commit
940150a5c7
|
|
@ -16,9 +16,99 @@ limitations under the License.
|
|||
|
||||
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) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -32,15 +122,10 @@ cam.BlobDetail.getAspect = function(baseURL, onChildFrameClick, blobref, targetS
|
|||
fragment: 'blob',
|
||||
title: 'Blob',
|
||||
createContent: function(size) {
|
||||
var url = baseURL.clone();
|
||||
url.setParameterValue('b', blobref);
|
||||
return cam.CacheBusterIframe({
|
||||
baseURL: baseURL,
|
||||
height: size.height,
|
||||
onChildFrameClick: onChildFrameClick,
|
||||
key: 'blob',
|
||||
src: url,
|
||||
width: size.width,
|
||||
return cam.BlobDetail({
|
||||
getDetailURL: getDetailURL,
|
||||
meta: m,
|
||||
serverConnection: serverConnection,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2011 The Camlistore Authors
|
||||
Copyright 2014 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.
|
||||
|
|
@ -14,16 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.cam-blobinfo-page {
|
||||
font: 16px/1.4 normal Arial, sans-serif;
|
||||
}
|
||||
.cam-blobinfo-page #blobdata {
|
||||
overflow: auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
.cam-blobinfo-nav:before {
|
||||
content: "[";
|
||||
}
|
||||
.cam-blobinfo-nav:after {
|
||||
content: "]";
|
||||
}
|
||||
goog.provide('cam.blobref');
|
||||
|
||||
// TODO(aa): Need to eventually implement something like ref.go, which understands all the different types of hashes.
|
||||
cam.blobref.PATTERN = 'sha1-[0-9a-f]{40}';
|
||||
|
|
@ -33,6 +33,7 @@ goog.require('cam.BlobItemGenericContent');
|
|||
goog.require('cam.BlobItemImageContent');
|
||||
goog.require('cam.BlobItemTwitterContent');
|
||||
goog.require('cam.BlobItemVideoContent');
|
||||
goog.require('cam.blobref');
|
||||
goog.require('cam.DetailView');
|
||||
goog.require('cam.DirectoryDetail');
|
||||
goog.require('cam.Header');
|
||||
|
|
@ -63,6 +64,8 @@ cam.IndexPage = React.createClass({
|
|||
cam.BlobItemGenericContent.getHandler
|
||||
],
|
||||
|
||||
BLOBREF_PATTERN_: new RegExp('^' + cam.blobref.PATTERN + '$'),
|
||||
|
||||
propTypes: {
|
||||
availWidth: 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);
|
||||
|
||||
// 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];
|
||||
},
|
||||
|
||||
|
|
@ -158,7 +161,7 @@ cam.IndexPage = React.createClass({
|
|||
cam.ImageDetail.getAspect,
|
||||
cam.PermanodeDetail.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) {
|
||||
return f(this.getTargetBlobref_(), this.targetSearchSession_);
|
||||
}, this).filter(goog.functions.identity);
|
||||
|
|
|
|||
Loading…
Reference in New Issue