taboola / settings.php

settings.php in Taboola 3.0.0, at settings.php

601 lines 36.3 KB

Raw Download Zip

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
2
3	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
4	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
5	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
6
7	<style>
8	<?php include 'css/main.css'; ?>
9	</style>
10
11	<div class="taboola-container">
12	<div class="theme_image">
13	<img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:150px;'/>
14	</div>
15
16	<h2 style="font-size:1.7em;">Taboola WordPress Plugin</h2>
17
18	<h2 class="nav-tab-wrapper">
19	<a href="#tab1" class="nav-tab" id="tab1-link">Web</a>
20	<a href="#tab2" class="nav-tab" id="tab2-link">Web Push</a>
21	</h2>
22
23	<?php
24	if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){
25	echo "<div class='label-success'>";
26	echo "<h3 style='color:green;'>Changes applied!</h3>";
27	echo "<span>Verify the new changes by browsing to your site.</span>";
28	echo "</div>";
29	}
30
31	if(count($taboola_errors) > 0){
32	echo "<div class='label-error'>";
33	echo "<h3 style='color:red;'>Missing or incorrect values</h3>";
34	echo "<p>The following fields contained missing or incorrect values:</p>";
35	echo "<ul>";
36	for($i = 0; $i < count($taboola_errors); $i++){
37	echo "<li>".$taboola_errors[$i]."</li>";
38	}
39	echo "</ul>";
40	echo "<p><b>All values</b> have been reverted to the last successful save.</p>";
41	echo "</div>";
42	}
43
44	?>
45
46	<script>
47	function setEnabledDisabled(divID, chkToggle) {
48	var applyColor = (chkToggle.checked ? "#000" : "#666");
49	$(divID).find("label").css("color", applyColor);
50	$(divID).find("input").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
51	$(divID).find("select").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
52	}
53	</script>
54
55	<script>
56	jQuery(document).ready(function($) {
57	function showTab(tabId) {
58	$('.nav-tab').removeClass('nav-tab-active');
59	$('.tab-content').removeClass('active').hide();
60
61	$('a[href="' + tabId + '"]').addClass('nav-tab-active');
62	$(tabId).addClass('active').show();
63	}
64
65	$('.nav-tab').click(function(e) {
66	e.preventDefault();
67	var tabId = $(this).attr('href');
68	window.location.hash = tabId;
69	$('#active_tab').val(tabId);
70	showTab(tabId);
71	});
72
73	var hash = window.location.hash;
74	if (hash) {
75	showTab(hash);
76	$('#active_tab').val(hash);
77	} else {
78	showTab('#tab1');
79	}
80
81	$('form').submit(function() {
82	var activeTab = $('.nav-tab.nav-tab-active').attr('href');
83	$('#active_tab').val(activeTab);
84	});
85	});
86	</script>
87
88	<script>
89	$(document).ready(function(){
90	if ($('#home_enabled').prop("checked") === true) {
91	$("#homepage").show();
92	var ad = $('#show-advanced-settings');
93	ad.text("<< Hide advanced settings");
94	}
95	});
96	</script>
97
98	<script>
99	$(document).ready(function(){
100	$("#show-advanced-settings").click(function() {
101	$("#homepage").slideToggle("fast");
102	var ad = $('#show-advanced-settings');
103	ad.text() == "Show advanced settings >>" ? ad.text("<< Hide advanced settings") : ad.text("Show advanced settings >>");
104	});
105	});
106	</script>
107
108	<div class="publisher_welcome_massage">
109	<h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2>
110	<p class="first_p">For detailed instructions, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center.</a></p>
111	<p class="second_p"><b>Stuck? Need a hand?</b> Feel free to reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>.</p>
112	<div class="list_l1">
113	<p>Usage of this plugin is subject to <b>Taboola's</b> <a href="https://www.taboola.com/policies/platform-terms-of-service" target='_blank'>terms of service.</a></p>
114	</div>
115	</div>
116
117	<form method="POST">
118	<?php
119	$my_nonce = wp_create_nonce( 'my_plugin_update_field_action' );
120	?>
121	<input type="hidden" name="my_plugin_nonce" value="<?php echo esc_attr( $my_nonce ); ?>"/>
122	<input type="hidden" id="active_tab" name="active_tab" value="#tab1"/>
123
124
125	<div id="tab1" class="tab-content">
126	<h2 class="general_h2">General Settings</h2>
127
128	<div class="settings_block">
129	<div class="style_box1"><label id="pub_id">Publisher ID :</label>
130	<div class="tooltip">
131	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
132	<g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
133	</g>
134	</svg>
135	<div>Your Publisher ID, as provided by Taboola.</div>
136	</div>
137	</div>
138	<div class="pub_id">
139	<input id="publisher-id" type="text" name="publisher_id" placeholder="publisher" value="<?php echo !empty($settings->publisher_id) ? strip_tags($settings->publisher_id) : '' ?>"/>
140	</div>
141	<div class="statement">
142	<label style="color: #000000; padding-">
143	Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
144	</label>
145	</div>
146	</div>
147
148	<h2 class="widget_h2">Taboola Units</h2>
149	<div id="below_article" class="settings_block widget_settings_block">
150	<div class="switch_style">
151	<label class="switch">
152	<input id="first_bc_enabled" type="checkbox" <?php echo !empty($settings->first_bc_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#below_article', this)" name="first_bc_enabled" />
153	<span class="slider round"></span>
154	</label>
155	<b style="font-size:15px;">Below-article</b>
156	</div>
157	<div class="label_below">
158	<div class="mode_style">
159	<label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label>
160	<div class="tooltip">
161	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
162	<g fill="none" fill-rule="evenodd">
163	<path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
164	</g>
165	</svg>
166	<div>Your <i>below-article</i> Mode (Widget ID), as provided by Taboola. </div>
167	</div>
168	</div>
169	<div class="placement_style">
170	<label id="first_bc_placement_label" style="float:left;">Placement Name:</label>
171	<div class='tooltip'>
172	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
173	<g fill="none" fill-rule="evenodd">
174	<path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
175	</g>
176	</svg>
177	<div>Your <i>below-article</i> Placement Name, as provided by Taboola. <br>
178	<br> When upgrading from v1, fill in 'below-article'. <br>
179	<br> For more information, reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>, or contact Taboola Support.
180	</div>
181	</div>
182	</div>
183	</div>
184	<div class="input_below">
185	<div class="widget_below">
186	<input id="first_bc_widget_id" type="text" value="<?php echo !empty($settings->first_bc_widget_id) ? strip_tags($settings->first_bc_widget_id) : "" ?>" name="first_bc_widget_id" placeholder="Widget ID" />
187	</div>
188	<div class="placement_below">
189	<input type="text" id="first_bc_placement" value="<?php echo !empty($settings->first_bc_placement) ? strip_tags($settings->first_bc_placement) : "" ?>" name="first_bc_placement" placeholder="Placement Name" />
190	</div>
191	</div>
192	<br />
193	<div class='location_section'>
194	<div class='checkbox_read'>
195	<input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" />
196	<label id="out_of_content_enabled_label">Place the feed/widget just after the article container (required for <b>Read More</b>)</label>
197	</div>
198	<div class='tooltip'>
199	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_read">
200	<g fill="none" fill-rule="evenodd">
201	<path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
202	</g>
203	</svg>
204	<div>
205	Required in order for Taboola to activate <i>Read More</i>.<br><br>
206	Read More buttons can boost audience engagement significantly, especially on mobile devices.<br><br>
207	For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements#below-article-widget" target='_blank'>Taboola Dev Center</a>.</div>
208	</div>
209	</div>
210	</div>
211
212	<div id="mid_article" class="settings_block widget_settings_block">
213	<div class="switch_style">
214	<label class="switch">
215	<input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/>
216	<span class="slider round"></span>
217	</label>
218	<b style="font-size:15px;">Mid-article</b>
219	</div>
220
221	<div id="mid-article-widgets-container">
222	<?php
223	$mid_widgets = !empty($settings->mid_widgets) ? json_decode($settings->mid_widgets) : array();
224	if (empty($mid_widgets)) {
225	$mid_widgets = array(new stdClass());
226	}
227	foreach ($mid_widgets as $index => $widget) {
228	?>
229	<div class="mid-article-widget" style="border: 1px solid #ddd; padding: 10px; margin-top: 10px; border-radius: 5px;">
230	<h4 style="font-size: 14px; font-weight: bold;">Mid-Article Widget #<?php echo $index + 1; ?></h4>
231	<div style="display: flex; flex-wrap: wrap;">
232	<div style="flex: 1; min-width: 250px; padding-right: 10px;">
233	<label>Mode (Widget ID):</label>
234	<input class="widefat" type="text" name="mid_widget_id[]" value="<?php echo esc_attr($widget->widget_id ?? ''); ?>" placeholder="thumbnails-mid1" />
235	</div>
236	<div style="flex: 1; min-width: 250px;">
237	<label>Placement Name:</label>
238	<input class="widefat" type="text" name="mid_placement[]" value="<?php echo esc_attr($widget->placement ?? ''); ?>" placeholder="Mid Article Thumbnails" />
239	</div>
240	</div>
241	<div style="display: flex; flex-wrap: wrap; margin-top: 10px;">
242	<div style="flex: 1; min-width: 200px; padding-right: 10px;">
243	<label>Position below:</label>
244	<select class="widefat mid-widget-type-selector" name="mid_paragraph_ui_mode[]">
245	<option value="Paragraph" <?php echo !isset($widget->location_string) \|\| $widget->location_string === 'p' ? 'selected' : ''; ?>>Paragraph</option>
246	<option value="Other" <?php echo isset($widget->location_string) && $widget->location_string !== 'p' ? 'selected' : ''; ?>>Other (Custom)</option>
247	</select>
248	</div>
249	<div style="flex: 1; min-width: 150px; padding-right: 10px;" class="mid-css-selector-container">
250	<label>CSS selector:</label>
251	<input class="widefat" type="text" name="mid_location_string[]" value="<?php echo esc_attr($widget->location_string ?? 'p'); ?>" />
252	</div>
253	<div style="flex: 1; min-width: 150px;">
254	<label>Paragraph/Element Number:</label>
255	<input class="widefat" type="number" name="mid_location_string_occurrence[]" value="<?php echo esc_attr($widget->occurrence ?? '1'); ?>" min="1" style="width:80px;">
256	</div>
257	</div>
258	<button type="button" class="button remove-mid-widget" style="margin-top: 10px;">Remove Widget</button>
259	</div>
260	<?php } ?>
261	</div>
262	<button type="button" id="add-mid-widget" class="button button-primary" style="margin-top: 15px;">+ Add Another Mid-Article Widget</button>
263	</div>
264	<div id="right-rail" class="settings_block widget_settings_block">
265	<label id="right-rail-label"><b style="font-size:15px;margin-left: 10px;">Right-rail (sidebar)</b> </label>
266	<div style="font-size:14px;margin: 5px 10px 10px 10px;">You can insert a <b>Taboola</b> unit in your website <b>sidebar</b> (if your <b>WordPress</b> theme provides one):</div>
267
268	<div id="rightrail-banner">
269	1. In the <b>sidebar menu</b> (<i>left</i>) select <b>Appearance</b> > <b>Widgets</b>, or click <a href="widgets.php" target="_blank">here</a> to open the <b>Widgets</b> panel. </br>
270	2. Click on the <span style="font-size: 18px; font-weight:bold">+</span> icon (<i>top, left</i>) and type in <b>"Taboola".</b></br>
271	3. Drag the <b>Taboola</b> widget to the desired position in the sidebar (<i>right</i>).</br>
272	4. Enter the <b>Widget ID (Mode)</b>, as provided by <b>Taboola</b>.</br>
273	5. Click on <b>Update</b> (<i>top, right</i>) to save your changes.</br>
274	6. Browse to your website and verify that the newly added unit displays correctly.</br>
275	<hr>
276	To <b>watch a demo</b> of the above steps, see our <a href="https://developers.taboola.com/web-integrations/docs/sidebar-widget" target="_blank">online docs</a>.
277	</div>
278	</div>
279	<div id="category_widget" class="settings_block widget_settings_block">
280	<div class="switch_style">
281	<label class="switch">
282	<input id="category_enabled"
283	type="checkbox"
284	<?php echo !empty($settings->category_enabled) ? "checked='checked'" : "" ?>
285	onclick="setEnabledDisabled('#category_widget', this)"
286	name="category_enabled"/>
287	<span class="slider round"></span>
288	</label>
289	<b style="font-size:15px;">Category (Section Page)</b>
290	<div class='tooltip'>
291	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
292	viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
293	<g fill="none" fill-rule="evenodd">
294	<path fill="currentColor"
295	d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
296	</g>
297	</svg>
298	<div>Settings will be applied to all Category/Section archive pages on your site.</div>
299	</div>
300
301	</div>
302
303	<div class="label_below">
304	<div class="mode_style">
305	<label id="category_widget_id_label" style="float:left;">Mode (Widget ID):</label>
306	</div>
307	<div class="placement_style">
308	<label id="category_placement_label" style="float:left;">Placement Name:</label>
309	</div>
310	</div>
311
312	<div class="input_below">
313	<div class="widget_below">
314	<input id="category_widget_id" type="text"
315	value="<?php echo !empty($settings->category_widget_id) ? strip_tags($settings->category_widget_id) : '' ?>"
316	name="category_widget_id" placeholder="Widget ID"/>
317	</div>
318	<div class="placement_below">
319	<input id="category_placement" type="text"
320	value="<?php echo !empty($settings->category_placement) ? strip_tags($settings->category_placement) : '' ?>"
321	name="category_placement" placeholder="Placement Name"/>
322	</div>
323	</div>
324
325	<div class="home_occurrence">
326	<div class="mode_style_home_selector">
327	<label id="category_location_string_label" style="float:left;">CSS selector :</label>
328	</div>
329	<div class="placement_style_home_occurrence">
330	<label id="category_occurrence_label" style="float:left;">Occurrence :</label>
331	</div>
332	</div>
333
334	<div class="home_placement">
335	<div class="widget_below_home_selector">
336	<input id="category_location_string" type="text"
337	value="<?php echo !empty($settings->category_location_string) ? strip_tags($settings->category_location_string) : '' ?>"
338	name="category_location_string" placeholder="e.g. #content"/>
339	</div>
340	<div class="placement_below_home_Occurrence">
341	<input id="category_occurrence" type="number" min="1"
342	value="<?php echo !empty($settings->category_location_string_occurrence) ? $settings->category_location_string_occurrence : '1' ?>"
343	name="category_location_string_occurrence"
344	style="width:65px;">
345	</div>
346	</div>
347	</div>
348	<div id="homepage" class="settings_block widget_settings_block">
349	<div class="switch_style">
350	<label class="switch">
351	<input id="home_enabled" type="checkbox" <?php echo !empty($settings->home_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#homepage', this)" name="home_enabled"/>
352	<span class="slider round"></span>
353	</label>
354	<div>
355	<b style="font-size:15px;float: left;">Homepage (front page)</b>
356	<div class='tooltip'>
357	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
358	<g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
359	</g>
360	</svg>
361	<div>Settings will be applied to the page that you marked as your 'front page'.</div>
362	</div>
363	</div>
364	</div>
365
366	<div>
367	<div class="mode_style_home"><label id="home_widget_id_label" style="float:left;">Mode (Widget ID):</label>
368	<div class='tooltip'>
369	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
370	<g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
371	</g>
372	</svg>
373	<div>Your <i>homepage</i> Mode (Widget ID), as provided by Taboola.</div>
374	</div>
375	</div>
376	<div class="placement_style_home"><label id="home_placement_label" style="float:left;">Placement Name:</label>
377	<div class='tooltip'>
378	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
379	<g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
380	</g>
381	</svg>
382	<div>Your <i>homepage</i> Placement Name, as provided by Taboola.</div>
383	</div>
384	</div>
385	</div>
386	<div>
387	<div class="widget_below_home">
388	<input id="home_widget_id" type="text" value="<?php echo !empty($settings->home_widget_id) ? strip_tags($settings->home_widget_id) : "" ?>" name="home_widget_id" placeholder="Widget ID" />
389	</div>
390	<div class="placement_below_home">
391	<input id = "home_placement" type="text" value="<?php echo !empty($settings->home_placement) ? strip_tags($settings->home_placement) : "" ?>" name="home_placement" placeholder="Placement Name" />
392	</div>
393	</div>
394
395	<div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
396	<div class='tooltip'>
397	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
398	<g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
399	</g>
400	</svg>
401	<div>The widget will be placed <i>just beneath</i> this element.<br><br>
402	To target an element, 2 pieces of information are needed:<br><br>
403	i) A CSS selector - e.g. <i>p</i> (for paragraph).<br>
404	ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br>
405	For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>.
406	</div>
407	</div>
408	</div>
409
410
411	<div class="home_occurrence">
412	<div class="mode_style_home_selector"><label id="home_location_string_label" style="float:left;">CSS selector :</label>
413	<div class='tooltip'>
414	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
415	<g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
416	</g>
417	</svg>
418	<div>
419	The element to target - e.g.:<br><br>
420	<i>section</i> - to target a <i>section</i>.<br>
421	<i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
422	<i>.my-class</i> - to target a <i>class</i> of "my-class".
423	</div>
424	</div>
425	</div>
426	<div class="placement_style_home_occurrence"><label id="home_occurrence_label" style="float:left;">Occurrence :</label>
427	<div class='tooltip'>
428	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
429	<g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
430	</g>
431	</svg>
432	<div>For a <b>non-unique</b> selector - e.g. <i>section</i> - fill in the <b>occurrence</b> to target.<br><br>
433	E.g. To target the <b>2nd</b> section, fill in <i>2</i>. <br><br>
434	For a <b>unique</b> selector - e.g. <i>#my-id</i> - leave the default value of '1'.</div>
435	</div>
436	</div>
437	</div>
438	<div class="home_placement">
439	<div class="widget_below_home_selector">
440	<input id = "home_location_string" type="text" value="<?php echo !empty($settings->home_location_string) ? strip_tags($settings->home_location_string) : "" ?>" name="home_location_string" placeholder="E.g. p for paragraph" /></td>
441	</div>
442	<div class="placement_below_home_Occurrence">
443	<input type="number" id="home_occurrence" value="<?php echo !empty($settings->home_location_string_occurrence) ? $settings->home_location_string_occurrence : "1" ?>" name="home_location_string_occurrence" placeholder="" style="width:65px;">
444	</div>
445	</div>
446	</div>
447
448	<div id="advanced-settings-main">
449	<a id="show-advanced-settings">Show advanced settings >></a>
450	<div class="change_button">
451	<input class='apply_button' type="submit" value="Apply Changes"/>
452	</div>
453	</div>
454
455	</div>
456
457	<div id="tab2" class="tab-content" style="display: none;">
458	<h2 class="general_h2">General Setting</h2>
459	<div id="web_push" class="settings_block widget_settings_block">
460	<div class="style_box1"><label id="pub_id">Web Push Account ID:</label>
461	<div class="tooltip">
462	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
463	<g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
464	</g>
465	</svg>
466	<div>Your SC web-push numeric account ID, as provided by Taboola.<br>
467	This integration is only for sponsored web-push <br> <br>
468	The header script and service worker will only be injected if the publisher already has the taboola widget running on their site.
469	</div>
470	</div>
471	<div class="switch_style_push">
472	<label class="switch">
473	<input id="web_push_enabled" type="checkbox" <?php echo !empty($settings->web_push_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#web_push', this)" name="web_push_enabled" />
474	<span class="slider round"></span>
475	</label>
476	</div>
477	</div>
478	<div class="web_push_id">
479	<input type="number" id="publisher_id_push" value="<?php echo !empty($settings->publisher_id_push) ? strip_tags($settings->publisher_id_push) : "" ?>" name="publisher_id_push" placeholder="Publisher ID Web Push" />
480	</div>
481	<div class="statement">
482	<label style="color: #000000; padding-">
483	Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
484	</label>
485	</div>
486	</div>
487
488	<div id="advanced-settings-main">
489	<div class="change_button">
490	<input class='apply_button' type="submit" value="Apply Changes"/>
491	</div>
492	</div>
493	</div>
494
495	</form>
496	<div style='clear:both'></div>
497
498	<?php
499	$logPublisher = empty($settings->publisher_id) ? "wordpressplugin" : $settings->publisher_id;
500	$userDetails = wp_get_current_user();
501	$detailsString = $userDetails->first_name." ".$userDetails->last_name;
502	?>
503	<img src="https://logs-01.loggly.com/inputs/d14862f3-64ad-49ca-b28d-1b5d155414ec.gif?source=wp&type=settings&pub=<?=$logPublisher?>&user=<?=urlencode($detailsString)?>&email=<?=urlencode($userDetails->user_email)?>&url=<?=urlencode("//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}")?>"/>
504	</div>
505
506	<script>
507	setEnabledDisabled('#below_article', document.getElementById("first_bc_enabled"));
508	setEnabledDisabled('#mid_article', document.getElementById("mid_enabled"));
509	setEnabledDisabled('#homepage', document.getElementById("home_enabled"));
510	setEnabledDisabled('#web_push', document.getElementById("web_push_enabled"));
511	setEnabledDisabled('#category_widget',document.getElementById('category_enabled'));
512	</script>
513
514	<script>
515	jQuery(document).ready(function($) {
516	let widgetCounter = $('#mid-article-widgets-container .mid-article-widget').length;
517
518	// Function to set the initial correct view for widgets
519	function initializeWidgetView() {
520	$('#mid-article-widgets-container .mid-widget-type-selector').each(function() {
521	var container = $(this).closest('.mid-article-widget');
522	var selectorInputContainer = container.find('.mid-css-selector-container');
523
524	if ($(this).val() === 'Paragraph') {
525	selectorInputContainer.hide();
526	} else {
527	selectorInputContainer.show();
528	}
529	});
530	}
531
532	// Call the function on page load to fix the initial view
533	initializeWidgetView();
534
535	// Add a new mid-article widget section
536	$('#add-mid-widget').on('click', function() {
537	widgetCounter++;
538	var widgetHtml = `
539	<div class="mid-article-widget" style="border: 1px solid #ddd; padding: 10px; margin-top: 10px; border-radius: 5px;">
540	<h4 style="font-size: 14px; font-weight: bold;">Mid-Article Widget #${widgetCounter}</h4>
541	<div style="display: flex; flex-wrap: wrap;">
542	<div style="flex: 1; min-width: 250px; padding-right: 10px;">
543	<label>Mode (Widget ID):</label>
544	<input class="widefat" type="text" name="mid_widget_id[]" placeholder="thumbnails-mid1" />
545	</div>
546	<div style="flex: 1; min-width: 250px;">
547	<label>Placement Name:</label>
548	<input class="widefat" type="text" name="mid_placement[]" placeholder="Mid Article Thumbnails" />
549	</div>
550	</div>
551	<div style="display: flex; flex-wrap: wrap; margin-top: 10px;">
552	<div style="flex: 1; min-width: 200px; padding-right: 10px;">
553	<label>Position below:</label>
554	<select class="widefat mid-widget-type-selector" name="mid_paragraph_ui_mode[]">
555	<option value="Paragraph" selected>Paragraph</option>
556	<option value="Other">Other (Custom)</option>
557	</select>
558	</div>
559	<div style="flex: 1; min-width: 150px; padding-right: 10px; display:none;" class="mid-css-selector-container">
560	<label>CSS selector:</label>
561	<input class="widefat" type="text" name="mid_location_string[]" value="p" />
562	</div>
563	<div style="flex: 1; min-width: 150px;">
564	<label>Paragraph/Element Number:</label>
565	<input class="widefat" type="number" name="mid_location_string_occurrence[]" value="1" min="1" style="width:80px;">
566	</div>
567	</div>
568	<button type="button" class="button remove-mid-widget" style="margin-top: 10px;">Remove Widget</button>
569	</div>`;
570	$('#mid-article-widgets-container').append(widgetHtml);
571	});
572
573	// Remove a mid-article widget section
574	$('#mid-article-widgets-container').on('click', '.remove-mid-widget', function() {
575	$(this).closest('.mid-article-widget').remove();
576	$('#mid-article-widgets-container .mid-article-widget').each(function(index) {
577	$(this).find('h4').text(`Mid-Article Widget #${index + 1}`);
578	});
579	widgetCounter = $('#mid-article-widgets-container .mid-article-widget').length;
580	});
581
582	// Handle the show/hide for the CSS selector field on change
583	$('#mid-article-widgets-container').on('change', '.mid-widget-type-selector', function() {
584	var container = $(this).closest('.mid-article-widget');
585	var selectorInputContainer = container.find('.mid-css-selector-container');
586	var selectorInput = selectorInputContainer.find('input');
587
588	if ($(this).val() === 'Paragraph') {
589	selectorInputContainer.hide();
590	selectorInput.val('p');
591	} else {
592	selectorInputContainer.show();
593	}
594	});
595	});
596	</script>
597
598	<script>
599	setTimeout(function(){jQuery('.label-success').fadeOut()}, 5000);
600	setTimeout(function(){jQuery('.label-error').fadeOut()}, 8000);
601	</script>