From 492b38a4dcba4cde7b3d974823483a0a6f47f0e8 Mon Sep 17 00:00:00 2001
From: Florian Spreckelsen <f.spreckelsen@indiscale.com>
Date: Fri, 18 Oct 2024 13:20:16 +0200
Subject: [PATCH] STY: Use unix formatting and web-beautified
---
src/core/js/ext_cosmetics.js | 349 +++++++++++------------
test/core/js/modules/ext_cosmetics.js.js | 24 +-
2 files changed, 186 insertions(+), 187 deletions(-)
diff --git a/src/core/js/ext_cosmetics.js b/src/core/js/ext_cosmetics.js
index 08c5e0e2..4eaac07e 100644
--- a/src/core/js/ext_cosmetics.js
+++ b/src/core/js/ext_cosmetics.js
@@ -1,175 +1,174 @@
-/*
- * This file is a part of the LinkAhead Project.
- *
- * Copyright (C) 2021-2024 IndiScale GmbH <info@indiscale.com>
- * Copyright (C) 2021 Timm Fitschen <t.fitschen@indiscale.com>
- * Copyright (C) 2023 Florian Spreckelsen <f.spreckelsen@indiscale.com>
- * Copyright (C) 2023 Daniel Hornung <d.hornung@indiscale.com>
- * Copyright (C) 2024 Joscha Schmiedt <joscha@schmiedt.dev>
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * 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/>.
- */
-
-"use strict";
-
-/**
- * Cosmetics module is a collection of small look-and-feel tweaks for the
- * LinkAhead webui.
- *
- * @author Timm Fitschen
- */
-var cosmetics = new function () {
-
- /**
- * 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
- * appended for the link text.
- */
- var _link_cut_off_length = 40;
-
- var _custom_datetime = function () {
- $('.caosdb-f-property-datetime-value').each(function (index) {
- if (!($(this).hasClass("caosdb-v-property-datetime-customized"))) {
- var result = this.innerText.replace(/T/, " ").replace(/\+.*/, "");
- result = `<span class="caosdb-v-property-datetime-customized-newvalue">${result}</span>`;
-
- // add class to highlight that this has been customized already
- $(this).addClass("caosdb-v-property-datetime-customized")
- $(this).hide();
- $(this).after(result);
- }
- });
- }
-
- /**
- * 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();
- }
- )
- }
-
- /**
- * 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
- * @returns {string} text with <a> elements instead of raw links
- */
- function linkify_string(text) {
- // const match_url_regex = /https?:\/\/[^\s]*/g // original
- // 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
-
- 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>`;
- });
- }
-
- /**
- * 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))) {
- var linkified_text_value = linkify_string(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(linkified_text_value);
- }
- });
- }
-
- /**
- * Convert any substring of a text-value beginning with 'http(s)://' into a
- * link.
- *
- * A listener detects edit-mode changes and previews
- */
- var linkify = function () {
- _linkify_all_text_values();
-
- // edit-mode-listener
- document.body.addEventListener(edit_mode.end_edit.type, _linkify_all_text_values, true);
- // preview listener
- document.body.addEventListener(preview.previewReadyEvent.type, _linkify_all_text_values, true);
- }
-
- /**
- * Customize datetime formatting.
- *
- * A listener detects edit-mode changes and previews
- */
- var custom_datetime = function () {
- _custom_datetime();
-
- // 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, _custom_datetime, true);
- }
-
- /**
- * Prettify double values for display purposes.
- */
- const prettify_double_values = () => {
- $('.caosdb-f-property-double-value').each(function (index) {
- if (!$(this).hasClass("caosdb-v-property-double-prettified")) {
- let value = parseFloat(this.innerText);
- let prettified_value = "";
-
- if (Math.abs(value) > 1e6 || Math.abs(value) < 1e-6) {
- // Use scientific notation for very large or very small values
- prettified_value = value.toExponential(1);
- } else {
- // Otherwise, display with up to 12 significant digits
- prettified_value = value.toPrecision(12).replace(/\.?0+$/, '');
- }
-
- $(this).addClass("caosdb-v-property-double-prettified");
- $(this).hide();
- $(this).after(`<span class="caosdb-v-property-double-prettified-newvalue">${prettified_value}</span>`);
- }
- });
- };
-
- this.init = function () {
- this.custom_datetime = custom_datetime;
- if ("${BUILD_MODULE_EXT_COSMETICS_CUSTOMDATETIME}" == "ENABLED") {
- custom_datetime();
- }
- this.linkify = linkify;
- if ("${BUILD_MODULE_EXT_COSMETICS_LINKIFY}" == "ENABLED") {
- linkify();
- }
- this.prettify_double_values = prettify_double_values;
- if ("${BUILD_MODULE_EXT_COSMETICS_PRETTIFY_DOUBLES}" === "ENABLED") {
- prettify_double_values();
- }
- }
-}
-
-
-$(document).ready(function () {
- caosdb_modules.register(cosmetics);
-});
+/*
+ * This file is a part of the LinkAhead Project.
+ *
+ * Copyright (C) 2021-2024 IndiScale GmbH <info@indiscale.com>
+ * Copyright (C) 2021 Timm Fitschen <t.fitschen@indiscale.com>
+ * Copyright (C) 2023 Florian Spreckelsen <f.spreckelsen@indiscale.com>
+ * Copyright (C) 2023 Daniel Hornung <d.hornung@indiscale.com>
+ * Copyright (C) 2024 Joscha Schmiedt <joscha@schmiedt.dev>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * 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/>.
+ */
+
+"use strict";
+
+/**
+ * Cosmetics module is a collection of small look-and-feel tweaks for the
+ * LinkAhead webui.
+ *
+ * @author Timm Fitschen
+ */
+var cosmetics = new function() {
+
+ /**
+ * 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
+ * appended for the link text.
+ */
+ var _link_cut_off_length = 40;
+
+ var _custom_datetime = function() {
+ $('.caosdb-f-property-datetime-value').each(function(index) {
+ if (!($(this).hasClass("caosdb-v-property-datetime-customized"))) {
+ var result = this.innerText.replace(/T/, " ").replace(/\+.*/, "");
+ result = `<span class="caosdb-v-property-datetime-customized-newvalue">${result}</span>`;
+
+ // add class to highlight that this has been customized already
+ $(this).addClass("caosdb-v-property-datetime-customized")
+ $(this).hide();
+ $(this).after(result);
+ }
+ });
+ }
+
+ /**
+ * 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();
+ })
+ }
+
+ /**
+ * 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
+ * @returns {string} text with <a> elements instead of raw links
+ */
+ function linkify_string(text) {
+ // const match_url_regex = /https?:\/\/[^\s]*/g // original
+ // 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
+
+ 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>`;
+ });
+ }
+
+ /**
+ * 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))) {
+ var linkified_text_value = linkify_string(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(linkified_text_value);
+ }
+ });
+ }
+
+ /**
+ * Convert any substring of a text-value beginning with 'http(s)://' into a
+ * link.
+ *
+ * A listener detects edit-mode changes and previews
+ */
+ var linkify = function() {
+ _linkify_all_text_values();
+
+ // edit-mode-listener
+ document.body.addEventListener(edit_mode.end_edit.type, _linkify_all_text_values, true);
+ // preview listener
+ document.body.addEventListener(preview.previewReadyEvent.type, _linkify_all_text_values, true);
+ }
+
+ /**
+ * Customize datetime formatting.
+ *
+ * A listener detects edit-mode changes and previews
+ */
+ var custom_datetime = function() {
+ _custom_datetime();
+
+ // 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, _custom_datetime, true);
+ }
+
+ /**
+ * Prettify double values for display purposes.
+ */
+ const prettify_double_values = () => {
+ $('.caosdb-f-property-double-value').each(function(index) {
+ if (!$(this).hasClass("caosdb-v-property-double-prettified")) {
+ let value = parseFloat(this.innerText);
+ let prettified_value = "";
+
+ if (Math.abs(value) > 1e6 || Math.abs(value) < 1e-6) {
+ // Use scientific notation for very large or very small values
+ prettified_value = value.toExponential(1);
+ } else {
+ // Otherwise, display with up to 12 significant digits
+ prettified_value = value.toPrecision(12).replace(/\.?0+$/, '');
+ }
+
+ $(this).addClass("caosdb-v-property-double-prettified");
+ $(this).hide();
+ $(this).after(`<span class="caosdb-v-property-double-prettified-newvalue">${prettified_value}</span>`);
+ }
+ });
+ };
+
+ this.init = function() {
+ this.custom_datetime = custom_datetime;
+ if ("${BUILD_MODULE_EXT_COSMETICS_CUSTOMDATETIME}" == "ENABLED") {
+ custom_datetime();
+ }
+ this.linkify = linkify;
+ if ("${BUILD_MODULE_EXT_COSMETICS_LINKIFY}" == "ENABLED") {
+ linkify();
+ }
+ this.prettify_double_values = prettify_double_values;
+ if ("${BUILD_MODULE_EXT_COSMETICS_PRETTIFY_DOUBLES}" === "ENABLED") {
+ prettify_double_values();
+ }
+ }
+}
+
+
+$(document).ready(function() {
+ caosdb_modules.register(cosmetics);
+});
diff --git a/test/core/js/modules/ext_cosmetics.js.js b/test/core/js/modules/ext_cosmetics.js.js
index 7abf350a..54d06239 100644
--- a/test/core/js/modules/ext_cosmetics.js.js
+++ b/test/core/js/modules/ext_cosmetics.js.js
@@ -23,22 +23,22 @@
'use strict';
QUnit.module("ext_cosmetics.js", {
- before: function (assert) {
+ before: function(assert) {
cosmetics.init();
// setup before module
},
- beforeEach: function (assert) {
+ beforeEach: function(assert) {
// setup before each test
},
- afterEach: function (assert) {
+ afterEach: function(assert) {
// teardown after each test
},
- after: function (assert) {
+ after: function(assert) {
// teardown after module
}
});
-QUnit.test("custom datetime", function (assert) {
+QUnit.test("custom datetime", function(assert) {
assert.ok(cosmetics.custom_datetime, "custom_datetime available");
var test_cases = [
["1234-56-78", "1234-56-78"],
@@ -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");
var test_cases = [
- ["https://link", 1, "https://link",],
+ ["https://link", 1, "https://link", ],
["this is other text https://link.com", 1, "https://link.com"],
["https://link; this is other text", 1, "https://link"],
["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) {
}
});
-QUnit.test("linkify - http", function (assert) {
+QUnit.test("linkify - http", function(assert) {
var test_cases = [
["http://link", 1],
["this is other text http://link", 1],
@@ -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>');
$(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";
@@ -117,10 +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").text(), "https://this.is.a.link/with/more/th[...] ", "link text has been cut off");
container.remove();
-
+
});
-QUnit.test("linkify - double values in URLs", function (assert) {
+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],
@@ -140,7 +140,7 @@ QUnit.test("linkify - double values in URLs", function (assert) {
}
});
-QUnit.test("linkify - double values in URLs", function (assert) {
+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],
--
GitLab