| @@ -1,577 +1,220 @@ | ||
| 1 | -<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| 2 | - | |
| 3 | -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> | |
| 4 | -<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | |
| 5 | -<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> | |
| 6 | - | |
| 7 | 1 | <style> |
| 8 | - <?php include 'css/main.css'; ?> | |
| 9 | -</style> | |
| 2 | + .taboola-container { | |
| 3 | + padding: 20px; | |
| 4 | + padding-left: 0; | |
| 5 | + width: 400px; | |
| 6 | + font-size: 14px; | |
| 7 | + } | |
| 8 | + table { | |
| 9 | + width: 380px; | |
| 10 | + margin-left: 20px; | |
| 11 | + } | |
| 12 | + table td img { | |
| 13 | + position: relative; | |
| 14 | + top: 3px; | |
| 15 | + margin-left: 5px; | |
| 16 | + } | |
| 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; | |
| 26 | + } | |
| 27 | + table input { | |
| 28 | + width: 100%; | |
| 29 | + } | |
| 30 | + input[type='text'] { | |
| 31 | + border-radius: 3px; | |
| 32 | + } | |
| 33 | + hr { | |
| 34 | + margin-top: 15px; | |
| 35 | + margin-bottom: 15px; | |
| 36 | + border-bottom: none; | |
| 37 | + } | |
| 38 | + input[type='checkbox'] { | |
| 10 | 39 | |
| 11 | -<div class="taboola-container"> | |
| 12 | - <div class="theme_image"> | |
| 13 | - <img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:150px;'/> | |
| 14 | - </div> | |
| 15 | - | |
| 16 | - <h2 style="font-size:1.7em;">Taboola WordPress Plugin</h2> | |
| 17 | - | |
| 18 | - <h2 class="nav-tab-wrapper"> | |
| 19 | - <a href="#tab1" class="nav-tab" id="tab1-link">Web</a> | |
| 20 | - <a href="#tab2" class="nav-tab" id="tab2-link">Web Push</a> | |
| 21 | - </h2> | |
| 22 | - | |
| 23 | -<?php | |
| 24 | - if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0 && $taboola_save_error == ''){ | |
| 25 | - echo "<div class='label-success'>"; | |
| 26 | - echo "<h3 style='color:green;'>Changes applied!</h3>"; | |
| 27 | - echo "<span>Verify the new changes by browsing to your site.</span>"; | |
| 28 | - echo "</div>"; | |
| 29 | 40 | } |
| 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>"; | |
| 41 | + input[type='submit']{ | |
| 42 | + float: right; | |
| 37 | 43 | } |
| 38 | - | |
| 39 | - if(count($taboola_errors) > 0){ | |
| 40 | - echo "<div class='label-error'>"; | |
| 41 | - echo "<h3 style='color:red;'>Missing or incorrect values</h3>"; | |
| 42 | - echo "<p>The following fields contained missing or incorrect values:</p>"; | |
| 43 | - echo "<ul>"; | |
| 44 | - for($i = 0; $i < count($taboola_errors); $i++){ | |
| 45 | - echo "<li>".$taboola_errors[$i]."</li>"; | |
| 46 | - } | |
| 47 | - echo "</ul>"; | |
| 48 | - echo "<p><b>All values</b> have been reverted to the last successful save.</p>"; | |
| 49 | - echo "</div>"; | |
| 44 | + .checkbox { | |
| 45 | + margin-bottom: 10px; | |
| 50 | 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 | + } | |
| 51 | 88 | |
| 52 | - ?> | |
| 53 | - | |
| 54 | -<script> | |
| 55 | - function setEnabledDisabled(divID, chkToggle) { | |
| 56 | - var applyColor = (chkToggle.checked ? "#000" : "#666"); | |
| 57 | - $(divID).find("label").css("color", applyColor); | |
| 58 | - $(divID).find("input").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc"); | |
| 59 | - $(divID).find("select").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc"); | |
| 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; | |
| 60 | 96 | } |
| 61 | -</script> | |
| 62 | 97 | |
| 63 | -<script> | |
| 64 | -jQuery(document).ready(function($) { | |
| 65 | - function showTab(tabId) { | |
| 66 | - $('.nav-tab').removeClass('nav-tab-active'); | |
| 67 | - $('.tab-content').removeClass('active').hide(); | |
| 68 | - | |
| 69 | - $('a[href="' + tabId + '"]').addClass('nav-tab-active'); | |
| 70 | - $(tabId).addClass('active').show(); | |
| 98 | + .toggle_icon_on{ | |
| 99 | + -ms-transform: rotate(90deg); /* IE 9 */ | |
| 100 | + -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ | |
| 101 | + transform: rotate(90deg); | |
| 71 | 102 | } |
| 72 | - | |
| 73 | - $('.nav-tab').click(function(e) { | |
| 74 | - e.preventDefault(); | |
| 75 | - var tabId = $(this).attr('href'); | |
| 76 | - window.location.hash = tabId; | |
| 77 | - $('#active_tab').val(tabId); | |
| 78 | - showTab(tabId); | |
| 79 | - }); | |
| 80 | - | |
| 81 | - var hash = window.location.hash; | |
| 82 | - if (hash) { | |
| 83 | - showTab(hash); | |
| 84 | - $('#active_tab').val(hash); | |
| 85 | - } else { | |
| 86 | - showTab('#tab1'); | |
| 103 | + .apply_button{ | |
| 104 | + margin-top: 20px !important; | |
| 87 | 105 | } |
| 88 | 106 | |
| 89 | - $('form').submit(function() { | |
| 90 | - var activeTab = $('.nav-tab.nav-tab-active').attr('href'); | |
| 91 | - $('#active_tab').val(activeTab); | |
| 92 | - }); | |
| 93 | -}); | |
| 94 | -</script> | |
| 107 | +</style> | |
| 95 | 108 | |
| 96 | -<script> | |
| 97 | -$(document).ready(function(){ | |
| 98 | - if ($('#home_enabled').prop("checked") === true) { | |
| 99 | - $("#homepage").show(); | |
| 100 | - var ad = $('#show-advanced-settings'); | |
| 101 | - ad.text("<< Hide advanced settings"); | |
| 102 | - } | |
| 103 | -}); | |
| 104 | -</script> | |
| 109 | +<div class="taboola-container"> | |
| 110 | + <img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:200px;'/> | |
| 111 | + <hr> | |
| 105 | 112 | |
| 106 | -<script> | |
| 107 | -$(document).ready(function(){ | |
| 108 | - $("#show-advanced-settings").click(function() { | |
| 109 | - $("#homepage").slideToggle("fast"); | |
| 110 | - var ad = $('#show-advanced-settings'); | |
| 111 | - ad.text() == "Show advanced settings >>" ? ad.text("<< Hide advanced settings") : ad.text("Show advanced settings >>"); | |
| 112 | - }); | |
| 113 | -}); | |
| 114 | -</script> | |
| 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 !empty($settings->publisher_id) ? 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=' https://taboola.com/contact' target='_blank'>Contact Taboola</a> | |
| 129 | + </td> | |
| 130 | + </tr> | |
| 131 | + </table> | |
| 115 | 132 | |
| 116 | -<div class="publisher_welcome_massage"> | |
| 117 | - <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2> | |
| 118 | - <p class="first_p">For detailed instructions, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center.</a></p> | |
| 119 | - <p class="second_p"><b>Stuck? Need a hand?</b> Feel free to reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>.</p> | |
| 120 | - <div class="list_l1"> | |
| 121 | - <p>Usage of this plugin is subject to <b>Taboola's</b> <a href="https://www.taboola.com/policies/platform-terms-of-service" target='_blank'>terms of service.</a></p> | |
| 122 | - </div> | |
| 123 | - </div> | |
| 133 | + <hr style='margin-bottom: 25px; margin-top: 5px;'> | |
| 124 | 134 | |
| 125 | -<form method="POST"> | |
| 126 | -<?php | |
| 127 | - $my_nonce = wp_create_nonce( 'my_plugin_update_field_action' ); | |
| 128 | -?> | |
| 129 | -<input type="hidden" name="my_plugin_nonce" value="<?php echo esc_attr( $my_nonce ); ?>"/> | |
| 130 | -<input type="hidden" id="active_tab" name="active_tab" value="#tab1"/> | |
| 131 | - | |
| 132 | - | |
| 133 | -<div id="tab1" class="tab-content"> | |
| 134 | - <h2 class="general_h2">General Settings</h2> | |
| 135 | - | |
| 136 | - <div class="settings_block"> | |
| 137 | - <div class="style_box1"><label id="pub_id">Publisher ID :</label> | |
| 138 | - <div class="tooltip"> | |
| 139 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first"> | |
| 140 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 141 | - </g> | |
| 142 | - </svg> | |
| 143 | - <div>Your Publisher ID, as provided by Taboola.</div> | |
| 144 | - </div> | |
| 145 | - </div> | |
| 146 | - <div class="pub_id"> | |
| 147 | - <input id="publisher-id" type="text" name="publisher_id" placeholder="publisher" value="<?php echo !empty($settings->publisher_id) ? strip_tags($settings->publisher_id) : '' ?>"/> | |
| 148 | - </div> | |
| 149 | - <div class="statement"> | |
| 150 | - <label style="color: #000000; padding-"> | |
| 151 | - Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started. | |
| 152 | - </label> | |
| 153 | - </div> | |
| 154 | - </div> | |
| 155 | - | |
| 156 | - <h2 class="widget_h2">Taboola Units</h2> | |
| 157 | - <div id="below_article" class="settings_block widget_settings_block"> | |
| 158 | - <div class="switch_style"> | |
| 159 | - <label class="switch"> | |
| 160 | - <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" /> | |
| 161 | - <span class="slider round"></span> | |
| 162 | - </label> | |
| 163 | - <b style="font-size:15px;">Below-article</b> | |
| 164 | - </div> | |
| 165 | - <div class="label_below"> | |
| 166 | - <div class="mode_style"> | |
| 167 | - <label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label> | |
| 168 | - <div class="tooltip"> | |
| 169 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 170 | - <g fill="none" fill-rule="evenodd"> | |
| 171 | - <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 172 | - </g> | |
| 173 | - </svg> | |
| 174 | - <div>Your <i>below-article</i> Mode (Widget ID), as provided by Taboola. </div> | |
| 175 | - </div> | |
| 176 | - </div> | |
| 177 | - <div class="placement_style"> | |
| 178 | - <label id="first_bc_placement_label" style="float:left;">Placement Name:</label> | |
| 179 | - <div class='tooltip'> | |
| 180 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 181 | - <g fill="none" fill-rule="evenodd"> | |
| 182 | - <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 183 | - </g> | |
| 184 | - </svg> | |
| 185 | - <div>Your <i>below-article</i> Placement Name, as provided by Taboola. <br> | |
| 186 | - <br> When upgrading from v1, fill in 'below-article'. <br> | |
| 187 | - <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. | |
| 188 | - </div> | |
| 189 | - </div> | |
| 190 | - </div> | |
| 191 | - </div> | |
| 192 | - <div class="input_below"> | |
| 193 | - <div class="widget_below"> | |
| 194 | - <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" /> | |
| 195 | - </div> | |
| 196 | - <div class="placement_below"> | |
| 197 | - <input type="text" id="first_bc_placement" value="<?php echo !empty($settings->first_bc_placement) ? strip_tags($settings->first_bc_placement) : "" ?>" name="first_bc_placement" placeholder="Placement Name" /> | |
| 198 | - </div> | |
| 199 | - </div> | |
| 200 | - <br /> | |
| 201 | - <div class='location_section'> | |
| 202 | - <div class='checkbox_read'> | |
| 203 | - <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" /> | |
| 204 | - <label id="out_of_content_enabled_label">Place the feed/widget just after the article container (required for <b>Read More</b>)</label> | |
| 205 | - </div> | |
| 206 | - <div class='tooltip'> | |
| 207 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_read"> | |
| 208 | - <g fill="none" fill-rule="evenodd"> | |
| 209 | - <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> | |
| 210 | - </g> | |
| 211 | - </svg> | |
| 212 | - <div> | |
| 213 | - Required in order for Taboola to activate <i>Read More</i>.<br><br> | |
| 214 | - Read More buttons can boost audience engagement significantly, especially on mobile devices.<br><br> | |
| 215 | - For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements#below-article-widget" target='_blank'>Taboola Dev Center</a>.</div> | |
| 216 | - </div> | |
| 217 | - </div> | |
| 218 | - </div> | |
| 219 | - | |
| 220 | - <div id="mid_article" class="settings_block widget_settings_block"> | |
| 221 | - <div class="switch_style"> | |
| 222 | - <label class="switch"> | |
| 223 | - <input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/> | |
| 224 | - <span class="slider round"></span> | |
| 225 | - </label> | |
| 226 | - <b style="font-size:15px;">Mid-article</b> | |
| 135 | + <div class='checkbox'> | |
| 136 | + <input id="first_bc_enabled" type="checkbox" <?php echo !empty($settings->first_bc_enabled) ? "checked='checked'" : "" ?> name="first_bc_enabled"/> | |
| 137 | + Below Article | |
| 227 | 138 | </div> |
| 139 | + <table> | |
| 140 | + <tr> | |
| 141 | + <td>Widget ID</td> | |
| 142 | + <td> | |
| 143 | + <input type="text" value="<?php echo !empty($settings->first_bc_widget_id) ? htmlspecialchars($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> | |
| 228 | 150 | |
| 229 | - <div id="mid-article-widgets-container"> | |
| 230 | - <?php | |
| 231 | - $mid_widgets = !empty($settings->mid_widgets) ? json_decode($settings->mid_widgets) : array(); | |
| 232 | - if (empty($mid_widgets)) { | |
| 233 | - $mid_widgets = array(new stdClass()); | |
| 234 | - } | |
| 235 | - foreach ($mid_widgets as $index => $widget) { | |
| 236 | - ?> | |
| 237 | - <div class="mid-article-widget" style="border: 1px solid #ddd; padding: 10px; margin-top: 10px; border-radius: 5px;"> | |
| 238 | - <h4 style="font-size: 14px; font-weight: bold;">Mid-Article Widget #<?php echo $index + 1; ?></h4> | |
| 239 | - <div style="display: flex; flex-wrap: wrap;"> | |
| 240 | - <div style="flex: 1; min-width: 250px; padding-right: 10px;"> | |
| 241 | - <label>Mode (Widget ID):</label> | |
| 242 | - <input class="widefat" type="text" name="mid_widget_id[]" value="<?php echo esc_attr($widget->widget_id ?? ''); ?>" placeholder="thumbnails-mid1" /> | |
| 243 | - </div> | |
| 244 | - <div style="flex: 1; min-width: 250px;"> | |
| 245 | - <label>Placement Name:</label> | |
| 246 | - <input class="widefat" type="text" name="mid_placement[]" value="<?php echo esc_attr($widget->placement ?? ''); ?>" placeholder="Mid Article Thumbnails" /> | |
| 247 | - </div> | |
| 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> | |
| 151 | + </table> | |
| 152 | + <hr> | |
| 264 | 153 | |
| 265 | - <div style="display: flex; flex-wrap: wrap; margin-top: 10px;"> | |
| 266 | - <div style="flex: 1; min-width: 200px; padding-right: 10px;"> | |
| 267 | - <label>Position:</label> | |
| 268 | - <select class="widefat mid-widget-type-selector" name="mid_paragraph_ui_mode[]"> | |
| 269 | - <option value="Paragraph" <?php echo !isset($widget->location_string) || $widget->location_string === 'p' ? 'selected' : ''; ?>>Paragraph</option> | |
| 270 | - <option value="Other" <?php echo isset($widget->location_string) && $widget->location_string !== 'p' ? 'selected' : ''; ?>>Other (Custom)</option> | |
| 271 | - </select> | |
| 272 | - </div> | |
| 273 | - <div style="flex: 1; min-width: 150px; padding-right: 10px;" class="mid-css-selector-container"> | |
| 274 | - <label>CSS selector:</label> | |
| 275 | - <input class="widefat" type="text" name="mid_location_string[]" value="<?php echo esc_attr($widget->location_string ?? 'p'); ?>" /> | |
| 276 | - </div> | |
| 277 | - <div style="flex: 1; min-width: 150px;"> | |
| 278 | - <label>Paragraph/Element Number:</label> | |
| 279 | - <input class="widefat" type="number" name="mid_location_string_occurrence[]" value="<?php echo esc_attr($widget->occurrence ?? '1'); ?>" min="1" style="width:80px;"> | |
| 280 | - </div> | |
| 281 | - </div> | |
| 282 | - <button type="button" class="button remove-mid-widget" style="margin-top: 10px;">Remove Widget</button> | |
| 283 | - </div> | |
| 284 | - <?php } ?> | |
| 154 | + <div class='checkbox'> | |
| 155 | + <input id="second_bc_enabled" type="checkbox" <?php echo !empty($settings->second_bc_enabled) ? "checked='checked'" : "" ?> name="second_bc_enabled"/> | |
| 156 | + Below Article 2nd | |
| 285 | 157 | </div> |
| 286 | - <button type="button" id="add-mid-widget" class="button button-primary" style="margin-top: 15px;">+ Add Another Mid-Article Widget</button> | |
| 287 | - </div> | |
| 288 | - <div id="right-rail" class="settings_block widget_settings_block"> | |
| 289 | - <label id="right-rail-label"><b style="font-size:15px;margin-left: 10px;">Right-rail (sidebar)</b> </label> | |
| 290 | - <div style="font-size:14px;margin: 5px 10px 10px 10px;">You can insert a <b>Taboola</b> unit in your website <b>sidebar</b> (if your <b>WordPress</b> theme provides one):</div> | |
| 291 | 158 | |
| 292 | - <div id="rightrail-banner"> | |
| 293 | - 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> | |
| 294 | - 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> | |
| 295 | - 3. Drag the <b>Taboola</b> widget to the desired position in the sidebar (<i>right</i>).</br> | |
| 296 | - 4. Enter the <b>Widget ID (Mode)</b>, as provided by <b>Taboola</b>.</br> | |
| 297 | - 5. Click on <b>Update</b> (<i>top, right</i>) to save your changes.</br> | |
| 298 | - 6. Browse to your website and verify that the newly added unit displays correctly.</br> | |
| 299 | - <hr> | |
| 300 | - To <b>watch a demo</b> of the above steps, see our <a href="https://developers.taboola.com/web-integrations/docs/sidebar-widget" target="_blank">online docs</a>. | |
| 301 | - </div> | |
| 302 | - </div> | |
| 303 | -<div id="category_widget" class="settings_block widget_settings_block"> | |
| 304 | - <div class="switch_style"> | |
| 305 | - <label class="switch"> | |
| 306 | - <input id="category_enabled" | |
| 307 | - type="checkbox" | |
| 308 | - <?php echo !empty($settings->category_enabled) ? "checked='checked'" : "" ?> | |
| 309 | - onclick="setEnabledDisabled('#category_widget', this)" | |
| 310 | - name="category_enabled"/> | |
| 311 | - <span class="slider round"></span> | |
| 312 | - </label> | |
| 313 | - <b style="font-size:15px;float: left;">Category (Section Page)</b> | |
| 314 | - <div class='tooltip'> | |
| 315 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 316 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 317 | - </g> | |
| 318 | - </svg> | |
| 319 | - <div>Settings will be applied to all 'Category/Section' pages on your site.</div> | |
| 320 | - </div> | |
| 321 | - </div> | |
| 159 | + <table> | |
| 160 | + <tr> | |
| 161 | + <td>Widget ID</td> | |
| 162 | + <td> | |
| 163 | + <input type="text" value="<?php echo !empty($settings->second_bc_widget_id) ? 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> | |
| 322 | 170 | |
| 323 | - <div class="label_below"> | |
| 324 | - | |
| 325 | - <div class="mode_style"> | |
| 326 | - <label id="category_widget_id_label" style="float:left;">Mode (Widget ID):</label> | |
| 327 | - <div class='tooltip'> | |
| 328 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 329 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 330 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 331 | - </g> | |
| 332 | - </svg> | |
| 333 | - <div>Your <i>category</i> Mode (Widget ID), as provided by Taboola.</div> | |
| 334 | - </div> | |
| 335 | - </div> | |
| 336 | - | |
| 337 | - <div class="placement_style"><label id="category_placement_label" style="float:left;">Placement Name:</label> | |
| 338 | - <div class='tooltip'> | |
| 339 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 340 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 341 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 342 | - </g> | |
| 343 | - </svg> | |
| 344 | - <div>Your <i>category</i> Placement Name, as provided by Taboola.</div> | |
| 345 | - </div> | |
| 346 | - </div> | |
| 347 | - </div> | |
| 348 | - | |
| 171 | + </table> | |
| 172 | + <hr style='border-bottom: 1px solid #fafafa;'> | |
| 349 | 173 | |
| 350 | - <div class="input_below"> | |
| 351 | - <div class="widget_below"> | |
| 352 | - <input id="category_widget_id" type="text" | |
| 353 | - value="<?php echo !empty($settings->category_widget_id) ? strip_tags($settings->category_widget_id) : '' ?>" | |
| 354 | - name="category_widget_id" placeholder="Widget ID"/> | |
| 355 | - </div> | |
| 356 | - <div class="placement_below"> | |
| 357 | - <input id="category_placement" type="text" | |
| 358 | - value="<?php echo !empty($settings->category_placement) ? strip_tags($settings->category_placement) : '' ?>" | |
| 359 | - name="category_placement" placeholder="Placement Name"/> | |
| 360 | - </div> | |
| 361 | - </div> | |
| 174 | + <?php $location_defined = !empty($settings->location_string); ?> | |
| 362 | 175 | |
| 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 | 176 | |
| 379 | - <div class="home_occurrence"> | |
| 380 | - <div class="mode_style_home_selector"> | |
| 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 | - | |
| 396 | - </div> | |
| 397 | - <div class="placement_style_home_occurrence"> | |
| 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 | - | |
| 410 | - </div> | |
| 411 | - </div> | |
| 412 | - | |
| 413 | - <div class="home_placement"> | |
| 414 | - <div class="widget_below_home_selector"> | |
| 415 | - <input id="category_location_string" type="text" | |
| 416 | - value="<?php echo !empty($settings->category_location_string) ? strip_tags($settings->category_location_string) : '' ?>" | |
| 417 | - name="category_location_string" placeholder="e.g. #content"/> | |
| 418 | - </div> | |
| 419 | - <div class="placement_below_home_Occurrence"> | |
| 420 | - <input id="category_occurrence" type="number" min="1" | |
| 421 | - value="<?php echo !empty($settings->category_location_string_occurrence) ? $settings->category_location_string_occurrence : '1' ?>" | |
| 422 | - name="category_location_string_occurrence" | |
| 423 | - style="width:65px;"> | |
| 424 | - </div> | |
| 425 | - </div> | |
| 426 | -</div> | |
| 427 | -<div id="homepage" class="settings_block widget_settings_block"> | |
| 428 | - <div class="switch_style"> | |
| 429 | - <label class="switch"> | |
| 430 | - <input id="home_enabled" type="checkbox" <?php echo !empty($settings->home_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#homepage', this)" name="home_enabled"/> | |
| 431 | - <span class="slider round"></span> | |
| 432 | - </label> | |
| 433 | - <div> | |
| 434 | - <b style="font-size:15px;float: left;">Homepage (front page)</b> | |
| 435 | - <div class='tooltip'> | |
| 436 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 437 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 438 | - </g> | |
| 439 | - </svg> | |
| 440 | - <div>Settings will be applied to the page that you marked as your 'front page'.</div> | |
| 441 | - </div> | |
| 442 | - </div> | |
| 177 | + <div class='toggle_intercept checkbox'> | |
| 178 | + <?php if ($location_defined): ?> | |
| 179 | + <div class='toggle_icon toggle_icon_on'></div> | |
| 180 | + Advanced Settings | |
| 443 | 181 | </div> |
| 182 | + <table class='location_section'> | |
| 444 | 183 | |
| 445 | - <div> | |
| 446 | - <div class="mode_style_home"><label id="home_widget_id_label" style="float:left;">Mode (Widget ID):</label> | |
| 447 | - <div class='tooltip'> | |
| 448 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 449 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 450 | - </g> | |
| 451 | - </svg> | |
| 452 | - <div>Your <i>homepage</i> Mode (Widget ID), as provided by Taboola.</div> | |
| 453 | - </div> | |
| 184 | + <?php else: ?> | |
| 185 | + <div class='toggle_icon'></div> | |
| 186 | + Advanced Settings | |
| 454 | 187 | </div> |
| 455 | - <div class="placement_style_home"><label id="home_placement_label" style="float:left;">Placement Name:</label> | |
| 456 | - <div class='tooltip'> | |
| 457 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 458 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 459 | - </g> | |
| 460 | - </svg> | |
| 461 | - <div>Your <i>homepage</i> Placement Name, as provided by Taboola.</div> | |
| 462 | - </div> | |
| 463 | - </div> | |
| 464 | - </div> | |
| 465 | - <div> | |
| 466 | - <div class="widget_below_home"> | |
| 467 | - <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" /> | |
| 468 | - </div> | |
| 469 | - <div class="placement_below_home"> | |
| 470 | - <input id = "home_placement" type="text" value="<?php echo !empty($settings->home_placement) ? strip_tags($settings->home_placement) : "" ?>" name="home_placement" placeholder="Placement Name" /> | |
| 471 | - </div> | |
| 472 | - </div> | |
| 188 | + <table class='location_section' style='display:none'> | |
| 473 | 189 | |
| 474 | - <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label> | |
| 475 | - <div class='tooltip'> | |
| 476 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 477 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 478 | - </g> | |
| 479 | - </svg> | |
| 480 | - <div>The widget will be placed <i>just beneath</i> this element.<br><br> | |
| 481 | - To target an element, 2 pieces of information are needed:<br><br> | |
| 482 | - i) A CSS selector - e.g. <i>p</i> (for paragraph).<br> | |
| 483 | - ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br> | |
| 484 | - For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>. | |
| 485 | - </div> | |
| 486 | - </div> | |
| 487 | - </div> | |
| 190 | + <?php endif; ?> | |
| 488 | 191 | |
| 192 | + <tr> | |
| 193 | + <td>Location</td> | |
| 194 | + <td> | |
| 195 | + <input type="text" value="<?php echo !empty($settings->location_string) ? htmlspecialchars($settings->location_string) : '' ?>" name="location_string" placeholder="" /> | |
| 196 | + </td> | |
| 197 | + <td class='tooltip'> | |
| 198 | + <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/> | |
| 199 | + <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> | |
| 200 | + </td> | |
| 201 | + </tr> | |
| 202 | + <tr> | |
| 203 | + <td colspan="2"> <div class='checkbox'> | |
| 204 | + <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled"/> | |
| 205 | + Place widget after main content DOM element | |
| 206 | + </div></td> | |
| 207 | + <td class='tooltip'> | |
| 208 | + <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/> | |
| 209 | + <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> | |
| 210 | + </td> | |
| 489 | 211 | |
| 490 | - <div class="home_occurrence"> | |
| 491 | - <div class="mode_style_home_selector"><label id="home_location_string_label" style="float:left;">CSS selector :</label> | |
| 492 | - <div class='tooltip'> | |
| 493 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 494 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 495 | - </g> | |
| 496 | - </svg> | |
| 497 | - <div> | |
| 498 | - The element to target - e.g.:<br><br> | |
| 499 | - <i>section</i> - to target a <i>section</i>.<br> | |
| 500 | - <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br> | |
| 501 | - <i>.my-class</i> - to target a <i>class</i> of "my-class". | |
| 502 | - </div> | |
| 503 | - </div> | |
| 504 | - </div> | |
| 505 | - <div class="placement_style_home_occurrence"><label id="home_occurrence_label" style="float:left;">Occurrence :</label> | |
| 506 | - <div class='tooltip'> | |
| 507 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 508 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 509 | - </g> | |
| 510 | - </svg> | |
| 511 | - <div>For a <b>non-unique</b> selector - e.g. <i>section</i> - fill in the <b>occurrence</b> to target.<br><br> | |
| 512 | - E.g. To target the <b>2nd</b> section, fill in <i>2</i>. <br><br> | |
| 513 | - For a <b>unique</b> selector - e.g. <i>#my-id</i> - leave the default value of '1'.</div> | |
| 514 | - </div> | |
| 515 | - </div> | |
| 516 | - </div> | |
| 517 | - <div class="home_placement"> | |
| 518 | - <div class="widget_below_home_selector"> | |
| 519 | - <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> | |
| 520 | - </div> | |
| 521 | - <div class="placement_below_home_Occurrence"> | |
| 522 | - <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;"> | |
| 523 | - </div> | |
| 524 | - </div> | |
| 525 | -</div> | |
| 212 | + </tr> | |
| 526 | 213 | |
| 527 | -<div id="advanced-settings-main"> | |
| 528 | - <a id="show-advanced-settings">Show advanced settings >></a> | |
| 529 | - <div class="change_button"> | |
| 530 | - <input class='apply_button' type="submit" value="Apply Changes"/> | |
| 531 | - </div> | |
| 532 | -</div> | |
| 533 | - | |
| 534 | -</div> | |
| 535 | - | |
| 536 | -<div id="tab2" class="tab-content" style="display: none;"> | |
| 537 | -<h2 class="general_h2">General Setting</h2> | |
| 538 | -<div id="web_push" class="settings_block widget_settings_block"> | |
| 539 | - <div class="style_box1"><label id="pub_id">Web Push Account ID:</label> | |
| 540 | - <div class="tooltip"> | |
| 541 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first"> | |
| 542 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 543 | - </g> | |
| 544 | - </svg> | |
| 545 | - <div>Your SC web-push numeric account ID, as provided by Taboola.<br> | |
| 546 | - This integration is only for sponsored web-push <br> <br> | |
| 547 | - The header script and service worker will only be injected if the publisher already has the taboola widget running on their site. | |
| 548 | - </div> | |
| 549 | - </div> | |
| 550 | - <div class="switch_style_push"> | |
| 551 | - <label class="switch"> | |
| 552 | - <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" /> | |
| 553 | - <span class="slider round"></span> | |
| 554 | - </label> | |
| 555 | - </div> | |
| 556 | - </div> | |
| 557 | - <div class="web_push_id"> | |
| 558 | - <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" /> | |
| 559 | - </div> | |
| 560 | - <div class="statement"> | |
| 561 | - <label style="color: #000000; padding-"> | |
| 562 | - Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started. | |
| 563 | - </label> | |
| 564 | - </div> | |
| 565 | -</div> | |
| 566 | - | |
| 567 | - <div id="advanced-settings-main"> | |
| 568 | - <div class="change_button"> | |
| 569 | - <input class='apply_button' type="submit" value="Apply Changes"/> | |
| 570 | - </div> | |
| 571 | - </div> | |
| 572 | -</div> | |
| 573 | - | |
| 214 | + </table> | |
| 215 | + <input class='button-secondary apply_button' type="submit" value="Apply Changes ✔"/> | |
| 216 | + <!-- <a class='request_link' href=' https://taboola.com/contact' target='_blank'>Request Widget</a> --> | |
| 574 | 217 | </form> |
| 575 | 218 | <div style='clear:both'></div> |
| 576 | 219 | |
| 577 | 220 | <?php |
| @@ -579,102 +222,50 @@ | ||
| 579 | 222 | $userDetails = wp_get_current_user(); |
| 580 | 223 | $detailsString = $userDetails->first_name." ".$userDetails->last_name; |
| 581 | 224 | ?> |
| 582 | 225 | <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']}")?>"/> |
| 583 | -</div> | |
| 226 | + <!-- <form name="install_log" style="display:none;" method="post" action="http://logs-01.loggly.com/inputs/d14862f3-64ad-49ca-b28d-1b5d155414ec/tag/http/"> | |
| 227 | + <input name="tim" type="hidden" value="<?=date("H:i:s.000")?>"> | |
| 228 | + <input name="pub" type="hidden" value="<?=$logPublisher?>"> | |
| 229 | + <input name="data" type="hideen" value="WORDPRESS_PLUGIN_INSTALL|<?="//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}|{$detailsString}"?>"> | |
| 230 | + </form> --> | |
| 584 | 231 | |
| 585 | -<script> | |
| 586 | - setEnabledDisabled('#below_article', document.getElementById("first_bc_enabled")); | |
| 587 | - setEnabledDisabled('#mid_article', document.getElementById("mid_enabled")); | |
| 588 | - setEnabledDisabled('#homepage', document.getElementById("home_enabled")); | |
| 589 | - setEnabledDisabled('#web_push', document.getElementById("web_push_enabled")); | |
| 590 | - setEnabledDisabled('#category_widget',document.getElementById('category_enabled')); | |
| 591 | -</script> | |
| 232 | + <?php | |
| 233 | + if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){ | |
| 234 | + echo "<span class='label-success'>Your changes have been made! You can now see them on your site</span>"; | |
| 235 | + } | |
| 592 | 236 | |
| 237 | + if(count($taboola_errors) > 0){ | |
| 238 | + for($i = 0; $i < count($taboola_errors); $i++){ | |
| 239 | + echo "<span class='label-error'>".$taboola_errors[$i]."</span>"; | |
| 240 | + } | |
| 241 | + } | |
| 242 | + ?> | |
| 243 | +</div> | |
| 593 | 244 | <script> |
| 594 | -jQuery(document).ready(function($) { | |
| 595 | - let widgetCounter = $('#mid-article-widgets-container .mid-article-widget').length; | |
| 596 | - | |
| 597 | - // Function to set the initial correct view for widgets | |
| 598 | - function initializeWidgetView() { | |
| 599 | - $('#mid-article-widgets-container .mid-widget-type-selector').each(function() { | |
| 600 | - var container = $(this).closest('.mid-article-widget'); | |
| 601 | - var selectorInputContainer = container.find('.mid-css-selector-container'); | |
| 602 | - | |
| 603 | - if ($(this).val() === 'Paragraph') { | |
| 604 | - selectorInputContainer.hide(); | |
| 605 | - } else { | |
| 606 | - selectorInputContainer.show(); | |
| 607 | - } | |
| 608 | - }); | |
| 245 | + function sync_checkboxes(){ | |
| 246 | + if(jQuery('#first_bc_enabled').attr("checked")){ | |
| 247 | + jQuery('#second_bc_enabled').attr('disabled',false) | |
| 248 | + } else { | |
| 249 | + jQuery('#second_bc_enabled').attr('checked', false); | |
| 250 | + jQuery('#second_bc_enabled').attr('disabled',true) | |
| 251 | + } | |
| 609 | 252 | } |
| 253 | + jQuery('#first_bc_enabled').change(sync_checkboxes); | |
| 254 | + setTimeout(function(){jQuery('.label-success').fadeOut()}, 6000); | |
| 255 | + setTimeout(function(){jQuery('.label-error').fadeOut()}, 6000); | |
| 256 | + sync_checkboxes() | |
| 610 | 257 | |
| 611 | - // Call the function on page load to fix the initial view | |
| 612 | - initializeWidgetView(); | |
| 613 | - | |
| 614 | - // Add a new mid-article widget section | |
| 615 | - $('#add-mid-widget').on('click', function() { | |
| 616 | - widgetCounter++; | |
| 617 | - var widgetHtml = ` | |
| 618 | - <div class="mid-article-widget" style="border: 1px solid #ddd; padding: 10px; margin-top: 10px; border-radius: 5px;"> | |
| 619 | - <h4 style="font-size: 14px; font-weight: bold;">Mid-Article Widget #${widgetCounter}</h4> | |
| 620 | - <div style="display: flex; flex-wrap: wrap;"> | |
| 621 | - <div style="flex: 1; min-width: 250px; padding-right: 10px;"> | |
| 622 | - <label>Mode (Widget ID):</label> | |
| 623 | - <input class="widefat" type="text" name="mid_widget_id[]" placeholder="thumbnails-mid1" /> | |
| 624 | - </div> | |
| 625 | - <div style="flex: 1; min-width: 250px;"> | |
| 626 | - <label>Placement Name:</label> | |
| 627 | - <input class="widefat" type="text" name="mid_placement[]" placeholder="Mid Article Thumbnails" /> | |
| 628 | - </div> | |
| 629 | - </div> | |
| 630 | - <div style="display: flex; flex-wrap: wrap; margin-top: 10px;"> | |
| 631 | - <div style="flex: 1; min-width: 200px; padding-right: 10px;"> | |
| 632 | - <label>Position below:</label> | |
| 633 | - <select class="widefat mid-widget-type-selector" name="mid_paragraph_ui_mode[]"> | |
| 634 | - <option value="Paragraph" selected>Paragraph</option> | |
| 635 | - <option value="Other">Other (Custom)</option> | |
| 636 | - </select> | |
| 637 | - </div> | |
| 638 | - <div style="flex: 1; min-width: 150px; padding-right: 10px; display:none;" class="mid-css-selector-container"> | |
| 639 | - <label>CSS selector:</label> | |
| 640 | - <input class="widefat" type="text" name="mid_location_string[]" value="p" /> | |
| 641 | - </div> | |
| 642 | - <div style="flex: 1; min-width: 150px;"> | |
| 643 | - <label>Paragraph/Element Number:</label> | |
| 644 | - <input class="widefat" type="number" name="mid_location_string_occurrence[]" value="1" min="1" style="width:80px;"> | |
| 645 | - </div> | |
| 646 | - </div> | |
| 647 | - <button type="button" class="button remove-mid-widget" style="margin-top: 10px;">Remove Widget</button> | |
| 648 | - </div>`; | |
| 649 | - $('#mid-article-widgets-container').append(widgetHtml); | |
| 258 | + jQuery('.toggle_intercept').click(function(){ | |
| 259 | + if (jQuery('.location_section').fadeToggle != undefined){ | |
| 260 | + jQuery('.location_section').fadeToggle('fast'); | |
| 261 | + }else{ | |
| 262 | + jQuery('.location_section').toggle(); | |
| 263 | + } | |
| 264 | + jQuery('.toggle_icon').toggleClass('toggle_icon_on'); | |
| 650 | 265 | }); |
| 651 | 266 | |
| 652 | - // Remove a mid-article widget section | |
| 653 | - $('#mid-article-widgets-container').on('click', '.remove-mid-widget', function() { | |
| 654 | - $(this).closest('.mid-article-widget').remove(); | |
| 655 | - $('#mid-article-widgets-container .mid-article-widget').each(function(index) { | |
| 656 | - $(this).find('h4').text(`Mid-Article Widget #${index + 1}`); | |
| 657 | - }); | |
| 658 | - widgetCounter = $('#mid-article-widgets-container .mid-article-widget').length; | |
| 659 | - }); | |
| 267 | + window.onload = function(){ | |
| 268 | + document.forms['install_log'].submit() | |
| 660 | 269 | |
| 661 | - // Handle the show/hide for the CSS selector field on change | |
| 662 | - $('#mid-article-widgets-container').on('change', '.mid-widget-type-selector', function() { | |
| 663 | - var container = $(this).closest('.mid-article-widget'); | |
| 664 | - var selectorInputContainer = container.find('.mid-css-selector-container'); | |
| 665 | - var selectorInput = selectorInputContainer.find('input'); | |
| 666 | - | |
| 667 | - if ($(this).val() === 'Paragraph') { | |
| 668 | - selectorInputContainer.hide(); | |
| 669 | - selectorInput.val('p'); | |
| 670 | - } else { | |
| 671 | - selectorInputContainer.show(); | |
| 672 | - } | |
| 673 | - }); | |
| 674 | -}); | |
| 270 | + } | |
| 675 | 271 | </script> |
| 676 | - | |
| 677 | -<script> | |
| 678 | - setTimeout(function(){jQuery('.label-success').fadeOut()}, 5000); | |
| 679 | - setTimeout(function(){jQuery('.label-error').fadeOut()}, 8000); | |
| 680 | -</script> | |
