Skip to content
This repository has been archived by the owner on Jul 18, 2023. It is now read-only.

Commit

Permalink
Use jQuery
Browse files Browse the repository at this point in the history
  • Loading branch information
@galfert
galfert committed Mar 1, 2012
1 parent 460d081 commit d5dfb13
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 121 deletions.
3 changes: 0 additions & 3 deletions css/screen.css
View file
Expand Up @@ -43,9 +43,6 @@ section#public_storage {

#states span {
padding: 5px;
}

#states span.disabled {
color: #c66;
}

Expand Down
5 changes: 3 additions & 2 deletions index.html
View file
Expand Up @@ -5,6 +5,7 @@
<title>Unhosted remoteStorage Tutorial</title>
<link href="css/screen.css" media="screen" rel="stylesheet" type="text/css" />
<script src="js/require.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/unhosted.js" type="text/javascript"></script>
</head>

Expand All @@ -14,8 +15,8 @@ <h1>remoteStorage.js Tutorial</h1>

<section id="connection">
<div id="states" class="hidden">
<span id="connectionState" class="disabled">disconnected</span> |
<span id="authorizedState" class="disabled">not authorized</span>
<span id="connectionState">disconnected</span> |
<span id="authorizedState">not authorized</span>
</div>

<p>
Expand Down
4 changes: 4 additions & 0 deletions js/jquery-1.7.1.min.js
View file

Large diffs are not rendered by default.

236 changes: 120 additions & 116 deletions js/unhosted.js
View file
Expand Up @@ -60,11 +60,11 @@ require(['./js/remoteStorage'], function(remoteStorage) {
// Helper functions

function showSpinner(id) {
document.getElementById(id).className = '';
$('#' + id).show();
}

function hideSpinner(id) {
document.getElementById(id).className = 'hidden';
$('#' + id).hide();
}

function setConnectionState(state) {
Expand All @@ -76,28 +76,28 @@ require(['./js/remoteStorage'], function(remoteStorage) {

if (connected) {
for (var i = 0; i < elementIds.length; i++) {
document.getElementById(elementIds[i]).disabled = null;
$('#' + elementIds[i]).removeAttr('disabled');
}
document.getElementById('connectionState').innerHTML = 'connected';
document.getElementById('connectionState').className = 'enabled';
document.getElementById('connect').className = 'hidden';
document.getElementById('disconnect').className = '';
$('#connectionState').html('connected');
$('#connect').hide();
$('#disconnect').show();
} else {
for (var i = 0; i < elementIds.length; i++) {
document.getElementById(elementIds[i]).disabled = 'disabled';
$('#' + elementIds[i]).attr('disabled', 'disabled');
}
document.getElementById('connectionState').innerHTML = 'disconnected';
document.getElementById('connectionState').className = 'disabled';
document.getElementById('connect').className = '';
document.getElementById('disconnect').className = 'hidden';
$('#connectionState').html('disconnected');
$('#connect').show();
$('#disconnect').hide();
deauthorize();
}
$('#connectionState').toggleClass('enabled', connected);

document.getElementById('states').className = '';
$('#states').show();
}

function disconnect() {
localStorage.removeItem('userStorageInfo');
localStorage.removeItem('userAddress', userAddress);
setConnectionState(false);
}

Expand All @@ -115,23 +115,22 @@ require(['./js/remoteStorage'], function(remoteStorage) {

if (authorized) {
for (var i = 0; i < elementIds.length; i++) {
document.getElementById(elementIds[i]).disabled = null;
$('#' + elementIds[i]).removeAttr('disabled');
}
document.getElementById('publicTitle').innerHTML = 'Read/write access for "public" category';
document.getElementById('authorizedState').innerHTML = 'authorized';
document.getElementById('authorizedState').className = 'enabled';
document.getElementById('authorize').className = 'hidden';
document.getElementById('deauthorize').className = '';
$('#publicTitle').html('Read/write access for "public" category');
$('#authorizedState').html('authorized');
$('#authorize').hide();
$('#deauthorize').show();
} else {
for (var i = 0; i < elementIds.length; i++) {
document.getElementById(elementIds[i]).disabled = 'disabled';
$('#' + elementIds[i]).attr('disabled', 'disabled');
}
document.getElementById('publicTitle').innerHTML = 'Read access for "public" category';
document.getElementById('authorizedState').innerHTML = 'not authorized';
document.getElementById('authorizedState').className = 'disabled';
document.getElementById('authorize').className = '';
document.getElementById('deauthorize').className = 'hidden';
$('#publicTitle').html('Read access for "public" category');
$('#authorizedState').html('not authorized');
$('#authorize').show();
$('#deauthorize').hide();
}
$('#authorizedState').toggleClass('enabled', authorized);
}

function deauthorize() {
Expand All @@ -144,129 +143,134 @@ require(['./js/remoteStorage'], function(remoteStorage) {
}

// Bind the UI elements to the actions
$(function() {

document.getElementById('connect').onclick = function() {
var userAddress = document.getElementById('userAddress').value;

showSpinner('connectionSpinner');

connect(userAddress, function(error, storageInfo) {
if(error) {
console.log('Could not load storage info');
console.log(error);
setConnectionState(false);
} else {
console.log('Storage info received:');
console.log(storageInfo);
localStorage.setItem('userStorageInfo', JSON.stringify(storageInfo));
setConnectionState(true);
}
$('#connect').on('click', function() {
var userAddress = $('#userAddress').val();

hideSpinner('connectionSpinner');
});
showSpinner('connectionSpinner');

return false;
}
connect(userAddress, function(error, storageInfo) {
if(error) {
console.log('Could not load storage info');
console.log(error);
setConnectionState(false);
} else {
console.log('Storage info received:');
console.log(storageInfo);
localStorage.setItem('userStorageInfo', JSON.stringify(storageInfo));
localStorage.setItem('userAddress', userAddress);
setConnectionState(true);
}

hideSpinner('connectionSpinner');
});

return false;
});

document.getElementById('fetchPublicKey').onclick = function() {
var key = document.getElementById('publicKey').value;
$('#fetchPublicKey').on('click', function() {
var key = $('publicKey').val();

showSpinner('fetchPublicSpinner');
showSpinner('fetchPublicSpinner');

getData('public', key, function(error, data) {
if(error) {
console.log('Could not find "' + key + '" in category "public" on the remoteStorage');
console.log(error);
} else {
if (data == "null") {
console.log('There wasn\'t anything for "' + key + '" in category "public"');
getData('public', key, function(error, data) {
if(error) {
console.log('Could not find "' + key + '" in category "public" on the remoteStorage');
console.log(error);
} else {
console.log('We received this for key "' + key + '" in category "public": ' + data);
if (data == "null") {
console.log('There wasn\'t anything for "' + key + '" in category "public"');
} else {
console.log('We received this for key "' + key + '" in category "public": ' + data);
}
}
}

hideSpinner('fetchPublicSpinner');
hideSpinner('fetchPublicSpinner');
});

return false;
});

return false;
}
$('#publishPublic').on('click', function() {
var key = $('#publicKey').val();
var value = $('#publicValue').val();

document.getElementById('publishPublic').onclick = function() {
var key = document.getElementById('publicKey').value;
var value = document.getElementById('publicValue').value;
showSpinner('publishPublicSpinner');

showSpinner('publishPublicSpinner');
putData('public', key, value, function(error) {
if (error) {
console.log('Could not store "' + key + '" in "public" category');
} else {
console.log('Stored "' + value + '" for key "' + key + '" in "public" category');
}

putData('public', key, value, function(error) {
if (error) {
console.log('Could not store "' + key + '" in "public" category');
} else {
console.log('Stored "' + value + '" for key "' + key + '" in "public" category');
}
hideSpinner('publishPublicSpinner');
});

hideSpinner('publishPublicSpinner');
return false;
});

return false;
}
$('#authorize').on('click', function() {
authorize(['public', 'tutorial']);
return false;
});

document.getElementById('authorize').onclick = function() {
authorize(['public', 'tutorial']);
return false;
}
$('#publishTutorial').on('click', function() {
var key = $('tutorialKey').val();
var value = $('tutorialValue').val();

document.getElementById('publishTutorial').onclick = function() {
var key = document.getElementById('tutorialKey').value;
var value = document.getElementById('tutorialValue').value;
showSpinner('publishTutorialSpinner');

showSpinner('publishTutorialSpinner');
putData('tutorial', key, value, function(error) {
if (error) {
console.log('Could not store "' + key + '" in "tutorial" category');
} else {
console.log('Stored "' + value + '" for key "' + key + '" in "tutorial" category');
}

putData('tutorial', key, value, function(error) {
if (error) {
console.log('Could not store "' + key + '" in "tutorial" category');
} else {
console.log('Stored "' + value + '" for key "' + key + '" in "tutorial" category');
}
hideSpinner('publishTutorialSpinner');
});

hideSpinner('publishTutorialSpinner');
return false;
});

return false;
}

document.getElementById('fetchTutorialKey').onclick = function() {
var key = document.getElementById('tutorialKey').value;
$('#fetchTutorialKey').on('click', function() {
var key = $('tutorialKey').val();

showSpinner('fetchTutorialSpinner');
showSpinner('fetchTutorialSpinner');

getData('tutorial', key, function(error, data) {
if(error) {
console.log('Could not find "' + key + '" in category "tutorial" on the remoteStorage');
console.log(error);
} else {
if (data == "null") {
console.log('There wasn\'t anything for "' + key + '" in category "tutorial"');
getData('tutorial', key, function(error, data) {
if(error) {
console.log('Could not find "' + key + '" in category "tutorial" on the remoteStorage');
console.log(error);
} else {
console.log('We received this for key "' + key + '" in category "tutorial": ' + data);
if (data == "null") {
console.log('There wasn\'t anything for "' + key + '" in category "tutorial"');
} else {
console.log('We received this for key "' + key + '" in category "tutorial": ' + data);
}
}
}

hideSpinner('fetchTutorialSpinner');
hideSpinner('fetchTutorialSpinner');
});

return false;
});

return false;
}
$('#disconnect').on('click', function() {
disconnect();
return false;
});

document.getElementById('disconnect').onclick = function() {
disconnect();
return false;
}
$('#deauthorize').on('click', function() {
deauthorize();
return false;
});

document.getElementById('deauthorize').onclick = function() {
deauthorize();
return false;
}
// Initializers

setConnectionState(isConnected());
setAuthorizedState(isAuthorized());
setConnectionState(isConnected());
setAuthorizedState(isAuthorized());
});
});

0 comments on commit d5dfb13

Please sign in to comment.