From 570de98365e7e6ac326e09bc3db5f9525541ae8f Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Tue, 24 Apr 2012 16:35:04 -0700
Subject: [PATCH] animate isotope! and inject image height in relation to
ratio for quicker organization. [ci skip]
---
.../javascripts/app/views/canvas_view.js | 31 +++++++++++--------
.../javascripts/app/views/small_frame.js | 23 ++++++++++++--
app/assets/stylesheets/new-templates.css.scss | 4 ++-
.../stylesheets/new_styles/_canvas.scss | 5 ---
.../new_styles/_isotope_transitions.scss | 25 +++++++++++++++
app/assets/templates/small-frame.jst.hbs | 2 +-
.../app/views/small_frame_view_spec.js | 21 +++++++++++--
7 files changed, 86 insertions(+), 25 deletions(-)
create mode 100644 app/assets/stylesheets/new_styles/_isotope_transitions.scss
diff --git a/app/assets/javascripts/app/views/canvas_view.js b/app/assets/javascripts/app/views/canvas_view.js
index efa4d923dc..d82b7b5d0c 100644
--- a/app/assets/javascripts/app/views/canvas_view.js
+++ b/app/assets/javascripts/app/views/canvas_view.js
@@ -11,26 +11,17 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
this.stream.items.each(_.bind(function(post){
this.$el.append(this.createPostView(post).render().el);
}, this))
- //needs to be defered so it happens after html rendering finishes
- _.defer(_.bind(this.mason, this))
- // Images load slowly, which setting the height of the dom elements, use these hax for the momment to reLayout the page
- // ever little bit for a while after loading
- // gross hax, bro ;-p
- _.delay(_.bind(this.reLayout, this), 200)
- _.delay(_.bind(this.reLayout, this), 500)
- _.delay(_.bind(this.reLayout, this), 1000)
- _.delay(_.bind(this.reLayout, this), 2000)
- _.delay(_.bind(this.reLayout, this), 3000)
- _.delay(_.bind(this.reLayout, this), 4000)
- _.delay(_.bind(this.reLayout, this), 5000)
+ //needs to be deferred so it happens after html rendering finishes
+ _.delay(_.bind(this.mason, this), 0)
+
+ this.triggerReLayouts()
},
addPostView : function(post) {
_.defer(_.bind(function(){ this.$el.isotope("insert", this.createPostView(post).render().$el) }, this))
},
-
mason : function() {
this.$el.isotope({
itemSelector : '.canvas-frame',
@@ -42,5 +33,19 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
reLayout : function(){
this.$el.isotope("reLayout")
+ },
+
+ triggerReLayouts : function(){
+ // Images load slowly, which setting the height of the dom elements, use these hax for the momment to reLayout the page
+ // ever little bit for a while after loading
+ // gross hax, bro ;-p
+
+ _.delay(_.bind(this.reLayout, this), 200)
+ _.delay(_.bind(this.reLayout, this), 500)
+ _.delay(_.bind(this.reLayout, this), 1000)
+ _.delay(_.bind(this.reLayout, this), 2000)
+ _.delay(_.bind(this.reLayout, this), 3000)
+ _.delay(_.bind(this.reLayout, this), 4000)
+ _.delay(_.bind(this.reLayout, this), 5000)
}
}));
diff --git a/app/assets/javascripts/app/views/small_frame.js b/app/assets/javascripts/app/views/small_frame.js
index 75366e8ca0..0f29565d14 100644
--- a/app/assets/javascripts/app/views/small_frame.js
+++ b/app/assets/javascripts/app/views/small_frame.js
@@ -1,5 +1,8 @@
app.views.SmallFrame = app.views.Base.extend({
+ SINGLE_COLUMN_WIDTH : 265,
+ DOUBLE_COLUMN_WIDTH : 560,
+
className : "canvas-frame",
templateName : "small-frame",
@@ -20,7 +23,12 @@ app.views.SmallFrame = app.views.Base.extend({
presenter : 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)})
+ {text : this.model && app.helpers.textFormatter(this.model.get("text"), this.model),
+ adjustedImageHeight : this.adjustedImageHeight()})
+ },
+
+ initialize : function() {
+ this.$el.addClass([this.dimensionsClass(), this.colorClass(), this.frameClass()].join(' '))
},
postRenderTemplate : function() {
@@ -54,11 +62,22 @@ app.views.SmallFrame = app.views.Base.extend({
return [baseClass, textClass, "sticky-note"].join(" ")
},
-
dimensionsClass : function() {
return (this.model.get("favorite")) ? "x2 width height" : ""
},
+ adjustedImageHeight : function() {
+ if(!this.model.get("photos")[0]) { return }
+
+ var modifiers = [this.dimensionsClass(), this.colorClass()].join(' ')
+
+ var firstPhoto = this.model.get("photos")[0]
+ , 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) { evt.stopImmediatePropagation(); evt.preventDefault() }
diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss
index c221fbc592..9676030ffc 100644
--- a/app/assets/stylesheets/new-templates.css.scss
+++ b/app/assets/stylesheets/new-templates.css.scss
@@ -14,5 +14,7 @@
/* font overrides */
@import 'new_styles/typography';
+/* isotope */
+@import 'new_styles/isotope_transitions';
-@include video-overlay();
+@include video-overlay();
\ 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 9c1baf8503..4b19c68500 100644
--- a/app/assets/stylesheets/new_styles/_canvas.scss
+++ b/app/assets/stylesheets/new_styles/_canvas.scss
@@ -259,13 +259,8 @@ body {
}
&.wallpaper {
- .content{
- display: table;
- }
-
.image-container {
background-color: black;
- display: table-cell;
}
img { max-height: 100% }
diff --git a/app/assets/stylesheets/new_styles/_isotope_transitions.scss b/app/assets/stylesheets/new_styles/_isotope_transitions.scss
new file mode 100644
index 0000000000..b96f3e573a
--- /dev/null
+++ b/app/assets/stylesheets/new_styles/_isotope_transitions.scss
@@ -0,0 +1,25 @@
+.isotope,
+.isotope .isotope-item {
+/* change duration value to whatever you like */
+ -webkit-transition-duration: 0.4s;
+ -moz-transition-duration: 0.4s;
+ -ms-transition-duration: 0.4s;
+ -o-transition-duration: 0.4s;
+ transition-duration: 0.4s;
+}
+
+.isotope {
+ -webkit-transition-property: height, width;
+ -moz-transition-property: height, width;
+ -ms-transition-property: height, width;
+ -o-transition-property: height, width;
+ transition-property: height, width;
+}
+
+.isotope .isotope-item {
+ -webkit-transition-property: -webkit-transform, opacity;
+ -moz-transition-property: -moz-transform, opacity;
+ -ms-transition-property: -ms-transform, opacity;
+ -o-transition-property: top, left, opacity;
+ transition-property: transform, opacity;
+}
diff --git a/app/assets/templates/small-frame.jst.hbs b/app/assets/templates/small-frame.jst.hbs
index 9e1f3a639e..6406e917a0 100644
--- a/app/assets/templates/small-frame.jst.hbs
+++ b/app/assets/templates/small-frame.jst.hbs
@@ -5,7 +5,7 @@
{{#if photos}}
<div class="image-container">
{{#each photos}}
- <img src="{{sizes.large}}" />
+ <img src="{{sizes.large}}" style="height:{{../adjustedImageHeight}}px;" />
{{/each}}
</div>
{{/if}}
diff --git a/spec/javascripts/app/views/small_frame_view_spec.js b/spec/javascripts/app/views/small_frame_view_spec.js
index 88c4862ab4..588bbbfd0a 100644
--- a/spec/javascripts/app/views/small_frame_view_spec.js
+++ b/spec/javascripts/app/views/small_frame_view_spec.js
@@ -2,7 +2,13 @@ describe("app.views.SmallFrame", function(){
beforeEach(function(){
this.model = factory.post({
photos : [
- factory.photoAttrs({sizes : {large : "http://tieguy.org/me.jpg"}}),
+ factory.photoAttrs({sizes : {
+ large : "http://tieguy.org/me.jpg"
+ },
+ dimensions : {
+ width : 100,
+ height : 200 }
+ }),
factory.photoAttrs({sizes : {large : "http://whatthefuckiselizabethstarkupto.com/none_knows.gif"}}) //SIC
],
@@ -30,8 +36,17 @@ describe("app.views.SmallFrame", function(){
})
})
- describe("photos", function() {
- // ratio pending...
+ context("images", function() {
+ it("appends the correct dimensions to an image, given a model with an image", function(){
+ var firstPhoto = this.model.get("photos")[0]
+
+ this.view.SINGLE_COLUMN_WIDTH = 100
+ expect(this.view.adjustedImageHeight(firstPhoto)).toBe(200)
+ this.view.SINGLE_COLUMN_WIDTH = 200
+ expect(this.view.adjustedImageHeight(firstPhoto)).toBe(400)
+ this.view.SINGLE_COLUMN_WIDTH = 50
+ expect(this.view.adjustedImageHeight(firstPhoto)).toBe(100)
+ })
})
describe("redirecting to a post", function(){
--
GitLab