DG MS; added scrollspy wip

Conflicts:

	app/assets/javascripts/app/pages/stream.js
	app/assets/templates/stream-frame.jst.hbs

app/assets/javascripts/app/pages/stream.js

@@ -7,9 +7,15 @@ app.views.NewStream = app.views.InfScroll.extend({
   }
 });
 
+/*--------------------*/
+
 app.pages.Stream = app.views.Base.extend({
   templateName : "stream",
 
+  events : {
+    'activate .stream-frame-wrapper' : 'triggerInteractionLoad'
+  },
+
   subviews : {
     "#stream-content" : "streamView",
     "#stream-interactions" : "interactionsView"
@@ -29,6 +35,8 @@ app.pages.Stream = app.views.Base.extend({
 
   postRenderTemplate : function() {
     this.$("#header").css("background-image", "url(" + app.currentUser.get("wallpaper") + ")")
+    $('body').scrollspy({target : '.stream-frame-wrapper'})
+    setTimeout(_.bind(this.refreshScrollSpy, this), 2000)
     this.setUpHashChangeOnStreamLoad()
   },
 
@@ -45,4 +53,18 @@ app.pages.Stream = app.views.Base.extend({
   navigateToPost : function(post){
     app.router.navigate(location.pathname + "?ex=true&max_time=" + post.createdAt(), {replace: true})
   },
+
+
+  },
+
+  triggerInteractionLoad : function(evt){
+    var post = this.stream.items.get($(evt.target).data("id"))
+    this.interactionsView.setInteractions(post)
+  },
+
+  //on active guid => this guid
+  // fire interacted from stream collection w/guid
+  refreshScrollSpy : function(){
+    $('body').scrollspy('refresh')
+  }
 });

app/assets/javascripts/bootstrap-scrollspy-custom.js

@@ -0,0 +1,150 @@
+/* =============================================================
+ * bootstrap-scrollspy.js v2.0.3
+ * http://twitter.github.com/bootstrap/javascript.html#scrollspy
+ * =============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================== */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+  /* SCROLLSPY CLASS DEFINITION
+   * ========================== */
+
+  function ScrollSpy( element, options) {
+
+    var process = $.proxy(this.process, this)
+      , $element = $(element).is('body') ? $(window) : $(element)
+      , href
+    this.options = $.extend({}, $.fn.scrollspy.defaults, options)
+    this.$scrollElement = $element.on('scroll.scroll.data-api', process)
+    this.selector = (this.options.target
+      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
+      || '')
+
+    this.$body = $('body')
+    this.refresh()
+    this.process()
+  }
+
+  ScrollSpy.prototype = {
+
+      constructor: ScrollSpy
+
+    , refresh: function () {
+        var self = this
+          , $targets
+
+        this.offsets = $([])
+        this.targets = $([])
+
+        $targets = this.$body
+          .find(this.selector)
+          .map(function () {
+            var $el = $(this)
+              , href = $el.data('target') || $el.attr('href')
+              , $href = /^#\w/.test(href) && $(href)
+
+            return ( $href
+              && href.length
+              && [[ $href.position().top, href ]] ) || null
+          })
+          .sort(function (a, b) { return a[0] - b[0] })
+          .each(function () {
+            self.offsets.push(this[0])
+            self.targets.push(this[1])
+          })
+    }
+
+    , process: function () {
+        var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
+          , scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
+          , maxScroll = scrollHeight - this.$scrollElement.height()
+          , offsets = this.offsets
+          , targets = this.targets
+          , activeTarget = this.activeTarget
+          , i
+
+        if (scrollTop >= maxScroll) {
+          return activeTarget != (i = targets.last()[0])
+            && this.activate ( i )
+        }
+
+        for (i = offsets.length; i--;) {
+          activeTarget != targets[i]
+            && scrollTop >= offsets[i]
+            && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
+            && this.activate( targets[i] )
+        }
+      }
+
+    , activate: function (target) {
+        var active
+          , selector
+
+        this.activeTarget = target
+
+        $(this.selector)
+          .removeClass('active')
+
+        selector = this.selector
+          + '[data-target="' + target + '"],'
+          + this.selector + '[href="' + target + '"]'
+
+        active = $(selector)
+          .addClass('active')
+
+        console.log(active)
+
+        active.trigger('activate')
+      }
+
+  }
+
+
+ /* SCROLLSPY PLUGIN DEFINITION
+  * =========================== */
+
+  $.fn.scrollspy = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('scrollspy')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.scrollspy.Constructor = ScrollSpy
+
+  $.fn.scrollspy.defaults = {
+    offset: 10
+  }
+
+
+ /* SCROLLSPY DATA-API
+  * ================== */
+
+  $(function () {
+    $('[data-spy="scroll"]').each(function () {
+      var $spy = $(this)
+      $spy.scrollspy($spy.data())
+    })
+  })
+
+}(window.jQuery);

app/assets/javascripts/main.js

@@ -42,3 +42,4 @@
 //= require bootstrap-tooltip
 //= require bootstrap-popover
 //= require bootstrap-dropdown
+//= require bootstrap-scrollspy-custom

app/assets/templates/stream-frame.jst.hbs

@@ -1,22 +1,31 @@
-<div class="permalink-wrapper info">
+<div id="{{guid}}" data-id="{{id}}" data-target="#{{guid}}" class="stream-frame-wrapper">
-    <a href="/posts/{{id}}" class="permalink">
-        <i class="icon-zoom-in icon-white"></i>
-    </a>
-</div>
-<div class='stream-frame-feedback'></div>
 
-<div class="media author">
+    <div class="permalink-wrapper info">
-    {{#linkToPerson author}}
+        <a href="/posts/{{id}}" class="permalink">
-        <div class="img">
+            <i class="icon-zoom-in icon-white"></i>
-            <div class="profile-image-container smaller" style="background-image : url('{{avatar.large}}')"></div>
+        </a>
-        </div>
-    {{/linkToPerson}}
-
-    <div class="bd">
-        {{#linkToPerson author}}
-            {{name}}
-        {{/linkToPerson}}
     </div>
-</div>
 
-<div class="small-frame"></div>
+    <div class="permalink-wrapper info">
+        <a href="/p/{{guid}}">
+            <i class="icon-zoom-in icon-white"></i>
+        </a>
+    </div>
+    <div class='stream-frame-feedback'></div>
+
+    <div class="media author">
+        {{#linkToPerson author}}
+            <div class="img">
+                <div class="profile-image-container smaller" style="background-image : url('{{avatar.large}}')"></div>
+            </div>
+        {{/linkToPerson}}
+
+        <div class="bd">
+            {{#linkToPerson author}}
+                {{name}}
+            {{/linkToPerson}}
+        </div>
+    </div>
+
+    <div class="small-frame"></div>
+</div>