manager: pimping up

combo/manager/static/css/style.css

@@ -0,0 +1,117 @@
+div#meta {
+	margin-bottom: 1em;
+}
+
+div#available-cells {
+	width: 15em;
+	float: left;
+}
+
+div#placeholders {
+	padding-left: 17em;
+	min-height: 5em;
+}
+
+div.placeholder {
+	margin-bottom: 2em;
+}
+
+div.cell-list > div {
+	border: 1px solid #eee;
+	margin: 1ex 0;
+	box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 1px 0px;
+	position: relative;
+}
+
+div.cell-list > div > div {
+	padding: 1ex;
+	display: none;
+}
+
+div.cell-list > div.toggled > div {
+	display: block;
+}
+
+div.cell h3 {
+	background: #fafafa;
+	margin: 0;
+	padding: 1ex;
+	min-width: 10em;
+	color: #222;
+	font-weight: normal;
+}
+
+div.cell-list div h3:after {
+	font-family: FontAwesome;
+	content: "\f107"; /* angle-down */
+	position: absolute;
+	right: 1em;
+}
+
+div.cell-list div.toggled h3:after {
+	content: "\f106"; /* angle-up */
+}
+
+div.cell-list button.save {
+	position: absolute;
+	right: 2ex;
+	bottom: 1ex;
+}
+
+
+div.cell div.buttons {
+	margin-top: 2em;
+	margin-bottom: 1ex;
+}
+
+div.cell-list .empty-cell {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #eee;
+	height: 3em;
+}
+
+div.cell-list {
+	min-height: 3em;
+}
+
+#available-cells ul {
+	list-style: none;
+	padding: 0;
+	margin: 1ex 0;
+	padding-left: 1em;
+}
+
+li.cell-type input {
+	display: none;
+}
+
+li.cell-type label {
+	display: block;
+	margin: 1ex 0;
+}
+
+li.cell-type li {
+	margin: 1ex 0;
+}
+
+li.cell-type input + span {
+	display: block;
+	background: #fafafa;
+	padding: 1ex;
+	box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 1px 0px;
+	border: 1px solid #eee;
+}
+
+li.cell-type input ~ ul {
+	display: none;
+}
+
+li.cell-type input:checked + span {
+	border-color: #888;
+}
+
+li.cell-type input:checked ~ ul {
+	display: block;
+}

combo/manager/static/js/combo.manager.js

@@ -0,0 +1,54 @@
+$(function() {
+  $('div.cell-list h3').on('click', function() {
+    $(this).parent().toggleClass('toggled');
+  });
+  $('div.cell-list a.close-button').on('click', function() {
+    $(this).parents('.toggled').toggleClass('toggled');
+    return false;
+  });
+  $('.cell-list').sortable({
+     connectWith: '.cell-list',
+     handle: 'h3',
+     helper: 'clone',
+     placeholder: 'empty-cell',
+     update: function(event, ui) {
+       var new_order = Object();
+       $('.cell').each(function(i, x) {
+           new_order['pos_' + $(x).data('cell-id')] = i;
+           new_placeholder = $(x).closest('.placeholder').data('placeholder-key');
+           new_order['ph_' + $(x).data('cell-id')] = new_placeholder;
+       });
+       $.ajax({
+           url: $('#placeholders').data('cell-order-url'),
+           data: new_order
+       });
+     }
+  });
+  $('#available-cells button').on('click', function() {
+    window.location = $(this).data('add-url');
+    return false;
+  });
+  $('div.cell button.save').on('click', function(event) {
+     var $button = $(this);
+     var $form = $(this).closest('form');
+     var button_label = $button.text();
+     for (instance in CKEDITOR.instances) {
+        CKEDITOR.instances[instance].updateElement();
+     }
+     $.ajax({
+         url: $form.attr('action'),
+         data: $form.serialize(),
+         type: 'POST',
+         beforeSend: function() { $button.attr('disabled', 'disabled'); },
+         success: function() { $button.attr('disabled', null); }
+     });
+     return false;
+  });
+  $('li.cell-type span').on('click', function() {
+    var $checked_input = $(this).parent().find(':checked');
+    if ($checked_input.length) {
+      $checked_input.prop('checked', null);
+      return false;
+    }
+  });
+});

combo/manager/templates/combo/cell_form.html

@@ -5,8 +5,10 @@
 {% else %}
   <p>There are no options for this cell</p>
 {% endif %}
-<a href="#">Delete</a> | <a href="#">Close</a>
+<div class="buttons">
+<a href="#">Delete</a> | <a class="close-button" href="#">Close</a>
 {% if form %}
-<button>Save</button>
+<button class="save">Save</button>
 {% endif %}
+</div>
 </form>

combo/manager/templates/combo/manager_base.html

@@ -5,7 +5,10 @@
 {% block site-title %}Combo{% endblock %}
 {% block footer %}Combo — Copyright © Entr'ouvert{% endblock %}
 
+{% block homepage-url %}{% url 'combo-manager-homepage' %}{% endblock %}
+
 {% block extrascripts %}
 <script src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
 <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
+<script src="{% static "js/combo.manager.js" %}"></script>
 {% endblock %}

combo/manager/templates/combo/page_view.html

@@ -17,22 +17,28 @@
 <h2>Available cells</h2>
 <ul>
 {% for cell_type in cell_types %}
-  <li>{{ cell_type.name }}
+<li class="cell-type">
+  <label><input type="radio" name="cell_type" value="{{ cell_type.content_type.id }}"/>
+    <span>{{ cell_type.name }}</span>
+    <ul>
     {% for placeholder in placeholders %}
-     <a href="{% url 'combo-manager-page-add-cell' page_pk=object.id cell_type=cell_type.content_type.id ph_key=placeholder.key %}">→ {{ placeholder.key }}</a>
+      <li><button data-add-url="{% url 'combo-manager-page-add-cell' page_pk=object.id cell_type=cell_type.content_type.id ph_key=placeholder.key %}">→ {{ placeholder.name }}</button></li>
     {% endfor %}
-  </li>
+    </ul>
+  </label></li>
 {% endfor %}
 </ul>
 </div>
 
-<div id="placeholders">
+<div id="placeholders"
+     data-cell-order-url="{% url 'combo-manager-cell-order' page_pk=object.id %}"
+     >
 {% for placeholder in placeholders %}
-  <div data-placeholder-key="{{ placeholder.key }}">
+  <div class="placeholder" data-placeholder-key="{{ placeholder.key }}">
     <h2>{{ placeholder.name }}</h2>
     <div class="cell-list">
       {% for cell in placeholder.cells %}
-      <div>
+      <div class="cell" data-cell-id="{{ cell.id }}">
         <h3>{{ cell }}</h3>
         <div>{% cell_form cell %}</div>
       </div>

combo/manager/urls.py

@@ -31,5 +31,7 @@ urlpatterns = patterns('combo.views',
             name='combo-manager-page-add-cell'),
         url(r'^pages/(?P<page_pk>\w+)/cell/(?P<cell_pk>\w+)/$', views.page_edit_cell,
             name='combo-manager-page-edit-cell'),
+        url(r'^pages/(?P<page_pk>\w+)/order$', views.cell_order,
+            name='combo-manager-cell-order'),
         (r'^ckeditor/', include('ckeditor.urls')),
 )

combo/manager/views.py

@@ -18,7 +18,7 @@ from django.conf import settings
 from django.contrib.contenttypes.models import ContentType
 from django.core.urlresolvers import reverse
 from django.forms import models as model_forms
-from django.http import Http404
+from django.http import HttpResponse, Http404
 from django.views.decorators.csrf import requires_csrf_token
 from django.views.generic import (TemplateView, RedirectView, DetailView,
         CreateView, UpdateView, ListView)
@@ -123,3 +123,16 @@ class PageEditCellView(UpdateView):
         return reverse('combo-manager-page-view', kwargs={'pk': self.kwargs.get('page_pk')})
 
 page_edit_cell = PageEditCellView.as_view()
+
+
+def cell_order(request, page_pk):
+    for cell in CellBase.objects.filter(page_id=page_pk):
+        old_order = cell.order
+        old_placeholder = cell.placeholder
+        new_order = int(request.GET.get('pos_' + str(cell.id)))
+        new_placeholder = request.GET.get('ph_' + str(cell.id))
+        if new_order != old_order or new_placeholder != old_placeholder:
+            cell.order = new_order
+            cell.placeholder = new_placeholder
+            cell.save()
+    return HttpResponse(status=206)