xref: /webtrees/resources/js/webtrees.js (revision 10d34630d90c2dcc16bf878a82f07bde50e052dc) 
1/**
2 * webtrees: online genealogy
3 * Copyright (C) 2019 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     */
33  function trim (str) {
34    return str.replace(/\s+/g, ' ').trim();
35  }
36
37  /**
38     * Look for non-latin characters in a string.
39     */
40  webtrees.detectScript = function (str) {
41    for (const script in scriptRegexes) {
42      if (str.match(scriptRegexes[script])) {
43        return script;
44      }
45    }
46
47    return 'Latn';
48  };
49
50  /**
51     * In some languages, the SURN uses a male/default form, but NAME uses a gender-inflected form.
52     */
53  function inflectSurname (surname, sex) {
54    if (lang === 'pl' && sex === 'F') {
55      return surname
56        .replace(/ski$/, 'ska')
57        .replace(/cki$/, 'cka')
58        .replace(/dzki$/, 'dzka')
59        .replace(/żki$/, 'żka');
60    }
61
62    return surname;
63  }
64
65  /**
66     * Build a NAME from a NPFX, GIVN, SPFX, SURN and NSFX parts.
67     *
68     * Assumes the language of the document is the same as the language of the name.
69     */
70  webtrees.buildNameFromParts = function (npfx, givn, spfx, surn, nsfx, sex) {
71    const usesCJK = webtrees.detectScript(npfx + givn + spfx + givn + surn + nsfx) === 'Han';
72    const separator = usesCJK ? '' : ' ';
73    const surnameFirst = usesCJK || ['hu', 'jp', 'ko', 'vi', 'zh-Hans', 'zh-Hant'].indexOf(lang) !== -1;
74    const patronym = ['is'].indexOf(lang) !== -1;
75    const slash = patronym ? '' : '/';
76
77    // GIVN and SURN may be a comma-separated lists.
78    npfx = trim(npfx);
79    givn = trim(givn.replace(',', separator));
80    spfx = trim(spfx);
81    surn = inflectSurname(trim(surn.replace(',', separator)), sex);
82    nsfx = trim(nsfx);
83
84    const surname = trim(spfx + separator + surn);
85
86    const name = surnameFirst ? slash + surname + slash + separator + givn : givn + separator + slash + surname + slash;
87
88    return trim(npfx + separator + name + separator + nsfx);
89  };
90
91  // Insert text at the current cursor position in a text field.
92  webtrees.pasteAtCursor = function (element, text) {
93    if (element !== null) {
94      const caret_pos = element.selectionStart + text.length;
95      const textBefore = element.value.substring(0, element.selectionStart);
96      const textAfter = element.value.substring(element.selectionEnd);
97      element.value = textBefore + text + textAfter;
98      element.setSelectionRange(caret_pos, caret_pos);
99      element.focus();
100    }
101  };
102}(window.webtrees = window.webtrees || {}));
103
104function expand_layer (sid) {
105  $('#' + sid + '_img').toggleClass('icon-plus icon-minus');
106  $('#' + sid).slideToggle('fast');
107  $('#' + sid + '-alt').toggle(); // hide something when we show the layer - and vice-versa
108  return false;
109}
110
111var pastefield;
112
113function valid_date (datefield, dmy) {
114  var months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
115  var hijri_months = ['MUHAR', 'SAFAR', 'RABIA', 'RABIT', 'JUMAA', 'JUMAT', 'RAJAB', 'SHAAB', 'RAMAD', 'SHAWW', 'DHUAQ', 'DHUAH'];
116  var hebrew_months = ['TSH', 'CSH', 'KSL', 'TVT', 'SHV', 'ADR', 'ADS', 'NSN', 'IYR', 'SVN', 'TMZ', 'AAV', 'ELL'];
117  var french_months = ['VEND', 'BRUM', 'FRIM', 'NIVO', 'PLUV', 'VENT', 'GERM', 'FLOR', 'PRAI', 'MESS', 'THER', 'FRUC', 'COMP'];
118  var jalali_months = ['FARVA', 'ORDIB', 'KHORD', 'TIR', 'MORDA', 'SHAHR', 'MEHR', 'ABAN', 'AZAR', 'DEY', 'BAHMA', 'ESFAN'];
119
120  var datestr = datefield.value;
121  // if a date has a date phrase marked by () this has to be excluded from altering
122  var datearr = datestr.split('(');
123  var datephrase = '';
124  if (datearr.length > 1) {
125    datestr = datearr[0];
126    datephrase = datearr[1];
127  }
128
129  // Gedcom dates are upper case
130  datestr = datestr.toUpperCase();
131  // Gedcom dates have no leading/trailing/repeated whitespace
132  datestr = datestr.replace(/\s+/, ' ');
133  datestr = datestr.replace(/(^\s)|(\s$)/, '');
134  // Gedcom dates have spaces between letters and digits, e.g. "01JAN2000" => "01 JAN 2000"
135  datestr = datestr.replace(/(\d)([A-Z])/, '$1 $2');
136  datestr = datestr.replace(/([A-Z])(\d)/, '$1 $2');
137
138  // Shortcut for quarter format, "Q1 1900" => "BET JAN 1900 AND MAR 1900". See [ 1509083 ]
139  if (datestr.match(/^Q ([1-4]) (\d\d\d\d)$/)) {
140    datestr = 'BET ' + months[RegExp.$1 * 3 - 3] + ' ' + RegExp.$2 + ' AND ' + months[RegExp.$1 * 3 - 1] + ' ' + RegExp.$2;
141  }
142
143  // Shortcut for @#Dxxxxx@ 01 01 1400, etc.
144  if (datestr.match(/^(@#DHIJRI@|HIJRI)( \d?\d )(\d?\d)( \d?\d?\d?\d)$/)) {
145    datestr = '@#DHIJRI@' + RegExp.$2 + hijri_months[parseInt(RegExp.$3, 10) - 1] + RegExp.$4;
146  }
147  if (datestr.match(/^(@#DJALALI@|JALALI)( \d?\d )(\d?\d)( \d?\d?\d?\d)$/)) {
148    datestr = '@#DJALALI@' + RegExp.$2 + jalali_months[parseInt(RegExp.$3, 10) - 1] + RegExp.$4;
149  }
150  if (datestr.match(/^(@#DHEBREW@|HEBREW)( \d?\d )(\d?\d)( \d?\d?\d?\d)$/)) {
151    datestr = '@#DHEBREW@' + RegExp.$2 + hebrew_months[parseInt(RegExp.$3, 10) - 1] + RegExp.$4;
152  }
153  if (datestr.match(/^(@#DFRENCH R@|FRENCH)( \d?\d )(\d?\d)( \d?\d?\d?\d)$/)) {
154    datestr = '@#DFRENCH R@' + RegExp.$2 + french_months[parseInt(RegExp.$3, 10) - 1] + RegExp.$4;
155  }
156
157  // e.g. 17.11.1860, 03/04/2005 or 1999-12-31. Use locale settings where DMY order is ambiguous.
158  var qsearch = /^([^\d]*)(\d+)[^\d](\d+)[^\d](\d+)$/i;
159  if (qsearch.exec(datestr)) {
160    var f0 = RegExp.$1;
161    var f1 = parseInt(RegExp.$2, 10);
162    var f2 = parseInt(RegExp.$3, 10);
163    var f3 = parseInt(RegExp.$4, 10);
164    var yyyy = new Date().getFullYear();
165    var yy = yyyy % 100;
166    var cc = yyyy - yy;
167    if (dmy === 'DMY' && f1 <= 31 && f2 <= 12 || f1 > 13 && f1 <= 31 && f2 <= 12 && f3 > 31) {
168      datestr = f0 + f1 + ' ' + months[f2 - 1] + ' ' + (f3 >= 100 ? f3 : (f3 <= yy ? f3 + cc : f3 + cc - 100));
169    } else {
170      if (dmy === 'MDY' && f1 <= 12 && f2 <= 31 || f2 > 13 && f2 <= 31 && f1 <= 12 && f3 > 31) {
171        datestr = f0 + f2 + ' ' + months[f1 - 1] + ' ' + (f3 >= 100 ? f3 : (f3 <= yy ? f3 + cc : f3 + cc - 100));
172      } else {
173        if (dmy === 'YMD' && f2 <= 12 && f3 <= 31 || f3 > 13 && f3 <= 31 && f2 <= 12 && f1 > 31) {
174          datestr = f0 + f3 + ' ' + months[f2 - 1] + ' ' + (f1 >= 100 ? f1 : (f1 <= yy ? f1 + cc : f1 + cc - 100));
175        }
176      }
177    }
178  }
179
180  // Shortcuts for date ranges
181  datestr = datestr.replace(/^[>]([\w ]+)$/, 'AFT $1');
182  datestr = datestr.replace(/^[<]([\w ]+)$/, 'BEF $1');
183  datestr = datestr.replace(/^([\w ]+)[-]$/, 'FROM $1');
184  datestr = datestr.replace(/^[-]([\w ]+)$/, 'TO $1');
185  datestr = datestr.replace(/^[~]([\w ]+)$/, 'ABT $1');
186  datestr = datestr.replace(/^[*]([\w ]+)$/, 'EST $1');
187  datestr = datestr.replace(/^[#]([\w ]+)$/, 'CAL $1');
188  datestr = datestr.replace(/^([\w ]+) ?- ?([\w ]+)$/, 'BET $1 AND $2');
189  datestr = datestr.replace(/^([\w ]+) ?~ ?([\w ]+)$/, 'FROM $1 TO $2');
190
191  // Convert full months to short months
192  datestr = datestr.replace(/(JANUARY)/, 'JAN');
193  datestr = datestr.replace(/(FEBRUARY)/, 'FEB');
194  datestr = datestr.replace(/(MARCH)/, 'MAR');
195  datestr = datestr.replace(/(APRIL)/, 'APR');
196  datestr = datestr.replace(/(MAY)/, 'MAY');
197  datestr = datestr.replace(/(JUNE)/, 'JUN');
198  datestr = datestr.replace(/(JULY)/, 'JUL');
199  datestr = datestr.replace(/(AUGUST)/, 'AUG');
200  datestr = datestr.replace(/(SEPTEMBER)/, 'SEP');
201  datestr = datestr.replace(/(OCTOBER)/, 'OCT');
202  datestr = datestr.replace(/(NOVEMBER)/, 'NOV');
203  datestr = datestr.replace(/(DECEMBER)/, 'DEC');
204
205  // Americans frequently enter dates as SEP 20, 1999
206  // No need to internationalise this, as this is an english-language issue
207  datestr = datestr.replace(/(JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC)\.? (\d\d?)[, ]+(\d\d\d\d)/, '$2 $1 $3');
208
209  // Apply leading zero to day numbers
210  datestr = datestr.replace(/(^| )(\d [A-Z]{3,5} \d{4})/, '$10$2');
211
212  if (datephrase) {
213    datestr = datestr + ' (' + datephrase;
214  }
215  // Only update it if is has been corrected - otherwise input focus
216  // moves to the end of the field unnecessarily
217  if (datefield.value !== datestr) {
218    datefield.value = datestr;
219  }
220}
221
222var monthLabels = [];
223monthLabels[1] = 'January';
224monthLabels[2] = 'February';
225monthLabels[3] = 'March';
226monthLabels[4] = 'April';
227monthLabels[5] = 'May';
228monthLabels[6] = 'June';
229monthLabels[7] = 'July';
230monthLabels[8] = 'August';
231monthLabels[9] = 'September';
232monthLabels[10] = 'October';
233monthLabels[11] = 'November';
234monthLabels[12] = 'December';
235
236var monthShort = [];
237monthShort[1] = 'JAN';
238monthShort[2] = 'FEB';
239monthShort[3] = 'MAR';
240monthShort[4] = 'APR';
241monthShort[5] = 'MAY';
242monthShort[6] = 'JUN';
243monthShort[7] = 'JUL';
244monthShort[8] = 'AUG';
245monthShort[9] = 'SEP';
246monthShort[10] = 'OCT';
247monthShort[11] = 'NOV';
248monthShort[12] = 'DEC';
249
250var daysOfWeek = [];
251daysOfWeek[0] = 'S';
252daysOfWeek[1] = 'M';
253daysOfWeek[2] = 'T';
254daysOfWeek[3] = 'W';
255daysOfWeek[4] = 'T';
256daysOfWeek[5] = 'F';
257daysOfWeek[6] = 'S';
258
259var weekStart = 0;
260
261function cal_setMonthNames (jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec) {
262  monthLabels[1] = jan;
263  monthLabels[2] = feb;
264  monthLabels[3] = mar;
265  monthLabels[4] = apr;
266  monthLabels[5] = may;
267  monthLabels[6] = jun;
268  monthLabels[7] = jul;
269  monthLabels[8] = aug;
270  monthLabels[9] = sep;
271  monthLabels[10] = oct;
272  monthLabels[11] = nov;
273  monthLabels[12] = dec;
274}
275
276function cal_setDayHeaders (sun, mon, tue, wed, thu, fri, sat) {
277  daysOfWeek[0] = sun;
278  daysOfWeek[1] = mon;
279  daysOfWeek[2] = tue;
280  daysOfWeek[3] = wed;
281  daysOfWeek[4] = thu;
282  daysOfWeek[5] = fri;
283  daysOfWeek[6] = sat;
284}
285
286function cal_setWeekStart (day) {
287  if (day >= 0 && day < 7) {
288    weekStart = day;
289  }
290}
291
292function calendarWidget (dateDivId, dateFieldId) {
293  var dateDiv = document.getElementById(dateDivId);
294  var dateField = document.getElementById(dateFieldId);
295
296  if (dateDiv.style.visibility === 'visible') {
297    dateDiv.style.visibility = 'hidden';
298    return false;
299  }
300  if (dateDiv.style.visibility === 'show') {
301    dateDiv.style.visibility = 'hide';
302    return false;
303  }
304
305  /* Javascript calendar functions only work with precise gregorian dates "D M Y" or "Y" */
306  var greg_regex = /((\d+ (JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC) )?\d+)/i;
307  var date;
308  if (greg_regex.exec(dateField.value)) {
309    date = new Date(RegExp.$1);
310  } else {
311    date = new Date();
312  }
313
314  dateDiv.innerHTML = cal_generateSelectorContent(dateFieldId, dateDivId, date);
315  if (dateDiv.style.visibility === 'hidden') {
316    dateDiv.style.visibility = 'visible';
317    return false;
318  }
319  if (dateDiv.style.visibility === 'hide') {
320    dateDiv.style.visibility = 'show';
321    return false;
322  }
323
324  return false;
325}
326
327function cal_generateSelectorContent (dateFieldId, dateDivId, date) {
328  var i, j;
329  var content = '<table border="1"><tr>';
330  content += '<td><select class="form-control" id="' + dateFieldId + '_daySelect" onchange="return cal_updateCalendar(\'' + dateFieldId + '\', \'' + dateDivId + '\');">';
331  for (i = 1; i < 32; i++) {
332    content += '<option value="' + i + '"';
333    if (date.getDate() === i) {
334      content += ' selected="selected"';
335    }
336    content += '>' + i + '</option>';
337  }
338  content += '</select></td>';
339  content += '<td><select class="form-control" id="' + dateFieldId + '_monSelect" onchange="return cal_updateCalendar(\'' + dateFieldId + '\', \'' + dateDivId + '\');">';
340  for (i = 1; i < 13; i++) {
341    content += '<option value="' + i + '"';
342    if (date.getMonth() + 1 === i) {
343      content += ' selected="selected"';
344    }
345    content += '>' + monthLabels[i] + '</option>';
346  }
347  content += '</select></td>';
348  content += '<td><input class="form-control" type="text" id="' + dateFieldId + '_yearInput" size="5" value="' + date.getFullYear() + '" onchange="return cal_updateCalendar(\'' + dateFieldId + '\', \'' + dateDivId + '\');" /></td></tr>';
349  content += '<tr><td colspan="3">';
350  content += '<table width="100%">';
351  content += '<tr>';
352  j = weekStart;
353  for (i = 0; i < 7; i++) {
354    content += '<td ';
355    content += 'class="descriptionbox"';
356    content += '>';
357    content += daysOfWeek[j];
358    content += '</td>';
359    j++;
360    if (j > 6) {
361      j = 0;
362    }
363  }
364  content += '</tr>';
365
366  var tdate = new Date(date.getFullYear(), date.getMonth(), 1);
367  var day = tdate.getDay();
368  day = day - weekStart;
369  var daymilli = 1000 * 60 * 60 * 24;
370  tdate = tdate.getTime() - (day * daymilli) + (daymilli / 2);
371  tdate = new Date(tdate);
372
373  for (j = 0; j < 6; j++) {
374    content += '<tr>';
375    for (i = 0; i < 7; i++) {
376      content += '<td ';
377      if (tdate.getMonth() === date.getMonth()) {
378        if (tdate.getDate() === date.getDate()) {
379          content += 'class="descriptionbox"';
380        } else {
381          content += 'class="optionbox"';
382        }
383      } else {
384        content += 'style="background-color:#EAEAEA; border: solid #AAAAAA 1px;"';
385      }
386      content += '><a href="#" onclick="return cal_dateClicked(\'' + dateFieldId + '\', \'' + dateDivId + '\', ' + tdate.getFullYear() + ', ' + tdate.getMonth() + ', ' + tdate.getDate() + ');">';
387      content += tdate.getDate();
388      content += '</a></td>';
389      var datemilli = tdate.getTime() + daymilli;
390      tdate = new Date(datemilli);
391    }
392    content += '</tr>';
393  }
394  content += '</table>';
395  content += '</td></tr>';
396  content += '</table>';
397
398  return content;
399}
400
401function cal_setDateField (dateFieldId, year, month, day) {
402  var dateField = document.getElementById(dateFieldId);
403  if (!dateField) {
404    return false;
405  }
406  if (day < 10) {
407    day = '0' + day;
408  }
409  dateField.value = day + ' ' + monthShort[month + 1] + ' ' + year;
410  return false;
411}
412
413function cal_updateCalendar (dateFieldId, dateDivId) {
414  var dateSel = document.getElementById(dateFieldId + '_daySelect');
415  if (!dateSel) {
416    return false;
417  }
418  var monthSel = document.getElementById(dateFieldId + '_monSelect');
419  if (!monthSel) {
420    return false;
421  }
422  var yearInput = document.getElementById(dateFieldId + '_yearInput');
423  if (!yearInput) {
424    return false;
425  }
426
427  var month = parseInt(monthSel.options[monthSel.selectedIndex].value, 10);
428  month = month - 1;
429
430  var date = new Date(yearInput.value, month, dateSel.options[dateSel.selectedIndex].value);
431  cal_setDateField(dateFieldId, date.getFullYear(), date.getMonth(), date.getDate());
432
433  var dateDiv = document.getElementById(dateDivId);
434  if (!dateDiv) {
435    alert('no dateDiv ' + dateDivId);
436    return false;
437  }
438  dateDiv.innerHTML = cal_generateSelectorContent(dateFieldId, dateDivId, date);
439
440  return false;
441}
442
443function cal_dateClicked (dateFieldId, dateDivId, year, month, day) {
444  cal_setDateField(dateFieldId, year, month, day);
445  calendarWidget(dateDivId, dateFieldId);
446  return false;
447}
448
449function openerpasteid (id) {
450  if (window.opener.paste_id) {
451    window.opener.paste_id(id);
452  }
453  window.close();
454}
455
456function paste_id (value) {
457  pastefield.value = value;
458}
459
460function pastename (name) {
461  if (nameElement) {
462    nameElement.innerHTML = name;
463  }
464  if (remElement) {
465    remElement.style.display = 'block';
466  }
467}
468
469function paste_char (value) {
470  if (document.selection) {
471    // IE
472    pastefield.focus();
473    document.selection.createRange().text = value;
474  } else if (pastefield.selectionStart || pastefield.selectionStart === 0) {
475    // Mozilla/Chrome/Safari
476    pastefield.value =
477        pastefield.value.substring(0, pastefield.selectionStart) +
478        value +
479        pastefield.value.substring(pastefield.selectionEnd, pastefield.value.length);
480    pastefield.selectionStart = pastefield.selectionEnd = pastefield.selectionStart + value.length;
481  } else {
482    // Fallback? - just append
483    pastefield.value += value;
484  }
485
486  if (pastefield.id === 'NPFX' || pastefield.id === 'GIVN' || pastefield.id === 'SPFX' || pastefield.id === 'SURN' || pastefield.id === 'NSFX') {
487    updatewholename();
488  }
489}
490
491/**
492 * Persistant checkbox options to hide/show extra data.
493
494 * @param element_id
495 */
496function persistent_toggle (element_id) {
497  const element = document.getElementById(element_id);
498  const key = 'state-of-' + element_id;
499  const state = localStorage.getItem(key);
500
501  // Previously selected?
502  if (state === 'true') {
503    $(element).click();
504  }
505
506  // Remember state for the next page load.
507  $(element).on('change', function () { localStorage.setItem(key, element.checked); });
508}
509
510function valid_lati_long (field, pos, neg) {
511  // valid LATI or LONG according to Gedcom standard
512  // pos (+) : N or E
513  // neg (-) : S or W
514  var txt = field.value.toUpperCase();
515  txt = txt.replace(/(^\s*)|(\s*$)/g, ''); // trim
516  txt = txt.replace(/ /g, ':'); // N12 34 ==> N12.34
517  txt = txt.replace(/\+/g, ''); // +17.1234 ==> 17.1234
518  txt = txt.replace(/-/g, neg); // -0.5698 ==> W0.5698
519  txt = txt.replace(/,/g, '.'); // 0,5698 ==> 0.5698
520  // 0°34'11 ==> 0:34:11
521  txt = txt.replace(/\u00b0/g, ':'); // °
522  txt = txt.replace(/\u0027/g, ':'); // '
523  // 0:34:11.2W ==> W0.5698
524  txt = txt.replace(/^([0-9]+):([0-9]+):([0-9.]+)(.*)/g, function ($0, $1, $2, $3, $4) {
525    var n = parseFloat($1);
526    n += ($2 / 60);
527    n += ($3 / 3600);
528    n = Math.round(n * 1E4) / 1E4;
529    return $4 + n;
530  });
531  // 0:34W ==> W0.5667
532  txt = txt.replace(/^([0-9]+):([0-9]+)(.*)/g, function ($0, $1, $2, $3) {
533    var n = parseFloat($1);
534    n += ($2 / 60);
535    n = Math.round(n * 1E4) / 1E4;
536    return $3 + n;
537  });
538  // 0.5698W ==> W0.5698
539  txt = txt.replace(/(.*)([N|S|E|W]+)$/g, '$2$1');
540  // 17.1234 ==> N17.1234
541  if (txt && txt.charAt(0) !== neg && txt.charAt(0) !== pos) {
542    txt = pos + txt;
543  }
544  field.value = txt;
545}
546
547// Initialize autocomplete elements.
548function autocomplete (selector) {
549  // Use typeahead/bloodhound for autocomplete
550  $(selector).each(function () {
551    const that = this;
552    $(this).typeahead(null, {
553      display: 'value',
554      limit: 0,
555      source: new Bloodhound({
556        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
557        queryTokenizer: Bloodhound.tokenizers.whitespace,
558        remote: {
559          url: this.dataset.autocompleteUrl,
560          replace: function (url, uriEncodedQuery) {
561            if (that.dataset.autocompleteExtra) {
562              const extra = $(document.querySelector(that.dataset.autocompleteExtra)).val();
563              return url.replace('QUERY', uriEncodedQuery) + '&extra=' + encodeURIComponent(extra);
564            }
565            return url.replace('QUERY', uriEncodedQuery);
566          },
567          wildcard: 'QUERY'
568
569        }
570      })
571    });
572  });
573}
574
575/**
576 * Insert text at the current cursor position in an input field.
577 *
578 * @param e The input element.
579 * @param t The text to insert.
580 */
581function insertTextAtCursor (e, t) {
582  var scrollTop = e.scrollTop;
583  var selectionStart = e.selectionStart;
584  var prefix = e.value.substring(0, selectionStart);
585  var suffix = e.value.substring(e.selectionEnd, e.value.length);
586  e.value = prefix + t + suffix;
587  e.selectionStart = selectionStart + t.length;
588  e.selectionEnd = e.selectionStart;
589  e.focus();
590  e.scrollTop = scrollTop;
591}
592
593// Send the CSRF token on all AJAX requests
594$.ajaxSetup({
595  headers: {
596    'X-CSRF-TOKEN': $('meta[name=csrf]').attr('content')
597  }
598});
599
600// Initialisation
601$(function () {
602  // Page elements that load automaticaly via AJAX.
603  // This prevents bad robots from crawling resource-intensive pages.
604  $('[data-ajax-url]').each(function () {
605    $(this).load($(this).data('ajaxUrl'));
606  });
607
608  // Select2 - format entries in the select list
609  function templateOptionForSelect2 (data) {
610    if (data.loading) {
611      // If we're waiting for the server, this will be a "waiting..." message
612      return data.text;
613    } else {
614      // The response from the server is already in HTML, so no need to format it here.
615      return data.text;
616    }
617  }
618
619  // Autocomplete
620  autocomplete('input[data-autocomplete-url]');
621
622  // Select2 - activate autocomplete fields
623  const lang = document.documentElement.lang;
624  const select2_languages = {
625    'zh-Hans': 'zh-CN',
626    'zh-Hant': 'zh-TW'
627  };
628  $('select.select2').select2({
629    language: select2_languages[lang] || lang,
630    // Needed for elements that are initially hidden.
631    width: '100%',
632    // Do not escape - we do it on the server.
633    escapeMarkup: function (x) {
634      return x;
635    }
636  });
637
638  // If we clear the select (using the "X" button), we need an empty value
639  // (rather than no value at all) for (non-multiple) selects with name="array[]"
640  $('select.select2:not([multiple])')
641    .on('select2:unselect', function (evt) {
642      $(evt.delegateTarget).html('<option value="" selected></option>');
643    });
644
645  // Datatables - locale aware sorting
646  $.fn.dataTableExt.oSort['text-asc'] = function (x, y) {
647    return x.localeCompare(y, document.documentElement.lang, { sensitivity: 'base' });
648  };
649  $.fn.dataTableExt.oSort['text-desc'] = function (x, y) {
650    return y.localeCompare(x, document.documentElement.lang, { sensitivity: 'base' });
651  };
652
653  // DataTables - start hidden to prevent FOUC.
654  $('table.datatables').each(function () {
655    $(this).DataTable();
656    $(this).removeClass('d-none');
657  });
658
659  // Save button state between pages
660  document.querySelectorAll('[data-toggle=button][data-persist]').forEach((element) => {
661    // Previously selected?
662    if (localStorage.getItem('state-of-' + element.dataset.persist) === 'T') {
663      element.click();
664    }
665    // Save state on change
666    element.addEventListener('click', (event) => {
667      // Event occurs *before* the state changes, so reverse T/F.
668      localStorage.setItem('state-of-' + event.target.dataset.persist, event.target.classList.contains('active') ? 'F' : 'T');
669    });
670  });
671
672  // Activate the on-screen keyboard
673  var osk_focus_element;
674  $('.wt-osk-trigger').click(function () {
675    // When a user clicks the icon, set focus to the corresponding input
676    osk_focus_element = document.getElementById($(this).data('id'));
677    osk_focus_element.focus();
678    $('.wt-osk').show();
679  });
680  $('.wt-osk-script-button').change(function () {
681    $('.wt-osk-script').prop('hidden', true);
682    $('.wt-osk-script-' + $(this).data('script')).prop('hidden', false);
683  });
684  $('.wt-osk-shift-button').click(function () {
685    document.querySelector('.wt-osk-keys').classList.toggle('shifted');
686  });
687  $('.wt-osk-keys').on('click', '.wt-osk-key', function () {
688    var key = $(this).contents().get(0).nodeValue;
689    var shift_state = $('.wt-osk-shift-button').hasClass('active');
690    var shift_key = $('sup', this)[0];
691    if (shift_state && shift_key !== undefined) {
692      key = shift_key.innerText;
693    }
694    webtrees.pasteAtCursor(osk_focus_element, key);
695    if ($('.wt-osk-pin-button').hasClass('active') === false) {
696      $('.wt-osk').hide();
697    }
698  });
699
700  $('.wt-osk-close').on('click', function () {
701    $('.wt-osk').hide();
702  });
703});
704
705// Convert data-confirm and data-post-url attributes into useful behavior.
706document.addEventListener('click', (event) => {
707  const target = event.target.closest('a');
708
709  if (target === null) {
710    return;
711  }
712
713  if ('confirm' in target.dataset && !confirm(target.dataset.confirm)) {
714    event.preventDefault();
715    return;
716  }
717
718  if ('postUrl' in target.dataset) {
719    const request = new XMLHttpRequest();
720    const token = document.querySelector('meta[name=csrf]').content;
721    request.open('POST', target.dataset.postUrl, true);
722    request.setRequestHeader('X-CSRF-TOKEN', token);
723    request.onreadystatechange = () => {
724      if (request.readyState === request.DONE) {
725        document.location.reload();
726      }
727    };
728    request.send();
729    event.preventDefault();
730  }
731});
732