e-oj / magic-grid Goto Github PK
View Code? Open in Web Editor NEWA simple, lightweight Javascript library for dynamic grid layouts.
Home Page: https://www.npmjs.com/package/magic-grid
License: MIT License
A simple, lightweight Javascript library for dynamic grid layouts.
Home Page: https://www.npmjs.com/package/magic-grid
License: MIT License
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.
Very nice tool, thank you.
In my case very often the container's height is wrongly calculated and items overflow.
let magicGrid = new MagicGrid({
container: '.container',
animate: false,
gutter: 0,
static: false,
items: 8
// maxColumns: 4,
// useMin: true,
});
magicGrid.listen();
Let me know if I can provide other information, or what to try, please.
Thank you
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.
Can't use config with center: false
in typescript, because it is missing in MagicGridProps.
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 !
Hello!
I noticed there is a destroy()
method in the master branch.
Please, consider merging it into master.
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.
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?
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)
.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
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.
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
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?
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.
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
Hello
Can you please add ability to use grid not only inside resizable window but also inside resizable containers?
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.
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>
https://jsfiddle.net/cvmgt92q/5/
Images continuously loaded.
As you can see positions are wrong for new images.
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?
If I have container with width - 1000px and one item inside with width - 200px, how to align it on left side ?
is it possible to change direction?
Because some content like arabic start from right to left.
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
@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.
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)
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 {
I will make a PR for adding types for your library
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.