PluginProbe
Taboola / 2.2.3
Taboola v2.2.3
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 +182 -197 3.0.0 → 2.2.3 View file →
@@ -1,4 +1,5 @@
1 +<!-- Latest font-awesome include-->
1 2 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
2 3
3 4 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
4 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
@@ -19,9 +20,11 @@
19 20 <a href="#tab1" class="nav-tab" id="tab1-link">Web</a>
20 21 <a href="#tab2" class="nav-tab" id="tab2-link">Web Push</a>
21 22 </h2>
22 23
23 -<?php
24 +<!-- errors/success message -->
25 +
26 + <?php
24 27 if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){
25 28 echo "<div class='label-success'>";
26 29 echo "<h3 style='color:green;'>Changes applied!</h3>";
27 30 echo "<span>Verify the new changes by browsing to your site.</span>";
@@ -44,15 +47,27 @@
44 47 ?>
45 48
46 49 <script>
47 50 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 +
48 56 var applyColor = (chkToggle.checked ? "#000" : "#666");
57 +
58 + // Set all labels in that section ('divID') to the relevant color.
49 59 $(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.
50 63 $(divID).find("input").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
51 64 $(divID).find("select").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
65 +
52 66 }
53 67 </script>
54 68
69 +<!-- tab-switching JQuery -->
55 70 <script>
56 71 jQuery(document).ready(function($) {
57 72 function showTab(tabId) {
58 73 $('.nav-tab').removeClass('nav-tab-active');
@@ -61,8 +76,9 @@
61 76 $('a[href="' + tabId + '"]').addClass('nav-tab-active');
62 77 $(tabId).addClass('active').show();
63 78 }
64 79
80 + // On tab click, update the URL hash and hidden input value
65 81 $('.nav-tab').click(function(e) {
66 82 e.preventDefault();
67 83 var tabId = $(this).attr('href');
68 84 window.location.hash = tabId;
@@ -69,8 +85,9 @@
69 85 $('#active_tab').val(tabId);
70 86 showTab(tabId);
71 87 });
72 88
89 + // On page load, show the tab from the URL hash or default to the first tab
73 90 var hash = window.location.hash;
74 91 if (hash) {
75 92 showTab(hash);
76 93 $('#active_tab').val(hash);
@@ -77,8 +94,9 @@
77 94 } else {
78 95 showTab('#tab1');
79 96 }
80 97
98 + // Set the active tab before form submission
81 99 $('form').submit(function() {
82 100 var activeTab = $('.nav-tab.nav-tab-active').attr('href');
83 101 $('#active_tab').val(activeTab);
84 102 });
@@ -86,8 +104,13 @@
86 104 </script>
87 105
88 106 <script>
89 107 $(document).ready(function(){
108 + // On page load:
109 + if ($('#mid_paragraph_ui_mode').val() == 'Other') {
110 + $("#mid_css_selector_div").show();
111 + }
112 +
90 113 if ($('#home_enabled').prop("checked") === true) {
91 114 $("#homepage").show();
92 115 var ad = $('#show-advanced-settings');
93 116 ad.text("<< Hide advanced settings");
@@ -96,8 +119,9 @@
96 119 </script>
97 120
98 121 <script>
99 122 $(document).ready(function(){
123 + // On clicking 'Advanced settings'
100 124 $("#show-advanced-settings").click(function() {
101 125 $("#homepage").slideToggle("fast");
102 126 var ad = $('#show-advanced-settings');
103 127 ad.text() == "Show advanced settings >>" ? ad.text("<< Hide advanced settings") : ad.text("Show advanced settings >>");
@@ -104,9 +128,41 @@
104 128 });
105 129 });
106 130 </script>
107 131
108 -<div class="publisher_welcome_massage">
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">
109 165 <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2>
110 166 <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 167 <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 168 <div class="list_l1">
@@ -113,16 +169,17 @@
113 169 <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 170 </div>
115 171 </div>
116 172
173 +<!-- Welcome Massage-->
174 +
117 175 <form method="POST">
118 176 <?php
177 + // Generate a nonce and pass it via a hidden field
119 178 $my_nonce = wp_create_nonce( 'my_plugin_update_field_action' );
120 179 ?>
121 180 <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 181
124 -
125 182 <div id="tab1" class="tab-content">
126 183 <h2 class="general_h2">General Settings</h2>
127 184
128 185 <div class="settings_block">
@@ -127,12 +184,15 @@
127 184
128 185 <div class="settings_block">
129 186 <div class="style_box1"><label id="pub_id">Publisher ID :</label>
130 187 <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' ?>'/> -->
131 190 <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 191 <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 192 </g>
134 193 </svg>
194 + <!-- <div id="arrow" ></div> -->
135 195 <div>Your Publisher ID, as provided by Taboola.</div>
136 196 </div>
137 197 </div>
138 198 <div class="pub_id">
@@ -144,9 +204,10 @@
144 204 </label>
145 205 </div>
146 206 </div>
147 207
148 - <h2 class="widget_h2">Taboola Units</h2>
208 + <!-- Below Article Widget -->
209 + <h2 class="widget_h2">Taboola Units</h2>
149 210 <div id="below_article" class="settings_block widget_settings_block">
150 211 <div class="switch_style">
151 212 <label class="switch">
152 213 <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" />
@@ -157,8 +218,9 @@
157 218 <div class="label_below">
158 219 <div class="mode_style">
159 220 <label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label>
160 221 <div class="tooltip">
222 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
161 223 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
162 224 <g fill="none" fill-rule="evenodd">
163 225 <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 226 </g>
@@ -168,8 +230,9 @@
168 230 </div>
169 231 <div class="placement_style">
170 232 <label id="first_bc_placement_label" style="float:left;">Placement Name:</label>
171 233 <div class='tooltip'>
234 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
172 235 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
173 236 <g fill="none" fill-rule="evenodd">
174 237 <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 238 </g>
@@ -188,8 +251,11 @@
188 251 <div class="placement_below">
189 252 <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 253 </div>
191 254 </div>
255 +
256 + <!-- Below Article Widget -->
257 + <!-- Advanced Settings -->
192 258 <br />
193 259 <div class='location_section'>
194 260 <div class='checkbox_read'>
195 261 <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" />
@@ -207,61 +273,103 @@
207 273 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 274 </div>
209 275 </div>
210 276 </div>
277 + <!-- Advanced Settings -->
211 278
279 + <!-- Mid Article Widget -->
280 +
212 281 <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>
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>
220 289
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" />
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>
235 300 </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" />
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>
239 310 </div>
240 311 </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>
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" />
248 315 </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'); ?>" />
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" />
252 318 </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;">
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>
256 338 </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 +
257 347 </div>
258 - <button type="button" class="button remove-mid-widget" style="margin-top: 10px;">Remove Widget</button>
259 - </div>
260 - <?php } ?>
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>
261 367 </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>
368 + <!-- Mid Article Widget -->
369 +
370 + <!-- Right Rail Article Widget -->
371 +
264 372 <div id="right-rail" class="settings_block widget_settings_block">
265 373 <label id="right-rail-label"><b style="font-size:15px;margin-left: 10px;">Right-rail (sidebar)</b> </label>
266 374 <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 375
@@ -275,77 +383,13 @@
275 383 <hr>
276 384 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 385 </div>
278 386 </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 387
301 - </div>
388 +<!-- Right Rail Article Widget -->
302 389
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>
390 +<!-- Homepage mid widget -->
311 391
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>
348 392 <div id="homepage" class="settings_block widget_settings_block">
349 393 <div class="switch_style">
350 394 <label class="switch">
351 395 <input id="home_enabled" type="checkbox" <?php echo !empty($settings->home_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#homepage', this)" name="home_enabled"/>
@@ -353,8 +397,9 @@
353 397 </label>
354 398 <div>
355 399 <b style="font-size:15px;float: left;">Homepage (front page)</b>
356 400 <div class='tooltip'>
401 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
357 402 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
358 403 <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 404 </g>
360 405 </svg>
@@ -365,8 +410,9 @@
365 410
366 411 <div>
367 412 <div class="mode_style_home"><label id="home_widget_id_label" style="float:left;">Mode (Widget ID):</label>
368 413 <div class='tooltip'>
414 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
369 415 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
370 416 <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 417 </g>
372 418 </svg>
@@ -374,8 +420,9 @@
374 420 </div>
375 421 </div>
376 422 <div class="placement_style_home"><label id="home_placement_label" style="float:left;">Placement Name:</label>
377 423 <div class='tooltip'>
424 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
378 425 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
379 426 <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 427 </g>
381 428 </svg>
@@ -393,8 +440,9 @@
393 440 </div>
394 441
395 442 <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
396 443 <div class='tooltip'>
444 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
397 445 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
398 446 <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 447 </g>
400 448 </svg>
@@ -410,8 +458,9 @@
410 458
411 459 <div class="home_occurrence">
412 460 <div class="mode_style_home_selector"><label id="home_location_string_label" style="float:left;">CSS selector :</label>
413 461 <div class='tooltip'>
462 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
414 463 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
415 464 <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 465 </g>
417 466 </svg>
@@ -424,8 +473,9 @@
424 473 </div>
425 474 </div>
426 475 <div class="placement_style_home_occurrence"><label id="home_occurrence_label" style="float:left;">Occurrence :</label>
427 476 <div class='tooltip'>
477 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
428 478 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
429 479 <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 480 </g>
431 481 </svg>
@@ -444,8 +494,10 @@
444 494 </div>
445 495 </div>
446 496 </div>
447 497
498 +<!-- Homepage mid widget -->
499 +
448 500 <div id="advanced-settings-main">
449 501 <a id="show-advanced-settings">Show advanced settings >></a>
450 502 <div class="change_button">
451 503 <input class='apply_button' type="submit" value="Apply Changes"/>
@@ -462,8 +514,9 @@
462 514 <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 515 <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 516 </g>
465 517 </svg>
518 + <!-- <div id="arrow" ></div> -->
466 519 <div>Your SC web-push numeric account ID, as provided by Taboola.<br>
467 520 This integration is only for sponsored web-push <br> <br>
468 521 The header script and service worker will only be injected if the publisher already has the taboola widget running on their site.
469 522 </div>
@@ -500,102 +553,34 @@
500 553 $userDetails = wp_get_current_user();
501 554 $detailsString = $userDetails->first_name." ".$userDetails->last_name;
502 555 ?>
503 556 <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> -->
504 562 </div>
505 563
506 564 <script>
565 +
566 + // Set enabled/disabled appearance upon page load
567 + // (Function is defined earlier on the page.)
507 568 setEnabledDisabled('#below_article', document.getElementById("first_bc_enabled"));
508 569 setEnabledDisabled('#mid_article', document.getElementById("mid_enabled"));
509 570 setEnabledDisabled('#homepage', document.getElementById("home_enabled"));
510 571 setEnabledDisabled('#web_push', document.getElementById("web_push_enabled"));
511 - setEnabledDisabled('#category_widget',document.getElementById('category_enabled'));
572 +
512 573 </script>
513 574
514 575 <script>
515 -jQuery(document).ready(function($) {
516 - let widgetCounter = $('#mid-article-widgets-container .mid-article-widget').length;
517 576
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 - }
577 + // Fadeouts for error/success messages
578 + setTimeout(function(){jQuery('.label-success').fadeOut()}, 5000);
579 + setTimeout(function(){jQuery('.label-error').fadeOut()}, 8000);
531 580
532 - // Call the function on page load to fix the initial view
533 - initializeWidgetView();
581 + // PC
582 + // window.onload = function(){
583 + // document.forms['install_log'].submit()
584 + // }
534 585
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 586 </script>