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