https://www.nyls.edu/wp-content/plugins/bb-plugin/modules/box/js/c…/fl-grid-tracklist.js?ver=2.11.1

1class FLGridTrackList extends FLElement {
2
3	defaultStrings = {
4		columns: 'Columns',
5		rows: 'Rows',
6		auto_columns: 'Auto Columns',
7		auto_rows: 'Auto Rows',
8		clear: 'Clear',
9		addNew: 'Add New...',
10		clone: 'Duplicate',
11		delete: 'Remove',
12	}
13
14	connectedCallback() {
15		this.template.innerHTML = this.render()
16		this.replaceChildren( this.template.content.cloneNode( true ) )
17		this.unbindEventsCallback = this.bindEvents()
18	}
19
20	bindEvents() {
21		this.lists = this.querySelectorAll( 'fl-layer-group' )
22		const onChange = this.onChange.bind(this)
23		this.lists.forEach( list => {
24			list.addEventListener( 'change', () => onChange( list ) )
25		} )
26	}
27
28	onChange( list ) {
29
30		// Update hidden input for this list
31		const inputName = `${this.name}[${list.name}]`
32		const input = this.querySelector(`input[name="${inputName}"]`)
33
34		input?.setAttribute( 'value', list.value )
35		input?.dispatchEvent( new Event( 'change', { bubbles: true } ) )
36
37		const cssInputName = `${this.name}[${list.name}_css]`
38		const css = this.getCSS( list.value )
39		const cssInput = this.querySelector(`input[name="${cssInputName}"]`)
40		cssInput?.setAttribute( 'value', css )
41		cssInput?.dispatchEvent( new Event( 'change', { bubbles: true } ) )
42	}
43
44	get name() {
45		return this.getAttribute( 'name' )
46	}
47
48	getCSS( value ) {
49		if ( '' === value ) {
50			return ''
51		}
52
53		let layers = JSON.parse( value )
54		if ( 'string' === typeof layers ) {
55			layers = []
56		}
57
58		const tracks = layers.map( layer => {
59			switch( layer.type ) {
60				case 'basic-track':
61					const count = layer.value
62					return `repeat(${count},1fr)`
63				default:
64					return layer.value
65			}
66		} )
67		return tracks.join(' ')
68	}
69
70	render() {
71		const strings = this.strings
72		const values = JSON.parse( this.getAttribute( 'value' ) )
73
74		this.removeAttribute( 'value' )
75		const lists = [ 'columns', 'rows' ]
76		return `
77			<div class="fl-layer-group-cluster" style="display: grid; gap: 1px">
78				${ lists.map( list => {
79						const value = values && Array.isArray( values[list] ) ? JSON.stringify( values[list] ) : ''
80						const inputName = `${ this.name }[${list}]`
81						const cssInputName = `${ this.name }[${list}_css]`
82
83						return `
84							<fl-layer-group
85								name='${list}'
86								value='${ value }'
87								strings='${ JSON.stringify( strings ) }'
88							>
89								<fl-layer-group-heading
90									slot='before'
91									strings='${ JSON.stringify( {
92										...strings,
93										clear: strings.clear,
94									} ) }'
95								>${ strings[list] }</fl-layer-group-heading>
96							</fl-layer-group>
97							<input type="hidden" name='${ inputName }' value='${ value }' />
98							<input type="hidden" name='${ cssInputName }' value='${ this.getCSS( value ) }' />
99						`
100				} ).join('') }
101			</div>
102		`
103	}
104}
105customElements.define( "fl-grid-tracklist", FLGridTrackList )