GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.36k stars 4.05k forks source link

Assets rendering all imagens instead of just some. #2760

Closed cartifon closed 4 years ago

cartifon commented 4 years ago

Hey @artf, first of all, great Job with the GrapesJS! I'm having a lot of fun working with it. Is is amazing!

So, about the issue, or maybe still new on that....

Situation: I want to be able to create a gallery using the Asset Manager. I followed the steps to create the list and add some categories.

I created this function to generate random images for me.

   getAssets(howMany: number): any[] {
        const assets = [];
        for (let i = 0; i < howMany; i++) {
            const randomColor = Math.floor(Math.random() * 16777215).toString(16);
            const category = i % 2 === 0 ? 1 : 2;
            const img = {
                category: 'c' + category,
                type: 'image',
                unitDim: 'px',
                height: 350,
                width: 250,
                src: `http://placehold.it/350x250/${randomColor}/fff/image${i + 1}.jpg`,
            };
            assets.push(img);
        }
        return assets;
    }

And then I have this:

        const am = editor.AssetManager;
        am.add(this.getAssets(10));
        const assets = am.getAll();
        am.render(assets.filter((asset: any) => {
            return asset.get('category') === 'c1';
        }));
        console.log('All assets: ', am.getAll().length);
        console.log('All visible: ', am.getAllVisible().length);

The functions that I call the getAll() gives me 10, and the getAllVisible() gives me 5 as it was supposed to do. But when I open the modal for the Asset Manager, all the 10 imagens are showing, not only the 5 that I wanted....

Should I create my own Modal and show the visible ones or should the Asset Manager show only the visible ones?

artf commented 4 years ago

Thank you @cartifon, about the issue, honestly, I'd expect to see the Asset Manager updated, are you able to create a reproducible live demo so I can check it better?

cartifon commented 4 years ago

Sure thing! here it is:

https://www.w3schools.com/code/tryit.asp?filename=GEQ2MIV7CI3W

(Updated)

artf commented 4 years ago

0.12.17 is way too old, use the latest version of grapesjs and it'll work