mirror of https://github.com/perkeep/perkeep.git
315 lines
9.2 KiB
HTML
315 lines
9.2 KiB
HTML
<!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, ©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/⌘ for specific items.</div>
|
|
</div>
|
|
|
|
<div id="camliserver-config" style="display: none;">
|
|
<table width="100%" border="0">
|
|
<tr>
|
|
<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>
|
|
</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>
|