related to #1931 Added file type widget with

* The new widget
* Translations line

Still need to connect to back and add icons

index.php

@@ -313,6 +313,28 @@ SELECT
       $my_search['fields']['cat']['words'] = array_intersect($my_search['fields']['cat']['words'], array_keys($fullname_of));
     }
 
+    // if (isset($my_search['fields']['filetype']))
+    // {
+      $query = '
+SELECT
+    SUBSTRING_INDEX(path, ".", -1) AS ext,
+    COUNT(DISTINCT(id)) AS counter
+  FROM '.IMAGES_TABLE.' AS i
+    JOIN '.IMAGE_CATEGORY_TABLE.' AS ic ON ic.image_id = i.id
+  '.get_sql_condition_FandF(
+    array(
+      'forbidden_categories' => 'category_id',
+      'visible_categories' => 'category_id',
+      'visible_images' => 'id'
+      ),
+    ' WHERE '
+    ).'
+  GROUP BY ext
+  ORDER BY ext
+;';
+      $template->assign('FILETYPES', query2array($query, 'ext', 'counter'));
+    // }
+
     $template->assign(
       array(
         'GP' => json_encode($my_search),

language/en_UK/common.lang.php

@@ -423,4 +423,5 @@ $lang['File name'] = 'File name';
 $lang['Album description'] = 'Album description';
 $lang['No results are available.'] = 'No results are available.';
 $lang['You can try to edit your filters and perform a new search.'] = 'You can try to edit your filters and perform a new search.';
+$lang['File type'] = 'File type';
 ?>

language/fr_FR/common.lang.php

@@ -428,3 +428,4 @@ $lang['File name'] = 'Nom de fichier';
 $lang['Album description'] = 'Description de l\'album';
 $lang['No results are available.'] = 'Aucun résultat n\'est disponible';
 $lang['You can try to edit your filters and perform a new search.'] = 'Vous pouvez tenter de modifier vos filtres et effectuer une nouvelle recherche';
+$lang['File type'] = 'Type de fichier';

themes/default/js/mcs.js

@@ -183,6 +183,22 @@ $(document).ready(function () {
     }
   });
 
+  // Setup ffile_type filter
+  if (global_params.fields.file_type) {
+    $(".filter-file_type").css("display", "flex");
+    $(".filter-manager-controller.file_type").prop("checked", true);
+
+
+    file_type_search_str = "";
+    if (global_params.fields.file_type && global_params.fields.file_type.length > 0) {
+      $(".filter-file_type").addClass("filter-filled");
+      $(".filter.filter-file_type .search-words").text(file_type_search_str.slice(0, -2));
+    } else {
+      $(".filter.filter-file_type .search-words").text(str_file_type_widget_label);
+    }
+  }
+
+
   /**
    * Filter Manager
    */
@@ -492,6 +508,43 @@ $(document).ready(function () {
     }
   });
 
+  /**
+   * File type Widget
+   */
+  $(".filter-file_type").on("click", function (e) {
+    if ($(".filter-form").has(e.target).length != 0 ||
+        $(e.target).hasClass("filter-form") ||
+        $(e.target).hasClass("remove") ||
+        $(e.target).hasClass("remove-filter")) {
+      return;
+    }
+    $(".filter-file_type-form").toggle(0, function () {
+      if ($(this).is(':visible')) {
+        $(".filter-file_type").addClass("show-filter-dropdown");
+      } else {
+        // $(".filter-file_type").removeClass("show-filter-dropdown");
+        // global_params.fields.file_type = {};
+        // global_params.fields.file_type.mode = "OR";
+        // global_params.fields.file_type.words = $("#file_type")[0].selectize.getValue();
+
+        // PS_params.file_type = $("#file_type")[0].selectize.getValue().length > 0 ? $("#file_type")[0].selectize.getValue() : '';
+      }
+    });
+  });
+  $(".filter-file_type .filter-validate").on("click", function () {
+    $(".filter-file_type").trigger("click");
+    performSearch(PS_params, true);
+  });
+  $(".filter-file_type .remove-filter").on("click", function () {
+    $(this).addClass('pwg-icon-spin6 animate-spin').removeClass('pwg-icon-cancel');
+    updateFilters('file_type', 'del');
+    performSearch(PS_params, $(".filter-file_type").hasClass("filter-filled"));
+    if (!$(".filter-file_type").hasClass("filter-filled")) {
+      $(".filter-file_type").hide();
+      $(".filter-manager-controller.file_type").prop("checked", false);
+    }
+  });
+
   /* Close dropdowns if you click on the screen */
   // $(document).mouseup(function (e) {
   //   e.stopPropagation();

themes/default/template/index.tpl

@@ -22,6 +22,7 @@ str_tags_widget_label = "{'Tag'|@translate}";
 str_album_widget_label = "{'Album'|@translate}";
 str_author_widget_label = "{'Author'|@translate}";
 str_added_by_widget_label = "{'Added by'|@translate}";
+str_file_type_widget_label = "{'File type'|@translate}";
 
 {/footer_script}
 
@@ -219,6 +220,10 @@ str_added_by_widget_label = "{'Added by'|@translate}";
           <input data-wid='added_by' class="filter-manager-controller added_by" type="checkbox"/>
           <span class="mcs-icon pwg-icon-user">{'Added by'|@translate}</span>
         </label>
+        <label>
+          <input data-wid='file_type' class="filter-manager-controller file_type" type="checkbox"/>
+          <span class="mcs-icon pwg-icon-file-image">{'File type'|@translate}</span>
+        </label>
       </div>
 
       <div class="filter-manager-actions">
@@ -424,6 +429,37 @@ str_added_by_widget_label = "{'Added by'|@translate}";
   </div>
 {/if}
 
+{* {if isset($FILE_TYPE)} *}
+  <div class="filter filter-file_type">
+    <span class="mcs-icon pwg-icon-file-image filter-icon"></span>
+    <span class="mcs-icon pwg-icon-cancel remove-filter"></span>
+    </span><span class="search-words"></span>
+    <span class="filter-arrow pwg-icon-up-open"></span>
+
+    <div class="filter-form filter-file_type-form">
+      <div class="filter-form-title">{'File type'|@translate}</div>
+      <div class="form-container">
+        <div class="file_type-option-container">
+        {foreach from=$FILETYPES item=file_type key=k}
+          <div class="file_type-option">
+              <input type="checkbox" id="filetype-{$k}" name="filetype-{$k}">
+              <label for="filetype-{$k}">
+                <span class="mcs-icon pwg-icon-cog checked-icon"></span>
+                <span class="ext-name">{$k}</span>
+                <span class="ext-badge">{$file_type}</span>
+              </label>
+            </div>
+        {/foreach}
+        </div>
+      </div>
+      <div class="filter-validate">
+        <i class="loading pwg-icon-spin6 animate-spin"></i>
+        <span class="validate-text">{'Validate'|@translate}</span>
+      </div>
+    </div>
+  </div>
+{* {/if} *}
+
   {* <div class="filter filter-note">
    Note div
    <div class="filter-form filter-note-form">