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