https://ihmwmfpc.netlify.app/assets/arena.js

1// The Description is returned as Markdown, of course.
2let markdownIt = document.createElement('script')
3markdownIt.src = 'https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js';
4document.head.appendChild(markdownIt)
5
6
7
8const setBasics = (data) => {
9	document.title = data.title
10	document.getElementById('channel-title').innerHTML = data.title
11	document.getElementById('channel-description').innerHTML = window.markdownit().render(data.metadata.description)
12
13	// Add author/collaborators with image/links.
14	// Error proof these.
15}
16
17
18
19const parseBlocks = (data) => {
20	let blocks = [
21		'audioEmbed',
22		'audioFile',
23		'image',
24		'link',
25		'pdf',
26		'text',
27		'videoEmbed',
28		'videoFile',
29	]
30
31	blocks.forEach((type) => {
32		let typeClass = type.replace(/[A-Z]/g, "-$&").toLowerCase()
33		let typeName = type.split(/[A-Z]/g)[0];
34		(typeName == 'pdf') ? typeName = typeName.toUpperCase() : typeName = typeName[0].toUpperCase() + typeName.slice(1)
35
36		let typeContainer = document.querySelector(`.${typeClass}-blocks`)
37		let typeTemplate = document.getElementById(`${typeClass}-block`)
38
39		blocks[type] = {
40			name: typeName,
41			container: typeContainer,
42			template: typeTemplate ? typeTemplate.content : null,
43		}
44	})
45
46	data.contents.slice().reverse().forEach((block) => {
47		switch (block.class) {
48			case 'Attachment':
49				let attachment = block.attachment.content_type
50				if (attachment.includes('audio')) {
51					renderBlock(block, blocks.audioFile)
52				}
53				else if (attachment.includes('pdf')) {
54					renderBlock(block, blocks.pdf)
55				}
56				else if (attachment.includes('video')) {
57					renderBlock(block, blocks.videoFile)
58				}
59				break
60
61			case 'Image':
62				renderBlock(block, blocks.image)
63				break
64
65			case 'Link':
66				renderBlock(block, blocks.link)
67				break
68
69			case 'Media':
70				let media = block.embed.type
71				if (media.includes('rich')) {
72					renderBlock(block, blocks.audioEmbed)
73				}
74				else if (media.includes('video')) {
75					renderBlock(block, blocks.videoEmbed)
76				}
77				break
78
79			case 'Text':
80				renderBlock(block, blocks.text)
81				break
82		}
83	})
84}
85
86
87
88const renderBlock = (block, type) => {
89	if (!type.template || !type.container) return
90
91	let template = type.template.cloneNode(true)
92	let element = [
93		'title',
94		'image',
95		'embed',
96		'audio',
97		'video',
98		'link',
99		'linkTitle',
100		'content',
101		'description',
102		'type',
103	]
104
105	element = Object.assign({},
106		...element.map(type => ({
107			[type]: template.querySelector(`.${type.replace(/[A-Z]/g, "-$&").toLowerCase()}`)
108		}))
109	)
110
111	if (element.title) block.title ? element.title.innerHTML = block.title : element.title.remove()
112	if (element.image) block.image ? element.image.src = block.image.large.url : element.image.remove()
113	if (element.embed) block.embed ? element.embed.innerHTML = block.embed.html : element.embed.remove()
114	if (element.audio) block.attachment ? element.audio.src = block.attachment.url : element.audio.remove()
115	if (element.video) block.attachment ? element.video.src = block.attachment.url : element.video.remove()
116	if (element.link) {
117		if (block.source) {
118			element.link.href = block.source.url
119			if (element.linkTitle) element.linkTitle.innerHTML = block.source.title
120		}
121		else if (block.attachment) {
122			element.link.href = block.attachment.url
123			if (element.linkTitle) element.linkTitle.innerHTML = block.title
124		}
125		else {
126			element.link.remove()
127			element.linkTitle.remove()
128		}
129	}
130	if (element.content) block.content_html ? element.content.innerHTML = block.content_html : element.content.remove()
131	if (element.description) block.description_html ? element.description.innerHTML = block.description_html : element.description.remove()
132	if (element.type) element.type.innerHTML = type.name
133
134	type.container.append(template)
135}
136
137
138
139window.addEventListener('DOMContentLoaded', () => {
140	const channel = document.getElementById('channel-url').href.split('/').filter(Boolean).pop()
141
142	fetch(`https://api.are.na/v2/channels/${channel}?per=100`, {cache: 'no-store'})
143		.then(response => response.json())
144		.then(data => {
145			setBasics(data)
146			parseBlocks(data)
147		})
148});
149
150
151/*const content = document.querySelector('.content');
152
153function handleResize() {
154  const windowWidth = window.innerWidth;
155  const minWidth = 600; // Adjust this value as needed
156
157  if (windowWidth <= minWidth) {
158    content.classList.add('visible');
159    content.style.opacity = '0'; // Example: Reduce background opacity
160  } else {
161    content.classList.remove('visible');
162    content.style.opacity = '1'; // Example: Full opacity for background
163  }
164}
165
166// Add event listener for window resize
167window.addEventListener('resize', handleResize);
168
169// Initial call to handleResize on page load
170handleResize();*/