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