Reduce block selection modals on page

CHANGELOG.rst

@@ -8,6 +8,10 @@ Changelog
 * Provide the actual object for a block in the ``rendered_block`` tuples to
   allow more flexibility in the templates, especially in ``container.html``.
 
+* Move the block selection modal markup from within the container into the
+  body of the page. This means we only need a single modal including all
+  available blocks. Also it avoids problems with displaying the modal.
+
 
 0.1.0
 -----

fancypages/static/fancypages/js/editor.js

@@ -161,6 +161,7 @@ fancypages.editor = {
         //load the form to select a new block to add to the container
         //and display it in a modal
         $("a[data-behaviours~=load-modal]").click(fancypages.eventHandlers.loadModal);
+        $("a[data-behaviours~=show-block-selection]").click(fancypages.eventHandlers.showBlockSelection);
 
         $('.edit-button').click(fancypages.eventHandlers.editWidget);
         $('div.delete').click(fancypages.eventHandlers.deleteWidget);
@@ -350,7 +351,6 @@ fancypages.editor = {
         }
         form.data('locked', true);
 
-        //formData.container = $(form).data('container-id');
         $.ajax({
             url: form.attr('action'),
             type: "POST",

fancypages/static/fancypages/js/event-handlers.js

@@ -72,6 +72,20 @@ fancypages.eventHandlers = {
 
     },
 
+    /**
+     * Open the block selection modal and attach the container ID of the
+     * current element to the form to make sure that submitting it to the API
+     * has access to the container that tiggered the adding of content.
+     */
+    showBlockSelection: function (ev) {
+        var elem = $(this),
+            modalElem = $(elem.data('target')),
+            containerId = elem.data('container-id');
+        $('form', modalElem).attr('data-container-id', containerId);
+        $('form input[name=container]').val(containerId);
+        modalElem.modal('show');
+    },
+
     /**
      * Load and display the content of a modal.
      */

fancypages/templates/fancypages/container.html

@@ -1,6 +1,6 @@
 {% load i18n %}
-{% load fp_block_tags %}
 {% load fp_container_tags %}
+{% load url from future %}
 
 <div class="sortable connectedSortable {% if request.fp_edit_mode %}editable-container{% endif %}"
      data-container-id="{{ container.id }}">
@@ -34,5 +34,13 @@
 </div>
 
 {% if request.fp_edit_mode %}
-    {% render_block_selection %}
+    <div class="block-add-control">
+        <a class="fp-btn fp-btn-block"
+           data-behaviours='show-block-selection'
+           data-target="#block_selection_modal"
+           data-href="{% url "fp-api:block-type-list" %}"
+           data-container-id="{{ container.id }}">
+            <i class="glyphicon-plus"></i> {% trans "Add content" %}
+        </a>
+    </div>
 {% endif %}

fancypages/templates/fancypages/dashboard/block_select.html

@@ -1,29 +1,19 @@
 {% load i18n %}
 {% load staticfiles %}
 {% load url from future %}
-<div class="block-add-control">
-    <a data-toggle="modal"
-       {#data-behaviours="load-modal"#}
-       class="fp-btn fp-btn-block"
-       data-target="#{{ container.uid }}_modal"
-       data-href="{% url "fp-api:block-type-list" %}"
-       data-container-id="{{ container.id }}">
-        <i class="glyphicon-plus"></i> {% trans "Add content" %}
-    </a>
-</div>
 
-<div id="{{ container.uid }}_modal" class="fp-modal fp-fade hide fullscreen"
+<div id="block_selection_modal" class="fp-modal fp-fade hide fullscreen"
      role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="fp-modal-header">
         <button class="fp-close" data-dismiss="modal">×</button>
         <h3>Add content</h3>
     </div>
 
     <form id="{{ container.uid }}_add_block_form"
-          data-behaviours='submit-block-form' data-container-id="{{ container.id }}"
+          data-behaviours='submit-block-form'
           method="post" action="{% url "fp-api:block-list" %}" class="add-content">
         {% csrf_token %}
-        <input name="container" value="{{ container.id }}" type="hidden"/>
+        <input name="container" value="" type="hidden"/>
         <div class="fp-modal-body">
 
             <div class='fp-tabbable'>

fancypages/templates/fancypages/editor/body.html

@@ -1,4 +1,5 @@
 {% load i18n staticfiles %}
+{% load fp_block_tags %}
 
 <div id="editor-panel">
 
@@ -48,6 +49,7 @@ <h3><i class="icon-file"></i> <span>{% trans "Page Settings" %}</span></h3>
 <div id='editor-handle'><i class="glyphicon-edit glyphicon-white"></i>edit</div>
 <div class="fp-loading" data-behaviours="loading"></div>
 
+{# the modal used for asset management #}
 <div class="fp-modal hide fullscreen" id="fullscreen-modal" tabindex="-1" role="dialog" aria-labelledby="asset-modal-label" aria-hidden="true">
     <div class="fp-modal-header">
         <button type="button" class="fp-close" data-dismiss="modal" aria-hidden="true">×</button>
@@ -56,6 +58,9 @@ <h3></h3>
     <div class="fp-modal-body"></div>
 </div>
 
+{# modal used for the selection of blocks when adding them to the container #}
+{% render_block_selection %}
+
 {# include scripts that are only required in edit mode #}
 {% include "fancypages/editor/partials/cdn_scripts.html" %}
 {% include "fancypages/editor/partials/extrascripts.html" %}

fancypages/templatetags/fp_block_tags.py

@@ -81,15 +81,11 @@ def get_content_type(obj):
     return ContentType.objects.get_for_model(obj.__class__)
 
 
-##TODO need re-write due to new registered blocks
-@register.inclusion_tag('fancypages/dashboard/block_select.html',
-                        takes_context=True)
+@register.inclusion_tag(
+    'fancypages/dashboard/block_select.html', takes_context=True)
 def render_block_selection(context):
     request = context.get('request')
     if not request or not request.fp_edit_mode:
         return u''
     grouped_blocks = library.get_grouped_content_blocks()
-    return {
-        'container': context['container'],
-        'grouped_blocks': grouped_blocks,
-    }
+    return {'grouped_blocks': grouped_blocks}

fancypages/tests/unit/test_container.py

@@ -34,8 +34,9 @@ def test_renders_block_selection_correctly(self):
         ctn_id = 15
         container = factories.ContainerFactory.build(id=ctn_id)
         html = ContainerRenderer(container, self.request_context).render()
-        self.assertIn('<div id="{0}_modal"'.format(container.uid), html)
-        self.assertIn('data-target="#{0}_modal"'.format(container.uid), html)
+        self.assertIn(
+            'data-target="#block_selection_modal"'.format(container.uid), html)
+        self.assertIn('data-container-id="{}"'.format(container.id), html)
 
 
 class TestAnObjectContainer(TestCase):