PluginProbe
Taboola / 2.2.3
Taboola v2.2.3
1.0.4 1.0.5 1.0.6 1.0.8 2.0.1 2.0.2 2.1.0 2.1.1 2.2.2 2.2.3 3.0.0 3.0.1 3.0.2 3.1.0 trunk 1.0 1.0.1 1.0.10 1.0.11 1.0.12 1.0.13 1.0.14 1.0.15 1.0.2 1.0.3
← All changes | settings.php +181 -275 trunk → 2.2.3 View file →
@@ -1,4 +1,5 @@
1 +<!-- Latest font-awesome include-->
1 2 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
2 3
3 4 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
4 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
@@ -19,23 +20,17 @@
19 20 <a href="#tab1" class="nav-tab" id="tab1-link">Web</a>
20 21 <a href="#tab2" class="nav-tab" id="tab2-link">Web Push</a>
21 22 </h2>
22 23
23 -<?php
24 - if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0 && $taboola_save_error == ''){
24 +<!-- errors/success message -->
25 +
26 + <?php
27 + if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){
25 28 echo "<div class='label-success'>";
26 29 echo "<h3 style='color:green;'>Changes applied!</h3>";
27 30 echo "<span>Verify the new changes by browsing to your site.</span>";
28 31 echo "</div>";
29 32 }
30 -
31 - if($taboola_save_error != ''){
32 - echo "<div class='label-error'>";
33 - echo "<h3 style='color:red;'>Settings were not saved</h3>";
34 - echo "<p>".esc_html($taboola_save_error)."</p>";
35 - echo "<p><b>All values</b> have been reverted to the last successful save.</p>";
36 - echo "</div>";
37 - }
38 33
39 34 if(count($taboola_errors) > 0){
40 35 echo "<div class='label-error'>";
41 36 echo "<h3 style='color:red;'>Missing or incorrect values</h3>";
@@ -52,15 +47,27 @@
52 47 ?>
53 48
54 49 <script>
55 50 function setEnabledDisabled(divID, chkToggle) {
51 + /*
52 + JS function for form.
53 + Enables/disables fields for the given section ('divID'), depending on whether 'chkToggle' is checked.
54 + */
55 +
56 56 var applyColor = (chkToggle.checked ? "#000" : "#666");
57 +
58 + // Set all labels in that section ('divID') to the relevant color.
57 59 $(divID).find("label").css("color", applyColor);
60 +
61 + // Disable (/enable) all input fields in that section ('divID'), except for 'chkToggle'.
62 + // Once done, apply a gray border color.
58 63 $(divID).find("input").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
59 64 $(divID).find("select").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
65 +
60 66 }
61 67 </script>
62 68
69 +<!-- tab-switching JQuery -->
63 70 <script>
64 71 jQuery(document).ready(function($) {
65 72 function showTab(tabId) {
66 73 $('.nav-tab').removeClass('nav-tab-active');
@@ -69,8 +76,9 @@
69 76 $('a[href="' + tabId + '"]').addClass('nav-tab-active');
70 77 $(tabId).addClass('active').show();
71 78 }
72 79
80 + // On tab click, update the URL hash and hidden input value
73 81 $('.nav-tab').click(function(e) {
74 82 e.preventDefault();
75 83 var tabId = $(this).attr('href');
76 84 window.location.hash = tabId;
@@ -77,8 +85,9 @@
77 85 $('#active_tab').val(tabId);
78 86 showTab(tabId);
79 87 });
80 88
89 + // On page load, show the tab from the URL hash or default to the first tab
81 90 var hash = window.location.hash;
82 91 if (hash) {
83 92 showTab(hash);
84 93 $('#active_tab').val(hash);
@@ -85,8 +94,9 @@
85 94 } else {
86 95 showTab('#tab1');
87 96 }
88 97
98 + // Set the active tab before form submission
89 99 $('form').submit(function() {
90 100 var activeTab = $('.nav-tab.nav-tab-active').attr('href');
91 101 $('#active_tab').val(activeTab);
92 102 });
@@ -94,8 +104,13 @@
94 104 </script>
95 105
96 106 <script>
97 107 $(document).ready(function(){
108 + // On page load:
109 + if ($('#mid_paragraph_ui_mode').val() == 'Other') {
110 + $("#mid_css_selector_div").show();
111 + }
112 +
98 113 if ($('#home_enabled').prop("checked") === true) {
99 114 $("#homepage").show();
100 115 var ad = $('#show-advanced-settings');
101 116 ad.text("<< Hide advanced settings");
@@ -104,8 +119,9 @@
104 119 </script>
105 120
106 121 <script>
107 122 $(document).ready(function(){
123 + // On clicking 'Advanced settings'
108 124 $("#show-advanced-settings").click(function() {
109 125 $("#homepage").slideToggle("fast");
110 126 var ad = $('#show-advanced-settings');
111 127 ad.text() == "Show advanced settings >>" ? ad.text("<< Hide advanced settings") : ad.text("Show advanced settings >>");
@@ -112,9 +128,41 @@
112 128 });
113 129 });
114 130 </script>
115 131
116 -<div class="publisher_welcome_massage">
132 +
133 +<script>
134 +$(document).ready(function(){
135 +
136 + // On selecting an item in the dropdown:
137 + $('#mid_paragraph_ui_mode').on('change', function(e){
138 + e.preventDefault();
139 + if ( this.value == 'Other')
140 + {
141 + $("#mid_css_selector_div").show();
142 +
143 + // Highlight relevant fields:
144 + $("#mid_location_string, #mid_occurrence").addClass('highlight');
145 + setTimeout(() => $("#mid_occurrence, #mid_location_string").removeClass('highlight'), 1500);
146 +
147 + }
148 + else
149 + {
150 + $("#mid_location_string").val("p"); // Set it back to the default value of 'p'
151 + $("#mid_css_selector_div").hide();
152 +
153 + // Highlight the 'occurrence' field:
154 + $("#mid_occurrence").addClass('highlight');
155 + setTimeout(() => $("#mid_occurrence").removeClass('highlight'), 1000);
156 + }
157 + });
158 +});
159 +</script>
160 +
161 +
162 +<!-- Welcome Massage -->
163 +
164 + <div class="publisher_welcome_massage">
117 165 <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2>
118 166 <p class="first_p">For detailed instructions, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center.</a></p>
119 167 <p class="second_p"><b>Stuck? Need a hand?</b> Feel free to reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>.</p>
120 168 <div class="list_l1">
@@ -121,16 +169,17 @@
121 169 <p>Usage of this plugin is subject to <b>Taboola's</b> <a href="https://www.taboola.com/policies/platform-terms-of-service" target='_blank'>terms of service.</a></p>
122 170 </div>
123 171 </div>
124 172
173 +<!-- Welcome Massage-->
174 +
125 175 <form method="POST">
126 176 <?php
177 + // Generate a nonce and pass it via a hidden field
127 178 $my_nonce = wp_create_nonce( 'my_plugin_update_field_action' );
128 179 ?>
129 180 <input type="hidden" name="my_plugin_nonce" value="<?php echo esc_attr( $my_nonce ); ?>"/>
130 -<input type="hidden" id="active_tab" name="active_tab" value="#tab1"/>
131 181
132 -
133 182 <div id="tab1" class="tab-content">
134 183 <h2 class="general_h2">General Settings</h2>
135 184
136 185 <div class="settings_block">
@@ -135,12 +184,15 @@
135 184
136 185 <div class="settings_block">
137 186 <div class="style_box1"><label id="pub_id">Publisher ID :</label>
138 187 <div class="tooltip">
188 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
189 + <!-- <img class="helpTooltip__icon___1XWGN" src='<?php echo $this->plugin_url.'img/tooltip_image.svg' ?>'/> -->
139 190 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
140 191 <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
141 192 </g>
142 193 </svg>
194 + <!-- <div id="arrow" ></div> -->
143 195 <div>Your Publisher ID, as provided by Taboola.</div>
144 196 </div>
145 197 </div>
146 198 <div class="pub_id">
@@ -152,9 +204,10 @@
152 204 </label>
153 205 </div>
154 206 </div>
155 207
156 - <h2 class="widget_h2">Taboola Units</h2>
208 + <!-- Below Article Widget -->
209 + <h2 class="widget_h2">Taboola Units</h2>
157 210 <div id="below_article" class="settings_block widget_settings_block">
158 211 <div class="switch_style">
159 212 <label class="switch">
160 213 <input id="first_bc_enabled" type="checkbox" <?php echo !empty($settings->first_bc_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#below_article', this)" name="first_bc_enabled" />
@@ -165,8 +218,9 @@
165 218 <div class="label_below">
166 219 <div class="mode_style">
167 220 <label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label>
168 221 <div class="tooltip">
222 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
169 223 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
170 224 <g fill="none" fill-rule="evenodd">
171 225 <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
172 226 </g>
@@ -176,8 +230,9 @@
176 230 </div>
177 231 <div class="placement_style">
178 232 <label id="first_bc_placement_label" style="float:left;">Placement Name:</label>
179 233 <div class='tooltip'>
234 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
180 235 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
181 236 <g fill="none" fill-rule="evenodd">
182 237 <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
183 238 </g>
@@ -196,8 +251,11 @@
196 251 <div class="placement_below">
197 252 <input type="text" id="first_bc_placement" value="<?php echo !empty($settings->first_bc_placement) ? strip_tags($settings->first_bc_placement) : "" ?>" name="first_bc_placement" placeholder="Placement Name" />
198 253 </div>
199 254 </div>
255 +
256 + <!-- Below Article Widget -->
257 + <!-- Advanced Settings -->
200 258 <br />
201 259 <div class='location_section'>
202 260 <div class='checkbox_read'>
203 261 <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" />
@@ -215,77 +273,103 @@
215 273 For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements#below-article-widget" target='_blank'>Taboola Dev Center</a>.</div>
216 274 </div>
217 275 </div>
218 276 </div>
277 + <!-- Advanced Settings -->
219 278
279 + <!-- Mid Article Widget -->
280 +
220 281 <div id="mid_article" class="settings_block widget_settings_block">
221 - <div class="switch_style">
222 - <label class="switch">
223 - <input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/>
224 - <span class="slider round"></span>
225 - </label>
226 - <b style="font-size:15px;">Mid-article</b>
227 - </div>
282 + <div class="switch_style">
283 + <label class="switch">
284 + <input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/>
285 + <span class="slider round"></span>
286 + </label>
287 + <b style="font-size:15px;">Mid-article</b>
288 + </div>
228 289
229 - <div id="mid-article-widgets-container">
230 - <?php
231 - $mid_widgets = !empty($settings->mid_widgets) ? json_decode($settings->mid_widgets) : array();
232 - if (empty($mid_widgets)) {
233 - $mid_widgets = array(new stdClass());
234 - }
235 - foreach ($mid_widgets as $index => $widget) {
236 - ?>
237 - <div class="mid-article-widget" style="border: 1px solid #ddd; padding: 10px; margin-top: 10px; border-radius: 5px;">
238 - <h4 style="font-size: 14px; font-weight: bold;">Mid-Article Widget #<?php echo $index + 1; ?></h4>
239 - <div style="display: flex; flex-wrap: wrap;">
240 - <div style="flex: 1; min-width: 250px; padding-right: 10px;">
241 - <label>Mode (Widget ID):</label>
242 - <input class="widefat" type="text" name="mid_widget_id[]" value="<?php echo esc_attr($widget->widget_id ?? ''); ?>" placeholder="thumbnails-mid1" />
290 + <div>
291 + <div class="mode_style_mid"><label id="mid_widget_id_label" style="float:left;">Mode (Widget ID):</label>
292 + <div class='tooltip'>
293 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
294 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
295 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
296 + </g>
297 + </svg>
298 + <div>Your <i>mid-article</i> Mode (Widget ID), as provided by Taboola.</div>
299 + </div>
243 300 </div>
244 - <div style="flex: 1; min-width: 250px;">
245 - <label>Placement Name:</label>
246 - <input class="widefat" type="text" name="mid_placement[]" value="<?php echo esc_attr($widget->placement ?? ''); ?>" placeholder="Mid Article Thumbnails" />
301 + <div class="placement_style_mid"><label id="mid_placement_label" style="float:left;">Placement Name:</label>
302 + <div class='tooltip'>
303 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
304 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
305 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
306 + </g>
307 + </svg>
308 + <div>Your <i>mid-article</i> Placement Name, as provided by Taboola.</div>
309 + </div>
247 310 </div>
248 311 </div>
249 - <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
250 - <div class='tooltip'>
251 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
252 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
253 - <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>
254 - </g>
255 - </svg>
256 - <div>The widget will be placed <i>just beneath</i> this element.<br><br>
257 - To target an element, 2 pieces of information are needed:<br><br>
258 - i) A CSS selector - e.g. <i>p</i> (for paragraph).<br>
259 - ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br>
260 - For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>.
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>
261 319 </div>
262 - </div>
263 - </div>
264 320
265 - <div style="display: flex; flex-wrap: wrap; margin-top: 10px;">
266 - <div style="flex: 1; min-width: 200px; padding-right: 10px;">
267 - <label>Position:</label>
268 - <select class="widefat mid-widget-type-selector" name="mid_paragraph_ui_mode[]">
269 - <option value="Paragraph" <?php echo !isset($widget->location_string) || $widget->location_string === 'p' ? 'selected' : ''; ?>>Paragraph</option>
270 - <option value="Other" <?php echo isset($widget->location_string) && $widget->location_string !== 'p' ? 'selected' : ''; ?>>Other (Custom)</option>
271 - </select>
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>
272 338 </div>
273 - <div style="flex: 1; min-width: 150px; padding-right: 10px;" class="mid-css-selector-container">
274 - <label>CSS selector:</label>
275 - <input class="widefat" type="text" name="mid_location_string[]" value="<?php echo esc_attr($widget->location_string ?? 'p'); ?>" />
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;">
276 345 </div>
277 - <div style="flex: 1; min-width: 150px;">
278 - <label>Paragraph/Element Number:</label>
279 - <input class="widefat" type="number" name="mid_location_string_occurrence[]" value="<?php echo esc_attr($widget->occurrence ?? '1'); ?>" min="1" style="width:80px;">
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>
280 362 </div>
363 + <div class="widget_below_mid_selector">
364 + <input id = "mid_location_string" type="text" value="<?php echo !empty($settings->mid_location_string) ? strip_tags($settings->mid_location_string) : "p" ?>" name="mid_location_string" placeholder="E.g. p for paragraph" />
365 + </div>
281 366 </div>
282 - <button type="button" class="button remove-mid-widget" style="margin-top: 10px;">Remove Widget</button>
283 - </div>
284 - <?php } ?>
285 367 </div>
286 - <button type="button" id="add-mid-widget" class="button button-primary" style="margin-top: 15px;">+ Add Another Mid-Article Widget</button>
287 - </div>
368 + <!-- Mid Article Widget -->
369 +
370 + <!-- Right Rail Article Widget -->
371 +
288 372 <div id="right-rail" class="settings_block widget_settings_block">
289 373 <label id="right-rail-label"><b style="font-size:15px;margin-left: 10px;">Right-rail (sidebar)</b> </label>
290 374 <div style="font-size:14px;margin: 5px 10px 10px 10px;">You can insert a <b>Taboola</b> unit in your website <b>sidebar</b> (if your <b>WordPress</b> theme provides one):</div>
291 375
@@ -299,132 +383,13 @@
299 383 <hr>
300 384 To <b>watch a demo</b> of the above steps, see our <a href="https://developers.taboola.com/web-integrations/docs/sidebar-widget" target="_blank">online docs</a>.
301 385 </div>
302 386 </div>
303 -<div id="category_widget" class="settings_block widget_settings_block">
304 - <div class="switch_style">
305 - <label class="switch">
306 - <input id="category_enabled"
307 - type="checkbox"
308 - <?php echo !empty($settings->category_enabled) ? "checked='checked'" : "" ?>
309 - onclick="setEnabledDisabled('#category_widget', this)"
310 - name="category_enabled"/>
311 - <span class="slider round"></span>
312 - </label>
313 - <b style="font-size:15px;float: left;">Category (Section Page)</b>
314 - <div class='tooltip'>
315 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
316 - <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>
317 - </g>
318 - </svg>
319 - <div>Settings will be applied to all 'Category/Section' pages on your site.</div>
320 - </div>
321 - </div>
322 387
323 - <div class="label_below">
324 -
325 - <div class="mode_style">
326 - <label id="category_widget_id_label" style="float:left;">Mode (Widget ID):</label>
327 - <div class='tooltip'>
328 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
329 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
330 - <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>
331 - </g>
332 - </svg>
333 - <div>Your <i>category</i> Mode (Widget ID), as provided by Taboola.</div>
334 - </div>
335 - </div>
336 -
337 - <div class="placement_style"><label id="category_placement_label" style="float:left;">Placement Name:</label>
338 - <div class='tooltip'>
339 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
340 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
341 - <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>
342 - </g>
343 - </svg>
344 - <div>Your <i>category</i> Placement Name, as provided by Taboola.</div>
345 - </div>
346 - </div>
347 - </div>
348 -
388 +<!-- Right Rail Article Widget -->
349 389
350 - <div class="input_below">
351 - <div class="widget_below">
352 - <input id="category_widget_id" type="text"
353 - value="<?php echo !empty($settings->category_widget_id) ? strip_tags($settings->category_widget_id) : '' ?>"
354 - name="category_widget_id" placeholder="Widget ID"/>
355 - </div>
356 - <div class="placement_below">
357 - <input id="category_placement" type="text"
358 - value="<?php echo !empty($settings->category_placement) ? strip_tags($settings->category_placement) : '' ?>"
359 - name="category_placement" placeholder="Placement Name"/>
360 - </div>
361 - </div>
390 +<!-- Homepage mid widget -->
362 391
363 - <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
364 - <div class='tooltip'>
365 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
366 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
367 - <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>
368 - </g>
369 - </svg>
370 - <div>The widget will be placed <i>just beneath</i> this element.<br><br>
371 - To target an element, 2 pieces of information are needed:<br><br>
372 - i) A CSS selector - e.g. <i>p</i> (for paragraph).<br>
373 - ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br>
374 - For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>.
375 - </div>
376 - </div>
377 - </div>
378 -
379 - <div class="home_occurrence">
380 - <div class="mode_style_home_selector">
381 - <label id="category_location_string_label" style="float:left;">CSS selector&nbsp;:</label>
382 - <div class='tooltip'>
383 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
384 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
385 - <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>
386 - </g>
387 - </svg>
388 - <div>
389 - The element to target - e.g.:<br><br>
390 - <i>section</i> - to target a <i>section</i>.<br>
391 - <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
392 - <i>.my-class</i> - to target a <i>class</i> of "my-class".
393 - </div>
394 - </div>
395 -
396 - </div>
397 - <div class="placement_style_home_occurrence">
398 - <label id="category_occurrence_label" style="float:left;">Occurrence&nbsp;:</label>
399 - <div class='tooltip'>
400 - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
401 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
402 - <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>
403 - </g>
404 - </svg>
405 - <div>For a <b>non-unique</b> selector - e.g. <i>section</i> - fill in the <b>occurrence</b> to target.<br><br>
406 - E.g. To target the <b>2nd</b> section, fill in <i>2</i>. <br><br>
407 - For a <b>unique</b> selector - e.g. <i>#my-id</i> - leave the default value of '1'.</div>
408 - </div>
409 -
410 - </div>
411 - </div>
412 -
413 - <div class="home_placement">
414 - <div class="widget_below_home_selector">
415 - <input id="category_location_string" type="text"
416 - value="<?php echo !empty($settings->category_location_string) ? strip_tags($settings->category_location_string) : '' ?>"
417 - name="category_location_string" placeholder="e.g. #content"/>
418 - </div>
419 - <div class="placement_below_home_Occurrence">
420 - <input id="category_occurrence" type="number" min="1"
421 - value="<?php echo !empty($settings->category_location_string_occurrence) ? $settings->category_location_string_occurrence : '1' ?>"
422 - name="category_location_string_occurrence"
423 - style="width:65px;">
424 - </div>
425 - </div>
426 -</div>
427 392 <div id="homepage" class="settings_block widget_settings_block">
428 393 <div class="switch_style">
429 394 <label class="switch">
430 395 <input id="home_enabled" type="checkbox" <?php echo !empty($settings->home_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#homepage', this)" name="home_enabled"/>
@@ -432,8 +397,9 @@
432 397 </label>
433 398 <div>
434 399 <b style="font-size:15px;float: left;">Homepage (front page)</b>
435 400 <div class='tooltip'>
401 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
436 402 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
437 403 <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
438 404 </g>
439 405 </svg>
@@ -444,8 +410,9 @@
444 410
445 411 <div>
446 412 <div class="mode_style_home"><label id="home_widget_id_label" style="float:left;">Mode (Widget ID):</label>
447 413 <div class='tooltip'>
414 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
448 415 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
449 416 <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
450 417 </g>
451 418 </svg>
@@ -453,8 +420,9 @@
453 420 </div>
454 421 </div>
455 422 <div class="placement_style_home"><label id="home_placement_label" style="float:left;">Placement Name:</label>
456 423 <div class='tooltip'>
424 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
457 425 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
458 426 <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
459 427 </g>
460 428 </svg>
@@ -472,8 +440,9 @@
472 440 </div>
473 441
474 442 <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
475 443 <div class='tooltip'>
444 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
476 445 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
477 446 <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
478 447 </g>
479 448 </svg>
@@ -489,8 +458,9 @@
489 458
490 459 <div class="home_occurrence">
491 460 <div class="mode_style_home_selector"><label id="home_location_string_label" style="float:left;">CSS selector :</label>
492 461 <div class='tooltip'>
462 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
493 463 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
494 464 <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
495 465 </g>
496 466 </svg>
@@ -503,8 +473,9 @@
503 473 </div>
504 474 </div>
505 475 <div class="placement_style_home_occurrence"><label id="home_occurrence_label" style="float:left;">Occurrence :</label>
506 476 <div class='tooltip'>
477 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
507 478 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
508 479 <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
509 480 </g>
510 481 </svg>
@@ -523,8 +494,10 @@
523 494 </div>
524 495 </div>
525 496 </div>
526 497
498 +<!-- Homepage mid widget -->
499 +
527 500 <div id="advanced-settings-main">
528 501 <a id="show-advanced-settings">Show advanced settings >></a>
529 502 <div class="change_button">
530 503 <input class='apply_button' type="submit" value="Apply Changes"/>
@@ -541,8 +514,9 @@
541 514 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
542 515 <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
543 516 </g>
544 517 </svg>
518 + <!-- <div id="arrow" ></div> -->
545 519 <div>Your SC web-push numeric account ID, as provided by Taboola.<br>
546 520 This integration is only for sponsored web-push <br> <br>
547 521 The header script and service worker will only be injected if the publisher already has the taboola widget running on their site.
548 522 </div>
@@ -579,102 +553,34 @@
579 553 $userDetails = wp_get_current_user();
580 554 $detailsString = $userDetails->first_name." ".$userDetails->last_name;
581 555 ?>
582 556 <img src="https://logs-01.loggly.com/inputs/d14862f3-64ad-49ca-b28d-1b5d155414ec.gif?source=wp&type=settings&pub=<?=$logPublisher?>&user=<?=urlencode($detailsString)?>&email=<?=urlencode($userDetails->user_email)?>&url=<?=urlencode("//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}")?>"/>
557 + <!-- <form name="install_log" style="display:none;" method="post" action="http://logs-01.loggly.com/inputs/d14862f3-64ad-49ca-b28d-1b5d155414ec/tag/http/">
558 + <input name="tim" type="hidden" value="<?=date("H:i:s.000")?>">
559 + <input name="pub" type="hidden" value="<?=$logPublisher?>">
560 + <input name="data" type="hideen" value="WORDPRESS_PLUGIN_INSTALL|<?="//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}|{$detailsString}"?>">
561 + </form> -->
583 562 </div>
584 563
585 564 <script>
565 +
566 + // Set enabled/disabled appearance upon page load
567 + // (Function is defined earlier on the page.)
586 568 setEnabledDisabled('#below_article', document.getElementById("first_bc_enabled"));
587 569 setEnabledDisabled('#mid_article', document.getElementById("mid_enabled"));
588 570 setEnabledDisabled('#homepage', document.getElementById("home_enabled"));
589 571 setEnabledDisabled('#web_push', document.getElementById("web_push_enabled"));
590 - setEnabledDisabled('#category_widget',document.getElementById('category_enabled'));
572 +
591 573 </script>
592 574
593 575 <script>
594 -jQuery(document).ready(function($) {
595 - let widgetCounter = $('#mid-article-widgets-container .mid-article-widget').length;
596 576
597 - // Function to set the initial correct view for widgets
598 - function initializeWidgetView() {
599 - $('#mid-article-widgets-container .mid-widget-type-selector').each(function() {
600 - var container = $(this).closest('.mid-article-widget');
601 - var selectorInputContainer = container.find('.mid-css-selector-container');
602 -
603 - if ($(this).val() === 'Paragraph') {
604 - selectorInputContainer.hide();
605 - } else {
606 - selectorInputContainer.show();
607 - }
608 - });
609 - }
577 + // Fadeouts for error/success messages
578 + setTimeout(function(){jQuery('.label-success').fadeOut()}, 5000);
579 + setTimeout(function(){jQuery('.label-error').fadeOut()}, 8000);
610 580
611 - // Call the function on page load to fix the initial view
612 - initializeWidgetView();
581 + // PC
582 + // window.onload = function(){
583 + // document.forms['install_log'].submit()
584 + // }
613 585
614 - // Add a new mid-article widget section
615 - $('#add-mid-widget').on('click', function() {
616 - widgetCounter++;
617 - var widgetHtml = `
618 - <div class="mid-article-widget" style="border: 1px solid #ddd; padding: 10px; margin-top: 10px; border-radius: 5px;">
619 - <h4 style="font-size: 14px; font-weight: bold;">Mid-Article Widget #${widgetCounter}</h4>
620 - <div style="display: flex; flex-wrap: wrap;">
621 - <div style="flex: 1; min-width: 250px; padding-right: 10px;">
622 - <label>Mode (Widget ID):</label>
623 - <input class="widefat" type="text" name="mid_widget_id[]" placeholder="thumbnails-mid1" />
624 - </div>
625 - <div style="flex: 1; min-width: 250px;">
626 - <label>Placement Name:</label>
627 - <input class="widefat" type="text" name="mid_placement[]" placeholder="Mid Article Thumbnails" />
628 - </div>
629 - </div>
630 - <div style="display: flex; flex-wrap: wrap; margin-top: 10px;">
631 - <div style="flex: 1; min-width: 200px; padding-right: 10px;">
632 - <label>Position below:</label>
633 - <select class="widefat mid-widget-type-selector" name="mid_paragraph_ui_mode[]">
634 - <option value="Paragraph" selected>Paragraph</option>
635 - <option value="Other">Other (Custom)</option>
636 - </select>
637 - </div>
638 - <div style="flex: 1; min-width: 150px; padding-right: 10px; display:none;" class="mid-css-selector-container">
639 - <label>CSS selector:</label>
640 - <input class="widefat" type="text" name="mid_location_string[]" value="p" />
641 - </div>
642 - <div style="flex: 1; min-width: 150px;">
643 - <label>Paragraph/Element Number:</label>
644 - <input class="widefat" type="number" name="mid_location_string_occurrence[]" value="1" min="1" style="width:80px;">
645 - </div>
646 - </div>
647 - <button type="button" class="button remove-mid-widget" style="margin-top: 10px;">Remove Widget</button>
648 - </div>`;
649 - $('#mid-article-widgets-container').append(widgetHtml);
650 - });
651 -
652 - // Remove a mid-article widget section
653 - $('#mid-article-widgets-container').on('click', '.remove-mid-widget', function() {
654 - $(this).closest('.mid-article-widget').remove();
655 - $('#mid-article-widgets-container .mid-article-widget').each(function(index) {
656 - $(this).find('h4').text(`Mid-Article Widget #${index + 1}`);
657 - });
658 - widgetCounter = $('#mid-article-widgets-container .mid-article-widget').length;
659 - });
660 -
661 - // Handle the show/hide for the CSS selector field on change
662 - $('#mid-article-widgets-container').on('change', '.mid-widget-type-selector', function() {
663 - var container = $(this).closest('.mid-article-widget');
664 - var selectorInputContainer = container.find('.mid-css-selector-container');
665 - var selectorInput = selectorInputContainer.find('input');
666 -
667 - if ($(this).val() === 'Paragraph') {
668 - selectorInputContainer.hide();
669 - selectorInput.val('p');
670 - } else {
671 - selectorInputContainer.show();
672 - }
673 - });
674 -});
675 -</script>
676 -
677 -<script>
678 - setTimeout(function(){jQuery('.label-success').fadeOut()}, 5000);
679 - setTimeout(function(){jQuery('.label-error').fadeOut()}, 8000);
680 586 </script>