janosh / svelte-bricks Goto Github PK

Hey!

I just wanna start off by saying you've got a really nice simple library here, i'm using a slightly adapted version for my own needs with more of a focus on explicitly defining the amount of columns.

bind:clientWidth={masonryWidth}
bind:clientHeight={masonryHeight}

One thing I noticed was the bind is creating an Iframe in the DOM (maybe this is an expected behaviour in Svelte, i'm still pretty new to it). As i'm not using it I could just remove it but perhaps it's something that could be improved down the line. As this currently stops you from applying classes to specific columns for example in my use-case i'm adding a margin-top to every 2nd child.

I'll try find a solution to it at some point but just incase I don't get around to that.

Maybe add an example how to render dynamically fetched images.

Related #4.

https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#conflicts-in-svelte-resolve

❯ pnpm run build                                                                                                                                         17:00:49  

> [email protected] build /home/dev/coding/my-project
> vite build


vite v4.3.8 building SSR bundle for production...
✓ 168 modules transformed.
5:00:55 PM [vite-plugin-svelte] WARNING: The following packages use a svelte resolve configuration in package.json that has conflicting results and is going to cause problems future.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#conflicts-in-svelte-resolve for details.

vite v4.3.8 building for production...
✓ 152 modules transformed.
5:00:57 PM [vite-plugin-svelte] WARNING: The following packages use a svelte resolve configuration in package.json that has conflicting results and is going to cause problems future.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#conflicts-in-svelte-resolve for details.

Hi! Thank you for a great plugin. I am having some problem understanding the docs and rendering my image gallery correctly. I have my image data in a JSON file like so:

"images": [
        {
            "type": "image",
            "value": {
                "src": "srishti-archive-screen-1.png",
                "alt": "Site hero"
            }
        },
        {
            "type": "image",
            "value": {
                "src": "srishti-archive-screen-2.png",
                "alt": "Featured project page"
            }
        }
    ],

This is stored in a variable called post.
I then loaded your plugin:

<script>
    export let post;
	let nItems = post.images.length;
	$: items = [...Array(nItems).keys()];
	let [minColWidth, maxColWidth, gap] = [400, 600, 20];
	let width, height;
</script>

<Masonry {items} {minColWidth} {maxColWidth} {gap} let:item bind:width bind:height >
			{#each post.images as image, i}
				<img
				{item}
				width="600"
						height="720"
						src="/common/assets/resources/32/{image.value.src}"
						alt="{image.value.alt}"
						srcset="/common/assets/resources/1280/{image.value.src} 1280w,
							  /common/assets/resources/960/{image.value.src} 960w,
							  /common/assets/resources/640/{image.value.src} 640w"
						sizes="(max-width: 320px) 640px, (max-width: 480px) 960px, 1280px"
						loading="lazy" />
			{/each}
		</Masonry>

But this gives me a gallery which looks like this:

When I change let nItems = 1, I get what I would like to be getting:

What am I doing wrong and how can I fix this?

I installed this module using pnpm, and I've also installed the Svelte for VS Code plugin. However, following the official instructions to import had no effect (I encountered the error shown in the screenshot.). After trying to add the following line to the package's package.json:

"main": "./dist/index.js",

I found that doing this made it work properly.

Steps to reproduce

1. Open the live demo, keep the default masonryWidth = 1120px and gap = 20px

2. Find the largest possible width $\text{columnWidth}$ of a single column in a three column layout:

   $$3 * \text{columnWidth} + 2 * \text{gap} = \text{masonryWidth}$$

   $$3 * \text{columnWidth} + 2 * 20px = 1120px$$

   $$\text{columnWidth} = 360px$$

3. Set minColWidth to 360px

Expected

There are 3 columns, each 360px wide

Actual

There are 2 columns 😱

And it switches to 2 columns at minColWidth = 354px

Current formula

$$\text{columnAmount} = {\text{masonryWidth} \over {\text{columnWidth} + \text{gap}}}$$

Solution

$$\text{columnAmount} * \text{columnWidth} + (\text{columnAmount} - 1) * \text{gap} = \text{masonryWidth}$$

$$\text{columnAmount} * \text{columnWidth} + \text{columnAmount} * \text{gap} = \text{masonryWidth} + \text{gap}$$

$$\text{columnAmount} * (\text{columnWidth} + \text{gap}) = \text{masonryWidth} + \text{gap}$$

$$\text{columnAmount} = {{\text{masonryWidth} + \text{gap}} \over {\text{columnWidth} + \text{gap}}}$$

TL;DR

The current formula is miscounting one gap, it should be changed like so:

- $: nCols = Math.min(items.length, Math.floor(masonryWidth / (minColWidth + gap)) || 1)
+ $: nCols = Math.min(items.length, Math.floor((masonryWidth + gap) / (minColWidth + gap)) || 1)

It'd be helpful to be able to pass a string or function to use an already-existing id column in an array of objects that may be under a different name. The easiest to implement would be a string to use for the identification column.

Something like the following:

<Masonry items={items} id={(item) => item.columnName}/>
<Masonry items={items} id={'columnName'}/>

Hi @janosh, thanks for making this!
Have you ever tried implementing this with a virtual list library, to make a kind of scrollable "infinite-bricks" UI? I was wondering if you can recommend one that integrates well.

I'm checking v1ack's svelte-virtual-scroll-list but it seems its items handling may interfere.

@janosh thanks for the amazing work. I just implemented this in a project I am working on and wanted to note that if one is not using Typescript the plugin does not work.

So I switched to TS and works like a charm :D

Peace

I'm using:

<div class="mx-4 sm:mx-8 md:my-4 lg:mx-16 lg:my-8 xl:mx-32 xl:my-16">
  <Masonry
    {items}
    ...
  >
    <Some {item} />
  </Masonry>
</div>

If export a class variable, that can be reduced to:

<Masonry
  class="mx-4 sm:mx-8 md:my-4 lg:mx-16 lg:my-8 xl:mx-32 xl:my-16"
  {items}
  ...
>
  <Some {item} />
</Masonry>

This can be achieved by doing:

<script>
  let className = ``
  export { className as class }
  ...
</script>
<div
  class="masonry {className}"
  ...
>
...
</div>

Can't figure out where this is being overridden but I have a css cursor property of 'zoom-in' set on my grid instances, but it seems like somewhere a cursor property of 'hand' is being set. Idk if I'm just blind but any idea what is going on?

Edit: I messed up my classes and was up too late, my bad (fixed)

I was dynamically building a value for min/max colwidth. The display resulted in an increasing margin on either side of the Masonry and the widths weren't changing. What I didn't realize was that my math was bad and that the min was larger than the max. Obviously I wouldn't expect it to work right, but it took a while to figure out that was the problem.

The suggestion is to drop a console warning or the like to notify the dev that maxColWidth value is smaller than minColWidth.