tutorial.php — Products Compare for WooCommerce 3.6.2.7

products-compare-for-woocommerce / berocket / libraries / tutorial.php

products-compare-for-woocommerce / berocket / libraries Last commit date

addons 1 month ago templates 1 month ago check_init.php 1 month ago feature_tab.php 1 month ago popup.php 1 month ago tippy.php 1 month ago tutorial.php 1 month ago wpml_compatibility.php 1 month ago

tutorial.php

318 lines

1	<?php
2	if( ! class_exists('BeRocket_tutorial_tab') ) {
3	class BAPF_tutorial_tab {
4	function __construct() {
5	$element_types = array(
6	'youtube',
7	'link',
8	'html',
9	);
10	add_filter('berocket_tutorial_tab_section', array(__CLASS__, 'build_section'), 10, 4);
11	add_filter('berocket_tutorial_tab_element', array(__CLASS__, 'build_element'), 10, 5);
12	foreach($element_types as $element_type) {
13	add_filter('berocket_tutorial_tab_element_'.$element_type, array(__CLASS__, 'build_element_'.$element_type), 10, 5);
14	}
15	}
16	public static function add_code() {
17	add_action('admin_footer', array(__CLASS__, 'required_code'));
18	}
19	public static function build($data, $additional = '') {
20	$html = '';
21	if( is_array($data) ) {
22	foreach($data as $section_id => $section) {
23	$html .= apply_filters('berocket_tutorial_tab_section', '', $section, $section_id, $additional);
24	}
25	self::add_code();
26	}
27	return $html;
28	}
29	public static function build_section($html, $section, $section_id, $additional = '') {
30	if( is_array($section) && isset($section['elements']) && is_array($section['elements']) && count($section['elements']) ) {
31	$html .= '<div class="br_tutorial_section">';
32	if( isset($section['title']) ) {
33	$html .= '<h2>' . $section['title'] .'</h2>';
34	}
35	$html .= '<div class="br_tutorial_section_elements">';
36	foreach($section['elements'] as $element_id => $element) {
37	$html .= apply_filters('berocket_tutorial_tab_element', '', $element, $section_id, $element_id, $additional
38	);
39	}
40	$html .= '</div></div>';
41	}
42	return $html;
43	}
44	public static function build_element($html, $element, $section_id, $element_id, $additional = '') {
45	$element = array_merge(array('paid' => false), $element);
46	$html .= '<div class="br_tutorial_element br_tutorial_element_'.$element['type'].(empty($element['paid']) ? '' : ' br_tutorial_only_paid').'">';
47	$html .= apply_filters('berocket_tutorial_tab_element_'.$element['type'], '', $element, $section_id, $element_id, $additional);
48	$html .= '<h3>'.$element['title'].'</h3>';
49	$html .='</div>';
50	return $html;
51	}
52	public static function build_element_youtube($html, $element, $section_id, $element_id, $additional = '') {
53	if( ! empty($element['video']) ) {
54	$html .= '<div data-video="'.$element['video'].'" class="br_tutorial_youtube" style="background-image:url(https://img.youtube.com/vi/'.$element['video'].'/sddefault.jpg);">
55	<span class="ytp-large-play-button ytp-button" aria-label="Watch"><svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#212121" fill-opacity="0.6"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg></span>
56	</div>';
57	}
58	return $html;
59	}
60	public static function build_element_link($html, $element, $section_id, $element_id, $additional = '') {
61	if( ! empty($element['link']) ) {
62	$html .= '<div data-link="'.br_get_value_from_array($element, 'link').'" class="br_tutorial_link" style="background-image:url('.br_get_value_from_array($element, 'img').');">
63	<span class="br-link-icon" aria-label="open">
64	<svg viewBox="0 0 32 32" width="100%" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke-opacity="0.6">
65	<path d="M18 8 C18 8 24 2 27 5 30 8 29 12 24 16 19 20 16 21 14 17 M14 24 C14 24 8 30 5 27 2 24 3 20 8 16 13 12 16 11 18 15" ></path>
66	</svg>
67	</span>
68	</div>';
69	}
70	return $html;
71	}
72	public static function build_element_html($html, $element, $section_id, $element_id, $additional = '') {
73	if( ! empty($element['html']) ) {
74	$html .= '<div class="br_tutorial_html" style="background-image:url('.br_get_value_from_array($element, 'img').');">
75	<span class="br-question-icon" aria-label="open">
76	<svg viewBox="0 0 85 85" xmlns="http://www.w3.org/2000/svg">
77	<path d="m42.37985,0.7408c-22.935,-0.015 -41.855,18.864 -41.865,41.774c-0.009,23.403 18.722,42.228 42.013,42.225c23.185,-0.003 41.988,-18.82 41.985,-42.013c-0.002,-23.233 -18.806,-41.97 -42.133,-41.986zm1.037,69.837c-3.299,0.027 -5.461,-2.08 -5.474,-5.332c-0.014,-3.298 2.089,-5.447 5.347,-5.464c3.22,-0.017 5.461,2.198 5.462,5.396c0.001,3.159 -2.188,5.375 -5.335,5.4zm12.91,-32.644c-1.209,2.626 -3.042,4.78 -4.971,6.863c-1.687,1.822 -2.979,3.816 -3.573,6.273c-0.584,2.42 -3.066,3.882 -5.458,3.37c-2.205,-0.472 -3.502,-2.64 -3.185,-5.167c0.463,-3.685 2.492,-6.495 4.892,-9.143c2.326,-2.567 3.984,-5.44 3.5,-9.089c-0.124,-0.936 -0.336,-1.906 -0.739,-2.749c-1.062,-2.216 -3.772,-2.551 -5.337,-0.646c-0.645,0.785 -1.099,1.762 -1.484,2.714c-0.667,1.65 -1.924,2.258 -3.578,2.284c-1.199,0.019 -2.399,0.026 -3.598,-0.001c-2.296,-0.052 -3.059,-1.019 -2.647,-3.311c1.273,-7.108 6.19,-11.073 15.502,-11.072c1.893,0.015 5.314,0.775 8.059,3.398c3.987,3.812 5.081,10.924 2.617,16.276z" fill="#212121" fill-opacity="0.6" clip-rule="evenodd" fill-rule="evenodd"/>
78	</svg>
79	</span>
80	<div class="br_element_html_popup_content" style="display: none!important;">'.$element['html'].'</div>
81	</div>';
82	}
83	return $html;
84	}
85	public static function required_code() {
86	self::javascript();
87	self::css();
88	}
89	public static function javascript() {
90	?>
91	<script>
92	jQuery(document).ready(function(){
93	function show_simple_popup(content, width, height) {
94	if( typeof(width) == 'undefined' \|\| width == 0 ) {
95	width = jQuery(window).width() - 80;
96	}
97	if( typeof(height) == 'undefined' \|\| height == 0 ) {
98	height = jQuery(window).height() - 80;
99	}
100	var $content = jQuery(content);
101	var style = 'width:'+width+'px;height:'+height+'px;margin-left:-'+(width/2)+'px;margin-top:-'+(height/2)+'px;';
102	var html = '<div class="br_tutorial_popup"><div style="'+style+'" class="br_tutorial_popup_content"></div><span class="dashicons dashicons-no"></span></div>';
103	jQuery('.br_tutorial_popup').remove();
104	jQuery('body').append(jQuery(html));
105	jQuery('.br_tutorial_popup_content').append($content);
106	}
107	jQuery(document).on('click', '.br_tutorial_popup_content', function(e) {
108	e.stopPropagation();
109	});
110	jQuery(document).on('click', '.br_tutorial_popup', function(e) {
111	jQuery('.br_tutorial_popup').remove();
112	});
113	jQuery(document).on('click', '.br_tutorial_element_youtube', function() {
114	var video = jQuery(this).find('.br_tutorial_youtube').data('video');
115	var width = jQuery(window).width() - 80;
116	var height = jQuery(window).height() - 80;
117	var width = parseInt(Math.min(width, (height/9*16)));
118	var height = parseInt(Math.min(height, (width/16*9)));
119	var content = '<iframe width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+video+'?rel=0&showinfo=0&autoplay=1" frameborder="0" allowfullscreen="" allow="autoplay"></iframe>';
120	show_simple_popup(content, width, height);
121	});
122	jQuery(document).on('click', '.br_tutorial_element_link', function() {
123	window.open(jQuery(this).find('.br_tutorial_link').data('link'),'_blank');
124	});
125	jQuery(document).on('click', '.br_tutorial_element_html', function() {
126	var content = '<div style="padding:10px;max-width:100%;">'+jQuery(this).find('.br_element_html_popup_content').html()+'</div>';
127	show_simple_popup(content);
128	});
129	});
130	</script>
131	<?php
132	}
133	public static function css() {
134	?>
135	<style>
136	.br_tutorial_popup {
137	position: fixed;
138	z-index: 999999999999;
139	top: 0;
140	bottom: 0;
141	left: 0;
142	right: 0;
143	background-color: rgba(0,0,0,0.5);
144	}
145	.br_tutorial_popup .dashicons {
146	position: absolute;
147	top: 0px;
148	right: 0px;
149	font-size: 50px;
150	line-height: 1em;
151	color: white;
152	display: block;
153	width: 50px;
154	height: 50px;
155	cursor: pointer;
156	}
157	.br_tutorial_popup .dashicons:hover {
158	color: #cc3333;
159	}
160	.br_tutorial_popup .br_tutorial_popup_content {
161	position: absolute;
162	top: 50%;
163	left: 50%;
164	background-color: rgb(255, 255, 255);
165	animation-duration: 0.2s;
166	animation-name: br_tutorial_popup_content;
167	overflow: auto;
168	}
169	.br_tutorial_popup .br_tutorial_popup_content iframe {
170	display: block;
171	}
172	@keyframes br_tutorial_popup_content {
173	0% {
174	top: -50%;
175	}
176	100% {
177	top: 50%;
178	}
179	}
180
181
182	.br_framework_settings .br_tutorial_section + .br_tutorial_section {
183	margin-top: 30px;
184	}
185	.br_framework_settings .br_tutorial_section > h2 {
186	box-sizing: border-box;
187	text-align: left;
188	text-align: start;
189	padding: 20px 0 !important;
190	color: #515861;
191	font-size: 1.75rem;
192	line-height: 1em;
193	margin: 5px 0;
194	}
195	.br_tutorial_section_elements {
196	display: flex;
197	justify-content: left;
198	justify-content: start;
199	flex-wrap: wrap;
200	gap: 20px;
201	}
202	.br_tutorial_section_elements .br_tutorial_element {
203	flex-basis: 32%;
204	margin: 0;
205	flex-grow: 1;
206	max-width: 32%;
207	position: relative;
208	display: flex;
209	flex-direction: column;
210	box-shadow: 0 2px 6px 0 rgba(12,13,14,.15) !important;
211	border-radius: 10px;
212	overflow: hidden;
213	border: 0 none;
214	cursor: pointer;
215	}
216	.br_tutorial_section_elements .br_tutorial_element > h3 {
217	display: block;
218	margin: 0;
219	padding: 10px 20px;
220	background-color: #515861;
221	font-size: 16px;
222	line-height: 1em;
223	color: white;
224	position: absolute;
225	bottom: 0;
226	left: 0;
227	border-top-right-radius: 10px;
228	}
229
230
231	@media screen and (max-width: 1200px) {
232	.br_tutorial_section_elements .br_tutorial_element {
233	flex-basis: 49%;
234	margin: 0 0 20px 2%;
235	flex-grow: 1;
236	max-width: 49%;
237	}
238	.br_tutorial_section_elements .br_tutorial_element:nth-child(3n+1) {
239	margin-left: 2%;
240	}
241	.br_tutorial_section_elements .br_tutorial_element:nth-child(2n+1) {
242	margin-left: 0;
243	}
244	}
245	@media screen and (max-width: 768px) {
246	.br_tutorial_section_elements .br_tutorial_element {
247	flex-basis: 94%;
248	margin: 0 3% 20px 3%;
249	flex-grow: 1;
250	max-width: 94%;
251	}
252	.br_framework_settings .br_tutorial_section > h2 {
253	font-size: 1.25rem;
254	margin-left: 3%;
255	}
256	.br_tutorial_section_elements .br_tutorial_element:nth-child(3n+1) {
257	margin-left: 3%;
258	}
259	.br_tutorial_section_elements .br_tutorial_element:nth-child(2n+1) {
260	margin-left: 3%;
261	}
262	}
263
264
265	.br_tutorial_section_elements .br_tutorial_element .br_tutorial_youtube {
266	background-position: center left;
267	background-size: cover;
268	width: 100%;
269	height: 0;
270	padding-top: 55%;
271	position: relative;
272	}
273	.br_tutorial_section_elements .br_tutorial_element .ytp-large-play-button,
274	.br_tutorial_section_elements .br_tutorial_element .br-link-icon,
275	.br_tutorial_section_elements .br_tutorial_element .br-question-icon {
276	position: absolute;
277	left: 50%;
278	top: 50%;
279	width: 68px;
280	height: 68px;
281	margin-left: -34px;
282	margin-top: -34px;
283	-moz-transition: opacity .25s cubic-bezier(0,0,.2,1);
284	-webkit-transition: opacity .25s cubic-bezier(0,0,.2,1);
285	transition: opacity .25s cubic-bezier(0,0,.2,1);
286	z-index: 63;
287	}
288	.br_tutorial_section_elements .br_tutorial_element_youtube:hover .ytp-large-play-button-bg,
289	.br_tutorial_section_elements .br_tutorial_element_html:hover .br-question-icon path{
290	-moz-transition: fill .1s cubic-bezier(0,0,.2,1),fill-opacity .1s cubic-bezier(0,0,.2,1);
291	-webkit-transition: fill .1s cubic-bezier(0,0,.2,1),fill-opacity .1s cubic-bezier(0,0,.2,1);
292	transition: fill .1s cubic-bezier(0,0,.2,1),fill-opacity .1s cubic-bezier(0,0,.2,1);
293	fill: red;
294	fill-opacity: 1;
295	}
296	.br_tutorial_section_elements .br_tutorial_element_link:hover .br-link-icon path {
297	color: red;
298	stroke-opacity: 1;
299	}
300	.br_tutorial_section_elements .br_tutorial_element .br_tutorial_link,
301	.br_tutorial_section_elements .br_tutorial_element .br_tutorial_html {
302	background-position: center left;
303	background-size: contain;
304	background-repeat: no-repeat;
305	width: 100%;
306	height: 0;
307	padding-top: 55%;
308	position: relative;
309	}
310	</style>
311	<?php
312	}
313	}
314	new BAPF_tutorial_tab();
315	function berocket_tutorial_tab($data, $additional = '') {
316	return BAPF_tutorial_tab::build($data, $additional);
317	}
318	}