Skip to content

Commit 6fa70f0

Browse files
jrmdjrmd
authored
Merge pull request #33 from bigbitecreative/hotfix/recalculate-bug
Macy V2.2
2 parents acf172c + 0db6e8b commit 6fa70f0

20 files changed

+514
-162
lines changed

‎README.md

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ Use this option to specify your target container element to apply Macy too. All
3434
Define the default amount of columns to work with. Use the `breakAt` option to specify breakpoints for this value.
3535

3636
#### **trueOrder**
37-
*Default: `true`*
37+
*Default: `false`*
3838

3939
Setting this to false will prioritise equalising the height of each column over the order of the items themselves.
4040

@@ -59,6 +59,13 @@ When declaring the default margin as an object it requires both and x and y valu
5959
*Default: `false`*
6060
If set to true, Macy will wait for all images on the page to load before running. Set to `false` by default, it will run every time an image loads.
6161

62+
63+
#### **useOwnImageLoader**
64+
65+
*Default: `false`*
66+
67+
Set this to true if you would prefer to use a different image loaded library.
68+
6269
#### **breakAt**
6370

6471
*Default: `None`*
@@ -184,6 +191,38 @@ Reinitialises the current macy instance;
184191
macyInstance.reInit();
185192
```
186193

194+
#### **on**
195+
*Parameters: {String} - Event key, {Function} the function to run when the event occurs*
196+
197+
198+
This would console log when all images are loaded.
199+
```javascript
200+
macyInstance.on(macyInstance.constants.EVENT_IMAGE_COMPLETE. function (ctx) {
201+
console.log('all images have loaded');
202+
});
203+
```
204+
205+
#### **emit**
206+
*Parameters: {String} - Event key*
207+
208+
Emit an event, although macy does not utilise most of these events, these are more to trigger your own functions.
209+
210+
---
211+
212+
## *Constants*
213+
214+
Macy now has some constants available to be used with in the events system. This is to make sure the functions are targetting the correct event as the naming may be subject to change
215+
They are all accessible under `macyInstance.constants`
216+
217+
Currently available constants
218+
219+
| Key | Value | Description |
220+
|----------------------|--------------------------|-----------------------------------------------------------------------|
221+
| EVENT_INITIALIZED | `'macy.initialized'` | This is the event constant for when macy is initialized/reinitialized |
222+
| EVENT_RECALCULATED | `'macy.recalculated'` | This is the event constant for every time the layout is recalculated |
223+
| EVENT_IMAGE_LOAD | `'macy.images.load'` | This is the event constant for when an image loads |
224+
| EVENT_IMAGE_COMPLETE | `'macy.images.complete'` | This is the event constant for when all images are complete |
225+
| EVENT_RESIZE | `'macy.resize'` | This is the event constant for when the document is resized |
187226
---
188227

189228
## *Notes*

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "macy",
3-
"version": "2.1.1",
3+
"version": "2.2.0",
44
"homepage": "http://macyjs.com/",
55
"author": {
66
"name": "Big Bite Creative",

‎demo/index.html

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -55,41 +55,41 @@ <h1 class="hero__title">Macy.js is a lightweight, dependency free, 2kb (gzipped)
5555
<div class="container">
5656
<div id="macy-container">
5757
<div class="demo" macy-complete="1"><img src="http://unsplash.it/557/387/" alt="" class="demo-image"></div>
58-
<div class="demo"><img src="http://unsplash.it/602/660/" alt="" class="demo-image"></div>
59-
<div class="demo"><img src="http://unsplash.it/660/646/" alt="" class="demo-image"></div>
60-
<div class="demo"><img src="http://unsplash.it/741/375/" alt="" class="demo-image"></div>
61-
<div class="demo"><img src="http://unsplash.it/813/455/" alt="" class="demo-image"></div>
62-
<div class="demo"><img src="http://unsplash.it/470/896/" alt="" class="demo-image"></div>
63-
<div class="demo"><img src="http://unsplash.it/664/653/" alt="" class="demo-image"></div>
64-
<div class="demo"><img src="http://unsplash.it/708/313/" alt="" class="demo-image"></div>
65-
<div class="demo"><img src="http://unsplash.it/738/578/" alt="" class="demo-image"></div>
66-
<div class="demo"><img src="http://unsplash.it/458/482/" alt="" class="demo-image"></div>
67-
<div class="demo"><img src="http://unsplash.it/439/856/" alt="" class="demo-image"></div>
68-
<div class="demo"><img src="http://unsplash.it/549/315/" alt="" class="demo-image"></div>
69-
<div class="demo"><img src="http://unsplash.it/877/693/" alt="" class="demo-image"></div>
70-
<div class="demo"><img src="http://unsplash.it/542/805/" alt="" class="demo-image"></div>
71-
<div class="demo"><img src="http://unsplash.it/683/445/" alt="" class="demo-image"></div>
72-
<div class="demo"><img src="http://unsplash.it/616/340/" alt="" class="demo-image"></div>
73-
<div class="demo"><img src="http://unsplash.it/533/317/" alt="" class="demo-image"></div>
74-
<div class="demo"><img src="http://unsplash.it/700/894/" alt="" class="demo-image"></div>
75-
<div class="demo"><img src="http://unsplash.it/663/541/" alt="" class="demo-image"></div>
76-
<div class="demo"><img src="http://unsplash.it/368/575/" alt="" class="demo-image"></div>
77-
<div class="demo"><img src="http://unsplash.it/696/538/" alt="" class="demo-image"></div>
78-
<div class="demo"><img src="http://unsplash.it/571/460/" alt="" class="demo-image"></div>
79-
<div class="demo"><img src="http://unsplash.it/892/379/" alt="" class="demo-image"></div>
80-
<div class="demo"><img src="http://unsplash.it/473/729/" alt="" class="demo-image"></div>
81-
<div class="demo"><img src="http://unsplash.it/657/632/" alt="" class="demo-image"></div>
82-
<div class="demo"><img src="http://unsplash.it/311/796/" alt="" class="demo-image"></div>
83-
<div class="demo"><img src="http://unsplash.it/588/561/" alt="" class="demo-image"></div>
84-
<div class="demo"><img src="http://unsplash.it/812/564/" alt="" class="demo-image"></div>
85-
<div class="demo"><img src="http://unsplash.it/353/454/" alt="" class="demo-image"></div>
86-
<div class="demo"><img src="http://unsplash.it/468/737/" alt="" class="demo-image"></div>
87-
<div class="demo"><img src="http://unsplash.it/600/784/" alt="" class="demo-image"></div>
88-
<div class="demo"><img src="http://unsplash.it/777/833/" alt="" class="demo-image"></div>
89-
<div class="demo"><img src="http://unsplash.it/801/576/" alt="" class="demo-image"></div>
90-
<div class="demo"><img src="http://unsplash.it/826/564/" alt="" class="demo-image"></div>
91-
<div class="demo"><img src="http://unsplash.it/390/240/" alt="" class="demo-image"></div>
92-
<div class="demo"><img src="http://unsplash.it/390/130/" alt="" class="demo-image"></div>
58+
<div class="demo"><img src="http://placerabbit.com/602/660/" alt="" class="demo-image"></div>
59+
<div class="demo"><img src="http://placerabbit.com/660/646/" alt="" class="demo-image"></div>
60+
<div class="demo"><img src="http://placerabbit.com/741/375/" alt="" class="demo-image"></div>
61+
<div class="demo"><img src="http://placerabbit.com/813/455/" alt="" class="demo-image"></div>
62+
<div class="demo"><img src="http://placerabbit.com/470/896/" alt="" class="demo-image"></div>
63+
<div class="demo"><img src="http://placerabbit.com/664/653/" alt="" class="demo-image"></div>
64+
<div class="demo"><img src="http://placerabbit.com/708/313/" alt="" class="demo-image"></div>
65+
<div class="demo"><img src="http://placerabbit.com/738/578/" alt="" class="demo-image"></div>
66+
<div class="demo"><img src="http://placerabbit.com/458/482/" alt="" class="demo-image"></div>
67+
<div class="demo"><img src="http://placerabbit.com/439/856/" alt="" class="demo-image"></div>
68+
<div class="demo"><img src="http://placerabbit.com/549/315/" alt="" class="demo-image"></div>
69+
<div class="demo"><img src="http://placerabbit.com/877/693/" alt="" class="demo-image"></div>
70+
<div class="demo"><img src="http://placerabbit.com/542/805/" alt="" class="demo-image"></div>
71+
<div class="demo"><img src="http://placerabbit.com/683/445/" alt="" class="demo-image"></div>
72+
<div class="demo"><img src="http://placerabbit.com/616/340/" alt="" class="demo-image"></div>
73+
<div class="demo"><img src="http://placerabbit.com/533/317/" alt="" class="demo-image"></div>
74+
<div class="demo"><img src="http://placerabbit.com/700/894/" alt="" class="demo-image"></div>
75+
<div class="demo"><img src="http://placerabbit.com/663/541/" alt="" class="demo-image"></div>
76+
<div class="demo"><img src="http://placerabbit.com/368/575/" alt="" class="demo-image"></div>
77+
<div class="demo"><img src="http://placerabbit.com/696/538/" alt="" class="demo-image"></div>
78+
<div class="demo"><img src="http://placerabbit.com/571/460/" alt="" class="demo-image"></div>
79+
<div class="demo"><img src="http://placerabbit.com/892/379/" alt="" class="demo-image"></div>
80+
<div class="demo"><img src="http://placerabbit.com/473/729/" alt="" class="demo-image"></div>
81+
<div class="demo"><img src="http://placerabbit.com/657/632/" alt="" class="demo-image"></div>
82+
<div class="demo"><img src="http://placerabbit.com/311/796/" alt="" class="demo-image"></div>
83+
<div class="demo"><img src="http://placerabbit.com/588/561/" alt="" class="demo-image"></div>
84+
<div class="demo"><img src="http://placerabbit.com/812/564/" alt="" class="demo-image"></div>
85+
<div class="demo"><img src="http://placerabbit.com/353/454/" alt="" class="demo-image"></div>
86+
<div class="demo"><img src="http://placerabbit.com/468/737/" alt="" class="demo-image"></div>
87+
<div class="demo"><img src="http://placerabbit.com/600/784/" alt="" class="demo-image"></div>
88+
<div class="demo"><img src="http://placerabbit.com/777/833/" alt="" class="demo-image"></div>
89+
<div class="demo"><img src="http://placerabbit.com/801/576/" alt="" class="demo-image"></div>
90+
<div class="demo"><img src="http://placerabbit.com/826/564/" alt="" class="demo-image"></div>
91+
<div class="demo"><img src="http://placerabbit.com/390/240/" alt="" class="demo-image"></div>
92+
<div class="demo"><img src="http://placerabbit.com/390/130/" alt="" class="demo-image"></div>
9393
</div>
9494
</div>
9595
</section>
@@ -106,7 +106,8 @@ <h1 class="hero__title">Macy.js is a lightweight, dependency free, 2kb (gzipped)
106106
var masonry = new Macy({
107107
container: '#macy-container',
108108
trueOrder: false,
109-
waitForImages: true,
109+
waitForImages: false,
110+
useOwnImageLoader: false,
110111
debug: true,
111112
margin: {
112113
x: 10,

0 commit comments

Comments
 (0)