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

newui: Adds simplest BlobItemContainer for showing a list of blob thumbnails 

Change-Id: I283f955f21076b9a36d763be02c961ffca0475d9
This commit is contained in:
Brett Slatkin 2012-12-23 13:54:42 -08:00
parent 32efa3da97
commit 410257b70b
4 changed files with 129 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
server/camlistored/newui/blob_item.css
View File

@ -4,7 +4,7 @@
border: 1px solid gray;
padding: 8px;
max-width: 250px;
float: left;
display: inline-block;
overflow: hidden;
text-align: center;
}

4
server/camlistored/newui/blob_item.js
View File

@ -8,7 +8,7 @@ goog.require('goog.dom');
goog.require('goog.dom.classes');
goog.require('goog.events.EventHandler');
goog.require('goog.events.EventType');
goog.require('goog.ui.Component');
goog.require('goog.ui.Control');
@ -60,7 +60,7 @@ camlistore.BlobItem = function(blobRef, metaBag, opt_domHelper) {
*/
this.eh_ = new goog.events.EventHandler(this);
};
goog.inherits(camlistore.BlobItem, goog.ui.Component);
goog.inherits(camlistore.BlobItem, goog.ui.Control);
/**

77
server/camlistored/newui/blob_item_container.js Normal file
View File

@ -0,0 +1,77 @@
/**
* @fileoverview TODO
*
*/
goog.provide('camlistore.BlobItemContainer');
goog.require('goog.dom');
goog.require('goog.dom.classes');
goog.require('goog.events.EventHandler');
goog.require('goog.events.EventType');
goog.require('goog.ui.Container');
goog.require('camlistore.BlobItem');
/**
* @param {goog.dom.DomHelper=} opt_domHelper DOM helper to use.
*
* @extends {goog.ui.Container}
* @constructor
*/
camlistore.BlobItemContainer = function(opt_domHelper) {
goog.base(this, opt_domHelper);
/**
* @type {goog.events.EventHandler}
* @private
*/
this.eh_ = new goog.events.EventHandler(this);
};
goog.inherits(camlistore.BlobItemContainer, goog.ui.Container);
/**
* Creates an initial DOM representation for the component.
*/
camlistore.BlobItemContainer.prototype.createDom = function() {
this.decorateInternal(this.dom_.createElement('div'));
};
/**
* Decorates an existing HTML DIV element.
* @param {Element} element The DIV element to decorate.
*/
camlistore.BlobItemContainer.prototype.decorateInternal = function(element) {
camlistore.BlobItemContainer.superClass_.decorateInternal.call(this, element);
var el = this.getElement();
goog.dom.classes.add(el, 'cam-blobitemcontainer');
};
/** @override */
camlistore.BlobItemContainer.prototype.disposeInternal = function() {
camlistore.BlobItemContainer.superClass_.disposeInternal.call(this);
this.eh_.dispose();
};
/**
* Called when component's element is known to be in the document.
*/
camlistore.BlobItemContainer.prototype.enterDocument = function() {
camlistore.BlobItemContainer.superClass_.enterDocument.call(this);
// Add event handlers here
};
/**
* Called when component's element is known to have been removed from the
* document.
*/
camlistore.BlobItemContainer.prototype.exitDocument = function() {
camlistore.BlobItemContainer.superClass_.exitDocument.call(this);
// Clear event handlers here
};

49
server/camlistored/newui/blob_item_container_test.html Normal file
View File

@ -0,0 +1,49 @@
<!doctype html>
<html>
<head>
<script src="closure/goog/base.js"></script>
<script src="./deps.js"></script>
<script>
goog.require('camlistore.BlobItemContainer');
</script>
<link rel="stylesheet" href="blob_item.css" type="text/css">
</head>
<body>
<script>
var blobRef = 'sha1-5660088af0aa0d4f2294088f41284002a1baaa29';
var metaBag = {
'sha1-5660088af0aa0d4f2294088f41284002a1baaa29': {
'blobRef': 'sha1-5660088af0aa0d4f2294088f41284002a1baaa29',
'camliType': 'permanode',
'mimeType': 'application/json; camliType=permanode',
'permanode': {
'attr': {
'camliContent': ['sha1-c2379bcf77848c90d2c83709aaf7f628a21ff725']
}
},
'size': 556,
'thumbnailHeight': 100,
'thumbnailSrc': 'thumbnail/sha1-c2379bcf77848c90d2c83709aaf7f628a21ff725/leisure-suit-tony.gif?mw=100&mh=100',
'thumbnailWidth': 100
},
'sha1-c2379bcf77848c90d2c83709aaf7f628a21ff725': {
'blobRef': 'sha1-c2379bcf77848c90d2c83709aaf7f628a21ff725',
'camliType': 'file',
'file': {
'size': 37741,
'fileName': 'leisure-suit-tony.gif',
'mimeType': 'image/gif'
},
'mimeType': 'application/json; camliType=file',
'size': 198
}
};
var container = new camlistore.BlobItemContainer();
container.render(document.body);
for (var i = 0; i < 10; i++) {
container.addChild(new camlistore.BlobItem(blobRef, metaBag), true);
}
</script>
</body>
</html>