xref: /webtrees/resources/js/webtrees.js (revision 56f9a9c1fdf345d30ac6cd9caefe7542153b9246) 
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
18let webtrees = function () {
19    const lang = document.documentElement.lang;
20
21    /**
22     * Tidy the whitespace in a string.
23     */
24    function trim(str) {
25        return str.replace(/\s+/g, " ").trim();
26
27    }
28
29    /**
30     * Look for non-latin characters in a string.
31     */
32    function detectScript(str) {
33        if (str.match(/[\u3400-\u9FCC]/)) {
34            return "cjk";
35        } else if (str.match(/[\u0370-\u03FF]/)) {
36            return "greek";
37        } else if (str.match(/[\u0400-\u04FF]/)) {
38            return "cyrillic";
39        } else if (str.match(/[\u0590-\u05FF]/)) {
40            return "hebrew";
41        } else if (str.match(/[\u0600-\u06FF]/)) {
42            return "arabic";
43        }
44
45        return "latin";
46    }
47
48    /**
49     * In some languages, the SURN uses a male/default form, but NAME uses a gender-inflected form.
50     */
51    function inflectSurname(surname, sex) {
52        if (lang === "pl" && sex === "F") {
53            return surname
54                .replace(/ski$/, "ska")
55                .replace(/cki$/, "cka")
56                .replace(/dzki$/, "dzka")
57                .replace(/żki$/, "żka");
58        }
59
60        return surname;
61    }
62
63    /**
64     * Build a NAME from a NPFX, GIVN, SPFX, SURN and NSFX parts.
65     *
66     * Assumes the language of the document is the same as the language of the name.
67     */
68    function buildNameFromParts(npfx, givn, spfx, surn, nsfx, sex) {
69        const usesCJK      = detectScript(npfx + givn + spfx + givn + surn + nsfx) === "cjk";
70        const separator    = usesCJK ? "" : " ";
71        const surnameFirst = usesCJK || ['hu', 'jp', 'ko', 'vi', 'zh-Hans', 'zh-Hant'].indexOf(lang) !== -1;
72        const patronym     = ['is'].indexOf(lang) !== -1;
73        const slash        = patronym ? "" : "/";
74
75        // GIVN and SURN may be a comma-separated lists.
76        npfx = trim(npfx);
77        givn = trim(givn.replace(",", separator));
78        spfx = trim(spfx);
79        surn = inflectSurname(trim(surn.replace(",", separator)), sex);
80        nsfx = trim(nsfx);
81
82        const surname = trim(spfx + separator + surn);
83
84        const name = surnameFirst ? slash + surname + slash + separator + givn : givn + separator + slash + surname + slash;
85
86        return trim(npfx + separator + name + separator + nsfx);
87    }
88
89    // Public methods
90    return {
91        buildNameFromParts: buildNameFromParts,
92        detectScript:       detectScript,
93    };
94}();
95
96function expand_layer(sid)
97{
98    $('#' + sid + '_img').toggleClass('icon-plus icon-minus');
99    $('#' + sid).slideToggle('fast');
100    $('#' + sid + '-alt').toggle(); // hide something when we show the layer - and vice-versa
101    return false;
102}
103
104// Accept the changes to a record - and reload the page
105function accept_changes(xref, ged)
106{
107    $.post(
108        'index.php?route=accept-changes',
109        {
110            xref: xref,
111            ged: ged,
112        },
113        function () {
114            document.location.reload();
115        }
116    );
117    return false;
118}
119
120// Reject the changes to a record - and reload the page
121function reject_changes(xref, ged)
122{
123    $.post(
124        'index.php?route=reject-changes',
125        {
126            xref: xref,
127            ged: ged,
128        },
129        function () {
130            document.location.reload();
131        }
132    );
133    return false;
134}
135
136// Delete a record - and reload the page
137function delete_record(xref, gedcom)
138{
139    $.post(
140        'index.php?route=delete-record',
141        {
142            xref: xref,
143            ged: gedcom,
144        },
145        function () {
146            document.location.reload();
147        }
148    );
149
150    return false;
151}
152
153// Delete a fact - and reload the page
154function delete_fact(message, ged, xref, fact_id)
155{
156    if (confirm(message)) {
157        $.post(
158            'index.php?route=delete-fact',
159            {
160                xref: xref,
161                fact_id: fact_id,
162                ged: ged
163            },
164            function () {
165                document.location.reload();
166            }
167        );
168    }
169    return false;
170}
171
172// Copy a fact to the clipboard
173function copy_fact(ged, xref, fact_id)
174{
175    $.post(
176        'index.php?route=copy-fact',
177        {
178            xref: xref,
179            fact_id: fact_id,
180            ged: ged,
181        },
182        function () {
183            document.location.reload();
184        }
185    );
186    return false;
187}
188
189// Delete a user - and reload the page
190function delete_user(message, user_id)
191{
192    if (confirm(message)) {
193        $.post(
194            'index.php?route=delete-user',
195            {
196                user_id: user_id,
197            },
198            function () {
199                document.location.reload();
200            }
201        );
202    }
203    return false;
204}
205
206// Masquerade as another user - and reload the page.
207function masquerade(user_id)
208{
209    $.post(
210        'index.php?route=masquerade',
211        {
212            user_id: user_id,
213        },
214        function () {
215            document.location.reload();
216        }
217    );
218    return false;
219}
220
221var pastefield;
222function addmedia_links(field, iid, iname)
223{
224    pastefield = field;
225    insertRowToTable(iid, iname);
226    return false;
227}
228
229function valid_date(datefield, dmy)
230{
231    var months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
232    var hijri_months = ['MUHAR', 'SAFAR', 'RABIA', 'RABIT', 'JUMAA', 'JUMAT', 'RAJAB', 'SHAAB', 'RAMAD', 'SHAWW', 'DHUAQ', 'DHUAH'];
233    var hebrew_months = ['TSH', 'CSH', 'KSL', 'TVT', 'SHV', 'ADR', 'ADS', 'NSN', 'IYR', 'SVN', 'TMZ', 'AAV', 'ELL'];
234    var french_months = ['VEND', 'BRUM', 'FRIM', 'NIVO', 'PLUV', 'VENT', 'GERM', 'FLOR', 'PRAI', 'MESS', 'THER', 'FRUC', 'COMP'];
235    var jalali_months = ['FARVA', 'ORDIB', 'KHORD', 'TIR', 'MORDA', 'SHAHR', 'MEHR', 'ABAN', 'AZAR', 'DEY', 'BAHMA', 'ESFAN'];
236
237    var datestr = datefield.value;
238  // if a date has a date phrase marked by () this has to be excluded from altering
239    var datearr = datestr.split('(');
240    var datephrase = '';
241    if (datearr.length > 1) {
242        datestr = datearr[0];
243        datephrase = datearr[1];
244    }
245
246  // Gedcom dates are upper case
247    datestr = datestr.toUpperCase();
248  // Gedcom dates have no leading/trailing/repeated whitespace
249    datestr = datestr.replace(/\s+/, ' ');
250    datestr = datestr.replace(/(^\s)|(\s$)/, '');
251  // Gedcom dates have spaces between letters and digits, e.g. "01JAN2000" => "01 JAN 2000"
252    datestr = datestr.replace(/(\d)([A-Z])/, '$1 $2');
253    datestr = datestr.replace(/([A-Z])(\d)/, '$1 $2');
254
255  // Shortcut for quarter format, "Q1 1900" => "BET JAN 1900 AND MAR 1900". See [ 1509083 ]
256    if (datestr.match(/^Q ([1-4]) (\d\d\d\d)$/)) {
257        datestr = 'BET ' + months[RegExp.$1 * 3 - 3] + ' ' + RegExp.$2 + ' AND ' + months[RegExp.$1 * 3 - 1] + ' ' + RegExp.$2;
258    }
259
260  // Shortcut for @#Dxxxxx@ 01 01 1400, etc.
261    if (datestr.match(/^(@#DHIJRI@|HIJRI)( \d?\d )(\d?\d)( \d?\d?\d?\d)$/)) {
262        datestr = '@#DHIJRI@' + RegExp.$2 + hijri_months[parseInt(RegExp.$3, 10) - 1] + RegExp.$4;
263    }
264    if (datestr.match(/^(@#DJALALI@|JALALI)( \d?\d )(\d?\d)( \d?\d?\d?\d)$/)) {
265        datestr = '@#DJALALI@' + RegExp.$2 + jalali_months[parseInt(RegExp.$3, 10) - 1] + RegExp.$4;
266    }
267    if (datestr.match(/^(@#DHEBREW@|HEBREW)( \d?\d )(\d?\d)( \d?\d?\d?\d)$/)) {
268        datestr = '@#DHEBREW@' + RegExp.$2 + hebrew_months[parseInt(RegExp.$3, 10) - 1] + RegExp.$4;
269    }
270    if (datestr.match(/^(@#DFRENCH R@|FRENCH)( \d?\d )(\d?\d)( \d?\d?\d?\d)$/)) {
271        datestr = '@#DFRENCH R@' + RegExp.$2 + french_months[parseInt(RegExp.$3, 10) - 1] + RegExp.$4;
272    }
273
274  // e.g. 17.11.1860, 03/04/2005 or 1999-12-31. Use locale settings where DMY order is ambiguous.
275    var qsearch = /^([^\d]*)(\d+)[^\d](\d+)[^\d](\d+)$/i;
276    if (qsearch.exec(datestr)) {
277        var f0 = RegExp.$1;
278        var f1 = parseInt(RegExp.$2, 10);
279        var f2 = parseInt(RegExp.$3, 10);
280        var f3 = parseInt(RegExp.$4, 10);
281        var yyyy = new Date().getFullYear();
282        var yy = yyyy % 100;
283        var cc = yyyy - yy;
284        if (dmy === 'DMY' && f1 <= 31 && f2 <= 12 || f1 > 13 && f1 <= 31 && f2 <= 12 && f3 > 31) {
285            datestr = f0 + f1 + ' ' + months[f2 - 1] + ' ' + (f3 >= 100 ? f3 : (f3 <= yy ? f3 + cc : f3 + cc - 100));
286        } else {
287            if (dmy === 'MDY' && f1 <= 12 && f2 <= 31 || f2 > 13 && f2 <= 31 && f1 <= 12 && f3 > 31) {
288                datestr = f0 + f2 + ' ' + months[f1 - 1] + ' ' + (f3 >= 100 ? f3 : (f3 <= yy ? f3 + cc : f3 + cc - 100));
289            } else {
290                if (dmy === 'YMD' && f2 <= 12 && f3 <= 31 || f3 > 13 && f3 <= 31 && f2 <= 12 && f1 > 31) {
291                    datestr = f0 + f3 + ' ' + months[f2 - 1] + ' ' + (f1 >= 100 ? f1 : (f1 <= yy ? f1 + cc : f1 + cc - 100));
292                }
293            }
294        }
295    }
296
297  // Shortcuts for date ranges
298    datestr = datestr.replace(/^[>]([\w ]+)$/, 'AFT $1');
299    datestr = datestr.replace(/^[<]([\w ]+)$/, 'BEF $1');
300    datestr = datestr.replace(/^([\w ]+)[-]$/, 'FROM $1');
301    datestr = datestr.replace(/^[-]([\w ]+)$/, 'TO $1');
302    datestr = datestr.replace(/^[~]([\w ]+)$/, 'ABT $1');
303    datestr = datestr.replace(/^[*]([\w ]+)$/, 'EST $1');
304    datestr = datestr.replace(/^[#]([\w ]+)$/, 'CAL $1');
305    datestr = datestr.replace(/^([\w ]+) ?- ?([\w ]+)$/, 'BET $1 AND $2');
306    datestr = datestr.replace(/^([\w ]+) ?~ ?([\w ]+)$/, 'FROM $1 TO $2');
307
308  // Convert full months to short months
309    datestr = datestr.replace(/(JANUARY)/, 'JAN');
310    datestr = datestr.replace(/(FEBRUARY)/, 'FEB');
311    datestr = datestr.replace(/(MARCH)/, 'MAR');
312    datestr = datestr.replace(/(APRIL)/, 'APR');
313    datestr = datestr.replace(/(MAY)/, 'MAY');
314    datestr = datestr.replace(/(JUNE)/, 'JUN');
315    datestr = datestr.replace(/(JULY)/, 'JUL');
316    datestr = datestr.replace(/(AUGUST)/, 'AUG');
317    datestr = datestr.replace(/(SEPTEMBER)/, 'SEP');
318    datestr = datestr.replace(/(OCTOBER)/, 'OCT');
319    datestr = datestr.replace(/(NOVEMBER)/, 'NOV');
320    datestr = datestr.replace(/(DECEMBER)/, 'DEC');
321
322  // Americans frequently enter dates as SEP 20, 1999
323  // No need to internationalise this, as this is an english-language issue
324    datestr = datestr.replace(/(JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC)\.? (\d\d?)[, ]+(\d\d\d\d)/, '$2 $1 $3');
325
326  // Apply leading zero to day numbers
327    datestr = datestr.replace(/(^| )(\d [A-Z]{3,5} \d{4})/, '$10$2');
328
329    if (datephrase) {
330        datestr = datestr + ' (' + datephrase;
331    }
332  // Only update it if is has been corrected - otherwise input focus
333  // moves to the end of the field unnecessarily
334    if (datefield.value !== datestr) {
335        datefield.value = datestr;
336    }
337}
338
339var monthLabels = [];
340monthLabels[1] = 'January';
341monthLabels[2] = 'February';
342monthLabels[3] = 'March';
343monthLabels[4] = 'April';
344monthLabels[5] = 'May';
345monthLabels[6] = 'June';
346monthLabels[7] = 'July';
347monthLabels[8] = 'August';
348monthLabels[9] = 'September';
349monthLabels[10] = 'October';
350monthLabels[11] = 'November';
351monthLabels[12] = 'December';
352
353var monthShort = [];
354monthShort[1] = 'JAN';
355monthShort[2] = 'FEB';
356monthShort[3] = 'MAR';
357monthShort[4] = 'APR';
358monthShort[5] = 'MAY';
359monthShort[6] = 'JUN';
360monthShort[7] = 'JUL';
361monthShort[8] = 'AUG';
362monthShort[9] = 'SEP';
363monthShort[10] = 'OCT';
364monthShort[11] = 'NOV';
365monthShort[12] = 'DEC';
366
367var daysOfWeek = [];
368daysOfWeek[0] = 'S';
369daysOfWeek[1] = 'M';
370daysOfWeek[2] = 'T';
371daysOfWeek[3] = 'W';
372daysOfWeek[4] = 'T';
373daysOfWeek[5] = 'F';
374daysOfWeek[6] = 'S';
375
376var weekStart = 0;
377
378function cal_setMonthNames(jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec)
379{
380    monthLabels[1] = jan;
381    monthLabels[2] = feb;
382    monthLabels[3] = mar;
383    monthLabels[4] = apr;
384    monthLabels[5] = may;
385    monthLabels[6] = jun;
386    monthLabels[7] = jul;
387    monthLabels[8] = aug;
388    monthLabels[9] = sep;
389    monthLabels[10] = oct;
390    monthLabels[11] = nov;
391    monthLabels[12] = dec;
392}
393
394function cal_setDayHeaders(sun, mon, tue, wed, thu, fri, sat)
395{
396    daysOfWeek[0] = sun;
397    daysOfWeek[1] = mon;
398    daysOfWeek[2] = tue;
399    daysOfWeek[3] = wed;
400    daysOfWeek[4] = thu;
401    daysOfWeek[5] = fri;
402    daysOfWeek[6] = sat;
403}
404
405function cal_setWeekStart(day)
406{
407    if (day >= 0 && day < 7) {
408        weekStart = day;
409    }
410}
411
412function calendarWidget(dateDivId, dateFieldId)
413{
414    var dateDiv = document.getElementById(dateDivId);
415    var dateField = document.getElementById(dateFieldId);
416
417    if (dateDiv.style.visibility === 'visible') {
418        dateDiv.style.visibility = 'hidden';
419        return false;
420    }
421    if (dateDiv.style.visibility === 'show') {
422        dateDiv.style.visibility = 'hide';
423        return false;
424    }
425
426  /* Javascript calendar functions only work with precise gregorian dates "D M Y" or "Y" */
427    var greg_regex = /((\d+ (JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC) )?\d+)/i;
428    var date;
429    if (greg_regex.exec(dateField.value)) {
430        date = new Date(RegExp.$1);
431    } else {
432        date = new Date();
433    }
434
435    dateDiv.innerHTML = cal_generateSelectorContent(dateFieldId, dateDivId, date);
436    if (dateDiv.style.visibility === 'hidden') {
437        dateDiv.style.visibility = 'visible';
438        return false;
439    }
440    if (dateDiv.style.visibility === 'hide') {
441        dateDiv.style.visibility = 'show';
442        return false;
443    }
444
445    return false;
446}
447
448function cal_generateSelectorContent(dateFieldId, dateDivId, date)
449{
450    var i, j;
451    var content = '<table border="1"><tr>';
452    content += '<td><select class="form-control" id="' + dateFieldId + '_daySelect" onchange="return cal_updateCalendar(\'' + dateFieldId + '\', \'' + dateDivId + '\');">';
453    for (i = 1; i < 32; i++) {
454        content += '<option value="' + i + '"';
455        if (date.getDate() === i) {
456            content += ' selected="selected"';
457        }
458        content += '>' + i + '</option>';
459    }
460    content += '</select></td>';
461    content += '<td><select class="form-control" id="' + dateFieldId + '_monSelect" onchange="return cal_updateCalendar(\'' + dateFieldId + '\', \'' + dateDivId + '\');">';
462    for (i = 1; i < 13; i++) {
463        content += '<option value="' + i + '"';
464        if (date.getMonth() + 1 === i) {
465            content += ' selected="selected"';
466        }
467        content += '>' + monthLabels[i] + '</option>';
468    }
469    content += '</select></td>';
470    content += '<td><input class="form-control" type="text" id="' + dateFieldId + '_yearInput" size="5" value="' + date.getFullYear() + '" onchange="return cal_updateCalendar(\'' + dateFieldId + '\', \'' + dateDivId + '\');" /></td></tr>';
471    content += '<tr><td colspan="3">';
472    content += '<table width="100%">';
473    content += '<tr>';
474    j = weekStart;
475    for (i = 0; i < 7; i++) {
476        content += '<td ';
477        content += 'class="descriptionbox"';
478        content += '>';
479        content += daysOfWeek[j];
480        content += '</td>';
481        j++;
482        if (j > 6) {
483            j = 0;
484        }
485    }
486    content += '</tr>';
487
488    var tdate = new Date(date.getFullYear(), date.getMonth(), 1);
489    var day = tdate.getDay();
490    day = day - weekStart;
491    var daymilli = 1000 * 60 * 60 * 24;
492    tdate = tdate.getTime() - (day * daymilli) + (daymilli / 2);
493    tdate = new Date(tdate);
494
495    for (j = 0; j < 6; j++) {
496        content += '<tr>';
497        for (i = 0; i < 7; i++) {
498            content += '<td ';
499            if (tdate.getMonth() === date.getMonth()) {
500                if (tdate.getDate() === date.getDate()) {
501                    content += 'class="descriptionbox"';
502                } else {
503                    content += 'class="optionbox"';
504                }
505            } else {
506                content += 'style="background-color:#EAEAEA; border: solid #AAAAAA 1px;"';
507            }
508            content += '><a href="#" onclick="return cal_dateClicked(\'' + dateFieldId + '\', \'' + dateDivId + '\', ' + tdate.getFullYear() + ', ' + tdate.getMonth() + ', ' + tdate.getDate() + ');">';
509            content += tdate.getDate();
510            content += '</a></td>';
511            var datemilli = tdate.getTime() + daymilli;
512            tdate = new Date(datemilli);
513        }
514        content += '</tr>';
515    }
516    content += '</table>';
517    content += '</td></tr>';
518    content += '</table>';
519
520    return content;
521}
522
523function cal_setDateField(dateFieldId, year, month, day)
524{
525    var dateField = document.getElementById(dateFieldId);
526    if (!dateField) {
527        return false;
528    }
529    if (day < 10) {
530        day = '0' + day;
531    }
532    dateField.value = day + ' ' + monthShort[month + 1] + ' ' + year;
533    return false;
534}
535
536function cal_updateCalendar(dateFieldId, dateDivId)
537{
538    var dateSel = document.getElementById(dateFieldId + '_daySelect');
539    if (!dateSel) {
540        return false;
541    }
542    var monthSel = document.getElementById(dateFieldId + '_monSelect');
543    if (!monthSel) {
544        return false;
545    }
546    var yearInput = document.getElementById(dateFieldId + '_yearInput');
547    if (!yearInput) {
548        return false;
549    }
550
551    var month = parseInt(monthSel.options[monthSel.selectedIndex].value, 10);
552    month = month - 1;
553
554    var date = new Date(yearInput.value, month, dateSel.options[dateSel.selectedIndex].value);
555    cal_setDateField(dateFieldId, date.getFullYear(), date.getMonth(), date.getDate());
556
557    var dateDiv = document.getElementById(dateDivId);
558    if (!dateDiv) {
559        alert('no dateDiv ' + dateDivId);
560        return false;
561    }
562    dateDiv.innerHTML = cal_generateSelectorContent(dateFieldId, dateDivId, date);
563
564    return false;
565}
566
567function cal_dateClicked(dateFieldId, dateDivId, year, month, day)
568{
569    cal_setDateField(dateFieldId, year, month, day);
570    calendarWidget(dateDivId, dateFieldId);
571    return false;
572}
573
574function openerpasteid(id)
575{
576    if (window.opener.paste_id) {
577        window.opener.paste_id(id);
578    }
579    window.close();
580}
581
582function paste_id(value)
583{
584    pastefield.value = value;
585}
586
587function pastename(name)
588{
589    if (nameElement) {
590        nameElement.innerHTML = name;
591    }
592    if (remElement) {
593        remElement.style.display = 'block';
594    }
595}
596
597function paste_char(value)
598{
599    if (document.selection) {
600      // IE
601        pastefield.focus();
602        document.selection.createRange().text = value;
603    } else if (pastefield.selectionStart || pastefield.selectionStart === 0) {
604      // Mozilla/Chrome/Safari
605        pastefield.value =
606        pastefield.value.substring(0, pastefield.selectionStart) +
607        value +
608        pastefield.value.substring(pastefield.selectionEnd, pastefield.value.length);
609        pastefield.selectionStart = pastefield.selectionEnd = pastefield.selectionStart + value.length;
610    } else {
611      // Fallback? - just append
612        pastefield.value += value;
613    }
614
615    if (pastefield.id === 'NPFX' || pastefield.id === 'GIVN' || pastefield.id === 'SPFX' || pastefield.id === 'SURN' || pastefield.id === 'NSFX') {
616        updatewholename();
617    }
618}
619
620/**
621 * Persistant checkbox options to hide/show extra data.
622
623 * @param element_id
624 */
625function persistent_toggle(element_id)
626{
627    let element = document.getElementById(element_id);
628    let key     = 'state-of-' + element_id;
629    let state   = localStorage.getItem(key);
630
631    // Previously selected?
632    if (state === 'true') {
633        $(element).click();
634    }
635
636    // Remember state for the next page load.
637    $(element).on('change', function() { localStorage.setItem(key, element.checked); });
638}
639
640function valid_lati_long(field, pos, neg)
641{
642  // valid LATI or LONG according to Gedcom standard
643  // pos (+) : N or E
644  // neg (-) : S or W
645    var txt = field.value.toUpperCase();
646    txt = txt.replace(/(^\s*)|(\s*$)/g, ''); // trim
647    txt = txt.replace(/ /g, ':'); // N12 34 ==> N12.34
648    txt = txt.replace(/\+/g, ''); // +17.1234 ==> 17.1234
649    txt = txt.replace(/-/g, neg); // -0.5698 ==> W0.5698
650    txt = txt.replace(/,/g, '.'); // 0,5698 ==> 0.5698
651  // 0°34'11 ==> 0:34:11
652    txt = txt.replace(/\u00b0/g, ':'); // °
653    txt = txt.replace(/\u0027/g, ':'); // '
654  // 0:34:11.2W ==> W0.5698
655    txt = txt.replace(/^([0-9]+):([0-9]+):([0-9.]+)(.*)/g, function ($0, $1, $2, $3, $4) {
656        var n = parseFloat($1);
657        n += ($2 / 60);
658        n += ($3 / 3600);
659        n = Math.round(n * 1E4) / 1E4;
660        return $4 + n;
661    });
662  // 0:34W ==> W0.5667
663    txt = txt.replace(/^([0-9]+):([0-9]+)(.*)/g, function ($0, $1, $2, $3) {
664        var n = parseFloat($1);
665        n += ($2 / 60);
666        n = Math.round(n * 1E4) / 1E4;
667        return $3 + n;
668    });
669  // 0.5698W ==> W0.5698
670    txt = txt.replace(/(.*)([N|S|E|W]+)$/g, '$2$1');
671  // 17.1234 ==> N17.1234
672    if (txt && txt.charAt(0) !== neg && txt.charAt(0) !== pos) {
673        txt = pos + txt;
674    }
675    field.value = txt;
676}
677
678// This is the default way for webtrees to show image galleries.
679// Custom themes may use a different viewer.
680function activate_colorbox(config)
681{
682    $.extend($.colorbox.settings, {
683      // Don't scroll window with document
684        fixed: true,
685        current: '',
686        previous: '\uf048',
687        next: '\uf051',
688        slideshowStart: '\uf04b',
689        slideshowStop: '\uf04c',
690        close: '\uf00d'
691    });
692    if (config) {
693        $.extend($.colorbox.settings, config);
694    }
695
696  // Trigger an event when we click on an (any) image
697    $('body').on('click', 'a.gallery', function () {
698      // Enable colorbox for images
699        $('a[type^=image].gallery').colorbox({
700            photo: true,
701            maxWidth: '95%',
702            maxHeight: '95%',
703            rel: 'gallery', // Turn all images on the page into a slideshow
704            slideshow: true,
705            slideshowAuto: false,
706          // Add wheelzoom to the displayed image
707            onComplete: function () {
708              // Disable click on image triggering next image
709              // https://github.com/jackmoore/colorbox/issues/668
710                $('.cboxPhoto').unbind('click');
711
712                wheelzoom(document.querySelectorAll('.cboxPhoto'));
713            }
714        });
715
716      // Enable colorbox for audio using <audio></audio>, where supported
717      // $('html.video a[type^=video].gallery').colorbox({
718      //  rel:         'nofollow' // Slideshows are just for images
719      // });
720
721      // Enable colorbox for video using <video></video>, where supported
722      // $('html.audio a[type^=audio].gallery').colorbox({
723      //  rel:         'nofollow', // Slideshows are just for images
724      // });
725
726      // Allow all other media types remain as download links
727    });
728}
729
730// Initialize autocomplete elements.
731function autocomplete(selector)
732{
733  // Use typeahead/bloodhound for autocomplete
734    $(selector).each(function () {
735        let that = this;
736        $(this).typeahead(null, {
737            display: 'value',
738            source: new Bloodhound({
739                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
740                queryTokenizer: Bloodhound.tokenizers.whitespace,
741                remote: {
742                    url: this.dataset.autocompleteUrl,
743                    replace: function(url, uriEncodedQuery) {
744                        if (that.dataset.autocompleteExtra) {
745                            let extra = $(document.querySelector(that.dataset.autocompleteExtra)).val();
746                            return url.replace("QUERY",uriEncodedQuery) + '&extra=' + encodeURIComponent(extra)
747                        }
748                        return url.replace("QUERY",uriEncodedQuery);
749                    },
750                    wildcard: 'QUERY',
751
752                }
753            })
754        });
755    });
756}
757
758/**
759 * Insert text at the current cursor position in an input field.
760 *
761 * @param e The input element.
762 * @param t The text to insert.
763 */
764function insertTextAtCursor(e, t)
765{
766    var scrollTop = e.scrollTop;
767    var selectionStart = e.selectionStart;
768    var prefix = e.value.substring(0, selectionStart);
769    var suffix = e.value.substring(e.selectionEnd, e.value.length);
770    e.value = prefix + t + suffix;
771    e.selectionStart = selectionStart + t.length;
772    e.selectionEnd = e.selectionStart;
773    e.focus();
774    e.scrollTop = scrollTop;
775}
776
777
778/**
779 * Draws a google pie chart.
780 *
781 * @param {String} elementId        The element id of the HTML element the chart is rendered too
782 * @param {Array}  data             The chart data array
783 * @param {Array}  colors           The chart color array
784 * @param {String} title            The chart title
785 * @param {String} labeledValueText The type of how to display the slice text
786 */
787function drawPieChart(elementId, data, colors, title, labeledValueText)
788{
789    var data    = google.visualization.arrayToDataTable(data);
790    var options = {
791        title: title,
792        height: '100%',
793        width: '100%',
794        pieStartAngle: 0,
795        pieSliceText: 'none',
796        pieSliceTextStyle: {
797            color: '#777'
798        },
799        pieHole: 0.4,  // Donut
800        //is3D: true,  // 3D (not together with pieHole)
801        legend: {
802            alignment: 'center',
803            // Flickers on mouseover :(
804            labeledValueText: labeledValueText || 'value',
805            position: 'labeled'
806        },
807        chartArea: {
808            left: 0,
809            top: '5%',
810            height: '90%',
811            width: '100%'
812        },
813        tooltip: {
814            trigger: 'none',
815            text: 'both'
816        },
817        backgroundColor: 'transparent',
818        colors: colors
819    };
820
821    var chart = new google.visualization.PieChart(document.getElementById(elementId));
822
823    chart.draw(data, options);
824}
825
826/**
827 * Draws a google column chart.
828 *
829 * @param {String} elementId The element id of the HTML element the chart is rendered too
830 * @param {Array}  data      The chart data array
831 * @param {Object} options   The chart specific options to overwrite the default ones
832 */
833function drawColumnChart(elementId, data, options)
834{
835    var defaults = {
836        title: '',
837        subtitle: '',
838        titleTextStyle: {
839            color: '#757575',
840            fontName: 'Roboto',
841            fontSize: '16px',
842            bold: false,
843            italic: false
844        },
845        height: '100%',
846        width: '100%',
847        vAxis: {
848            title: ''
849        },
850        hAxis: {
851            title: ''
852        },
853        legend: {
854            position: 'none'
855        },
856        backgroundColor: 'transparent'
857    };
858
859    options = Object.assign(defaults, options);
860
861    var chart = new google.visualization.ColumnChart(document.getElementById(elementId));
862    var data  = google.visualization.arrayToDataTable(data);
863
864    chart.draw(data, options);
865}
866
867/**
868 * Draws a google combo chart.
869 *
870 * @param {String} elementId The element id of the HTML element the chart is rendered too
871 * @param {Array}  data      The chart data array
872 * @param {Object} options   The chart specific options to overwrite the default ones
873 */
874function drawComboChart(elementId, data, options)
875{
876    var defaults = {
877        title: '',
878        subtitle: '',
879        titleTextStyle: {
880            color: '#757575',
881            fontName: 'Roboto',
882            fontSize: '16px',
883            bold: false,
884            italic: false
885        },
886        height: '100%',
887        width: '100%',
888        vAxis: {
889            title: ''
890        },
891        hAxis: {
892            title: ''
893        },
894        legend: {
895            position: 'none'
896        },
897        seriesType: 'bars',
898        series: {
899            2: {
900                type: 'line'
901            }
902        },
903        colors: [],
904        backgroundColor: 'transparent'
905    };
906
907    options = Object.assign(defaults, options);
908
909    var chart = new google.visualization.ComboChart(document.getElementById(elementId));
910    var data  = google.visualization.arrayToDataTable(data);
911
912    chart.draw(data, options);
913}
914
915/**
916 * Draws a google geo chart.
917 *
918 * @param {String} elementId The element id of the HTML element the chart is rendered too
919 * @param {Array}  data      The chart data array
920 * @param {Object} options   The chart specific options to overwrite the default ones
921 */
922function drawGeoChart(elementId, data, options)
923{
924    var defaults = {
925        title: '',
926        subtitle: '',
927        height: '100%',
928        width: '100%'
929    };
930
931    options = Object.assign(defaults, options);
932
933    var chart = new google.visualization.GeoChart(document.getElementById(elementId));
934    var data  = google.visualization.arrayToDataTable(data);
935
936    chart.draw(data, options);
937}
938
939// Send the CSRF token on all AJAX requests
940$.ajaxSetup({
941    headers: {
942        'X-CSRF-TOKEN': $('meta[name=csrf]').attr('content')
943    }
944});
945
946// Initialisation
947$(function () {
948  // Page elements that load automaticaly via AJAX.
949  // This prevents bad robots from crawling resource-intensive pages.
950    $("[data-ajax-url]").each(function () {
951        $(this).load($(this).data('ajaxUrl'));
952    });
953
954  // Select2 - format entries in the select list
955    function templateOptionForSelect2(data)
956    {
957        if (data.loading) {
958          // If we're waiting for the server, this will be a "waiting..." message
959            return data.text;
960        } else {
961          // The response from the server is already in HTML, so no need to format it here.
962            return data.text;
963        }
964    }
965
966    // Autocomplete
967    autocomplete('input[data-autocomplete-url]');
968
969    // Select2 - activate autocomplete fields
970    const lang = document.documentElement.lang;
971    const select2_languages = {
972        'zh-Hans': 'zh-CN',
973        'zh-Hant': 'zh-TW',
974    };
975    $("select.select2").select2({
976        language: select2_languages[lang] || lang,
977        // "auto" breaks content that is initially hidden.
978        // "100%" breaks content that isn't.
979        // "90%"
980        width: "90%",
981        // Do not escape.
982        escapeMarkup: function (x) {
983            return x;
984        },
985        // Same formatting for both selections and rsult
986        //templateResult: templateOptionForSelect2,
987        //templateSelection: templateOptionForSelect2
988    })
989    .on("select2:unselect", function (evt) {
990        // If we clear the select (using the "X" button), we need an empty
991        // value (rather than no value at all) for inputs with name="array[]"
992        $(evt.delegateTarget).html("<option value=\"\" selected></option>");
993    });
994
995    // Datatables - locale aware sorting
996    $.fn.dataTableExt.oSort['text-asc'] = function (x, y) {
997        return x.localeCompare(y, document.documentElement.lang, {'sensitivity': 'base'});
998    };
999    $.fn.dataTableExt.oSort['text-desc'] = function (x, y) {
1000        return y.localeCompare(x, document.documentElement.lang, {'sensitivity': 'base'});
1001    };
1002
1003  // DataTables - start hidden to prevent FOUC.
1004    $('table.datatables').each(function () {
1005        $(this).DataTable(); $(this).removeClass('d-none'); });
1006
1007  // Create a new record while editing an existing one.
1008  // Paste the XREF and description into the Select2 element.
1009    $('.wt-modal-create-record').on('show.bs.modal', function (event) {
1010      // Find the element ID that needs to be updated with the new value.
1011        $('form', $(this)).data('element-id', $(event.relatedTarget).data('element-id'));
1012        $('form .form-group input:first', $(this)).focus();
1013    });
1014
1015  // Submit the modal form using AJAX, and paste the returned record ID/NAME into the parent form.
1016    $('.wt-modal-create-record form').on('submit', function (event) {
1017        event.preventDefault();
1018        var elementId = $(this).data('element-id');
1019        $.ajax({
1020            url: 'index.php',
1021            type: 'POST',
1022            data: new FormData(this),
1023            async: false,
1024            cache: false,
1025            contentType: false,
1026            processData: false,
1027            success: function (data) {
1028                $('#' + elementId).select2().empty().append(new Option(data.text, data.id)).val(data.id).trigger('change');
1029            },
1030            failure: function (data) {
1031                alert(data.error_message);
1032            }
1033        });
1034      // Clear the form
1035        this.reset();
1036      // Close the modal
1037        $(this).closest('.wt-modal-create-record').modal('hide');
1038    });
1039
1040  // Activate the langauge selection menu.
1041    $('.menu-language').on('click', '[data-language]', function () {
1042        $.post('index.php?route=language', {
1043            language: $(this).data('language')
1044        }, function () {
1045            document.location.reload();
1046        });
1047
1048        return false;
1049    });
1050
1051  // Activate the theme selection menu.
1052    $('.menu-theme').on('click', '[data-theme]', function () {
1053        $.post('index.php?route=theme', {
1054            theme: $(this).data('theme')
1055        }, function () {
1056            document.location.reload();
1057        });
1058
1059        return false;
1060    });
1061
1062  // Activate the on-screen keyboard
1063    var osk_focus_element;
1064    $('.wt-osk-trigger').click(function () {
1065      // When a user clicks the icon, set focus to the corresponding input
1066        osk_focus_element = document.getElementById($(this).data('id'));
1067        osk_focus_element.focus();
1068        $('.wt-osk').show();
1069
1070    });
1071
1072    $('.wt-osk-script-button').change(function () {
1073        $('.wt-osk-script').prop('hidden', true);
1074        $('.wt-osk-script-' + $(this).data('script')).prop('hidden', false);
1075    });
1076    $('.wt-osk-shift-button').click(function () {
1077        document.querySelector('.wt-osk-keys').classList.toggle('shifted');
1078    });
1079    $('.wt-osk-keys').on('click', '.wt-osk-key', function () {
1080        var key = $(this).contents().get(0).nodeValue;
1081        var shift_state = $('.wt-osk-shift-button').hasClass('active');
1082        var shift_key = $('sup', this)[0];
1083        if (shift_state && shift_key !== undefined) {
1084            key = shift_key.innerText;
1085        }
1086        if (osk_focus_element !== null) {
1087            var cursorPos = osk_focus_element.selectionStart;
1088            var v = osk_focus_element.value;
1089            var textBefore = v.substring(0, cursorPos);
1090            var textAfter  = v.substring(cursorPos, v.length);
1091            osk_focus_element.value = textBefore + key + textAfter;
1092            if ($('.wt-osk-pin-button').hasClass('active') === false) {
1093                $('.wt-osk').hide();
1094            }
1095        }
1096    });
1097
1098    $('.wt-osk-close').on('click', function () {
1099        $('.wt-osk').hide();
1100    });
1101});
1102