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