Skip to content

Commit

Permalink
Trying out blobastorus for external persistence
Browse files Browse the repository at this point in the history
  • Loading branch information
@lmorchard
lmorchard committed Mar 6, 2011
1 parent 86321ca commit aba5226
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 40 deletions.
11 changes: 7 additions & 4 deletions css/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
section h2, section p {
text-align: center;
}

#maybe-home label[for="body"] {
font-weight: bold;
}
Expand Down Expand Up @@ -103,6 +99,9 @@ section h2, section p {
font-size: 1.2em;
text-align: center;
}
#maybe-compare p {
text-align: center;
}

#maybe-compare #compare-items li.item {
font-size: 1.5em;
Expand All @@ -116,3 +115,7 @@ section h2, section p {
padding-right: 50px;
}

#maybe-settings #blobastorus-status #login { display: inline; }
#maybe-settings #blobastorus-status #whoami { display: none; }
#maybe-settings #blobastorus-status.logged-in #login { display: none; }
#maybe-settings #blobastorus-status.logged-in #whoami { display: inline; }
30 changes: 19 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ <h1>Maybe Do</h1>
data-icon="home" data-iconpos="top">Brainstorm</a></li>
<li><a id="nav-compare" href="#maybe-compare"
data-icon="star" data-iconpos="top">Compare</a></li>
<li><a id="nav-export" href="#maybe-export"
data-icon="forward" data-iconpos="top">Export</a></li>
<li><a id="nav-settings" href="#maybe-settings"
data-icon="gear" data-iconpos="top">Settings</a></li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -70,8 +70,8 @@ <h1>Maybe Do</h1>
data-icon="home" data-iconpos="top">Brainstorm</a></li>
<li><a id="nav-compare" href="#maybe-compare"
data-icon="star" data-iconpos="top">Compare</a></li>
<li><a id="nav-export" href="#maybe-export"
data-icon="forward" data-iconpos="top">Export</a></li>
<li><a id="nav-settings" href="#maybe-settings"
data-icon="gear" data-iconpos="top">Settings</a></li>
</ul>
</div>
</div>
Expand All @@ -97,7 +97,7 @@ <h2>Which is more important?</h2>

</section>

<section data-role="page" data-theme="a" id="maybe-export">
<section data-role="page" data-theme="a" id="maybe-settings">

<div data-role="header">
<h1>Maybe Do</h1>
Expand All @@ -107,19 +107,24 @@ <h1>Maybe Do</h1>
data-icon="home" data-iconpos="top">Brainstorm</a></li>
<li><a id="nav-compare" href="#maybe-compare"
data-icon="star" data-iconpos="top">Compare</a></li>
<li><a id="nav-export" href="#maybe-export"
data-icon="forward" data-iconpos="top">Export</a></li>
<li><a id="nav-settings" href="#maybe-settings"
data-icon="gear" data-iconpos="top">Settings</a></li>
</ul>
</div>
</div>

<div data-role="content">

<h2>Export your list</h2>
<ul>
<li><p>Bookmark <a href="#" id="settings-link">a list snapshot</a></p></li>
<li id="blobastorus-status">
<p>Blobastorus:
<a href="#" id="login"><img src="http://blobastor.us/example/sign-in-with-twitter-d.png" /></a>
<span id="whoami">Logged in as <span id="user"></span>.</span>
</p>
</li>
</ul>

<p id="export-links">
<a href="#" id="export-link">Bookmark this link</a>
</p>

</div>

Expand All @@ -135,6 +140,9 @@ <h2>Export your list</h2>
<script type="text/javascript" src="js/ICanHaz.min.js"></script>
<script type="text/javascript" src="js/lz77.js"></script>
<script type="text/javascript" src="jqm/jquery.mobile-1.0a3.min.js"></script>

<script type="text/javascript" src="https://blobastor.us/api.js"></script>

<script type="text/javascript" src="js/main.js"></script>

</body>
Expand Down
108 changes: 83 additions & 25 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ var MaybeUI = ( function () {

var $this = {

blobastorus_user: null,
blobastorus_save_delay: 3000,

/** Initialize the view */
init: function () {

Expand All @@ -57,19 +60,37 @@ var MaybeUI = ( function () {
$this.loadItems();
$(document).ready($this.onReady);

return $this;
},

/** Load items from localstorage */
loadItems: function () {
/** Start with a clean items collection */
clearItems: function () {
$this.items = new MaybeDoItemCollection();
var refresh = function () {
$this.refreshItems();
$this.snapshotItems();
};
$this.items.bind('add', refresh);
$this.items.bind('remove', refresh);
$this.items.bind('change', refresh);
},

/** Load items from localstorage */
loadItems: function (items_data) {
try {
var items_data = JSON.parse(window.localStorage.items);

var items_data = items_data || JSON.parse(window.localStorage.items);
if (!items_data) { return; }

$this.clearItems();

_(items_data).each(function (data) {
$this.items.add(
new MaybeDoItem(data),
{ silent: true }
);
});

} catch (e) {
// No-op, assume bad localstorage data.
}
Expand All @@ -83,6 +104,7 @@ var MaybeUI = ( function () {
return item.toJSON();
});
window.localStorage.items = JSON.stringify(items_data);
$this.saveToBlobastorus(items_data);
},

/** Search up through parents for a containing link element */
Expand All @@ -98,8 +120,8 @@ var MaybeUI = ( function () {
$this.wireUpHomePageUI();
$this.wireUpComparePageUI();
$this.wireUpPageChanges();
$this.wireUpItemCollectionEvents();
$this.refreshItems();
$this.checkBlobastorusData();
},

/** Wire up UI elements for home page */
Expand Down Expand Up @@ -149,22 +171,8 @@ var MaybeUI = ( function () {
$('#maybe-compare').live('pageshow', function (ev, ui) {
$this.initCompare();
});
$('#maybe-export').live('pageshow', function (ev, ui) {
$this.initExport();
});
},

/** Wire up handlers to changes in model objects. */
wireUpItemCollectionEvents: function () {
$this.items.bind('add', function () {
$this.refreshItems();
$this.snapshotItems();
});
$this.items.bind('remove', function () {
$this.snapshotItems();
});
$this.items.bind('change', function () {
$this.snapshotItems();
$('#maybe-settings').live('pageshow', function (ev, ui) {
$this.initSettings();
});
},

Expand Down Expand Up @@ -242,18 +250,18 @@ var MaybeUI = ( function () {
$this.updateCompare();
},

/** Initialize the export page */
initExport: function () {
/** Initialize the settings page */
initSettings: function () {
$this.snapshotItems();

var lz = new LZ77();
var data = btoa(lz.compress(window.localStorage.items));
$('#export-link').attr('href', 'index.html?items=' + data);
$('#settings-link').attr('href', 'index.html?items=' + data);

/*
var par = $('#export-links');
var par = $('#settings-links');
par.find('>a').remove();
par.append(ich.export_link({
par.append(ich.settings_link({
href: 'index.html?items='+data
}));
*/
Expand Down Expand Up @@ -324,6 +332,56 @@ var MaybeUI = ( function () {
}
},

checkBlobastorusData: function () {
if ('undefined' == typeof Blobastorus) { return; }

Blobastorus.getUser(function(user, error) {

// step 3: if the user is not authenticated, show them a button they can
// click on to authenticate via twitter
if (error === 'needsAuth') {
$("#login").show();
$("#login").click(function() {
Blobastorus.redirectUser();
return false;
});
$this.blobastorus_user = null;
}

// step 4: if the user *is* authenticated, welcome them by name
else {
$("#blobastorus-status").addClass('logged-in');
$("#howmany").show();
$("#user").text(user);
$this.blobastorus_user = user;

// step 5: now let's get the user's blob. how many times have they logged in?
Blobastorus.getBlob(function(data) {
if (data.items) {
$this.loadItems(data.items);
$this.refreshItems();
}
});
}
});

},

/**
* Update blobastorus data from localstorage.
* This will wait 3 seconds after any change before posting a new blob.
*/
saveToBlobastorus: function (items_data) {
var fn = arguments.callee;
if (!$this.blobastorus_user) { return; }
if (fn._delay) { window.clearTimeout(fn._delay); }
fn._delay = window.setTimeout(function () {
Blobastorus.setBlob({
items: items_data
});
}, $this.blobastorus_save_delay);
},

EOF:null
};

Expand Down

0 comments on commit aba5226

Please sign in to comment.