From c90cfa63e4a4ef22d467b6f1e68c6b117820b3d5 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Tue, 10 Oct 2017 12:43:45 +0200 Subject: [PATCH] advanced search : all ajax form behaviours are working --- .../gui/materiobasemod/images/rmfilter.png | Bin 0 -> 274 bytes .../gui/materiobasemod/images/rmfilter.svg | 129 ++++++++++++ .../materiobasemod/materio_search_api.module | 199 ++++++++++++------ .../gui/materiobasetheme/css/styles.css | 28 ++- .../gui/materiobasetheme/scss/styles.scss | 47 ++++- 5 files changed, 328 insertions(+), 75 deletions(-) create mode 100644 sites/all/modules/gui/materiobasemod/images/rmfilter.png create mode 100644 sites/all/modules/gui/materiobasemod/images/rmfilter.svg diff --git a/sites/all/modules/gui/materiobasemod/images/rmfilter.png b/sites/all/modules/gui/materiobasemod/images/rmfilter.png new file mode 100644 index 0000000000000000000000000000000000000000..332fe4fb40b0ee20d786b516910865f66bac6b55 GIT binary patch literal 274 zcmeAS@N?(olHy`uVBq!ia0vp^{24nJ za0`PlBg3pY5Ndq+ocf1VSpS8UKNr{E_>^P%U7*t# NJYD@<);T3K0RX%gULF7d literal 0 HcmV?d00001 diff --git a/sites/all/modules/gui/materiobasemod/images/rmfilter.svg b/sites/all/modules/gui/materiobasemod/images/rmfilter.svg new file mode 100644 index 00000000..e81c27c8 --- /dev/null +++ b/sites/all/modules/gui/materiobasemod/images/rmfilter.svg @@ -0,0 +1,129 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/sites/all/modules/gui/materiobasemod/materio_search_api.module b/sites/all/modules/gui/materiobasemod/materio_search_api.module index 2f610b19..381d8ee9 100755 --- a/sites/all/modules/gui/materiobasemod/materio_search_api.module +++ b/sites/all/modules/gui/materiobasemod/materio_search_api.module @@ -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' => '
', '#suffix' => '
', ); - // 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']; } diff --git a/sites/all/themes/gui/materiobasetheme/css/styles.css b/sites/all/themes/gui/materiobasetheme/css/styles.css index 4a260e2e..1e654544 100644 --- a/sites/all/themes/gui/materiobasetheme/css/styles.css +++ b/sites/all/themes/gui/materiobasetheme/css/styles.css @@ -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; diff --git a/sites/all/themes/gui/materiobasetheme/scss/styles.scss b/sites/all/themes/gui/materiobasetheme/scss/styles.scss index 83e65ee0..821d83f4 100644 --- a/sites/all/themes/gui/materiobasetheme/scss/styles.scss +++ b/sites/all/themes/gui/materiobasetheme/scss/styles.scss @@ -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; } }