final work before mosscon, v1.0

updated about page a bunch added version to footer/app fixed issue w/ cordova_plugins.json implemented homepage prompt for app, or "Great", or not... added "Get from Google Play" button/link (app just released) removed tour package (wasn't using it, may put it back in sometime)
zeroasterisk · May 18, 2013 · 1def0da · 1def0da
1 parent eee403a
commit 1def0da
Show file tree

Hide file tree

Showing 14 changed files with 172 additions and 67 deletions.
diff --git a/.meteor/packages b/.meteor/packages
@@ -16,7 +16,6 @@ accounts-twitter
 bootstrap
 router
 chartjs
-tour
 d3
 moment
 validation

diff --git a/client/index.html b/client/index.html
@@ -39,7 +39,7 @@
           {{deck.title}}
         </a>
         {{else}}
-        <a class="brand" href="/decks">
+        <a class="brand" href="/">
           <img src="/icon.png" alt="Logo" width="20">
           Presenteract
         </a>
@@ -59,8 +59,9 @@
                 <li><a href="#">Login to create/edit/run Presenations</a></li>
               {{/if}}
             {{else}}
-              <li><a href="#" class="muted">Audience Only in App</a></li>
+              <li><a href="/about#audience" class="muted">Audience Only in App</a></li>
             {{/if}}
+            <li><a href="/"><i class="icon-home"></i> Show Open Decks</a></li>
             <li><a href="/about"><i class="icon-question-sign"></i> About</a></li>
           </ul>
         </div>
@@ -71,8 +72,9 @@
 </template>
 
 <template name="footer">
-<footer class="well">
+<footer class="well" style="margin-top: 10px;">
   &copy; <a href="http://presenteract.meteor.com">Presenteract</a> 2013
+  <span class="muted">{{version}}</span>
   <div class="pull-right muted">
     <small>
     Built with

diff --git a/client/index.js b/client/index.js
@@ -10,3 +10,8 @@ Template.header.helpers({
     return true;
   }
 });
+Template.footer.helpers({
+  'version': function() {
+    return Meteor.appVersion;
+  }
+});
diff --git a/client/lib/cordova.js b/client/lib/cordova.js
@@ -22,7 +22,7 @@ if (navigator.userAgent.match(/(iPad|iPhone|iOS)/gi) != null) {
 } else if (navigator.userAgent.match(/(Android)/gi) != null) {
   deviceBase = 'android';
 }
-
+Session.set('deviceBase', deviceBase);
 if (deviceBase == 'other') {
   Session.set('cordovaStatus', 'aborted');
   Session.set('cordovaLoaded', true);

diff --git a/client/lib/handlebar-helpers.js b/client/lib/handlebar-helpers.js
@@ -8,6 +8,9 @@
   if (typeof Handlebars !== 'undefined') {
 
     Handlebars.registerHelper('safe', function (field) {
+      if (! (_.isString(this[field]))) {
+        return '';
+      }
       return new Handlebars.SafeString(this[field]);
     });
 

diff --git a/client/views/about.html b/client/views/about.html
@@ -1,37 +1,49 @@
 <template name="about">
 <h1>About Presenteract</h1>
 <p class="lead">Presenteract is a project to facilitate interactive presentations, where the audience can see and interact with slides from their phone/device/laptop.</p>
-<h2>Audience</h2>
+<h2 id="audience">Audience</h2>
 <p>Connect to the currently "open" deck, for this presentaiton.  Often there is a QR code or a URL provided to make this simpler.</p>
 <p>Wait for the Presenter to change slides for you.</p>
 <p>Polls should be very simple, just choose an option and submit.</p>
-<h2>Presenters</h2>
-<p>To present, you must login, via Facebook or via Google.  Once logged in, you'll have an option for "My Presentations" and the ability to add new ones.</p>
-<p>New Deck/Presenations will be created without any slides.  You must add at least one slide to be able to use it.</p>
-<p>Only "Open" Presenations are available to audience members.  You can edit Presenations while open, and audience members should get your changes automatically synced.</p>
-<p>Only the "owner" / "creator" of a Presenation can control/run it.</p>
-<h2>Help / Contact</h2>
+{{> onDeviceNote}}
+
+<h2 id="presenter">Presenters</h2>
+<p class="alert alert-info"><i class="icon-info-sign"></i> For now, you use a browser to Present, not the app... :( </a>
+<p>To present, you <strong>must login</strong>, via Facebook or via Google (link on the right side of the header).  Once logged in, you'll have an option for "My Presentations" and the ability to add new ones.</p>
+<p>New Decks/Presenations will be created without any slides.  You must add at least one slide to be able to use it.</p>
+<p>
+  <span class="label label-success"><i class="icon-ok icon-white"></i> Open</span> Presenations are available to audience members.  If it's not Open, it's not available.<br>
+  <span class="label label-warning"><i class="icon-remove icon-white"></i> Closed</span> Presenations can easily be opened, as long as they contain slides.  Just click on the the word "Closed" to toggle it to "Open".</p>
+<p>
+  <i class="icon-eye-open"></i> Visible Presentations will show up on the homepage while open.<br>
+  <i class="icon-lock"></i> Invisible Presentations will not, but can still be accessed via URL/QRcode.
+</p>
+<p>You can edit Presenations &amp; Slides while open, and audience members should get your changes automatically synced.</p>
+<p>Only the "owner" / "creator" of a Presenation can control/run it.  Right now, that's only one person, you... we may open this up to allow you to share ownership with others... Let us know if this is important to you...</p>
+
+<h2 id="help">Help / Contact</h2>
 <p><a href="https://github.com/zeroasterisk/Presenteract/issues">Bug Reports and Feature Requests</a> are available.  If there is a significant need, we will improve this to a knowledge base.</p>
-<p>Developers, the code is available on <a href="https://github.com/zeroasterisk/Presenteract">GitHub</a></p>
+<p>Developers, the code is available on <a href="https://github.com/zeroasterisk/Presenteract">GitHub</a>. Pull Requests are appriciated.</p>
+
 <h2>Built With</h2>
 <div class="row">
   <div class="span4">
     <h3><a href="http://meteor.com">MeteorJS</a></h3>
-    <p>Wow. At every step of the way I've been impressed by MeteorJS.  The framework is exception in the functionality it provides users in the application.  It is also very easy to work in and includes tons of tools for developers.</p>
+    <p>Wow. At every step of the way I've been impressed by MeteorJS.  The framework is exceptional, every time I work with it, I'm more impressed.  It is also very easy to develop in and includes amazing tools right out of the box.  I can't recommend it enough.</p>
   </div>
   <div class="span4">
-    <h3><a href="http://phonegap.com">PhoneGap</a></h3>
-    <p>PhoneGap is an excellent project, wrapping web applications into mobile device "apps".</p>
+    <h3><a href="http://phonegap.com">Cordova / PhoneGap</a></h3>
+    <p>Apache Cordova / PhoneGap is an excellent project, wrapping web applications into mobile device "apps".  A browser as an App, with a JavaScript API to native device functionality.</p>
   </div>
   <div class="span4">
     <h3><a href="http://twitter.github.io/">Twitter Bootstrap</a></h3>
-    <p>This Excellent and Prolific CSS framework makes createing attractive, standardized, responsive, and very functional web applications easy.</p>
+    <p>This Excellent and Prolific CSS framework makes creating attractive, standardized, responsive, and very functional web applications easy.</p>
   </div>
 </div>
 <div class="row">
   <div class="span4">
     <h4><a href="http://jQuery.com">jQuery</a></h4>
-    <p>Who doesn't use jQuery?  In fact, we don't use it a ton, because MeteorJS does most of the lifting, but we still use jQuery to work with the DOM a bit.</p>
+    <p>Who doesn't use jQuery?  In fact, we don't use it a ton, because MeteorJS does most of the heavy lifting (and much of the light work too), but we still use jQuery to work with the DOM a bit.</p>
   </div>
   <div class="span4">
     <h4><a href="http://underscorejs.com">UnderscoreJS</a></h4>
@@ -48,4 +60,21 @@ <h4><a href="http://vitalets.github.io/x-editable/">X-Editable</a></h4>
     <p>For the admin interface, we have a "Click to Edit" or "Edit in Place" interface provided by X-Editable.  It rocks!</p>
   </div>
 </div>
+
+<h2>Device Information</h2>
+<p class="muted">Ignore the following information... I doubt you'll ever need it.</p>
+<dl class="dl-horizontal">
+  <dt>deviceBase</dt>
+  <dd>{{getSession 'deviceBase'}}</dd>
+  <dt>cordovaLoaded</dt>
+  <dd>{{getSession 'cordovaLoaded'}}</dd>
+  <dt>cordovaStatus</dt>
+  <dd>{{getSession 'cordovaStatus'}}</dd>
+  <dt>DecksLoaded</dt>
+  <dd>{{getSession 'DecksLoaded'}}</dd>
+  <dt>SlidesLoaded</dt>
+  <dd>{{getSession 'SlidesLoaded'}} <small class="muted">(only loaded when deck selected)</small></dd>
+  <dt>PollsLoaded</dt>
+  <dd>{{getSession 'PollsLoaded'}} <small class="muted">(only loaded when slide selected)</small></dd>
+</dl>
 </template>
diff --git a/client/views/deckView.js b/client/views/deckView.js
@@ -27,7 +27,7 @@ Template.deckView.helpers({
     return Slides.find({deckId: Session.get('deckId')}).count();
   },
   'slides': function() {
-    return Slides.find({deckId: Session.get('deckId')}, { sort: { order: 1 } }).fetch();
+    return Slides.forDeck(Session.get('deckId'));
   },
   'slide': function() {
     var deck = Decks.findOne(Session.get('deckId'));
@@ -37,68 +37,36 @@ Template.deckView.helpers({
     return Slides.findOne(deck.slideId);
   },
   'currentSlideInt': function() {
-    var deck = Decks.findOne(Session.get('deckId'));
-    if (! (_.isString(deck.slideId) && deck.slideId.length)) {
-      return 1;
-    }
-    var slides = Slides.find(
-        {deckId: Session.get('deckId')},
-        { sort: { order: 1 }, fields: { _id: 1 }}
-        ).fetch();
-    for (var i = 0; i < slides.length; i++) {
-      if (slides[i]._id == deck.slideId) {
-        return i + 1;
-      }
-    }
-    return 1;
+    return Decks.slideIndex(Session.get('deckId'));
   }
 });
+
+
 // implemented as directly callable methods on the template
 //   useful for self-referencing
 Template.deckView.prevSlideId = function() {
-  var deck = Decks.findOne(Session.get('deckId'));
-  if (! (_.isObject(deck) && _.has(deck, 'slideId') && _.isString(deck.slideId) && deck.slideId.length)) {
+  var currentIndex = Decks.slideIndex(Session.get('deckId'));
+  if (currentIndex < 2) {
     return '';
   }
-  var slides = Slides.find(
-      {deckId: Session.get('deckId')},
-      { sort: { order: 1 }, fields: { _id: 1 }}
-      ).fetch();
-  for (var i = 0; i < slides.length; i++) {
-    if (slides[i]._id == deck.slideId) {
-      if (i < 1) {
-        return '';
-      }
-      return slides[(i - 1)]._id;
-    }
-  }
-  return '';
+  var slides = Slides.forDeck(Session.get('deckId'));
+  return slides[(currentIndex - 2)]._id;
 };
 Template.deckView.nextSlideId = function() {
-  var deck = Decks.findOne(Session.get('deckId'));
-  if (! (_.isObject(deck) && _.has(deck, 'slideId') && _.isString(deck.slideId) && deck.slideId.length)) {
+  var currentIndex = Decks.slideIndex(Session.get('deckId'));
+  var slides = Slides.forDeck(Session.get('deckId'));
+  if (currentIndex >= slides.length) {
     return '';
   }
-  var slides = Slides.find(
-      {deckId: Session.get('deckId')},
-      { sort: { order: 1 }, fields: { _id: 1 }}
-      ).fetch();
-  for (var i = 0; i < slides.length; i++) {
-    if (slides[i]._id == deck.slideId) {
-      if ((i + 1) == slides.length) {
-        return '';
-      }
-      return slides[(i + 1)]._id;
-    }
-  }
-  return '';
+  return slides[currentIndex]._id;
 };
 Template.deckView.isOwner = function() {
   var deck = Decks.findOne(Session.get('deckId'));
   return (deck.owner == Meteor.userId())
 };
 // stand alone callable version of setSlide event
 //   can be triggered via keyboard nav
+//   only works if .setSlideNext is visible & has data('id')
 Template.deckView.setSlideNext = function() {
   if (!$(".setSlideNext").is(":visible")) {
     return false;
@@ -111,6 +79,7 @@ Template.deckView.setSlideNext = function() {
 }
 // stand alone callable version of setSlide event
 //   can be triggered via keyboard nav
+//   only works if .setSlidePrev is visible & has data('id')
 Template.deckView.setSlidePrev = function() {
   if (!$(".setSlidePrev").is(":visible")) {
     return false;

diff --git a/client/views/home.html b/client/views/home.html
@@ -23,9 +23,56 @@ <h1 class="pull-left">Interactive Presentations</h1>
   </div>
 </div>
 
+{{#if onApp}}
+  {{> onAppNote}}
+{{else}}
+  {{#if onDevice}}
+    {{> onDeviceNote}}
+  {{else}}
+    {{> onBrowserNote}}
+  {{/if}}
+{{/if}}
+
+</template>
+
+
+
+
+<template name="onAppNote">
+<div class="media">
+  <a class="pull-left" href="#">
+    <img src="http://s3.amazonaws.com/rapgenius/1291131680_two-thumbs-up.jpg" width="200">
+  </a>
+  <div class="media-body">
+    <h4>Great!  It appears you are using the Presenteract App</h4>
+    <p>You can also get to this from any browser at <span class="code">http://presenteract.meteor.com</span></p>
+  </div>
+</div>
+</template>
+
+<template name="onDeviceNote">
+<div class="media">
+  <a class="pull-left" href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=646279445&mt=8">
+    <img src="http://apptitudenola.com/wp-content/uploads/2012/11/appstore.png" width="200" class="media-object">
+  </a>
+  <div class="media-body">
+    <p>You may use this in your browser, or you can get the App from iTunes</p>
+  </div>
+</div>
+<div class="media">
+  <a class="pull-left" href="https://play.google.com/store/apps/details?id=com.meteor.presenteract">
+    <img src="http://blog.soonr.com/wp-content/uploads/2013/03/Google-Play-Badge.png" width="200" class="media-object">
+  </a>
+  <div class="media-body">
+    <p>You may use this in your browser, or you can get the App from Google Play</p>
+  </div>
+</div>
+</template>
+
+<template name="onBrowserNote">
 <div class="media">
   <a class="pull-left" href="http://presenteract.meteor.com">
-    <img src="http://api.qrserver.com/v1/create-qr-code/?data=http://presenteract.meteor.com&size=200x200" alt="qrcode to presenteract.meteor.com">
+    <img src="http://api.qrserver.com/v1/create-qr-code/?data=http://presenteract.meteor.com&size=200x200" width="200" class="media-object" alt="qrcode to presenteract.meteor.com">
   </a>
   <div class="media-body">
     <h4>Get the App now, or load the page</h4>

diff --git a/client/views/home.js b/client/views/home.js
@@ -4,6 +4,15 @@ Template.home.helpers({
   },
   createdNice: function() {
     return moment(this.created).fromNow();
+  },
+  // inside the phonegap presenteract app
+  onApp: function() {
+      return (Session.get('cordovaLoaded') && Session.get('cordovaStatus') != 'aborted');
+  },
+  // running in a browser on a compatible device, but not inside phonegap
+  onDevice: function() {
+    return (Session.get('cordovaStatus') != 'aborted');
   }
+  // onBrowser() = not onApp and not onDevice
 });
 
diff --git a/models/decks.js b/models/decks.js
@@ -27,3 +27,30 @@ if (Meteor.isServer) {
   });
 }
 
+// Sometimes we need to know what the numerical index is for the current slide
+Decks.slideIndex = function(deckId, slideId) {
+    var deck = Decks.findOne(deckId);
+    if (! (_.isString(deck.slideId) && deck.slideId.length)) {
+      // invalid deck, return 1
+      return 1;
+    }
+    if (! (_.isString(slideId) && slideId.length)) {
+      // no slideId passed in, use deck.slideId
+      slideId = deck.slideId;
+    }
+    // get all slides
+    var slides = Slides.find(
+        { deckId: deck._id },
+        { sort: { order: 1 }, fields: { _id: 1 }}
+        ).fetch();
+    // can't use for loops here
+    //   http://stackoverflow.com/questions/15494390/metor-blade-template-throws-second-landmark-in-same-branch-exception-in-for-lo
+    var i = 0, slideIndex = 1;
+    _.each(slides, function(slide) {
+      i++;
+      if (slide._id == deck.slideId) {
+        slideIndex = i;
+      }
+    });
+    return slideIndex;
+};
diff --git a/models/slides.js b/models/slides.js
@@ -22,6 +22,11 @@ if (Meteor.isServer) {
   });
 }
 
+// helper to get standardized select for all slides for a deck, sorted
+Slides.forDeck = function(deckId) {
+  return Slides.find({deckId: Session.get('deckId')}, { sort: { order: 1 } }).fetch();
+}
+
 // helpful methods for editing
 // (allow will restrict functionality)
 

diff --git a/public/cordova_plugins.json b/public/cordova_plugins.json
@@ -0,0 +1 @@
+[]
diff --git a/smart.lock b/smart.lock
@@ -2,7 +2,7 @@
   "meteor": {
     "git": "https://github.com/meteor/meteor.git",
     "branch": "master",
-    "commit": "1dfc7171f237a029cca74cbf25024acbf6ed5b75"
+    "commit": "5d736d4bf0448c7db1f9b47124dfafc34a9631bb"
   },
   "dependencies": {
     "basePackages": {
@@ -54,8 +54,8 @@
       },
       "x-editable-bootstrap": {
         "git": "https://github.com/nate-strauser/meteor-x-editable-bootstrap.git",
-        "tag": "v0.1.3",
-        "commit": "ec1fc58812d9794880b483755ffc54d4a5e235f1"
+        "tag": "v0.1.4",
+        "commit": "bc4ff2ce77c37640802559148db69838532e9b32"
       },
       "bootstrap-growl": {
         "git": "https://github.com/TimHeckel/meteor-bootstrap-growl.git",

diff --git a/version.js b/version.js
@@ -0,0 +1,9 @@
+/**
+ * Application Version Number and "name"
+ *   eg: v1.2 "caturday"
+ * Version implemented in this manner for ease of access within the JS
+ *
+ * @property appVersion
+ * @type string
+ */
+Meteor.appVersion = 'v1.0 "awesome"';
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,6 @@ accounts-twitter @@
     bootstrap
     router
     chartjs
-    tour
     d3
     moment
     validation
@@ Expand Down @@