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.stream.preloadOrFetch()
this.streamView = new app.pages.Stream.InfiniteScrollView({ model : this.stream }) this.streamView = new app.pages.Stream.InfiniteScrollView({ model : this.stream })
var interactions = this.interactionsView = new app.views.StreamInteractions() this.interactionsView = new app.views.StreamInteractions()
this.stream.on("frame:interacted", function(post){
interactions.setInteractions(post)
})
this.streamView.on('loadMore', this.updateUrlState, this); this.streamView.on('loadMore', this.updateUrlState, this);
this.stream.on("fetched", this.refreshScrollSpy, this) this.stream.on("fetched", this.refreshScrollSpy, this)
this.stream.on("frame:interacted", this.selectFrame, this)
}, },
postRenderTemplate : function() { postRenderTemplate : function() {
this.$("#header").css("background-image", "url(" + app.currentUser.get("wallpaper") + ")") 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(){ updateUrlState : function(){
@ -42,15 +45,11 @@ app.pages.Stream = app.views.Base.extend({
}, },
triggerInteractionLoad : function(evt){ triggerInteractionLoad : function(evt){
var id = $(evt.target).data("id"); this._throttledInteractions = this._throttledInteractions || _.bind(_.throttle(function(id){
this.focusedPost = this.stream.items.get(id) this.selectFrame(this.stream.items.get(id))
}, 500), this)
this._throttledInteractions = this._throttledInteractions || _.bind(_.throttle(this.updateInteractions, 1000), this) this._throttledInteractions($(evt.target).data("id"))
this._throttledInteractions()
},
updateInteractions: function () {
this.interactionsView.setInteractions(this.focusedPost)
}, },
refreshScrollSpy : function(){ refreshScrollSpy : function(){

View file

@ -412,6 +412,9 @@ color: white;
#stream-content { #stream-content {
.stream-frame { .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; margin-bottom : 40px;
.stream-frame-feedback { .stream-frame-feedback {
@ -439,10 +442,12 @@ color: white;
} }
} }
.active { .selected-frame {
.content {
border: 10px solid red; border: 10px solid red;
} }
} }
}
.canvas-frame { .canvas-frame {
width: 100%; width: 100%;