make it clearer which frame is active, and fixes for scrolling flow.
This commit is contained in:
parent
1c81e4f587
commit
374ec73fa4
2 changed files with 20 additions and 16 deletions
|
|
@ -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(){
|
||||||
|
|
|
||||||
|
|
@ -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,8 +442,10 @@ color: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.selected-frame {
|
||||||
border: 10px solid red;
|
.content {
|
||||||
|
border: 10px solid red;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue