diff --git a/app/assets/javascripts/app/pages/stream.js b/app/assets/javascripts/app/pages/stream.js index c3c4952b4..87b555a3a 100644 --- a/app/assets/javascripts/app/pages/stream.js +++ b/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') + } }); diff --git a/app/assets/javascripts/bootstrap-scrollspy-custom.js b/app/assets/javascripts/bootstrap-scrollspy-custom.js new file mode 100644 index 000000000..ff23fd4ca --- /dev/null +++ b/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); diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 5907a0411..2212efaf6 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -42,3 +42,4 @@ //= require bootstrap-tooltip //= require bootstrap-popover //= require bootstrap-dropdown +//= require bootstrap-scrollspy-custom diff --git a/app/assets/templates/stream-frame.jst.hbs b/app/assets/templates/stream-frame.jst.hbs index 83633409e..5574a479d 100644 --- a/app/assets/templates/stream-frame.jst.hbs +++ b/app/assets/templates/stream-frame.jst.hbs @@ -1,22 +1,31 @@ - -
+
-
- {{#linkToPerson author}} -
-
-
- {{/linkToPerson}} - -
- {{#linkToPerson author}} - {{name}} - {{/linkToPerson}} + -
-
+ +
+ +
+ {{#linkToPerson author}} +
+
+
+ {{/linkToPerson}} + +
+ {{#linkToPerson author}} + {{name}} + {{/linkToPerson}} +
+
+ +
+