amedea / widgets / scroll-focus / scroll-focus.php

scroll-focus.php in Amedea – Unique Design Elements for Elementor trunk, at widgets/scroll-focus/scroll-focus.php

382 lines 9.9 KB

Raw Download Zip

1	<?php
2	namespace Amedea\Widgets;
3
4	use \Elementor\Widget_Base;
5	use \Elementor\Controls_Manager;
6
7	/**
8	* Elementor Hello World
9	*
10	* Elementor widget for hello world.
11	*
12	* @since 1.0.0
13	*/
14
15	class amedea__scroll_focus extends Widget_Base {
16
17	/**
18	* Retrieve the widget name.
19	*
20	* @since 1.0.0
21	*
22	* @return string Widget name.
23	*/
24
25	public function get_name() {
26	return 'scroll_focus';
27	}
28
29	/**
30	* Retrieve the widget title.
31	*
32	* @since 1.0.0
33	*
34	* @return string Widget title.
35	*/
36
37	public function get_title() {
38	return esc_html__( 'Scroll Focus', 'amedea' );
39	}
40
41	/**
42	* Retrieve the widget icon.
43	*
44	* @since 1.0.0
45	*
46	* @return string Widget icon.
47	*/
48
49	public function get_icon() {
50	return 'eicon-testimonial-carousel';
51	}
52
53	/**
54	* Retrieve the list of scripts the widget depended on.
55	*
56	* Used to set scripts dependencies required to run the widget.
57	*
58	* @since 1.0.0
59	*
60	* @return array Widget scripts dependencies.
61	*/
62
63	public function get_script_depends() {
64	return [ ];
65	}
66
67	/**
68	* Retrieve the list of style the widget depended on.
69	*
70	* Used to set styles dependencies required to run the widget.
71	*
72	* @since 1.0.0
73	*
74	* @access public
75	*
76	* @return array Widget style dependencies.
77	*/
78	public function get_style_depends() {
79	return [ 'scroll-focus' ];
80	}
81
82	/**
83	* Retrieve the list of categories the widget belongs to.
84	*
85	* Used to determine where to display the widget in the editor.
86	*
87	* Note that currently Elementor supports only one category.
88	* When multiple categories passed, Elementor uses the first one.
89	*
90	* @since 1.0.0
91	*
92	* @return array Widget categories.
93	*/
94
95	public function get_categories() {
96	return [ 'amedea-category' , 'amedea-scroll-focus-category' ];
97	}
98
99
100	/**
101	* Register the widget controls.
102	*
103	* Adds different input fields to allow the user to change and customize the widget settings.
104	*
105	* @since 1.0.0
106	*
107	* @access protected
108	*/
109
110	protected function register_controls() {
111
112	$this->start_controls_section(
113	'section_content0',
114	[
115	'label' => esc_html__( 'Color', 'amedea' ),
116	'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
117	]
118	);
119
120	$this->add_control(
121	'style',
122	array(
123	'label' => esc_html__('Text Color', 'amedea'),
124	'type' => \Elementor\Controls_Manager::SELECT,
125	'default' => 'dark',
126	'label_block' => true,
127	'options' => array(
128	'light' => esc_html__('Light', 'amedea'),
129	'dark' => esc_html__('Dark', 'amedea'),
130	)
131	)
132	);
133
134	$this->end_controls_section();
135
136	$this->start_controls_section(
137	'section_content',
138	[
139	'label' => esc_html__( 'Configuration', 'amedea' ),
140	'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
141	]
142	);
143
144	$this->add_control(
145	'sitename',
146	[
147	'label' => esc_html__( 'Site name', 'amedea' ),
148	'type' => \Elementor\Controls_Manager::TEXT,
149	'default' => esc_html__( 'Amedea Studio', 'amedea' ),
150	'placeholder' => esc_html__( 'Type your content here', 'amedea' ),
151	]
152	);
153
154	$this->add_control(
155	'siteslogan',
156	[
157	'label' => esc_html__( 'Slogan', 'amedea' ),
158	'type' => \Elementor\Controls_Manager::TEXT,
159	'default' => esc_html__( 'Architecture of Silence.', 'amedea' ),
160	'placeholder' => esc_html__( 'Type your content here', 'amedea' ),
161	]
162	);
163	$this->add_control(
164	'intro',
165	[
166	'label' => esc_html__( 'Intro', 'amedea' ),
167	'type' => \Elementor\Controls_Manager::TEXT,
168	'default' => esc_html__( 'Start the conversation', 'amedea' ),
169	'placeholder' => esc_html__( 'Type your content here', 'amedea' ),
170	]
171	);
172
173	$this->add_control(
174	'email',
175	[
176	'label' => esc_html__( 'Email', 'amedea' ),
177	'type' => \Elementor\Controls_Manager::TEXT,
178	'default' => esc_html__( 'hello@amedeapro.com', 'amedea' ),
179	'placeholder' => esc_html__( 'Type your content here', 'amedea' ),
180	]
181	);
182
183	$this->add_control(
184	'location',
185	[
186	'label' => esc_html__( 'Location', 'amedea' ),
187	'type' => \Elementor\Controls_Manager::TEXT,
188	'default' => esc_html__( 'Copenhagen / Tokyo / New York', 'amedea' ),
189	'placeholder' => esc_html__( 'Type your content here', 'amedea' ),
190	]
191	);
192
193
194
195	$repeater = new \Elementor\Repeater();
196
197	$repeater->add_control(
198	'itemtitle',
199	[
200	'label' => esc_html__( 'Item Title', 'amedea' ),
201	'type' => \Elementor\Controls_Manager::TEXT,
202	'default' => esc_html__( 'Item title', 'amedea' ),
203	'placeholder' => esc_html__( 'Type your content here', 'amedea' ),
204	]
205	);
206
207	$repeater->add_control(
208	'itemcontent',
209	[
210	'label' => esc_html__( 'Item Content', 'amedea' ),
211	'type' => \Elementor\Controls_Manager::TEXT,
212	'default' => esc_html__( 'item content text.', 'amedea' ),
213	'placeholder' => esc_html__( 'Type your content here', 'amedea' ),
214	]
215	);
216
217	$repeater->add_control(
218	'itemmediatype',
219	array(
220	'label' => esc_html__('Media Type', 'amedea'),
221	'type' => \Elementor\Controls_Manager::SELECT,
222	'default' => 'image',
223	'label_block' => true,
224	'options' => array(
225	'image' => esc_html__('Image', 'amedea'),
226	'video' => esc_html__('Video', 'amedea'),
227	)
228	)
229	);
230
231	$repeater->add_control(
232	'itemmedia',
233	[
234	'label' => esc_html__( 'Media', 'amedea' ),
235	'type' => \Elementor\Controls_Manager::MEDIA,
236	'placeholder' => esc_html__( 'Required*', 'amedea' ),
237	]
238	);
239
240	$this->add_control(
241	'images',
242	array(
243	'label' => sprintf('Menu items<pre>Six items</pre>', 'amedea'),
244	'type' => Controls_Manager::REPEATER,
245	'fields' => $repeater->get_controls(),
246	'default' => [
247	[
248	'itemtitle' => esc_html__( 'Item 1', 'amedea' ),
249	'itemcontent' => esc_html__( ' ', 'amedea' ),
250	'itemmedia' => '',
251	'itemmediatype' => '',
252	],
253	[
254	'itemtitle' => esc_html__( 'Item 1', 'amedea' ),
255	'itemcontent' => esc_html__( ' ', 'amedea' ),
256	'itemmedia' => '',
257	'itemmediatype' => '',
258	],
259	],
260	'title_field' => '<span>{{ itemtitle }}</span>',
261	)
262	);
263
264	$this->end_controls_section();
265
266	$this->start_controls_section(
267	'section_content3',
268	[
269	'label' => esc_html__( 'Color Management', 'amedea' ),
270	'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
271	]
272	);
273
274	$this->add_control(
275	'colorbg',
276	array(
277	'label' => esc_html__('Background', 'amedea'),
278	'type' => \Elementor\Controls_Manager::COLOR
279	)
280	);
281
282	$this->add_control(
283	'muted',
284	array(
285	'label' => esc_html__('Text muted', 'amedea'),
286	'type' => \Elementor\Controls_Manager::COLOR
287	)
288	);
289
290	$this->add_control(
291	'light',
292	array(
293	'label' => esc_html__('Text light', 'amedea'),
294	'type' => \Elementor\Controls_Manager::COLOR
295	)
296	);
297
298	$this->add_control(
299	'accent',
300	array(
301	'label' => esc_html__('Accent', 'amedea'),
302	'type' => \Elementor\Controls_Manager::COLOR
303	)
304	);
305
306	$this->end_controls_section();
307
308	}
309
310	/**
311	* Render the widget output on the frontend.
312	*
313	* Written in PHP and used to generate the final HTML.
314	*
315	* @since 1.0.0
316	*
317	* @access protected
318	*/
319	protected function render() {
320	$settings = $this->get_settings_for_display();
321	$images = $settings['images'];
322	$style = $settings['style'];
323
324	?>
325	<style>body{margin: 0;background: var(--bg);color: var(--text-light);font-family: Helvetica, sans-serif;overflow-x: hidden;-webkit-font-smoothing: antialiased;
326	--bg: <?php echo esc_html($settings['colorbg']); ?>;--text-muted:<?php echo esc_html($settings['muted']); ?>;--text-light: <?php echo esc_html($settings['light']); ?>;--accent: <?php echo esc_html($settings['accent']); ?>;
327	timeline-scope: --s1, --s2, --s3, --s4, --s5, --s6;}</style>
328	<section class="scroll--focus__container <?php echo esc_html($settings['style']); ?>">
329	<div class="scroll--focus__mobile-progress">
330	<svg viewBox="0 0 100 100"><circle class="scroll--focus__track-circle" cx="50" cy="50" r="40" /><circle class="scroll--focus__progress-circle" cx="50" cy="50" r="40" pathLength="1" /></svg>
331	</div>
332
333	<div class="scroll--focus__sticky-visual">
334	<div class="scroll--focus__desktop-progress"></div>
335
336	<?php $i = 1; if (is_array($images) \|\| is_object($images)) { foreach($images as $key => $image): ?>
337	<div class="scroll--focus__shape-container scroll--focus__shape-<?php echo esc_attr($i); ?>">
338	<div><img src="<?php echo esc_url($image['itemmedia']['url']); ?>" /></div>
339	</div>
340	<?php $i++; endforeach; } ?>
341
342	</div>
343
344	<div class="scroll--focus__content">
345	<div class="scroll--focus__header">
346	<div>
347	<h1><?php echo esc_html($settings['sitename']); ?></h1>
348	<span class="scroll--focus__title-large"><?php echo esc_html($settings['siteslogan']); ?></span>
349	</div>
350	</div>
351
352	<?php $i = 1; if (is_array($images) \|\| is_object($images)) { foreach($images as $key => $image): ?>
353	<div class="scroll--focus__scroll-section scroll--focus__s<?php echo esc_attr($i); ?>">
354	<p class="scroll--focus__focus-text"><?php echo esc_html($image['itemtitle']); ?></p>
355	<p class="scroll--focus__description"><?php echo esc_html($image['itemcontent']); ?></p>
356	</div>
357	<?php $i++; endforeach; } ?>
358
359
360	<div class="scroll--focus__closing-section">
361	<div class="scroll--focus__closer">
362	<strong><?php echo esc_html($settings['intro']); ?></strong>
363	<?php echo esc_html($settings['email']); ?><br>
364	<?php echo esc_html($settings['location']); ?>
365	</div>
366	</div>
367	</div>
368	</section>
369	<?php
370
371	}
372
373	/**
374	* Render the widget output in the editor.
375	*
376	* Written as a Backbone JavaScript template and used to generate the live preview.
377	*
378	* @since 1.0.0
379	*/
380
381	protected function content_template() {}
382	}