Drag and Drop in Mosaic edit tile modal

I am working on a custom ContentListingTile with sorting support. Basically this works, but now I want to make it nicer for the editor with drag and drop support in the tile edit area and this does not work for me currently. I customized the html_result of the querystring widget:

<div tal:repeat="item results" class="mosaic-tile moveable">
...
</div>

    <script type="text/javascript">
           $(function(){ 
       $('.mosaic-tile').each(function(){
      var tile = new Tile($(this).parent());
      tile.makeMoveable();
    });
   });
    </script>

but still this wasn't picked up.

Any ideas how to achive this? Is is possible to deactivate the mosaic Drag&Drop in the tile edit modal or did I miss something in the JavaScript / markup.

Thanks for your help.

A little bonus: I plan to PR this to plone.app.standardtiles once this works for me :wink: It might be useful for others too.

@tomgross you know that the standard content listing tile is getting replaced very soon with the work from @mikkohu right? He will be preparing PR in the next couple of weeks. Have a look at his video.

Hi @djay. Thanks for your answer. Yes I have seen the video and it looks awsome! I am very much looking forward to try this out myself. What I did not see is a sorting option. Is it included? It is what I need.

Hi.

My version of ContentListingTile has the same sorting as the old one. You can edit it from the modal window and sort list items asc or desc according a search parameter.

If I understood correctly, you want to be able to change sorting in mosaic editor? That propably won't clash with my code too much. However if you do make changes to the list result templates, I don't use them myself. Rather I generate the list template during runtime according the html content defined by user.

I'm not sure if I can help you, but I'd like to make sure we won't have too much merge problems when we do our PR:s. Can you describe me a default use case for your sorting?

Hi @mikkohu

What is currently possible is to use sorting based on a sortable index. Which is not sufficient in my case. I have folders with a lot of person objects. I want to display various person lists in different orderings in different contexts. So the editor needs a way to set the ordering on the widget itself. I introducted a new field which handles the ordering. This works from the backend side. Now I want to polish the frontend. Does that make sense?

No worries. I won't interfere with your PRs. Yours have priority :wink:

@tomgross Are you sure that it's Mosaic and not the modal, which is the issue? Modal does block all events from bubbling.

@datakurre No, I'm not sure but at least this minimal example works as expected with modal and sorting:

<html metal:use-macro="context/main_template/macros/master">
<body>
    <metal:main fill-slot="main">
    <div id="content-core">
   <a href="#modal1" class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal"
                     data-pat-plone-modal="width: 400">Modal basic</a>
   <div id="modal1" style="display: none">
     <h1>Basic modal!</h1>
   <ul class="pat-sortable">
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
   </ul>
   </div>
    </div>
    </metal:main>
</body>
</html>
1 Like

I think the way it would work with these new customisable listing tiles is like this.

  1. user creates a custom listing tile that includes a table with a header and a single example row with metadata tiles inside each cell.
  2. there is a tinymce table style which can add pat-sortable to the table. or UL.
  3. the result will include that custom style and therefore the pattern.

Still don't understand why you want the result to be able to be dragged and dropped though. This is Mockup sortable pattern?

@tomgross Did you find the reason? I'm puzzled, how Mosaic DnD could affect in modal, which should be able to capture bubbling event before they reach the DnD layout are behind the modal :confused:

@datakurre unfortunately not. But your intention seems to be right. Mosaic is not the cause. I tried the customized querystringwidget on a collection and it didn't work either.

I suspect it has something to do with the inclusion/triggering the sortable pattern in edit views.

I have the following scenarios

  • Minimal View with sortable pattern: works
  • Collection edit view with customized querystring results template: does not work
  • Tile edit in a modal in the mosaic editor: does not work

I don't understand why the sortable pattern works in the view mode but not in edit mode. Any ideas or pointers someone?

Meanwhile I managed to find a solution for this. After fixing a bug in mockup, which prevented to register callback functions for the sortabla pattern https://github.com/plone/mockup/pull/794 I was able to write a custom mockup patter, which acts as a glue between the querystring and the sortable pattern.

There is a first alpha version available on pypi: https://pypi.python.org/pypi/collective.sortedlisting with a short demo video here: https://www.youtube.com/watch?v=VNLGuDHVJ_o

In your use case, is it important that the listing is based on a search query? Or is the query only a tool for searching items for otherwiser static listing? (If the latter, maybe we could have a completely new tile for this?)

@datakurre The implemention desicions were:

  • Reusing components
  • Make it easy for the editor to create sortable listings
  • Do fast / efficient rendering (by using only catalog data)
  • Be flexible / dynamic to mix sorted and unsorted data. Think of top-news you want to have on top of a listing but additional news are sorted according their effective date.