advanced search : all ajax form behaviours are working

This commit is contained in:
Bachir Soussi Chiadmi 2017-10-10 12:43:45 +02:00
parent 7bc3c13ad6
commit c90cfa63e4
5 changed files with 328 additions and 75 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 274 B

View File

@ -0,0 +1,129 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="svg2"
xml:space="preserve"
width="20"
height="20"
viewBox="0 0 20 20"
sodipodi:docname="rmfilter.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
inkscape:export-filename="/home/bach/Sites/materio/base_d7/sites/all/modules/gui/materiobasemod/images/rmfilter.png"
inkscape:export-xdpi="72"
inkscape:export-ydpi="72"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
id="defs6"><clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath22"><path
d="M 1.148,0.842 H 13.853 V 14.158 H 1.148 Z"
id="path20"
inkscape:connector-curvature="0" /></clipPath></defs><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1912"
inkscape:window-height="1021"
id="namedview4"
showgrid="false"
inkscape:zoom="23.6"
inkscape:cx="2.7879752"
inkscape:cy="14.13105"
inkscape:window-x="0"
inkscape:window-y="28"
inkscape:window-maximized="0"
inkscape:current-layer="g4568-6" /><g
id="g10"
inkscape:groupmode="layer"
inkscape:label="search"
transform="matrix(1.3333333,0,0,-1.3333333,0,20)"><g
id="g12"
transform="translate(-16.966507,1.8164)"><path
d="M 0,0 0.975,-0.975 5.188,3.238 4.213,4.213 Z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path14"
inkscape:connector-curvature="0" /></g><g
id="g16"
transform="translate(-18.114407)"><g
id="g18"
clip-path="url(#clipPath22)"><g
id="g24"
transform="translate(8.7549,14.1582)"><path
d="M 0,0 C -0.688,0 -1.35,-0.119 -1.967,-0.351 -2.581,-0.583 -3.13,-0.935 -3.599,-1.398 -4.067,-1.862 -4.443,-2.442 -4.716,-3.125 -4.99,-3.809 -5.128,-4.614 -5.128,-5.52 c 0,-0.904 0.138,-1.712 0.412,-2.402 0.273,-0.687 0.644,-1.268 1.102,-1.725 0.458,-0.459 1.005,-0.809 1.623,-1.041 0.623,-0.232 1.292,-0.35 1.991,-0.35 0.698,0 1.365,0.118 1.982,0.35 0.615,0.232 1.159,0.582 1.617,1.041 0.458,0.457 0.826,1.038 1.094,1.724 0.268,0.691 0.405,1.499 0.405,2.403 0,0.906 -0.139,1.711 -0.412,2.395 C 4.413,-2.442 4.041,-1.861 3.583,-1.397 3.124,-0.934 2.581,-0.582 1.968,-0.351 1.351,-0.119 0.688,0 0,0 m -0.016,-9.571 c -0.517,0 -0.988,0.099 -1.399,0.294 -0.412,0.195 -0.766,0.472 -1.054,0.825 -0.285,0.349 -0.506,0.779 -0.656,1.278 -0.148,0.494 -0.225,1.05 -0.225,1.654 0,0.605 0.077,1.159 0.225,1.647 0.15,0.493 0.371,0.924 0.656,1.279 0.287,0.358 0.642,0.638 1.054,0.833 0.411,0.196 0.882,0.293 1.399,0.293 0.507,0 0.973,-0.097 1.384,-0.293 0.411,-0.195 0.766,-0.472 1.054,-0.825 0.285,-0.35 0.506,-0.78 0.657,-1.278 0.149,-0.495 0.224,-1.052 0.224,-1.656 0,-0.602 -0.075,-1.159 -0.224,-1.654 C 2.928,-7.672 2.707,-8.103 2.422,-8.453 2.135,-8.805 1.78,-9.082 1.368,-9.277 0.957,-9.472 0.491,-9.571 -0.016,-9.571"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path26"
inkscape:connector-curvature="0" /></g><g
id="g28"
transform="translate(9.4307,8.6182)"><path
d="m 0,0 c 0,-0.259 -0.084,-0.464 -0.251,-0.615 -0.167,-0.153 -0.364,-0.229 -0.592,-0.229 -0.235,0 -0.436,0.076 -0.603,0.229 -0.167,0.151 -0.251,0.356 -0.251,0.615 0,0.265 0.084,0.474 0.251,0.626 0.167,0.151 0.368,0.228 0.603,0.228 0.228,0 0.425,-0.077 0.592,-0.228 C -0.084,0.474 0,0.265 0,0"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path30"
inkscape:connector-curvature="0" /></g></g></g><g
transform="matrix(-0.93526845,-0.63921764,0.93526845,-0.63921764,8.902391,13.772511)"
id="g4568-7"
style="stroke-width:0.91451848" /><g
transform="matrix(-0.6316744,0.70710678,-0.6316744,-0.70710678,6.0298881,6.3370541)"
id="g4568-6"
style="stroke-width:1.05802488"><g
id="g4641"><g
style="stroke-width:0.79386932"
id="g4568"
transform="matrix(1.3881038,0.3881038,0.3881038,1.3881038,-3.1094674,19.762142)"><path
d="M 0,0 0.975,-0.975 5.188,3.238 4.213,4.213 Z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79386932"
id="path4566"
inkscape:connector-curvature="0" /></g><path
d="m 3.6069436,26.478553 0.9749999,-0.975 4.2130001,4.213 -0.975,0.975 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.05802488"
id="path4566-2"
inkscape:connector-curvature="0" /></g><rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000001;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79604185;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect4658-7"
width="2.361141"
height="13.22239"
x="0.89098465"
y="-6.2852573"
ry="1.382954"
rx="1.1524616"
transform="matrix(-0.05625485,-0.99841644,-0.99841644,-0.05625485,0,0)" /><rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000001;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79604185;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect4658-7-3"
width="2.3611407"
height="13.22239"
x="-0.85463274"
y="-8.6827497"
ry="1.382954"
rx="1.1524616"
transform="matrix(-0.99841644,-0.05625485,0.05625485,0.99841644,0,0)" /></g><g
id="g4634"
transform="translate(-19.369704,-16.144068)"><path
d="M 8.8885816,13.772511 H 7.0648081 V 4.8907006 h 1.8237735 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1"
id="path4566-5"
inkscape:connector-curvature="0" /><g
style="stroke-width:0.91451848"
id="g4568-7-9"
transform="matrix(-0.93526847,-0.63921764,0.93526847,-0.63921764,8.888582,5.6093)"><path
d="M 0,0 0.975,-0.975 5.188,3.238 4.213,4.213 Z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.91451848"
id="path4566-5-1"
inkscape:connector-curvature="0" /></g></g><path
d="m -10.544509,-9.1411866 c 0,0.259 -0.084,0.464 -0.251,0.615 -0.167,0.153 -0.364,0.229 -0.592,0.229 -0.235,0 -0.436,-0.076 -0.603,-0.229 -0.167,-0.151 -0.251,-0.356 -0.251,-0.615 0,-0.265 0.084,-0.474 0.251,-0.626 0.167,-0.151 0.368,-0.228 0.603,-0.228 0.228,0 0.425,0.077 0.592,0.228 0.167,0.152 0.251,0.361 0.251,0.626"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999994"
id="path30-2"
inkscape:connector-curvature="0" /></g></svg>

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

@ -735,7 +735,8 @@ function materio_search_api_advanced_search_form($form, &$form_state){
// dsm($form_state, 'form_state');
// dsm($form, 'form');
// global $user;
$form = array();
// $form = array();
$values = $form_state['values'];
// add a back to search/base home bouton if on explore/foo
$args = arg();
@ -751,124 +752,194 @@ function materio_search_api_advanced_search_form($form, &$form_state){
);
}
// filters
// filters form container
$form['filters'] = array(
'#type' => 'container',
'#prefix' => '<div id="advancedsearch-filters">',
'#suffix' => '</div>',
);
// building first level texonomy tree
$taxotree = taxonomy_get_tree(15, 0, 1, false);
// dsm($taxotree, "taxotree");
$level_0_ops = array(0=>t("Choose a filter"));
foreach ($taxotree as $index => $term) {
$level_0_ops[$term->tid] = $term->name;
// define default number of lines, 1 or more if some were already added
$form_state['filterlines'] =
isset($form_state['filterlines'])
? $form_state['filterlines']
: 1;
$trigger = FALSE;
if (!empty($form_state['triggering_element']['#name'])) {
$trigger = $form_state['triggering_element'];
}
$filterlines = isset($form_state['values']['filterlines']) ? $form_state['values']['filterlines'] : 1;
$rmline = false;
if ($trigger) {
// dsm($form_state['triggering_element'], $form_state['triggering_element']['#name']);
// dsm($values, 'form state values');
if (!empty($form_state['triggering_element'])) {
dsm($form_state['values'], 'form state values');
// add a line if needed
if($trigger['#name'] == 'addfilters'){
$form_state['filterlines'] = $form_state['filterlines']+1;
}
// remove a line if needed
if(strpos($trigger['#name'], 'rm-filter-') === 0){
// $form_state['filterlines'] = $form_state['filterlines']+1;
$rmline = $trigger['#return_value'];
}
}
if(isset($form_state['triggering_element']['#name']) && $form_state['triggering_element']['#name'] == 'addfilters'){
$filterlines = $filterlines + 1;
}
$form['filterlines'] = array(
'#type' => 'hidden',
'#value' => $filterlines,
);
// build filters lines (ajax enabled)
for ($i=0; $i < $filterlines; $i++) {
for ($l=0; $l < $form_state['filterlines']; $l++) {
$form['filters']['filterline-'.$i] = array(
// if rmline this line,
// continue the loop withour creating the line
if($l === $rmline){
continue;
}
// if we are after the removed line,
// create a second counter ($ll) to keep a continuous order for form items
// and keep the current counter ($l) to retrieve de current values
// if before removed line or no removed line at all, $l = $ll
if($rmline !== false && $l > $rmline){
$ll = $l-1;
}else{
$ll = $l;
}
// dsm("l : ".$l." | ll : ".$ll);
$form['filters']['filterline-'.$ll] = array(
'#type' => 'container',
'#attributes' => array(
'class' => array("filter-line")
)
);
$form['filters']['filterline-'.$i]['filter-'.$i.'-0'] = array(
// build first level taxonomy tree and select options
$taxotree = taxonomy_get_tree(15, 0, 1, false);
$level_0_ops = array(0=>t("Choose a filter"));
foreach ($taxotree as $index => $term) {
$level_0_ops[$term->tid] = t($term->name);
}
// form select element for first level
$form['filters']['filterline-'.$ll]['filter-'.$ll.'-0'] = array(
'#type' => 'select',
'#options' => $level_0_ops,
'#name' => 'filter-'.$ll.'-0',
'#default_value' => 0,
'#ajax' => array(
'callback' => 'materio_search_api_advanced_search_callback',
'callback' => 'materio_search_api_advanced_search_select_callback',
'wrapper' => 'advancedsearch-filters',
// 'methode' => 'replace',
// 'effect' => 'fade',
),
);
// add level 1 filter if level 0 chosen
if(isset($form_state["values"]['filter-'.$i.'-0'])
& $form_state["values"]['filter-'.$i.'-0']
if(isset($values['filter-'.$l.'-0'])
&& $values['filter-'.$l.'-0']
){
$default = $values['filter-'.$l.'-0'];
$form['filters']['filterline-'.$ll]['filter-'.$ll.'-0']['#default_value'] = $default;
$value = $form_state["values"]['filter-'.$i.'-0'];
$taxotree1 = taxonomy_get_tree(15, $value, 1, false);
dsm($taxotree1, "taxotree1");
$level_1_ops = array(
0=>t("Choose a filter")
);
// build second level taxonomy tree and select options
$taxotree1 = taxonomy_get_tree(15, $default, 1, false);
$level_1_ops = array(0=>t("Choose a filter"));
foreach ($taxotree1 as $index => $term) {
$level_1_ops[$term->tid] = $term->name;
$level_1_ops[$term->tid] = t($term->name);
}
$form['filters']['filterline-'.$i]['filter-'.$i.'-1'] = array(
// form select element for second level
$form['filters']['filterline-'.$ll]['filter-'.$ll.'-1'] = array(
'#type' => 'select',
'#options' => $level_1_ops,
'#name' => 'filter-'.$ll.'-1',
'#default_value' => 0,
'#ajax' => array(
'callback' => 'materio_search_api_advanced_search_callback',
'callback' => 'materio_search_api_advanced_search_select_callback',
'wrapper' => 'advancedsearch-filters',
'methode' => 'replace',
// 'effect' => 'fade',
),
);
// add level 2 filter if level 1 chosen
if(isset($values['filter-'.$l.'-1'])
&& $values['filter-'.$l.'-1']
){
$default = $values['filter-'.$l.'-1'];
$form['filters']['filterline-'.$ll]['filter-'.$ll.'-1']['#default_value'] = $default;
// build second level taxonomy tree and select options
$taxotree2 = taxonomy_get_tree(15, $default, 1, false);
if(count($taxotree2)){
$level_2_ops = array(0=>t("Choose a filter"));
foreach ($taxotree2 as $index => $term) {
$level_2_ops[$term->tid] = t($term->name);
}
// form select element for third level
$form['filters']['filterline-'.$ll]['filter-'.$ll.'-2'] = array(
'#type' => 'select',
'#options' => $level_2_ops,
'#name' => 'filter-'.$ll.'-2',
'#default_value' => 0,
);
}
}
}
// add remove the line button
$form['filters']['filterline-'.$ll]['rm-filter-'.$ll] = array(
'#type' => 'image_button',
'#src' => drupal_get_path('module', 'materio_search_api') . '/images/rmfilter.png',
'#title' => t('Remove this filter line'),
'#name' => 'rm-filter-'.$ll,
'#return_value' => $ll,
'#executes_submit_callback' => false,
'#ajax' => array(
'callback' => 'materio_search_api_advanced_search_rmline_callback',
'wrapper' => 'advancedsearch-filters',
// 'trigger_as' => array("name"=>"rmfilters".$l),
),
"#attributes" => array('class'=>array('rm-btn')),
);
} // end of lines loop
if($rmline !== false){
$form_state['filterlines'] = $form_state['filterlines']-1;
}
// add a new line of criterias
$form['addfilters'] = array(
// button to add a new line of criterias
$form['filters']['addfilters'] = array(
'#type' => 'image_button',
'#src' => drupal_get_path('module', 'materio_search_api') . '/images/addfilter.png',
'#title' => t('Add a filter line'),
'#default_value' => 0,
'#return_value' => 1,
'#name' => "addfilters",
'#executes_submit_callback' => false,
'#return_value' => "add",
'#ajax' => array(
'callback' => 'materio_search_api_advanced_search_callback',
'callback' => 'materio_search_api_advanced_search_addfilter_callback',
'wrapper' => 'advancedsearch-filters',
'trigger_as' => array("name"=>"addfilters"),
// 'methode' => 'replacewith',
// 'speed' => 5000,
// 'effect' => 'slide',
),
'#executes_submit_callback' => false,
);
// submit
// $form['create'] = array(
// '#type' => 'image_button',
// '#src' => drupal_get_path('module', 'materio_search_api') . '/images/search.png',
// '#value' => t('Search'),
// '#name' => "search",
// '#executes_submit_callback' => false,
// );
// submit the search
$form['search'] = array(
'#type' => 'image_button',
'#src' => drupal_get_path('module', 'materio_search_api') . '/images/search.png',
'#title' => t('Search'),
'#name' => "search",
'#return_value' => "search",
);
return $form;
}
function materio_search_api_advanced_search_callback($form, $form_state) {
// dsm($form_state, "callback form state");
// $form["filters"]['test']= array(
// "#markup" => "test",
// );
function materio_search_api_advanced_search_select_callback($form, &$form_state) {
return $form['filters'];
}
function materio_search_api_advanced_search_addfilter_callback($form, &$form_state) {
return $form['filters'];
}
function materio_search_api_advanced_search_rmline_callback($form, &$form_state) {
return $form['filters'];
}

View File

@ -3894,19 +3894,31 @@ body.home-v2 #main {
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
transition: box-shadow 0.3s ease-out;
text-align: right; }
transition: box-shadow 0.3s ease-out; }
#tool-bar #block-materio-search-api-mo-searchapi-advanced-search > .inner:hover, #tool-bar #block-materio-search-api-mo-searchapi-advanced-search > .inner:focus {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.7); }
#tool-bar #block-materio-search-api-mo-searchapi-advanced-search > .inner:active {
transition: box-shadow 0s ease-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); }
#tool-bar #materio-search-api-advanced-search-form .filter-line .form-item.form-type-select {
display: inline-block;
vertical-align: middle;
font-size: 12px;
line-height: 1;
padding-right: 3em; }
#tool-bar #materio-search-api-advanced-search-form .filter-line {
margin: 0.3em 0;
padding-top: 0.3em; }
#tool-bar #materio-search-api-advanced-search-form .filter-line:not(:first-child) {
border-top: 1px dotted black; }
#tool-bar #materio-search-api-advanced-search-form .filter-line .form-item {
display: inline-block;
vertical-align: middle;
font-size: 12px;
line-height: 1;
text-transform: capitalize;
margin: 0 0em 0 0; }
#tool-bar #materio-search-api-advanced-search-form .filter-line select {
width: auto; }
#tool-bar #materio-search-api-advanced-search-form .rm-btn {
float: right;
margin: 0.4em 0 0.4em 0.4em; }
#tool-bar #materio-search-api-advanced-search-form #edit-search {
float: right; }
#center {
border-radius: 10px;

View File

@ -955,6 +955,12 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
}
}
// ______ ____
// /_ __/___ ____ / / /_ ____ ______
// / / / __ \/ __ \/ / __ \/ __ `/ ___/
// / / / /_/ / /_/ / / /_/ / /_/ / /
// /_/ \____/\____/_/_.___/\__,_/_/
#tool-bar{
// margin-left:50px;
position:relative;
@ -1024,6 +1030,12 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
}
}
// _____ __
// / ___/___ ____ ___________/ /_
// \__ \/ _ \/ __ `/ ___/ ___/ __ \
// ___/ / __/ /_/ / / / /__/ / / /
// /____/\___/\__,_/_/ \___/_/ /_/
#block-materio-search-api-materio-search-api-search{
// @include inlineblock(); vertical-align: middle ;
// position:absolute; top:10px; right:0;
@ -1087,6 +1099,11 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
}
}
// ___ __ __ _____ __
// / | ____/ / ______ _____ ________ ____/ / / ___/___ ____ ___________/ /_
// / /| |/ __ / | / / __ `/ __ \/ ___/ _ \/ __ / \__ \/ _ \/ __ `/ ___/ ___/ __ \
// / ___ / /_/ /| |/ / /_/ / / / / /__/ __/ /_/ / ___/ / __/ /_/ / / / /__/ / / /
// /_/ |_\__,_/ |___/\__,_/_/ /_/\___/\___/\__,_/ /____/\___/\__,_/_/ \___/_/ /_/
#block-materio-search-api-mo-searchapi-advanced-search{
// @include inlineblock(); vertical-align: middle ;
@ -1095,18 +1112,42 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
>.inner{
@include inlineblock(); margin:0 0 0 10px;
padding: 3px 10px; background-color:#fff; @include rounded(3px);
@include shadowBtn(); text-align: right;
@include shadowBtn();
// text-align: right;
}
}
#materio-search-api-advanced-search-form{
.filter-line{
.form-item.form-type-select{
margin:0.3em 0;
padding-top:0.3em;
&:not(:first-child){
border-top: 1px dotted black;
}
.form-item{
display:inline-block;
vertical-align: middle;
@include fs12; line-height:1;
padding-right:3em;
// padding-right:3em;
text-transform: capitalize;
// min-width : 4em;
margin:0 0em 0 0;
}
select{
width:auto;
}
}
.rm-btn{
float: right;
margin:0.4em 0 0.4em 0.4em;
}
#edit-search{
float: right;
}
}