Skip to content
Snippets Groups Projects
Commit 8f547c85 authored by VISHESH0932's avatar VISHESH0932
Browse files

Merge branch 'dev' of https://gitlab.com/VISHESH0932/linkahead-webui into dev

parents e4d72b8f 288af6e0
No related branches found
No related tags found
1 merge request!143EXTERN: MR 116 Changes
Pipeline #56921 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
ext_cosmetics.js → src/core/js/ext_cosmetics.js
+ 174
− 175
View file @ 8f547c85
/* /*
* This file is a part of the LinkAhead Project. * This file is a part of the LinkAhead Project.
* *
* Copyright (C) 2021-2024 IndiScale GmbH <info@indiscale.com> * Copyright (C) 2021-2024 IndiScale GmbH <info@indiscale.com>
* Copyright (C) 2021 Timm Fitschen <t.fitschen@indiscale.com> * Copyright (C) 2021 Timm Fitschen <t.fitschen@indiscale.com>
* Copyright (C) 2023 Florian Spreckelsen <f.spreckelsen@indiscale.com> * Copyright (C) 2023 Florian Spreckelsen <f.spreckelsen@indiscale.com>
* Copyright (C) 2023 Daniel Hornung <d.hornung@indiscale.com> * Copyright (C) 2023 Daniel Hornung <d.hornung@indiscale.com>
* Copyright (C) 2024 Joscha Schmiedt <joscha@schmiedt.dev> * Copyright (C) 2024 Joscha Schmiedt <joscha@schmiedt.dev>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* You should have received a copy of the GNU Affero General Public License * You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
"use strict"; "use strict";
/** /**
* Cosmetics module is a collection of small look-and-feel tweaks for the * Cosmetics module is a collection of small look-and-feel tweaks for the
* LinkAhead webui. * LinkAhead webui.
* *
* @author Timm Fitschen * @author Timm Fitschen
*/ */
var cosmetics = new function () { var cosmetics = new function() {
/** /**
* Cut-off length of links. When linkify processes the links any href * Cut-off length of links. When linkify processes the links any href
* longer than this will be cut off at the end and "[...]" will be * longer than this will be cut off at the end and "[...]" will be
* appended for the link text. * appended for the link text.
*/ */
var _link_cut_off_length = 40; var _link_cut_off_length = 40;
var _custom_datetime = function () { var _custom_datetime = function() {
$('.caosdb-f-property-datetime-value').each(function (index) { $('.caosdb-f-property-datetime-value').each(function(index) {
if (!($(this).hasClass("caosdb-v-property-datetime-customized"))) { if (!($(this).hasClass("caosdb-v-property-datetime-customized"))) {
var result = this.innerText.replace(/T/, " ").replace(/\+.*/, ""); var result = this.innerText.replace(/T/, " ").replace(/\+.*/, "");
result = `<span class="caosdb-v-property-datetime-customized-newvalue">${result}</span>`; result = `<span class="caosdb-v-property-datetime-customized-newvalue">${result}</span>`;
// add class to highlight that this has been customized already // add class to highlight that this has been customized already
$(this).addClass("caosdb-v-property-datetime-customized") $(this).addClass("caosdb-v-property-datetime-customized")
$(this).hide(); $(this).hide();
$(this).after(result); $(this).after(result);
} }
}); });
} }
/** /**
* Remove all the custom datetime elements again, for example when entering the edit mode. * Remove all the custom datetime elements again, for example when entering the edit mode.
*/ */
var _custom_datetime_clear = function () { var _custom_datetime_clear = function() {
$('.caosdb-v-property-datetime-customized-newvalue').each(function () { $('.caosdb-v-property-datetime-customized-newvalue').each(function() {
$(this).remove(); $(this).remove();
} })
) }
}
/**
/** * Return a string with all occurences of a http(s) url in a given string replaced by <a> elements
* 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
* @param {string} text - The text to be searched for URLs * @returns {string} text with <a> elements instead of raw links
* @returns {string} text with <a> elements instead of raw links */
*/ function linkify_string(text) {
function linkify_string(text) { // const match_url_regex = /https?:\/\/[^\s]*/g // original
// const match_url_regex = /https?:\/\/[^\s]*/g // original // https://regexr.com helps you design regex
// https://regexr.com helps you design regex const match_url_regex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.?[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g
const match_url_regex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.?[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g
return text.replace(match_url_regex, function(href) {
return text.replace(match_url_regex, function (href) { var link_text = href;
var link_text = href; if (_link_cut_off_length > 4 && link_text.length > _link_cut_off_length) {
if (_link_cut_off_length > 4 && link_text.length > _link_cut_off_length) { link_text = link_text.substring(0, _link_cut_off_length - 5) + "[...]";
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
* Turn all URLs in .caosdb-f-property-text-value DOM elements into actual links */
*/ var _linkify_all_text_values = function() {
var _linkify_all_text_values = function () { $('.caosdb-f-property-text-value').each(function(index) {
$('.caosdb-f-property-text-value').each(function (index) { if (!($(this).hasClass("caosdb-v-property-linkified")) && (/https?:\/\//.test(this.innerText))) {
if (!($(this).hasClass("caosdb-v-property-linkified")) && (/https?:\/\//.test(this.innerText))) { var linkified_text_value = linkify_string(this.innerText);
var linkified_text_value = linkify_string(this.innerText); // add class to highlight that this has been linkified already
// add class to highlight that this has been linkified already // (see https://gitlab.com/caosdb/caosdb-webui/-/issues/199).
// (see https://gitlab.com/caosdb/caosdb-webui/-/issues/199). $(this).addClass("caosdb-v-property-linkified")
$(this).addClass("caosdb-v-property-linkified") $(this).hide();
$(this).hide(); $(this).after(linkified_text_value);
$(this).after(linkified_text_value); }
} });
}); }
}
/**
/** * Convert any substring of a text-value beginning with 'http(s)://' into a
* Convert any substring of a text-value beginning with 'http(s)://' into a * link.
* link. *
* * A listener detects edit-mode changes and previews
* A listener detects edit-mode changes and previews */
*/ var linkify = function() {
var linkify = function () { _linkify_all_text_values();
_linkify_all_text_values();
// edit-mode-listener
// edit-mode-listener document.body.addEventListener(edit_mode.end_edit.type, _linkify_all_text_values, true);
document.body.addEventListener(edit_mode.end_edit.type, _linkify_all_text_values, true); // preview listener
// preview listener document.body.addEventListener(preview.previewReadyEvent.type, _linkify_all_text_values, true);
document.body.addEventListener(preview.previewReadyEvent.type, _linkify_all_text_values, true); }
}
/**
/** * Customize datetime formatting.
* Customize datetime formatting. *
* * A listener detects edit-mode changes and previews
* A listener detects edit-mode changes and previews */
*/ var custom_datetime = function() {
var custom_datetime = function () { _custom_datetime();
_custom_datetime();
// edit-mode-listener to delete replacement
// edit-mode-listener to delete replacement document.body.addEventListener(edit_mode.start_edit.type, _custom_datetime_clear, true);
document.body.addEventListener(edit_mode.start_edit.type, _custom_datetime_clear, true); // edit-mode-listener to recreate
// edit-mode-listener to recreate document.body.addEventListener(edit_mode.end_edit.type, _custom_datetime, true);
document.body.addEventListener(edit_mode.end_edit.type, _custom_datetime, true); // preview listener
// preview listener document.body.addEventListener(preview.previewReadyEvent.type, _custom_datetime, true);
document.body.addEventListener(preview.previewReadyEvent.type, _custom_datetime, true); }
}
/**
/** * Prettify double values for display purposes.
* Prettify double values for display purposes. */
*/ const prettify_double_values = () => {
const prettify_double_values = () => { $('.caosdb-f-property-double-value').each(function(index) {
$('.caosdb-f-property-double-value').each(function (index) { if (!$(this).hasClass("caosdb-v-property-double-prettified")) {
if (!$(this).hasClass("caosdb-v-property-double-prettified")) { let value = parseFloat(this.innerText);
let value = parseFloat(this.innerText); let prettified_value = "";
let prettified_value = "";
if (Math.abs(value) > 1e6 || Math.abs(value) < 1e-6) {
if (Math.abs(value) > 1e6 || Math.abs(value) < 1e-6) { // Use scientific notation for very large or very small values
// Use scientific notation for very large or very small values prettified_value = value.toExponential(1);
prettified_value = value.toExponential(1); } else {
} else { // Otherwise, display with up to 12 significant digits
// Otherwise, display with up to 12 significant digits prettified_value = value.toPrecision(12).replace(/\.?0+$/, '');
prettified_value = value.toPrecision(12).replace(/\.?0+$/, ''); }
}
$(this).addClass("caosdb-v-property-double-prettified");
$(this).addClass("caosdb-v-property-double-prettified"); $(this).hide();
$(this).hide(); $(this).after(`<span class="caosdb-v-property-double-prettified-newvalue">${prettified_value}</span>`);
$(this).after(`<span class="caosdb-v-property-double-prettified-newvalue">${prettified_value}</span>`); }
} });
}); };
};
this.init = function() {
this.init = function () { this.custom_datetime = custom_datetime;
this.custom_datetime = custom_datetime; if ("${BUILD_MODULE_EXT_COSMETICS_CUSTOMDATETIME}" == "ENABLED") {
if ("${BUILD_MODULE_EXT_COSMETICS_CUSTOMDATETIME}" == "ENABLED") { custom_datetime();
custom_datetime(); }
} this.linkify = linkify;
this.linkify = linkify; if ("${BUILD_MODULE_EXT_COSMETICS_LINKIFY}" == "ENABLED") {
if ("${BUILD_MODULE_EXT_COSMETICS_LINKIFY}" == "ENABLED") { linkify();
linkify(); }
} this.prettify_double_values = prettify_double_values;
this.prettify_double_values = prettify_double_values; if ("${BUILD_MODULE_EXT_COSMETICS_PRETTIFY_DOUBLES}" === "ENABLED") {
if ("${BUILD_MODULE_EXT_COSMETICS_PRETTIFY_DOUBLES}" === "ENABLED") { prettify_double_values();
prettify_double_values(); }
} }
} }
}
$(document).ready(function() {
$(document).ready(function () { caosdb_modules.register(cosmetics);
caosdb_modules.register(cosmetics); });
});
test/core/js/modules/ext_cosmetics.js.js
+ 10
− 30
View file @ 8f547c85
...@@ -23,22 +23,22 @@ ...@@ -23,22 +23,22 @@
'use strict'; 'use strict';
QUnit.module("ext_cosmetics.js", { QUnit.module("ext_cosmetics.js", {
before: function (assert) { before: function(assert) {
cosmetics.init(); cosmetics.init();
// setup before module // setup before module
}, },
beforeEach: function (assert) { beforeEach: function(assert) {
// setup before each test // setup before each test
}, },
afterEach: function (assert) { afterEach: function(assert) {
// teardown after each test // teardown after each test
}, },
after: function (assert) { after: function(assert) {
// teardown after module // teardown after module
} }
}); });
QUnit.test("custom datetime", function (assert) { QUnit.test("custom datetime", function(assert) {
assert.ok(cosmetics.custom_datetime, "custom_datetime available"); assert.ok(cosmetics.custom_datetime, "custom_datetime available");
var test_cases = [ var test_cases = [
["1234-56-78", "1234-56-78"], ["1234-56-78", "1234-56-78"],
...@@ -62,10 +62,10 @@ QUnit.test("custom datetime", function (assert) { ...@@ -62,10 +62,10 @@ QUnit.test("custom datetime", function (assert) {
} }
}); });
QUnit.test("linkify - https", function (assert) { QUnit.test("linkify - https", function(assert) {
assert.ok(cosmetics.linkify, "linkify available"); assert.ok(cosmetics.linkify, "linkify available");
var test_cases = [ var test_cases = [
["https://link", 1, "https://link",], ["https://link", 1, "https://link", ],
["this is other text https://link.com", 1, "https://link.com"], ["this is other text https://link.com", 1, "https://link.com"],
["https://link; this is other text", 1, "https://link"], ["https://link; this is other text", 1, "https://link"],
["this is other text https://link.de and this as well", 1, "https://link.de"], ["this is other text https://link.de and this as well", 1, "https://link.de"],
...@@ -85,7 +85,7 @@ QUnit.test("linkify - https", function (assert) { ...@@ -85,7 +85,7 @@ QUnit.test("linkify - https", function (assert) {
} }
}); });
QUnit.test("linkify - http", function (assert) { QUnit.test("linkify - http", function(assert) {
var test_cases = [ var test_cases = [
["http://link", 1], ["http://link", 1],
["this is other text http://link", 1], ["this is other text http://link", 1],
...@@ -106,7 +106,7 @@ QUnit.test("linkify - http", function (assert) { ...@@ -106,7 +106,7 @@ QUnit.test("linkify - http", function (assert) {
} }
}); });
QUnit.test("linkify cut-off (40)", function (assert) { QUnit.test("linkify cut-off (40)", function(assert) {
const container = $('<div></div>'); const container = $('<div></div>');
$(document.body).append(container); $(document.body).append(container);
const test_case = "here is some text https://this.is.a.link/with/more/than/40/characters/ this is more text"; const test_case = "here is some text https://this.is.a.link/with/more/than/40/characters/ this is more text";
...@@ -117,30 +117,10 @@ QUnit.test("linkify cut-off (40)", function (assert) { ...@@ -117,30 +117,10 @@ QUnit.test("linkify cut-off (40)", function (assert) {
assert.equal($(container).find("a").length, 1, "link is present"); assert.equal($(container).find("a").length, 1, "link is present");
assert.equal($(container).find("a").text(), "https://this.is.a.link/with/more/th[...] ", "link text has been cut off"); assert.equal($(container).find("a").text(), "https://this.is.a.link/with/more/th[...] ", "link text has been cut off");
container.remove(); container.remove();
});
QUnit.test("linkify - double values in URLs", function (assert) {
var test_cases = [
["https://example.com/value=1.2345", 1],
["This is a URL with a double value: https://example.com/value=1.2345", 1],
["https://example.com?param=123.456&other=789.1011", 1],
["Multiple links with doubles: https://example.com?param=1.1 and https://example2.com?param=2.2", 2],
];
for (let test_case of test_cases) {
const container = $('<div></div>');
$(document.body).append(container);
const text_value = $(`<div class="caosdb-f-property-text-value">${test_case[0]}</div>`);
container.append(text_value);
assert.equal($(container).find("a").length, 0, "no link present");
cosmetics.linkify();
assert.equal($(container).find("a").length, test_case[1], "link is present");
container.remove();
}
}); });
QUnit.test("linkify - double values in URLs", function (assert) { QUnit.test("linkify - double values in URLs", function(assert) {
var test_cases = [ var test_cases = [
["https://example.com/value=1.2345", 1], ["https://example.com/value=1.2345", 1],
["This is a URL with a double value: https://example.com/value=1.2345", 1], ["This is a URL with a double value: https://example.com/value=1.2345", 1],
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment