masonry-rails 0.1.0 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/README.md CHANGED
@@ -6,6 +6,18 @@ Using fork from [masonry](https://github.com/kristianmandrup/masonry)
6
6
 
7
7
  See more Masonry info at [masonry README](https://github.com/desandro/masonry/README.mdown)
8
8
 
9
+ This gem includes:
10
+
11
+ * jquery masonry
12
+ * jquery imagesLoaded
13
+ * jquery infinitescroll
14
+ * jquery event drag
15
+
16
+ For random content generation
17
+
18
+ * box maker
19
+ * loremimages
20
+
9
21
  ## Usage
10
22
 
11
23
  In Gemfile
@@ -14,12 +26,22 @@ In Gemfile
14
26
 
15
27
  ### CSS
16
28
 
29
+ You can include stylesheets extracted from the masonry examples directly:
30
+
17
31
  Manifest `application.css` file:
18
32
 
19
33
  ```css
20
- *= require 'masonry/style'
34
+ *= require 'masonry/basic'
35
+ *= require 'masonry/centered'
36
+ *= require 'masonry/fluid'
37
+ *= require 'masonry/gutters'
38
+ *= require 'masonry/infinitescroll'
39
+ *= require 'masonry/right-to-left'
40
+ *= require 'masonry/transitions'
21
41
  ```
22
42
 
43
+ Use these stylesheets as a base in order to play around with different effects... :)
44
+
23
45
  ### Javascript
24
46
 
25
47
  ```javascript
@@ -28,14 +50,351 @@ Manifest `application.css` file:
28
50
 
29
51
  Optional
30
52
 
31
- // require masonry/box-maker
53
+ ```javascript
54
+ // require masonry/jquery.event-drag
55
+ // require masonry/jquery.imagesloaded.min
56
+ // require masonry/jquery.infinitescroll.min
32
57
  // require masonry/modernizr-transitions
33
- // require masonry/jquery.infinitescroll
34
- // require masonry/jquery.event.drag-2.2
58
+ ```
59
+
60
+ Content generation helpers:
35
61
 
62
+ ```javascript
63
+ // require masonry/box-maker
64
+ // require masonry/jquery.loremimages.min
65
+ ``
36
66
 
37
67
  See examples on [masonry](http://masonry.desandro.com/docs/intro.html) or [github](https://github.com/desandro/masonry)
38
68
 
69
+ ### Setup
70
+
71
+ We will use the _infinite scroll_ example for a full walkthrough of how to setup and use Masonry. We add the classes `transitions-enabled`and `infinite-scroll` to the container in order to enable these two effects simultaneously. Look further down in this guide to see configurations of other effects that canbe combined ;)
72
+
73
+ *Main container*
74
+
75
+ ```html
76
+ <div id="container" class="transitions-enabled infinite-scroll clearfix">
77
+
78
+ <div class="box col3">
79
+
80
+ <div class="box col1">
81
+ <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
82
+ </div>
83
+
84
+ <div class="box col2">
85
+ <p>
86
+ <a href="http://www.flickr.com/photos/nemoorange/3319714470/" title="Whitlow's on Wilson by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3008/3319714470_c05a5cb5a8_m.jpg" alt="Whitlow's on Wilson" /></a>
87
+ </p>
88
+ </div>
89
+ ...
90
+ </div>
91
+ ```
92
+
93
+ ```css
94
+ #container {
95
+ background: #FFF;
96
+ padding: 5px;
97
+ margin-bottom: 20px;
98
+ border-radius: 5px;
99
+ clear: both;
100
+ -webkit-border-radius: 5px;
101
+ -moz-border-radius: 5px;
102
+ border-radius: 5px;
103
+ }
104
+
105
+ .clearfix:before, .clearfix:after { content: ""; display: table; }
106
+ .clearfix:after { clear: both; }
107
+ .clearfix { zoom: 1; }
108
+ ```
109
+
110
+ Configuring the different brick sizes:
111
+
112
+ ```css
113
+ .col1 { width: 80px; }
114
+ .col2 { width: 180px; }
115
+ .col3 { width: 280px; }
116
+ .col4 { width: 380px; }
117
+ .col5 { width: 480px; }
118
+
119
+ .col1 img { max-width: 80px; }
120
+ .col2 img { max-width: 180px; }
121
+ .col3 img { max-width: 280px; }
122
+ .col4 img { max-width: 380px; }
123
+ .col5 img { max-width: 480px; }
124
+ ```
125
+
126
+ ## Gutters
127
+
128
+ The `gutterWidth` option adds additional spacing between columns, but not on the outer sides of the container.
129
+
130
+ Example:
131
+
132
+ ```javascript
133
+ $(function(){
134
+
135
+ $('#container').masonry({
136
+ itemSelector: '.box',
137
+ columnWidth: 100,
138
+ gutterWidth: 40
139
+ });
140
+
141
+ });
142
+ ```
143
+
144
+ Add class `has-gutters` to container for this effect.
145
+
146
+ ## Right to left
147
+
148
+ Enable right-to-layout by setting the `isRTL` option to true.
149
+
150
+ See `masonry/right-to-left.css`
151
+
152
+ ```javascript
153
+ $(function(){
154
+
155
+ $('#container').masonry({
156
+ itemSelector: '.box',
157
+ columnWidth: 100,
158
+ isAnimated: !Modernizr.csstransitions,
159
+ isRTL: true
160
+ });
161
+
162
+ });
163
+ ```
164
+
165
+ Add class `rtl` to container for this effect ;)
166
+
167
+ ## Centered
168
+
169
+ This layout is centered by setting `isFitWidth: true` and adding necessary CSS position styles `margin: 0 auto;`.
170
+
171
+ See `masonry/centered.css`
172
+
173
+ ```css
174
+ .centered { margin: 0 auto; }
175
+ ```
176
+
177
+ ```html
178
+ <div id="container" class="transitions-enabled centered clearfix masonry">
179
+ ...
180
+ </div>
181
+ ```
182
+
183
+ ```javascript
184
+ $(function(){
185
+ $('#container').masonry({
186
+ itemSelector: '.box',
187
+ columnWidth: 200,
188
+ isAnimated: !Modernizr.csstransitions,
189
+ isFitWidth: true
190
+ });
191
+
192
+ });
193
+ ```
194
+
195
+ ## Fluid
196
+
197
+ For fluid or responsive layouts, where the width of the column is a percentage of the container's width, you can pass in a function for `columnWidth`.
198
+
199
+ ```javascript
200
+ $('#container').masonry({
201
+ itemSelector: '.box',
202
+ // set columnWidth a fraction of the container width
203
+ columnWidth: function( containerWidth ) {
204
+ return containerWidth / 5;
205
+ }
206
+ });
207
+ ```
208
+
209
+ Use `masonry/fluid.css` for a head start!
210
+
211
+ ## Animated transitions
212
+
213
+ Transitions used in examples
214
+
215
+ Note: use `masonry/transitions.css` for a head start!
216
+
217
+ Noice the class names: `.transitions-enabled`, `masonry` and `.masonry-brick`.
218
+
219
+ ```css
220
+ .transitions-enabled.masonry,
221
+ .transitions-enabled.masonry .masonry-brick {
222
+ -webkit-transition-duration: 0.7s;
223
+ -moz-transition-duration: 0.7s;
224
+ -ms-transition-duration: 0.7s;
225
+ -o-transition-duration: 0.7s;
226
+ transition-duration: 0.7s;
227
+ }
228
+
229
+ .transitions-enabled.masonry {
230
+ -webkit-transition-property: height, width;
231
+ -moz-transition-property: height, width;
232
+ -ms-transition-property: height, width;
233
+ -o-transition-property: height, width;
234
+ transition-property: height, width;
235
+ }
236
+
237
+ .transitions-enabled.masonry .masonry-brick {
238
+ -webkit-transition-property: left, right, top;
239
+ -moz-transition-property: left, right, top;
240
+ -ms-transition-property: left, right, top;
241
+ -o-transition-property: left, right, top;
242
+ transition-property: left, right, top;
243
+ }
244
+
245
+
246
+ /* disable transitions on container */
247
+ .transitions-enabled.infinite-scroll.masonry {
248
+ -webkit-transition-property: none;
249
+ -moz-transition-property: none;
250
+ -ms-transition-property: none;
251
+ -o-transition-property: none;
252
+ transition-property: none;
253
+ }
254
+ ```
255
+
256
+ Note: You can use compass and sass to auto-generate these [transitions](http://compass-style.org/reference/compass/css3/transition/) for all browser prefixes ;)
257
+
258
+ *CSS transitions*
259
+
260
+ Alternatively, you can rely on CSS3 transitions to animate layout rearrangements. Enabling transitions is recommended, as they provide for better browser performance over jQuery animation.
261
+
262
+ In your CSS, add transition styles below. The Masonry plugin will add a class of masonry to the container after the first arrangement so transitions can be applied afterward. Item elements will have a class of masonry-brick added.
263
+
264
+ *Animate via Modernizr*
265
+
266
+ To get the best of both worlds, you can use *Modernizr* to detect browser support for CSS transitions. Add the transitions styles above, then enable animated based on Modernizr’s detected support for transitions. This will allow browsers that support *CSS transitions* to use them, and browsers without support to use *jQuery animation*.
267
+
268
+ ```javascript
269
+ $('#container').masonry({
270
+ // options...
271
+ isAnimated: !Modernizr.csstransitions
272
+ });
273
+ ```
274
+
275
+ Use the [modernizr-rails](https://github.com/kristianmandrup/modernizr-rails) gem to include *Modernizr* ;)
276
+
277
+ Or simply include `masonry/modernizr-transitions` in your javascript manifest.
278
+
279
+ ## Infinite scroll
280
+
281
+ Use with [infinite-scroll](https://github.com/paulirish/infinite-scroll) which is included for convenience. All credits & license rights (MIT) to Paul Irish.
282
+
283
+ ```javascript
284
+ // require masonry/jquery.infinitescroll.min
285
+ ```
286
+
287
+ See [infinite-scroll-jquery-plugin](http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/) for configuration info.
288
+
289
+ Also see [demo](http://masonry.desandro.com/demos/infinite-scroll.html)
290
+ and [source](view-source:http://masonry.desandro.com/demos/infinite-scroll.html)
291
+
292
+
293
+ *Navigation* for infinite scroll
294
+
295
+ Put a `<nav>` under your main container. This will trigger loading the next page!
296
+
297
+ ```html
298
+ <nav id="page-nav">
299
+ <a href="../pages/2.html"></a>
300
+ </nav>
301
+ ```
302
+
303
+ The link should load in a page containing elements that match `.block`
304
+
305
+ ```html
306
+ <div class="box col3">
307
+ <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
308
+ <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
309
+ <ul>
310
+ <li>Lacus a ultrices sagittis</li>
311
+ <li>Democratis</li>
312
+ <li>Plummus</li>
313
+ </ul>
314
+ </div>
315
+ ```
316
+
317
+ These will be appended at the bottom of the `#container`. If you are using search with paging, be sure to update the page counter after each load somehow.
318
+
319
+ ```javascript
320
+ $(function(){
321
+
322
+ var $container = $('#container');
323
+
324
+ $container.imagesLoaded(function(){
325
+ $container.masonry({
326
+ itemSelector: '.box',
327
+ columnWidth: 100
328
+ });
329
+ });
330
+
331
+ $container.infinitescroll({
332
+ navSelector : '#page-nav', // selector for the paged navigation
333
+ nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
334
+ itemSelector : '.box', // selector for all items you'll retrieve
335
+ loading: {
336
+ finishedMsg: 'No more pages to load.',
337
+ img: 'http://i.imgur.com/6RMhx.gif'
338
+ }
339
+ },
340
+ // trigger Masonry as a callback
341
+ function( newElements ) {
342
+ // hide new items while they are loading
343
+ var $newElems = $( newElements ).css({ opacity: 0 });
344
+ // ensure that images load before adding to masonry layout
345
+ $newElems.imagesLoaded(function(){
346
+ // show elems now they're ready
347
+ $newElems.animate({ opacity: 1 });
348
+ $container.masonry( 'appended', $newElems, true );
349
+ });
350
+ }
351
+ );
352
+ });
353
+ ```
354
+
355
+ The loader should be "on top". Here the loader iscon is configured in the `loading` object as `http://i.imgur.com/6RMhx.gif`. This loader is included as an image asset at `assets/images/masonry/loader.gif`. So instead simply use:
356
+
357
+ `img: '/assets/masonry/loader.gif'`
358
+
359
+ Or whichever animated loader icon you want to use ;)
360
+
361
+ ```css
362
+ /* Infinite Scroll loader */
363
+ #infscr-loading {
364
+ text-align: center;
365
+ z-index: 100;
366
+ position: fixed;
367
+ left: 45%;
368
+ bottom: 40px;
369
+ width: 200px;
370
+ padding: 10px;
371
+ background: #000;
372
+ opacity: 0.8;
373
+ color: #FFF;
374
+ -webkit-border-radius: 10px;
375
+ -moz-border-radius: 10px;
376
+ border-radius: 10px;
377
+ }
378
+ ```
379
+
380
+ ## Use with images
381
+
382
+ See [image demo](http://masonry.desandro.com/demos/images.html) which uses *imagesLoaded* plugin (included - see below)
383
+
384
+ ## Images Loaded plugin
385
+
386
+ See [repo](http://desandro.github.com/imagesloaded/)
387
+
388
+ A jQuery plugin that triggers a callback after all the selected/child images have been loaded. Because you can't do `.load()` on cached images.
389
+
390
+ ```javascript
391
+ // require masonry/jquery.imagesloaded.min
392
+ ```
393
+
394
+ Also included is the [loremimages plugin](http://darsa.in/loremImages/), useful for testing purposes ;)
395
+
396
+ + [**View contributors**](https://github.com/desandro/imagesloaded/contributors)
397
+
39
398
  ## Contributing to masonry-rails
40
399
 
41
400
  * Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.1.0
1
+ 0.1.5
@@ -5,11 +5,11 @@
5
5
 
6
6
  Gem::Specification.new do |s|
7
7
  s.name = "masonry-rails"
8
- s.version = "0.1.0"
8
+ s.version = "0.1.5"
9
9
 
10
10
  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
11
11
  s.authors = ["Kristian Mandrup"]
12
- s.date = "2012-08-13"
12
+ s.date = "2012-08-30"
13
13
  s.description = "Masonry will rock your world!"
14
14
  s.email = "kmandrup@gmail.com"
15
15
  s.extra_rdoc_files = [
@@ -63,13 +63,23 @@ Gem::Specification.new do |s|
63
63
  "spec/_posts/tests/2011-09-27-centered-few.html",
64
64
  "spec/index.html",
65
65
  "spec/spec_helper.rb",
66
+ "vendor/assets/images/masonry/loader.gif",
66
67
  "vendor/assets/javascripts/masonry/box-maker.js",
67
- "vendor/assets/javascripts/masonry/jquery.event.drag-2.2.js",
68
+ "vendor/assets/javascripts/masonry/jquery.event-drag.js",
69
+ "vendor/assets/javascripts/masonry/jquery.imagesloaded.js",
70
+ "vendor/assets/javascripts/masonry/jquery.imagesloaded.min.js",
68
71
  "vendor/assets/javascripts/masonry/jquery.infinitescroll.min.js",
72
+ "vendor/assets/javascripts/masonry/jquery.loremimages.min.js",
69
73
  "vendor/assets/javascripts/masonry/jquery.masonry.js",
70
74
  "vendor/assets/javascripts/masonry/jquery.masonry.min.js",
71
75
  "vendor/assets/javascripts/masonry/modernizr-transitions.js",
72
- "vendor/assets/stylesheets/masonry/style.css"
76
+ "vendor/assets/stylesheets/masonry/basic.css",
77
+ "vendor/assets/stylesheets/masonry/centered.css",
78
+ "vendor/assets/stylesheets/masonry/fluid.css",
79
+ "vendor/assets/stylesheets/masonry/gutters.css",
80
+ "vendor/assets/stylesheets/masonry/infinitescroll.css",
81
+ "vendor/assets/stylesheets/masonry/right-to-left.css",
82
+ "vendor/assets/stylesheets/masonry/transitions.css"
73
83
  ]
74
84
  s.homepage = "http://github.com/kristianmandrup/masonry-rails"
75
85
  s.licenses = ["MIT"]
@@ -0,0 +1,112 @@
1
+ /*!
2
+ * jQuery imagesLoaded plugin v2.0.1
3
+ * http://github.com/desandro/imagesloaded
4
+ *
5
+ * MIT License. by Paul Irish et al.
6
+ */
7
+
8
+ /*jshint curly: true, eqeqeq: true, noempty: true, strict: true, undef: true, browser: true */
9
+ /*global jQuery: false */
10
+
11
+ ;(function($, undefined) {
12
+ 'use strict';
13
+
14
+ // blank image data-uri bypasses webkit log warning (thx doug jones)
15
+ var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
16
+
17
+ $.fn.imagesLoaded = function( callback ) {
18
+ var $this = this,
19
+ deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
20
+ hasNotify = $.isFunction(deferred.notify),
21
+ $images = $this.find('img').add( $this.filter('img') ),
22
+ loaded = [],
23
+ proper = [],
24
+ broken = [];
25
+
26
+ function doneLoading() {
27
+ var $proper = $(proper),
28
+ $broken = $(broken);
29
+
30
+ if ( deferred ) {
31
+ if ( broken.length ) {
32
+ deferred.reject( $images, $proper, $broken );
33
+ } else {
34
+ deferred.resolve( $images );
35
+ }
36
+ }
37
+
38
+ if ( $.isFunction( callback ) ) {
39
+ callback.call( $this, $images, $proper, $broken );
40
+ }
41
+ }
42
+
43
+ function imgLoaded( img, isBroken ) {
44
+ // don't proceed if BLANK image, or image is already loaded
45
+ if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
46
+ return;
47
+ }
48
+
49
+ // store element in loaded images array
50
+ loaded.push( img );
51
+
52
+ // keep track of broken and properly loaded images
53
+ if ( isBroken ) {
54
+ broken.push( img );
55
+ } else {
56
+ proper.push( img );
57
+ }
58
+
59
+ // cache image and its state for future calls
60
+ $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );
61
+
62
+ // trigger deferred progress method if present
63
+ if ( hasNotify ) {
64
+ deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
65
+ }
66
+
67
+ // call doneLoading and clean listeners if all images are loaded
68
+ if ( $images.length === loaded.length ){
69
+ setTimeout( doneLoading );
70
+ $images.unbind( '.imagesLoaded' );
71
+ }
72
+ }
73
+
74
+ // if no images, trigger immediately
75
+ if ( !$images.length ) {
76
+ doneLoading();
77
+ } else {
78
+ $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){
79
+ // trigger imgLoaded
80
+ imgLoaded( event.target, event.type === 'error' );
81
+ }).each( function( i, el ) {
82
+ var src = el.src;
83
+
84
+ // find out if this image has been already checked for status
85
+ // if it was, and src has not changed, call imgLoaded on it
86
+ var cached = $.data( el, 'imagesLoaded' );
87
+ if ( cached && cached.src === src ) {
88
+ imgLoaded( el, cached.isBroken );
89
+ return;
90
+ }
91
+
92
+ // if complete is true and browser supports natural sizes, try
93
+ // to check for image status manually
94
+ if ( el.complete && el.naturalWidth !== undefined ) {
95
+ imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
96
+ return;
97
+ }
98
+
99
+ // cached images don't fire load sometimes, so we reset src, but only when
100
+ // dealing with IE, or image is complete (loaded) and failed manual check
101
+ // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
102
+ if ( el.readyState || el.complete ) {
103
+ el.src = BLANK;
104
+ el.src = src;
105
+ }
106
+ });
107
+ }
108
+
109
+ return deferred ? deferred.promise( $this ) : $this;
110
+ };
111
+
112
+ })(jQuery);