Can a divider be told to show initially as collapsed ?

This has been suggested many times. I would love to be able to do this with something like collapse-divider="true". Until then, in this thread, Robert shows his way of accomplishing what you're after (5 posts down).

Thank you! I had never thought of using the ui possibility and using javascript.

I'm trying it out, and wanted to make use of the code from Perch that is already there. But have not yet succeeded in doing it the way I would like to do it. Traversing the Dom is giving me problems.

So maybe I will end up having to copy the code from Robert, but i that case Perch is doing the same thing twice. I will update this thread when I have a solution.

René

This is my solution now

I have altered the code from Robert, to reflect the current default behaviour of Perch.

I have three remarks with this:

1. Dividers span from the first to the next divider. If there is no next divider it spans to the end of the form. Add a fake divider with a name starting with 'collapse-end|'
2. I use an awful delay before starting the code, I couldn't find a better way.
3. In the future I will add code to only hide empty fields.

(edit: below is a version without a timer)

thx, René

this code belongs in the file    /perch/addons/plugins/ui/_config.inc

<script> 
// TODO:
// Only hide empty field, not filled ones. So don't execute if values are present in the input boxes.   
// Get rid of the siteTimeout, its ugly.


$(document).ready(function(){
    // Finding the elements with an attribute divider-before staring with "collapse|"
    $metaDividerStart = $('.divider:contains("collapse-start|")');
    $metaDividerEnd   = $('.divider:contains("collapse-end|")');

    if ($metaDividerStart.length)
    { 
        // this timeout is awfull, but the only way I could force to do the edit after
        // the Perch_Init_Editors call.  
        // (I assume it is the Event which adds the div around the elements between dividers)
        setTimeout(
            function(){ 
                // Add the perch class which changes the arrow SVG -and-
                //  set the next() div to display:none, just like the standard behaviour
                // Without the setTimeout, the .next() will only select (and hide) 
                //  the first element inside the divider 
                $metaDividerStart.addClass('divider-collapsed').next().css('display', 'none');
                $metaDividerEnd.css('display', 'none');
                // Remove the keyword 'collapse|' from the text on screen
                var newHTML = $('div', $metaDividerStart).html().replace('collapse-start|', '');
                $('div', $metaDividerStart).html(newHTML);                         
            }, 100);  
    }  
});
</script>

The template file looks like this

<!-- start of code snippet, there can be perch fields before this -->

<perch:if exists="alineaimage">
    <img class="foto" style="max-width: 374px" src="<perch:content id="alineaimage" type="image" label="Foto" divider-before="collapse-start|Optionele foto" />" 
    alt="<perch:content id="FotoOms" type="text" label="Foto Omschrijving" divider-after="collapse-end|Dummy divider - End of collapse"/>" />
</perch:if>

<!-- other perch fields might follow -->

Thanks René

Where are you placing your JS?

The JavaScript is in This file.

‘/perch/addons/plugins/ui/_config.inc’ Just add the file. No extra setings needed.

René

I have made a new version without the timer, and with an external script which will watch for the creation of the needed element.

// UI Script to Add Collapsed Dividers in Perch Admin 
// Add this script to /perch/addons/plugins/ui/
// Download Arrive.min.js and put it in /perch/addons/plugins/ui/ also.

// arrive.js 
// will check if elements are already added to the Dom 
// GitHub https://github.com/uzairfarooq/arrive


<script type="text/javascript" src="/perch/addons/plugins/ui/arrive.min.js"></script>
<script> 
// TODO:
// Only hide empty field, not filled ones.  

// If the element to be inserted by Perch has indeed been inserted ..
$(document).arrive("div.divider-collapse-zone", function() {
    // Finding the elements with an attribute divider-before staring with "collapse|"
    $metaDividerStart = $('.divider:contains("collapse-start|")');
    $metaDividerEnd   = $('.divider:contains("collapse-end|")');

    if ($metaDividerStart.length)
    { 
        // Add the perch class which changes the arrow SVG -and-
        //  set the next() div to display:none, just like the standard Perch_init_editors behaviour
        $metaDividerStart.addClass('divider-collapsed').next().css('display', 'none');
        $metaDividerEnd.css('display', 'none');
        // Remove the keyword 'collapse|' from the text on screen
        var newHTML = $('div', $metaDividerStart).html().replace('collapse-start|', '');
        $('div', $metaDividerStart).html(newHTML);                         
    }  
});
</script>

That's a great post René - thanks for providing that.

We found that to use your same code in a multiple instance situation, we needed to make the following changes. The reason being, it used the first divider name for all subsequent dividers:

// UI Script to Add Collapsed Dividers in Perch Admin 
// Add this script to /admin/addons/plugins/ui/
// Download Arrive.min.js and put it in /admin/addons/plugins/ui/ also.

// arrive.js 
// will check if elements are already added to the Dom 
// GitHub https://github.com/uzairfarooq/arrive


<script type="text/javascript" src="/admin/addons/plugins/ui/arrive.min.js"></script>
<script> 
// TODO:
// Only hide empty field, not filled ones.  

// If the element to be inserted by Perch has indeed been inserted ..
$(document).arrive("div.divider-collapse-zone", function() {
    // Finding the elements with an attribute divider-before staring with "collapse|"
    $metaDividerStart = $('.divider:contains("collapse-start|")');
    $metaDividerStart.each(function(i,v){
        // Add the perch class which changes the arrow SVG -and-
        //  set the next() div to display:none, just like the standard Perch_init_editors behaviour
        $(v).addClass('divider-collapsed').next().css('display', 'none');
        // Remove the keyword 'collapse|' from the text on screen
        var newHTML = $('div', $(v)).html().replace('collapse-start|', '');
        $('div', $(v)).html(newHTML); 
    })
});
</script>

Thanks very much for finding and fixing this bug! In your code you left out making the end-dividers invisible, maybe you didn't need it.

The new and complete version is on GitHub: https://github.com/rlb222/Perch-Auto-collapsable-Dividers

Thx, René