Browse files

better image resizer and jquery masonry

  • Loading branch information...
1 parent 334bd5a commit afb4aff9c944656239ad674cfe6ef58dff562fca @maxogden committed Jul 19, 2011
View
2 app.js
@@ -46,7 +46,7 @@ ddoc.views = {
var _ = require( "views/lib/underscore" );
if (doc._attachments) {
_.each(_.keys(doc._attachments), function(name) {
- if (name.match(/jpe?g|png/)) {
+ if (name.match(/jpe?g|png/ig)) {
emit([doc.created_at, doc.profile.name], _.extend({}, doc._attachments[name], {filename: name}));
}
})
View
26 attachments/pages/monocles.html
@@ -12,23 +12,18 @@
<script type="text/javascript" src="script/lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="script/lib/jquery.fileupload.js"></script>
<script type="text/javascript" src="script/lib/jquery.fileupload-ui.js"></script>
- <script type="text/javascript" src="script/lib/jiverscripts/compat/object.js"></script>
- <script type="text/javascript" src="script/lib/jiverscripts/compat/array.js"></script>
- <script type="text/javascript" src="script/lib/jiverscripts/conc/next_tick.js"></script>
- <script type="text/javascript" src="script/lib/jiverscripts/conc/observable.js"></script>
- <script type="text/javascript" src="script/lib/jiverscripts/conc/promise.js"></script>
<script type="text/javascript" src="script/lib/jquery.infieldlabel.js"></script>
<script type="text/javascript" src="/_utils/script/sha1.js"></script>
<script type="text/javascript" src="/_utils/script/json2.js"></script>
<script type="text/javascript" src="script/lib/jquery.couch2.js"></script>
<script type="text/javascript" src="script/lib/jquery.mustache.js"></script>
+ <script type="text/javascript" src="script/lib/jquery.masonry.min.js"></script>
<script type="text/javascript" src="script/lib/sammy-0.6.3.min.js"></script>
<script type="text/javascript" src="script/lib/microevent.js"></script>
<script type="text/javascript" src="script/lib/underscore.js"></script>
<script type="text/javascript" src="script/lib/md5.js"></script>
<script type="text/javascript" src="script/lib/jquery.cluetip.js"></script>
<script type="text/javascript" src="script/lib/jquery.timeago.js"></script>
- <script type="text/javascript" src="script/lib/models/comments.js"></script>
<!-- and, finally -->
<script type="text/javascript" src="script/util.js"></script>
<script type="text/javascript" src="script/site.js"></script>
@@ -257,19 +252,12 @@ <h1 class="aspect-header"><a href="#">Activity Stream</a></h1>
</script>
<script type="text/mustache" id="imagesTemplate">
- <div class="span-19 last" id="items">
- <div id="main_stream" class="stream">
- {{#photos}}
- <div class="photo_attachments">
- <div class="key_photo">
- <a href="{{url}}">
- <img src="{{url}}" rel="{{name}}"/>
- </a>
- </div>
- <br />
- </div>
- {{/photos}}
- </div>
+ <div id="main_stream" class="stream">
+ {{#photos}}
+ <a class="image" href="{{url}}">
+ <img src="{{url}}" rel="{{name}}"/>
+ </a>
+ {{/photos}}
</div>
</script>
View
10 attachments/script/lib/jquery.masonry.min.js
@@ -0,0 +1,10 @@
+/**
+ * jQuery Masonry v2.0.110526
+ * A dynamic layout plugin for jQuery
+ * The flip-side of CSS Floats
+ * http://masonry.desandro.com
+ *
+ * Licensed under the MIT license.
+ * Copyright 2011 David DeSandro
+ */
+(function(a,b,c){var d=b.event,e;d.special.smartresize={setup:function(){b(this).bind("resize",d.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",d.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize",e&&clearTimeout(e),e=setTimeout(function(){jQuery.event.handle.apply(c,d)},b==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Mason=function(a,c){this.element=b(c),this._create(a),this._init()};var f=["position","height"];b.Mason.settings={isResizable:!0,isAnimated:!1,animationOptions:{queue:!1,duration:500},gutterWidth:0,isRTL:!1,isFitWidth:!1},b.Mason.prototype={_filterFindBricks:function(a){var b=this.options.itemSelector;return b?a.filter(b).add(a.find(b)):a},_getBricks:function(a){var b=this._filterFindBricks(a).css({position:"absolute"}).addClass("masonry-brick");return b},_create:function(c){this.options=b.extend(!0,{},b.Mason.settings,c),this.styleQueue=[],this.reloadItems();var d=this.element[0].style;this.originalStyle={};for(var e=0,g=f.length;e<g;e++){var h=f[e];this.originalStyle[h]=d[h]||null}this.element.css({position:"relative"}),this.horizontalDirection=this.options.isRTL?"right":"left",this.offset={};var i=b(document.createElement("div"));this.element.prepend(i),this.offset.y=Math.round(i.position().top),this.options.isRTL?(i.css({"float":"right",display:"inline-block"}),this.offset.x=Math.round(this.element.outerWidth()-i.position().left)):this.offset.x=Math.round(i.position().left),i.remove();var j=this;setTimeout(function(){j.element.addClass("masonry")},0),this.options.isResizable&&b(a).bind("smartresize.masonry",function(){j.resize()})},_init:function(a){this._getColumns("masonry"),this._reLayout(a)},option:function(a,c){b.isPlainObject(a)&&(this.options=b.extend(!0,this.options,a))},layout:function(a,c){var d,e,f,g,h,i;for(var j=0,k=a.length;j<k;j++){d=b(a[j]),e=Math.ceil(d.outerWidth(!0)/this.columnWidth),e=Math.min(e,this.cols);if(e===1)this._placeBrick(d,this.colYs);else{f=this.cols+1-e,g=[];for(i=0;i<f;i++)h=this.colYs.slice(i,i+e),g[i]=Math.max.apply(Math,h);this._placeBrick(d,g)}}var l={};l.height=Math.max.apply(Math,this.colYs)-this.offset.y,this.options.isFitWidth&&(l.width=this.cols*this.columnWidth-this.options.gutterWidth),this.styleQueue.push({$el:this.element,style:l});var m=this.isLaidOut?this.options.isAnimated?"animate":"css":"css",n=this.options.animationOptions,o;for(j=0,k=this.styleQueue.length;j<k;j++)o=this.styleQueue[j],o.$el[m](o.style,n);this.styleQueue=[],c&&c.call(a),this.isLaidOut=!0},_getColumns:function(){var a=this.options.isFitWidth?this.element.parent():this.element,b=a.width();this.columnWidth=this.options.columnWidth||this.$bricks.outerWidth(!0)||b,this.columnWidth+=this.options.gutterWidth,this.cols=Math.floor((b+this.options.gutterWidth)/this.columnWidth),this.cols=Math.max(this.cols,1)},_placeBrick:function(a,b){var c=Math.min.apply(Math,b),d=0;for(var e=0,f=b.length;e<f;e++)if(b[e]===c){d=e;break}var g={top:c};g[this.horizontalDirection]=this.columnWidth*d+this.offset.x,this.styleQueue.push({$el:a,style:g});var h=c+a.outerHeight(!0),i=this.cols+1-f;for(e=0;e<i;e++)this.colYs[d+e]=h},resize:function(){var a=this.cols;this._getColumns("masonry"),this.cols!==a&&this._reLayout()},_reLayout:function(a){var b=this.cols;this.colYs=[];while(b--)this.colYs.push(this.offset.y);this.layout(this.$bricks,a)},reloadItems:function(){this.$bricks=this._getBricks(this.element.children())},reload:function(a){this.reloadItems(),this._init(a)},appended:function(a,b,c){if(b){this._filterFindBricks(a).css({top:this.element.height()});var d=this;setTimeout(function(){d._appended(a,c)},1)}else this._appended(a,c)},_appended:function(a,b){var c=this._getBricks(a);this.$bricks=this.$bricks.add(c),this.layout(c,b)},remove:function(a){this.$bricks=this.$bricks.not(a),a.remove()},destroy:function(){this.$bricks.removeClass("masonry-brick").each(function(){this.style.position=null,this.style.top=null,this.style.left=null});var c=this.element[0].style;for(var d=0,e=f.length;d<e;d++){var g=f[d];c[g]=this.originalStyle[g]}this.element.unbind(".masonry").removeClass("masonry").removeData("masonry"),b(a).unbind(".masonry")}},b.fn.imagesLoaded=function(a){var b=this.find("img"),d=b.length,e="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",f=this,g=function(){--d<=0&&this.src!==e&&(a.call(f),b.unbind("load",g))};if(!d){a.call(this);return this}b.bind("load",g).each(function(){if(this.complete||this.complete===c){var a=this.src;this.src=e,this.src=a}});return this};var g=function(a){this.console&&console.error(a)};b.fn.masonry=function(a){if(typeof a=="string"){var c=Array.prototype.slice.call(arguments,1);this.each(function(){var d=b.data(this,"masonry");if(!d)g("cannot call methods on masonry prior to initialization; attempted to call method '"+a+"'");else{if(!b.isFunction(d[a])||a.charAt(0)==="_"){g("no such method '"+a+"' for masonry instance");return}d[a].apply(d,c)}})}else this.each(function(){var c=b.data(this,"masonry");c?(c.option(a||{}),c._init()):b.data(this,"masonry",new b.Mason(a,this))});return this}})(window,jQuery);
View
7 attachments/script/monocles.js
@@ -37,8 +37,7 @@ var monocles = function() {
return;
}
- var session = app.session,
- opts = {};
+ var session = app.session;
if ( session.userCtx.name ) {
fetchProfile( session ).then( function( profile ) {
@@ -50,11 +49,11 @@ var monocles = function() {
});
} else if ( util.isAdminParty( session.userCtx ) ) {
util.render( 'adminParty', 'account' );
- getPostsWithComments(opts);
+ getPostsWithComments();
} else {
util.render( 'loginButton', 'account' );
util.render( 'loggedOut', 'header' );
- getPostsWithComments(opts);
+ getPostsWithComments({ reload: true });
}
}
View
10 attachments/script/site.js
@@ -23,7 +23,7 @@ app.routes = {
monocles.fetchSession();
},
images: function() {
- couch.get('images').then(
+ couch.get('images?descending=true').then(
function( data ) {
var photos = _.map(data.rows, function( r ) {
return {
@@ -34,7 +34,6 @@ app.routes = {
util.render( 'images', 'content', {photos: photos} );
}
)
-
},
logout: function() {
couch.logout().then(function() {
@@ -47,7 +46,14 @@ app.routes = {
app.after = {
stream: function() {
+ $('#content').removeClass("wide");
monocles.decorateStream();
+ },
+ images: function() {
+ $('#content').addClass("wide");
+ $('main_stream').masonry({
+ itemSelector: '.image'
+ });
}
}
View
4 attachments/style/monocles.css
@@ -737,6 +737,10 @@ h1.big_text {
font-size: 12px;
font-weight: normal; }
+.wide {
+ width: 100%;
+}
+
#content_bottom {
position: relative;
line-height: 36px;
View
43 processors/imageresize.js
@@ -20,25 +20,26 @@ var db = "http://admin:admin@localhost:5984/monocles"
;
follow({db:db, include_docs:true}, function(error, change) {
- if (error || change.deleted) return;
+ if (error || change.deleted || !("doc" in change)) return;
+ if (!("_attachments" in change.doc)) return;
+
ensureCommit().then( function() {
- getDoc(db + "/" + change.doc._id).then(function(doc) {
- var attachments = doc._attachments
- , needsResize = []
- ;
+ var doc = change.doc;
+ var attachments = doc._attachments
+ , needsResize = []
+ ;
- if (!doc.attachment_meta) doc.attachment_meta = {};
- if ( ( doc._id.substr(0,7) === "_design" ) || ( ! attachments ) ) return;
+ if (!doc.attachment_meta) doc.attachment_meta = {};
+ if ( ( doc._id.substr(0,7) === "_design" ) || ( ! attachments ) ) return;
- _.each(_.keys(attachments), function(name) {
- var converted = false;
- if (doc.attachment_meta && doc.attachment_meta[name]) converted = doc.attachment_meta[name].converted;
- if ( ( _.include(_.keys(doc), "message") ) && ( !converted ) && ( name.match(/jpe?g|png/ig) ) ) needsResize.push(name);
- })
-
- if (needsResize.length > 0) sys.puts('Resizing ' + needsResize.length + " from doc " + doc._id + "...");
- resize(needsResize, db + "/" + doc._id, doc);
+ _.each(_.keys(attachments), function(name) {
+ var converted = false;
+ if (doc.attachment_meta && doc.attachment_meta[name]) converted = doc.attachment_meta[name].converted;
+ if ( ( _.include(_.keys(doc), "message") ) && ( !converted ) && ( name.match(/jpe?g|png/ig) ) ) needsResize.push(name);
})
+
+ if (needsResize.length > 0) sys.puts('Resizing ' + needsResize.length + " from doc " + doc._id + "...");
+ resize(needsResize, db + "/" + doc._id, doc);
})
})
@@ -55,18 +56,6 @@ function ensureCommit() {
return dfd.promise;
}
-function getDoc(uri) {
- var dfd = deferred();
- request({uri: uri, headers:h},
- function(err, resp, body) {
- if (err || resp.statusCode > 299) throw new Error("Could not download doc\n"+body);
- var doc = JSON.parse(body);
- dfd.resolve(doc);
- }
- )
- return dfd.promise;
-}
-
function download(uri) {
var dfd = deferred();
var filename = unescape(url.parse(uri).pathname.split("/").pop());

0 comments on commit afb4aff

Please sign in to comment.