Skip to content

Commit

Permalink
Merge pull request #33 from bigbitecreative/hotfix/recalculate-bug
Browse files Browse the repository at this point in the history 
Macy V2.2
  • Loading branch information
@jrmd
jrmd authored Oct 23, 2017
2 parents acf172c + 0db6e8b commit 6fa70f0
Show file tree
Hide file tree
Showing 20 changed files with 514 additions and 162 deletions.
41 changes: 40 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Use this option to specify your target container element to apply Macy too. All
Define the default amount of columns to work with. Use the `breakAt` option to specify breakpoints for this value.

#### **trueOrder**
*Default: `true`*
*Default: `false`*

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

Expand All @@ -59,6 +59,13 @@ When declaring the default margin as an object it requires both and x and y valu
*Default: `false`*
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.


#### **useOwnImageLoader**

*Default: `false`*

Set this to true if you would prefer to use a different image loaded library.

#### **breakAt**

*Default: `None`*
Expand Down Expand Up @@ -184,6 +191,38 @@ Reinitialises the current macy instance;
macyInstance.reInit();
```

#### **on**
*Parameters: {String} - Event key, {Function} the function to run when the event occurs*


This would console log when all images are loaded.
```javascript
macyInstance.on(macyInstance.constants.EVENT_IMAGE_COMPLETE. function (ctx) {
console.log('all images have loaded');
});
```

#### **emit**
*Parameters: {String} - Event key*

Emit an event, although macy does not utilise most of these events, these are more to trigger your own functions.

---

## *Constants*

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
They are all accessible under `macyInstance.constants`

Currently available constants

| Key | Value | Description |
|----------------------|--------------------------|-----------------------------------------------------------------------|
| EVENT_INITIALIZED | `'macy.initialized'` | This is the event constant for when macy is initialized/reinitialized |
| EVENT_RECALCULATED | `'macy.recalculated'` | This is the event constant for every time the layout is recalculated |
| EVENT_IMAGE_LOAD | `'macy.images.load'` | This is the event constant for when an image loads |
| EVENT_IMAGE_COMPLETE | `'macy.images.complete'` | This is the event constant for when all images are complete |
| EVENT_RESIZE | `'macy.resize'` | This is the event constant for when the document is resized |
---

## *Notes*
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "macy",
"version": "2.1.1",
"version": "2.2.0",
"homepage": "http://macyjs.com/",
"author": {
"name": "Big Bite Creative",
Expand Down
73 changes: 37 additions & 36 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,41 +55,41 @@ <h1 class="hero__title">Macy.js is a lightweight, dependency free, 2kb (gzipped)
<div class="container">
<div id="macy-container">
<div class="demo" macy-complete="1"><img src="http://unsplash.it/557/387/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/602/660/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/660/646/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/741/375/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/813/455/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/470/896/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/664/653/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/708/313/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/738/578/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/458/482/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/439/856/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/549/315/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/877/693/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/542/805/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/683/445/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/616/340/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/533/317/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/700/894/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/663/541/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/368/575/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/696/538/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/571/460/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/892/379/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/473/729/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/657/632/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/311/796/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/588/561/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/812/564/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/353/454/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/468/737/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/600/784/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/777/833/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/801/576/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/826/564/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/390/240/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/390/130/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/602/660/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/660/646/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/741/375/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/813/455/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/470/896/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/664/653/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/708/313/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/738/578/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/458/482/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/439/856/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/549/315/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/877/693/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/542/805/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/683/445/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/616/340/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/533/317/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/700/894/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/663/541/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/368/575/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/696/538/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/571/460/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/892/379/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/473/729/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/657/632/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/311/796/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/588/561/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/812/564/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/353/454/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/468/737/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/600/784/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/777/833/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/801/576/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/826/564/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/390/240/" alt="" class="demo-image"></div>
<div class="demo"><img src="http://placerabbit.com/390/130/" alt="" class="demo-image"></div>
</div>
</div>
</section>
Expand All @@ -106,7 +106,8 @@ <h1 class="hero__title">Macy.js is a lightweight, dependency free, 2kb (gzipped)
var masonry = new Macy({
container: '#macy-container',
trueOrder: false,
waitForImages: true,
waitForImages: false,
useOwnImageLoader: false,
debug: true,
margin: {
x: 10,
Expand Down
Loading

0 comments on commit 6fa70f0

Please sign in to comment.