| @@ -1,834 +1,220 @@ | ||
| 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 | - | |
| 8 | 1 | <style> |
| 9 | - | |
| 10 | 2 | .taboola-container { |
| 11 | 3 | padding: 20px; |
| 12 | 4 | padding-left: 0; |
| 5 | + width: 400px; | |
| 13 | 6 | font-size: 14px; |
| 14 | - background-color: #FAF9F6; | |
| 15 | - font-family: Roboto,Lato,Hind -apple-system,Helvetica Neue,sans-serif; | |
| 16 | 7 | } |
| 17 | - | |
| 18 | - .settings_block { | |
| 19 | - background-color: #fff; | |
| 20 | - border: 1px solid #d4d9df; | |
| 21 | - border-radius: 8px; | |
| 22 | - margin-top: 10px; | |
| 23 | - width: 50%; | |
| 8 | + table { | |
| 9 | + width: 380px; | |
| 10 | + margin-left: 20px; | |
| 24 | 11 | } |
| 25 | - | |
| 26 | - .settings_block.widget_settings_block { /* Give the widget settings block some extra space at the end */ | |
| 27 | - padding-bottom: 15px; | |
| 12 | + table td img { | |
| 13 | + position: relative; | |
| 14 | + top: 3px; | |
| 15 | + margin-left: 5px; | |
| 28 | 16 | } |
| 29 | - | |
| 30 | - .settings_block input { | |
| 31 | - border-color: #ccc; /* Most of the inputs are styled via jQuery. This is for any others - e.g. #publisher-id */ | |
| 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; | |
| 32 | 26 | } |
| 33 | - | |
| 34 | - .publisher_welcome_massage{ | |
| 35 | - float: right; | |
| 36 | - width: 36%; | |
| 37 | - padding: 20px 10px 10px 0px; | |
| 38 | - margin: 40px 6% 0 0; | |
| 39 | - background: #FFFACD; | |
| 40 | - border: 1px solid #d4d9df; | |
| 41 | - border-radius: 20px; | |
| 27 | + table input { | |
| 28 | + width: 100%; | |
| 42 | 29 | } |
| 43 | - | |
| 44 | - .switch_style{ | |
| 45 | - margin : 10px 10px 20px 10px; | |
| 30 | + input[type='text'] { | |
| 31 | + border-radius: 3px; | |
| 46 | 32 | } |
| 47 | - | |
| 48 | - .style_box1, .pub_id{ | |
| 49 | - padding: 10px 10px 0px 20px; | |
| 33 | + hr { | |
| 34 | + margin-top: 15px; | |
| 35 | + margin-bottom: 15px; | |
| 36 | + border-bottom: none; | |
| 50 | 37 | } |
| 38 | + input[type='checkbox'] { | |
| 51 | 39 | |
| 52 | - .statement{ | |
| 53 | - padding: 10px 10px 10px 20px; | |
| 54 | 40 | } |
| 55 | - | |
| 56 | - .widget_below, .widget_below_mid, .widget_below_mid_selector, .widget_below_home, .widget_below_home_selector{ | |
| 57 | - width: 50%; | |
| 58 | - float: left; | |
| 59 | - padding: 5px 0px 0px 20px; | |
| 60 | - } | |
| 61 | - | |
| 62 | - .mode_style, .mode_style_mid, .mode_style_home, .mode_style_home_selector{ | |
| 63 | - width: 50%; | |
| 64 | - padding: 0px 0px 3px 20px; | |
| 65 | - float:left; | |
| 66 | - } | |
| 67 | - | |
| 68 | - .placement_style, .placement_style_mid, .placement_style_home_occurrence,.placement_style_home { | |
| 69 | - padding: 0px 0px 8px 0px; | |
| 70 | - width: 50%; | |
| 41 | + input[type='submit']{ | |
| 71 | 42 | float: right; |
| 72 | 43 | } |
| 73 | - | |
| 74 | - .widget_below_mid_selector{ | |
| 75 | - padding: 8px 0px 0px 0px; | |
| 44 | + .checkbox { | |
| 45 | + margin-bottom: 10px; | |
| 76 | 46 | } |
| 77 | - | |
| 78 | - .placement_below_mid_occurrence,.mode_style_mid_selector { | |
| 79 | - padding: 0px 0px 8px 20px; | |
| 80 | - } | |
| 81 | - | |
| 82 | - .heading_mid_home{ | |
| 83 | - padding: 20px 0px 8px 20px; | |
| 84 | - } | |
| 85 | - | |
| 86 | - #mid_occurrence_div, #mid_css_selector_div { | |
| 87 | - width: 50%; | |
| 88 | - float: left; | |
| 89 | - margin: 19px 0px 0px 0px; | |
| 90 | - } | |
| 91 | - | |
| 92 | - /* slider button CSS */ | |
| 93 | - | |
| 94 | - .switch { | |
| 95 | - position: relative; | |
| 96 | - display: inline-block; | |
| 97 | - width: 45px; | |
| 98 | - height: 20px; | |
| 99 | - float: right; | |
| 100 | - } | |
| 101 | - | |
| 102 | - .switch input { | |
| 103 | - opacity: 0; | |
| 104 | - width: 0; | |
| 105 | - height: 0; | |
| 106 | - } | |
| 107 | - | |
| 108 | - .slider { | |
| 109 | - position: absolute; | |
| 110 | - cursor: pointer; | |
| 111 | - top: 0; | |
| 112 | - left: 0; | |
| 113 | - right: -1px; | |
| 114 | - bottom: 0; | |
| 115 | - background-color: #ccc; | |
| 116 | - -webkit-transition: .4s; | |
| 117 | - transition: .4s; | |
| 118 | - } | |
| 119 | - | |
| 120 | - .slider:before { | |
| 121 | - position: absolute; | |
| 122 | - content: ""; | |
| 123 | - height: 18px; | |
| 124 | - width: 18px; | |
| 125 | - left: 1px; | |
| 126 | - bottom: 1px; | |
| 127 | - background-color: white; | |
| 128 | - -webkit-transition: .4s; | |
| 129 | - transition: .4s; | |
| 130 | - } | |
| 131 | - | |
| 132 | - input:checked + .slider { | |
| 133 | - background-color: #0f4c81; | |
| 134 | - } | |
| 135 | - | |
| 136 | - input:focus + .slider { | |
| 137 | - box-shadow: 0 0 1px #0f4c81; | |
| 138 | - } | |
| 139 | - | |
| 140 | - input:checked + .slider:before { | |
| 141 | - -webkit-transform: translateX(26px); | |
| 142 | - -ms-transform: translateX(26px); | |
| 143 | - transform: translateX(26px); | |
| 144 | - } | |
| 145 | - | |
| 146 | - /* Rounded sliders */ | |
| 147 | - | |
| 148 | - .slider.round { | |
| 149 | - border-radius: 34px; | |
| 150 | - } | |
| 151 | - | |
| 152 | - .slider.round:before { | |
| 153 | - border-radius: 50%; | |
| 154 | - } | |
| 155 | - | |
| 156 | - /* slider button CSS */ | |
| 157 | - | |
| 158 | 47 | .request_link { |
| 159 | 48 | float: right; |
| 160 | 49 | margin-right: 10px; |
| 161 | 50 | line-height: 26px; |
| 162 | 51 | } |
| 163 | - | |
| 164 | -/* hide and position tooltip */ | |
| 165 | - | |
| 166 | - .tooltip div{ | |
| 167 | - visibility: hidden; | |
| 168 | - width: auto; | |
| 169 | - display: inline-block; | |
| 170 | - background: #0f4c81; | |
| 171 | - color: #ffffff; | |
| 172 | - font-weight: normal; | |
| 173 | - font-size: 12px; | |
| 174 | - border-radius: 6px; | |
| 175 | - padding: 5px; | |
| 176 | - margin-left: 5px; | |
| 177 | - max-width: 350px; | |
| 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; | |
| 178 | 62 | position: absolute; |
| 179 | - z-index: 999; | |
| 180 | - transition-delay: 0.25s; | |
| 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; | |
| 181 | 72 | } |
| 182 | - | |
| 183 | - .tooltip div a:hover{ | |
| 184 | - text-decoration: underline; | |
| 73 | + table .tooltip:hover div { /* display tooltip on hover */ | |
| 74 | + opacity:1; | |
| 185 | 75 | } |
| 186 | - | |
| 187 | - .tooltip{ | |
| 188 | - opacity: 1 !important; | |
| 189 | - font-size: 13px !important; | |
| 190 | - display: contents !important; | |
| 191 | - } | |
| 192 | - | |
| 193 | - .tooltip:hover div{ | |
| 194 | - visibility: visible; | |
| 195 | - transition-delay: 0.5s; | |
| 196 | - } | |
| 197 | - | |
| 198 | - .tooltip div a{ | |
| 199 | - text-decoration: none; | |
| 200 | - font-weight: bold; | |
| 201 | - color: #fff; | |
| 202 | - } | |
| 203 | - | |
| 204 | 76 | .label-success { |
| 205 | - background: #a4fba6 !important; | |
| 206 | - border: 1px solid #d2f2d4; | |
| 207 | - border-radius: 10px; | |
| 208 | - padding: 10px 30px 20px 10px; | |
| 209 | - font-size: 14px; | |
| 77 | + font-size: 17px; | |
| 210 | 78 | display: block; |
| 211 | 79 | margin-top: 10px; |
| 212 | 80 | color: green; |
| 213 | - width: 50%; | |
| 214 | 81 | } |
| 215 | 82 | .label-error { |
| 216 | - background: #ffbaba; | |
| 217 | - border: 1px solid #ffbaba; | |
| 218 | - border-radius: 10px; | |
| 219 | - padding: 10px 30px 20px 10px; | |
| 220 | - font-size: 14px; | |
| 83 | + font-size: 17px; | |
| 221 | 84 | display: block; |
| 222 | 85 | margin-top: 10px; |
| 223 | 86 | color: red; |
| 224 | - width: 50%; | |
| 225 | 87 | } |
| 226 | 88 | |
| 227 | - .label-error ul { | |
| 228 | - list-style-position: inside; | |
| 229 | - list-style-type: disc; | |
| 230 | - text-indent: 2em; | |
| 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; | |
| 231 | 96 | } |
| 232 | 97 | |
| 233 | - .label-error p { | |
| 234 | - font-size: 14px; | |
| 98 | + .toggle_icon_on{ | |
| 99 | + -ms-transform: rotate(90deg); /* IE 9 */ | |
| 100 | + -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ | |
| 101 | + transform: rotate(90deg); | |
| 235 | 102 | } |
| 236 | - | |
| 237 | - .change_button{ | |
| 238 | - float: right; | |
| 239 | - } | |
| 240 | - | |
| 241 | 103 | .apply_button{ |
| 242 | - /* margin-top: 20px; */ | |
| 243 | - background-color: #0f4c81; | |
| 244 | - color: #fff; | |
| 245 | - padding: 0.8rem 1rem; | |
| 246 | - border-radius: 7px; | |
| 247 | - border: transparent; | |
| 248 | - float: right; | |
| 104 | + margin-top: 20px !important; | |
| 249 | 105 | } |
| 250 | 106 | |
| 251 | - .apply_button:hover { | |
| 252 | - background-color: #1261A0; | |
| 253 | - cursor: pointer; | |
| 254 | - } | |
| 255 | - | |
| 256 | - .helpTooltip__icon___1XWGN, | |
| 257 | - .helpTooltip__icon___1XWGN_read{ | |
| 258 | - color: #b8c1ca; | |
| 259 | - width: 1em; | |
| 260 | - height: 1em; | |
| 261 | - margin: 4px; | |
| 262 | - } | |
| 263 | - | |
| 264 | - .helpTooltip__icon___1XWGN_read{ | |
| 265 | - margin-top: 4px; | |
| 266 | - } | |
| 267 | - | |
| 268 | - .helpTooltip__icon___1XWGN_first{ | |
| 269 | - color: #b8c1ca; | |
| 270 | - width: 1em; | |
| 271 | - height: 1em; | |
| 272 | - } | |
| 273 | - | |
| 274 | - .checkbox_read{ | |
| 275 | - padding: 0px 0px 5px 20px; | |
| 276 | - float: left; | |
| 277 | - } | |
| 278 | - | |
| 279 | - label:hover{ | |
| 280 | - cursor: default; | |
| 281 | - } | |
| 282 | - | |
| 283 | - ::placeholder{ | |
| 284 | - color: #DEDEDE; | |
| 285 | - } | |
| 286 | - | |
| 287 | - .widget_h2,.general_h2{ | |
| 288 | - font-size: 18px; | |
| 289 | - font-weight: 500; | |
| 290 | - } | |
| 291 | - | |
| 292 | - .list_l1{ | |
| 293 | - border-top: 1px solid #DEDEDE; | |
| 294 | - margin: 30px 20px 0px 0px; | |
| 295 | - margin-left: 14%; | |
| 296 | - } | |
| 297 | - | |
| 298 | - .theme_image{ | |
| 299 | - width: 50%; | |
| 300 | - } | |
| 301 | - | |
| 302 | - .welcome_heading{ | |
| 303 | - margin-left: 8%; | |
| 304 | - font-size: 1.5em; | |
| 305 | - } | |
| 306 | - | |
| 307 | - .first_p, | |
| 308 | - .second_p{ | |
| 309 | - margin-left: 14%; | |
| 310 | - font-size: 14px; | |
| 311 | - } | |
| 312 | - | |
| 313 | - .list_l1 p{ | |
| 314 | - font-size: 13px; | |
| 315 | - } | |
| 316 | - | |
| 317 | - input#publisher-id, | |
| 318 | - input#first_bc_placement, | |
| 319 | - input#mid_placement, | |
| 320 | - input#home_placement{ | |
| 321 | - width: 36%; | |
| 322 | - } | |
| 323 | - | |
| 324 | - input#first_bc_widget_id, | |
| 325 | - input#mid_widget_id, | |
| 326 | - input#mid_location_string, | |
| 327 | - input#home_widget_id, | |
| 328 | - input#home_location_string{ | |
| 329 | - width: 77%; | |
| 330 | - } | |
| 331 | - | |
| 332 | - label{ | |
| 333 | - font-weight: normal !important; | |
| 334 | - } | |
| 335 | - | |
| 336 | - label#pub_id{ | |
| 337 | - color: #000000; | |
| 338 | - } | |
| 339 | - | |
| 340 | - input#out_of_content_enabled { | |
| 341 | - height: 16px; | |
| 342 | - width: 16px; | |
| 343 | - } | |
| 344 | - | |
| 345 | - input[type=checkbox]:checked::before { | |
| 346 | - width: 1.8rem !important; | |
| 347 | - } | |
| 348 | - | |
| 349 | - input[type=checkbox]:focus { | |
| 350 | - outline: none !important; | |
| 351 | - outline-offset: 0px !important; | |
| 352 | - } | |
| 353 | - | |
| 354 | - input[type=checkbox]{ | |
| 355 | - margin: -5px 0 0; | |
| 356 | - } | |
| 357 | - | |
| 358 | - #homepage{ | |
| 359 | - display: none; | |
| 360 | - } | |
| 361 | - | |
| 362 | - #show-advanced-settings{ | |
| 363 | - text-decoration: none; | |
| 364 | - color: #666666; | |
| 365 | - margin-top: 5px; | |
| 366 | - cursor: pointer; | |
| 367 | - float: left; | |
| 368 | - width: 50%; | |
| 369 | - font-family: Roboto, Lato, "Hind -apple-system", "Helvetica Neue", sans-serif; | |
| 370 | - font-style: italic; | |
| 371 | - } | |
| 372 | - | |
| 373 | - #advanced-settings-main{ | |
| 374 | - margin: 10px 0px 0px 10px; | |
| 375 | - width: 49%; | |
| 376 | - } | |
| 377 | - | |
| 378 | - div#mid_article { | |
| 379 | - padding-bottom: 100px; | |
| 380 | - } | |
| 381 | - | |
| 382 | - #mid_css_selector_div{ | |
| 383 | - display: none; | |
| 384 | - } | |
| 385 | - | |
| 386 | - input.highlight { | |
| 387 | - border: 1px solid orange !important; | |
| 388 | - } | |
| 389 | - | |
| 390 | 107 | </style> |
| 391 | 108 | |
| 392 | -<?php | |
| 393 | - | |
| 394 | -// $short_version =strlen(TABOOLA_PLUGIN_VERSION) == 5 ? substr(TABOOLA_PLUGIN_VERSION,0,3) : ""; // E.g. '2.1.0' => '2.1' (else '') | |
| 395 | - | |
| 396 | -?> | |
| 397 | - | |
| 398 | - <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| 399 | - <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> --> | |
| 400 | - | |
| 401 | - | |
| 402 | 109 | <div class="taboola-container"> |
| 403 | - <div class="theme_image"> | |
| 404 | - <img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:150px;'/> | |
| 405 | - </div> | |
| 110 | + <img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:200px;'/> | |
| 111 | + <hr> | |
| 406 | 112 | |
| 407 | - <h2 style="font-size:1.7em;">Taboola WordPress Plugin 2</h2> | |
| 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> | |
| 408 | 132 | |
| 409 | -<!-- errors/success message --> | |
| 133 | + <hr style='margin-bottom: 25px; margin-top: 5px;'> | |
| 410 | 134 | |
| 411 | - <?php | |
| 412 | - if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){ | |
| 413 | - echo "<div class='label-success'>"; | |
| 414 | - echo "<h3 style='color:green;'>Changes applied!</h3>"; | |
| 415 | - echo "<span>Verify the new changes by browsing to your site.</span>"; | |
| 416 | - echo "</div>"; | |
| 417 | - } | |
| 418 | - | |
| 419 | - if(count($taboola_errors) > 0){ | |
| 420 | - echo "<div class='label-error'>"; | |
| 421 | - echo "<h3 style='color:red;'>Missing or incorrect values</h3>"; | |
| 422 | - echo "<p>The following fields contained missing or incorrect values:</p>"; | |
| 423 | - echo "<ul>"; | |
| 424 | - for($i = 0; $i < count($taboola_errors); $i++){ | |
| 425 | - echo "<li>".$taboola_errors[$i]."</li>"; | |
| 426 | - } | |
| 427 | - echo "</ul>"; | |
| 428 | - echo "<p><b>All values</b> have been reverted to the last successful save.</p>"; | |
| 429 | - echo "</div>"; | |
| 430 | - } | |
| 431 | - | |
| 432 | - ?> | |
| 433 | - | |
| 434 | -<script> | |
| 435 | - function setEnabledDisabled(divID, chkToggle) { | |
| 436 | - /* | |
| 437 | - JS function for form. | |
| 438 | - Enables/disables fields for the given section ('divID'), depending on whether 'chkToggle' is checked. | |
| 439 | - */ | |
| 440 | - | |
| 441 | - var applyColor = (chkToggle.checked ? "#000" : "#666"); | |
| 442 | - | |
| 443 | - // Set all labels in that section ('divID') to the relevant color. | |
| 444 | - $(divID).find("label").css("color", applyColor); | |
| 445 | - | |
| 446 | - // Disable (/enable) all input fields in that section ('divID'), except for 'chkToggle'. | |
| 447 | - // Once done, apply a gray border color. | |
| 448 | - $(divID).find("input").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc"); | |
| 449 | - $(divID).find("select").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc"); | |
| 450 | - | |
| 451 | - } | |
| 452 | -</script> | |
| 453 | - | |
| 454 | -<script> | |
| 455 | -$(document).ready(function(){ | |
| 456 | - // On page load: | |
| 457 | - if ($('#mid_paragraph_ui_mode').val() == 'Other') { | |
| 458 | - $("#mid_css_selector_div").show(); | |
| 459 | - } | |
| 460 | - | |
| 461 | - if ($('#home_enabled').prop("checked") === true) { | |
| 462 | - $("#homepage").show(); | |
| 463 | - var ad = $('#show-advanced-settings'); | |
| 464 | - ad.text("<< Hide advanced settings"); | |
| 465 | - } | |
| 466 | -}); | |
| 467 | -</script> | |
| 468 | - | |
| 469 | -<script> | |
| 470 | -$(document).ready(function(){ | |
| 471 | - // On clicking 'Advanced settings' | |
| 472 | - $("#show-advanced-settings").click(function() { | |
| 473 | - $("#homepage").slideToggle("fast"); | |
| 474 | - var ad = $('#show-advanced-settings'); | |
| 475 | - ad.text() == "Show advanced settings >>" ? ad.text("<< Hide advanced settings") : ad.text("Show advanced settings >>"); | |
| 476 | - }); | |
| 477 | -}); | |
| 478 | -</script> | |
| 479 | - | |
| 480 | - | |
| 481 | -<script> | |
| 482 | -$(document).ready(function(){ | |
| 483 | - | |
| 484 | - // On selecting an item in the dropdown: | |
| 485 | - $('#mid_paragraph_ui_mode').on('change', function(e){ | |
| 486 | - e.preventDefault(); | |
| 487 | - if ( this.value == 'Other') | |
| 488 | - { | |
| 489 | - $("#mid_css_selector_div").show(); | |
| 490 | - | |
| 491 | - // Highlight relevant fields: | |
| 492 | - $("#mid_location_string, #mid_occurrence").addClass('highlight'); | |
| 493 | - setTimeout(() => $("#mid_occurrence, #mid_location_string").removeClass('highlight'), 1500); | |
| 494 | - | |
| 495 | - } | |
| 496 | - else | |
| 497 | - { | |
| 498 | - $("#mid_location_string").val("p"); // Set it back to the default value of 'p' | |
| 499 | - $("#mid_css_selector_div").hide(); | |
| 500 | - | |
| 501 | - // Highlight the 'occurrence' field: | |
| 502 | - $("#mid_occurrence").addClass('highlight'); | |
| 503 | - setTimeout(() => $("#mid_occurrence").removeClass('highlight'), 1000); | |
| 504 | - } | |
| 505 | - }); | |
| 506 | - | |
| 507 | -}); | |
| 508 | -</script> | |
| 509 | - | |
| 510 | - | |
| 511 | - | |
| 512 | -<!-- Welcome Massage --> | |
| 513 | - | |
| 514 | - <div class="publisher_welcome_massage"> | |
| 515 | - <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin 2!</h2> | |
| 516 | - <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> | |
| 517 | - <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> | |
| 518 | - <div class="list_l1"> | |
| 519 | - <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> | |
| 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 | |
| 520 | 138 | </div> |
| 521 | - </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> | |
| 522 | 150 | |
| 523 | -<!-- Welcome Massage--> | |
| 151 | + </table> | |
| 152 | + <hr> | |
| 524 | 153 | |
| 525 | - <form method="POST"> | |
| 526 | - <h2 class="general_h2">General Settings</h2> | |
| 527 | - | |
| 528 | - <div class="settings_block"> | |
| 529 | - <div class="style_box1"><label id="pub_id">Publisher ID :</label> | |
| 530 | - <div class="tooltip"> | |
| 531 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 532 | - <!-- <img class="helpTooltip__icon___1XWGN" src='<?php echo $this->plugin_url.'img/tooltip_image.svg' ?>'/> --> | |
| 533 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first"> | |
| 534 | - <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path> | |
| 535 | - </g> | |
| 536 | - </svg> | |
| 537 | - <!-- <div id="arrow" ></div> --> | |
| 538 | - <div>Your Publisher ID, as provided by Taboola.</div> | |
| 539 | - </div> | |
| 540 | - </div> | |
| 541 | - <div class="pub_id"> | |
| 542 | - <input id="publisher-id" type="text" name="publisher_id" placeholder="publisher" value="<?php echo !empty($settings->publisher_id) ? htmlspecialchars($settings->publisher_id) : '' ?>"/> | |
| 543 | - </div> | |
| 544 | - <div class="statement"> | |
| 545 | - <label style="color: #000000;">Don't have an account with taboola?</label> | |
| 546 | - <a style='float: inherit;' class='request_link' href='http://taboola.com/contact' target='_blank'>Contact us</a> | |
| 547 | - <label style="margin-left: -9px; color: #000000;">to get started.</label> | |
| 548 | - </div> | |
| 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 | |
| 549 | 157 | </div> |
| 550 | 158 | |
| 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> | |
| 551 | 170 | |
| 552 | -<!-- Below Article Widget --> | |
| 553 | - <h2 class="widget_h2">Taboola Units</h2> | |
| 554 | - <div id="below_article" class="settings_block widget_settings_block"> | |
| 555 | - <div class="switch_style"> | |
| 556 | - <label class="switch"> | |
| 557 | - <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" /> | |
| 558 | - <span class="slider round"></span> | |
| 559 | - </label> | |
| 560 | - <b style="font-size:15px;">Below-article</b> | |
| 561 | - </div> | |
| 562 | - <div class="label_below"> | |
| 563 | - <div class="mode_style"> | |
| 564 | - <label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label> | |
| 565 | - <div class="tooltip"> | |
| 566 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 567 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 568 | - <g fill="none" fill-rule="evenodd"> | |
| 569 | - <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> | |
| 570 | - </g> | |
| 571 | - </svg> | |
| 572 | - <div>Your <i>below-article</i> Mode (Widget ID), as provided by Taboola. </div> | |
| 573 | - </div> | |
| 574 | - </div> | |
| 575 | - <div class="placement_style"> | |
| 576 | - <label id="first_bc_placement_label" style="float:left;">Placement Name:</label> | |
| 577 | - <div class='tooltip'> | |
| 578 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 579 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 580 | - <g fill="none" fill-rule="evenodd"> | |
| 581 | - <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> | |
| 582 | - </g> | |
| 583 | - </svg> | |
| 584 | - <div>Your <i>below-article</i> Placement Name, as provided by Taboola. <br> | |
| 585 | - <br> When upgrading from v1, fill in 'below-article'. <br> | |
| 586 | - <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. | |
| 587 | - </div> | |
| 588 | - </div> | |
| 589 | - </div> | |
| 590 | - </div> | |
| 591 | - <div class="input_below"> | |
| 592 | - <div class="widget_below"> | |
| 593 | - <input id="first_bc_widget_id" 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" /> | |
| 594 | - </div> | |
| 595 | - <div class="placement_below"> | |
| 596 | - <input type="text" id="first_bc_placement" value="<?php echo !empty($settings->first_bc_placement) ? htmlspecialchars($settings->first_bc_placement) : "" ?>" name="first_bc_placement" placeholder="Placement Name" /> | |
| 597 | - </div> | |
| 598 | - </div> | |
| 171 | + </table> | |
| 172 | + <hr style='border-bottom: 1px solid #fafafa;'> | |
| 599 | 173 | |
| 600 | - <!-- Below Article Widget --> | |
| 601 | - <!-- Advanced Settings --> | |
| 602 | - <br /> | |
| 603 | - <div class='location_section'> | |
| 604 | - <div class='checkbox_read'> | |
| 605 | - <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" /> | |
| 606 | - <label id="out_of_content_enabled_label">Place the feed/widget just after the article container (required for <b>Read More</b>)</label> | |
| 607 | - </div> | |
| 608 | - <div class='tooltip'> | |
| 609 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_read"> | |
| 610 | - <g fill="none" fill-rule="evenodd"> | |
| 611 | - <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> | |
| 612 | - </g> | |
| 613 | - </svg> | |
| 614 | - <div> | |
| 615 | - Required in order for Taboola to activate <i>Read More</i>.<br><br> | |
| 616 | - Read More buttons can boost audience engagement significantly, especially on mobile devices.<br><br> | |
| 617 | - 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> | |
| 618 | - </div> | |
| 619 | - </div> | |
| 620 | - </div> | |
| 621 | -<!-- Advanced Settings --> | |
| 174 | + <?php $location_defined = !empty($settings->location_string); ?> | |
| 622 | 175 | |
| 623 | -<!-- Mid Article Widget --> | |
| 624 | 176 | |
| 625 | -<div id="mid_article" class="settings_block widget_settings_block"> | |
| 626 | - <div class="switch_style"> | |
| 627 | - <label class="switch"> | |
| 628 | - <input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/> | |
| 629 | - <span class="slider round"></span> | |
| 630 | - </label> | |
| 631 | - <b style="font-size:15px;">Mid-article</b> | |
| 632 | - </div> | |
| 633 | - | |
| 634 | - <div> | |
| 635 | - <div class="mode_style_mid"><label id="mid_widget_id_label" style="float:left;">Mode (Widget ID):</label> | |
| 636 | - <div class='tooltip'> | |
| 637 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 638 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 639 | - <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> | |
| 640 | - </g> | |
| 641 | - </svg> | |
| 642 | - <div>Your <i>mid-article</i> Mode (Widget ID), as provided by Taboola.</div> | |
| 643 | - </div> | |
| 177 | + <div class='toggle_intercept checkbox'> | |
| 178 | + <?php if ($location_defined): ?> | |
| 179 | + <div class='toggle_icon toggle_icon_on'></div> | |
| 180 | + Advanced Settings | |
| 644 | 181 | </div> |
| 645 | - <div class="placement_style_mid"><label id="mid_placement_label" style="float:left;">Placement Name:</label> | |
| 646 | - <div class='tooltip'> | |
| 647 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 648 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 649 | - <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> | |
| 650 | - </g> | |
| 651 | - </svg> | |
| 652 | - <div>Your <i>mid-article</i> Placement Name, as provided by Taboola.</div> | |
| 653 | - </div> | |
| 654 | - </div> | |
| 655 | - </div> | |
| 656 | - <div> | |
| 657 | - <div class="widget_below_mid"> | |
| 658 | - <input id="mid_widget_id" type="text" value="<?php echo !empty($settings->mid_widget_id) ? htmlspecialchars($settings->mid_widget_id) : "" ?>" name="mid_widget_id" placeholder="Widget ID" /> | |
| 659 | - </div> | |
| 660 | - <div class="placement_below_mid"> | |
| 661 | - <input id = "mid_placement" type="text" value="<?php echo !empty($settings->mid_placement) ? htmlspecialchars($settings->mid_placement) : "" ?>" name="mid_placement" placeholder="Placement Name" /> | |
| 662 | - </div> | |
| 663 | - </div> | |
| 182 | + <table class='location_section'> | |
| 664 | 183 | |
| 665 | - <div id="mid_occurrence_div"> | |
| 666 | - <div class="mode_style_mid_selector"><label id="mid_location_string_label" style="float:left;">Position the widget below:</label> | |
| 667 | - <div class='tooltip'> | |
| 668 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 669 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 670 | - <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> | |
| 671 | - </g> | |
| 672 | - </svg> | |
| 673 | - <div> | |
| 674 | - Enter the paragraph number to target. <br> | |
| 675 | - E.g. To target the <b>5th</b> paragraph, fill in <i>5</i>.<br><br> | |
| 676 | - ----<br> | |
| 677 | - <i>Advanced</i> - to use a <b>custom</b> selector:<br><br> | |
| 678 | - 1) Choose 'Other'. <br> | |
| 679 | - 2) Fill in a selector (<i>right</i>), and an occurrence (<i>left</i>). | |
| 680 | - </div> | |
| 681 | - </div> | |
| 184 | + <?php else: ?> | |
| 185 | + <div class='toggle_icon'></div> | |
| 186 | + Advanced Settings | |
| 682 | 187 | </div> |
| 683 | - <div class="placement_below_mid_occurrence"> | |
| 684 | - <select name="mid_paragraph_ui_mode" id="mid_paragraph_ui_mode"> | |
| 685 | - <option value="Paragraph" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Paragraph") ? "selected" : ""?> >Paragraph</option> | |
| 686 | - <option value="Other" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Other") ? "selected" : ""?>>Other</option> | |
| 687 | - </select> | |
| 688 | - <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;"> | |
| 689 | - </div> | |
| 188 | + <table class='location_section' style='display:none'> | |
| 690 | 189 | |
| 691 | - </div> | |
| 692 | - <div id="mid_css_selector_div"> | |
| 190 | + <?php endif; ?> | |
| 693 | 191 | |
| 694 | - <div class="placement_style_mid_occurrence"><label id="mid_occurrence_label" style="float:left;">CSS selector :</label> | |
| 695 | - <div class='tooltip'> | |
| 696 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 697 | - <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> | |
| 698 | - </g> | |
| 699 | - </svg> | |
| 700 | - <div> | |
| 701 | - <i>Advanced</i> - fill in a selector to target - e.g.:<br><br> | |
| 702 | - <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br> | |
| 703 | - <i>.my-class</i> - to target a <i>class</i> of "my-class". | |
| 704 | - </div> | |
| 705 | - </div> | |
| 706 | - </div> | |
| 707 | - <div class="widget_below_mid_selector"> | |
| 708 | - <input id = "mid_location_string" type="text" value="<?php echo !empty($settings->mid_location_string) ? htmlspecialchars($settings->mid_location_string) : "p" ?>" name="mid_location_string" placeholder="E.g. p for paragraph" /> | |
| 709 | - </div> | |
| 710 | - </div> | |
| 711 | - </div> | |
| 712 | -<!-- Mid Article Widget --> | |
| 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> | |
| 713 | 211 | |
| 714 | -<!-- Homepage mid widget --> | |
| 212 | + </tr> | |
| 715 | 213 | |
| 716 | - | |
| 717 | -<div id="homepage" class="settings_block widget_settings_block"> | |
| 718 | - <div class="switch_style"> | |
| 719 | - <label class="switch"> | |
| 720 | - <input id="home_enabled" type="checkbox" <?php echo !empty($settings->home_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#homepage', this)" name="home_enabled"/> | |
| 721 | - <span class="slider round"></span> | |
| 722 | - </label> | |
| 723 | - <div> | |
| 724 | - <b style="font-size:15px;float: left;">Homepage (front page)</b> | |
| 725 | - <div class='tooltip'> | |
| 726 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 727 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 728 | - <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> | |
| 729 | - </g> | |
| 730 | - </svg> | |
| 731 | - <div>Settings will be applied to the page that you marked as your 'front page'.</div> | |
| 732 | - </div> | |
| 733 | - </div> | |
| 734 | - </div> | |
| 735 | - | |
| 736 | - <div> | |
| 737 | - <div class="mode_style_home"><label id="home_widget_id_label" style="float:left;">Mode (Widget ID):</label> | |
| 738 | - <div class='tooltip'> | |
| 739 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 740 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 741 | - <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> | |
| 742 | - </g> | |
| 743 | - </svg> | |
| 744 | - <div>Your <i>homepage</i> Mode (Widget ID), as provided by Taboola.</div> | |
| 745 | - </div> | |
| 746 | - </div> | |
| 747 | - <div class="placement_style_home"><label id="home_placement_label" style="float:left;">Placement Name:</label> | |
| 748 | - <div class='tooltip'> | |
| 749 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 750 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 751 | - <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> | |
| 752 | - </g> | |
| 753 | - </svg> | |
| 754 | - <div>Your <i>homepage</i> Placement Name, as provided by Taboola.</div> | |
| 755 | - </div> | |
| 756 | - </div> | |
| 757 | - </div> | |
| 758 | - <div> | |
| 759 | - <div class="widget_below_home"> | |
| 760 | - <input id="home_widget_id" type="text" value="<?php echo !empty($settings->home_widget_id) ? htmlspecialchars($settings->home_widget_id) : "" ?>" name="home_widget_id" placeholder="Widget ID" /> | |
| 761 | - </div> | |
| 762 | - <div class="placement_below_home"> | |
| 763 | - <input id = "home_placement" type="text" value="<?php echo !empty($settings->home_placement) ? htmlspecialchars($settings->home_placement) : "" ?>" name="home_placement" placeholder="Placement Name" /> | |
| 764 | - </div> | |
| 765 | - </div> | |
| 766 | - | |
| 767 | - <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label> | |
| 768 | - <div class='tooltip'> | |
| 769 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 770 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 771 | - <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> | |
| 772 | - </g> | |
| 773 | - </svg> | |
| 774 | - <div>The widget will be placed <i>just beneath</i> this element.<br><br> | |
| 775 | - To target an element, 2 pieces of information are needed:<br><br> | |
| 776 | - i) A CSS selector - e.g. <i>p</i> (for paragraph).<br> | |
| 777 | - ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br> | |
| 778 | - For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>. | |
| 779 | - </div> | |
| 780 | - </div> | |
| 781 | - </div> | |
| 782 | - | |
| 783 | - | |
| 784 | - <div class="home_occurrence"> | |
| 785 | - <div class="mode_style_home_selector"><label id="home_location_string_label" style="float:left;">CSS selector :</label> | |
| 786 | - <div class='tooltip'> | |
| 787 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 788 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 789 | - <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> | |
| 790 | - </g> | |
| 791 | - </svg> | |
| 792 | - <div> | |
| 793 | - The element to target - e.g.:<br><br> | |
| 794 | - <i>section</i> - to target a <i>section</i>.<br> | |
| 795 | - <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br> | |
| 796 | - <i>.my-class</i> - to target a <i>class</i> of "my-class". | |
| 797 | - </div> | |
| 798 | - </div> | |
| 799 | - </div> | |
| 800 | - <div class="placement_style_home_occurrence"><label id="home_occurrence_label" style="float:left;">Occurrence :</label> | |
| 801 | - <div class='tooltip'> | |
| 802 | - <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> --> | |
| 803 | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN"> | |
| 804 | - <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> | |
| 805 | - </g> | |
| 806 | - </svg> | |
| 807 | - <div>For a <b>non-unique</b> selector - e.g. <i>section</i> - fill in the <b>occurrence</b> to target.<br><br> | |
| 808 | - E.g. To target the <b>2nd</b> section, fill in <i>2</i>. <br><br> | |
| 809 | - For a <b>unique</b> selector - e.g. <i>#my-id</i> - leave the default value of '1'.</div> | |
| 810 | - </div> | |
| 811 | - </div> | |
| 812 | - </div> | |
| 813 | - <div class="home_placement"> | |
| 814 | - <div class="widget_below_home_selector"> | |
| 815 | - <input id = "home_location_string" type="text" value="<?php echo !empty($settings->home_location_string) ? htmlspecialchars($settings->home_location_string) : "" ?>" name="home_location_string" placeholder="E.g. p for paragraph" /></td> | |
| 816 | - </div> | |
| 817 | - <div class="placement_below_home_Occurrence"> | |
| 818 | - <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;"> | |
| 819 | - </div> | |
| 820 | - </div> | |
| 821 | -</div> | |
| 822 | -<div id="advanced-settings-main"> | |
| 823 | - <a id="show-advanced-settings">Show advanced settings >></a> | |
| 824 | - <div class="change_button"> | |
| 825 | - <input class='apply_button' type="submit" value="Apply Changes"/> | |
| 826 | - </div> | |
| 827 | -</div> | |
| 828 | - | |
| 829 | -<!-- Homepage mid widget --> | |
| 830 | - | |
| 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> --> | |
| 831 | 217 | </form> |
| 832 | 218 | <div style='clear:both'></div> |
| 833 | 219 | |
| 834 | 220 | <?php |
| @@ -841,28 +227,45 @@ | ||
| 841 | 227 | <input name="tim" type="hidden" value="<?=date("H:i:s.000")?>"> |
| 842 | 228 | <input name="pub" type="hidden" value="<?=$logPublisher?>"> |
| 843 | 229 | <input name="data" type="hideen" value="WORDPRESS_PLUGIN_INSTALL|<?="//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}|{$detailsString}"?>"> |
| 844 | 230 | </form> --> |
| 845 | -</div> | |
| 846 | 231 | |
| 847 | -<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 | + } | |
| 848 | 236 | |
| 849 | - // Set enabled/disabled appearance upon page load | |
| 850 | - // (Function is defined earlier on the page.) | |
| 851 | - setEnabledDisabled('#below_article', document.getElementById("first_bc_enabled")); | |
| 852 | - setEnabledDisabled('#mid_article', document.getElementById("mid_enabled")); | |
| 853 | - setEnabledDisabled('#homepage', document.getElementById("home_enabled")); | |
| 854 | - | |
| 855 | -</script> | |
| 856 | - | |
| 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> | |
| 857 | 244 | <script> |
| 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 | + } | |
| 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() | |
| 858 | 257 | |
| 859 | - // Fadeouts for error/success messages | |
| 860 | - setTimeout(function(){jQuery('.label-success').fadeOut()}, 5000); | |
| 861 | - setTimeout(function(){jQuery('.label-error').fadeOut()}, 8000); | |
| 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'); | |
| 265 | + }); | |
| 862 | 266 | |
| 863 | - // PC | |
| 864 | - // window.onload = function(){ | |
| 865 | - // document.forms['install_log'].submit() | |
| 866 | - // } | |
| 267 | + window.onload = function(){ | |
| 268 | + document.forms['install_log'].submit() | |
| 867 | 269 | |
| 868 | -</script> | |
| 270 | + } | |
| 271 | +</script> | |
