| @@ -85,8 +85,26 @@ | ||
| 85 | 85 | margin-top: 10px; |
| 86 | 86 | color: red; |
| 87 | 87 | } |
| 88 | 88 | |
| 89 | + .toggle_icon{ | |
| 90 | + background: url(<?php echo $this->plugin_url.'img/arrow_right_32.png' ?>) no-repeat; | |
| 91 | + background-size:contain; | |
| 92 | + width:24px; | |
| 93 | + height:24px; | |
| 94 | + display:inline-block; | |
| 95 | + vertical-align: middle; | |
| 96 | + } | |
| 97 | + | |
| 98 | + .toggle_icon_on{ | |
| 99 | + -ms-transform: rotate(90deg); /* IE 9 */ | |
| 100 | + -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ | |
| 101 | + transform: rotate(90deg); | |
| 102 | + } | |
| 103 | + .apply_button{ | |
| 104 | + margin-top: 20px !important; | |
| 105 | + } | |
| 106 | + | |
| 89 | 107 | </style> |
| 90 | 108 | |
| 91 | 109 | <div class="taboola-container"> |
| 92 | 110 | <img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:200px;'/> |
| @@ -96,9 +114,9 @@ | ||
| 96 | 114 | <table> |
| 97 | 115 | <tr> |
| 98 | 116 | <td>Publisher ID</td> |
| 99 | 117 | <td> |
| 100 | - <input type="text" name="publisher_id" placeholder="publisher" value="<?php echo $settings->publisher_id ?>"/> | |
| 118 | + <input type="text" name="publisher_id" placeholder="publisher" value="<?php echo htmlspecialchars($settings->publisher_id) ?>"/> | |
| 101 | 119 | </td> |
| 102 | 120 | <td class='tooltip'> |
| 103 | 121 | <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/> |
| 104 | 122 | <div>Please contact your Taboola representative to receive the Publisher ID </div> |
| @@ -115,9 +133,9 @@ | ||
| 115 | 133 | <hr style='margin-bottom: 25px; margin-top: 5px;'> |
| 116 | 134 | |
| 117 | 135 | <div class='checkbox'> |
| 118 | 136 | <input id="first_bc_enabled" type="checkbox" <?php echo $settings->first_bc_enabled ? "checked='checked'" : "" ?> name="first_bc_enabled"/> |
| 119 | - Taboola widget below article | |
| 137 | + Below Article | |
| 120 | 138 | </div> |
| 121 | 139 | <table> |
| 122 | 140 | <tr> |
| 123 | 141 | <td>Widget ID</td> |
| @@ -128,20 +146,15 @@ | ||
| 128 | 146 | <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/> |
| 129 | 147 | <div>Please contact your Taboola representative to receive the Widget ID</div> |
| 130 | 148 | </td> |
| 131 | 149 | </tr> |
| 132 | - <!-- <tr> | |
| 133 | - <td>Custom CSS</td> | |
| 134 | - <td> | |
| 135 | - <input type="text" value="<?php echo $settings->first_bc_custom_css ?>" name="first_bc_custom_css" placeholder="Custom CSS" /> | |
| 136 | - </td> | |
| 137 | - </tr>--> | |
| 150 | + | |
| 138 | 151 | </table> |
| 139 | 152 | <hr> |
| 140 | 153 | |
| 141 | 154 | <div class='checkbox'> |
| 142 | 155 | <input id="second_bc_enabled" type="checkbox" <?php echo $settings->second_bc_enabled ? "checked='checked'" : "" ?> name="second_bc_enabled"/> |
| 143 | - Taboola widget below the first one | |
| 156 | + Below Article 2nd | |
| 144 | 157 | </div> |
| 145 | 158 | |
| 146 | 159 | <table> |
| 147 | 160 | <tr> |
| @@ -146,9 +159,9 @@ | ||
| 146 | 159 | <table> |
| 147 | 160 | <tr> |
| 148 | 161 | <td>Widget ID</td> |
| 149 | 162 | <td> |
| 150 | - <input type="text" value="<?php echo $settings->second_bc_widget_id ?>" name="second_bc_widget_id" placeholder="Widget ID" /> | |
| 163 | + <input type="text" value="<?php echo htmlspecialchars($settings->second_bc_widget_id) ?>" name="second_bc_widget_id" placeholder="Widget ID" /> | |
| 151 | 164 | </td> |
| 152 | 165 | <td class='tooltip'> |
| 153 | 166 | <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/> |
| 154 | 167 | <div>Please contact your Taboola representative to receive the Widget ID</div> |
| @@ -153,18 +166,44 @@ | ||
| 153 | 166 | <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/> |
| 154 | 167 | <div>Please contact your Taboola representative to receive the Widget ID</div> |
| 155 | 168 | </td> |
| 156 | 169 | </tr> |
| 157 | - <!-- <tr> | |
| 158 | - <td>Custom CSS</td> | |
| 170 | + | |
| 171 | + </table> | |
| 172 | + <hr style='border-bottom: 1px solid #fafafa;'> | |
| 173 | + | |
| 174 | + <?php $location_defined = (htmlspecialchars($settings->location_string) != ""); ?> | |
| 175 | + | |
| 176 | + | |
| 177 | + <div class='toggle_intercept checkbox'> | |
| 178 | + <?php if ($location_defined): ?> | |
| 179 | + <div class='toggle_icon toggle_icon_on'></div> | |
| 180 | + Advanced Settings | |
| 181 | + </div> | |
| 182 | + <table class='location_section'> | |
| 183 | + | |
| 184 | + <?php else: ?> | |
| 185 | + <div class='toggle_icon'></div> | |
| 186 | + Advanced Settings | |
| 187 | + </div> | |
| 188 | + <table class='location_section' style='display:none'> | |
| 189 | + | |
| 190 | + <?php endif; ?> | |
| 191 | + | |
| 192 | + | |
| 193 | + <tr> | |
| 194 | + <td>Location</td> | |
| 159 | 195 | <td> |
| 160 | - <input type="text" value="<?php echo $settings->second_bc_custom_css ?>" name="second_bc_custom_css" placeholder="Custom CSS" /> | |
| 196 | + <input type="text" value="<?php echo htmlspecialchars($settings->location_string) ?>" name="location_string" placeholder="" /> | |
| 161 | 197 | </td> |
| 162 | - </tr>--> | |
| 198 | + <td class='tooltip'> | |
| 199 | + <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/> | |
| 200 | + <div>This field controls the location of these widgets on the page. If you would like to move your widget from its default location directly below the article a Taboola representative will provide you with the necessary information.</div> | |
| 201 | + </td> | |
| 202 | + </tr> | |
| 203 | + | |
| 163 | 204 | </table> |
| 164 | - <hr style='border-bottom: 1px solid #fafafa;'> | |
| 165 | - | |
| 166 | - <input class='button-secondary' type="submit" value="Apply Changes ✔"/> | |
| 205 | + <input class='button-secondary apply_button' type="submit" value="Apply Changes ✔"/> | |
| 167 | 206 | <!-- <a class='request_link' href=' http://taboola.com/contact' target='_blank'>Request Widget</a> --> |
| 168 | 207 | </form> |
| 169 | 208 | <div style='clear:both'></div> |
| 170 | 209 | <?php |
| @@ -180,12 +219,12 @@ | ||
| 180 | 219 | </div> |
| 181 | 220 | <script> |
| 182 | 221 | function sync_checkboxes(){ |
| 183 | 222 | if(jQuery('#first_bc_enabled').attr("checked")){ |
| 184 | - jQuery('#second_bc_enabled').prop('disabled',false) | |
| 223 | + jQuery('#second_bc_enabled').attr('disabled',false) | |
| 185 | 224 | } else { |
| 186 | - jQuery('#second_bc_enabled').prop('checked', false); | |
| 187 | - jQuery('#second_bc_enabled').prop('disabled',true) | |
| 225 | + jQuery('#second_bc_enabled').attr('checked', false); | |
| 226 | + jQuery('#second_bc_enabled').attr('disabled',true) | |
| 188 | 227 | } |
| 189 | 228 | } |
| 190 | 229 | jQuery('#first_bc_enabled').change(sync_checkboxes); |
| 191 | 230 | setTimeout(function(){jQuery('.label-success').fadeOut()}, 6000); |
| @@ -190,5 +229,14 @@ | ||
| 190 | 229 | jQuery('#first_bc_enabled').change(sync_checkboxes); |
| 191 | 230 | setTimeout(function(){jQuery('.label-success').fadeOut()}, 6000); |
| 192 | 231 | setTimeout(function(){jQuery('.label-error').fadeOut()}, 6000); |
| 193 | 232 | sync_checkboxes() |
| 233 | + | |
| 234 | + jQuery('.toggle_intercept').click(function(){ | |
| 235 | + if (jQuery('.location_section').fadeToggle != undefined){ | |
| 236 | + jQuery('.location_section').fadeToggle('fast'); | |
| 237 | + }else{ | |
| 238 | + jQuery('.location_section').toggle(); | |
| 239 | + } | |
| 240 | + jQuery('.toggle_icon').toggleClass('toggle_icon_on'); | |
| 241 | + }); | |
| 194 | 242 | </script> |