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 +543 -223 1.0.11 → 2.2.3 View file →
@@ -1,266 +1,586 @@
1 +<!-- Latest font-awesome include-->
2 +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
3 +
4 +<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
5 +<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
6 +<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
7 +
1 8 <style>
2 - .taboola-container {
3 - padding: 20px;
4 - padding-left: 0;
5 - width: 400px;
6 - font-size: 14px;
9 + <?php include 'css/main.css'; ?>
10 +</style>
11 +
12 +<div class="taboola-container">
13 + <div class="theme_image">
14 + <img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:150px;'/>
15 + </div>
16 +
17 + <h2 style="font-size:1.7em;">Taboola WordPress Plugin</h2>
18 +
19 + <h2 class="nav-tab-wrapper">
20 + <a href="#tab1" class="nav-tab" id="tab1-link">Web</a>
21 + <a href="#tab2" class="nav-tab" id="tab2-link">Web Push</a>
22 + </h2>
23 +
24 +<!-- errors/success message -->
25 +
26 + <?php
27 + if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){
28 + echo "<div class='label-success'>";
29 + echo "<h3 style='color:green;'>Changes applied!</h3>";
30 + echo "<span>Verify the new changes by browsing to your site.</span>";
31 + echo "</div>";
7 32 }
8 - table {
9 - width: 380px;
10 - margin-left: 20px;
33 +
34 + if(count($taboola_errors) > 0){
35 + echo "<div class='label-error'>";
36 + echo "<h3 style='color:red;'>Missing or incorrect values</h3>";
37 + echo "<p>The following fields contained missing or incorrect values:</p>";
38 + echo "<ul>";
39 + for($i = 0; $i < count($taboola_errors); $i++){
40 + echo "<li>".$taboola_errors[$i]."</li>";
41 + }
42 + echo "</ul>";
43 + echo "<p><b>All values</b> have been reverted to the last successful save.</p>";
44 + echo "</div>";
11 45 }
12 - table td img {
13 - position: relative;
14 - top: 3px;
15 - margin-left: 5px;
46 +
47 + ?>
48 +
49 +<script>
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 + var applyColor = (chkToggle.checked ? "#000" : "#666");
57 +
58 + // Set all labels in that section ('divID') to the relevant color.
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.
63 + $(divID).find("input").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
64 + $(divID).find("select").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
65 +
16 66 }
17 - /* table {
18 - padding: 12px;
19 - border: 3px solid #467FD7;
20 - border-radius: 5px;
21 - margin-top: 10px;
22 - width: 100%;
23 - }*/
24 - table tr td:first-child {
25 - width: 110px;
67 +</script>
68 +
69 +<!-- tab-switching JQuery -->
70 +<script>
71 +jQuery(document).ready(function($) {
72 + function showTab(tabId) {
73 + $('.nav-tab').removeClass('nav-tab-active');
74 + $('.tab-content').removeClass('active').hide();
75 +
76 + $('a[href="' + tabId + '"]').addClass('nav-tab-active');
77 + $(tabId).addClass('active').show();
26 78 }
27 - table input {
28 - width: 100%;
79 +
80 + // On tab click, update the URL hash and hidden input value
81 + $('.nav-tab').click(function(e) {
82 + e.preventDefault();
83 + var tabId = $(this).attr('href');
84 + window.location.hash = tabId;
85 + $('#active_tab').val(tabId);
86 + showTab(tabId);
87 + });
88 +
89 + // On page load, show the tab from the URL hash or default to the first tab
90 + var hash = window.location.hash;
91 + if (hash) {
92 + showTab(hash);
93 + $('#active_tab').val(hash);
94 + } else {
95 + showTab('#tab1');
29 96 }
30 - input[type='text'] {
31 - border-radius: 3px;
97 +
98 + // Set the active tab before form submission
99 + $('form').submit(function() {
100 + var activeTab = $('.nav-tab.nav-tab-active').attr('href');
101 + $('#active_tab').val(activeTab);
102 + });
103 +});
104 +</script>
105 +
106 +<script>
107 +$(document).ready(function(){
108 + // On page load:
109 + if ($('#mid_paragraph_ui_mode').val() == 'Other') {
110 + $("#mid_css_selector_div").show();
32 111 }
33 - hr {
34 - margin-top: 15px;
35 - margin-bottom: 15px;
36 - border-bottom: none;
37 - }
38 - input[type='checkbox'] {
39 112
40 - }
41 - input[type='submit']{
42 - float: right;
43 - }
44 - .checkbox {
45 - margin-bottom: 10px;
46 - }
47 - .request_link {
48 - float: right;
49 - margin-right: 10px;
50 - line-height: 26px;
51 - }
52 - table .tooltip {
53 - /* position:relative;
54 - top:50px;
55 - left:50px;*/
56 - }
57 - .tooltip div { /* hide and position tooltip */
58 - background-color: black;
59 - color: white;
60 - border-radius: 5px;
61 - opacity: 0;
62 - position: absolute;
63 - -webkit-transition: opacity 0.5s;
64 - -moz-transition: opacity 0.5s;
65 - -ms-transition: opacity 0.5s;
66 - -o-transition: opacity 0.5s;
67 - transition: opacity 0.5s;
68 - width: 200px;
69 - padding: 10px;
70 - margin-left: 30px;
71 - margin-top: -45px;
72 - }
73 - table .tooltip:hover div { /* display tooltip on hover */
74 - opacity:1;
75 - }
76 - .label-success {
77 - font-size: 17px;
78 - display: block;
79 - margin-top: 10px;
80 - color: green;
81 - }
82 - .label-error {
83 - font-size: 17px;
84 - display: block;
85 - margin-top: 10px;
86 - color: red;
87 - }
113 + if ($('#home_enabled').prop("checked") === true) {
114 + $("#homepage").show();
115 + var ad = $('#show-advanced-settings');
116 + ad.text("<< Hide advanced settings");
117 + }
118 +});
119 +</script>
88 120
89 - .toggle_icon{
90 - background: url(<?php echo $this->plugin_url.'img/arrow_right_32.png' ?>) no-repeat;
91 - background-size:contain;
92 - width:24px;
93 - height:24px;
94 - display:inline-block;
95 - vertical-align: middle;
96 - }
121 +<script>
122 +$(document).ready(function(){
123 + // On clicking 'Advanced settings'
124 + $("#show-advanced-settings").click(function() {
125 + $("#homepage").slideToggle("fast");
126 + var ad = $('#show-advanced-settings');
127 + ad.text() == "Show advanced settings >>" ? ad.text("<< Hide advanced settings") : ad.text("Show advanced settings >>");
128 + });
129 +});
130 +</script>
97 131
98 - .toggle_icon_on{
99 - -ms-transform: rotate(90deg); /* IE 9 */
100 - -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
101 - transform: rotate(90deg);
102 - }
103 - .apply_button{
104 - margin-top: 20px !important;
105 - }
106 132
107 -</style>
133 +<script>
134 +$(document).ready(function(){
108 135
109 -<div class="taboola-container">
110 - <img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:200px;'/>
111 - <hr>
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();
112 142
113 - <form method="POST">
114 - <table>
115 - <tr>
116 - <td>Publisher ID</td>
117 - <td>
118 - <input type="text" name="publisher_id" placeholder="publisher" value="<?php echo htmlspecialchars($settings->publisher_id) ?>"/>
119 - </td>
120 - <td class='tooltip'>
121 - <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/>
122 - <div>Please contact your Taboola representative to receive the Publisher ID </div>
123 - </td>
124 - </tr>
125 - <tr>
126 - <td colspan='2' style='line-height: 26px; font-size: 13px;'>
127 - Don't have a Publisher ID?
128 - <a style='float: inherit; margin-left:5px; class='request_link' href=' http://taboola.com/contact' target='_blank'>Contact Taboola here</a>
129 - </td>
130 - </tr>
131 - </table>
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();
132 152
133 - <hr style='margin-bottom: 25px; margin-top: 5px;'>
153 + // Highlight the 'occurrence' field:
154 + $("#mid_occurrence").addClass('highlight');
155 + setTimeout(() => $("#mid_occurrence").removeClass('highlight'), 1000);
156 + }
157 + });
158 +});
159 +</script>
134 160
135 - <div class='checkbox'>
136 - <input id="first_bc_enabled" type="checkbox" <?php echo $settings->first_bc_enabled ? "checked='checked'" : "" ?> name="first_bc_enabled"/>
137 - Below Article
161 +
162 +<!-- Welcome Massage -->
163 +
164 + <div class="publisher_welcome_massage">
165 + <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2>
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>
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>
168 + <div class="list_l1">
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>
138 170 </div>
139 - <table>
140 - <tr>
141 - <td>Widget ID</td>
142 - <td>
143 - <input type="text" value="<?php echo $settings->first_bc_widget_id ?>" name="first_bc_widget_id" placeholder="Widget ID" />
144 - </td>
145 - <td class='tooltip'>
146 - <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/>
147 - <div>Please contact your Taboola representative to receive the Widget ID</div>
148 - </td>
149 - </tr>
171 + </div>
150 172
151 - </table>
152 - <hr>
173 +<!-- Welcome Massage-->
153 174
154 - <div class='checkbox'>
155 - <input id="second_bc_enabled" type="checkbox" <?php echo $settings->second_bc_enabled ? "checked='checked'" : "" ?> name="second_bc_enabled"/>
156 - Below Article 2nd
175 +<form method="POST">
176 +<?php
177 + // Generate a nonce and pass it via a hidden field
178 + $my_nonce = wp_create_nonce( 'my_plugin_update_field_action' );
179 +?>
180 +<input type="hidden" name="my_plugin_nonce" value="<?php echo esc_attr( $my_nonce ); ?>"/>
181 +
182 +<div id="tab1" class="tab-content">
183 + <h2 class="general_h2">General Settings</h2>
184 +
185 + <div class="settings_block">
186 + <div class="style_box1"><label id="pub_id">Publisher ID :</label>
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' ?>'/> -->
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">
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>
192 + </g>
193 + </svg>
194 + <!-- <div id="arrow" ></div> -->
195 + <div>Your Publisher ID, as provided by Taboola.</div>
196 + </div>
197 + </div>
198 + <div class="pub_id">
199 + <input id="publisher-id" type="text" name="publisher_id" placeholder="publisher" value="<?php echo !empty($settings->publisher_id) ? strip_tags($settings->publisher_id) : '' ?>"/>
200 + </div>
201 + <div class="statement">
202 + <label style="color: #000000; padding-">
203 + Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
204 + </label>
205 + </div>
206 + </div>
207 +
208 + <!-- Below Article Widget -->
209 + <h2 class="widget_h2">Taboola Units</h2>
210 + <div id="below_article" class="settings_block widget_settings_block">
211 + <div class="switch_style">
212 + <label class="switch">
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" />
214 + <span class="slider round"></span>
215 + </label>
216 + <b style="font-size:15px;">Below-article</b>
217 + </div>
218 + <div class="label_below">
219 + <div class="mode_style">
220 + <label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label>
221 + <div class="tooltip">
222 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
223 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
224 + <g fill="none" fill-rule="evenodd">
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>
226 + </g>
227 + </svg>
228 + <div>Your <i>below-article</i> Mode (Widget ID), as provided by Taboola. </div>
229 + </div>
230 + </div>
231 + <div class="placement_style">
232 + <label id="first_bc_placement_label" style="float:left;">Placement Name:</label>
233 + <div class='tooltip'>
234 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
235 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
236 + <g fill="none" fill-rule="evenodd">
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>
238 + </g>
239 + </svg>
240 + <div>Your <i>below-article</i> Placement Name, as provided by Taboola. <br>
241 + <br> When upgrading from v1, fill in 'below-article'. <br>
242 + <br> For more information, reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>, or contact Taboola Support.
243 + </div>
244 + </div>
245 + </div>
246 + </div>
247 + <div class="input_below">
248 + <div class="widget_below">
249 + <input id="first_bc_widget_id" type="text" value="<?php echo !empty($settings->first_bc_widget_id) ? strip_tags($settings->first_bc_widget_id) : "" ?>" name="first_bc_widget_id" placeholder="Widget ID" />
250 + </div>
251 + <div class="placement_below">
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" />
253 + </div>
254 + </div>
255 +
256 + <!-- Below Article Widget -->
257 + <!-- Advanced Settings -->
258 + <br />
259 + <div class='location_section'>
260 + <div class='checkbox_read'>
261 + <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" />
262 + <label id="out_of_content_enabled_label">Place the feed/widget just after the article container (required for <b>Read More</b>)</label>
263 + </div>
264 + <div class='tooltip'>
265 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_read">
266 + <g fill="none" fill-rule="evenodd">
267 + <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>
268 + </g>
269 + </svg>
270 + <div>
271 + Required in order for Taboola to activate <i>Read More</i>.<br><br>
272 + Read More buttons can boost audience engagement significantly, especially on mobile devices.<br><br>
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>
274 + </div>
275 + </div>
276 + </div>
277 + <!-- Advanced Settings -->
278 +
279 + <!-- Mid Article Widget -->
280 +
281 + <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>
289 +
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>
300 + </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>
310 + </div>
311 + </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>
319 + </div>
320 +
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>
338 + </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;">
345 + </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>
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>
366 + </div>
157 367 </div>
368 + <!-- Mid Article Widget -->
158 369
159 - <table>
160 - <tr>
161 - <td>Widget ID</td>
162 - <td>
163 - <input type="text" value="<?php echo htmlspecialchars($settings->second_bc_widget_id) ?>" name="second_bc_widget_id" placeholder="Widget ID" />
164 - </td>
165 - <td class='tooltip'>
166 - <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/>
167 - <div>Please contact your Taboola representative to receive the Widget ID</div>
168 - </td>
169 - </tr>
370 + <!-- Right Rail Article Widget -->
170 371
171 - </table>
172 - <hr style='border-bottom: 1px solid #fafafa;'>
372 + <div id="right-rail" class="settings_block widget_settings_block">
373 + <label id="right-rail-label"><b style="font-size:15px;margin-left: 10px;">Right-rail (sidebar)</b> </label>
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>
173 375
174 - <?php $location_defined = (htmlspecialchars($settings->location_string) != ""); ?>
376 + <div id="rightrail-banner">
377 + 1. In the <b>sidebar menu</b> (<i>left</i>) select <b>Appearance</b> > <b>Widgets</b>, or click <a href="widgets.php" target="_blank">here</a> to open the <b>Widgets</b> panel. </br>
378 + 2. Click on the <span style="font-size: 18px; font-weight:bold">+</span> icon (<i>top, left</i>) and type in <b>"Taboola".</b></br>
379 + 3. Drag the <b>Taboola</b> widget to the desired position in the sidebar (<i>right</i>).</br>
380 + 4. Enter the <b>Widget ID (Mode)</b>, as provided by <b>Taboola</b>.</br>
381 + 5. Click on <b>Update</b> (<i>top, right</i>) to save your changes.</br>
382 + 6. Browse to your website and verify that the newly added unit displays correctly.</br>
383 + <hr>
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>.
385 + </div>
386 + </div>
175 387
388 +<!-- Right Rail Article Widget -->
176 389
177 - <div class='toggle_intercept checkbox'>
178 - <?php if ($location_defined): ?>
179 - <div class='toggle_icon toggle_icon_on'></div>
180 - Advanced Settings
390 +<!-- Homepage mid widget -->
391 +
392 +<div id="homepage" class="settings_block widget_settings_block">
393 + <div class="switch_style">
394 + <label class="switch">
395 + <input id="home_enabled" type="checkbox" <?php echo !empty($settings->home_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#homepage', this)" name="home_enabled"/>
396 + <span class="slider round"></span>
397 + </label>
398 + <div>
399 + <b style="font-size:15px;float: left;">Homepage (front page)</b>
400 + <div class='tooltip'>
401 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
402 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
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>
404 + </g>
405 + </svg>
406 + <div>Settings will be applied to the page that you marked as your 'front page'.</div>
407 + </div>
408 + </div>
181 409 </div>
182 - <table class='location_section'>
183 410
184 - <?php else: ?>
185 - <div class='toggle_icon'></div>
186 - Advanced Settings
411 + <div>
412 + <div class="mode_style_home"><label id="home_widget_id_label" style="float:left;">Mode (Widget ID):</label>
413 + <div class='tooltip'>
414 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
415 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
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>
417 + </g>
418 + </svg>
419 + <div>Your <i>homepage</i> Mode (Widget ID), as provided by Taboola.</div>
420 + </div>
187 421 </div>
188 - <table class='location_section' style='display:none'>
422 + <div class="placement_style_home"><label id="home_placement_label" style="float:left;">Placement Name:</label>
423 + <div class='tooltip'>
424 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
425 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
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>
427 + </g>
428 + </svg>
429 + <div>Your <i>homepage</i> Placement Name, as provided by Taboola.</div>
430 + </div>
431 + </div>
432 + </div>
433 + <div>
434 + <div class="widget_below_home">
435 + <input id="home_widget_id" type="text" value="<?php echo !empty($settings->home_widget_id) ? strip_tags($settings->home_widget_id) : "" ?>" name="home_widget_id" placeholder="Widget ID" />
436 + </div>
437 + <div class="placement_below_home">
438 + <input id = "home_placement" type="text" value="<?php echo !empty($settings->home_placement) ? strip_tags($settings->home_placement) : "" ?>" name="home_placement" placeholder="Placement Name" />
439 + </div>
440 + </div>
189 441
190 - <?php endif; ?>
442 + <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
443 + <div class='tooltip'>
444 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
445 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
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>
447 + </g>
448 + </svg>
449 + <div>The widget will be placed <i>just beneath</i> this element.<br><br>
450 + To target an element, 2 pieces of information are needed:<br><br>
451 + i) A CSS selector - e.g. <i>p</i> (for paragraph).<br>
452 + ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br>
453 + For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>.
454 + </div>
455 + </div>
456 + </div>
191 457
192 -
193 - <tr>
194 - <td>Location</td>
195 - <td>
196 - <input type="text" value="<?php echo htmlspecialchars($settings->location_string) ?>" name="location_string" placeholder="" />
197 - </td>
198 - <td class='tooltip'>
199 - <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/>
200 - <div>This field controls the location of these widgets on the page. If you would like to move your widget from its default location directly below the article a Taboola representative will provide you with the necessary information.</div>
201 - </td>
202 - </tr>
203 - <tr>
204 - <td colspan="2"> <div class='checkbox'>
205 - <input id="out_of_content_enabled" type="checkbox" <?php echo $settings->out_of_content_enabled ? "checked='checked'" : "" ?> name="out_of_content_enabled"/>
206 - Place widget after main content DOM element
207 - </div></td>
208 - <td class='tooltip'>
209 - <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/>
210 - <div>This may be disabled if your website doesn't use Taboola's "Read more" feature, or if the widget is not placed correctly. DO NOT disable it if your widget includes "Read More"</div>
211 - </td>
212 458
213 - </tr>
459 + <div class="home_occurrence">
460 + <div class="mode_style_home_selector"><label id="home_location_string_label" style="float:left;">CSS selector :</label>
461 + <div class='tooltip'>
462 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
463 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
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>
465 + </g>
466 + </svg>
467 + <div>
468 + The element to target - e.g.:<br><br>
469 + <i>section</i> - to target a <i>section</i>.<br>
470 + <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
471 + <i>.my-class</i> - to target a <i>class</i> of "my-class".
472 + </div>
473 + </div>
474 + </div>
475 + <div class="placement_style_home_occurrence"><label id="home_occurrence_label" style="float:left;">Occurrence :</label>
476 + <div class='tooltip'>
477 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
478 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
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>
480 + </g>
481 + </svg>
482 + <div>For a <b>non-unique</b> selector - e.g. <i>section</i> - fill in the <b>occurrence</b> to target.<br><br>
483 + E.g. To target the <b>2nd</b> section, fill in <i>2</i>. <br><br>
484 + For a <b>unique</b> selector - e.g. <i>#my-id</i> - leave the default value of '1'.</div>
485 + </div>
486 + </div>
487 + </div>
488 + <div class="home_placement">
489 + <div class="widget_below_home_selector">
490 + <input id = "home_location_string" type="text" value="<?php echo !empty($settings->home_location_string) ? strip_tags($settings->home_location_string) : "" ?>" name="home_location_string" placeholder="E.g. p for paragraph" /></td>
491 + </div>
492 + <div class="placement_below_home_Occurrence">
493 + <input type="number" id="home_occurrence" value="<?php echo !empty($settings->home_location_string_occurrence) ? $settings->home_location_string_occurrence : "1" ?>" name="home_location_string_occurrence" placeholder="" style="width:65px;">
494 + </div>
495 + </div>
496 +</div>
214 497
498 +<!-- Homepage mid widget -->
215 499
216 - </table>
217 - <input class='button-secondary apply_button' type="submit" value="Apply Changes ✔"/>
218 - <!-- <a class='request_link' href=' http://taboola.com/contact' target='_blank'>Request Widget</a> -->
500 +<div id="advanced-settings-main">
501 + <a id="show-advanced-settings">Show advanced settings >></a>
502 + <div class="change_button">
503 + <input class='apply_button' type="submit" value="Apply Changes"/>
504 + </div>
505 +</div>
506 +
507 +</div>
508 +
509 +<div id="tab2" class="tab-content" style="display: none;">
510 +<h2 class="general_h2">General Setting</h2>
511 +<div id="web_push" class="settings_block widget_settings_block">
512 + <div class="style_box1"><label id="pub_id">Web Push Account ID:</label>
513 + <div class="tooltip">
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">
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>
516 + </g>
517 + </svg>
518 + <!-- <div id="arrow" ></div> -->
519 + <div>Your SC web-push numeric account ID, as provided by Taboola.<br>
520 + This integration is only for sponsored web-push <br> <br>
521 + The header script and service worker will only be injected if the publisher already has the taboola widget running on their site.
522 + </div>
523 + </div>
524 + <div class="switch_style_push">
525 + <label class="switch">
526 + <input id="web_push_enabled" type="checkbox" <?php echo !empty($settings->web_push_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#web_push', this)" name="web_push_enabled" />
527 + <span class="slider round"></span>
528 + </label>
529 + </div>
530 + </div>
531 + <div class="web_push_id">
532 + <input type="number" id="publisher_id_push" value="<?php echo !empty($settings->publisher_id_push) ? strip_tags($settings->publisher_id_push) : "" ?>" name="publisher_id_push" placeholder="Publisher ID Web Push" />
533 + </div>
534 + <div class="statement">
535 + <label style="color: #000000; padding-">
536 + Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
537 + </label>
538 + </div>
539 +</div>
540 +
541 + <div id="advanced-settings-main">
542 + <div class="change_button">
543 + <input class='apply_button' type="submit" value="Apply Changes"/>
544 + </div>
545 + </div>
546 +</div>
547 +
219 548 </form>
220 549 <div style='clear:both'></div>
221 550
222 - <form name="install_log" style="display:none;" method="post" action="http://trc.taboola.com/wordpressplugin/log/2/debug">
551 + <?php
552 + $logPublisher = empty($settings->publisher_id) ? "wordpressplugin" : $settings->publisher_id;
553 + $userDetails = wp_get_current_user();
554 + $detailsString = $userDetails->first_name." ".$userDetails->last_name;
555 + ?>
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/">
223 558 <input name="tim" type="hidden" value="<?=date("H:i:s.000")?>">
224 - <input name="data" type="hideen" value="WORDPRESS_PLUGIN_INSTALL_URL|<?="//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}"?>">
225 - </form>
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 +</div>
226 563
227 - <?php
228 - if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){
229 - echo "<span class='label-success'>Your changes have been made! You can now see them on your site</span>";
230 - }
564 +<script>
231 565
232 - if(count($taboola_errors) > 0){
233 - for($i = 0; $i < count($taboola_errors); $i++){
234 - echo "<span class='label-error'>".$taboola_errors[$i]."</span>";
235 - }
236 - }
237 - ?>
238 -</div>
566 + // Set enabled/disabled appearance upon page load
567 + // (Function is defined earlier on the page.)
568 + setEnabledDisabled('#below_article', document.getElementById("first_bc_enabled"));
569 + setEnabledDisabled('#mid_article', document.getElementById("mid_enabled"));
570 + setEnabledDisabled('#homepage', document.getElementById("home_enabled"));
571 + setEnabledDisabled('#web_push', document.getElementById("web_push_enabled"));
572 +
573 +</script>
574 +
239 575 <script>
240 - function sync_checkboxes(){
241 - if(jQuery('#first_bc_enabled').attr("checked")){
242 - jQuery('#second_bc_enabled').attr('disabled',false)
243 - } else {
244 - jQuery('#second_bc_enabled').attr('checked', false);
245 - jQuery('#second_bc_enabled').attr('disabled',true)
246 - }
247 - }
248 - jQuery('#first_bc_enabled').change(sync_checkboxes);
249 - setTimeout(function(){jQuery('.label-success').fadeOut()}, 6000);
250 - setTimeout(function(){jQuery('.label-error').fadeOut()}, 6000);
251 - sync_checkboxes()
252 576
253 - jQuery('.toggle_intercept').click(function(){
254 - if (jQuery('.location_section').fadeToggle != undefined){
255 - jQuery('.location_section').fadeToggle('fast');
256 - }else{
257 - jQuery('.location_section').toggle();
258 - }
259 - jQuery('.toggle_icon').toggleClass('toggle_icon_on');
260 - });
577 + // Fadeouts for error/success messages
578 + setTimeout(function(){jQuery('.label-success').fadeOut()}, 5000);
579 + setTimeout(function(){jQuery('.label-error').fadeOut()}, 8000);
261 580
262 - window.onload = function(){
263 - document.forms['install_log'].submit()
581 + // PC
582 + // window.onload = function(){
583 + // document.forms['install_log'].submit()
584 + // }
264 585
265 - }
266 586 </script>