HTML Template example

gistfile1.txt

/**
 * List enquiries.
 *
 * @param {Object} data - REST API Response data.
 */
function listEnquiries( data ) {

    var __ = wp.i18n.__;

    data.forEach(
        function ( item ) {
            var row, col;
            var list = document.getElementById( 'codeable-task-list-items' );

            // Check if the browser supports the template tag
            if ( 'content' in document.createElement( 'template' ) ) {

                var template = document.querySelector( '#item-row' );
                var node = template.content.cloneNode( true );

                row = node.querySelectorAll( 'a' )[0];
                row.setAttribute( 'id', 'item-' + item.id );
                row.setAttribute( 'data-id', item.id );
                row.setAttribute( 'title', __( 'Enquiry', 'codeable-task' ) + ' #' + item.id );

                var col = row.querySelectorAll( 'span.codeable-task-col' );
                col[0].textContent = item.first_name;
                col[1].textContent = item.last_name;
                col[2].textContent = item.email;
                col[3].textContent = item.subject;

            } else {
                // Add row.
                row = document.createElement( 'a' );
                row.setAttribute( 'id', 'item-' + item.id );
                row.setAttribute( 'data-id', item.id );
                row.setAttribute( 'tabindex', '0' );
                row.setAttribute( 'class', 'codeable-task-row' );
                row.setAttribute( 'title', __( 'Enquiry', 'codeable-task' ) + ' #' + item.id );

                // Add first name.
                col = document.createElement( 'span' );
                col.setAttribute( 'class', 'codeable-task-col' );
                col.textContent = item.first_name;
                row.appendChild( col );

                // Add last name.
                col = document.createElement( 'span' );
                col.setAttribute( 'class', 'codeable-task-col' );
                col.textContent = item.last_name;
                row.appendChild( col );

                // Add email.
                col = document.createElement( 'span' );
                col.setAttribute( 'class', 'codeable-task-col' );
                col.textContent = item.email;
                row.appendChild( col );

                // Add subject.
                col = document.createElement( 'span' );
                col.setAttribute( 'class', 'codeable-task-col' );
                col.textContent = item.subject;
                row.appendChild( col );
            }

            list.appendChild( row );

            document.getElementById( 'item-' + item.id ).addEventListener(
        		'click',
        		function( e ) {
        			e.preventDefault();

                    document.getElementById( 'codeable-task-item-details' ).innerHTML = '';

                    document.querySelectorAll( '#codeable-task-list-items a' ).forEach(
                        function ( el ) {
                            el.classList.remove( 'active' );
                        }
                    );

                    // Compatible for mouse and keyboard navigation.
                    var node = e.target.tagName === 'SPAN' ? e.target.parentElement : e.target;

                    node.classList.add( 'active' );
                    getEnquiry( node.dataset.id );
        		}
        	);
        }
    );
}