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 {
2010-12-02 05:49:02 +00:00
margin-top: 2em;
2010-12-02 02:41:51 +00:00
}
/* other */
.security-detail {
max-width: 400px;
}
2010-12-02 05:49:02 +00:00
2010-12-02 02:41:51 +00:00
< / style >
< script type = "text/javascript" charset = "utf-8" >
var BG = chrome.extension.getBackgroundPage();
// Generic album listing
2010-12-02 05:49:02 +00:00
function removeAlbum(albumType, albumId) {
delete BG.ALBUM_CONFIG[albumType][albumId];
if ($.isEmptyObject(BG.ALBUM_CONFIG[albumType])) {
delete BG.ALBUM_CONFIG[albumType];
}
}
2010-12-02 02:41:51 +00:00
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) {
2010-12-02 05:49:02 +00:00
removeAlbum(albumType, albumDict['id']);
2010-12-02 02:41:51 +00:00
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'}})
});
}
2010-12-02 05:49:02 +00:00
function addCamlistoreServer() {
var camliServerDiv = $('#camliserver-config');
2010-12-02 06:36:10 +00:00
function clearInputs() {
camliServerDiv.find('input').val('');
}
2010-12-02 05:49:02 +00:00
camliServerDiv.dialog({
modal: true,
resizable: false,
width: 550,
title: 'Connect a Camlistore Server',
buttons: {
'Add': function() {
var urlInput = $('#camliserver-url');
var nameInput = $('#camliserver-name');
2010-12-02 06:36:10 +00:00
var usernameInput = $('#camliserver-username');
var passwordInput = $('#camliserver-password');
2010-12-02 05:49:02 +00:00
if (!BG.ALBUM_CONFIG[BG.CAMLISTORE]) {
BG.ALBUM_CONFIG[BG.CAMLISTORE] = {};
}
2010-12-02 06:15:27 +00:00
if (!BG.ALBUM_OPTIONS[BG.CAMLISTORE]) {
BG.ALBUM_OPTIONS[BG.CAMLISTORE] = {};
}
var albumId = urlInput.val();
BG.ALBUM_CONFIG[BG.CAMLISTORE][albumId] = nameInput.val();
BG.ALBUM_OPTIONS[BG.CAMLISTORE][albumId] = {
2010-12-02 06:36:10 +00:00
'username': usernameInput.val(),
'password': passwordInput.val()
2010-12-02 06:15:27 +00:00
};
2010-12-02 05:49:02 +00:00
BG.saveAlbumConfig();
populateAlbumList();
BG.setupMenus();
2010-12-02 06:36:10 +00:00
clearInputs();
2010-12-02 05:49:02 +00:00
$(this).dialog('close');
},
'Cancel': function() {
2010-12-02 06:36:10 +00:00
clearInputs();
2010-12-02 05:49:02 +00:00
$(this).dialog('close');
}
}
});
}
2010-12-02 02:41:51 +00:00
$(document).ready(function() {
$('#add-picasa').click(addPicasaAlbum);
2010-12-02 05:49:02 +00:00
$('#add-camlistore').click(addCamlistoreServer);
2010-12-02 02:41:51 +00:00
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 >
2010-12-02 05:49:02 +00:00
< button id = "add-camlistore" type = "button" > Add Camlistore Server< / button >
2010-12-02 02:41:51 +00:00
< / 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 06:15:27 +00:00
< a href = "http://www.json.org/js.html" > json2 parser< / a > (public domain),
2010-12-02 04:35:13 +00:00
< 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 >
2010-12-02 05:49:02 +00:00
< div id = "camliserver-config" style = "display: none;" >
< table width = "100%" border = "0" >
< tr >
2010-12-02 06:15:27 +00:00
< td > < label for = "camliserver-url" > Blobserver URL:< / label > < / td >
< td > < input type = "text" id = "camliserver-url" size = "30" > < / td >
< / tr >
< tr >
< td > < label for = "camliserver-name" > Pretty name:< / label > < / td >
< td > < input type = "text" id = "camliserver-name" size = "30" > < / td >
< / tr >
< tr >
< td > < label for = "camliserver-username" > Username:< / label > < / td >
< td > < input type = "text" id = "camliserver-username" size = "30" > < / td >
2010-12-02 05:49:02 +00:00
< / tr >
< tr >
2010-12-02 06:15:27 +00:00
< td > < label for = "camliserver-password" > Password:< / label > < / td >
< td > < input type = "text" id = "camliserver-password" size = "30" > < / td >
2010-12-02 05:49:02 +00:00
< / tr >
< / table >
< / div >
2010-12-02 02:41:51 +00:00
< / body >
< / html >
