bigbite / macy.js Goto Github PK

Hey there,
just wondering: package.json says v2.0.0, Github release history says 1.1.2 ..

Is it correct that the container option only allows a selector, but no NodeElement?

I would like to create a Macy instances for multiple elements without using a id.

document.querySelectorAll('.masonry').forEach((elem) => {

	const macy = Macy({
		container: elem,
		trueOrder: false,
		waitForImages: false,
		margin: 24,
		columns: 6,
		breakAt: {
			1200: 5,
			940: 3,
			520: 2,
			400: 1
		}
	})

})

Macy.recalculate seems to be broken using the latest from the master branch
The error that I get: O.recalculate is not a function

I needed a masonry library and wanted to avoid jQuery and other dependencies and so far this library seem to be really easy to set up and get to work as I wanted :-)

But, I'm curious about one thing. On the web page it says "Macy.js is a lightweight, dependency-free, 4kb masonry layout library", so how come you still have dependencies (not devDependencies) to babel-eslint and rollup-plugin-eslint?

I was expecting to get 1 package when doing a "npm install macy", but got 89...

Readme said breakpoints, should be breakAt.

https://github.com/bigbitecreative/macy.js#breakpoints

Hi,

I've been using macy.js quite a bit recently and I'm very happy with it.

As the title says, sometimes I'd like to set the parent container to display: flex to avoid a massive layout switch once the JS and Macy kick in (or JS fails to load). In some scenarios, this stops Macy from calculating the correct positions for the child elements. If you resize the browser, it recalculates and everything is fine.

You can see an example here: https://jsfiddle.net/8vrq2zjf/1/

Hi ,
Is mary.js have transition like masonry.js

Does this framework support video?

Hi,
is it possible to set 1 item to have width of 2 items?

I see a bit of round on the images any way to remove that?
Thanks you

Hi, I couldn't find anything regarding licensing the library.

Is it GNU?

Hi,
like mentioned here #21 I also have a problem with the 2.0.0 version. When I setup a Macy instance:

let macy_instance = Macy({
    // options
})

macy_instance.onImageLoad(null, () => {
    macy_instance.recalculate();
});

I got "TypeError: macy_instance.onImageLoad is not a function".

Anything wrong with my code?

The readme states:

If you only require it to run once all the images have loaded you
can achieve this by passing null as the first parameter:

macyInstance.runOnImageLoad(function () {
  console.log('I only get called when all images are loaded');
  macyInstance.recalculate(true, true);
});

But in the example true and true is provided. What’s the correct way to specify that you only want to run once all the images have loaded.

Thanks for this great lib!

Hi,
It's awesome to layout the images. But how could the images smooth when I resize the browser,and with some fancy animations when loading images with javascript?
Thanks

It's not working on first load. Just after reload it works.

Macy.js settings:

window.onload = function(){
    Macy.init({ 
      container: "#feed",
      mobileFirst: true,
      waitForImages: true,
      margin: 20,
      columns: 1,
      breakAt: {
        768: 2,
      },
    });
    console.log('MACY.JS', Macy)
  }

Second problem shows if I try using default syntax which is on npm macy.js page.

This code:

  const msnry = new Macy({
    container: '#feed',
    mobileFirst: true,
    columns: 1,
    waitForImages: true,
    mobileFirst: true,
    breakAt: {
        768: 2
    },
    margin: {
      x: 20,
      y: 20,
    }
  });

Shows me an "TypeError: Cannot set property 'position' of undefined"
I think that documentation to version @2.5.0 may be just invalid.
Can you make working example of implementation on codepen? or repository?

Hi,

Instead of the script just erroring and killing the page, could we have a graceful fallback to just a single column, or basically, just don't init Macy.

I don't really want to use a polyfill, so would rather Macy didn't run at all and IE11 just get's CSS.

Thanks,
Tom

Trying to use this with LazySizes and most of the images (but not all) on the page load at 1-2px height only.
What am I missing here?

README says that container is the only required property, but the function wouldn't run for me if I didn't have breakAt set.

Hello,

I'm having trouble initialising Macy. I'm working on an angular app, and I'm building a blog system. The blog page is requesting an endpoint and displaying the blogposts in an ng-repeat.

The data is being loaded, and then we're trying to init Macy after this request.

So in our success call, we're firing Macy after the data is loaded

I can solve this by a timeout, but this is not a bulletproof solution.

Hope you can help!

Hi there,

Just curious...

Is there a way to make the breakAt option use >= instead of <=? We're in a world of mobile first development, and it would make sense for everything to be >=.

Perhaps an option along the lines of mobileFirst with the default value being false (<=) and true (>=) ?

Just a thought...

Just noticed that the images in the preview grid on the web are broken:

Why?
For example:
Layout: 3 cols layout (in mobile and desktop)
25px margin could looks huge in mobile and otherwise maybe look small on desktop.

So option for:

margin: 25px;
margin-mobile: 5px; //or small or any semantic name

Could be helpful.

By the way - amazing and simple to implement code!! thanks

As per thread title, would be nice to have some events to hook into or a callback function.

Any ideas on that? Using latest version available through NPM.
Thx!

I feel that just specifying breakAt columns is not enough. Sometimes on smaller screens, you need smaller margins and larger margins in bigger screens.

Macy.init({
    container: '#macy-container',
    margin: 24,
    columns: 6,
    breakAt: {
        1200: 5,
        940: 3,
        520: {
                columns: 2,
                margin: 12,
        },
        400: 1
    }
});

Using this would become undefined after passing through babel. I updated to window and things work perfectly. Please consider.

https://github.com/bigbitecreative/macy.js/blob/master/src/macy.js#L11

It's broken after load first time. My JS is in the Footer, maybe that's the problem. Whats a good Workaround to fix that?

Link: https://davidhellmann.com/

Hey there! First of all, I'm loving Macy.js so thank you for this!

Second, I'm working on adding a filter feature to my layout. The initial macy instance loads great and everything appears in the correct place. For reference, I have the margin: 24 in the initial macy instance. The margin of 24 px seems to apply a uniform margin around all sides of all items except the top margin of items on the top row (which have a 0px margin). This is all fine (see the image below)

In order to filter, I'm essentially just alternating the display value for each item between none (to hide it) and flex to show it. After doing that, I run macy.recalculate(true) which does rearrange the objects, but it doesn't seem to take the top margin into account. As I mentioned above, during the initial arrangement of the tiles, items in the top row have a top: 0px value whereas items that moved up to the top row after the recalculation now have a top: 24px value.

It seems like the top margin comes in when items started in lower rows and are moved to the top row during a recalculate() call?

Also, for reference, I tried macy.reInit() instead of macy.recalculate() and I'm finding the same issue.

I've been messing with this for the past few hours and haven't been able to find a way to fix this. Any input would be much appreciated. Thank you!!

I noticed your eles function using document.querySelectorAll(). It might be more appropriate to use Element.querySelectorAll(). [MDN].

For example, in your calculateOnImageLoad() function, eles("img") call will attempt to select all images in the document. My guess is you're really only concerned about the images inside the Macy container, and not other images loading on the site. So use something like cache.container.querySelectorAll().

I'm using breakAt and it works as intended. The only problem is that Macy still sets every item position even if there's only one column. It would be more efficient to do nothing and let the browser and the user's CSS rules do its work, specially on mobile devices.

Hi,

Usually when using Macy I'm using it in a responsive grid environment.

As such it would be good if you could parse percentage margins.

{
    x: '4%',
    y: 40 
}

Like the above for example.

Thanks.

Trying to implement a filter, so we need to use "recalculate( true, true );" to re-order all visible items.

We only call the recalculate on click and we do not hide anything. On some page reloads and a consequent click the items act normally, but on others all items jump to the bottom of the page. Basically it does not replace the container height, but adds the "new height", which is the same as the previous, to the already existing one.

Any idea how to avoid this issue?

I'm really liking the way Macy's looking so far. Simple API, small size.

But I'm running into an issue while creating an infinite-scrolling site. The more I load, the longer Macy.recalculate() takes. It actually begins to slow down significantly fairly early, with only a hundred or so items.

1. You may want to consider minimizing layout thrashing with FastDom or a similar implementation.
2. Or try to track which items have already been calculated, and skip them. And run a full recalculate on resize.

macyInstance.on(macyInstance.constants.EVENT_IMAGE_COMPLETE. function (ctx) {
  console.log('all images have loaded');
});

should be

macyInstance.on(macyInstance.constants.EVENT_IMAGE_COMPLETE, function (ctx) {
  console.log('all images have loaded');
});

Hey, thanks for all the great work.

I'm currently setting up breakpoints for a new layout and it took me a while to realize that the breakpoints are based on the total viewport width instead of the container width (even though the readme states that fact quite clearly...). This seems counterintuitive to me. In my case, the container is simply 80% of the viewport, so calculations aren't a big problem, but I wondered if it would be possible to add an option for this?

I'll gladly try implementing this option myself if I get a go-ahead and maybe a hint as to where the code might need to be adapted.

Thanks,
Kjeld

Would it be possible to add a param to the initiation block that would make it possible to add a class once the item has been positioned?

I just released https://redditgrid.com using this lib, but im running into some issues with stuff being shown through the currently played pictures by the ones behind while they are being positioned, it would be idea to be able to simply add a class to the element and i could use to toggle opacity on the block once its loaded.

Also it could be used for some fancy CSS effects later on :)

It's proving hard to match up the breakpoint values in the plugin with CSS breakpoint values because of the way screen width is calculated.

Testing In Chrome the breakpoint in the plugin triggers 15px wider than the CSS media query (sizing window up). 15px seems to be the exact size of the scrollbar.

Hello,

I've got a weird bug thats popping up only on Safari on an iMac. I haven't been able to reproduce the issue anywhere else and I've tried to do some research into the problem but I haven't found much.

On the first load of an image gallery everything looks fine, as shown below:

On the second load of a gallery all of the images are stacked on top of each other like this:

At the top of the screen you can see the top few pixels of each image. They're all stacked on one another like a deck of cards. As I said before this only seems to happen on an iMac on safari. On chrome on the same machine there are no issues. I have also tried to reproduce the issue on other machines with Safari, with no success, and on other machines with different browsers, with no success. We haven't been able to test on another iMac with Safari to see if the issue is specific to our machine or not. This is on Safari Version 11.1 (13605.1.33.1.2).

If you empty the cache (command+E) and refresh the page, the gallery loads fine again. So it appears that this has something to do with Safari's caching. Additionally, if you resize the browser window at all the gallery fixes itself.

Do you have any ideas as to what the issue could be? Is this an issue you've seen before?

If you have any additional questions feel free to ask,
Thanks,
Zach

Hi and thank you for this fine lightweight masonry plugin. I'm wondering if I'm doing something wrong with the recalculate function. My scenario is this: I have to display 12 thumbnails at a given time. In this container I have a left and a right arrow so user can slide to the next 12 thumbnails. I do this by initially hiding all items and then feeding them to the macy container depending on which index the user is on. However when I add items to the macy container dynamically I get random height. I've tried all options recalculate(), recalculate(true), recalculate(true, true) but it doesn't seem to work. Any ideas on what I might be doing wrong?

the code

Initial load

	$('.media-grid').append($('.media-layer-1').children().clone())
	this.instance.recalculate(true)

This function handles sliding between

slideTransition() {
	// Empty media-grid
	$('.media-grid').empty()
	// Add media-layer-i
	$('.media-grid').append(
	    $(`.media-layer-${this.slideIndex}`).children().clone()
	)
	this.instance.recalculate(true)
}

Image of how it appears https://ibb.co/mo1dpe

I have a grid layout with 2 tabs (Winter and Summer tabs). Each tab has a list of items that should have the Macy.js layout.
With the first tab, everything works just fine. The problem os to make the second tab work fine too! Example below of the first tab displaying Macy.js grid.

I tried several things to make the second tab to work:

Solution 1: Having 2 'var macyInstance = Macy' containers with 2 different ID's
Result: the second tab don't even show up. Example image below with tab 2

Solution 2: Having 1 class for the 'var macyInstance = Macy' container
Result: The Macy grid don't work in either tab 1 and tab 2 but the tab2 manage to load the content. Example image below with tab 1

If I could call 2 ID's on the same 'var macyInstance = Macy' but has I understand isn't possible.

So my final question is, how can I make this solution to work?

Hey, I love the simplicity of Macy! I'm having a little trouble though getting it to work with lazy loading.

I'm using jQuery.lazy in a wordpress based gallery plugin that I'm building.

All my images end up overlapping, because it can't get the height for Macy.

Reading a bunch of threads on similar problems it seems I need to reinit Macy. The documentation says that if waitForImages is set to false then it will run Macy every time images are added to the page. So it seems that as I have Macy on all default settings, then every time a new image loads through jQuery.lazyload, except it doesn't seem to be recalculating each time a new image loads. :/

Am I missing something? Do I need to have macy_instance.reInit(); everytime jQuery.lazy adds an image?

Hey I'm sorry to bother you. I honestly feel kind of dumb coming to ask for help with this because I feel like this is something I probably should be able to figure out myself but I've been whacking my head against this for a couple of hours and I thought I'd post this before bed.

So I've got an implementation of Macy.js in a custom WP theme I made for my portfolio website. It was running fine on local, and on my host, but then when I installed a caching program, and ripped out all this old bootstrap code, it's started having this weird effect of adding margin to the bottom of pictures.

I can adjust it by re running my init function and setting the margin to -5. That applies to both the x and the y though so it comes out looking weird. And if I apply it to the x and y separately then it does some really weird stuff and has everything overlapping each other.

The website can be found here: https://www.jackalope.tech/side_project/illustration/

Maybe you will have a better sense of what's going on?

Again, I'm sorry to be a bother.

Hey,

Notes say:

Currently only one instance of macy is supported per page. But that will be subject to change in later versions

Do you have plans on re-working the code to support multiple instances and save all the settings as parameters relative to the current instance only? Any ETA?

Cheers

Within the documentation, I did not see it mentioned that there is the ability to retrieve data about the loaded image:

macyInstance.runOnImageLoad(function (image) {
  console.log(image.data.img);
  macyInstance.recalculate(true);
}, true);

It would be good to let people know this option is possible.

Hey, so I'm using Macy to build a custom wordpress gallery for myself. It's great!

I create a custom post type called Galleries, and then I use a wp program to insert the gallery into another post. So far, this all works fine.

But when I insert two different galleries the second one doesn't run quite correctly.

Here's how I init macy:

var macy_instance = Macy.init({
        container: '.gridGallery',
        trueOrder: false,
        waitForImages: true,
        debug: true,
        margin: 0,
        columns: 5,
        breakAt: {
            1200: 4,
            940: 3,
            520: 1
        }
    });

And I also call this later on in order to help with the lazy loader:

macy_instance.runOnImageLoad(function () { macy_instance.recalculate(true); }, true);

Issues with the second gallery:

1. Default columns are set to 5. Columns on second are 3 deep.

2. Lazy loader works fine with gallery, but stuff isn't getting consistently repositioned in a masonry fashion. image here

If I delete the first gallery on the page, and then rerun the macy_instance code in the console, then the second gallery (now the only gallery) loads perfectly fine. If I run macy_instance init code in console without deleting the first gallery, the second gallery remains messed up.

I think this has something to do with the container name, since both galleries are classed as .gridGallery. To confirm this I just ran the macy_instance with a different class name, which I assigned post loading the page to the second gallery and this time it worked.

So I've got some ideas about how I could make this work in wordpress but was also hoping maybe there was a more lightweight way that was built into Macy, or some suggestions of the sort. Thanks!

Any pointers are appreciated thank you!

I am using Macy (the latest version from npm - 2.3.0) and upon initialisation I get the error: Uncaught TypeError: n.replace is not a function.

Here is how I am using Macy:

var masonry = (function () {
    'use strict';

    var feed,
        macy;

    function reinit() {
        macy.recalculate();
    }

    function init() {
        feed = document.querySelector('.feed');

        if (!feed) {
            return;
        }

        macy = Macy({
            container: feed,
            columns: 1,
            waitForImages: true,
            mobileFirst: true,
            breakAt: {
                768: 3
            }
        });

        window.resize = reinit;
    }

    document.addEventListener('DOMContentLoaded', init);

    return {
        init: init,
        reinit: reinit
    }

}());

The idea is that I can call masonry.reinit any time I need to reinitialise and it will recalculate.

It would be nice to have different options for vertical and horizontal margins so that they don't have to match.

It appears that window.getComputedStyle seems to ignore the padding for elements in IE.
I replaced this method call and used offsetHeight instead, and this seem to work.

      // tempHeight = parseInt(getProperty(cache.elements[eles[i]], "height").replace("px", ""), 10);
      tempHeight = parseInt(cache.elements[eles[i]].offsetHeight, 10);

Cheers
Dean

To start I just want to say thank you for working on macyJS, it's truly an amazing tool and saved a lot of headaches!!
In development I encountered the exact issue ("parent element height set to 0 when some elements are hidden") that was fixed by V1.1.2, however upon updating my npm file and install I received the 'No compatible version found: macy@^1.1.2" error.

Could you please publish the version to npm? Or is there a temporary code / css fix I can use to bypass the issue?

Many thanks,

I would love to see support for element's widths to be acknowledged and fit appropriately.

Several 50% width elements with one 100% width element -- I would expect the full width element to fall on a new line and continue tiling underneath