2010-12-02 02:41:51 +00:00
<!doctype html>
< html >
< head >
< title > Clip It Good: Configure options< / title >
< link rel = "stylesheet" href = "jquery-ui-1.8.5.custom.css" type = "text/css" charset = "utf-8" >
< script type = "text/javascript" src = "jquery-1.4.2.min.js" > < / script >
< script type = "text/javascript" src = "json2.js" > < / script >
< script type = "text/javascript" src = "jquery-ui-1.8.5.custom.min.js" > < / script >
< script type = "text/javascript" src = "chrome_ex_oauthsimple.js" > < / script >
< script type = "text/javascript" src = "chrome_ex_oauth.js" > < / script >
< style type = "text/css" >
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#about {
max-width: 400px;
}
/* Pop-up album selection */
.album-type {
margin-bottom: 1em;
}
.album-list {
height: 250px;
overflow-y: auto;
overflow-x: hidden;
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid #555;
}
.album-list .ui-selecting {
background: #FECA40;
}
.album-list .ui-selected {
background: #F39814;
color: #FFFFFF;
}
.album-list li {
margin: 0;
padding: 5px;
border-top: 1px solid #DDD;
border-bottom: 1px solid #BBB;
background-color: #EEE;
font-size: 0.8em;
cursor: pointer;
}
.album-controls {
margin-top: 1em;
}
/* Connected albums view */
.album-type-picasa {
}
.album-section-title {
}
.add-album-control {
margin-top: 1em;
}
/* other */
.security-detail {
max-width: 400px;
}
< / style >
< script type = "text/javascript" charset = "utf-8" >
var BG = chrome.extension.getBackgroundPage();
// Generic album listing
function populateAlbumList() {
var connectedAlbums = $('#connected-list');
connectedAlbums.contents().remove();
BG.loadAlbumConfig();
if ($.isEmptyObject(BG.ALBUM_CONFIG)) {
connectedAlbums.text('No albums connected.');
return;
}
$.each(BG.ALBUM_CONFIG, function(albumType, albumIdNameDict) {
var albumSectionTitle = $('< h3 class = "album-section-title" > ');
albumSectionTitle.text(BG.ALBUM_TYPE_STRING[albumType]);
connectedAlbums.append(albumSectionTitle);
var albumSection = $('< ul class = "album-section" > ');
albumSection.addClass('album-type-' + albumType);
$.each(BG.getSortedAlbums(albumIdNameDict), function(index, albumDict) {
var album = $('< li class = "connected-album" > ');
album.attr('album-id', albumDict['id']);
album.text(albumDict['name'] + ' ');
var removeLink = $('< a href = "" > ').text('(Remove)');
removeLink.click(function(event) {
delete BG.ALBUM_CONFIG[albumType][albumDict['id']];
if ($.isEmptyObject(BG.ALBUM_CONFIG[albumType])) {
delete BG.ALBUM_CONFIG[albumType];
}
album.remove();
BG.saveAlbumConfig();
populateAlbumList();
BG.setupMenus();
event.preventDefault();
return false;
});
album.append(removeLink);
albumSection.append(album);
});
connectedAlbums.append(albumSection);
});
}
// Generic album selection
function renderAlbumSelector(albumIdToName, albumType) {
var selectAlbumDiv = $('#select-album');
selectAlbumDiv.children('.album-type')
.text(BG.ALBUM_TYPE_STRING[albumType]);
var albumList = selectAlbumDiv.children('.album-list');
albumList.contents().remove();
$.each(albumIdToName, function(albumId, albumName) {
var albumEntry = $('< li > ');
albumEntry.attr('album-id', albumId);
albumEntry.text(albumName);
albumList.append(albumEntry);
});
albumList.selectable();
selectAlbumDiv.dialog({
modal: true,
resizable: false,
width: 550,
title: 'Connect an album',
buttons: {
'Add': function() {
var selectedAlbums = $('#select-album>.album-list>.ui-selected');
$.each(selectedAlbums, function(index, item) {
if (!BG.ALBUM_CONFIG[albumType]) {
BG.ALBUM_CONFIG[albumType] = {};
}
BG.ALBUM_CONFIG[albumType][$(item).attr('album-id')] =
$(item).text();
});
BG.saveAlbumConfig();
populateAlbumList();
BG.setupMenus();
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
}
// Picasa-specific album selection
function picasaListAlbumsDone(jsonData) {
var albumIdToName = {};
$.each(jsonData.feed.entry, function(index, entryData) {
albumIdToName[entryData['gphoto$id']['$t']] = entryData.title['$t'];
});
renderAlbumSelector(albumIdToName, BG.PICASA);
}
function addPicasaAlbum() {
BG.OAUTH.authorize(function() {
BG.OAUTH.sendSignedRequest(
'http://picasaweb.google.com/data/feed/api/user/default',
function(resp, xhr) {
if (!(xhr.status >= 200 & & xhr.status < = 299)) {
alert('Error: Response status = ' + xhr.status +
', response body = "' + xhr.responseText + '"');
return;
}
var jsonResponse = $.parseJSON(resp);
picasaListAlbumsDone(jsonResponse);
},
{method: 'GET', parameters: {'alt': 'json'}})
});
}
$(document).ready(function() {
$('#add-picasa').click(addPicasaAlbum);
populateAlbumList();
});
< / script >
< / head >
< body >
< h1 > Clip It Good: Configure options< / h1 >
< div id = "connected-list" >
Loading...
< / div >
< div class = "add-album-control" >
< button id = "add-picasa" type = "button" > Add Picasa Web Album< / button >
< / div >
< h2 > Security information< / h2 >
< div class = "security-detail" >
Connecting an album to < em > Clip It Good< / em > will require giving this extension permission to access your albums even when you are < strong > not logged into your account< / strong > . At any time you may revoke access to this extension by using the authorized access control panel for each photo hosting provider: < a href = "https://www.google.com/accounts/IssuedAuthSubTokens" > Google Accounts< / a >
< / div >
< h2 > About< / h2 >
< div id = "about" >
< img src = "icon128.png" / >
< p >
Brett Slatkin, © 2010
< br >
< a href = "http://www.google.com/profiles/bslatkin/contactme" > Email< / a >
< / p >
< p >
Extension and source licensed under the
< a href = "http://www.apache.org/licenses/LICENSE-2.0" > Apache License,
Version 2.0< / a > . Uses < a href = "http://jqueryui.com/" > jQuery UI< / a > (MIT/GPL),
2010-12-02 04:35:13 +00:00
< a href = "http://www.json.org/js.html" > json2 parser< / a > (free domain),
< a href = "http://code.google.com/p/javascriptbase64/" > Fred Palmer's Base64< / a >
(BSD compat), and < a href = "http://code.google.com/p/crypto-js/" > Jeff
Mott's SHA1< / a > (BSD compat).
2010-12-02 02:41:51 +00:00
< / p >
< / div >
<!-- hidden divs used by interactive stuff -->
< div id = "select-album" style = "display: none;" >
< div class = "album-type" > < / div >
< ol class = "album-list" > < / ol >
< div class = "album-controls" > Drag to select multiple or click while holding Control/⌘ for specific items.< / div >
< / div >
< / body >
< / html >
