search

voidlabs / mosaico

Mosaico - Responsive Email Template Editor
https://mosaico.io
GNU General Public License v3.0
1.71k stars 504 forks source link

Dynamically adding new blocks #277

Closed Renegade2u closed 7 years ago

Renegade2u commented 7 years ago

Hi there,

I was wondering how I can dynamically add new blocks. I have created a new tab/panel with newsitems/articles and I want to drag those into the newsletter.

Is there anybody who has some example code or can help me further?

Thanks in advance.

bago commented 7 years ago

Is there a fork on github I can see in order to better understrand what you are trying to do?

Renegade2u commented 7 years ago

No, I am sorry there is not.

But imagine the current blocks tabs. I want to duplicate that, but with multiple blocks containing news from a database. So the user can click on the tab News. See all the news items and drag them into the newsletter.

And of course not only news, but any kind of article.

So basically the same functionality as the current blocks but reading them from a database instead of a template file.

On Jan 31, 2017 11:14, "Bago" notifications@github.com wrote:

Is there a fork on github I can see in order to better understrand what you are trying to do?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/voidlabs/mosaico/issues/277#issuecomment-276324776, or mute the thread https://github.com/notifications/unsubscribe-auth/AYRfIusjsOJa0SkG3T0ETDU3uSle0CYRks5rXwmPgaJpZM4LyWZb .

Renegade2u commented 7 years ago

What I have managed so far is creating blocks using the following code:

var block = $(' '<div class="draggable-item">' + '<div class="block" data-bind="extdraggable: { connectClass: \'sortable-blocks-edit\', data: $data, dropContainer: \'#main-wysiwyg-area\', dragging: $root.dragging, \'options\': { handle: \'.handle\', distance: 10, \'appendTo\': \'#page\' } }, click: $root.addBlock" style="position: relative;">' + ' <div title="Click or drag this block" class="handle"></div>' + ' <img alt="my block" src="block-image.png">' + ' </div>' + '</div>' ); tab.append(block); ko.applyBindings(_viewModel, block.get(0));

By calling the applyBindings the blocks are draggable, perfect. Except... I can not drop them in the newsletter. I am receiving the following error "Uncaught Found a non-typed def".

Which makes sense, because internally there is no definition of my newsly added block, there is no template for it. So my thought is I have to, somehow, add my HTML template to Knockout/Mosaico so when I drop my blocks the correct template will be added to the newsletter.

Ideally I would love to have a function something like createBlock(name, placeholder, template) and let this function handle everything else.

bago commented 7 years ago

Writing dom via jquery and applybindings you have a difficult road ahead. You should simply work on the "draggable" part of your tool and let mosaico "drag a JS object": everything else will just work.

This is hard stuff and I can't help via theoretical github issue : if you share your github branch in the open I'll try to have a look at it. If you don't want to work in the open I can't help you here (you can buy a commercial license including support plan)

Renegade2u commented 7 years ago

Hey thanks,

I ended up using my own draggable and $('.sortable-blocks-edit').on('sortreceive', combined with a viewModel.addBlock to add a pre-filled block to the newsletter.

This works. Not sure if this is the best/easiest way, but it is a working way :)