wip : facettes ui

templates/web/prod/index.html.twig

@@ -332,8 +332,9 @@
             <div id="headBlock" class="PNB" style="height: 90px; bottom: auto;">
                 <div class="searchFormWrapper">
                     <form id="searchForm" method="POST" action="{{ path('prod_query') }}" name="phrasea_query" class="phrasea_query">
+                        <input id="SENT_query" name="qry" type="hidden" value="{{app['settings'].getUserSetting(app['authentication'].getUser(), 'start_page_query')}}">
                         <div class="input-append">
-                            <input autocomplete="off" class="search query" id="EDIT_query" name="qry" type="text" name="qry" value="{{app['settings'].getUserSetting(app['authentication'].getUser(), 'start_page_query')}}">
+                            <input id="EDIT_query" name="fake_qry" type="text" autocomplete="off" class="search query" value="{{app['settings'].getUserSetting(app['authentication'].getUser(), 'start_page_query')}}">
                             <a id="ADV_query" href="#" class="btn btn-inverse adv_trigger adv_search_button">
                                 <img src="/skins/icons/settings.png" title="{{ 'Advanced Search' | trans }}"/>
                             </a>

templates/web/prod/thesaurus.js.twig

@@ -500,9 +500,8 @@ function T_search(menuItem, menu, cmenu, e, label)
     }
   }
 
-  $('form[name="phrasea_query"] input[name="qry"]').val(v);
   checkFilters();
-  newSearch();
+  newSearch(v);
 }
 
 
@@ -807,9 +806,8 @@ function doThesSearch(type, sbid, term, field)
     v = '[' + term + ']';
   else
     v = '"' + term + '" IN ' + field;
-  $('form[name="phrasea_query"] input[name="qry"]').val(v);
   checkFilters();
-  newSearch();
+  newSearch(v);
 }
 
 

www/skins/prod/000000/prodcolor.css

@@ -2047,6 +2047,74 @@ H4 {
 
 /******* PROPOSALS ************************************************************/
 
+#proposals *:focus{
+    outline: none;
+}
+
+#proposals UL.fancytree-container {
+    background-color:  #3b3b3b;
+    border: 0px none transparent;
+    overflow-x: hidden;
+}
+
+#proposals UL.fancytree-container UL {
+    padding: 0;
+    padding-left: 6px;
+}
+
+#proposals .fancytree-folder {
+    font-weight: bold;
+    height: 30px;
+    padding-top: 7px;
+    border-left: 4px solid #076882;
+}
+
+#proposals .fancytree-expander {
+    display: none;
+}
+
+#proposals .fancytree-title {
+    color: #FFFFFF;
+    background-color: transparent;
+    border: 0px none transparent;
+}
+
+#proposals .facetFilter {
+    font-weight: normal;
+    position:absolute;
+    width:100px;
+    height:22px;
+    border-radius: 4px;
+    right:10px;
+    background-color: #606060;
+    padding-top: 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+#proposals .facetFilter-label {
+    position:absolute;
+    left:4px;
+    right: 14px;
+    overflow:hidden;
+}
+
+#proposals .facetFilter-gradient {
+    position:absolute;
+    width:20px;
+    right: 0px;
+    background-image: linear-gradient(to right, transparent, #606060);
+}
+
+#proposals .facetFilter-closer {
+    position:absolute;
+    right:3px;
+    cursor: pointer;
+}
+
+/******* /PROPOSALS ************************************************************/
+
+
 .proposals {                    /*** page proposals.php ***/
     POSITION: relative;
     LEFT: 5px;

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

@@ -28,7 +28,8 @@ function getHome(cas, page) {
 
     switch (cas) {
         case 'QUERY':
-            newSearch();
+            selectedFacetValues = [];
+            newSearch($("#EDIT_query").val());
             break;
         case 'PUBLI':
             answAjax = $.ajax({
@@ -333,18 +334,19 @@ function reset_adv_search() {
 }
 
 function search_doubles() {
+    selectedFacetValues = [];
     $('#EDIT_query').val('sha256=sha256');
-    newSearch();
+    newSearch('sha256=sha256');
 }
 
-function newSearch() {
+function newSearch(query) {
     p4.Results.Selection.empty();
 
     clearAnswers();
-    var val = $('#searchForm input[name="qry"]').val();
+    $('#searchForm input[name="qry"]').val(query);
     var histo = $('#history-queries ul');
 
-    histo.prepend('<li onclick="doSpecialSearch(\'' + val.replace(/\'/g, "\\'") + '\')">' + val + '</li>');
+    histo.prepend('<li onclick="doSpecialSearch(\'' + query.replace(/\'/g, "\\'") + '\')">' + query + '</li>');
 
     var lis = $('li', histo);
     if (lis.length > 25) {
@@ -432,9 +434,8 @@ function initAnswerForm() {
 
     var searchForm = $('#searchForm');
     $('button[type="submit"]', searchForm).bind('click', function () {
-
+        selectedFacetValues = [];
-        newSearch();
+        newSearch($("#EDIT_query").val());
-        $('searchForm').trigger('submit');
         return false;
     });
 
@@ -518,6 +519,8 @@ function initAnswerForm() {
     }
 }
 
+var selectedFacetValues = [];
+
 function loadFacets(facets) {
     // Convert facets data to fancytree source format
     var treeSource = _.map(facets, function(facet) {
@@ -525,7 +528,8 @@ function loadFacets(facets) {
         var values = _.map(facet.values, function(value) {
             return {
                 title: value.value + ' (' + value.count + ')',
-                query: value.query
+                query: value.query,
+                label: value.value
             }
         });
         // Facet
@@ -536,61 +540,97 @@ function loadFacets(facets) {
             expanded: true
         };
     });
-    return getFacetsTree().reload(treeSource);
+
+    var ret = getFacetsTree().reload(treeSource);
+
+    $(".facetFilter-closer").click(
+        function(event) {
+            event.stopPropagation();
+            var facetTitle = $(this).data("facetTitle");
+            delete selectedFacetValues[facetTitle];
+            facetCombinedSearch();
+            return false;
+        }
+    );
+
+    return ret;
 }
 
 function getFacetsTree() {
     var $facetsTree = $('#proposals');
     if (!$facetsTree.data('ui-fancytree')) {
         $facetsTree.fancytree({
+            clickFolderMode: 3, // activate and expand
+            icons:false,
             source: [],
             activate: function(event, data){
                 var query = data.node.data.query;
-                if (!query) return;
+                if (query) {
-                facetCombinedSearch(query);
+                    var facet = data.node.parent;
+                    selectedFacetValues[facet.title] = data.node.data;
+                    facetCombinedSearch();
+                }
+            },
+            renderNode: function(event, data){
+                var facetFilter = "";
+                if(data.node.folder && !_.isUndefined(selectedFacetValues[data.node.title])) {
+                    facetFilter = selectedFacetValues[data.node.title].label;
+
+                    var s_label = document.createElement("SPAN");
+                    s_label.setAttribute("class", "facetFilter-label");
+                    s_label.appendChild(document.createTextNode(facetFilter));
+
+                    var s_closer = document.createElement("A");
+                    s_closer.setAttribute("class", "facetFilter-closer");
+                    s_closer.appendChild(document.createTextNode("X"));
+
+                    var s_gradient = document.createElement("SPAN");
+                    s_gradient.setAttribute("class", "facetFilter-gradient");
+                    s_gradient.appendChild(document.createTextNode("\u00A0"));
+
+                    s_label.appendChild(s_gradient);
+
+                    var s_facet = document.createElement("SPAN");
+                    s_facet.setAttribute("class", "facetFilter");
+                    s_facet.appendChild(s_label);
+                    s_closer = $(s_facet.appendChild(s_closer));
+                    s_closer.data("facetTitle", data.node.title);
+
+                    $(".fancytree-folder", data.node.li).append(
+                        $(s_facet)
+                    );
+                }
             }
         });
+
     }
     return $facetsTree.fancytree('getTree');
 }
 
-var $searchForm;
+function facetCombinedSearch() {
-var $searchInput;
-var $facetsBackButton;
-var facetsQueriesStack = [];
 
-function facetCombinedSearch(query) {
+    var q = $("#EDIT_query").val();
-    var currentQuery = $searchInput.val();
+    console.debug(selectedFacetValues);
-    facetsQueriesStack.push(currentQuery);
+    var q_facet = "";
-    $facetsBackButton.show();
+    _.each(_.values(selectedFacetValues), function(facetValue) {
-    if (currentQuery) {
+        q_facet += (q_facet ? " AND " : "") + '(' + facetValue.query + ')';
-        query = '(' + currentQuery + ') AND (' + query + ')';
+    });
+    if(q_facet) {
+        if(q) {
+            q = '(' + q + ') AND '
+        }
+        q += q_facet;
     }
-    facetSearch(query);
-}
 
-function facetSearch(query) {
     checkFilters();
-    newSearch();
+    newSearch(q);
-    $searchInput.val(query);
-    $searchForm.trigger('submit');
 }
 
-function facetsBack() {
+
-    var previousQuery = facetsQueriesStack.pop();
+
-    if (previousQuery != null) {
+
-        facetSearch(previousQuery);
-    }
-    if (!facetsQueriesStack.length) {
-        $facetsBackButton.hide();
-    }
-}
 
 $(document).ready(function() {
-    $searchForm = $('#searchForm');
-    $searchInput = $searchForm.find('input[name="qry"]');
-    $facetsBackButton = $('#facets-back-btn');
-    $facetsBackButton.on('click', facetsBack);
 });
 
 function answerSizer() {
@@ -2420,8 +2460,9 @@ function doSpecialSearch(qry, allbase) {
     if (allbase) {
         checkBases(true);
     }
+    selectedFacetValues = [];
     $('#EDIT_query').val(decodeURIComponent(qry).replace(/\+/g, " "));
-    newSearch();
+    newSearch(qry);
 }
 
 function clktri(id) {
@@ -2451,8 +2492,9 @@ function chgProp(path, v, k) {
     for (i = 0; i < q.length; i++)
         q2 += q.charCodeAt(i) == 160 ? " " : q.charAt(i);
 
+    selectedFacetValues = [];
     $('#EDIT_query').val(q);
-    newSearch();
+    newSearch(q);
 
     return(false);
 }