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