https://domainedelarchey.com/tags/engagementsIcon.tag

1<engagementsIcon>
2
3	<a href="/{cur_lang}/engagements"
4		class="engagements-icon">
5		<div class="engagements-icon__container">
6
7			<div class="engagements-icon__image">
8				<img src="/img/icon/engagements/Icone-on-sengage.svg" />
9			</div>
10
11			<div class="engagements-icon__text">
12				<p>
13					<span class="engagements-icon__title">{ title }</span>
14					<span class="engagements-icon__subtitle">{ subtitle }</span>
15				</p>
16			</div>
17		</div>
18	</a>
19
20
21	<script>
22		const self = this;
23
24		self.cur_lang = curLang;
25
26		switch (curLang) {
27			case 'fra':
28				title = 'On s\'engage';
29				subtitle = 'Découvrez notre charte';
30				break;
31			case 'spa':
32				title = 'Nuestros compromisos';
33				subtitle = 'Descubre nuestra carta';
34				break;
35			case 'deu':
36				title = 'Unsere Verpflichtungen';
37				subtitle = 'Entdecken Sie unsere Charta';
38				break;
39			case 'por':
40				title = 'Nossos compromissos';
41				subtitle = 'Conheça nosso charter';
42				break;
43			case 'ita':
44				title = 'I nostri impegni';
45				subtitle = 'Scopri la nostra carta';
46				break;
47			case 'nld':
48				title = 'Onze verplichtingen';
49				subtitle = 'Ontdek ons charter';
50				break;
51			default:
52				title = 'Our commitments';
53				subtitle = 'Discover our charter';
54				break;
55		}
56
57		self.on('mount', () => {
58			let container = false;
59			if ($('#bg_image_container').length) {
60				container = $('#bg_image_container');
61			}
62
63			if ($('#featured_content_container').length) {
64				container = $('#featured_content_container');
65			}
66
67			if ($('#fullscreen_video').length) {
68				container = $('#fullscreen_video');
69			}
70
71			if (container) {
72
73				const widget = $('engagementsIcon');
74
75				if (opts.position !== false) {
76
77					$('.engagements-icon').css(setPosition(opts.position));
78				}
79				container.append(widget);
80			}
81
82		});
83
84		function setPosition(position) {
85
86			switch (position) {
87				case 'top-left':
88					position = {
89						'top': '30px',
90						'left': '30px'
91					};
92					break;
93				case 'top-right':
94					position = {
95						'top': '30px',
96						'right': '30px'
97					};
98					break;
99
100				case 'bottom-right':
101					position = {
102						'bottom': '30px',
103						'right': '30px'
104					};
105					break;
106
107				case 'bottom-left':
108				default:
109					position = {
110						'bottom': '30px',
111						'left': '30px'
112					};
113					break;
114
115
116			}
117
118			return position;
119		}
120	</script>
121
122	<style>
123		.engagements-icon {
124			position: absolute;
125			bottom: 20px;
126			left: 20px;
127			padding: 0.5rem 1rem;
128			background-color: #fff;
129			border-radius: 8px;
130			border: 2px solid #8FB391;
131			height: 75px;
132			display: none;
133		}
134
135		@media (min-width:640px) {
136
137			.engagements-icon {
138				display: block;
139			}
140		}
141
142		.engagements-icon__container {
143			position: relative;
144			display: flex;
145			align-items: center;
146			overflow: hidden;
147			transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
148			width: auto;
149		}
150
151		.engagements-icon__image {
152			height: 50px;
153			width: auto;
154
155		}
156
157		.engagements-icon__image img {
158			width: 100%;
159			height: 100%;
160			object-fit: contain;
161
162		}
163
164		.engagements-icon__title {
165			display: block;
166			font-size: 1.2rem;
167			font-weight: bold;
168			color: #487165;
169		}
170
171		.engagements-icon__text {
172			display: grid;
173			grid-template-columns: 0fr;
174			transition: grid-template-columns 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
175		}
176
177		.engagements-icon:hover .engagements-icon__text {
178			grid-template-columns: 1fr;
179		}
180
181		.engagements-icon__text p {
182			margin-bottom: 0;
183			overflow: hidden;
184
185		}
186
187		.engagements-icon__text p span {
188
189			display: block;
190			white-space: nowrap;
191		}
192
193
194		.engagements-icon__subtitle {
195			color: #454545;
196		}
197	</style>
198</engagementsIcon>