PluginProbe
Taboola / 3.0.0
Taboola v3.0.0
1.0.4 1.0.5 1.0.6 1.0.8 2.0.1 2.0.2 2.1.0 2.1.1 2.2.2 2.2.3 3.0.0 3.0.1 3.0.2 3.1.0 trunk 1.0 1.0.1 1.0.10 1.0.11 1.0.12 1.0.13 1.0.14 1.0.15 1.0.2 1.0.3
← All changes | settings.php +197 -182 2.2.2 → 3.0.0 View file →
@@ -1,5 +1,4 @@
1 -<!-- Latest font-awesome include-->
2 1 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
3 2
4 3 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
5 4 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
@@ -20,11 +19,9 @@
20 19 <a href="#tab1" class="nav-tab" id="tab1-link">Web</a>
21 20 <a href="#tab2" class="nav-tab" id="tab2-link">Web Push</a>
22 21 </h2>
23 22
24 -<!-- errors/success message -->
25 -
26 - <?php
23 +<?php
27 24 if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){
28 25 echo "<div class='label-success'>";
29 26 echo "<h3 style='color:green;'>Changes applied!</h3>";
30 27 echo "<span>Verify the new changes by browsing to your site.</span>";
@@ -47,27 +44,15 @@
47 44 ?>
48 45
49 46 <script>
50 47 function setEnabledDisabled(divID, chkToggle) {
51 - /*
52 - JS function for form.
53 - Enables/disables fields for the given section ('divID'), depending on whether 'chkToggle' is checked.
54 - */
55 -
56 48 var applyColor = (chkToggle.checked ? "#000" : "#666");
57 -
58 - // Set all labels in that section ('divID') to the relevant color.
59 49 $(divID).find("label").css("color", applyColor);
60 -
61 - // Disable (/enable) all input fields in that section ('divID'), except for 'chkToggle'.
62 - // Once done, apply a gray border color.
63 50 $(divID).find("input").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
64 51 $(divID).find("select").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
65 -
66 52 }
67 53 </script>
68 54
69 -<!-- tab-switching JQuery -->
70 55 <script>
71 56 jQuery(document).ready(function($) {
72 57 function showTab(tabId) {
73 58 $('.nav-tab').removeClass('nav-tab-active');
@@ -76,9 +61,8 @@
76 61 $('a[href="' + tabId + '"]').addClass('nav-tab-active');
77 62 $(tabId).addClass('active').show();
78 63 }
79 64
80 - // On tab click, update the URL hash and hidden input value
81 65 $('.nav-tab').click(function(e) {
82 66 e.preventDefault();
83 67 var tabId = $(this).attr('href');
84 68 window.location.hash = tabId;
@@ -85,9 +69,8 @@
85 69 $('#active_tab').val(tabId);
86 70 showTab(tabId);
87 71 });
88 72
89 - // On page load, show the tab from the URL hash or default to the first tab
90 73 var hash = window.location.hash;
91 74 if (hash) {
92 75 showTab(hash);
93 76 $('#active_tab').val(hash);
@@ -94,9 +77,8 @@
94 77 } else {
95 78 showTab('#tab1');
96 79 }
97 80
98 - // Set the active tab before form submission
99 81 $('form').submit(function() {
100 82 var activeTab = $('.nav-tab.nav-tab-active').attr('href');
101 83 $('#active_tab').val(activeTab);
102 84 });
@@ -104,13 +86,8 @@
104 86 </script>
105 87
106 88 <script>
107 89 $(document).ready(function(){
108 - // On page load:
109 - if ($('#mid_paragraph_ui_mode').val() == 'Other') {
110 - $("#mid_css_selector_div").show();
111 - }
112 -
113 90 if ($('#home_enabled').prop("checked") === true) {
114 91 $("#homepage").show();
115 92 var ad = $('#show-advanced-settings');
116 93 ad.text("<< Hide advanced settings");
@@ -119,9 +96,8 @@
119 96 </script>
120 97
121 98 <script>
122 99 $(document).ready(function(){
123 - // On clicking 'Advanced settings'
124 100 $("#show-advanced-settings").click(function() {
125 101 $("#homepage").slideToggle("fast");
126 102 var ad = $('#show-advanced-settings');
127 103 ad.text() == "Show advanced settings >>" ? ad.text("<< Hide advanced settings") : ad.text("Show advanced settings >>");
@@ -128,41 +104,9 @@
128 104 });
129 105 });
130 106 </script>
131 107
132 -
133 -<script>
134 -$(document).ready(function(){
135 -
136 - // On selecting an item in the dropdown:
137 - $('#mid_paragraph_ui_mode').on('change', function(e){
138 - e.preventDefault();
139 - if ( this.value == 'Other')
140 - {
141 - $("#mid_css_selector_div").show();
142 -
143 - // Highlight relevant fields:
144 - $("#mid_location_string, #mid_occurrence").addClass('highlight');
145 - setTimeout(() => $("#mid_occurrence, #mid_location_string").removeClass('highlight'), 1500);
146 -
147 - }
148 - else
149 - {
150 - $("#mid_location_string").val("p"); // Set it back to the default value of 'p'
151 - $("#mid_css_selector_div").hide();
152 -
153 - // Highlight the 'occurrence' field:
154 - $("#mid_occurrence").addClass('highlight');
155 - setTimeout(() => $("#mid_occurrence").removeClass('highlight'), 1000);
156 - }
157 - });
158 -});
159 -</script>
160 -
161 -
162 -<!-- Welcome Massage -->
163 -
164 - <div class="publisher_welcome_massage">
108 +<div class="publisher_welcome_massage">
165 109 <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2>
166 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>
167 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>
168 112 <div class="list_l1">
@@ -169,17 +113,16 @@
169 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>
170 114 </div>
171 115 </div>
172 116
173 -<!-- Welcome Massage-->
174 -
175 117 <form method="POST">
176 118 <?php
177 - // Generate a nonce and pass it via a hidden field
178 119 $my_nonce = wp_create_nonce( 'my_plugin_update_field_action' );
179 120 ?>
180 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"/>
181 123
124 +
182 125 <div id="tab1" class="tab-content">
183 126 <h2 class="general_h2">General Settings</h2>
184 127
185 128 <div class="settings_block">
@@ -184,15 +127,12 @@
184 127
185 128 <div class="settings_block">
186 129 <div class="style_box1"><label id="pub_id">Publisher ID :</label>
187 130 <div class="tooltip">
188 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
189 - <!-- <img class="helpTooltip__icon___1XWGN" src='<?php echo $this->plugin_url.'img/tooltip_image.svg' ?>'/> -->
190 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">
191 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>
192 133 </g>
193 134 </svg>
194 - <!-- <div id="arrow" ></div> -->
195 135 <div>Your Publisher ID, as provided by Taboola.</div>
196 136 </div>
197 137 </div>
198 138 <div class="pub_id">
@@ -204,10 +144,9 @@
204 144 </label>
205 145 </div>
206 146 </div>
207 147
208 - <!-- Below Article Widget -->
209 - <h2 class="widget_h2">Taboola Units</h2>
148 + <h2 class="widget_h2">Taboola Units</h2>
210 149 <div id="below_article" class="settings_block widget_settings_block">
211 150 <div class="switch_style">
212 151 <label class="switch">
213 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" />
@@ -218,9 +157,8 @@
218 157 <div class="label_below">
219 158 <div class="mode_style">
220 159 <label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label>
221 160 <div class="tooltip">
222 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
223 161 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
224 162 <g fill="none" fill-rule="evenodd">
225 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>
226 164 </g>
@@ -230,9 +168,8 @@
230 168 </div>
231 169 <div class="placement_style">
232 170 <label id="first_bc_placement_label" style="float:left;">Placement Name:</label>
233 171 <div class='tooltip'>
234 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
235 172 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
236 173 <g fill="none" fill-rule="evenodd">
237 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>
238 175 </g>
@@ -251,11 +188,8 @@
251 188 <div class="placement_below">
252 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" />
253 190 </div>
254 191 </div>
255 -
256 - <!-- Below Article Widget -->
257 - <!-- Advanced Settings -->
258 192 <br />
259 193 <div class='location_section'>
260 194 <div class='checkbox_read'>
261 195 <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" />
@@ -273,103 +207,61 @@
273 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>
274 208 </div>
275 209 </div>
276 210 </div>
277 - <!-- Advanced Settings -->
278 211
279 - <!-- Mid Article Widget -->
280 -
281 212 <div id="mid_article" class="settings_block widget_settings_block">
282 - <div class="switch_style">
283 - <label class="switch">
284 - <input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/>
285 - <span class="slider round"></span>
286 - </label>
287 - <b style="font-size:15px;">Mid-article</b>
288 - </div>
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>
289 220
290 - <div>
291 - <div class="mode_style_mid"><label id="mid_widget_id_label" style="float:left;">Mode (Widget ID):</label>
292 - <div class='tooltip'>
293 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
294 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
295 - <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>
296 - </g>
297 - </svg>
298 - <div>Your <i>mid-article</i> Mode (Widget ID), as provided by Taboola.</div>
299 - </div>
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" />
300 235 </div>
301 - <div class="placement_style_mid"><label id="mid_placement_label" style="float:left;">Placement Name:</label>
302 - <div class='tooltip'>
303 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
304 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
305 - <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>
306 - </g>
307 - </svg>
308 - <div>Your <i>mid-article</i> Placement Name, as provided by Taboola.</div>
309 - </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" />
310 239 </div>
311 240 </div>
312 - <div>
313 - <div class="widget_below_mid">
314 - <input id="mid_widget_id" type="text" value="<?php echo !empty($settings->mid_widget_id) ? strip_tags($settings->mid_widget_id) : "" ?>" name="mid_widget_id" placeholder="Widget ID" />
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>
315 248 </div>
316 - <div class="placement_below_mid">
317 - <input id = "mid_placement" type="text" value="<?php echo !empty($settings->mid_placement) ? strip_tags($settings->mid_placement) : "" ?>" name="mid_placement" placeholder="Placement Name" />
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'); ?>" />
318 252 </div>
319 - </div>
320 -
321 - <div id="mid_occurrence_div">
322 - <div class="mode_style_mid_selector"><label id="mid_location_string_label" style="float:left;">Position the widget below:</label>
323 - <div class='tooltip'>
324 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
325 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
326 - <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>
327 - </g>
328 - </svg>
329 - <div>
330 - Enter the paragraph number to target. <br>
331 - E.g. To target the <b>5th</b> paragraph, fill in <i>5</i>.<br><br>
332 - ----<br>
333 - <i>Advanced</i> - to use a <b>custom</b> selector:<br><br>
334 - 1) Choose 'Other'. <br>
335 - 2) Fill in a selector (<i>right</i>), and an occurrence (<i>left</i>).
336 - </div>
337 - </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;">
338 256 </div>
339 - <div class="placement_below_mid_occurrence">
340 - <select name="mid_paragraph_ui_mode" id="mid_paragraph_ui_mode">
341 - <option value="Paragraph" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Paragraph") ? "selected" : ""?> >Paragraph</option>
342 - <option value="Other" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Other") ? "selected" : ""?>>Other</option>
343 - </select>&nbsp;
344 - <input type="number" id="mid_occurrence" value="<?php echo !empty($settings->mid_location_string_occurrence) ? $settings->mid_location_string_occurrence : "1" ?>" name="mid_location_string_occurrence" placeholder="" style="width:65px;">
345 - </div>
346 -
347 257 </div>
348 - <div id="mid_css_selector_div">
349 -
350 - <div class="placement_style_mid_occurrence"><label id="mid_occurrence_label" style="float:left;">CSS selector :</label>
351 - <div class='tooltip'>
352 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
353 - <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>
354 - </g>
355 - </svg>
356 - <div>
357 - <i>Advanced</i> - fill in a selector to target - e.g.:<br><br>
358 - <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
359 - <i>.my-class</i> - to target a <i>class</i> of "my-class".
360 - </div>
361 - </div>
362 - </div>
363 - <div class="widget_below_mid_selector">
364 - <input id = "mid_location_string" type="text" value="<?php echo !empty($settings->mid_location_string) ? strip_tags($settings->mid_location_string) : "p" ?>" name="mid_location_string" placeholder="E.g. p for paragraph" />
365 - </div>
366 - </div>
258 + <button type="button" class="button remove-mid-widget" style="margin-top: 10px;">Remove Widget</button>
259 + </div>
260 + <?php } ?>
367 261 </div>
368 - <!-- Mid Article Widget -->
369 -
370 - <!-- Right Rail Article Widget -->
371 -
262 + <button type="button" id="add-mid-widget" class="button button-primary" style="margin-top: 15px;">+ Add Another Mid-Article Widget</button>
263 + </div>
372 264 <div id="right-rail" class="settings_block widget_settings_block">
373 265 <label id="right-rail-label"><b style="font-size:15px;margin-left: 10px;">Right-rail (sidebar)</b> </label>
374 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>
375 267
@@ -383,13 +275,77 @@
383 275 <hr>
384 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>.
385 277 </div>
386 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>
387 300
388 -<!-- Right Rail Article Widget -->
301 + </div>
389 302
390 -<!-- Homepage mid widget -->
303 + <div class="label_below">
304 + <div class="mode_style">
305 + <label id="category_widget_id_label" style="float:left;">Mode&nbsp;(Widget&nbsp;ID):</label>
306 + </div>
307 + <div class="placement_style">
308 + <label id="category_placement_label" style="float:left;">Placement&nbsp;Name:</label>
309 + </div>
310 + </div>
391 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&nbsp;:</label>
328 + </div>
329 + <div class="placement_style_home_occurrence">
330 + <label id="category_occurrence_label" style="float:left;">Occurrence&nbsp;:</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>
392 348 <div id="homepage" class="settings_block widget_settings_block">
393 349 <div class="switch_style">
394 350 <label class="switch">
395 351 <input id="home_enabled" type="checkbox" <?php echo !empty($settings->home_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#homepage', this)" name="home_enabled"/>
@@ -397,9 +353,8 @@
397 353 </label>
398 354 <div>
399 355 <b style="font-size:15px;float: left;">Homepage (front page)</b>
400 356 <div class='tooltip'>
401 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
402 357 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
403 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>
404 359 </g>
405 360 </svg>
@@ -410,9 +365,8 @@
410 365
411 366 <div>
412 367 <div class="mode_style_home"><label id="home_widget_id_label" style="float:left;">Mode (Widget ID):</label>
413 368 <div class='tooltip'>
414 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
415 369 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
416 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>
417 371 </g>
418 372 </svg>
@@ -420,9 +374,8 @@
420 374 </div>
421 375 </div>
422 376 <div class="placement_style_home"><label id="home_placement_label" style="float:left;">Placement Name:</label>
423 377 <div class='tooltip'>
424 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
425 378 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
426 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>
427 380 </g>
428 381 </svg>
@@ -440,9 +393,8 @@
440 393 </div>
441 394
442 395 <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
443 396 <div class='tooltip'>
444 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
445 397 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
446 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>
447 399 </g>
448 400 </svg>
@@ -458,9 +410,8 @@
458 410
459 411 <div class="home_occurrence">
460 412 <div class="mode_style_home_selector"><label id="home_location_string_label" style="float:left;">CSS selector :</label>
461 413 <div class='tooltip'>
462 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
463 414 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
464 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>
465 416 </g>
466 417 </svg>
@@ -473,9 +424,8 @@
473 424 </div>
474 425 </div>
475 426 <div class="placement_style_home_occurrence"><label id="home_occurrence_label" style="float:left;">Occurrence :</label>
476 427 <div class='tooltip'>
477 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
478 428 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
479 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>
480 430 </g>
481 431 </svg>
@@ -494,10 +444,8 @@
494 444 </div>
495 445 </div>
496 446 </div>
497 447
498 -<!-- Homepage mid widget -->
499 -
500 448 <div id="advanced-settings-main">
501 449 <a id="show-advanced-settings">Show advanced settings >></a>
502 450 <div class="change_button">
503 451 <input class='apply_button' type="submit" value="Apply Changes"/>
@@ -514,9 +462,8 @@
514 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">
515 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>
516 464 </g>
517 465 </svg>
518 - <!-- <div id="arrow" ></div> -->
519 466 <div>Your SC web-push numeric account ID, as provided by Taboola.<br>
520 467 This integration is only for sponsored web-push <br> <br>
521 468 The header script and service worker will only be injected if the publisher already has the taboola widget running on their site.
522 469 </div>
@@ -553,34 +500,102 @@
553 500 $userDetails = wp_get_current_user();
554 501 $detailsString = $userDetails->first_name." ".$userDetails->last_name;
555 502 ?>
556 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']}")?>"/>
557 - <!-- <form name="install_log" style="display:none;" method="post" action="http://logs-01.loggly.com/inputs/d14862f3-64ad-49ca-b28d-1b5d155414ec/tag/http/">
558 - <input name="tim" type="hidden" value="<?=date("H:i:s.000")?>">
559 - <input name="pub" type="hidden" value="<?=$logPublisher?>">
560 - <input name="data" type="hideen" value="WORDPRESS_PLUGIN_INSTALL|<?="//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}|{$detailsString}"?>">
561 - </form> -->
562 504 </div>
563 505
564 506 <script>
565 -
566 - // Set enabled/disabled appearance upon page load
567 - // (Function is defined earlier on the page.)
568 507 setEnabledDisabled('#below_article', document.getElementById("first_bc_enabled"));
569 508 setEnabledDisabled('#mid_article', document.getElementById("mid_enabled"));
570 509 setEnabledDisabled('#homepage', document.getElementById("home_enabled"));
571 510 setEnabledDisabled('#web_push', document.getElementById("web_push_enabled"));
511 + setEnabledDisabled('#category_widget',document.getElementById('category_enabled'));
512 +</script>
572 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 +});
573 596 </script>
574 597
575 598 <script>
576 -
577 - // Fadeouts for error/success messages
578 599 setTimeout(function(){jQuery('.label-success').fadeOut()}, 5000);
579 600 setTimeout(function(){jQuery('.label-error').fadeOut()}, 8000);
580 -
581 - // PC
582 - // window.onload = function(){
583 - // document.forms['install_log'].submit()
584 - // }
585 -
586 601 </script>