PluginProbe
Taboola / 2.0.1
Taboola v2.0.1
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 +639 -372 3.0.0 → 2.0.1 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>
@@ -4,24 +5,411 @@
4 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
5 6 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
6 7
7 8 <style>
8 - <?php include 'css/main.css'; ?>
9 +
10 + .taboola-container {
11 + padding: 20px;
12 + padding-left: 0;
13 + font-size: 14px;
14 + background-color: #FAF9F6;
15 + font-family: Roboto,Lato,Hind -apple-system,Helvetica Neue,sans-serif;
16 + }
17 +
18 + .settings_block {
19 + background-color: #fff;
20 + border: 1px solid #d4d9df;
21 + border-radius: 8px;
22 + margin-top: 10px;
23 + width: 50%;
24 + }
25 +
26 + .settings_block.widget_settings_block { /* Give the widget settings block some extra space at the end */
27 + padding-bottom: 15px;
28 + }
29 +
30 + .settings_block input {
31 + border-color: #ccc; /* Most of the inputs are styled via jQuery. This is for any others - e.g. #publisher-id */
32 + }
33 +
34 + .publisher_welcome_massage{
35 + float: right;
36 + width: 36%;
37 + padding: 20px 10px 10px 0px;
38 + margin: 40px 6% 0 0;
39 + background: #FFFACD;
40 + border: 1px solid #d4d9df;
41 + border-radius: 20px;
42 + }
43 +
44 + .switch_style{
45 + margin : 10px 10px 20px 10px;
46 + }
47 +
48 + .style_box1, .pub_id{
49 + padding: 10px 10px 0px 20px;
50 + }
51 +
52 + .statement{
53 + padding: 10px 10px 10px 20px;
54 + }
55 +
56 + .widget_below, .widget_below_mid, .widget_below_mid_selector, .widget_below_home, .widget_below_home_selector{
57 + width: 50%;
58 + float: left;
59 + padding: 5px 0px 0px 20px;
60 + }
61 +
62 + .mode_style, .mode_style_mid, .mode_style_home, .mode_style_home_selector{
63 + width: 50%;
64 + padding: 0px 0px 3px 20px;
65 + float:left;
66 + }
67 +
68 + .placement_style, .placement_style_mid, .placement_style_home_occurrence,.placement_style_home {
69 + padding: 0px 0px 8px 0px;
70 + width: 50%;
71 + float: right;
72 + }
73 +
74 + .widget_below_mid_selector{
75 + padding: 8px 0px 0px 0px;
76 + }
77 +
78 + .placement_below_mid_occurrence,.mode_style_mid_selector {
79 + padding: 0px 0px 8px 20px;
80 + }
81 +
82 + .heading_mid_home{
83 + padding: 20px 0px 8px 20px;
84 + }
85 +
86 + #mid_occurrence_div, #mid_css_selector_div {
87 + width: 50%;
88 + float: left;
89 + margin: 19px 0px 0px 0px;
90 + }
91 +
92 + /* slider button CSS */
93 +
94 + .switch {
95 + position: relative;
96 + display: inline-block;
97 + width: 45px;
98 + height: 20px;
99 + float: right;
100 + }
101 +
102 + .switch input {
103 + opacity: 0;
104 + width: 0;
105 + height: 0;
106 + }
107 +
108 + .slider {
109 + position: absolute;
110 + cursor: pointer;
111 + top: 0;
112 + left: 0;
113 + right: -1px;
114 + bottom: 0;
115 + background-color: #ccc;
116 + -webkit-transition: .4s;
117 + transition: .4s;
118 + }
119 +
120 + .slider:before {
121 + position: absolute;
122 + content: "";
123 + height: 18px;
124 + width: 18px;
125 + left: 1px;
126 + bottom: 1px;
127 + background-color: white;
128 + -webkit-transition: .4s;
129 + transition: .4s;
130 + }
131 +
132 + input:checked + .slider {
133 + background-color: #0f4c81;
134 + }
135 +
136 + input:focus + .slider {
137 + box-shadow: 0 0 1px #0f4c81;
138 + }
139 +
140 + input:checked + .slider:before {
141 + -webkit-transform: translateX(26px);
142 + -ms-transform: translateX(26px);
143 + transform: translateX(26px);
144 + }
145 +
146 + /* Rounded sliders */
147 +
148 + .slider.round {
149 + border-radius: 34px;
150 + }
151 +
152 + .slider.round:before {
153 + border-radius: 50%;
154 + }
155 +
156 + /* slider button CSS */
157 +
158 + .request_link {
159 + float: right;
160 + margin-right: 10px;
161 + line-height: 26px;
162 + }
163 +
164 +/* hide and position tooltip */
165 +
166 + .tooltip div{
167 + visibility: hidden;
168 + width: auto;
169 + display: inline-block;
170 + background: #0f4c81;
171 + color: #ffffff;
172 + font-weight: normal;
173 + font-size: 12px;
174 + border-radius: 6px;
175 + padding: 5px;
176 + margin-left: 5px;
177 + max-width: 350px;
178 + position: absolute;
179 + z-index: 999;
180 + transition-delay: 0.25s;
181 + }
182 +
183 + .tooltip div a:hover{
184 + text-decoration: underline;
185 + }
186 +
187 + .tooltip{
188 + opacity: 1 !important;
189 + font-size: 13px !important;
190 + display: contents !important;
191 + }
192 +
193 + .tooltip:hover div{
194 + visibility: visible;
195 + transition-delay: 0.5s;
196 + }
197 +
198 + .tooltip div a{
199 + text-decoration: none;
200 + font-weight: bold;
201 + color: #fff;
202 + }
203 +
204 + .label-success {
205 + background: #a4fba6 !important;
206 + border: 1px solid #d2f2d4;
207 + border-radius: 10px;
208 + padding: 10px 30px 20px 10px;
209 + font-size: 14px;
210 + display: block;
211 + margin-top: 10px;
212 + color: green;
213 + width: 50%;
214 + }
215 + .label-error {
216 + background: #ffbaba;
217 + border: 1px solid #ffbaba;
218 + border-radius: 10px;
219 + padding: 10px 30px 20px 10px;
220 + font-size: 14px;
221 + display: block;
222 + margin-top: 10px;
223 + color: red;
224 + width: 50%;
225 + }
226 +
227 + .label-error ul {
228 + list-style-position: inside;
229 + list-style-type: disc;
230 + text-indent: 2em;
231 + }
232 +
233 + .label-error p {
234 + font-size: 14px;
235 + }
236 +
237 + .change_button{
238 + float: right;
239 + }
240 +
241 + .apply_button{
242 + /* margin-top: 20px; */
243 + background-color: #0f4c81;
244 + color: #fff;
245 + padding: 0.8rem 1rem;
246 + border-radius: 7px;
247 + border: transparent;
248 + float: right;
249 + }
250 +
251 + .apply_button:hover {
252 + background-color: #1261A0;
253 + cursor: pointer;
254 + }
255 +
256 + .helpTooltip__icon___1XWGN,
257 + .helpTooltip__icon___1XWGN_read{
258 + color: #b8c1ca;
259 + width: 1em;
260 + height: 1em;
261 + margin: 4px;
262 + }
263 +
264 + .helpTooltip__icon___1XWGN_read{
265 + margin-top: 4px;
266 + }
267 +
268 + .helpTooltip__icon___1XWGN_first{
269 + color: #b8c1ca;
270 + width: 1em;
271 + height: 1em;
272 + }
273 +
274 + .checkbox_read{
275 + padding: 0px 0px 5px 20px;
276 + float: left;
277 + }
278 +
279 + label:hover{
280 + cursor: default;
281 + }
282 +
283 + ::placeholder{
284 + color: #DEDEDE;
285 + }
286 +
287 + .widget_h2,.general_h2{
288 + font-size: 18px;
289 + font-weight: 500;
290 + }
291 +
292 + .list_l1{
293 + border-top: 1px solid #DEDEDE;
294 + margin: 30px 20px 0px 0px;
295 + margin-left: 14%;
296 + }
297 +
298 + .theme_image{
299 + width: 50%;
300 + }
301 +
302 + .welcome_heading{
303 + margin-left: 8%;
304 + font-size: 1.5em;
305 + }
306 +
307 + .first_p,
308 + .second_p{
309 + margin-left: 14%;
310 + font-size: 14px;
311 + }
312 +
313 + .list_l1 p{
314 + font-size: 13px;
315 + }
316 +
317 + input#publisher-id,
318 + input#first_bc_placement,
319 + input#mid_placement,
320 + input#home_placement{
321 + width: 36%;
322 + }
323 +
324 + input#first_bc_widget_id,
325 + input#mid_widget_id,
326 + input#mid_location_string,
327 + input#home_widget_id,
328 + input#home_location_string{
329 + width: 77%;
330 + }
331 +
332 + label{
333 + font-weight: normal !important;
334 + }
335 +
336 + label#pub_id{
337 + color: #000000;
338 + }
339 +
340 + input#out_of_content_enabled {
341 + height: 16px;
342 + width: 16px;
343 + }
344 +
345 + input[type=checkbox]:checked::before {
346 + width: 1.8rem !important;
347 + }
348 +
349 + input[type=checkbox]:focus {
350 + outline: none !important;
351 + outline-offset: 0px !important;
352 + }
353 +
354 + input[type=checkbox]{
355 + margin: -5px 0 0;
356 + }
357 +
358 + #homepage{
359 + display: none;
360 + }
361 +
362 + #show-advanced-settings{
363 + text-decoration: none;
364 + color: #666666;
365 + margin-top: 5px;
366 + cursor: pointer;
367 + float: left;
368 + width: 50%;
369 + font-family: Roboto, Lato, "Hind -apple-system", "Helvetica Neue", sans-serif;
370 + font-style: italic;
371 + }
372 +
373 + #advanced-settings-main{
374 + margin: 10px 0px 0px 10px;
375 + width: 49%;
376 + }
377 +
378 + div#mid_article {
379 + padding-bottom: 100px;
380 + }
381 +
382 + #mid_css_selector_div{
383 + display: none;
384 + }
385 +
386 + input.highlight {
387 + border: 1px solid orange !important;
388 + }
389 +
9 390 </style>
10 391
392 +<?php
393 +
394 +// $short_version =strlen(TABOOLA_PLUGIN_VERSION) == 5 ? substr(TABOOLA_PLUGIN_VERSION,0,3) : ""; // E.g. '2.1.0' => '2.1' (else '')
395 +
396 +?>
397 +
398 + <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
399 + <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> -->
400 +
401 +
11 402 <div class="taboola-container">
12 403 <div class="theme_image">
13 404 <img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:150px;'/>
14 405 </div>
15 406
16 - <h2 style="font-size:1.7em;">Taboola WordPress Plugin</h2>
407 + <h2 style="font-size:1.7em;">Taboola WordPress Plugin 2</h2>
17 408
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>
409 +<!-- errors/success message -->
22 410
23 -<?php
411 + <?php
24 412 if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){
25 413 echo "<div class='label-success'>";
26 414 echo "<h3 style='color:green;'>Changes applied!</h3>";
27 415 echo "<span>Verify the new changes by browsing to your site.</span>";
@@ -44,50 +432,33 @@
44 432 ?>
45 433
46 434 <script>
47 435 function setEnabledDisabled(divID, chkToggle) {
436 + /*
437 + JS function for form.
438 + Enables/disables fields for the given section ('divID'), depending on whether 'chkToggle' is checked.
439 + */
440 +
48 441 var applyColor = (chkToggle.checked ? "#000" : "#666");
442 +
443 + // Set all labels in that section ('divID') to the relevant color.
49 444 $(divID).find("label").css("color", applyColor);
445 +
446 + // Disable (/enable) all input fields in that section ('divID'), except for 'chkToggle'.
447 + // Once done, apply a gray border color.
50 448 $(divID).find("input").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
51 449 $(divID).find("select").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
52 - }
53 -</script>
54 450
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 451 }
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 452 </script>
87 453
88 454 <script>
89 455 $(document).ready(function(){
456 + // On page load:
457 + if ($('#mid_paragraph_ui_mode').val() == 'Other') {
458 + $("#mid_css_selector_div").show();
459 + }
460 +
90 461 if ($('#home_enabled').prop("checked") === true) {
91 462 $("#homepage").show();
92 463 var ad = $('#show-advanced-settings');
93 464 ad.text("<< Hide advanced settings");
@@ -96,8 +467,9 @@
96 467 </script>
97 468
98 469 <script>
99 470 $(document).ready(function(){
471 + // On clicking 'Advanced settings'
100 472 $("#show-advanced-settings").click(function() {
101 473 $("#homepage").slideToggle("fast");
102 474 var ad = $('#show-advanced-settings');
103 475 ad.text() == "Show advanced settings >>" ? ad.text("<< Hide advanced settings") : ad.text("Show advanced settings >>");
@@ -104,10 +476,44 @@
104 476 });
105 477 });
106 478 </script>
107 479
108 -<div class="publisher_welcome_massage">
109 - <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2>
480 +
481 +<script>
482 +$(document).ready(function(){
483 +
484 + // On selecting an item in the dropdown:
485 + $('#mid_paragraph_ui_mode').on('change', function(e){
486 + e.preventDefault();
487 + if ( this.value == 'Other')
488 + {
489 + $("#mid_css_selector_div").show();
490 +
491 + // Highlight relevant fields:
492 + $("#mid_location_string, #mid_occurrence").addClass('highlight');
493 + setTimeout(() => $("#mid_occurrence, #mid_location_string").removeClass('highlight'), 1500);
494 +
495 + }
496 + else
497 + {
498 + $("#mid_location_string").val("p"); // Set it back to the default value of 'p'
499 + $("#mid_css_selector_div").hide();
500 +
501 + // Highlight the 'occurrence' field:
502 + $("#mid_occurrence").addClass('highlight');
503 + setTimeout(() => $("#mid_occurrence").removeClass('highlight'), 1000);
504 + }
505 + });
506 +
507 +});
508 +</script>
509 +
510 +
511 +
512 +<!-- Welcome Massage -->
513 +
514 + <div class="publisher_welcome_massage">
515 + <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin 2!</h2>
110 516 <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 517 <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 518 <div class="list_l1">
113 519 <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>
@@ -113,239 +519,202 @@
113 519 <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 520 </div>
115 521 </div>
116 522
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"/>
523 +<!-- Welcome Massage-->
123 524
525 + <form method="POST">
526 + <h2 class="general_h2">General Settings</h2>
527 +
528 + <div class="settings_block">
529 + <div class="style_box1"><label id="pub_id">Publisher ID :</label>
530 + <div class="tooltip">
531 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
532 + <!-- <img class="helpTooltip__icon___1XWGN" src='<?php echo $this->plugin_url.'img/tooltip_image.svg' ?>'/> -->
533 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
534 + <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>
535 + </g>
536 + </svg>
537 + <!-- <div id="arrow" ></div> -->
538 + <div>Your Publisher ID, as provided by Taboola.</div>
539 + </div>
540 + </div>
541 + <div class="pub_id">
542 + <input id="publisher-id" type="text" name="publisher_id" placeholder="publisher" value="<?php echo !empty($settings->publisher_id) ? htmlspecialchars($settings->publisher_id) : '' ?>"/>
543 + </div>
544 + <div class="statement">
545 + <label style="color: #000000;">Don't have an account with taboola?</label>
546 + <a style='float: inherit;' class='request_link' href='http://taboola.com/contact' target='_blank'>Contact us</a>
547 + <label style="margin-left: -9px; color: #000000;">to get started.</label>
548 + </div>
549 + </div>
124 550
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>
551 +
552 +<!-- Below Article Widget -->
553 + <h2 class="widget_h2">Taboola Units</h2>
554 + <div id="below_article" class="settings_block widget_settings_block">
555 + <div class="switch_style">
556 + <label class="switch">
557 + <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" />
558 + <span class="slider round"></span>
559 + </label>
560 + <b style="font-size:15px;">Below-article</b>
561 + </div>
562 + <div class="label_below">
563 + <div class="mode_style">
564 + <label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label>
565 + <div class="tooltip">
566 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
567 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
568 + <g fill="none" fill-rule="evenodd">
569 + <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>
570 + </g>
571 + </svg>
572 + <div>Your <i>below-article</i> Mode (Widget ID), as provided by Taboola. </div>
573 + </div>
574 + </div>
575 + <div class="placement_style">
576 + <label id="first_bc_placement_label" style="float:left;">Placement Name:</label>
577 + <div class='tooltip'>
578 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
579 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
580 + <g fill="none" fill-rule="evenodd">
581 + <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>
582 + </g>
583 + </svg>
584 + <div>Your <i>below-article</i> Placement Name, as provided by Taboola. <br>
585 + <br> When upgrading from v1, fill in 'below-article'. <br>
586 + <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.
137 587 </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>
588 + </div>
146 589 </div>
590 + </div>
591 + <div class="input_below">
592 + <div class="widget_below">
593 + <input id="first_bc_widget_id" type="text" value="<?php echo !empty($settings->first_bc_widget_id) ? htmlspecialchars($settings->first_bc_widget_id) : "" ?>" name="first_bc_widget_id" placeholder="Widget ID" />
594 + </div>
595 + <div class="placement_below">
596 + <input type="text" id="first_bc_placement" value="<?php echo !empty($settings->first_bc_placement) ? htmlspecialchars($settings->first_bc_placement) : "" ?>" name="first_bc_placement" placeholder="Placement Name" />
597 + </div>
598 + </div>
147 599
148 - <h2 class="widget_h2">Taboola Units</h2>
149 - <div id="below_article" class="settings_block widget_settings_block">
600 + <!-- Below Article Widget -->
601 + <!-- Advanced Settings -->
602 + <br />
603 + <div class='location_section'>
604 + <div class='checkbox_read'>
605 + <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" />
606 + <label id="out_of_content_enabled_label">Place the feed/widget just after the article container (required for <b>Read More</b>)</label>
607 + </div>
608 + <div class='tooltip'>
609 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_read">
610 + <g fill="none" fill-rule="evenodd">
611 + <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>
612 + </g>
613 + </svg>
614 + <div>
615 + Required in order for Taboola to activate <i>Read More</i>.<br><br>
616 + Read More buttons can boost audience engagement significantly, especially on mobile devices.<br><br>
617 + 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>
618 + </div>
619 + </div>
620 + </div>
621 +<!-- Advanced Settings -->
622 +
623 +<!-- Mid Article Widget -->
624 +
625 +<div id="mid_article" class="settings_block widget_settings_block">
150 626 <div class="switch_style">
151 627 <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>
628 + <input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/>
629 + <span class="slider round"></span>
154 630 </label>
155 - <b style="font-size:15px;">Below-article</b>
631 + <b style="font-size:15px;">Mid-article</b>
156 632 </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>
633 +
634 + <div>
635 + <div class="mode_style_mid"><label id="mid_widget_id_label" style="float:left;">Mode (Widget ID):</label>
636 + <div class='tooltip'>
637 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
638 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
639 + <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>
640 + </g>
641 + </svg>
642 + <div>Your <i>mid-article</i> Mode (Widget ID), as provided by Taboola.</div>
643 + </div>
167 644 </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.
645 + <div class="placement_style_mid"><label id="mid_placement_label" style="float:left;">Placement Name:</label>
646 + <div class='tooltip'>
647 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
648 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
649 + <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>
650 + </g>
651 + </svg>
652 + <div>Your <i>mid-article</i> Placement Name, as provided by Taboola.</div>
180 653 </div>
181 654 </div>
182 - </div>
183 655 </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" />
656 + <div>
657 + <div class="widget_below_mid">
658 + <input id="mid_widget_id" type="text" value="<?php echo !empty($settings->mid_widget_id) ? htmlspecialchars($settings->mid_widget_id) : "" ?>" name="mid_widget_id" placeholder="Widget ID" />
187 659 </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" />
660 + <div class="placement_below_mid">
661 + <input id = "mid_placement" type="text" value="<?php echo !empty($settings->mid_placement) ? htmlspecialchars($settings->mid_placement) : "" ?>" name="mid_placement" placeholder="Placement Name" />
190 662 </div>
191 663 </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>
664 +
665 + <div id="mid_occurrence_div">
666 + <div class="mode_style_mid_selector"><label id="mid_location_string_label" style="float:left;">Position the widget below:</label>
667 + <div class='tooltip'>
668 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
669 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
670 + <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>
671 + </g>
672 + </svg>
673 + <div>
674 + Enter the paragraph number to target. <br>
675 + E.g. To target the <b>5th</b> paragraph, fill in <i>5</i>.<br><br>
676 + ----<br>
677 + <i>Advanced</i> - to use a <b>custom</b> selector:<br><br>
678 + 1) Choose 'Other'. <br>
679 + 2) Fill in a selector (<i>right</i>), and an occurrence (<i>left</i>).
680 + </div>
681 + </div>
197 682 </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>
683 + <div class="placement_below_mid_occurrence">
684 + <select name="mid_paragraph_ui_mode" id="mid_paragraph_ui_mode">
685 + <option value="Paragraph" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Paragraph") ? "selected" : ""?> >Paragraph</option>
686 + <option value="Other" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Other") ? "selected" : ""?>>Other</option>
687 + </select>&nbsp;
688 + <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;">
208 689 </div>
690 +
209 691 </div>
210 - </div>
692 + <div id="mid_css_selector_div">
211 693
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" />
694 + <div class="placement_style_mid_occurrence"><label id="mid_occurrence_label" style="float:left;">CSS selector :</label>
695 + <div class='tooltip'>
696 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
697 + <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>
698 + </g>
699 + </svg>
700 + <div>
701 + <i>Advanced</i> - fill in a selector to target - e.g.:<br><br>
702 + <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
703 + <i>.my-class</i> - to target a <i>class</i> of "my-class".
704 + </div>
235 705 </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 706 </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>
707 + <div class="widget_below_mid_selector">
708 + <input id = "mid_location_string" type="text" value="<?php echo !empty($settings->mid_location_string) ? htmlspecialchars($settings->mid_location_string) : "p" ?>" name="mid_location_string" placeholder="E.g. p for paragraph" />
257 709 </div>
258 - <button type="button" class="button remove-mid-widget" style="margin-top: 10px;">Remove Widget</button>
259 710 </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 711 </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>
712 +<!-- Mid Article Widget -->
267 713
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>
714 +<!-- Homepage mid widget -->
300 715
301 - </div>
302 716
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>
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>
348 717 <div id="homepage" class="settings_block widget_settings_block">
349 718 <div class="switch_style">
350 719 <label class="switch">
351 720 <input id="home_enabled" type="checkbox" <?php echo !empty($settings->home_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#homepage', this)" name="home_enabled"/>
@@ -353,8 +722,9 @@
353 722 </label>
354 723 <div>
355 724 <b style="font-size:15px;float: left;">Homepage (front page)</b>
356 725 <div class='tooltip'>
726 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
357 727 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
358 728 <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 729 </g>
360 730 </svg>
@@ -365,8 +735,9 @@
365 735
366 736 <div>
367 737 <div class="mode_style_home"><label id="home_widget_id_label" style="float:left;">Mode (Widget ID):</label>
368 738 <div class='tooltip'>
739 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
369 740 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
370 741 <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 742 </g>
372 743 </svg>
@@ -374,8 +745,9 @@
374 745 </div>
375 746 </div>
376 747 <div class="placement_style_home"><label id="home_placement_label" style="float:left;">Placement Name:</label>
377 748 <div class='tooltip'>
749 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
378 750 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
379 751 <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 752 </g>
381 753 </svg>
@@ -384,17 +756,18 @@
384 756 </div>
385 757 </div>
386 758 <div>
387 759 <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" />
760 + <input id="home_widget_id" type="text" value="<?php echo !empty($settings->home_widget_id) ? htmlspecialchars($settings->home_widget_id) : "" ?>" name="home_widget_id" placeholder="Widget ID" />
389 761 </div>
390 762 <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" />
763 + <input id = "home_placement" type="text" value="<?php echo !empty($settings->home_placement) ? htmlspecialchars($settings->home_placement) : "" ?>" name="home_placement" placeholder="Placement Name" />
392 764 </div>
393 765 </div>
394 766
395 767 <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
396 768 <div class='tooltip'>
769 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
397 770 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
398 771 <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 772 </g>
400 773 </svg>
@@ -410,8 +783,9 @@
410 783
411 784 <div class="home_occurrence">
412 785 <div class="mode_style_home_selector"><label id="home_location_string_label" style="float:left;">CSS selector :</label>
413 786 <div class='tooltip'>
787 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
414 788 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
415 789 <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 790 </g>
417 791 </svg>
@@ -424,8 +798,9 @@
424 798 </div>
425 799 </div>
426 800 <div class="placement_style_home_occurrence"><label id="home_occurrence_label" style="float:left;">Occurrence :</label>
427 801 <div class='tooltip'>
802 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
428 803 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
429 804 <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 805 </g>
431 806 </svg>
@@ -436,9 +811,9 @@
436 811 </div>
437 812 </div>
438 813 <div class="home_placement">
439 814 <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>
815 + <input id = "home_location_string" type="text" value="<?php echo !empty($settings->home_location_string) ? htmlspecialchars($settings->home_location_string) : "" ?>" name="home_location_string" placeholder="E.g. p for paragraph" /></td>
441 816 </div>
442 817 <div class="placement_below_home_Occurrence">
443 818 <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 819 </div>
@@ -443,9 +818,8 @@
443 818 <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 819 </div>
445 820 </div>
446 821 </div>
447 -
448 822 <div id="advanced-settings-main">
449 823 <a id="show-advanced-settings">Show advanced settings >></a>
450 824 <div class="change_button">
451 825 <input class='apply_button' type="submit" value="Apply Changes"/>
@@ -451,48 +825,10 @@
451 825 <input class='apply_button' type="submit" value="Apply Changes"/>
452 826 </div>
453 827 </div>
454 828
455 -</div>
829 +<!-- Homepage mid widget -->
456 830
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 831 </form>
496 832 <div style='clear:both'></div>
497 833
498 834 <?php
@@ -500,102 +836,33 @@
500 836 $userDetails = wp_get_current_user();
501 837 $detailsString = $userDetails->first_name." ".$userDetails->last_name;
502 838 ?>
503 839 <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']}")?>"/>
840 + <!-- <form name="install_log" style="display:none;" method="post" action="http://logs-01.loggly.com/inputs/d14862f3-64ad-49ca-b28d-1b5d155414ec/tag/http/">
841 + <input name="tim" type="hidden" value="<?=date("H:i:s.000")?>">
842 + <input name="pub" type="hidden" value="<?=$logPublisher?>">
843 + <input name="data" type="hideen" value="WORDPRESS_PLUGIN_INSTALL|<?="//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}|{$detailsString}"?>">
844 + </form> -->
504 845 </div>
505 846
506 847 <script>
848 +
849 + // Set enabled/disabled appearance upon page load
850 + // (Function is defined earlier on the page.)
507 851 setEnabledDisabled('#below_article', document.getElementById("first_bc_enabled"));
508 852 setEnabledDisabled('#mid_article', document.getElementById("mid_enabled"));
509 853 setEnabledDisabled('#homepage', document.getElementById("home_enabled"));
510 - setEnabledDisabled('#web_push', document.getElementById("web_push_enabled"));
511 - setEnabledDisabled('#category_widget',document.getElementById('category_enabled'));
854 +
512 855 </script>
513 856
514 857 <script>
515 -jQuery(document).ready(function($) {
516 - let widgetCounter = $('#mid-article-widgets-container .mid-article-widget').length;
517 858
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 - }
859 + // Fadeouts for error/success messages
860 + setTimeout(function(){jQuery('.label-success').fadeOut()}, 5000);
861 + setTimeout(function(){jQuery('.label-error').fadeOut()}, 8000);
531 862
532 - // Call the function on page load to fix the initial view
533 - initializeWidgetView();
863 + // PC
864 + // window.onload = function(){
865 + // document.forms['install_log'].submit()
866 + // }
534 867
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 868 </script>