https://www.mittersill.info/js/mw-core/mw-core-singleimage.js

1import mwCore from "/js/mw-core/mw-core.js"
2import mwUtility from "/js/mw-core/mw-utility.js"
3
4class mwCoreSingleimage extends mwCore {
5
6	// livecycle methods
7
8	beforeFirstRender() {
9
10		let template
11
12		// render data
13
14		try {
15
16			template = this.querySelector(`template[is="component-data"]`)
17
18			if (template) {
19
20				this._data = JSON.parse(template.content.textContent)
21
22				// remove template from DOM
23
24				template.remove()
25
26			}
27
28		} catch (error) {
29			console.error(error)
30			return
31		}
32
33	}
34
35	static get observedAttributes() {
36		return ["textposition", "parallax"]
37	}
38
39	// css
40
41	styles() {
42
43		return [
44			`<link href="/css/styleguide.css" rel="stylesheet">`,
45			`
46				* {
47					user-select: none;
48				}
49				a {
50					text-decoration: none;
51				}
52				:host {
53					margin-left: -16px;
54					margin-right: -16px;
55				}
56				:host([parallax]) {
57					margin-left: 0;
58					margin-right: 0;
59				}
60				.wrapper {
61					position: relative;     
62				}
63				img {
64					display: block;
65					height: 100%;
66					object-fit: cover;
67					width: 100%;
68				}
69				p {
70					background: var(--mw-core-color-background-bright);
71					display: block;
72					margin: 0; 
73					padding: 16px; 
74				}
75				:host([textposition="inside"]) p {
76					background: var(--mw-core-color-overlay-dark50);
77					bottom: 24px;
78					color: var(--mw-core-color-body-text-bright);
79					margin-left: 16px;
80					padding: 5px 8px;
81					position: absolute;
82					right: 16px;
83				}
84				:host([parallax]) p {
85					bottom: auto !important;
86					margin-left: 0 !important;
87					position: relative;
88					right: auto !important;
89				}
90				:host([parallax]) .image {
91					align-items: center;
92					display: flex;
93					height: 300px;
94					justify-content: center;
95					padding: 0 16px;
96				}
97				.css-media-background {
98					background-position: center;
99					background-repeat: no-repeat;
100					background-size: cover;
101					height: 100%;
102					position: absolute;
103					width: 100%;
104				}
105
106				@media all and (min-width: 769px) {
107
108					:host {
109						margin-left: 0;
110						margin-right: 0;
111					}
112					p {
113						padding: 16px 23px; 
114					}
115					:host([parallax]) .image {
116						height: 600px;
117					}
118					:host([textposition="inside"]) p {
119						bottom: 32px;
120						margin-left: 70px;
121						right: 70px;
122					}
123
124				}
125				
126				@media all and (min-width: 981px) {
127
128					.css-media-background {
129						background-attachment: fixed;
130					}
131
132				}
133
134			`
135		]
136
137	}
138
139	// render tempalate
140
141	render() {
142
143		// check data
144
145		if (!this._data) {
146			console.error("no valid data")
147			return ""
148		}
149
150		let picture = ``
151
152		if (!this.parallax) {
153
154			if (this._data.media && this._data.media.length > 0) {
155				picture = mwUtility.htmlMediaPicture(this._data.media[0], this.mqmedia, this._data.text)
156			}
157
158		} else {
159
160			// css image (background)
161
162			picture = `
163				<div class="css-media-background"></div>
164				<style>
165					${mwUtility.cssMediaBackground(this._data.media[0], this.mqmedia, this._data.text)}
166				</style>
167			`
168
169		}
170
171		let textClass = ``
172
173		// set class to text
174
175		if (this.textposition === "inside") {
176			textClass = `normal-text effect-border-radius`
177		} else {
178			textClass = `small-text`
179		}
180
181		let title = this._data.text ? `<p class="${textClass}">${this._data.text}</p>` : ``
182
183		let content = ``
184
185		// check if url exists
186
187		if (this._data.href) {
188
189			content += `
190				<a href="${this._data.href ? this._data.href : `#`}" ${this._data.target ? `target="${this._data.target}"` : ``}>
191					<div class="image">
192						${picture}
193						${this.parallax ? title : ``}
194					</div>
195					${!this.parallax ? title : ``}
196				</a>
197			`
198
199		} else {
200
201			content += `
202				<div class="image">
203					${picture}
204					${this.parallax ? title : ``}
205				</div>
206				${!this.parallax ? title : ``}
207			`
208
209		}
210
211		return `
212			<div class="wrapper">
213				${content}
214			</div>
215		`
216
217	}
218
219	// getter and setter
220
221	get textposition() {
222		return this._getAttribute("textposition")
223	}
224
225	set textposition(val) {
226		this._setAttribute("textposition", val)
227	}
228
229	get mqmedia() {
230		return this._getAttribute("mqmedia")
231	}
232
233	set mqmedia(val) {
234		this._setAttribute("mqmedia", val)
235	}
236
237	get parallax() {
238		return this._getAttribute("parallax")
239	}
240
241	set parallax(val) {
242		this._setAttribute("parallax", val)
243	}
244
245}
246
247customElements.define("mw-core-singleimage", mwCoreSingleimage)