List -> Gallery (fileTree) Sortierung

Hallo zusammen,

ich habe eine kleine Verständnisfrage zu der Kombination List und Sortierung von Dateien.

Wenn ich es richtig verstanden habe, ist es nicht möglich die Sortierung aus dem Backend zu sichern, und auch nicht manuell durch einen Kniff zu speichern, so dass der User diese im Backend für das Frontend nicht angeben kann. Ist das immer noch so der Stand der Dinge?

vielen Dank
Gruß Xava

PHP-Code:

---

'inputType' => 'list' 


---

PHP-Code:

---

'gallery' => array(
    'label' => array(
        'de' => array('Galerie', ''),
    ),
    'inputType' => 'fileTree',
    'eval' => array(
        'fieldType' => 'checkbox',
        'isGallery' => true,
        'multiple' => true,
        'filesOnly' => true,
        'extensions' => 'jpg,jpeg,png,gif,svg',
        'orderField' => 'orderSrc',
    ),
) 


---

Einfach kein orderField setzen ;)

Ich hab nun das Problem selbst mit Javascript gelöst.
Falls es Probleme gibt Bescheid geben.

In einem eigenen Modul in der config.php folgendes Script hinzufügen.

PHP-Code:

---

 /**
    * Add this in config.php in your custom module or in dcaconfig.php
    * To sort images with rock solid custom elements inside 'inputType' => 'list'
    *
    */
    if (TL_MODE == 'BE')
    {
        if (\Contao\Input::get('act') == 'edit' && \Contao\Input::get('do') == 'article' && \Contao\Input::get('id'))
        {
            $GLOBALS['TL_MOOTOOLS'][] = "<script>

            document.body.addEventListener('DOMSubtreeModified', function(event) {
                var elements = document.getElementsByClassName('rsceSortableCustom');

                Object.keys(elements).map(function(objectKey, index) {
                    var obj = elements[objectKey];
                    obj.addEventListener('mouseup', function(){
                        newOrder = getListOrder(obj);
                        updateInputValue(obj, newOrder);
                    });    
                });

                function getListOrder(obj) {
                    var inputValue = [];
                    var list = obj.querySelectorAll('.sgallery li');

                    list.forEach(function (el, index) {
                        if (el.getAttribute('data-id') != null) {
                            inputValue.push(el.getAttribute('data-id'))
                        }
                    });
                    return inputValue.join(',');
                }

                function updateInputValue(obj, newOrder) {
                    var input = ( obj.getElementsByTagName('input') );
                    input[0].value = newOrder;
                }
                });

            </script>";

        }
    } 


---

Im RS Custom Element (rsce_irgenwas_config.html5) danach die CSS Klasse hinzufügen:

PHP-Code:

---

// INSIDE 'inputType' => 'list'
// ......
'image' => array(
    'label' => array(
        'de' => array('Bilder', 'Wählen Sie ein oder mehrere Bilder aus.')
    ),
    'inputType' => 'fileTree',
    'eval' => array(
        'multiple' => true,
        'fieldType' => 'checkbox',
        'filesOnly' => true,
        'extensions' => 'jpg,jpeg,png,gif,svg',
        'mandatory'=>false,
        'orderField' => 'orderSRC', /* MUST be set*/
        'tl_class' => 'w50 rsceSortableCustom',  /* custom css class for javascript */
        'files'=>true,
        'isGallery' => true, 
    )                    
),
//...... 


---

Das Script ändert die Bild-Reihenfolge im input Feld wenn die Reichenfolge der Liste geändert wird.

lg