issue #2409 add search engine filter : expert mode

* new access system not implemented yet
* dark mode handled but needs review

include/functions_search.inc.php

@@ -143,6 +143,16 @@ function get_regular_search_results($search, $images_where='')
     }
   }
 
+  //
+  // expert
+  //
+  if (isset($search['fields']['expert']) and !empty($search['fields']['expert']['string']))
+  {
+    $has_filters_filled = true;
+
+    $image_ids_for_filter['expert'] = get_quick_search_results($search['fields']['expert']['string'], array())['items'];
+  }
+
   //
   // allwords
   //

include/search_filters.inc.php

@@ -114,6 +114,11 @@ if ('search' == $page['section'] and isset($page['search_details']))
     unset($my_search['fields']['tags']);
   }
 
+  if (isset($my_search['fields']['expert']))
+  {
+    load_language('help_quick_search.lang');
+  }
+
   if (isset($my_search['fields']['author']) and $display_filters['author']['access'])
   {
     $filter_clause = get_clause_for_filter('author');

include/ws_functions/pwg.images.php

@@ -1004,6 +1004,11 @@ function ws_images_filteredSearch_create($params, $service)
     $search['fields']['ratios'] = $params['ratios'];
   }
 
+  if (isset($params['expert']))
+  {
+    $search['fields']['expert'] = array('string' => $params['expert']);
+  }
+
   if ($conf['rate'] and isset($params['ratings']))
   {
     $search['fields']['ratings'] = $params['ratings'];

language/en_UK/common.lang.php

@@ -523,3 +523,4 @@ $lang['Your API key will expire in %d day.'] = 'Your API key will expire in %d d
 $lang['Your API key will expire in %d days.'] = 'Your API key will expire in %d days.';
 $lang['To continue using the API, please renew your key before it expires.'] = 'To continue using the API, please renew your key before it expires.';
 $lang['You can manage your API keys in your <a href="%s">account settings.</a>'] = 'You can manage your API keys in your <a href="%s">account settings.</a>';
+$lang['Expert mode'] = 'Expert mode';

language/fr_FR/common.lang.php

@@ -522,3 +522,4 @@ $lang['Your API key will expire in %d day.'] = 'Votre clé API expirera dans %d
 $lang['Your API key will expire in %d days.'] = 'Votre clé API expirera dans %d jours.';
 $lang['To continue using the API, please renew your key before it expires.'] = 'Pour continuer à utiliser l\'API, veuillez renouveler votre clé avant son expiration.';
 $lang['You can manage your API keys in your <a href="%s">account settings.</a>'] = 'Vous pouvez gérer vos clés API dans les <a href="%s">paramètres de votre compte.</a>';
+$lang['Expert mode'] = 'Mode expert';

themes/default/css/clear-search.css

@@ -109,6 +109,11 @@
   color: #444;
 }
 
+#expert-search {
+  background: #eee;
+  color: #444;
+}
+
 .date_posted-option label{
   background-color:white;
   border-bottom:1px solid #f3f3f3;

themes/default/css/dark-search.css

@@ -105,6 +105,14 @@
   color: #888;
 }
 
+.help-popin-search {
+  color:#ccc;
+}
+
+.help-popin-search:hover {
+  color:#fff;
+}
+
 #word-search {
   background: #777;
   color: #eee;
@@ -304,6 +312,10 @@
   color: #777
 }
 
+.modal-content {
+  background-color: #444;
+}
+
 @media (max-width: 600px) {
   .filter-form {
     width: 100vw;

themes/default/css/search.css

@@ -534,6 +534,10 @@
   position:absolute;
 }
 
+#expert-search {
+  width:350px;
+}
+
 /*_____________________________*/
 
 .head-button-2 {
@@ -993,3 +997,73 @@
 .mcs_hide{
   display:none!important;
 }
+
+/* expert mode : search tips modal */
+.bg-modal {
+  display: none;
+  position: fixed;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0,0,0,0.7);
+}
+
+.close-modal {
+  color: white;
+  position: absolute;
+  right: -40px;
+  top: -40px;
+  font-size: 30px;
+  cursor: pointer;
+}
+
+.close-modal:hover {
+  color: white;
+  text-decoration: none;
+}
+
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  position: absolute;
+  border-radius: 10px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -48%);
+  text-align: left;
+  padding: 30px;
+  width: 400px;
+}
+
+.help-popin-search {
+  cursor: pointer;
+  font-weight: normal !important;
+}
+
+.help-popin-search:hover span,
+.help-popin-search:hover .icon-help-circled::before {
+  color: #3C3C3C !important;
+}
+
+#modalQuickSearch p {
+  margin: 0;
+}
+
+#modalQuickSearch .modal-content {
+  max-height: 400px;
+  height: 100%;
+  width: 500px;
+  gap:20px;
+}
+
+.quick-search-content {
+  height: 100%;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}

themes/default/js/mcs.js

@@ -685,6 +685,30 @@ $(document).ready(function () {
     empty_filters_list.push(PS_params.width_max);
   }
 
+  // Setup Expert filter
+  if (global_params.fields.expert) {
+    $(".filter-expert").css("display", "flex");
+    $(".filter-manager-controller.expert").prop("checked", true);
+
+    expert_search_str = global_params.fields.expert.string;
+    $("#expert-search").val(expert_search_str);
+  
+    if (global_params.fields.expert.string && global_params.fields.expert.string.length > 0) {
+      $(".filter-expert").addClass("filter-filled");
+      $(".filter.filter-expert .search-words").text(expert_search_str);
+    } else {
+      $(".filter.filter-expert .search-words").text(str_expert_widget_label);
+    }
+
+    $(".filter-expert .filter-actions .clear").on('click', function () {
+      $(".filter-expert #expert-search").val('');
+    });
+
+    PS_params.expert = global_params.fields.expert.string.length > 0 ?  global_params.fields.expert.string  : '';
+
+    empty_filters_list.push(PS_params.expert);
+  }
+
   if(filters_to_remove.length > 0){
     filters_to_remove = [];
     performSearch(PS_params, true);
@@ -727,6 +751,7 @@ $(document).ready(function () {
     // 27 is 'Escape'
     if(e.keyCode === 27) {
       $(".filter-manager-popin .filter-manager-close").trigger('click');
+      $('#closeModalQuickSearch').trigger('click');
     }
     // 13 is 'Enter'
     if (e.keyCode === 13) {
@@ -1358,6 +1383,40 @@ $(document).ready(function () {
         $(".filter-manager-controller.width").prop("checked", false);
       }
     });
+
+  /**
+   * Expert widget
+   */
+    $(".filter-expert").on('click', function (e) {
+      if ($(".filter-form").has(e.target).length != 0 ||
+          $(e.target).hasClass("filter-form") ||
+          $(e.target).hasClass("remove")) {
+        return;
+      }
+      $(".filter-expert-form").toggle(0, function () {
+        if ($(this).is(':visible')) {
+          $(".filter-expert").addClass("show-filter-dropdown");
+        } else {
+          $(".filter-expert").removeClass("show-filter-dropdown");
+
+          global_params.fields.expert = $("#expert-search").val();
+          PS_params.expert = $("#expert-search").val();
+        }
+      });
+    });
+
+    $(".filter-expert .filter-validate").on("click", function () {
+      $(".filter-expert").trigger("click");
+      performSearch(PS_params, true);
+    });
+    $(".filter-expert .filter-actions .delete").on("click", function () {
+      updateFilters('expert', 'del');
+      performSearch(PS_params, true);
+      if (!$(".filter-expert").hasClass("filter-filled")) {
+        $(".filter-expert").hide();
+        $(".filter-manager-controller.expert").prop("checked", false);
+      }
+    });
 })
 
 function performSearch(params, reload = false) {
@@ -1659,3 +1718,11 @@ $(window).on('load', function() {
 $(window).on('resize', function() {
   resize_filter_form();
 });
+
+$('.help-popin-search').on('click', function() {
+  $('#modalQuickSearch').fadeIn();
+});
+
+$('#closeModalQuickSearch').on('click', function() {
+  $('#modalQuickSearch').fadeOut();
+});

themes/default/template/include/search_filters.inc.tpl

@@ -50,6 +50,7 @@ str_ratios_label['Portrait'] ="{'Portrait'|@translate|escape:javascript}";
 str_ratios_label['square'] = "{'square'|@translate|escape:javascript}";
 str_ratios_label['Landscape'] = "{'Landscape'|@translate|escape:javascript}";
 str_ratios_label['Panorama'] = "{'Panorama'|@translate|escape:javascript}";
+str_expert_widget_label = "{'Expert mode'|@translate|escape:javascript}";
 
 str_empty_search_top_alt = "{'Fill in the filters to start a search'|@translate|escape:javascript}";
 str_empty_search_bot_alt = "{'Pre-established filters are proposed, but you can add or remove them using the "Choose filters" button.'|@translate|escape:javascript}";
@@ -189,6 +190,12 @@ const prefix_icon = 'gallery-icon-';
           <span class="mcs-icon gallery-icon-width">{'Width'|@translate}</span>
         </label>
         {/if}
+
+        <label>
+          <input data-wid='expert' class="filter-manager-controller expert" type="checkbox"/>
+          <span class="mcs-icon gallery-icon-skull">{'Expert mode'|translate}</span>
+        </label>
+
       </div>
 
       <div class="filter-manager-actions">
@@ -829,12 +836,51 @@ const prefix_icon = 'gallery-icon-';
   </div>
 {/if}
 
+  <div class="filter filter-expert">
+    <span class="mcs-icon gallery-icon-skull filter-icon"></span>
+    <span class="search-words"></span>
+    <span class="filter-arrow gallery-icon-up-open"></span>
+    
+    <div class="filter-form filter-expert-form">
+      <div class="filter-form-title gallery-icon-skull"> {'Expert mode'|@translate}</div>
+      <div class="filter-actions">
+        <span class="delete mcs-icon gallery-icon-trash">{'Delete'|@translate}</span>
+        <span class="clear mcs-icon gallery-icon-arrow-rotate-left">{'Clear'|@translate}</span>
+      </div>
+
+      <input type="text" id="expert-search" name="expert">
+
+      <p title="{'Help'|@translate}" class="help-popin-search">
+        <i class="gallery-icon-selecters"></i>
+        <span>{'Search tips'|translate}</span>
+      </p>
+
+      <div class="filter-validate">
+        <i class="loading gallery-icon-spin6 animate-spin"></i>
+        <span class="validate-text">{'Validate'|@translate}</span>
+      </div>
+    </div>
+  </div>
+
 
   <div>
     <span class="mcs-icon gallery-icon-arrow-rotate-left clear-all">{'Empty filters'|@translate}</span>
   </div>
 </div>
 
+<div class="bg-modal" id="modalQuickSearch">
+  <div class="modal-content">
+    <a class="gallery-icon-cancel close-modal" id="closeModalQuickSearch"></a>
+
+    <div class="quick-search-content">
+      <div class="quick-search-syntax">
+        {assign var=is_dark_mode value=$themeconf.colorscheme == 'dark'}
+        {include file='themes/default/template/help/quick_search.tpl' dark_mode=$is_dark_mode}
+      </div>
+    </div>
+  </div>
+</div>
+
 {if isset($TAGS_FOUND) or isset($ALBUMS_FOUND)}
 <div class="mcs-side-results">
   {if isset($TAGS_FOUND)}