| @@ -1,5 +1,5 @@ | ||
| 1 | -(function( $ ) { | |
| 1 | +(function ($) { | |
| 2 | 2 | 'use strict'; |
| 3 | 3 | |
| 4 | 4 | /** |
| 5 | 5 | * All of the code for your admin-facing JavaScript source |
| @@ -28,69 +28,472 @@ | ||
| 28 | 28 | * Although scripts in the WordPress core, Plugins and Themes may be |
| 29 | 29 | * practising this, we should strive to set a better example in our own work. |
| 30 | 30 | */ |
| 31 | 31 | |
| 32 | - jQuery(document).ready(function($) { | |
| 33 | - $('.event-ajax-indicator').on('click submit', function () { | |
| 32 | + jQuery(document).ready(function ($) { | |
| 33 | + $('.event-ajax-indicator').on('click submit', function () { | |
| 34 | 34 | if ($(this).find('.wdk-ajax-indicator').length) { |
| 35 | 35 | $(this).find('.wdk-ajax-indicator').removeClass('hidden') |
| 36 | - .removeClass('wdk-hidden'); | |
| 36 | + .removeClass('wdk-hidden'); | |
| 37 | 37 | $(this).find('.hidden-onloading').addClass('wdk-hidden'); |
| 38 | 38 | } |
| 39 | 39 | else { |
| 40 | 40 | $(this).parent().find('.wdk-ajax-indicator').removeClass('hidden'); |
| 41 | 41 | } |
| 42 | - }) | |
| 43 | - | |
| 44 | - /* date time fields init */ | |
| 45 | - if ($('.wdk-fielddate').length && typeof $.datepicker != 'undefined') { | |
| 46 | - $('.wdk-fielddate').each(function () { | |
| 47 | - let dateFormat = 'yy-mm-dd'; | |
| 48 | - if ($(this).attr('date-format')) | |
| 49 | - dateFormat = $(this).attr('date-format'); | |
| 50 | - $(this).datepicker({ dateFormat: dateFormat }); | |
| 51 | - }) | |
| 42 | + }) | |
| 43 | + | |
| 44 | + | |
| 45 | + $('.wdk-submit-loading').on('click', function () { | |
| 46 | + var form; | |
| 47 | + form = $(this).closest('form'); | |
| 48 | + | |
| 49 | + if ($(this).hasClass('wdk_btn_load_indicator')) { | |
| 50 | + console.log('disabled') | |
| 51 | + return false; | |
| 52 | + } | |
| 53 | + | |
| 54 | + $(this).addClass('wdk_btn_load_indicator disabled'); | |
| 55 | + }); | |
| 56 | + | |
| 57 | + $('.wdk-click-loading').on('click', function (e) { | |
| 58 | + $(this).addClass('wdk_btn_load_indicator').attr('disabled', 'disabled'); | |
| 59 | + }); | |
| 60 | + | |
| 61 | + /* date time fields init */ | |
| 62 | + if ($('.wdk-fielddate').length && typeof $.datepicker != 'undefined') { | |
| 63 | + | |
| 64 | + $('.wdk-fielddate').each(function () { | |
| 65 | + let dateFormat = script_parameters.format_date_js; | |
| 66 | + var self = $(this); | |
| 67 | + | |
| 68 | + if (self.attr('date-format')) | |
| 69 | + dateFormat = self.attr('date-format'); | |
| 70 | + | |
| 71 | + self.datepicker({ | |
| 72 | + dateFormat: dateFormat, onSelect: function () { | |
| 73 | + self.parent().find('.db-date').val(wdk_date_sql_normalize(self.val(), self)).trigger('input'); | |
| 74 | + } | |
| 75 | + }).on("change", function () { | |
| 76 | + if (self.val() == '') { | |
| 77 | + self.parent().find('.db-date').val(''); | |
| 78 | + } else { | |
| 79 | + self.parent().find('.db-date').val(wdk_date_sql_normalize(self.val(), self)); | |
| 80 | + } | |
| 81 | + }); | |
| 82 | + | |
| 83 | + if (self.parent().find('.db-date').val() == '' && false) { | |
| 84 | + self.parent().find('.db-date').val(wdk_date_sql_normalize()); | |
| 85 | + } | |
| 86 | + }) | |
| 52 | 87 | }; |
| 53 | 88 | |
| 89 | + if ($('.wdk-fielddatetime').length && typeof $.datepicker != 'undefined') { | |
| 90 | + | |
| 91 | + $('.wdk-fielddatetime').each(function () { | |
| 92 | + let dateFormat = script_parameters.format_datetime_js; | |
| 93 | + | |
| 94 | + var self = $(this); | |
| 95 | + if (self.attr('date-format')) | |
| 96 | + dateFormat = self.attr('date-format'); | |
| 97 | + | |
| 98 | + self.datepicker({ | |
| 99 | + dateFormat: dateFormat, onSelect: function () { | |
| 100 | + | |
| 101 | + | |
| 102 | + var datetime = wdk_date_notime_sql_normalize(self.val(), self); | |
| 103 | + if (self.parent().find('[name="hours_mask"]').val() != '') { | |
| 104 | + datetime += ' ' + wdk_pad(self.parent().find('[name="hours_mask"]').val()); | |
| 105 | + } else { | |
| 106 | + datetime += ' 00'; | |
| 107 | + } | |
| 108 | + if (self.parent().find('[name="minutes_mask"]').val() != '') { | |
| 109 | + datetime += ':' + wdk_pad(self.parent().find('[name="minutes_mask"]').val()); | |
| 110 | + } else { | |
| 111 | + datetime += ':00'; | |
| 112 | + } | |
| 113 | + datetime += ':00'; | |
| 114 | + | |
| 115 | + self.parent().find('.db-date').val(datetime).trigger('input'); | |
| 116 | + } | |
| 117 | + }).on("change", function () { | |
| 118 | + | |
| 119 | + var datetime = wdk_date_notime_sql_normalize(self.val(), self); | |
| 120 | + if (self.parent().find('[name="hours_mask"]').val() != '') { | |
| 121 | + datetime += ' ' + wdk_pad(self.parent().find('[name="hours_mask"]').val()); | |
| 122 | + } else { | |
| 123 | + datetime += ' 00'; | |
| 124 | + } | |
| 125 | + if (self.parent().find('[name="minutes_mask"]').val() != '') { | |
| 126 | + datetime += ':' + wdk_pad(self.parent().find('[name="minutes_mask"]').val()); | |
| 127 | + } else { | |
| 128 | + datetime += ':00'; | |
| 129 | + } | |
| 130 | + datetime += ':00'; | |
| 131 | + self.parent().find('.db-date').val(datetime).trigger('input'); | |
| 132 | + | |
| 133 | + }); | |
| 134 | + | |
| 135 | + if (self.parent().find('.db-date').val() == '') { | |
| 136 | + self.parent().find('.db-date').val(wdk_date_sql_normalize()); | |
| 137 | + } | |
| 138 | + | |
| 139 | + self.parent().find('[name="hours_mask"],[name="minutes_mask"]').on('input', function () { | |
| 140 | + var datetime = wdk_date_notime_sql_normalize(self.val(), self); | |
| 141 | + if (self.parent().find('[name="hours_mask"]').val() != '') { | |
| 142 | + datetime += ' ' + wdk_pad(self.parent().find('[name="hours_mask"]').val()); | |
| 143 | + } else { | |
| 144 | + datetime += ' 00'; | |
| 145 | + } | |
| 146 | + if (self.parent().find('[name="minutes_mask"]').val() != '') { | |
| 147 | + datetime += ':' + wdk_pad(self.parent().find('[name="minutes_mask"]').val()); | |
| 148 | + } else { | |
| 149 | + datetime += ':00'; | |
| 150 | + } | |
| 151 | + datetime += ':00'; | |
| 152 | + self.parent().find('.db-date').val(datetime); | |
| 153 | + }); | |
| 154 | + }) | |
| 155 | + }; | |
| 156 | + | |
| 54 | 157 | if ($('.wdk-fielddate_from').length && $('.wdk-fielddate_to').length && typeof $.datepicker != 'undefined') { |
| 55 | 158 | var dateFormat, from, to; |
| 56 | - const getDate = ( element ) => { | |
| 159 | + const getDate = (element) => { | |
| 57 | 160 | var date; |
| 58 | 161 | try { |
| 59 | - date = $.datepicker.parseDate( dateFormat, element.value ); | |
| 60 | - } catch( error ) { | |
| 162 | + date = $.datepicker.parseDate(dateFormat, element.value); | |
| 163 | + } catch (error) { | |
| 61 | 164 | date = null; |
| 62 | 165 | } |
| 63 | 166 | return date; |
| 64 | - } | |
| 65 | - | |
| 66 | - dateFormat = 'yy-mm-dd'; | |
| 167 | + } | |
| 168 | + | |
| 169 | + dateFormat = script_parameters.format_date_js; | |
| 67 | 170 | if ($('.wdk-fielddate_from').attr('date-format')) |
| 68 | - dateFormat = $('.wdk-fielddate_from').attr('date-format'); | |
| 69 | - | |
| 171 | + dateFormat = $('.wdk-fielddate_from').attr('date-format'); | |
| 172 | + | |
| 70 | 173 | from = $('.wdk-fielddate_from') |
| 71 | 174 | .datepicker({ |
| 72 | 175 | dateFormat: dateFormat, |
| 73 | - onSelect: function( selectedDate ) { | |
| 74 | - to.datepicker("option", "minDate", selectedDate ); | |
| 75 | - setTimeout(function(){ | |
| 176 | + onSelect: function (selectedDate) { | |
| 177 | + to.datepicker("option", "minDate", selectedDate); | |
| 178 | + setTimeout(function () { | |
| 76 | 179 | to.datepicker('show'); |
| 77 | 180 | }, 16); |
| 181 | + | |
| 182 | + from.parent().find('.db-date').val(wdk_date_sql_normalize(from.val(), from)).trigger('input'); | |
| 183 | + wdk_date_add_hours(from); | |
| 184 | + | |
| 78 | 185 | } |
| 79 | - }) | |
| 80 | - | |
| 81 | - to =$('.wdk-fielddate_to').datepicker({ | |
| 186 | + }).on("change", function () { | |
| 187 | + | |
| 188 | + }); | |
| 189 | + | |
| 190 | + to = $('.wdk-fielddate_to').datepicker({ | |
| 82 | 191 | dateFormat: dateFormat |
| 83 | 192 | }) |
| 84 | - .on( "change", function() { | |
| 85 | - from.datepicker( "option", "maxDate", getDate( this ) ); | |
| 193 | + .on("change", function () { | |
| 194 | + from.datepicker("option", "maxDate", getDate(this)); | |
| 195 | + | |
| 196 | + to.parent().find('.db-date').val(wdk_date_sql_normalize(to.val(), to)).trigger('input'); | |
| 197 | + wdk_date_add_hours(to); | |
| 198 | + }); | |
| 199 | + | |
| 200 | + if (to.parent().find('.db-date').val() == '') { | |
| 201 | + to.parent().find('.db-date').val(wdk_date_sql_normalize()); | |
| 202 | + } | |
| 203 | + | |
| 204 | + if (from.parent().find('.db-date').val() == '') { | |
| 205 | + from.parent().find('.db-date').val(wdk_date_sql_normalize()); | |
| 206 | + } | |
| 207 | + | |
| 208 | + from.parent().find('[name="hours_mask"],[name="minutes_mask"]').on('input', function () { | |
| 209 | + wdk_date_add_hours(from); | |
| 86 | 210 | }); |
| 211 | + | |
| 212 | + to.parent().find('[name="hours_mask"],[name="minutes_mask"]').on('input', function () { | |
| 213 | + wdk_date_add_hours(to); | |
| 214 | + }); | |
| 215 | + | |
| 87 | 216 | } |
| 88 | 217 | |
| 89 | - jQuery(document).ready( function($) { | |
| 90 | - $( "ul#adminmenu a[href*='wordpress.org/support/plugin/wpdirectorykit']" ).attr( 'target', '_blank' ); | |
| 91 | - $( "ul#adminmenu a[href*='wpdirectorykit.com/contact.html']" ).attr( 'target', '_blank' ); | |
| 92 | - $( "ul#adminmenu a[href*='wpdirectorykit.com/documentation']" ).attr( 'target', '_blank' ); | |
| 93 | - }); | |
| 94 | - }) | |
| 95 | - | |
| 96 | -})( jQuery ); | |
| 218 | + jQuery(document).ready(function ($) { | |
| 219 | + $("ul#adminmenu a[href*='wordpress.org/support/plugin/wpdirectorykit']").attr('target', '_blank'); | |
| 220 | + $("ul#adminmenu a[href*='wpdirectorykit.com/contact.html']").attr('target', '_blank'); | |
| 221 | + $("ul#adminmenu a[href*='wpdirectorykit.com/documentation']").attr('target', '_blank'); | |
| 222 | + }); | |
| 223 | + | |
| 224 | + | |
| 225 | + /* wdk pro feature ask */ | |
| 226 | + if (typeof $.fn.confirm == 'function') { | |
| 227 | + $('.wdk-pro, .wdk-pro a, .wdk-pro button, .wdk-pro input').off().on('click', function (e) { | |
| 228 | + e.preventDefault(); | |
| 229 | + var self = jQuery(this) | |
| 230 | + jQuery.confirm({ | |
| 231 | + boxWidth: '400px', | |
| 232 | + useBootstrap: false, | |
| 233 | + title: self.data('title'), | |
| 234 | + content: self.data('content'), | |
| 235 | + buttons: { | |
| 236 | + cancel: function () { | |
| 237 | + return true; | |
| 238 | + }, | |
| 239 | + somethingElse: { | |
| 240 | + text: self.data('button-succuss'), | |
| 241 | + btnClass: 'btn-blue activate-now', | |
| 242 | + keys: ['enter', 'shift'], | |
| 243 | + action: function () { | |
| 244 | + window.location = self.data('action'); | |
| 245 | + return false; | |
| 246 | + } | |
| 247 | + } | |
| 248 | + } | |
| 249 | + }); | |
| 250 | + return false; | |
| 251 | + }); | |
| 252 | + $('select.wdk-pro-select').off().on('input', function (e) { | |
| 253 | + | |
| 254 | + var self = jQuery(this); | |
| 255 | + var selected = self.find('option:selected'); | |
| 256 | + | |
| 257 | + if (selected.hasClass('pro-value')) { | |
| 258 | + jQuery.confirm({ | |
| 259 | + boxWidth: '400px', | |
| 260 | + useBootstrap: false, | |
| 261 | + title: self.data('title'), | |
| 262 | + content: self.data('content'), | |
| 263 | + buttons: { | |
| 264 | + cancel: function () { | |
| 265 | + return true; | |
| 266 | + }, | |
| 267 | + somethingElse: { | |
| 268 | + text: self.data('button-success'), | |
| 269 | + btnClass: 'btn-blue activate-now', | |
| 270 | + keys: ['enter', 'shift'], | |
| 271 | + action: function () { | |
| 272 | + window.location = self.data('action'); | |
| 273 | + return false; | |
| 274 | + } | |
| 275 | + } | |
| 276 | + } | |
| 277 | + }); | |
| 278 | + self.val("").change(); | |
| 279 | + } | |
| 280 | + }); | |
| 281 | + $('.wdk-pro,.wdk-pro a, .wdk-pro button, .wdk-pro input').on('focus', function () { | |
| 282 | + $(this).trigger('blur'); | |
| 283 | + return false; | |
| 284 | + }); | |
| 285 | + } | |
| 286 | + | |
| 287 | + if (jQuery('.wdk-tabs-navs').length) { | |
| 288 | + jQuery('.wdk-tabs-navs').find('label').on('click', function () { | |
| 289 | + jQuery(this).parent().find('label').removeClass('active'); | |
| 290 | + jQuery(this).addClass('active'); | |
| 291 | + }); | |
| 292 | + } | |
| 293 | + }) | |
| 294 | +})(jQuery); | |
| 295 | + | |
| 296 | +const wdk_pad = (num = '') => { | |
| 297 | + return ('00' + num).slice(-2); | |
| 298 | +}; | |
| 299 | + | |
| 300 | +const wdk_date_add_hours = (selector = '') => { | |
| 301 | + if (typeof selector != 'undefined' && selector.parent().find('[name="hours_mask"]').length) { | |
| 302 | + var datetime = wdk_date_notime_sql_normalize(selector.val(), selector); | |
| 303 | + if (selector.parent().find('[name="hours_mask"]').val() != '') { | |
| 304 | + datetime += ' ' + wdk_pad(selector.parent().find('[name="hours_mask"]').val()); | |
| 305 | + } else { | |
| 306 | + datetime += ' 00'; | |
| 307 | + } | |
| 308 | + if (selector.parent().find('[name="minutes_mask"]').val() != '') { | |
| 309 | + datetime += ':' + wdk_pad(selector.parent().find('[name="minutes_mask"]').val()); | |
| 310 | + } else { | |
| 311 | + datetime += ':00'; | |
| 312 | + } | |
| 313 | + datetime += ':00'; | |
| 314 | + selector.parent().find('.db-date').val(datetime); | |
| 315 | + } | |
| 316 | +}; | |
| 317 | + | |
| 318 | +/* | |
| 319 | + Convert date to sql format | |
| 320 | + | |
| 321 | + @param string $date, string of date | |
| 322 | + | |
| 323 | + @return string normalize date or Current date/time | |
| 324 | +*/ | |
| 325 | +const wdk_date_sql_normalize = (date = '', datepicker_el = null) => { | |
| 326 | + if (date == '') { | |
| 327 | + var d = new Date(); | |
| 328 | + } else { | |
| 329 | + var d = new Date(date); | |
| 330 | + } | |
| 331 | + | |
| 332 | + if (d == 'Invalid Date' && datepicker_el) { | |
| 333 | + var d = new Date(+(jQuery.datepicker.formatDate("@", datepicker_el.datepicker("getDate")))); | |
| 334 | + } | |
| 335 | + | |
| 336 | + d = d.getUTCFullYear() + '-' + | |
| 337 | + wdk_pad(d.getMonth() + 1) + '-' + | |
| 338 | + wdk_pad(d.getDate()) + ' ' + | |
| 339 | + wdk_pad(d.getHours()) + ':' + | |
| 340 | + wdk_pad(d.getMinutes()) + ':' + | |
| 341 | + wdk_pad(d.getSeconds()); | |
| 342 | + return d; | |
| 343 | +}; | |
| 344 | + | |
| 345 | +const wdk_date_notime_sql_normalize = (date = '', datepicker_el = null) => { | |
| 346 | + if (date == '') { | |
| 347 | + var d = new Date(); | |
| 348 | + } else { | |
| 349 | + var d = new Date(date); | |
| 350 | + } | |
| 351 | + | |
| 352 | + if (d == 'Invalid Date' && datepicker_el) { | |
| 353 | + var d = new Date(+(jQuery.datepicker.formatDate("@", datepicker_el.datepicker("getDate")))); | |
| 354 | + } | |
| 355 | + | |
| 356 | + d = d.getUTCFullYear() + '-' + | |
| 357 | + wdk_pad(d.getMonth() + 1) + '-' + | |
| 358 | + wdk_pad(d.getDate()); | |
| 359 | + return d; | |
| 360 | +}; | |
| 361 | + | |
| 362 | + | |
| 363 | + | |
| 364 | +document.addEventListener('DOMContentLoaded', () => { | |
| 365 | + | |
| 366 | + class WDKListingSearch { | |
| 367 | + constructor(inputSelector, resultsSelector, executedId = null) { | |
| 368 | + this.executedId = executedId; | |
| 369 | + this.input = document.querySelector(inputSelector); | |
| 370 | + this.results = document.querySelector(resultsSelector); | |
| 371 | + this.timer = null; | |
| 372 | + this.controller = null; | |
| 373 | + this.init(); | |
| 374 | + } | |
| 375 | + | |
| 376 | + init() { | |
| 377 | + if (!this.input || !this.results) return; | |
| 378 | + | |
| 379 | + this.input.addEventListener('input', () => this.onInput()); | |
| 380 | + document.addEventListener('click', (e) => this.onDocumentClick(e)); | |
| 381 | + this.input.addEventListener('focus', () => this.onFocus()); | |
| 382 | + this.input.addEventListener('keydown', (e) => this.onKeyDown(e)); | |
| 383 | + } | |
| 384 | + | |
| 385 | + onInput() { | |
| 386 | + clearTimeout(this.timer); | |
| 387 | + | |
| 388 | + const keyword = this.input.value.trim(); | |
| 389 | + | |
| 390 | + if (this.controller) { | |
| 391 | + this.controller.abort(); | |
| 392 | + } | |
| 393 | + | |
| 394 | + if (keyword.length < 2) { | |
| 395 | + this.results.replaceChildren(); | |
| 396 | + this.results.hidden = true; | |
| 397 | + return; | |
| 398 | + } | |
| 399 | + | |
| 400 | + this.timer = setTimeout(() => this.fetchResults(keyword), 250); | |
| 401 | + } | |
| 402 | + | |
| 403 | + async fetchResults(keyword) { | |
| 404 | + this.controller = new AbortController(); | |
| 405 | + | |
| 406 | + // Show dropdown + loading | |
| 407 | + this.results.hidden = false; | |
| 408 | + this.results.innerHTML = ` | |
| 409 | + <div class="wdk-search-loading"> | |
| 410 | + <span class="spinner is-active"></span> | |
| 411 | + Searching... | |
| 412 | + </div> | |
| 413 | + `; | |
| 414 | + | |
| 415 | + try { | |
| 416 | + const response = await fetch( | |
| 417 | + wdk_script_parameters.wpApiSettings.root + 'wdk/v1/listing/autosuggestion', | |
| 418 | + { | |
| 419 | + method: 'POST', | |
| 420 | + credentials: 'same-origin', | |
| 421 | + headers: { | |
| 422 | + 'Content-Type': 'application/json', | |
| 423 | + 'X-WP-Nonce': wdk_script_parameters.wpApiSettings.nonce | |
| 424 | + }, | |
| 425 | + body: JSON.stringify({ | |
| 426 | + keyword: keyword, | |
| 427 | + executedId: this.executedId | |
| 428 | + }), | |
| 429 | + signal: this.controller.signal | |
| 430 | + } | |
| 431 | + ); | |
| 432 | + | |
| 433 | + const json = await response.json(); | |
| 434 | + | |
| 435 | + this.results.replaceChildren(); | |
| 436 | + | |
| 437 | + if (!json.success || !json.data.length) { | |
| 438 | + this.results.innerHTML = ` | |
| 439 | + <div class="wdk-search-empty"> | |
| 440 | + No results found | |
| 441 | + </div> | |
| 442 | + `; | |
| 443 | + return; | |
| 444 | + } | |
| 445 | + | |
| 446 | + json.data.forEach(item => { | |
| 447 | + const a = document.createElement('a'); | |
| 448 | + a.href = item.edit ? decodeURIComponent(item.edit) : '#'; | |
| 449 | + a.className = 'wdk-search-item'; | |
| 450 | + a.textContent = item.title; | |
| 451 | + | |
| 452 | + this.results.appendChild(a); | |
| 453 | + }); | |
| 454 | + | |
| 455 | + } catch (e) { | |
| 456 | + if (e.name === 'AbortError') { | |
| 457 | + return; | |
| 458 | + } | |
| 459 | + this.results.innerHTML = ` | |
| 460 | + <div class="wdk-search-empty"> | |
| 461 | + ${e.message ? 'Error: ' + e.message : 'An unexpected error occurred'} | |
| 462 | + </div> | |
| 463 | + `; | |
| 464 | + this.results.innerHTML = ` | |
| 465 | + <div class="wdk-search-empty"> | |
| 466 | + Search failed | |
| 467 | + </div> | |
| 468 | + `; | |
| 469 | + } | |
| 470 | + } | |
| 471 | + | |
| 472 | + onDocumentClick(e) { | |
| 473 | + if (!e.target.closest('.wdk-toolbar-search')) { | |
| 474 | + this.results.hidden = true; | |
| 475 | + } | |
| 476 | + } | |
| 477 | + | |
| 478 | + onFocus() { | |
| 479 | + if (this.results.children.length) { | |
| 480 | + this.results.hidden = false; | |
| 481 | + } | |
| 482 | + } | |
| 483 | + | |
| 484 | + onKeyDown(e) { | |
| 485 | + if (e.key === 'Escape') { | |
| 486 | + this.results.hidden = true; | |
| 487 | + } | |
| 488 | + } | |
| 489 | + } | |
| 490 | + | |
| 491 | + // Initialize on DOMContentLoaded | |
| 492 | + const wdkListingSearchElem = document.getElementById('wdk-listing-search'); | |
| 493 | + if (wdkListingSearchElem) { | |
| 494 | + new WDKListingSearch('#wdk-listing-search', '.wdk-search-results', wdkListingSearchElem.getAttribute('idexecuted')); | |
| 495 | + } | |
| 496 | +}); | |
| 497 | + | |
| 498 | + | |
| 499 | + | |
