xref: /webtrees/resources/js/webtrees.js (revision d041e6d3fa63b507f566372520dcd1e303155eba)
1/**
2 * webtrees: online genealogy
3 * Copyright (C) 2021 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   * @returns Map
626   */
627  webtrees.buildLeafletJsMap = function (id, config) {
628    const zoomControl = new L.control.zoom({
629      zoomInTitle: config.i18n.zoomIn,
630      zoomoutTitle: config.i18n.zoomOut,
631    });
632
633    let defaultLayer = null;
634
635    for (let [, provider] of Object.entries(config.mapProviders)) {
636      for (let [, child] of Object.entries(provider.children)) {
637        if ('bingMapsKey' in child) {
638          child.layer = L.tileLayer.bing(child);
639        } else {
640          child.layer = L.tileLayer(child.url, child);
641        }
642        if (provider.default && child.default) {
643          defaultLayer = child.layer;
644        }
645      }
646    }
647
648    if (defaultLayer === null) {
649      console.log('No default map layer defined - using the first one.');
650      let defaultLayer = config.mapProviders[0].children[0].layer;
651    }
652
653
654    // Create the map with all controls and layers
655    return L.map(id, {
656      zoomControl: false,
657    })
658      .addControl(zoomControl)
659      .addLayer(defaultLayer)
660      .addControl(L.control.layers.tree(config.mapProviders, null, {
661        closedSymbol: config.icons.expand,
662        openedSymbol: config.icons.collapse,
663      }));
664
665  };
666}(window.webtrees = window.webtrees || {}));
667
668// Send the CSRF token on all AJAX requests
669$.ajaxSetup({
670  headers: {
671    'X-CSRF-TOKEN': $('meta[name=csrf]').attr('content')
672  }
673});
674
675/**
676 * Initialisation
677 */
678$(function () {
679  // Page elements that load automatically via AJAX.
680  // This prevents bad robots from crawling resource-intensive pages.
681  $('[data-wt-ajax-url]').each(function () {
682    $(this).load(this.dataset.wtAjaxUrl);
683  });
684
685  // Autocomplete
686  webtrees.autocomplete('input[data-wt-autocomplete-url]');
687
688  // Select2 - activate autocomplete fields
689  const lang = document.documentElement.lang;
690  const select2_languages = {
691    'zh-Hans': 'zh-CN',
692    'zh-Hant': 'zh-TW'
693  };
694  $('select.select2').select2({
695    language: select2_languages[lang] || lang,
696    // Needed for elements that are initially hidden.
697    width: '100%',
698    // Do not escape - we do it on the server.
699    escapeMarkup: function (x) {
700      return x;
701    }
702  });
703
704  // If we clear the select (using the "X" button), we need an empty value
705  // (rather than no value at all) for (non-multiple) selects with name="array[]"
706  $('select.select2:not([multiple])')
707    .on('select2:unselect', function (evt) {
708      $(evt.delegateTarget).html('<option value="" selected></option>');
709    });
710
711  // Datatables - locale aware sorting
712  $.fn.dataTableExt.oSort['text-asc'] = function (x, y) {
713    return x.localeCompare(y, document.documentElement.lang, { sensitivity: 'base' });
714  };
715  $.fn.dataTableExt.oSort['text-desc'] = function (x, y) {
716    return y.localeCompare(x, document.documentElement.lang, { sensitivity: 'base' });
717  };
718
719  // DataTables - start hidden to prevent FOUC.
720  $('table.datatables').each(function () {
721    $(this).DataTable();
722    $(this).removeClass('d-none');
723  });
724
725  // Save button/checkbox state between pages
726  document.querySelectorAll('[data-wt-persist]')
727    .forEach((element) => webtrees.persistentToggle(element));
728
729  // Activate the on-screen keyboard
730  let osk_focus_element;
731  $('.wt-osk-trigger').click(function () {
732    // When a user clicks the icon, set focus to the corresponding input
733    osk_focus_element = document.getElementById(this.dataset.wtId);
734    osk_focus_element.focus();
735    $('.wt-osk').show();
736  });
737  $('.wt-osk-script-button').change(function () {
738    $('.wt-osk-script').prop('hidden', true);
739    $('.wt-osk-script-' + this.dataset.wtOskScript).prop('hidden', false);
740  });
741  $('.wt-osk-shift-button').click(function () {
742    document.querySelector('.wt-osk-keys').classList.toggle('shifted');
743  });
744  $('.wt-osk-keys').on('click', '.wt-osk-key', function () {
745    let key = $(this).contents().get(0).nodeValue;
746    let shift_state = $('.wt-osk-shift-button').hasClass('active');
747    let shift_key = $('sup', this)[0];
748    if (shift_state && shift_key !== undefined) {
749      key = shift_key.innerText;
750    }
751    webtrees.pasteAtCursor(osk_focus_element, key);
752    if ($('.wt-osk-pin-button').hasClass('active') === false) {
753      $('.wt-osk').hide();
754    }
755    osk_focus_element.dispatchEvent(new Event('input'));
756  });
757
758  $('.wt-osk-close').on('click', function () {
759    $('.wt-osk').hide();
760  });
761
762  // Hide/Show password fields
763  $('input[type=password]').each(function () {
764    $(this).hideShowPassword('infer', true, {
765      states: {
766        shown: {
767          toggle: {
768            content: this.dataset.wtHidePasswordText,
769            attr: {
770              title: this.dataset.wtHidePasswordTitle,
771              'aria-label': this.dataset.wtHidePasswordTitle,
772            }
773          }
774        },
775        hidden: {
776          toggle: {
777            content: this.dataset.wtShowPasswordText,
778            attr: {
779              title: this.dataset.wtShowPasswordTitle,
780              'aria-label': this.dataset.wtShowPasswordTitle,
781            }
782          }
783        }
784      }
785    });
786  });
787});
788
789// Prevent form re-submission via accidental double-click.
790document.addEventListener('submit', function (event) {
791  const form = event.target;
792
793  if (form.reportValidity()) {
794    form.addEventListener('submit', (event) => {
795      if (form.classList.contains('form-is-submitting')) {
796        event.preventDefault();
797      }
798
799      form.classList.add('form-is-submitting');
800    });
801  }
802});
803
804// Convert data-wt-confirm and data-wt-post-url/data-wt-reload-url attributes into useful behavior.
805document.addEventListener('click', (event) => {
806  const target = event.target.closest('a,button');
807
808  if (target === null) {
809    return;
810  }
811
812  if ('wtConfirm' in target.dataset && !confirm(target.dataset.wtConfirm)) {
813    event.preventDefault();
814  }
815
816  if ('wtPostUrl' in target.dataset) {
817    const token = document.querySelector('meta[name=csrf]').content;
818
819    fetch(target.dataset.wtPostUrl, {
820      method: 'POST',
821      headers: {
822        'X-CSRF-TOKEN': token,
823        'X-Requested-with': 'XMLHttpRequest',
824      },
825    }).then(() => {
826      if ('wtReloadUrl' in target.dataset) {
827        // Go somewhere else. e.g. the home page after logout.
828        document.location = target.dataset.wtReloadUrl;
829      } else {
830        // Reload the current page. e.g. change language.
831        document.location.reload();
832      }
833    }).catch((error) => {
834      alert(error);
835    });
836  }
837});
838