filler blocks still repeating

[pmasloch]

Hi, I am working on a project where your script seems a perfect match! Unfortunately, the js still loads repeating boxes which is a big downside... There is a note that says the issue has been addresses in 6.1.13 fix. I wonder if I can get hold of the fix as it doesn't appear in the zipped files. Quite frankly, it is a hard work well done but a little piece of the 'mosaic' is missing! Can you advice on how to make the js load each box one time only. Many thanks! Cheers. Pawel

[DrewDahlman]

Hey there Pawel, What I would suggest is setting up custom filler blocks. Depending on how you've got things setup, you could split your content into two parts, filler and regular. Mason will use your fills vs duplicating the content.

[pmasloch]

Hi,

Awesome. Thanks.

Kind Regards, Pawel Masloch E: pawelmasloch@hotmail.com mailto:pawelmasloch@hotmail.com T: 07912890785

Go green! Think before wasting stuff!

On 08/01/2014 15:10, Drew Dahlman wrote:

Hey there Pawel, What I would suggest is setting up custom filler blocks. Depending on how you've got things setup, you could split your content into two parts, filler and regular. Mason will use your fills vs duplicating the content.

— Reply to this email directly or view it on GitHub https://github.com/DrewDahlman/Mason/issues/23#issuecomment-31840718.

[CalebLai]

Hi @DrewDahlman great plugin!

as you mentioned Mason will use your fills vs duplicating the content, I wonder how to stop the fills from repeating?

[DrewDahlman]

Hey @CalebLai sure, so this is possible, and I have done it before. The only thing that can possibly come up from it is that you don't have enough fills which will cause mason to throw and error.

I suppose I could write in a catch that uses them in order then when it runs out it starts to duplicate.

While I look into that I suggest looking at this area -

var fillBlock = 0;
for (var i = 0; i < elements.matrix.length; i++) {
    for (var c = 0; c < elements.matrix[i].length; c++) {
        /*
         * Blank space detected
         */
        if (elements.matrix[i][c] == false) {
            // get block dimensions
            var h = parseFloat(elements.block.height),
                w = parseFloat(elements.block.width);
            // determine position
            var x = parseFloat((i * h).toFixed(2)) + settings.gutter,
                y = parseFloat((c * w)) + settings.gutter,
                ran, filler;
            h = h - (settings.gutter * 2);
            w = w - (settings.gutter * 2);
            ran = Math.floor(Math.random() * $(settings.filler.itemSelector).length);
            if($(settings.filler.itemSelector).eq(fillBlock).length > 0){
                filler = $(settings.filler.itemSelector).eq(fillBlock).clone();
            } else {
                filler = $(settings.filler.itemSelector).eq(ran).clone();
            }
            filler.addClass(settings.filler.filler_class);
            filler.css({
                'position': 'absolute',
                'top': x + 'px',
                'left': y + 'px',
                'height': h + 'px',
                'width': w + 'px',
                'margin': '0px'
            });
            filler.appendTo($self);
            fillBlock += 1;
        }
    }
}

Notice I set a variable called fillBlock that starts at 0. Then in the filler creation I changed it from

filler = $(settings.filler.itemSelector).eq(ran).clone();

to

filler = $(settings.filler.itemSelector).eq(fillBlock).clone();

So that means it's selecting from your pool of objects, but starting at index 0. Then increment fillBlock at the bottom of the loop and continue on. I added in a little logic to let it fallback if it runs out of fills and go back to using random ones.

This is untested code, but is how I would go about it without have an option for it in the plugin, which actually should be in there. I will work to add that!

Drew

[CalebLai]

@DrewDahlman sorry I'm a n00b to javascript. I tried to swap up the code from

                                // determine position
                                var x = parseFloat((i * h).toFixed(2)) + settings.gutter,
                                    y = parseFloat((c * w)) + settings.gutter,
                                    ran, filler;
                                h = h - (settings.gutter * 2);
                                w = w - (settings.gutter * 2);
                                ran = Math.floor(Math.random() * $(settings.filler.itemSelector).length);
                                filler = $(settings.filler.itemSelector).eq(ran).clone();
                                filler.addClass(settings.filler.filler_class);
                                filler.css({
                                    'position': 'absolute',
                                    'top': x + 'px',
                                    'left': y + 'px',
                                    'height': h + 'px',
                                    'width': w + 'px',
                                    'margin': '0px'
                                });
                                filler.appendTo($self);

to what you have above, but then the plugin seemed to break. Can you point me to where I should replace the code?

Many thanks!!

[DrewDahlman]

check out this issue - https://github.com/DrewDahlman/Mason/issues/19