188 строки
4.2 KiB
HTML
188 строки
4.2 KiB
HTML
{% import config %}
|
|
<html>
|
|
<head>
|
|
<title>{{config.PHOTO_SITE}} Photo Picker</title>
|
|
<script type="text/javascript" src="/static/js/jschannel.js"></script>
|
|
<script type="text/javascript" src="/static/js/jquery-1.4.4.min.js"></script>
|
|
<link type="text/css" href="/static/css/style.css" rel="stylesheet" />
|
|
<script>
|
|
|
|
var gRequestArguments = null;
|
|
var gSelectedPhoto;
|
|
|
|
// XX need some way to message up to UA that "Okay" should be enabled
|
|
chan = Channel.build({window: window.parent, origin: "*", scope: "openwebapps_conduit"});
|
|
|
|
chan.bind("image.get", function(t, args) {
|
|
gRequestArguments = args;
|
|
loadPhotoSets(gotPhotoSets);
|
|
});
|
|
|
|
chan.bind("confirm", function(t, args) {
|
|
if (gRequestArguments && gRequestArguments.expectURL) {
|
|
return photo_get_size(gSelectedPhoto, "master").url;
|
|
} else {
|
|
return "That was weird"// xx exception
|
|
}
|
|
});
|
|
|
|
function load(url, args, cb) {
|
|
args.user_id = window.localStorage.getItem("user_id");
|
|
args.credentials = window.localStorage.getItem("credentials");
|
|
$.getJSON(url, args, cb);
|
|
}
|
|
|
|
function loadPhotoSets(cb)
|
|
{
|
|
load("/get/photosets", {}, cb);
|
|
}
|
|
|
|
function loadPhotos(photosetID, cb)
|
|
{
|
|
load("/get/photos", {photoset_id:photosetID}, cb);
|
|
}
|
|
|
|
function loadPhotoSizes(photoID, cb)
|
|
{
|
|
load("/get/photosizes", {photoid:photoid}, cb);
|
|
}
|
|
|
|
function init() {
|
|
/* loadPhotoSets(function(photosets) {
|
|
loadPhotos(photosets[0].id, function(photos) {
|
|
PHOTOS = photos;
|
|
for (var i=0; i<5; i++) {
|
|
var thumbnail = $(photos[i].sizes).filter(function(i, size) {return size.size == 'small';})[0];
|
|
$('body').append('<img src="' + thumbnail.url + '" />');
|
|
}
|
|
});
|
|
});
|
|
*/
|
|
}
|
|
|
|
function gotPhotoSets(photosetData)
|
|
{
|
|
gPhotoSets = photosetData;
|
|
gPhotoSetFetchQueue.push(gPhotoSets[0]);
|
|
startPhotosLoader();
|
|
}
|
|
|
|
function render(newSetID)
|
|
{
|
|
$("#photosetList").empty();
|
|
$(gPhotoSets).each(function(i, set) {
|
|
set.domCounter = i;
|
|
var div = $("<div class='set'/>").attr("id", "photoset" + i);
|
|
var heading = $("<div class='setHeading'/>").text(set.title);
|
|
div.append(heading);
|
|
$("#photosetList").append(div);
|
|
});
|
|
}
|
|
|
|
function makeClickFn(photo, img)
|
|
{
|
|
return function() {
|
|
if (gSelectedPhoto) {
|
|
console.log("removing " + gSelectedPhoto.domID);
|
|
$("#" + gSelectedPhoto.domID).removeClass("selected");
|
|
}
|
|
gSelectedPhoto = photo;
|
|
img.addClass("selected");
|
|
|
|
// render a size picker for it?
|
|
}
|
|
}
|
|
|
|
function photo_get_size(photo, size) {
|
|
return $(photo.sizes).filter(function(i, one_size) {return one_size.size == size;})[0];
|
|
}
|
|
|
|
function renderPhotosetThumbs(photoset)
|
|
{
|
|
var thumbs = $("<div class='setThumbnails'/>");
|
|
if (photoset.retrievedPhotosData) {
|
|
$(photoset.retrievedPhotosData).each(function(i, photo) {
|
|
var photo_size = photo_get_size(photo, "thumbnail");
|
|
var img = $("<img/>").attr({
|
|
id:"photo" + photoset.domCounter + "_" + i,
|
|
src:photo_size.url});
|
|
|
|
if (photo_size.width) {
|
|
img = img.attr({width:photo_size.width, height:photo_size.height});
|
|
}
|
|
|
|
img.click(makeClickFn(photo, img));
|
|
thumbs.append(img);
|
|
});
|
|
}
|
|
$("#photoset" + photoset.domCounter).append(thumbs);
|
|
thumbs.hide().fadeIn();
|
|
}
|
|
|
|
|
|
function startPhotosLoader()
|
|
{
|
|
var counter = 0;
|
|
render();
|
|
|
|
function loadSet() {
|
|
var set = gPhotoSetFetchQueue.pop();
|
|
|
|
loadPhotos(set.id, function(setData) {
|
|
set.retrievedPhotosData = setData;
|
|
renderPhotosetThumbs(set);
|
|
|
|
if (gPhotoSetFetchQueue.length > 0) {
|
|
loadSet();
|
|
}
|
|
});
|
|
}
|
|
loadSet();
|
|
}
|
|
|
|
var gPhotoSets = [];
|
|
var gPhotoSetFetchQueue = [];
|
|
|
|
</script>
|
|
<style>
|
|
#photosetList
|
|
{
|
|
}
|
|
#photosetList .setHeading
|
|
{
|
|
font:bold 8pt "lucida grande",tahoma,verdana,arial,sans-serif;
|
|
margin-top:4px;
|
|
margin-bottom:4px;
|
|
margin-left:4px;
|
|
}
|
|
#photosetList .setThumbnails
|
|
{
|
|
margin-left:8px;
|
|
}
|
|
|
|
#photosetList img
|
|
{
|
|
margin-left:6px;
|
|
margin-top:4px;
|
|
margin-bottom:4px;
|
|
border:2px solid white;
|
|
}
|
|
|
|
.selected {
|
|
-webkit-box-shadow: 0px 0px 2px #dddd00;
|
|
-moz-box-shadow: 0px 0px 2px #dddd00;
|
|
box-shadow: 0px 0px 2px #dddd00;
|
|
border:2px solid #dddd00 !important;
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body onload="init()">
|
|
|
|
<div id="photosetList"></div>
|
|
|
|
</body>
|
|
</html>
|