make it clearer which frame is active, and fixes for scrolling flow.

This commit is contained in:
Dennis Collinson 2012-05-30 18:05:27 -07:00
parent 1c81e4f587
commit 374ec73fa4
2 changed files with 20 additions and 16 deletions

View file

@ -15,19 +15,22 @@ app.pages.Stream = app.views.Base.extend({
this.stream.preloadOrFetch()
this.streamView = new app.pages.Stream.InfiniteScrollView({ model : this.stream })
var interactions = this.interactionsView = new app.views.StreamInteractions()
this.stream.on("frame:interacted", function(post){
interactions.setInteractions(post)
})
this.interactionsView = new app.views.StreamInteractions()
this.streamView.on('loadMore', this.updateUrlState, this);
this.stream.on("fetched", this.refreshScrollSpy, this)
this.stream.on("frame:interacted", this.selectFrame, this)
},
postRenderTemplate : function() {
this.$("#header").css("background-image", "url(" + app.currentUser.get("wallpaper") + ")")
_.defer(function(){$('body').scrollspy({target : '.stream-frame-wrapper', offset : 50})})
_.defer(function(){$('body').scrollspy({target : '.stream-frame-wrapper', offset : 205})})
},
selectFrame : function(post){
this.$(".stream-frame-wrapper").removeClass("selected-frame")
this.$(".stream-frame-wrapper[data-id=" + post.id +"]").addClass("selected-frame")
this.interactionsView.setInteractions(post)
},
updateUrlState : function(){
@ -42,15 +45,11 @@ app.pages.Stream = app.views.Base.extend({
},
triggerInteractionLoad : function(evt){
var id = $(evt.target).data("id");
this.focusedPost = this.stream.items.get(id)
this._throttledInteractions = this._throttledInteractions || _.bind(_.throttle(function(id){
this.selectFrame(this.stream.items.get(id))
}, 500), this)
this._throttledInteractions = this._throttledInteractions || _.bind(_.throttle(this.updateInteractions, 1000), this)
this._throttledInteractions()
},
updateInteractions: function () {
this.interactionsView.setInteractions(this.focusedPost)
this._throttledInteractions($(evt.target).data("id"))
},
refreshScrollSpy : function(){

View file

@ -412,6 +412,9 @@ color: white;
#stream-content {
.stream-frame {
.stream-frame-wrapper {
position: relative; //interactions scroll spy gets confused about div height when there are images without this line.
}
margin-bottom : 40px;
.stream-frame-feedback {
@ -439,8 +442,10 @@ color: white;
}
}
.active {
border: 10px solid red;
.selected-frame {
.content {
border: 10px solid red;
}
}
}