pulsate control to add new post if no posts present

app/assets/javascripts/app/models/stream.js

@@ -72,6 +72,9 @@ app.models.Stream = Backbone.Collection.extend({
     var preloadJson = window.preLoadContent && JSON.parse(window.preLoadContent)
     delete window.preLoadContent // always do this just to be safe in preventing dirty state across navigates
 
-    if(preloadJson) { this.items.reset(preloadJson) }
+    if(preloadJson) {
+      this.items.reset(preloadJson)
+      this.trigger("fetched")
+    }
   }
 });

app/assets/javascripts/app/pages/profile.js

@@ -36,6 +36,11 @@ app.pages.Profile = app.views.Base.extend({
 
     this.model = new app.models.Profile.findByGuid(options.personId)
     this.stream = options && options.stream || new app.models.Stream()
+
+    /* binds for getting started pulsation */
+    this.stream.bind("fetched", this.pulsateNewPostControl, this)
+    this.stream.items.bind("remove", this.pulsateNewPostControl, this)
+
     this.stream.preloadOrFetch();
 
     this.canvasView = new app.views.Canvas({ model : this.stream })
@@ -44,6 +49,14 @@ app.pages.Profile = app.views.Base.extend({
     this.profileInfo = new app.views.ProfileInfo({ model : this.model.set({isOwnProfile : this.isOwnProfile()}) })
   },
 
+  pulsateNewPostControl : function() {
+    this.$("#composer-button")[
+      this.stream.items.length == 0
+        ? 'addClass'
+        : 'removeClass'
+      ]("pulse")
+  },
+
   toggleEdit : function(evt) {
     if(evt) { evt.preventDefault() }
     this.editMode = !this.editMode

app/assets/stylesheets/new-templates.css.scss

@@ -1,6 +1,10 @@
 @import 'mixins';
+@import 'new_styles/new_mixins';
 @import 'new_styles/variables';
 
+/* custom animations */
+@import 'new_styles/animations';
+
 /* mainly for the post viewer & composer */
 @import 'new_styles/base';
 @import 'new_styles/composer';

app/assets/stylesheets/new_styles/_animations.scss

@@ -0,0 +1,15 @@
+@-webkit-keyframes opacity-pulse {
+	0%   { @include opacity(0.3); }
+	65%  { @include opacity(0.9); }
+	100% { @include opacity(0.3); }
+}
+@-moz-keyframes opacity-pulse {
+	0%   { @include opacity(0.3); }
+	65%  { @include opacity(0.9); }
+	100% { @include opacity(0.3); }
+}
+@-ms-keyframes opacity-pulse {
+	0%   { @include opacity(0.3); }
+	65%  { @include opacity(0.9); }
+	100% { @include opacity(0.3); }
+}

app/assets/stylesheets/new_styles/_base.scss

@@ -1,5 +1,3 @@
-@import "_new_mixins";
-
 /* new link color */
 a { color : rgb(42,156,235)  }
 

app/assets/stylesheets/new_styles/_profile.scss

@@ -1,3 +1,10 @@
+/* getting started pulse animation */
+#composer-button.pulse {
+  -webkit-animation: opacity-pulse 1s infinite;
+  -moz-animation:    opacity-pulse 1s infinite;
+  -ms-animation:     opacity-pulse 1s infinite;
+}
+
 /* functionality under edit mode */
 .edit-mode {
   #edit-mode-toggle.control {

app/assets/templates/profile.jst.hbs

@@ -46,7 +46,7 @@
 
 <section id="profile-controls">
     {{#if isOwnProfile}}
-        <a href="#composer" class="control small" rel="facebox">
+        <a href="#composer" id="composer-button" class="control small" rel="facebox">
             <img src='{{imageUrl "buttons/pub@2x.png"}}' title="New Post" rel="tooltip"/>
         </a>
         <a href="#" id="edit-mode-toggle" class="control small">