diff --git a/src/core/js/ext_cosmetics.js b/src/core/js/ext_cosmetics.js index 9443bf65c8fa3effa57a64491563479ca51c91d0..ff21aa3c05dda0717407c466b9e3cb13abc15014 100644 --- a/src/core/js/ext_cosmetics.js +++ b/src/core/js/ext_cosmetics.js @@ -51,66 +51,77 @@ var cosmetics = new function () { }); } - /** - * Remove all the custom datetime elements again, for example when entering the edit mode. - */ - var _custom_datetime_clear = function() { - $('.caosdb-v-property-datetime-customized-newvalue').each(function () { - $(this).remove(); + /** + * Remove all the custom datetime elements again, for example when entering the edit mode. + */ + var _custom_datetime_clear = function () { + $('.caosdb-v-property-datetime-customized-newvalue').each(function () { + $(this).remove(); + } + ) } - ) - } - var _linkify = function () { - $('.caosdb-f-property-text-value').each(function (index) { - if (!($(this).hasClass("caosdb-v-property-linkified")) && (/https?:\/\//.test(this.innerText))) { - var result = this.innerText.replace(/https?:\/\/[^\s]*/g, function (href, index) { - var link_text = href; - if (_link_cut_off_length > 4 && link_text.length > _link_cut_off_length) { - link_text = link_text.substring(0, _link_cut_off_length - 5) + "[...]"; - } + /** + * Return a string with all occurences of a http(s) url in a given string replaced by <a> elements + * @param {string} text - The text to be searched for URLs + */ + function _linkify_text(text) { + const match_url_regex = /((https?:\/\/)?([a-z]+\.)+[a-z]{2,}(\/[^\s]*)?)/gi; + return text.replace(match_url_regex, function (href) { + var link_text = href; + if (_link_cut_off_length > 4 && link_text.length > _link_cut_off_length) { + link_text = link_text.substring(0, _link_cut_off_length - 5) + "[...]"; + } - return `<a title="Open ${href} in a new tab." target="_blank" class="caosdb-v-property-href-value" href="${href}">${link_text} <i class="bi bi-box-arrow-up-right"></i></a>`; - }); + return `<a title="Open ${href} in a new tab." target="_blank"class="caosdb-v-property-href-value" href="${href}">${link_text}<i class="bi bi-box-arrow-up-right"></i></a>`; + }); + } + /** + * Turn all URLs in .caosdb-f-property-text-value DOM elements into actual links + */ + var _linkify_all_text_values = function () { + $('.caosdb-f-property-text-value').each(function (index) { + if (!($(this).hasClass("caosdb-v-property-linkified")) && (/https?:\/\//.test(this.innerText))) { + let linkified_text_value = _linkify_text(this.innerText); // add class to highlight that this has been linkified already // (see https://gitlab.com/caosdb/caosdb-webui/-/issues/199). $(this).addClass("caosdb-v-property-linkified") $(this).hide(); - $(this).after(result); + $(this).after(linkified_text_value); } }); } /** - * Customize datetime formatting. + * Convert any substring of a text-value beginning with 'http(s)://' into a + * link. * * A listener detects edit-mode changes and previews */ - var custom_datetime = function () { - _custom_datetime(); + var linkify = function () { + _linkify_all_text_values(); - // edit-mode-listener to delete replacement - document.body.addEventListener(edit_mode.start_edit.type, _custom_datetime_clear, true); - // edit-mode-listener to recreate - document.body.addEventListener(edit_mode.end_edit.type, _custom_datetime, true); + // edit-mode-listener + document.body.addEventListener(edit_mode.end_edit.type, _linkify_all_text_values, true); // preview listener - document.body.addEventListener(preview.previewReadyEvent.type, _custom_datetime, true); + document.body.addEventListener(preview.previewReadyEvent.type, _linkify_all_text_values, true); } /** - * Convert any substring of a text-value beginning with 'http(s)://' into a - * link. + * Customize datetime formatting. * * A listener detects edit-mode changes and previews */ - var linkify = function () { - _linkify(); + var custom_datetime = function () { + _custom_datetime(); - // edit-mode-listener - document.body.addEventListener(edit_mode.end_edit.type, _linkify, true); + // edit-mode-listener to delete replacement + document.body.addEventListener(edit_mode.start_edit.type, _custom_datetime_clear, true); + // edit-mode-listener to recreate + document.body.addEventListener(edit_mode.end_edit.type, _custom_datetime, true); // preview listener - document.body.addEventListener(preview.previewReadyEvent.type, _linkify, true); + document.body.addEventListener(preview.previewReadyEvent.type, _custom_datetime, true); } this.init = function () { @@ -123,7 +134,6 @@ var cosmetics = new function () { linkify(); } } - }