| | |
| | | return false; |
| | | } |
| | | let values = this.splitIDs(value); |
| | | values.forEach(v => { |
| | | if (Object.hasOwn(item.images, v)) { |
| | | return true; |
| | | } |
| | | }); |
| | | return false; |
| | | |
| | | return values.some(v => |
| | | Object.keys(item.images).map(k => parseInt(k)).includes(parseInt(v)) |
| | | ); |
| | | } |
| | | formatImageFields(element, value, item) { |
| | | console.log('Formatting image Field: ', element); |
| | | console.log('value: ', value); |
| | | console.log('item: ', item); |
| | | if (value.length === 0) return; |
| | | //If it's a gallery, we're cloning the original image, then removing it |
| | | if (value.length > 1) { |
| | | let values = this.splitIDs(value); // Convert string to array first |
| | | if (values.length === 0) return; |
| | | |
| | | if (values.length > 1) { |
| | | let image = element.querySelector('img'); |
| | | if (!image) return; |
| | | value.forEach(imgID => { |
| | | values.forEach(imgID => { |
| | | let img = image.cloneNode(true); |
| | | this.formatImageField(img, imgID, item); |
| | | element.append(img); |
| | | }); |
| | | image.remove(); |
| | | } else { |
| | | console.log(element.tagName); |
| | | if (element.tagName !== 'IMG') { |
| | | element = element.querySelector('img'); |
| | | if (!element) return; |
| | | } |
| | | this.formatImageField(element, value[0], item); |
| | | this.formatImageField(element, values[0], item); |
| | | } |
| | | } |
| | | formatImageField(element, value, item) { |
| | | console.log('Formatting Image:', element); |
| | | console.log('Value: ', value); |
| | | console.log('ImagData:', item.images[value]); |
| | | let imgData = item.images[value]??false; |
| | | if (!imgData) return; |
| | | [ |
| | | element.src, |
| | | element.srset, |
| | | element.alt |
| | | ] = [ |
| | | item.images[value].tiny, |
| | | `${item.images[value].tiny} 50w, ${item.images[value].small} 300w, ${item.images[value].medium} 1024w`, |
| | | item.images[value]['image-alt-text'] |
| | | imgData.tiny, |
| | | `${imgData.tiny} 50w, ${imgData.small} 300w, ${imgData.medium} 1024w`, |
| | | imgData['image-alt-text'] |
| | | ] |
| | | } |
| | | isTaxonomyField(item, field) { |
| | | if (!Object.hasOwn(item, 'taxonomies') || Object.keys(item.taxonomies).length === 0) { |
| | | return false; |
| | | } |
| | | Object.keys(item.taxonomies).forEach(taxonomy => { |
| | | if (taxonomy === field) { |
| | | return true; |
| | | } |
| | | }); |
| | | return false; |
| | | |
| | | return Object.keys(item.taxonomies).includes(field); |
| | | } |
| | | formatTaxonomyField(element, item, field, value) { |
| | | if (element.tagName !== 'UL' || !element.querySelector('li')) return; |
| | | |
| | | let values = this.splitIDs(value); |
| | | if (values.length === 0) { |
| | | element.remove(); |
| | | } |
| | | let listItem = element.querySelector('li'); |
| | | for (let termID of values) { |
| | | let term = item.taxonomies[field][termID]??false; |
| | |
| | | if (!element) return; |
| | | } |
| | | element.setAttribute('datetime', value); |
| | | element.textContent = window.formatTimeAgo(value); |
| | | element.textContent = window.formatTimeAgo(value, 'F Y'); |
| | | } |
| | | formatField(element, value) { |
| | | element.textContent = value; |
| | | } |
| | | |
| | | createTimelineElement(item, template) { |
| | | console.log(item); |
| | | console.log(template); |
| | | for (let [field, value] of Object.entries(item.fields)) { |
| | | if (!['timeline', 'number'].includes(field)) { |
| | | let el = template.querySelector(`[data-field="${field}"]`); |
| | | if (!el) { |
| | | console.log(`Element Not found for ${field}`); |
| | | } |
| | | if (value === '') { |
| | | el?.remove(); |
| | | } |
| | | if (!el || value === '') continue; |
| | | if (this.isImageField(item, value)) { |
| | | this.formatImageFields(el, value, item); |