https://www.iowaattorneygeneral.gov/system/blockeditor/websites/1/pages/plugins/media-grid/index.js

1
2export default {
3	name: "media-grid",
4	displayName: "Media Grid",
5	version: "1.1.0",
6	contentbox: {
7		bgImage: false,
8		boxTabContent: false,
9		boxTabOnClick: false,
10	},
11	settings: {"columns":{"min":1,"max":6,"label":"Columns","step":1,"type":"range","default":3},"gap":{"min":0,"unit":"px","max":48,"label":"Gap Between Items","step":1,"type":"number","default":16},"padding":{"min":0,"unit":"px","max":48,"label":"Padding","step":1,"type":"number","default":0},"rounded":{"min":0,"unit":"px","max":24,"label":"Rounded Corners","step":1,"type":"number","default":8},"contentTheme":{"label":"Caption Theme","options":[{"label":"Dark","value":"dark"},{"label":"Light","value":"light"}],"type":"select","default":"light"}},
12	
13	mount: function(element, options) {
14		const cols = Math.max(1, Math.min(6, parseInt(options.columns) || 3));
15		const gap = Math.max(0, Math.min(48, isNaN(parseInt(options.gap)) ? 16 : parseInt(options.gap)));
16		const padding = Math.max(0, Math.min(48, isNaN(parseInt(options.padding)) ? 0 : parseInt(options.padding)));
17		const rounded = Math.max(0, Math.min(24, isNaN(parseInt(options.rounded)) ? 8 : parseInt(options.rounded)));
18		const contentTheme = options.contentTheme === "light" ? "light" : "dark";
19
20		element.style.setProperty("--column-count", cols);
21		element.style.setProperty("--column-gap", gap + "px");
22		element.style.setProperty("--padding", padding + "px");
23		element.style.setProperty("--border-radius", rounded + "px");
24
25		if (contentTheme === "light") {
26			element.style.setProperty("--caption-background", "rgba(255, 255, 255, 0.96)");
27			element.style.setProperty("--caption-color", "#000");
28		}
29		else {
30			element.style.setProperty("--caption-background", "rgba(0, 0, 0, 0.45)");
31			element.style.setProperty("--caption-color", "white");
32		}
33
34		// Accessibility
35		element.setAttribute("role", "grid");
36		element.setAttribute("aria-label", "Media Grid");
37
38		
39
40		return {};
41	}
42};