| @@ -20,14 +20,22 @@ | ||
| 20 | 20 | <a href="#tab2" class="nav-tab" id="tab2-link">Web Push</a> |
| 21 | 21 | </h2> |
| 22 | 22 | |
| 23 | 23 | <?php |
| 24 | - if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){ | |
| 24 | + if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0 && $taboola_save_error == ''){ | |
| 25 | 25 | echo "<div class='label-success'>"; |
| 26 | 26 | echo "<h3 style='color:green;'>Changes applied!</h3>"; |
| 27 | 27 | echo "<span>Verify the new changes by browsing to your site.</span>"; |
| 28 | 28 | echo "</div>"; |
| 29 | 29 | } |
| 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 | + } | |
| 30 | 38 | |
| 31 | 39 | if(count($taboola_errors) > 0){ |
| 32 | 40 | echo "<div class='label-error'>"; |
| 33 | 41 | echo "<h3 style='color:red;'>Missing or incorrect values</h3>"; |
| @@ -237,11 +245,27 @@ | ||
| 237 | 245 | <label>Placement Name:</label> |
| 238 | 246 | <input class="widefat" type="text" name="mid_placement[]" value="<?php echo esc_attr($widget->placement ?? ''); ?>" placeholder="Mid Article Thumbnails" /> |
| 239 | 247 | </div> |
| 240 | 248 | </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>. | |
| 261 | + </div> | |
| 262 | + </div> | |
| 263 | + </div> | |
| 264 | + | |
| 241 | 265 | <div style="display: flex; flex-wrap: wrap; margin-top: 10px;"> |
| 242 | 266 | <div style="flex: 1; min-width: 200px; padding-right: 10px;"> |
| 243 | - <label>Position below:</label> | |
| 267 | + <label>Position:</label> | |
| 244 | 268 | <select class="widefat mid-widget-type-selector" name="mid_paragraph_ui_mode[]"> |
| 245 | 269 | <option value="Paragraph" <?php echo !isset($widget->location_string) || $widget->location_string === 'p' ? 'selected' : ''; ?>>Paragraph</option> |
| 246 | 270 | <option value="Other" <?php echo isset($widget->location_string) && $widget->location_string !== 'p' ? 'selected' : ''; ?>>Other (Custom)</option> |
| 247 | 271 | </select> |
| @@ -285,30 +309,44 @@ | ||
| 285 | 309 | onclick="setEnabledDisabled('#category_widget', this)" |
| 286 | 310 | name="category_enabled"/> |
| 287 | 311 | <span class="slider round"></span> |
| 288 | 312 | </label> |
| 289 | - <b style="font-size:15px;">Category (Section Page)</b> | |
| 290 | - <div class='tooltip'> | |
| 291 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" | |
| 292 | - viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 293 | - <g fill="none" fill-rule="evenodd"> | |
| 294 | - <path fill="currentColor" | |
| 295 | - 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>Settings will be applied to all Category/Section archive pages on your site.</div> | |
| 299 | -</div> | |
| 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> | |
| 300 | 322 | |
| 301 | - </div> | |
| 302 | - | |
| 303 | 323 | <div class="label_below"> |
| 324 | + | |
| 304 | 325 | <div class="mode_style"> |
| 305 | - <label id="category_widget_id_label" style="float:left;">Mode (Widget ID):</label> | |
| 306 | - </div> | |
| 307 | - <div class="placement_style"> | |
| 308 | - <label id="category_placement_label" style="float:left;">Placement Name:</label> | |
| 309 | - </div> | |
| 310 | - </div> | |
| 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 | + | |
| 311 | 349 | |
| 312 | 350 | <div class="input_below"> |
| 313 | 351 | <div class="widget_below"> |
| 314 | 352 | <input id="category_widget_id" type="text" |
| @@ -321,14 +359,55 @@ | ||
| 321 | 359 | name="category_placement" placeholder="Placement Name"/> |
| 322 | 360 | </div> |
| 323 | 361 | </div> |
| 324 | 362 | |
| 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 | + | |
| 325 | 379 | <div class="home_occurrence"> |
| 326 | 380 | <div class="mode_style_home_selector"> |
| 327 | 381 | <label id="category_location_string_label" style="float:left;">CSS selector :</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 | + | |
| 328 | 396 | </div> |
| 329 | 397 | <div class="placement_style_home_occurrence"> |
| 330 | 398 | <label id="category_occurrence_label" style="float:left;">Occurrence :</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 | + | |
| 331 | 410 | </div> |
| 332 | 411 | </div> |
| 333 | 412 | |
| 334 | 413 | <div class="home_placement"> |