diff --git a/app/assets/javascripts/app/models/stream.js b/app/assets/javascripts/app/models/stream.js
index 37c4ef8dc..382dd58c5 100644
--- a/app/assets/javascripts/app/models/stream.js
+++ b/app/assets/javascripts/app/models/stream.js
@@ -2,16 +2,13 @@
//= require ../collections/photos
app.models.Stream = Backbone.Collection.extend({
initialize : function(models, options){
- var collection = app.collections.Posts;
- if( options && options.collection ) collection = options.collection;
- this.items = new collection([], this.collectionOptions());
+ var collectionClass = options && options.collection || app.collections.Posts;
+ this.items = new collectionClass([], this.collectionOptions());
},
collectionOptions :function(){
var order = this.sortOrder();
- return {
- comparator : function(item) { return -item[order](); }
- }
+ return { comparator : function(item) { return -item[order](); } }
},
url : function(){
@@ -61,13 +58,8 @@ app.models.Stream = Backbone.Collection.extend({
this.items.add(models)
},
-
preloadOrFetch : function(){ //hai, plz test me THNX
- if(app.hasPreload("stream")){
- this.preload()
- } else {
- this.fetch()
- }
+ return $.when(app.hasPreload("stream") ? this.preload() : this.fetch())
},
preload : function(){
diff --git a/app/assets/javascripts/app/pages/profile.js b/app/assets/javascripts/app/pages/profile.js
index 90c403761..efe2faa0f 100644
--- a/app/assets/javascripts/app/pages/profile.js
+++ b/app/assets/javascripts/app/pages/profile.js
@@ -24,22 +24,18 @@ app.pages.Profile = app.views.Base.extend({
initialize : function(options) {
this.personGUID = options.personId
- this.model = this.model || app.models.Profile.preloadOrFetch(this.personGUID)
+ this.model = this.model || app.models.Profile.preloadOrFetch(this.personGUID)
this.stream = options && options.stream || new app.models.Stream()
+ this.stream.preloadOrFetch().done(_.bind(this.pulsateNewPostControl, this));
+ this.stream.items.bind("remove", this.pulsateNewPostControl, this)
+
/* this needs to be fixed... used to be bound by this.model change event.
* will most likely result in spontaneous results :(
*
* note: defer to make sure the call stack is emptied before calling this, buying us a little more time */
_.defer(_.bind(this.setPageTitleAndBackground, this))
-
- /* binds for getting started pulsation */
- this.stream.bind("fetched", this.pulsateNewPostControl, this)
- this.stream.items.bind("remove", this.pulsateNewPostControl, this)
-
- this.stream.preloadOrFetch();
-
this.canvasView = new app.views.Canvas({ model : this.stream })
this.wallpaperForm = new app.forms.Wallpaper()
this.profileInfo = new app.views.ProfileInfo({ model : this.model })
diff --git a/app/assets/javascripts/app/pages/stream.js b/app/assets/javascripts/app/pages/stream.js
new file mode 100644
index 000000000..78cc8c5d3
--- /dev/null
+++ b/app/assets/javascripts/app/pages/stream.js
@@ -0,0 +1,23 @@
+app.views.NewStream = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMixin, {
+ initialize: function(){
+ this.stream = this.model
+ this.collection = this.stream.items
+ this.postClass = app.views.SmallFrame
+ this.setupInfiniteScroll()
+ }
+}));
+
+app.pages.Stream = app.views.Base.extend({
+ templateName : "stream",
+
+ subviews : {
+ "#stream-content" : "streamView"
+ },
+
+ initialize : function(){
+ this.stream = this.model = new app.models.Stream()
+ this.stream.preloadOrFetch();
+
+ this.streamView = new app.views.NewStream({ model : this.stream })
+ }
+});
diff --git a/app/assets/javascripts/app/router.js b/app/assets/javascripts/app/router.js
index 4999bc155..dcebdc820 100644
--- a/app/assets/javascripts/app/router.js
+++ b/app/assets/javascripts/app/router.js
@@ -1,44 +1,35 @@
app.Router = Backbone.Router.extend({
routes: {
- "activity": "stream",
- "stream": "stream",
-
- "participate": "stream",
- "explore": "stream",
-
- "aspects": "stream",
- "aspects:query": "stream",
-
- "commented": "stream",
- "liked": "stream",
- "mentions": "stream",
-
+ //new hotness
+ "stream?ex=true": 'newStream',
"people/:id?ex=true": "newProfile",
- "people/:id": "profile",
- "u/:name": "profile",
-
- "people/:id/photos": "photos",
- "followed_tags": "stream",
- "tags/:name": "stream",
-
"posts/new" : "composer",
"posts/:id": "singlePost",
"posts/:id/next": "siblingPost",
"posts/:id/previous": "siblingPost",
-
"p/:id": "singlePost",
- "framer": "framer"
+ "framer": "framer",
+
+ //oldness
+ "activity": "stream",
+ "stream": "stream",
+ "participate": "stream",
+ "explore": "stream",
+ "aspects": "stream",
+ "aspects:query": "stream",
+ "commented": "stream",
+ "liked": "stream",
+ "mentions": "stream",
+ "followed_tags": "stream",
+ "tags/:name": "stream",
+ "people/:id/photos": "photos",
+
+ "people/:id": "profile",
+ "u/:name": "profile"
},
- siblingPost : function(){ //next or previous
- var post = new app.models.Post();
- post.bind("change", setPreloadAttributesAndNavigate)
- post.fetch({url : window.location})
-
- function setPreloadAttributesAndNavigate(){
- window.preloads.post = post.attributes
- app.router.navigate(post.url(), {trigger:true, replace: true})
- }
+ newStream : function() {
+ this.renderPage(function(){ return new app.pages.Stream()});
},
newProfile : function(personId) {
@@ -57,10 +48,25 @@ app.Router = Backbone.Router.extend({
this.renderPage(function(){ return new app.pages.PostViewer({ id: id })});
},
- profile : function(page) {
- this.stream()
+ siblingPost : function(){ //next or previous
+ var post = new app.models.Post();
+ post.bind("change", setPreloadAttributesAndNavigate)
+ post.fetch({url : window.location})
+
+ function setPreloadAttributesAndNavigate(){
+ window.preloads.post = post.attributes
+ app.router.navigate(post.url(), {trigger:true, replace: true})
+ }
},
+ renderPage : function(pageConstructor){
+ app.page && app.page.unbind && app.page.unbind() //old page might mutate global events $(document).keypress, so unbind before creating
+ app.page = pageConstructor() //create new page after the world is clean (like that will ever happen)
+ $("#container").html(app.page.render().el)
+ },
+
+ //below here is oldness
+
stream : function(page) {
app.stream = new app.models.Stream();
app.stream.fetch();
@@ -73,22 +79,14 @@ app.Router = Backbone.Router.extend({
$('#selected_aspect_contacts .content').html(streamFacesView.render().el);
},
+ profile : function(page) {
+ this.stream()
+ },
+
photos : function() {
app.photos = new app.models.Stream([], {collection: app.collections.Photos});
app.page = new app.views.Photos({model : app.photos});
-
-
$("#main_stream").html(app.page.render().el);
- },
-
- isExperimental : function(query) {
- return query.search("ex=true") != -1
- },
-
- renderPage : function(pageConstructor){
- app.page && app.page.unbind && app.page.unbind() //old page might mutate global events $(document).keypress, so unbind before creating
- app.page = pageConstructor() //create new page after the world is clean (like that will ever happen)
- $("#container").html(app.page.render().el)
}
});
diff --git a/app/assets/javascripts/app/views.js b/app/assets/javascripts/app/views.js
index b38555425..503b0d431 100644
--- a/app/assets/javascripts/app/views.js
+++ b/app/assets/javascripts/app/views.js
@@ -76,8 +76,8 @@ app.views.Base = Backbone.View.extend({
// Mixin to render a collection that fetches more via infinite scroll, for a view that has no template.
// Requires:
-// a stream model, bound as this.stream
-// a stream's posts, bound as this.collection
+// a stream model, assigned to this.stream
+// a stream's posts, assigned to this.collection
// a postClass to be declared
// a #paginate div in the layout
// a call to setupInfiniteScroll
@@ -115,6 +115,17 @@ app.views.infiniteScrollMixin = {
$(window).unbind("scroll");
},
+ renderTemplate : function(){
+ this.renderInitialPosts()
+ },
+
+ renderInitialPosts : function(){
+ this.$el.empty()
+ this.stream.items.each(_.bind(function(post){
+ this.$el.append(this.createPostView(post).render().el);
+ }, this))
+ },
+
fetchAndshowLoader : function(){
if(this.stream.isFetching()) { return false }
this.stream.fetch()
diff --git a/app/assets/javascripts/app/views/canvas_frame.js b/app/assets/javascripts/app/views/canvas_frame.js
new file mode 100644
index 000000000..5f8ab9589
--- /dev/null
+++ b/app/assets/javascripts/app/views/canvas_frame.js
@@ -0,0 +1,33 @@
+//= require ./small_frame
+
+app.views.CanvasFrame = app.views.SmallFrame.extend({
+
+ SINGLE_COLUMN_WIDTH : 265,
+ DOUBLE_COLUMN_WIDTH : 560,
+
+ adjustedImageHeight : function() {
+ if(!(this.model.get("photos") || [])[0]) { return }
+
+ var modifiers = [this.dimensionsClass(), this.colorClass()].join(' ')
+ , width;
+
+ /* mobile width
+ *
+ * currently does not re-calculate on orientation change */
+ if($(window).width() <= 767) {
+ width = $(window).width();
+ }
+
+ var firstPhoto = this.model.get("photos")[0]
+ , width = width || (modifiers.search("x2") != -1 ? this.DOUBLE_COLUMN_WIDTH : this.SINGLE_COLUMN_WIDTH)
+ , ratio = width / firstPhoto.dimensions.width;
+
+ return(ratio * firstPhoto.dimensions.height)
+ },
+
+ presenter : function(){
+ return _.extend(this.smallFramePresenter(), {
+ adjustedImageHeight : this.adjustedImageHeight()
+ })
+ }
+});
diff --git a/app/assets/javascripts/app/views/canvas_view.js b/app/assets/javascripts/app/views/canvas_view.js
index d5e004ee2..6a6df3b17 100644
--- a/app/assets/javascripts/app/views/canvas_view.js
+++ b/app/assets/javascripts/app/views/canvas_view.js
@@ -2,15 +2,13 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
initialize: function(){
this.stream = this.model
this.collection = this.stream.items
- this.postClass = app.views.SmallFrame
+ this.postClass = app.views.CanvasFrame
this.setupInfiniteScroll()
this.stream.bind("reLayout", this.reLayout, this)
this.stream.bind("fetched", this.triggerRelayoutAfterImagesLoaded, this)
},
renderTemplate : function() {
- this.$el.empty()
-
if(this.stream.items.isEmpty()){
var message
, person = app.page.model
@@ -23,9 +21,7 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
this.$el.html("" + message + "
")
} else {
- this.stream.items.each(_.bind(function(post){
- this.$el.append(this.createPostView(post).render().el);
- }, this))
+ this.renderInitialPosts()
}
//needs to be deferred so it happens after html rendering finishes
diff --git a/app/assets/javascripts/app/views/small_frame.js b/app/assets/javascripts/app/views/small_frame.js
index 4ea26f4de..0ee916c52 100644
--- a/app/assets/javascripts/app/views/small_frame.js
+++ b/app/assets/javascripts/app/views/small_frame.js
@@ -1,10 +1,6 @@
//= require "./post_view"
app.views.SmallFrame = app.views.Post.extend({
-
- SINGLE_COLUMN_WIDTH : 265,
- DOUBLE_COLUMN_WIDTH : 560,
-
className : "canvas-frame",
templateName : "small-frame",
@@ -24,11 +20,14 @@ app.views.SmallFrame = app.views.Post.extend({
},
presenter : function(){
+ return this.smallFramePresenter()
+ },
+
+ smallFramePresenter : function(){
//todo : we need to have something better for small frame text, probably using the headline() scenario.
return _.extend(this.defaultPresenter(),
{
text : this.model && app.helpers.textFormatter(this.model.get("text"), this.model),
- adjustedImageHeight : this.adjustedImageHeight(),
likesCount : this.model.interactions.likesCount(),
resharesCount : this.model.interactions.resharesCount(),
commentsCount : this.model.interactions.commentsCount()
@@ -75,26 +74,6 @@ app.views.SmallFrame = app.views.Post.extend({
return (this.model.get("favorite")) ? "x2 width height" : ""
},
- adjustedImageHeight : function() {
- if(!(this.model.get("photos") || [])[0]) { return }
-
- var modifiers = [this.dimensionsClass(), this.colorClass()].join(' ')
- , width;
-
- /* mobile width
- *
- * currently does not re-calculate on orientation change */
- if($(window).width() <= 767) {
- width = $(window).width();
- }
-
- var firstPhoto = this.model.get("photos")[0]
- , width = width || (modifiers.search("x2") != -1 ? this.DOUBLE_COLUMN_WIDTH : this.SINGLE_COLUMN_WIDTH)
- , ratio = width / firstPhoto.dimensions.width;
-
- return(ratio * firstPhoto.dimensions.height)
- },
-
favoritePost : function(evt) {
if(evt) {
/* follow links instead of faving the targeted post */
@@ -125,4 +104,4 @@ app.views.SmallFrame = app.views.Post.extend({
window.preloads.post = this.model.attributes
app.router.navigate(this.model.url(), true)
}
-});
\ No newline at end of file
+});
diff --git a/app/assets/stylesheets/new_styles/_canvas.scss b/app/assets/stylesheets/new_styles/_canvas.scss
index 56093fbce..ed49d95fc 100644
--- a/app/assets/stylesheets/new_styles/_canvas.scss
+++ b/app/assets/stylesheets/new_styles/_canvas.scss
@@ -315,8 +315,6 @@
background-color: black;
}
- img { max-height: 100% }
-
&.has-text{
img {
//image container background is black, lowering opacity darkens image
@@ -338,6 +336,21 @@
}
}
+/* new stream overrides */
+#stream {
+ color : #fff;
+ background-color : #333;
+}
+
+#stream-content {
+ .canvas-frame {
+ width: 100%;
+ .content {
+ width: 100%;
+ }
+ }
+}
+
/* responsive */
@media (max-width: 767px) {
body {
@@ -357,4 +370,4 @@
width : auto !important;
}
}
-}
\ No newline at end of file
+}
diff --git a/app/assets/templates/small-frame.jst.hbs b/app/assets/templates/small-frame.jst.hbs
index 8c07e7310..100d14c74 100644
--- a/app/assets/templates/small-frame.jst.hbs
+++ b/app/assets/templates/small-frame.jst.hbs
@@ -6,7 +6,7 @@
{{#if photos}}
{{#each photos}}
-
+
{{/each}}