1/** 2 * webtrees: online genealogy 3 * Copyright (C) 2022 webtrees development team 4 * This program is free software: you can redistribute it and/or modify 5 * it under the terms of the GNU General Public License as published by 6 * the Free Software Foundation, either version 3 of the License, or 7 * (at your option) any later version. 8 * This program is distributed in the hope that it will be useful, 9 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 * GNU General Public License for more details. 12 * You should have received a copy of the GNU General Public License 13 * along with this program. If not, see <http://www.gnu.org/licenses/>. 14 */ 15 16'use strict'; 17 18(function (webtrees) { 19 const lang = document.documentElement.lang; 20 21 // Identify the script used by some text. 22 const scriptRegexes = { 23 Han: /[\u3400-\u9FCC]/, 24 Grek: /[\u0370-\u03FF]/, 25 Cyrl: /[\u0400-\u04FF]/, 26 Hebr: /[\u0590-\u05FF]/, 27 Arab: /[\u0600-\u06FF]/ 28 }; 29 30 /** 31 * Tidy the whitespace in a string. 32 * @param {string} str 33 * @returns {string} 34 */ 35 function trim (str) { 36 return str.replace(/\s+/g, ' ').trim(); 37 } 38 39 /** 40 * Simple wrapper around fetch() with our preferred headers 41 * 42 * @param {string} url 43 * @returns {Promise} 44 */ 45 webtrees.httpGet = function (url) { 46 const options = { 47 method: 'GET', 48 credentials: 'same-origin', 49 referrerPolicy: 'same-origin', 50 headers: new Headers({ 51 'x-requested-with': 'XMLHttpRequest', 52 }) 53 }; 54 55 return fetch(url, options); 56 } 57 58 /** 59 * Simple wrapper around fetch() with our preferred headers 60 * 61 * @param {string} url 62 * @param {string|FormData} body 63 * @returns {Promise} 64 */ 65 webtrees.httpPost= function (url, body = '') { 66 const csrfToken = document.head.querySelector('meta[name=csrf]').getAttribute('content'); 67 68 const options = { 69 body: body, 70 method: 'POST', 71 credentials: 'same-origin', 72 referrerPolicy: 'same-origin', 73 headers: new Headers({ 74 'X-CSRF-TOKEN': csrfToken, 75 'x-requested-with': 'XMLHttpRequest', 76 }) 77 }; 78 79 return fetch(url, options, body); 80 } 81 82 /** 83 * Look for non-latin characters in a string. 84 * @param {string} str 85 * @returns {string} 86 */ 87 webtrees.detectScript = function (str) { 88 for (const script in scriptRegexes) { 89 if (str.match(scriptRegexes[script])) { 90 return script; 91 } 92 } 93 94 return 'Latn'; 95 }; 96 97 /** 98 * In some languages, the SURN uses a male/default form, but NAME uses a gender-inflected form. 99 * @param {string} surname 100 * @param {string} sex 101 * @returns {string} 102 */ 103 function inflectSurname (surname, sex) { 104 if (lang === 'pl' && sex === 'F') { 105 return surname 106 .replace(/ski$/, 'ska') 107 .replace(/cki$/, 'cka') 108 .replace(/dzki$/, 'dzka') 109 .replace(/żki$/, 'żka'); 110 } 111 112 return surname; 113 } 114 115 /** 116 * Build a NAME from a NPFX, GIVN, SPFX, SURN and NSFX parts. 117 * Assumes the language of the document is the same as the language of the name. 118 * @param {string} npfx 119 * @param {string} givn 120 * @param {string} spfx 121 * @param {string} surn 122 * @param {string} nsfx 123 * @param {string} sex 124 * @returns {string} 125 */ 126 webtrees.buildNameFromParts = function (npfx, givn, spfx, surn, nsfx, sex) { 127 const usesCJK = webtrees.detectScript(npfx + givn + spfx + givn + surn + nsfx) === 'Han'; 128 const separator = usesCJK ? '' : ' '; 129 const surnameFirst = usesCJK || ['hu', 'jp', 'ko', 'vi', 'zh-Hans', 'zh-Hant'].indexOf(lang) !== -1; 130 const patronym = ['is'].indexOf(lang) !== -1; 131 const slash = patronym ? '' : '/'; 132 133 // GIVN and SURN may be a comma-separated lists. 134 npfx = trim(npfx); 135 givn = trim(givn.replace(/,/g, separator)); 136 spfx = trim(spfx); 137 surn = inflectSurname(trim(surn.replace(/,/g, separator)), sex); 138 nsfx = trim(nsfx); 139 140 const surname_separator = spfx.endsWith('\'') || spfx.endsWith('‘') ? '' : ' '; 141 142 const surname = trim(spfx + surname_separator + surn); 143 144 const name = surnameFirst ? slash + surname + slash + separator + givn : givn + separator + slash + surname + slash; 145 146 return trim(npfx + separator + name + separator + nsfx); 147 }; 148 149 // Insert text at the current cursor position in a text field. 150 webtrees.pasteAtCursor = function (element, text) { 151 if (element !== null) { 152 const caret_pos = element.selectionStart + text.length; 153 const textBefore = element.value.substring(0, element.selectionStart); 154 const textAfter = element.value.substring(element.selectionEnd); 155 element.value = textBefore + text + textAfter; 156 element.setSelectionRange(caret_pos, caret_pos); 157 element.focus(); 158 } 159 }; 160 161 /** 162 * @param {Element} datefield 163 * @param {string} dmy 164 */ 165 webtrees.reformatDate = function (datefield, dmy) { 166 const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']; 167 const hijri_months = ['MUHAR', 'SAFAR', 'RABIA', 'RABIT', 'JUMAA', 'JUMAT', 'RAJAB', 'SHAAB', 'RAMAD', 'SHAWW', 'DHUAQ', 'DHUAH']; 168 const hebrew_months = ['TSH', 'CSH', 'KSL', 'TVT', 'SHV', 'ADR', 'ADS', 'NSN', 'IYR', 'SVN', 'TMZ', 'AAV', 'ELL']; 169 const french_months = ['VEND', 'BRUM', 'FRIM', 'NIVO', 'PLUV', 'VENT', 'GERM', 'FLOR', 'PRAI', 'MESS', 'THER', 'FRUC', 'COMP']; 170 const jalali_months = ['FARVA', 'ORDIB', 'KHORD', 'TIR', 'MORDA', 'SHAHR', 'MEHR', 'ABAN', 'AZAR', 'DEY', 'BAHMA', 'ESFAN']; 171 172 let datestr = datefield.value; 173 // if a date has a date phrase marked by () this has to be excluded from altering 174 let datearr = datestr.split('('); 175 let datephrase = ''; 176 if (datearr.length > 1) { 177 datestr = datearr[0]; 178 datephrase = datearr[1]; 179 } 180 181 // Gedcom dates are upper case 182 datestr = datestr.toUpperCase(); 183 // Gedcom dates have no leading/trailing/repeated whitespace 184 datestr = datestr.replace(/\s+/g, ' '); 185 datestr = datestr.replace(/(^\s)|(\s$)/, ''); 186 // Gedcom dates have spaces between letters and digits, e.g. "01JAN2000" => "01 JAN 2000" 187 datestr = datestr.replace(/(\d)([A-Z])/g, '$1 $2'); 188 datestr = datestr.replace(/([A-Z])(\d)/g, '$1 $2'); 189 190 // Shortcut for quarter format, "Q1 1900" => "BET JAN 1900 AND MAR 1900". 191 if (datestr.match(/^Q ([1-4]) (\d\d\d\d)$/)) { 192 datestr = 'BET ' + months[RegExp.$1 * 3 - 3] + ' ' + RegExp.$2 + ' AND ' + months[RegExp.$1 * 3 - 1] + ' ' + RegExp.$2; 193 } 194 195 // Shortcut for @#Dxxxxx@ 01 01 1400, etc. 196 if (datestr.match(/^(@#DHIJRI@|HIJRI)( \d?\d )(\d?\d)( \d?\d?\d?\d)$/)) { 197 datestr = '@#DHIJRI@' + RegExp.$2 + hijri_months[parseInt(RegExp.$3, 10) - 1] + RegExp.$4; 198 } 199 if (datestr.match(/^(@#DJALALI@|JALALI)( \d?\d )(\d?\d)( \d?\d?\d?\d)$/)) { 200 datestr = '@#DJALALI@' + RegExp.$2 + jalali_months[parseInt(RegExp.$3, 10) - 1] + RegExp.$4; 201 } 202 if (datestr.match(/^(@#DHEBREW@|HEBREW)( \d?\d )(\d?\d)( \d?\d?\d?\d)$/)) { 203 datestr = '@#DHEBREW@' + RegExp.$2 + hebrew_months[parseInt(RegExp.$3, 10) - 1] + RegExp.$4; 204 } 205 if (datestr.match(/^(@#DFRENCH R@|FRENCH)( \d?\d )(\d?\d)( \d?\d?\d?\d)$/)) { 206 datestr = '@#DFRENCH R@' + RegExp.$2 + french_months[parseInt(RegExp.$3, 10) - 1] + RegExp.$4; 207 } 208 209 // All digit dates 210 datestr = datestr.replace(/(\d\d)(\d\d)(\d\d)(\d\d)/g, function () { 211 if (RegExp.$1 > '12' && RegExp.$3 <= '12' && RegExp.$4 <= '31') { 212 return RegExp.$4 + ' ' + months[RegExp.$3 - 1] + ' ' + RegExp.$1 + RegExp.$2; 213 } 214 if (RegExp.$1 <= '31' && RegExp.$2 <= '12' && RegExp.$3 > '12') { 215 return RegExp.$1 + ' ' + months[RegExp.$2 - 1] + ' ' + RegExp.$3 + RegExp.$4; 216 } 217 return RegExp.$1 + RegExp.$2 + RegExp.$3 + RegExp.$4; 218 }); 219 220 // e.g. 17.11.1860, 2 4 1987, 3/4/2005, 1999-12-31. Use locale settings since DMY order is ambiguous. 221 datestr = datestr.replace(/(\d+)([ ./-])(\d+)(\2)(\d+)/g, function () { 222 let f1 = parseInt(RegExp.$1, 10); 223 let f2 = parseInt(RegExp.$3, 10); 224 let f3 = parseInt(RegExp.$5, 10); 225 let yyyy = new Date().getFullYear(); 226 let yy = yyyy % 100; 227 let cc = yyyy - yy; 228 if ((dmy === 'DMY' || f1 > 13 && f3 > 31) && f1 <= 31 && f2 <= 12) { 229 return f1 + ' ' + months[f2 - 1] + ' ' + (f3 >= 100 ? f3 : (f3 <= yy ? f3 + cc : f3 + cc - 100)); 230 } 231 if ((dmy === 'MDY' || f2 > 13 && f3 > 31) && f1 <= 12 && f2 <= 31) { 232 return f2 + ' ' + months[f1 - 1] + ' ' + (f3 >= 100 ? f3 : (f3 <= yy ? f3 + cc : f3 + cc - 100)); 233 } 234 if ((dmy === 'YMD' || f1 > 31) && f2 <= 12 && f3 <= 31) { 235 return f3 + ' ' + months[f2 - 1] + ' ' + (f1 >= 100 ? f1 : (f1 <= yy ? f1 + cc : f1 + cc - 100)); 236 } 237 return RegExp.$1 + RegExp.$2 + RegExp.$3 + RegExp.$4 + RegExp.$5; 238 }); 239 240 datestr = datestr 241 // Shortcuts for date ranges 242 .replace(/^[>]([\w ]+)$/, 'AFT $1') 243 .replace(/^[<]([\w ]+)$/, 'BEF $1') 244 .replace(/^([\w ]+)[-]$/, 'FROM $1') 245 .replace(/^[-]([\w ]+)$/, 'TO $1') 246 .replace(/^[~]([\w ]+)$/, 'ABT $1') 247 .replace(/^[*]([\w ]+)$/, 'EST $1') 248 .replace(/^[#]([\w ]+)$/, 'CAL $1') 249 .replace(/^([\w ]+) ?- ?([\w ]+)$/, 'BET $1 AND $2') 250 .replace(/^([\w ]+) ?~ ?([\w ]+)$/, 'FROM $1 TO $2') 251 // Convert full months to short months 252 .replace(/JANUARY/g, 'JAN') 253 .replace(/FEBRUARY/g, 'FEB') 254 .replace(/MARCH/g, 'MAR') 255 .replace(/APRIL/g, 'APR') 256 .replace(/JUNE/g, 'JUN') 257 .replace(/JULY/g, 'JUL') 258 .replace(/AUGUST/g, 'AUG') 259 .replace(/SEPTEMBER/g, 'SEP') 260 .replace(/OCTOBER/, 'OCT') 261 .replace(/NOVEMBER/g, 'NOV') 262 .replace(/DECEMBER/g, 'DEC') 263 // Americans enter dates as SEP 20, 1999 264 .replace(/(JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC)\.? (\d\d?)[, ]+(\d\d\d\d)/g, '$2 $1 $3') 265 // Apply leading zero to day numbers 266 .replace(/(^| )(\d [A-Z]{3,5} \d{4})/g, '$10$2'); 267 268 if (datephrase) { 269 datestr = datestr + ' (' + datephrase; 270 } 271 272 // Only update it if is has been corrected - otherwise input focus 273 // moves to the end of the field unnecessarily 274 if (datefield.value !== datestr) { 275 datefield.value = datestr; 276 } 277 }; 278 279 let monthLabels = []; 280 monthLabels[1] = 'January'; 281 monthLabels[2] = 'February'; 282 monthLabels[3] = 'March'; 283 monthLabels[4] = 'April'; 284 monthLabels[5] = 'May'; 285 monthLabels[6] = 'June'; 286 monthLabels[7] = 'July'; 287 monthLabels[8] = 'August'; 288 monthLabels[9] = 'September'; 289 monthLabels[10] = 'October'; 290 monthLabels[11] = 'November'; 291 monthLabels[12] = 'December'; 292 293 let monthShort = []; 294 monthShort[1] = 'JAN'; 295 monthShort[2] = 'FEB'; 296 monthShort[3] = 'MAR'; 297 monthShort[4] = 'APR'; 298 monthShort[5] = 'MAY'; 299 monthShort[6] = 'JUN'; 300 monthShort[7] = 'JUL'; 301 monthShort[8] = 'AUG'; 302 monthShort[9] = 'SEP'; 303 monthShort[10] = 'OCT'; 304 monthShort[11] = 'NOV'; 305 monthShort[12] = 'DEC'; 306 307 let daysOfWeek = []; 308 daysOfWeek[0] = 'S'; 309 daysOfWeek[1] = 'M'; 310 daysOfWeek[2] = 'T'; 311 daysOfWeek[3] = 'W'; 312 daysOfWeek[4] = 'T'; 313 daysOfWeek[5] = 'F'; 314 daysOfWeek[6] = 'S'; 315 316 let weekStart = 0; 317 318 /** 319 * @param {string} jan 320 * @param {string} feb 321 * @param {string} mar 322 * @param {string} apr 323 * @param {string} may 324 * @param {string} jun 325 * @param {string} jul 326 * @param {string} aug 327 * @param {string} sep 328 * @param {string} oct 329 * @param {string} nov 330 * @param {string} dec 331 * @param {string} sun 332 * @param {string} mon 333 * @param {string} tue 334 * @param {string} wed 335 * @param {string} thu 336 * @param {string} fri 337 * @param {string} sat 338 * @param {number} day 339 */ 340 webtrees.calLocalize = function (jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec, sun, mon, tue, wed, thu, fri, sat, day) { 341 monthLabels[1] = jan; 342 monthLabels[2] = feb; 343 monthLabels[3] = mar; 344 monthLabels[4] = apr; 345 monthLabels[5] = may; 346 monthLabels[6] = jun; 347 monthLabels[7] = jul; 348 monthLabels[8] = aug; 349 monthLabels[9] = sep; 350 monthLabels[10] = oct; 351 monthLabels[11] = nov; 352 monthLabels[12] = dec; 353 daysOfWeek[0] = sun; 354 daysOfWeek[1] = mon; 355 daysOfWeek[2] = tue; 356 daysOfWeek[3] = wed; 357 daysOfWeek[4] = thu; 358 daysOfWeek[5] = fri; 359 daysOfWeek[6] = sat; 360 361 if (day >= 0 && day < 7) { 362 weekStart = day; 363 } 364 }; 365 366 /** 367 * @param {string} dateDivId 368 * @param {string} dateFieldId 369 * @returns {boolean} 370 */ 371 webtrees.calendarWidget = function (dateDivId, dateFieldId) { 372 let dateDiv = document.getElementById(dateDivId); 373 let dateField = document.getElementById(dateFieldId); 374 375 if (dateDiv.style.visibility === 'visible') { 376 dateDiv.style.visibility = 'hidden'; 377 return false; 378 } 379 if (dateDiv.style.visibility === 'show') { 380 dateDiv.style.visibility = 'hide'; 381 return false; 382 } 383 384 /* Javascript calendar functions only work with precise gregorian dates "D M Y" or "Y" */ 385 let greg_regex = /(?:(\d*) ?(JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC) )?(\d+)/i; 386 let date; 387 if (greg_regex.exec(dateField.value)) { 388 let day = RegExp.$1 || '1'; 389 let month = RegExp.$2 || 'JAN' 390 let year = RegExp.$3; 391 date = new Date(day + ' ' + month + ' ' + year); 392 } else { 393 date = new Date(); 394 } 395 396 dateDiv.innerHTML = calGenerateSelectorContent(dateFieldId, dateDivId, date); 397 if (dateDiv.style.visibility === 'hidden') { 398 dateDiv.style.visibility = 'visible'; 399 return false; 400 } 401 if (dateDiv.style.visibility === 'hide') { 402 dateDiv.style.visibility = 'show'; 403 return false; 404 } 405 406 return false; 407 }; 408 409 /** 410 * @param {string} dateFieldId 411 * @param {string} dateDivId 412 * @param {Date} date 413 * @returns {string} 414 */ 415 function calGenerateSelectorContent (dateFieldId, dateDivId, date) { 416 let i, j; 417 let content = '<table border="1"><tr>'; 418 content += '<td><select class="form-select" id="' + dateFieldId + '_daySelect" onchange="return webtrees.calUpdateCalendar(\'' + dateFieldId + '\', \'' + dateDivId + '\');">'; 419 for (i = 1; i < 32; i++) { 420 content += '<option value="' + i + '"'; 421 if (date.getDate() === i) { 422 content += ' selected="selected"'; 423 } 424 content += '>' + i + '</option>'; 425 } 426 content += '</select></td>'; 427 content += '<td><select class="form-select" id="' + dateFieldId + '_monSelect" onchange="return webtrees.calUpdateCalendar(\'' + dateFieldId + '\', \'' + dateDivId + '\');">'; 428 for (i = 1; i < 13; i++) { 429 content += '<option value="' + i + '"'; 430 if (date.getMonth() + 1 === i) { 431 content += ' selected="selected"'; 432 } 433 content += '>' + monthLabels[i] + '</option>'; 434 } 435 content += '</select></td>'; 436 content += '<td><input class="form-control" type="text" id="' + dateFieldId + '_yearInput" size="5" value="' + date.getFullYear() + '" onchange="return webtrees.calUpdateCalendar(\'' + dateFieldId + '\', \'' + dateDivId + '\');" /></td></tr>'; 437 content += '<tr><td colspan="3">'; 438 content += '<table width="100%">'; 439 content += '<tr>'; 440 j = weekStart; 441 for (i = 0; i < 7; i++) { 442 content += '<td '; 443 content += 'class="descriptionbox"'; 444 content += '>'; 445 content += daysOfWeek[j]; 446 content += '</td>'; 447 j++; 448 if (j > 6) { 449 j = 0; 450 } 451 } 452 content += '</tr>'; 453 454 let tdate = new Date(date.getFullYear(), date.getMonth(), 1); 455 let day = tdate.getDay(); 456 day = day - weekStart; 457 let daymilli = 1000 * 60 * 60 * 24; 458 tdate = tdate.getTime() - (day * daymilli) + (daymilli / 2); 459 tdate = new Date(tdate); 460 461 for (j = 0; j < 6; j++) { 462 content += '<tr>'; 463 for (i = 0; i < 7; i++) { 464 content += '<td '; 465 if (tdate.getMonth() === date.getMonth()) { 466 if (tdate.getDate() === date.getDate()) { 467 content += 'class="descriptionbox"'; 468 } else { 469 content += 'class="optionbox"'; 470 } 471 } else { 472 content += 'style="background-color:#EAEAEA; border: solid #AAAAAA 1px;"'; 473 } 474 content += '><a href="#" onclick="return webtrees.calDateClicked(\'' + dateFieldId + '\', \'' + dateDivId + '\', ' + tdate.getFullYear() + ', ' + tdate.getMonth() + ', ' + tdate.getDate() + ');">'; 475 content += tdate.getDate(); 476 content += '</a></td>'; 477 let datemilli = tdate.getTime() + daymilli; 478 tdate = new Date(datemilli); 479 } 480 content += '</tr>'; 481 } 482 content += '</table>'; 483 content += '</td></tr>'; 484 content += '</table>'; 485 486 return content; 487 } 488 489 /** 490 * @param {string} dateFieldId 491 * @param {number} year 492 * @param {number} month 493 * @param {number} day 494 * @returns {boolean} 495 */ 496 function calSetDateField (dateFieldId, year, month, day) { 497 let dateField = document.getElementById(dateFieldId); 498 dateField.value = (day < 10 ? '0' : '') + day + ' ' + monthShort[month + 1] + ' ' + year; 499 return false; 500 } 501 502 /** 503 * @param {string} dateFieldId 504 * @param {string} dateDivId 505 * @returns {boolean} 506 */ 507 webtrees.calUpdateCalendar = function (dateFieldId, dateDivId) { 508 let dateSel = document.getElementById(dateFieldId + '_daySelect'); 509 if (!dateSel) { 510 return false; 511 } 512 let monthSel = document.getElementById(dateFieldId + '_monSelect'); 513 if (!monthSel) { 514 return false; 515 } 516 let yearInput = document.getElementById(dateFieldId + '_yearInput'); 517 if (!yearInput) { 518 return false; 519 } 520 521 let month = parseInt(monthSel.options[monthSel.selectedIndex].value, 10); 522 month = month - 1; 523 524 let date = new Date(yearInput.value, month, dateSel.options[dateSel.selectedIndex].value); 525 calSetDateField(dateFieldId, date.getFullYear(), date.getMonth(), date.getDate()); 526 527 let dateDiv = document.getElementById(dateDivId); 528 if (!dateDiv) { 529 alert('no dateDiv ' + dateDivId); 530 return false; 531 } 532 dateDiv.innerHTML = calGenerateSelectorContent(dateFieldId, dateDivId, date); 533 534 return false; 535 }; 536 537 /** 538 * @param {string} dateFieldId 539 * @param {string} dateDivId 540 * @param {number} year 541 * @param {number} month 542 * @param {number} day 543 * @returns {boolean} 544 */ 545 webtrees.calDateClicked = function (dateFieldId, dateDivId, year, month, day) { 546 calSetDateField(dateFieldId, year, month, day); 547 webtrees.calendarWidget(dateDivId, dateFieldId); 548 return false; 549 }; 550 551 /** 552 * Make bootstrap "collapse" elements persistent. 553 * 554 * @param {HTMLElement} element 555 */ 556 webtrees.persistentToggle = function (element) { 557 const key = 'state-of-' + element.dataset.wtPersist; 558 const previous_state = localStorage.getItem(key); 559 560 // Accordion buttons have aria-expanded. Checkboxes are checked/unchecked 561 const current_state = element.getAttribute('aria-expanded') ?? element.checked.toString(); 562 563 // Previously selected? Select again now. 564 if (previous_state !== null && previous_state !== current_state) { 565 element.click(); 566 } 567 568 // Remember state for the next page load. 569 element.addEventListener('click', function () { 570 if (element.type === 'checkbox') { 571 localStorage.setItem(key, element.checked.toString()); 572 } 573 if (element.type === 'button') { 574 localStorage.setItem(key, element.getAttribute('aria-expanded')); 575 } 576 }); 577 }; 578 579 /** 580 * @param {Element} field 581 * @param {string} pos 582 * @param {string} neg 583 */ 584 function reformatLatLong (field, pos, neg) { 585 // valid LATI or LONG according to Gedcom standard 586 // pos (+) : N or E 587 // neg (-) : S or W 588 let txt = field.value.toUpperCase(); 589 txt = txt.replace(/(^\s*)|(\s*$)/g, ''); // trim 590 txt = txt.replace(/ /g, ':'); // N12 34 ==> N12.34 591 txt = txt.replace(/\+/g, ''); // +17.1234 ==> 17.1234 592 txt = txt.replace(/-/g, neg); // -0.5698 ==> W0.5698 593 txt = txt.replace(/,/g, '.'); // 0,5698 ==> 0.5698 594 // 0°34'11 ==> 0:34:11 595 txt = txt.replace(/\u00b0/g, ':'); // ° 596 txt = txt.replace(/\u0027/g, ':'); // ' 597 // 0:34:11.2W ==> W0.5698 598 txt = txt.replace(/^([0-9]+):([0-9]+):([0-9.]+)(.*)/g, function ($0, $1, $2, $3, $4) { 599 let n = parseFloat($1); 600 n += ($2 / 60); 601 n += ($3 / 3600); 602 n = Math.round(n * 1E4) / 1E4; 603 return $4 + n; 604 }); 605 // 0:34W ==> W0.5667 606 txt = txt.replace(/^([0-9]+):([0-9]+)(.*)/g, function ($0, $1, $2, $3) { 607 let n = parseFloat($1); 608 n += ($2 / 60); 609 n = Math.round(n * 1E4) / 1E4; 610 return $3 + n; 611 }); 612 // 0.5698W ==> W0.5698 613 txt = txt.replace(/(.*)(NSEW])$/g, '$2$1'); 614 // 17.1234 ==> N17.1234 615 if (txt && txt.charAt(0) !== neg && txt.charAt(0) !== pos) { 616 txt = pos + txt; 617 } 618 field.value = txt; 619 } 620 621 /** 622 * @param {Element} field 623 */ 624 webtrees.reformatLatitude = function (field) { 625 return reformatLatLong(field, 'N', 'S'); 626 }; 627 628 /** 629 * @param {Element} field 630 */ 631 webtrees.reformatLongitude = function (field) { 632 return reformatLatLong(field, 'E', 'W'); 633 }; 634 635 /** 636 * Initialize autocomplete elements. 637 * @param {string} selector 638 */ 639 webtrees.autocomplete = function (selector) { 640 // Use typeahead/bloodhound for autocomplete 641 $(selector).each(function () { 642 const that = this; 643 $(this).typeahead(null, { 644 display: 'value', 645 limit: 10, 646 minLength: 2, 647 source: new Bloodhound({ 648 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 649 queryTokenizer: Bloodhound.tokenizers.whitespace, 650 remote: { 651 url: this.dataset.wtAutocompleteUrl, 652 replace: function (url, uriEncodedQuery) { 653 const symbol = (url.indexOf("?") > 0) ? '&' : '?'; 654 if (that.dataset.wtAutocompleteExtra === 'SOUR') { 655 let row_group = that.closest('.wt-nested-edit-fields').previousElementSibling; 656 while (row_group.querySelector('select') === null) { 657 row_group = row_group.previousElementSibling; 658 } 659 const element = row_group.querySelector('select'); 660 const extra = element.options[element.selectedIndex].value.replace(/@/g, ''); 661 return url + symbol + "query=" + uriEncodedQuery + '&extra=' + encodeURIComponent(extra); 662 } 663 return url + symbol + "query=" + uriEncodedQuery 664 } 665 } 666 }) 667 }); 668 }); 669 }; 670 671 /** 672 * Create a LeafletJS map from a list of providers/layers. 673 * @param {string} id 674 * @param {object} config 675 * @param {function} resetCallback 676 * @returns Map 677 */ 678 webtrees.buildLeafletJsMap = function (id, config, resetCallback) { 679 const zoomControl = new L.control.zoom({ 680 zoomInTitle: config.i18n.zoomIn, 681 zoomoutTitle: config.i18n.zoomOut, 682 }); 683 684 const resetControl = L.Control.extend({ 685 options: { 686 position: 'topleft', 687 }, 688 onAdd: () => { 689 const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom'); 690 const anchor = L.DomUtil.create('a', 'leaflet-control-reset', container); 691 692 anchor.href = '#'; 693 anchor.setAttribute('aria-label', config.i18n.reset); /* Firefox doesn't yet support element.ariaLabel */ 694 anchor.title = config.i18n.reset; 695 anchor.role = 'button'; 696 anchor.innerHTML = config.icons.reset; 697 anchor.onclick = resetCallback; 698 699 return container; 700 }, 701 }); 702 703 const fullscreenControl = L.Control.extend({ 704 options: { 705 position: 'topleft', 706 }, 707 onAdd: (map) => { 708 const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom'); 709 const anchor = L.DomUtil.create('a', 'leaflet-control-fullscreen', container); 710 711 anchor.setAttribute('role', 'button'); 712 anchor.dataset.wtFullscreen = '.wt-fullscreen-container'; 713 anchor.innerHTML = config.icons.fullScreen; 714 715 return container; 716 }, 717 }); 718 719 let defaultLayer = null; 720 721 for (let [, provider] of Object.entries(config.mapProviders)) { 722 for (let [, child] of Object.entries(provider.children)) { 723 if ('bingMapsKey' in child) { 724 child.layer = L.tileLayer.bing(child); 725 } else { 726 child.layer = L.tileLayer(child.url, child); 727 } 728 if (provider.default && child.default) { 729 defaultLayer = child.layer; 730 } 731 } 732 } 733 734 if (defaultLayer === null) { 735 console.log('No default map layer defined - using the first one.'); 736 let defaultLayer = config.mapProviders[0].children[0].layer; 737 } 738 739 740 // Create the map with all controls and layers 741 return L.map(id, { 742 zoomControl: false, 743 }) 744 .addControl(zoomControl) 745 .addControl(new fullscreenControl) 746 .addControl(new resetControl()) 747 .addLayer(defaultLayer) 748 .addControl(L.control.layers.tree(config.mapProviders, null, { 749 closedSymbol: config.icons.expand, 750 openedSymbol: config.icons.collapse, 751 })); 752 753 }; 754 755 /** 756 * Initialize a tom-select input 757 * @param {Element} element 758 * @returns {TomSelect} 759 */ 760 webtrees.initializeTomSelect = function (element) { 761 if (element.tomselect) { 762 return element.tomselect; 763 } 764 765 if (element.dataset.url) { 766 let options = { 767 plugins: ['dropdown_input', 'virtual_scroll'], 768 maxOptions: false, 769 searchField: [], // We filter on the server, so don't filter on the client. 770 render: { 771 item: (data, escape) => '<div>' + data.text + '</div>', 772 option: (data, escape) => '<div>' + data.text + '</div>', 773 }, 774 firstUrl: query => element.dataset.url + '&query=' + encodeURIComponent(query), 775 load: function (query, callback) { 776 webtrees.httpGet(this.getUrl(query)) 777 .then(response => response.json()) 778 .then(json => { 779 if (json.nextUrl !== null) { 780 this.setNextUrl(query, json.nextUrl + '&query=' + encodeURIComponent(query)); 781 } 782 callback(json.data); 783 }) 784 .catch(callback); 785 }, 786 }; 787 788 if (!element.required) { 789 options.plugins.push('clear_button'); 790 } 791 792 return new TomSelect(element, options); 793 } 794 795 if (element.multiple) { 796 return new TomSelect(element, { plugins: ['caret_position', 'remove_button'] }); 797 } 798 799 if (!element.required) { 800 return new TomSelect(element, { plugins: ['clear_button'] }); 801 } 802 803 return new TomSelect(element, { }); 804 } 805 806 /** 807 * Reset a tom-select input to have a single selected option 808 * @param {TomSelect} tomSelect 809 * @param {string} value 810 * @param {string} text 811 */ 812 webtrees.resetTomSelect = function (tomSelect, value, text) { 813 tomSelect.clear(true); 814 tomSelect.clearOptions(); 815 tomSelect.addOption({ value: value, text: text }); 816 tomSelect.refreshOptions(); 817 tomSelect.addItem(value, true); 818 tomSelect.refreshItems(); 819 }; 820 821 /** 822 * Toggle the visibility/status of INDI/FAM/SOUR/REPO/OBJE selectors 823 * 824 * @param {Element} select 825 * @param {Element} container 826 */ 827 webtrees.initializeIFSRO = function(select, container) { 828 select.addEventListener('change', function () { 829 // Show only the selected selector. 830 container.querySelectorAll('.select-record').forEach(element => element.classList.add('d-none')); 831 container.querySelectorAll('.select-' + select.value).forEach(element => element.classList.remove('d-none')); 832 833 // Enable only the selected selector (so that disabled ones do not get submitted). 834 container.querySelectorAll('.select-record select').forEach(element => { 835 element.disabled = true; 836 if (element.matches('.tom-select')) { 837 element.tomselect.disable(); 838 } 839 }); 840 container.querySelectorAll('.select-' + select.value + ' select').forEach(element => { 841 element.disabled = false; 842 if (element.matches('.tom-select')) { 843 element.tomselect.enable(); 844 } 845 }); 846 }); 847 }; 848 849 /** 850 * Save a form using ajax, for use in modals 851 * 852 * @param {Event} event 853 */ 854 webtrees.createRecordModalSubmit = function (event) { 855 event.preventDefault(); 856 const form = event.target; 857 const modal = document.getElementById('wt-ajax-modal') 858 const modal_content = modal.querySelector('.modal-content'); 859 const select = document.getElementById(modal_content.dataset.wtSelectId); 860 861 webtrees.httpPost(form.action, new FormData(form)) 862 .then(response => response.json()) 863 .then(json => { 864 if (select) { 865 // This modal was activated by the "create new" button in a select edit control. 866 webtrees.resetTomSelect(select.tomselect, json.value, json.text); 867 868 bootstrap.Modal.getInstance(modal).hide(); 869 } else { 870 // Show the success message in the existing modal. 871 modal_content.innerHTML = json.html; 872 } 873 }) 874 .catch(error => { 875 modal_content.innerHTML = error; 876 }); 877 }; 878 879 /** 880 * Text areas don't support the pattern attribute, so apply it manually via data-wt-pattern. 881 * 882 * @param {HTMLFormElement} form 883 */ 884 webtrees.textareaPatterns = function (form) { 885 form.addEventListener('submit', function (event) { 886 event.target.querySelectorAll('textarea[data-wt-pattern]').forEach(function (element) { 887 const pattern = new RegExp('^' + element.dataset.wtPattern + '$'); 888 889 if (!element.readOnly && element.value !== '' && !pattern.test(element.value)) { 890 event.preventDefault(); 891 event.stopPropagation(); 892 element.classList.add('is-invalid'); 893 element.scrollIntoView(); 894 } else { 895 element.classList.remove('is-invalid'); 896 } 897 }); 898 }); 899 }; 900}(window.webtrees = window.webtrees || {})); 901 902// Send the CSRF token on all AJAX requests 903$.ajaxSetup({ 904 headers: { 905 'X-CSRF-TOKEN': $('meta[name=csrf]').attr('content') 906 } 907}); 908 909/** 910 * Initialisation 911 */ 912$(function () { 913 // Page elements that load automatically via AJAX. 914 // This prevents bad robots from crawling resource-intensive pages. 915 $('[data-wt-ajax-url]').each(function () { 916 $(this).load(this.dataset.wtAjaxUrl); 917 }); 918 919 // Autocomplete 920 webtrees.autocomplete('input[data-wt-autocomplete-url]'); 921 922 document.querySelectorAll('.tom-select').forEach(element => webtrees.initializeTomSelect(element)); 923 924 // If we clear the select (using the "X" button), we need an empty value 925 // (rather than no value at all) for (non-multiple) selects with name="array[]" 926 document.querySelectorAll('select.tom-select:not([multiple])') 927 .forEach(function (element) { 928 element.addEventListener('clear', function () { 929 webtrees.resetTomSelect(element.tomselect, '', ''); 930 }); 931 }); 932 933 // Datatables - locale aware sorting 934 $.fn.dataTableExt.oSort['text-asc'] = function (x, y) { 935 return x.localeCompare(y, document.documentElement.lang, { sensitivity: 'base' }); 936 }; 937 $.fn.dataTableExt.oSort['text-desc'] = function (x, y) { 938 return y.localeCompare(x, document.documentElement.lang, { sensitivity: 'base' }); 939 }; 940 941 // DataTables - start hidden to prevent FOUC. 942 $('table.datatables').each(function () { 943 $(this).DataTable(); 944 $(this).removeClass('d-none'); 945 }); 946 947 // Save button/checkbox state between pages 948 document.querySelectorAll('[data-wt-persist]') 949 .forEach((element) => webtrees.persistentToggle(element)); 950 951 // Activate the on-screen keyboard 952 let osk_focus_element; 953 $('.wt-osk-trigger').click(function () { 954 // When a user clicks the icon, set focus to the corresponding input 955 osk_focus_element = document.getElementById(this.dataset.wtId); 956 osk_focus_element.focus(); 957 $('.wt-osk').show(); 958 }); 959 $('.wt-osk-script-button').change(function () { 960 $('.wt-osk-script').prop('hidden', true); 961 $('.wt-osk-script-' + this.dataset.wtOskScript).prop('hidden', false); 962 }); 963 $('.wt-osk-shift-button').click(function () { 964 document.querySelector('.wt-osk-keys').classList.toggle('shifted'); 965 }); 966 $('.wt-osk-keys').on('click', '.wt-osk-key', function () { 967 let key = $(this).contents().get(0).nodeValue; 968 let shift_state = $('.wt-osk-shift-button').hasClass('active'); 969 let shift_key = $('sup', this)[0]; 970 if (shift_state && shift_key !== undefined) { 971 key = shift_key.innerText; 972 } 973 webtrees.pasteAtCursor(osk_focus_element, key); 974 if ($('.wt-osk-pin-button').hasClass('active') === false) { 975 $('.wt-osk').hide(); 976 } 977 osk_focus_element.dispatchEvent(new Event('input')); 978 }); 979 980 $('.wt-osk-close').on('click', function () { 981 $('.wt-osk').hide(); 982 }); 983 984 // Hide/Show password fields 985 $('input[type=password]').each(function () { 986 $(this).hideShowPassword('infer', true, { 987 states: { 988 shown: { 989 toggle: { 990 content: this.dataset.wtHidePasswordText, 991 attr: { 992 title: this.dataset.wtHidePasswordTitle, 993 'aria-label': this.dataset.wtHidePasswordTitle, 994 } 995 } 996 }, 997 hidden: { 998 toggle: { 999 content: this.dataset.wtShowPasswordText, 1000 attr: { 1001 title: this.dataset.wtShowPasswordTitle, 1002 'aria-label': this.dataset.wtShowPasswordTitle, 1003 } 1004 } 1005 } 1006 } 1007 }); 1008 }); 1009}); 1010 1011// Prevent form re-submission via accidental double-click. 1012document.addEventListener('submit', function (event) { 1013 const form = event.target; 1014 1015 if (form.reportValidity()) { 1016 form.addEventListener('submit', (event) => { 1017 if (form.classList.contains('form-is-submitting')) { 1018 event.preventDefault(); 1019 } 1020 1021 form.classList.add('form-is-submitting'); 1022 }); 1023 } 1024}); 1025 1026// Convert data-wt-* attributes into useful behavior. 1027document.addEventListener('click', (event) => { 1028 const target = event.target.closest('a,button'); 1029 1030 if (target === null) { 1031 return; 1032 } 1033 1034 if ('wtConfirm' in target.dataset && !confirm(target.dataset.wtConfirm)) { 1035 event.preventDefault(); 1036 return; 1037 } 1038 1039 if ('wtPostUrl' in target.dataset) { 1040 webtrees.httpPost(target.dataset.wtPostUrl).then(() => { 1041 if ('wtReloadUrl' in target.dataset) { 1042 // Go somewhere else. e.g. the home page after logout. 1043 document.location = target.dataset.wtReloadUrl; 1044 } else { 1045 // Reload the current page. e.g. change language. 1046 document.location.reload(); 1047 } 1048 }).catch((error) => { 1049 alert(error); 1050 }); 1051 } 1052 1053 if (('wtFullscreen' in target.dataset)) { 1054 event.stopPropagation(); 1055 1056 const element = target.closest(target.dataset.wtFullscreen); 1057 1058 if (document.fullscreenElement === element) { 1059 document.exitFullscreen() 1060 .catch((error) => alert(error)); 1061 } else { 1062 element.requestFullscreen() 1063 .catch((error) => alert(error)); 1064 } 1065 } 1066}); 1067