Permalink
Browse files

Trying out blobastorus for external persistence

  • Loading branch information...
1 parent 86321ca commit aba52264b396aebfd5d63f19dcb67b2248891b68 @lmorchard committed Mar 6, 2011
Showing with 109 additions and 40 deletions.
  1. +7 −4 css/main.css
  2. +19 −11 index.html
  3. +83 −25 js/main.js
View
@@ -1,7 +1,3 @@
-section h2, section p {
- text-align: center;
-}
-
#maybe-home label[for="body"] {
font-weight: bold;
}
@@ -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;
@@ -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; }
View
@@ -20,8 +20,8 @@
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>
@@ -70,8 +70,8 @@
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>
@@ -97,7 +97,7 @@
</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>
@@ -107,19 +107,24 @@
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>
@@ -135,6 +140,9 @@
<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>
View
@@ -37,6 +37,9 @@ var MaybeUI = ( function () {
var $this = {
+ blobastorus_user: null,
+ blobastorus_save_delay: 3000,
+
/** Initialize the view */
init: function () {
@@ -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.
}
@@ -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 */
@@ -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 */
@@ -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();
});
},
@@ -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
}));
*/
@@ -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
};

0 comments on commit aba5226

Please sign in to comment.