Datei- und Bildfilter

[MarkusR]

Da einige Webauftritte zigtausende Bilder angesammelt haben und Bilder oft nicht rubrikbezogen hochgeladen werden, sind die Dropdowns zur Bild- und Dateiauswahl dort oft endlos und eher Hindernis statt Hilfe.

Die Suche nach filterbaren Select-Feldern führt zu 99% zu jQuery, was aber zusätzlichen Wartungsaufwand bedeutet. Browserseitig und in HTML gibt es keine passenden Lösungen, daher nun eine einfache und spezifische Lösung, mit der Bild- und Dateiauswahlen on-the-fly gefiltert werden und die die Auswahl deutlich erleichtert und nur minimalen Codeeingriff erfordert.

Wird im nächsten ConPressoPlus integriert sein.

[hscha]

Ich bin sehr interessiert

[MarkusR]

Interesse an einem Vorab-Test?

[hscha]

Gern!

[MarkusR]

Da der FTP-Zugriff bei Dir nicht mehr funktioniert, gibt es hier die Anleitung zum DIY-Einbau:

Zuerst der Code für das Artikelformular:

=== OPEN / ÖFFNE ===
_include/form_fields.inc.php

=== FIND / FINDE ===

Code: Alles auswählen

if (!nametype($key, $name, $type)) return;

=== BEFORE ADD / DAVOR EINFÜGEN ===

Code: Alles auswählen

if (!function_exists('filterScript')) {
    function filterScript($key)  {
        return "<script type=\"text/javascript\">
        (function() {
          const select  = document.getElementsByName('content[".htmlspecialchars($key, ENT_COMPAT, 'ISO-8859-15')."][image_id]')[0];
          const input   = document.getElementsByName('filter[".htmlspecialchars($key, ENT_COMPAT, 'ISO-8859-15')."][image_id]')[0];
          const options = Array.from(select.options);

          function findMatches (search, options) {
            return options.filter(option => {
              const regex = new RegExp(search, 'gi');
              return option.text.match(regex);
            });
          }

          function filterOptions () {
            options.forEach(option => { 
              option.remove();
              option.selected = false;
            });
            const matchArray = findMatches(this.value, options);
            select.append(...matchArray);
          }

          input.addEventListener('change', filterOptions);
          input.addEventListener('keyup', filterOptions);
        })();
        </script>";
    }
}

=== FIND / FINDE ===

Code: Alles auswählen

    printf('<select name="content[%s][file_id]" size="1" class="inputwidth iframe">',

=== REPLACE WITH / ERSETZEN MIT ===

Code: Alles auswählen

    printf('<input style="width:10%%" name="filter[%s][image_id]" type="search" placeholder="Filter..." autocomplete="off" /> ',
        htmlspecialchars($key, ENT_COMPAT, 'ISO-8859-15'));
    printf('<select style="width:85%%" name="content[%s][file_id]" size="1" class="inputwidth iframe">', 

=== FIND / FINDE ===

Code: Alles auswählen

    print(help('articles-createarticle.html#articles-createarticle-articlecontent-files'));

=== BEFORE ADD / DAVOR EINFÜGEN ===

Code: Alles auswählen

    echo filterScript($key);

=== FIND / FINDE ===

Code: Alles auswählen

    printf('<select name="content[%s][image_id]" size="1" class="inputwidth">',

=== REPLACE WITH / ERSETZEN MIT ===

Code: Alles auswählen

    printf('<input style="width:10%%" name="filter[%s][image_id]" type="search" placeholder="Filter..." autocomplete="off" /> ',
        htmlspecialchars($key, ENT_COMPAT, 'ISO-8859-15'));
    printf('<select style="width:85%%" name="content[%s][image_id]" size="1" class="inputwidth">',

=== FIND / FINDE ===

Code: Alles auswählen

    print(help('articles-createarticle.html#articles-createarticle-articlecontent-images'));

=== BEFORE ADD / DAVOR EINFÜGEN ===

Code: Alles auswählen

    echo filterScript($key);

[MarkusR]

Und der Editor:

=== OPEN / ÖFFNE ===
_editor/imagepicker.php
_editor/imageinserter.php

(ja, es sind zwei Dateien, die in identischer Weise bearbeitet werden!)

=== FIND / FINDE ===

Code: Alles auswählen

<select id="image" onChange="imagePreview();">

=== BEFORE ADD / DAVOR EINFÜGEN ===

Code: Alles auswählen

<table><tr><td>
<input id="filter" style="width:50px" type="search" placeholder="Filter..." autocomplete="off" />
</td><td>

=== FIND / FINDE ===

Code: Alles auswählen

</select><br /><br />

=== REPLACE WITH / ERSETZEN DURCH ===

Code: Alles auswählen

</select></td></tr></table><br /><br />
<script type="text/javascript">
    (function() {
      const select  = document.getElementById('image');
      const input   = document.getElementById('filter');
      const options = Array.from(select.options);

      function findMatches (search, options) {
        return options.filter(option => {
          const regex = new RegExp(search, 'gi');
          return option.text.match(regex);
        });
      }

      function filterOptions () {
        options.forEach(option => { 
          option.remove();
          option.selected = false;
        });
        const matchArray = findMatches(this.value, options);
        select.append(...matchArray);
      }

      input.addEventListener('change', filterOptions);
      input.addEventListener('keyup', filterOptions);
      input.addEventListener('change', imagePreview);
      input.addEventListener('keyup', imagePreview);
    })();
</script>

[hscha]

Danke Markus,
ich probiere aus...

Grüße von Horst

[hscha]

Hallo Markus,
beim ersten Test funktioniert der Bildfilter, das ausgewählte Bild wird jedoch nicht in den HTML-Quelltext eingebaut.
Deine Zugänge habe ich wiederhergestellt, falls du selbst nachschauen willst.

Grüße von Horst

[MarkusR]

Die Ursache lag darin, dass Du zwar mod_editor aktiviert hast, aber dennoch den Standard-CPO-Editor benutzt.
Dabei ergibt sich, dass für diesen eine Datei fehlte, die das gewählte Bild zurückgibt. Peinlicher Fehler meinerseits.
Ja, das Augenmerk beim Erstellen von mod_editor lag nicht gerade darauf, dass man es gar nicht nutzt und der originale Editor funktioniert.

Fazit: Auch ohne den Filter hätte das Übergeben des Bildes gar nicht funktioniert

Jezz abba schon...

[hscha]

Toll! Danke, Markus!