Add base ui for facets

Gruntfile.js

@@ -69,6 +69,15 @@ module.exports = function(grunt) {
                 "dest": "<%= path.asset %>/backbone-amd/",
                 "flatten": true
             },
+            "fancytree": {
+                "expand": true,
+                "src": [
+                    "dist/*",
+                    "dist/**/*"
+                ],
+                "cwd": "<%= path.bower %>/fancytree",
+                "dest": "<%= path.asset %>/fancytree/"
+            },
             "blueimp": {
                 "expand": true,
                 "src": "js/load-image.js",

bower.json

@@ -28,7 +28,8 @@
         "autobahnjs": "~0.8.0",
         "when": "~2.7.0",
         "web-socket-js": "~1.0.1",
-        "jquery.treeview": "1.4.1"
+        "jquery.treeview": "1.4.1",
+        "fancytree": "~2.7"
     },
     "devDependencies": {
         "mocha": "latest",

templates/web/prod/index.html.twig

@@ -104,9 +104,12 @@
             background-color: #{{app['settings'].getUserSetting(app['authentication'].getUser(), 'background-selection', '404040')}};
         }
     </style>
+    <!-- Include Fancytree skin and library -->
+    <link href="{{ path('minifier', { 'f' : 'assets/fancytree/dist/skin-win8/ui.fancytree.min.css'}) }}" rel="stylesheet" type="text/css">
 {% endblock %}
 
 {% block javascript %}
+    <script src="{{ path('minifier', { 'f' : 'assets/fancytree/dist/jquery.fancytree-all.js'}) }}" type="text/javascript"></script>
     {% include "common/templates.html.twig" %}
 {% endblock %}
 

www/skins/prod/jquery.main-prod.js

@@ -340,7 +340,6 @@ function search_doubles() {
 }
 
 function newSearch() {
-    $('#proposals').empty();
     p4.Results.Selection.empty();
 
     clearAnswers();
@@ -492,10 +491,51 @@ function initAnswerForm() {
                     });
 
                 });
+
                 console.table(toDisplay);
 
+                var treeData = [];
+                _.each(aggs, function(value, key) {
+                    var entry = {
+                        "title" : key,
+                        "key": key,
+                        "folder": true,
+                        "children" : []
+                    };
+                    _.each(value.buckets, function(bucket) {
+                        entry.children.push({
+                            "title": bucket.key + ' ('+ bucket.doc_count + ')',
+                            "key": bucket.key,
+                            "query": bucket.key + " IN " + key
+                        });
+                    });
+                    treeData.push(entry);
+                });
+
                 $('#answers').empty().append(datas.results).removeClass('loading');
 
+                var $tree = $("#proposals");
+
+                if ($tree.data("ui-fancytree")) {
+                    $tree.fancytree("destroy");
+                }
+
+                if (treeData.length > 0) {
+                    $tree.fancytree({
+                        source: treeData,
+                        activate: function(event, data){
+                            var node = data.node;
+                            if (typeof node.data.query === "undefined") {
+                                return;
+                            }
+                            $('form[name="phrasea_query"] input[name="qry"]').val(node.data.query);
+                            checkFilters();
+                            newSearch();
+                            $('searchForm').trigger('submit');
+                        }
+                    });
+                }
+
                 $("#answers img.lazyload").lazyload({
                     container: $('#answers')
                 });
@@ -506,10 +546,6 @@ function initAnswerForm() {
                     $('#IMGT_' + el).addClass('selected');
                 });
 
-                if (datas.phrasea_props && $.trim(datas.phrasea_props) !== '') {
-                    $('#proposals').empty().append(datas.phrasea_props);
-                    $('#idFrameC li.proposals_WZ').addClass('active');
-                }
                 p4.tot = datas.total_answers;
                 p4.tot_options = datas.form;
                 p4.tot_query = datas.query;