kb: add navigation to knowledge pages

welco/kb/templates/kb/page_detail_fragment.html

@@ -0,0 +1,4 @@
+<div class="page">
+<h3>{{ object.title }}</h3>
+{{ object.content|safe }}
+</div>

welco/kb/templates/kb/zone.html

@@ -1,6 +1,13 @@
 {% load i18n %}
-<div>
-  <input autocomplete="off" data-autocomplete-json="{% url 'kb-page-search-json' %}" name="q"/>
-  <ul class="result">
-  </ul>
+<div data-page-fragment-url="{% url 'kb-zone' %}/">
+  <div class="search">
+    <input autocomplete="off" data-autocomplete-json="{% url 'kb-page-search-json' %}" name="q"/>
+    <ul class="result">
+    </ul>
+  </div>
+  <div class="page">
+  </div>
+  <div class="back-to-empty">
+    <a href="#" class="reset">{% trans 'Back to search' %}</a>
+  </div>
 </div>

welco/kb/views.py

@@ -58,6 +58,13 @@ class PageDetailView(DetailView):
 page_detail = PageDetailView.as_view()
 
 
+class PageDetailFragmentView(DetailView):
+    model = Page
+    template_name = 'kb/page_detail_fragment.html'
+
+page_detail_fragment = PageDetailFragmentView.as_view()
+
+
 class PageDeleteView(DeleteView):
     model = Page
     success_url = reverse_lazy('kb-home')
@@ -91,7 +98,7 @@ def page_search_json(request):
 
     result = []
     for item in sqs:
-        result.append({'title': item.title, 'pk': item.pk});
+        result.append({'title': item.title, 'slug': item.slug});
 
     response = HttpResponse(content_type='application/json')
     json.dump({'data': result}, response, indent=2)

welco/static/css/style.css

@@ -143,3 +143,45 @@ div.objects-list > div.level-1 {
 form#kb-search {
 	margin-bottom: 2em;
 }
+
+.kb div.search input {
+	margin: 0 1ex;
+}
+
+.kb div.page {
+	padding: 1ex;
+}
+
+.kb div.page h3 {
+	margin-top: 0;
+}
+
+.kb.has-page-displayed div.search {
+	display: none;
+}
+
+.kb.top.has-page-displayed div.search {
+	display: block;
+	width: 20em;
+	float: left;
+}
+
+.kb.top.has-page-displayed div.search ul {
+	margin-right: 1em;
+}
+
+.kb.top.has-page-displayed div.page {
+	width: calc(100% - 22em);
+	float: left;
+}
+
+.kb .back-to-empty,
+.kb.top.has-page-displayed .back-to-empty {
+	display: none;
+}
+
+.kb.has-page-displayed .back-to-empty {
+	display: block;
+	padding: 1ex;
+	border-top: 1px dotted #ccc;
+}

welco/static/js/welco.js

@@ -15,6 +15,7 @@ $(function() {
           success: function(data) {
                   $(zone).find('> div').replaceWith(data);
                   $(zone).find('select').select2();
+                  $(zone).removeClass('has-page-displayed');
           },
           error: function(error) { console.log(':(', error); }
       });
@@ -35,6 +36,26 @@ $(function() {
     });
     return false;
   });
+
+  $('.kb').delegate('a.reset', 'click', function() {
+    var source_type = $('div.source div[data-source-type]').data('source-type');
+    var source_pk = $('div.source .active[data-source-pk]').data('source-pk');
+    $('.cell.kb[data-zone-url]').each(function(idx, zone) {
+      $.ajax({url: $(zone).data('zone-url'),
+          data: {source_type: source_type,
+                 source_pk: source_pk},
+          async: true,
+          dataType: 'html',
+          success: function(data) {
+                  $(zone).find('> div').replaceWith(data);
+                  $(zone).find('select').select2();
+                  $(zone).removeClass('has-page-displayed');
+          },
+          error: function(error) { console.log(':(', error); }
+      });
+    });
+  });
+
   $('.kb').delegate('input', 'keyup', function() {
     var q = $(this).val();
     var search_result_ul = $(this).parent().find('ul.result');
@@ -42,13 +63,27 @@ $(function() {
     $.getJSON($(this).data('autocomplete-json'),
             {'q': q},
             function (response) {
-                    console.log('success!', response);
                     $(response.data).each(function(idx, elem) {
-                            $('<li><a data-page-pk="' + elem.pk + '">' + elem.title + '</a>' + '</li>'
+                            $('<li><a href="#" data-page-slug="' + elem.slug + '">' + elem.title + '</a>' + '</li>'
                              ).appendTo(search_result_ul);
                     });
             }
     );
     return false;
   });
+  $('.kb').delegate('ul.result a', 'click', function() {
+    var page_slug = $(this).data('page-slug');
+    var fragment_url = $(this).parents('[data-page-fragment-url]').data('page-fragment-url') + page_slug + '/';
+    $.ajax({url: fragment_url,
+            method: 'GET',
+            dataType: 'html',
+            success: function(data) {
+              $('.kb .page').replaceWith(data);
+              $('.kb').addClass('has-page-displayed');
+            },
+            error: function(error) { console.log(':(', error); }
+    });
+
+    return false;
+  });
 });

welco/urls.py

@@ -30,6 +30,7 @@ urlpatterns = patterns('',
     url(r'^kb/search/$', 'welco.kb.views.page_search', name='kb-page-search'),
     url(r'^kb/search/json/$', 'welco.kb.views.page_search_json', name='kb-page-search-json'),
     url(r'^kb/(?P<slug>[\w-]+)/$', 'welco.kb.views.page_detail', name='kb-page-view'),
+    url(r'^ajax/kb/(?P<slug>[\w-]+)/$', 'welco.kb.views.page_detail_fragment', name='kb-page-fragment'),
     url(r'^kb/(?P<slug>[\w-]+)/edit$', 'welco.kb.views.page_edit', name='kb-page-edit'),
     url(r'^kb/(?P<slug>[\w-]+)/delete$', 'welco.kb.views.page_delete', name='kb-page-delete'),