https://visitrunavik.fo/views/whatson/views/js/customElements/WhatsonPlaceholderImage.js?v=1790869110

1
2/**
3 * Whatson placeholder image
4 * 
5 * Used as placeholder for missing image
6 * 
7 * @author 					Pætur Mortensen
8 */
9class WhatsonPlaceholderImage extends HTMLElement{
10	
11	constructor(){
12		super();
13
14		this.attachShadow({mode: 'open'});
15
16		this.shadowRoot.innerHTML = `
17			<style>
18				:host{
19					position: absolute;
20					width: 100%;
21					height: 100%;
22				}
23				#container{
24					position: relative;
25					height: 100%;
26					width: 100%;
27				}
28				#bottomGradient{
29					position: absolute;
30					left: 0;
31					right: 0;
32					bottom: 0;
33					height: 50%;
34					background-image: linear-gradient(#00000000, #00000055);
35					display: none;
36				}
37			</style>
38			<div id="container">
39				<slot></slot>
40				<div id="bottomGradient"></div>
41			</div>
42		`;
43	}
44
45	/**
46	 * Called when the element is inserted into the DOM
47	 * 
48	 * @author 					Pætur Mortensen
49	 */
50	connectedCallback(){
51		// Get the seed attribute and handle it if it has been set
52		const seed = this.getAttribute('data-seed');
53		if(seed !== null) this.handle_seed(seed);
54
55		if(this.hasAttribute('data-addBottomGradient')){
56			const addBottomGradient = this.getAttribute('data-addBottomGradient');
57			if(addBottomGradient !== 'false'){
58				this.add_bottom_gradient();
59			}
60		}
61	}
62
63	/**
64	 * Add a bottom gradient to the placeholder image
65	 * 
66	 * @author 					Pætur Mortensen
67	 */
68	add_bottom_gradient(){
69		const bottomGradient = this.shadowRoot.querySelector('#bottomGradient');
70		bottomGradient.style.display = 'block';
71	}
72
73	/**
74	 * Set attributes to observe for changes
75	 * 
76	 * @author 					Pætur Mortensen
77	 */
78	static get observedAttributes() {
79		return ['data-seed'];
80	}
81
82	/**
83	 * Callback for when attribute value changes
84	 * 
85	 * @param 		{string} 	name 												Attribute name 
86	 * @param 		{string} 	oldValue 										Previous value of attribute 
87	 * @param 		{string} 	newValue 										New attribute value
88	 * 
89	 * @author 					Pætur Mortensen 
90	 */
91	attributeChangedCallback(name, oldValue, newValue) {
92		if (name === 'data-seed') {
93				this.handle_seed(newValue);
94		}
95	}
96
97	handle_seed(seed) {
98		// Background colors to choose from
99		const backgroundColors = [ 'c12759', '006b74', '009fff', '217d3d', 'ae2c64' ];
100
101		// Set the color for this placeholder
102		const colorKey = seed % 5;
103		const color = backgroundColors[colorKey];
104
105		this.style.backgroundColor = `#${color}`;
106	}
107	
108}
109
110customElements.define('whatson-placeholder-image', WhatsonPlaceholderImage);