Accordion Items

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

.block-accordion {
	max-width: 768px;
	margin: 0 auto;

	&__item {
		border: 2px solid $primary;
		display: flex;
		flex-direction: column;

		&:not(:last-child){
			margin-bottom: 1rem;
		}

		input:checked ~ &__heading{
			&:after{
				transform: rotateZ(45deg) translateY(-50%);
			}
		}

		&__heading {
			cursor: pointer;
			font-size: 1rem;
			margin-bottom: 0;
			padding: rem-calc(15 20);
			position: relative;
			user-select: none;

			&:after {
				border-bottom: rem-calc(2) solid $primary;
				border-right: rem-calc(2) solid $primary;
				content: "";
				display: inline-block;
				height: rem-calc(8);
				position: absolute;
				right: rem-calc(20);
				top: 50%;
				transform-origin: top;
				transform: rotateZ(-135deg) translateY(-50%);
				transition: transform .25s;
				width: rem-calc(8);
			}
		}

		&__content-wrapper{		
			box-shadow: inset 0 2px 0 $primary;
			height: 0;
			overflow:hidden;
			transition:height 0.25s ease-out;
		}
		
		&__content {
			padding: rem-calc(15 20);
		
			  
			p:last-child {
				margin-bottom: 0;
			}
		}

		&__toggle {
			display: none;
			position: absolute;
		}
	}
}

// Source: https://css-tricks.com/using-css-transitions-auto-dimensions/#aa-technique-3-javascript

function collapseSection(element) {
    // get the height of the element's inner content, regardless of its actual size
    var sectionHeight = element.scrollHeight;

    // temporarily disable all css transitions
    var elementTransition = element.style.transition;
    element.style.transition = '';

    // on the next frame (as soon as the previous style change has taken effect),
    // explicitly set the element's height to its current pixel height, so we 
    // aren't transitioning out of 'auto'
    requestAnimationFrame(function() {
        element.style.height = sectionHeight + 'px';
        element.style.transition = elementTransition;

        // on the next frame (as soon as the previous style change has taken effect),
        // have the element transition to height: 0
        requestAnimationFrame(function() {
            element.style.height = 0 + 'px';
        });
    });

    // mark the section as "currently collapsed"
    element.setAttribute('data-collapsed', 'true');
}

function expandSection(element) {
    // get the height of the element's inner content, regardless of its actual size
    var sectionHeight = element.scrollHeight;

    // have the element transition to the height of its inner content
    element.style.height = sectionHeight + 'px';

    // when the next css transition finishes (which should be the one we just triggered)
    element.addEventListener('transitionend', function(e) {
        // remove this event listener so it only gets triggered once
        element.removeEventListener('transitionend', arguments.callee);

        // remove "height" from the element's inline styles, so it can return to its initial value
        element.style.height = null;
    });

    // mark the section as "currently not collapsed"
    element.setAttribute('data-collapsed', 'false');
}

// Get all the accordions on the page
var accordions = document.getElementsByClassName('block-accordion');

// Loop through all instances of accordions
for (let i = 0; i < accordions.length; i++) {

    // Get all the items in the current accordion
    var items = accordions[i].getElementsByClassName('block-accordion__item');

    // Loop through all the items
    for (let j = 0; j < items.length; j++) {

        // On the click event...
        items[j].querySelector('.block-accordion__item__heading').addEventListener('click', function(e) {

            // Get the elements ready
            var section = items[j].querySelector('.block-accordion__item__content-wrapper');
            var isCollapsed = section.getAttribute('data-collapsed') === 'true';

            // Change the data attribute and fire the collapse/expand depending
            if (isCollapsed) {
                expandSection(section);
                section.setAttribute('data-collapsed', 'false');
            } else {
                collapseSection(section)
            }
        });
    }
}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/accordion-items",
    "title": "Accordion Items",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-accordion-items.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": true
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Accordion Items",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/accordion-items/block-accordion-items.css"],
    "viewScript": ["accordion-items"]
}