@gravityforms/gulp-tasks
Version:
Configurable Gulp tasks for use in Gravity Forms projects.
65 lines (60 loc) • 2.6 kB
JavaScript
function mergeObjectsBySection( objects ) {
const mergedObject = {};
for ( const { section, label, fileName } of objects ) {
const [ parent, child ] = section;
const groupKey = child || '__root';
mergedObject[ parent ] ??= {};
mergedObject[ parent ][ groupKey ] ??= { label: [], fileName: [] };
mergedObject[ parent ][ groupKey ].label.push( label );
mergedObject[ parent ][ groupKey ].fileName.push( fileName );
}
return mergedObject;
}
function renderLinks( labels = [], fileNames = [] ) {
return labels
.map( ( label, i ) => ( { label, fileName: fileNames[ i ] } ) )
.sort(( a, b ) => {
if ( a.label.toLowerCase() === "overview" ) return -1;
if ( b.label.toLowerCase() === "overview" ) return 1;
return a.label.localeCompare( b.label, 'en' );
})
.map( ( { label, fileName } ) => `
<div class="sidebar-section-children">
<a href="./${ fileName }">${ label }</a>
</div>
`).join('');
}
module.exports = function ( {
menuItems = [],
} ) {
return `
${ Object.entries( mergeObjectsBySection( menuItems ) )
.sort(( [ a ], [ b ] ) => a.localeCompare( b, 'en' ) )
.map( ( [ parentSection = '', childSections = {} ] ) => {
return `
<div class="sidebar-section-title with-arrow" data-isopen="false">
<div>${ parentSection }</div>
<svg><use xlink:href="#down-icon"></use></svg>
</div>
<div class="sidebar-section-children-container">
${ Object.entries( childSections )
.sort(( [ a ], [ b ] ) => a.localeCompare( b, 'en' ) )
.map( ( [ childSection = '', data = {} ] ) => {
if ( childSection === '__root' ) {
return renderLinks( data.label, data.fileName );
}
return `
<div class="sidebar-section-title with-arrow" data-isopen="false">
<div>${ childSection }</div>
<svg><use xlink:href="#down-icon"></use></svg>
</div>
<div class="sidebar-section-children-container">
${ renderLinks( data.label, data.fileName ) }
</div>
`;
} ).join( '' ) }
</div>
`
} ).join( '' ) }
`;
};