e-oj / magic-grid

A simple, lightweight Javascript library for dynamic grid layouts.

magic-grid's Issues

Complete positionItems callback?

There are some way to check if positionItems is complete? I would like to put a loading animation until all positions of elements are set.

Items stack on top of each other on the initial load until I resize

Items stack on top of each other on the initial load until I resize

Wrong height, elements overflow

Very nice tool, thank you.

In my case very often the container's height is wrongly calculated and items overflow.

• A working example of the error
• If you force-reload, 1 out of 4 times max height is wrongly calculated (I added some console.logs, so look at the console, please)
• I am starting the grid like this (static:false because the images come from an external service, but with 'static:true' and without 'items', same error)

let magicGrid = new MagicGrid({
	container: '.container',
	animate: false,
	gutter: 0,
	static: false,
	items: 8
//	maxColumns: 4,
// 	useMin: true,
});

magicGrid.listen();

• This is Chrome 78.0.3904.97 (Official buildl) (64 bits)

Let me know if I can provide other information, or what to try, please.

Thank you

Ability to remove side space

Currently there is some unfilled side space in width of half gutter.

My mitigation is to set negative margins of this width on the parent container to get this space filled.

Would be nice though to have a built-in option for this.

How is it use in React?

interface MagicGridProps is missing "center" property

Can't use config with center: false in typescript, because it is missing in MagicGridProps.

NPM Packages is not up to date

Hello,

I recently dowloaded your package through NPM and it looks like the last changes you made are not up to date.
For example, the center option for the grid is not implemented.

Could you please update your NPM package so that everyone can access lastest features ?

Thanks !

Dynamic Height Problem

The grid error when images load slowly.

Is there any solution to fix this problem without calling again magicGrid.positionItems();, refresh the page, or change window size?

Merge dev branch to master to enable destroy() method

Hello!

I noticed there is a destroy() method in the master branch.

Please, consider merging it into master.

Error in calculating number of columns

There is a minor but substantial error in calculating number of columns. I will try to explain it below,
As per your code,
column width = item width + gutter
number of columns = parent width / column width
However, last column don't need gutter. So it should be
number of columns = ( parent width + gutter ) / column width

you may need to change other related code as well.

Everything in the grid is scaled down in mobile view

This is what the grid looks like when I resize the desktop browser to 325px (expected behavior):

This is what the grid looks like when I put the grid in mobile view set to screen width of 325px (everything is scaled down and there are 3 columns):

In both scenarios, screen width is 325px, but grid renders differently. Why is that?

How do I make the mobile view behave the same as desktop view?

[enhancement/suggestion] this binding & destroy method

I'm late to the party but congrats for this beautiful piece of code and for your detailed explanation on CodeBurst. It's not easy to "empty ourselves" and have a beginner's mind when writing so 👏.

I've noticed that you're not binding this to your public methods. This can have unexpected results when, for example passing a public method reference to a button listener (this becomes the button).

const mg = new MagicGrid({});
// error
someButton.addEventListener('click', mg.positionItems)

// works, but no reference, can't remove this listener after
someButton.addEventListener('click', () => mg.positionItems())

// works, but boilerplate
let mgPosItems = mg.positionItems();
someButton.addEventListener('click', mgPosItems)

• Here's a a fiddle forked from your original example

.destroy()

Another use-case that popped into my mind was a destroy method.
I have given a try at implementing this and the above suggestions, so let me know if you interested in a PR.

Keep up the good work :)
Cheers

README looks out of date

• screencast not showing (but it is on NPM)
• Magic-Grid-React port not present

Callback after Magic Grid is finished?

Is there a possibility to add a function callback after the script is completely finished with calculating and rendering the new layout?
I am trying to add an indent to certain images based on their position in the grid. But this function only works after the positioning of the grid is finished and for that I ideally would listen for the grids own "i-am-finished"-event or something like that.
Is it possible to do that? I didn't find anything in the documentation.

jQuery dependency, really?

Great lib!

However, I don't wanna add jQuery as a dependency just to add your library.

Do you have a plan to remove third-parties?
Or would you accept a pull-request if I removed it?

Cheers

Dynamic gutter

Would it be possible to set gutter as percentage of container width?
And if it is set in pixels, perhaps an option which sets it as "dynamic", so it would size proportionally when container resizes?

New Coder

I am a new coder. I came across this awesome tool on Reddit. I have tried to set it up on a learning project I am working on, but I'm encountering a strange error. I can't seem to put anything inside of the container divs. Whatever I put in there are forced into the width of the box and ignore any attempts to be resized.

I figure I'm probably making a simple mistake, but any advice is welcome.

Detect parent element resize?

Currently it listens to window resize, but I think its better to listen to parent element resize instead with ways like https://github.com/sdecima/javascript-detect-element-resize

Responsive to containers resize

Hello
Can you please add ability to use grid not only inside resizable window but also inside resizable containers?

CDN url is giving an 520 error

When loading in the magic grid via CDN I get a 520 error. The links shows this https://unpkg.com/magic-grid/dist/magic-grid.min.js. Both the minimised and normal version give the same error. Please help.

TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')

Hello @e-oj, I really like your solution for the grid position
Unfortunately, a faced an issue with the implementation of your solution.

Could you please, support me with that?
Thanks in advance!

Here is my typescript code:

 this.taskService.getTasks().subscribe(
      response => {
        this.allTasks = response
        this.dates = Array.from(this.allTasks.keys()).sort();

        const magicGrid = new MagicGrid({
          container: '.tasks',
          items: 20,
          animate: true,
          gutter: 20,
          static: false
        });
        magicGrid.listen();
        magicGrid.positionItems();
      }
    )

My HTML code

<div class="tasks">
  <ng-container *ngIf="allTasks && allTasks.size > 0">
    <div *ngFor="let key of dates">
      {{key}}
    </div>
  </ng-container>
</div>

Does not work for dynamic content

https://jsfiddle.net/cvmgt92q/5/

Images continuously loaded.
As you can see positions are wrong for new images.

No default export in 3.3.4 release

I've tried to upgrade to the 3.3.4 release on npm but I'm seeing this error:

No matching export in "node_modules/magic-grid/dist/magic-grid.min.js" for import "default"

when I import magic grid into my code:

import MagicGrid from "magic-grid"

I'm not sure what could have caused this difference between the previous release (3.2.4) and 3.3.4, but it looks like there were a lot of build tool changes?

Align items left

If I have container with width - 1000px and one item inside with width - 200px, how to align it on left side ?

change direction from right to lef

is it possible to change direction?
Because some content like arabic start from right to left.

button "show more"

Hi,

I'm using magic grid in an image section and wanted to add a button "show more", but I can't do it correctly.
It does not show all the elements and is not positioned at the end of the section.
I created a codepen so you can see my code.

https://codepen.io/angelatorres92/pen/wvvaxQP

Could you help me with this problem?

Best regards, Ângela Torres

Styles applied later (BS)

@e-oj:
When using BrowserSync, extra styles are injected by it after the JavaScript ran
(vanilla document ready used).
This means Magic-Grid would distribute the items as they are unstyled,
then, when the extra styles are injected by BrowserSync, the items are not re-distributed and
with their new styles and dimensions are now incorrectly placed and overlap.
Static mode is used, the items don't change on DOM-level.

Ideally Magic-Grid can use a MutationObserver for redistributing on changes to the items,
even static ones, so this kind of issue is fixed at its cause.

allow variable width items

i am aware of the disclaimer on the readme saying that this only works with consistent widths across all items. I just wondered if there is any possibility us using double-width items? (e.g. width + gutter + width)

Face issue when using it in angular6

version: 3.1.3
I am not sure whether it can be used in angular6. When i try it , i face error below

ERROR TypeError: magic_grid__WEBPACK_IMPORTED_MODULE_1__.MagicGrid is not a constructor

i think it is caused by below class definition
declare class MagicGrid { .... }
After I change it into below code, it works. Plz check. Thanks
export default class MagicGrid {

It's important to provide a online demo

add support for typescript

I will make a PR for adding types for your library