From 01bbd3a4dad78e775024cda5a519baa62e2ddb59 Mon Sep 17 00:00:00 2001 From: Jean-Yves Gaulier Date: Thu, 26 Mar 2015 16:42:49 +0100 Subject: [PATCH] wip : facettes ui --- templates/web/prod/index.html.twig | 3 +- templates/web/prod/thesaurus.js.twig | 6 +- www/skins/prod/000000/prodcolor.css | 68 ++++++++++++++ www/skins/prod/jquery.main-prod.js | 128 ++++++++++++++++++--------- 4 files changed, 157 insertions(+), 48 deletions(-) diff --git a/templates/web/prod/index.html.twig b/templates/web/prod/index.html.twig index 844b04b9ee..299e63352b 100644 --- a/templates/web/prod/index.html.twig +++ b/templates/web/prod/index.html.twig @@ -332,8 +332,9 @@
+
- + diff --git a/templates/web/prod/thesaurus.js.twig b/templates/web/prod/thesaurus.js.twig index cf4bc8a51f..e102e2269e 100644 --- a/templates/web/prod/thesaurus.js.twig +++ b/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); } diff --git a/www/skins/prod/000000/prodcolor.css b/www/skins/prod/000000/prodcolor.css index 7e0bdafc0e..28d7e0c78d 100644 --- a/www/skins/prod/000000/prodcolor.css +++ b/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; diff --git a/www/skins/prod/jquery.main-prod.js b/www/skins/prod/jquery.main-prod.js index f3531710c2..79755ad6bc 100644 --- a/www/skins/prod/jquery.main-prod.js +++ b/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('
  • ' + val + '
    • '); + histo.prepend('
  • ' + query + '
    • '); var lis = $('li', histo); if (lis.length > 25) { @@ -432,9 +434,8 @@ function initAnswerForm() { var searchForm = $('#searchForm'); $('button[type="submit"]', searchForm).bind('click', function () { - - newSearch(); - $('searchForm').trigger('submit'); + selectedFacetValues = []; + newSearch($("#EDIT_query").val()); 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; - facetCombinedSearch(query); + if (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; -var $searchInput; -var $facetsBackButton; -var facetsQueriesStack = []; +function facetCombinedSearch() { -function facetCombinedSearch(query) { - var currentQuery = $searchInput.val(); - facetsQueriesStack.push(currentQuery); - $facetsBackButton.show(); - if (currentQuery) { - query = '(' + currentQuery + ') AND (' + query + ')'; + var q = $("#EDIT_query").val(); + console.debug(selectedFacetValues); + var q_facet = ""; + _.each(_.values(selectedFacetValues), function(facetValue) { + q_facet += (q_facet ? " AND " : "") + '(' + facetValue.query + ')'; + }); + if(q_facet) { + if(q) { + q = '(' + q + ') AND ' + } + q += q_facet; } - facetSearch(query); -} -function facetSearch(query) { checkFilters(); - newSearch(); - $searchInput.val(query); - $searchForm.trigger('submit'); + newSearch(q); } -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); }