diff --git a/meta_creator/templates/meta_creator/error.html b/meta_creator/templates/meta_creator/error.html index 35de543..3b2c3fa 100644 --- a/meta_creator/templates/meta_creator/error.html +++ b/meta_creator/templates/meta_creator/error.html @@ -5,7 +5,7 @@ {% load static %} {% block content %} -
+

Something went wrong.

We're sorry, but there was an error while processing your request.

{{ error_message }}

diff --git a/meta_creator/templates/meta_creator/index.html b/meta_creator/templates/meta_creator/index.html index f6a6c06..6d1587e 100644 --- a/meta_creator/templates/meta_creator/index.html +++ b/meta_creator/templates/meta_creator/index.html @@ -1,67 +1,104 @@ -{% extends 'base.html' %} - -{% load static %} - -{% block content %} +{% extends 'base.html' %} {% load static %} {% block content %} -
-

- - SMECS - -

-

Software Metadata Extraction and Curation Software

- -
- {% csrf_token %} -
- Project URL - - The GitHub or GitLab repository URL - - -
- - - {% if error_message_url %} - {{ error_message_url }} - {% endif %} -
-
- Token Key - - To extract metadata from GitLab repositories, a token is required. - This token is not needed for GitHub, - however, using one resolves rate limitations and allows for additional metadata extraction. -
- How to Generate a Token? -
- GitHub: Visit Managing your personal access tokens -
- GitLab: Visit Create a personal access token - - -
+
+
+
+

+ + SMECS + +

+
+
+

+ Software Metadata Extraction and Curation + Software +

- - {% if error_message_token %} - {{ error_message_token }} - {% endif %} - - +
+
+ {% csrf_token %} +
+ Project URL + + The GitHub or GitLab repository URL + + +
+ + {% if error_message_url %} + {{ error_message_url }} + {% endif %} +
+
+ Token Key + + To extract metadata from GitHub repositories token is not needed, + however, using one resolves rate limitations and allows for + additional metadata extraction. +
+ How to Generate a Token? +
+ GitHub: Visit + Managing your personal access tokens +
+ GitLab: Visit + Create a personal access token + + +
+
+ + {% if error_message_token %} + {{ error_message_token }} + {% endif %} +
+ +
+
+
+
- {% endblock content %} diff --git a/meta_creator/templates/meta_creator/information.html b/meta_creator/templates/meta_creator/information.html index d332600..6e0a99c 100644 --- a/meta_creator/templates/meta_creator/information.html +++ b/meta_creator/templates/meta_creator/information.html @@ -1,21 +1,42 @@ -{% extends 'base.html' %} +{% extends 'base.html' %} {% load static %} {% block content %} -{% load static %} - -{% block content %} - - -
-
-

What is SMECS ?

+
+
+
+

What is SMECS ?

+
+
+
+

+ Software Metadata Extraction and Curation Software or SMECS is a web + application to extract and curate software metadata following the + CodeMeta software metadata standard. +

+

+ SMECS facilitates the extraction of software metadata from + repositories on GitHub/GitLab. It offers a user-friendly graphical + user interface for visualizing the retrieved metadata. This empowers + Research Software Engineers (RSE) to curate the extracted metadata + according to their requirements. Ultimately, SMECS delivers the + curated metadata in JSON format, enhancing usability and + accessibility. +

+

+ To get more information about this tool and to access the source code + please visit + SMECS GitHub +

+
+
+
+ +
-
-

Software Metadata Extraction and Curation Software or SMECS is a web application to extract and curate software metadata following the CodeMeta version 3.0 software metadata standard.

-

SMECS facilitates the extraction of research software metadata from GitHub and GitLab repositories. It provides a user-friendly graphical interface for visualizing the retrieved metadata, enabling researchers and research software engineers to create high-quality metadata without reentering information already available elsewhere. The curated metadata is exported as CodeMeta-compliant JSON, ensuring integration with other tools and enhancing the discoverability, reuse, and impact of research software. -

-

To get more information about this tool and to access the source code please visit SMECS GitHub

-
- -
-{% endblock content %} + {% endblock content %} +
diff --git a/meta_creator/templates/meta_creator/legals.html b/meta_creator/templates/meta_creator/legals.html index b6d4b82..a1931ca 100644 --- a/meta_creator/templates/meta_creator/legals.html +++ b/meta_creator/templates/meta_creator/legals.html @@ -5,50 +5,59 @@ {% block content %} -
-
-

Legals/Impressum

+
+
+
+

Legals/Impressum

+
-
-

Address:

-
- OFFIS e. V.
- Escherweg 2
- 26121 Oldenburg
- Germany
- Telefon: +49 441 9722-0
- Fax: +49 441 9722-102
- E-Mail: institut@offis.de
- Internet: www.offis.de -
- -

Board Members

-

- Prof. Dr. Sebastian Lehnhoff (Chairman)
- Prof. Dr. techn. Susanne Boll-Westermann
- Prof. Dr.-Ing. Andreas Hein
- Prof. Dr.-Ing. Astrid Nieße -

- -

Register Court

-

- Amtsgericht Oldenburg
- Registernummer VR 1956 -

- -

VAT Identification Number

-

- DE 811582102 -

- -

Responsible in the sense of press law

-
- Dr. Jürgen Meister
- OFFIS e.V.
- Escherweg 2
- 26121 Oldenburg -
+
+
+

Address:

+
+ OFFIS e. V.
+ Escherweg 2
+ 26121 Oldenburg
+ Germany
+ Telefon: +49 441 9722-0
+ Fax: +49 441 9722-102
+ E-Mail: institut@offis.de
+ Internet: www.offis.de +
+
+
+

Board Members

+

+ Prof. Dr. Sebastian Lehnhoff (Chairman)
+ Prof. Dr. techn. Susanne Boll-Westermann
+ Prof. Dr.-Ing. Andreas Hein
+ Prof. Dr.-Ing. Astrid Nieße +

+
+
+

Register Court

+

+ Amtsgericht Oldenburg
+ Registernummer VR 1956 +

+
+
+

VAT Identification Number

+

+ DE 811582102 +

+
+
+ +

Responsible in the sense of press law

+
+ Dr. Jürgen Meister
+ OFFIS e.V.
+ Escherweg 2
+ 26121 Oldenburg +
+
-
+
{% endblock content %} diff --git a/meta_creator/templates/meta_creator/showdata.html b/meta_creator/templates/meta_creator/showdata.html index cf1f36c..dfa285e 100644 --- a/meta_creator/templates/meta_creator/showdata.html +++ b/meta_creator/templates/meta_creator/showdata.html @@ -3,82 +3,112 @@ {% load custom_filters %} {% block content %} - +
- - -
- -
+
+
+ +
+ {% csrf_token %} +

Metdata in JSON format

-
- - -
- -
- -
- -
-
-
- - Missing required metadata -
-
- - Missing recommended metadata +
+
+ +
+
+ {% comment %} {% endcomment %} + + + + +
+
+ + +
+
+ +
+
-
- - Mandatory elements + + +
+
+
+ + Missing required metadata +
+
+ + Missing recommended metadata +
+
+ + Mandatory elements +
+ +
+ + +
+ +
+
-
-
- - - -
- {% csrf_token %} - -
- - {% for tab_name, metadata_dict in extracted_metadata.items %} - {% with unique_tab=type_metadata|all_types_same:metadata_dict %} - - {% if forloop.first %} -
- {% else %} -
- {% endif %} - {% if unique_tab %} + + + {% csrf_token %} + +
+ + {% for tab_name, metadata_dict in extracted_metadata.items %} + {% with unique_tab=type_metadata|all_types_same:metadata_dict %} + + {% if forloop.first %} +
+ {% else %} +
+ {% endif %} + {% if unique_tab %}
{% endif %} @@ -87,155 +117,156 @@

Extra Hints!

{{ description_metadata|get:tab_name }}
{% endif %} - - {% for key, value in metadata_dict.items %} -
- {% if type_metadata|get:key == "hidden" %} - - - {% elif type_metadata|get:key == "dropdown" %} - -
- -
- - {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} - - -
- -
-
- {% elif type_metadata|get:key == "tagging" %} - -
- -
- - {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} - - + {% for key, value in metadata_dict.items %} +
+ {% if type_metadata|get:key == "hidden" %} + + - -
- {% for item in value %} - {% if item is string %} - - {{ item }} - × - - {% endif %} - {% endfor %} - -
-
- {% elif type_metadata|get:key == "tagging_object" %} - - {% with default_type=value.0|get:"@type" %} -
- -
- - {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} - - + {% elif type_metadata|get:key == "dropdown" %} + +
+ +
+ + {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} + + +
+ +
- -
- {% for item in value %} - - {{ item|get:"identifier" }}{% if item|get:"@type" %} ({{ item|get:"@type" }}){% endif %} - × - - {% endfor %} - + {% elif type_metadata|get:key == "tagging" %} + +
+ +
+ + {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} + + +
+ +
+ {% for item in value %} + {% if item is string %} + + {{ item }} + × + + {% endif %} + {% endfor %} + +
-
- {% endwith %} - - {% elif type_metadata|get:key == "tagging_autocomplete" %} -
- -
- - {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} - - + {% elif type_metadata|get:key == "tagging_object" %} + + {% with default_type=value.0|get:"@type" %} +
+ +
+ + {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} + + +
+ +
+ {% for item in value %} + + {{ item|get:"identifier" }}{% if item|get:"@type" %} ({{ item|get:"@type" }}){% endif %} + × + + {% endfor %} + +
+ {% endwith %} + + {% elif type_metadata|get:key == "tagging_autocomplete" %} +
+ +
+ + {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} + + +
- - + + - -
- {% for item in value %} - {% if item %} - - {{ item }} - × - - {% endif %} - {% endfor %} - -
-
-
- {% elif type_metadata|get:key == "single_input_object" %} - -
- -
- - {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} - - + +
+ {% for item in value %} + {% if item %} + + {{ item }} + × + + {% endif %} + {% endfor %} + + + +
+
- -
- + {% elif type_metadata|get:key == "single_input_object" %} + +
+ +
+ + {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} + + +
+ +
+ +
-
- {% elif type_metadata|get:key == "single_inputs" or type_metadata|get:key == "long_field" %} - -
- -
- - {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} - - + {% elif type_metadata|get:key == "single_inputs" or type_metadata|get:key == "long_field" %} + +
+ +
+ + {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} + + +
+
-
-
- {% elif type_metadata|get:key == "big_field" %} + {% elif type_metadata|get:key == "big_field" %}
@@ -247,188 +278,184 @@

Extra Hints!


- {% elif forloop.first or not unique_tab %} - -
- {% with specific_types=type_metadata|get_array:key default_type=value.0|get:"@type"%} - {% if not unique_tab %} - -
- - {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} - - -
- {% endif %} - - - - - {% for col, value in specific_types.items %} - - {% endfor %} - {% if unique_tab %} - {% for col, value in metadata_dict.items %} - - {% endfor %} - {% endif %} - - - - - {% for row in value %} - {% if row|row_has_values:specific_types.keys %} - - {% for col, value in specific_types.items %} - {% if value == 'tagging' or value == 'tagging_autocomplete' or value == 'dropdown' %} - + + +
- {{ col|camel_to_spaces_lower }} -
- - {% if col in description_metadata %}{{ description_metadata|get:col }}{% endif %} - - -
- 		- {{ col|camel_to_spaces_lower }} -
- - {% if col in description_metadata %}{{ description_metadata|get:col }}{% endif %} - - -
- 		Row Control
-
- {% for tag in row|get:col %} - {{ tag }} × - {% endfor %} -
- {% if value == 'tagging' %} - + {% elif forloop.first or not unique_tab %} + +
+ {% with specific_types=type_metadata|get_array:key default_type=value.0|get:"@type"%} + {% if not unique_tab %} + +
+ + {% if key in description_metadata %}{{ description_metadata|get:key }}{% endif %} + + +
+ {% elif key == "contributor" %} +
+ +
+

A "contributor" refers to anyone who aids in software development in any capacity, from coding to testing, highlighting the collaborative nature of software projects.

+
+ +
+

An "author" in software authorship is someone who significantly contributes to the creation and development of software, including roles like coding, project management, and documentation.

+
+ +
+

An "maintainer" in software authorship is someone who significantly maintainers to the creation and development of software, including roles like coding, project management, and documentation.

+
+ ⚠️ Click on contributors, authors, or maintainers to see the descriptionGot it! +
+ + {% endif %} + + + + + {% for col, value in specific_types.items %} + + {% endfor %} + {% if unique_tab %} + {% for col, value in metadata_dict.items %} + + {% endfor %} + {% endif %} + + + + + {% for row in value %} + {% if row|row_has_values:specific_types.keys %} + + {% for col, value in specific_types.items %} + {% if value == 'tagging' or value == 'tagging_autocomplete' or value == 'dropdown' %} + {% else %} - + {% endif %} - - {% else %} - + {% endfor %} + {% if unique_tab %} + {% for col, value in metadata_dict.items %} + + {% endfor %} + {% endif %} + + {% endif %} {% endfor %} - {% if unique_tab %} - {% for col, value in metadata_dict.items %} - + {% for col, value in specific_types.items %} + {% if value == 'tagging' or value == 'tagging_autocomplete' %} + + {% elif value == 'dropdown' %} + {% else %} - + {% endif %} - - {% endfor %} - {% endif %} - - - {% endif %} - {% endfor %} - - - {% for col, value in specific_types.items %} - {% if value == 'tagging' or value == 'tagging_autocomplete' %} - + {% endfor %} {% endif %} - - {% elif value == 'dropdown' %} - - {% else %} - - {% endif %} - {% endfor %} - {% if unique_tab %} - {% for col, value in metadata_dict.items %} - - {% endfor %} - {% endif %} - - - -
+ {{ col|camel_to_spaces_lower }} +
+ + {% if col in description_metadata %}{{ description_metadata|get:col }}{% endif %} + + +
+ 		+ + +
+ + {% if col in description_metadata %}{{ description_metadata|get:col }}{% endif %} + + +
+ 		Row Control
+
+ {% for tag in row|get:col %} + {{ tag }} × + {% endfor %} +
+ {% if value == 'tagging' %} + + {% else %} + + {% endif %} + 		{{ row|get:col }} {{ row|get:col }} + {% if col == key %} + + {% elif col == "author" %} + + {% elif col == "maintainer" %} + + {% else %} + + {% endif %} + + +
- {% if col == key %} - - {% elif col == "author" %} - - {% elif col == "maintainer" %} - + +
+ + {% if value == "tagging" %} + + {% else %} + + {% endif %} + + + + + - -
- - {% if value == "tagging" %} - - {% else %} - + {% endfor %} + {% if unique_tab %} + {% for col, value in metadata_dict.items %} + + + - - - - - - - -
- {% endwith %} +
+ +
+ {% endwith %} +
+ {% endif %} +
+ {% endfor %} +
+ {% if not forloop.first %} + + {% endif %} + {% if not forloop.last %} + + {% else %} + + {% endif %}
- {% endif %} -
- {% endfor %} -
- {% if not forloop.first %} - - {% endif %} - {% if not forloop.last %} - - {% else %} - - {% endif %}
-
- + {% if unique_tab %}
- {% endif %} - {% endwith %} - {% endfor %} - -
- -
- -
- -
- {% csrf_token %} -

Metdata in JSON format

- -
- -
- -
- - - -
- {% comment %} {% endcomment %} - - - + {% endif %} + {% endwith %} + {% endfor %} + -
-
- -
-
+
+ + +
{% endblock content %} diff --git a/meta_creator/views.py b/meta_creator/views.py index 7344609..0321b53 100644 --- a/meta_creator/views.py +++ b/meta_creator/views.py @@ -76,6 +76,7 @@ def index(request): "description_metadata":description_metadata, "extracted_metadata":extracted_metadata, "my_json_str": my_json_str, + "from_showdata": True, }, request)) except ConnectTimeout: diff --git a/requirements.txt b/requirements.txt index 9c076b0..7c3ebb7 100644 --- a/requirements.txt +++ b/requirements.txt @@ -13,3 +13,4 @@ GitPython>=3.1.41 # Git-based packages pinned to specific commits/branches git+https://github.com/softwarepub/hermes-plugin-github-gitlab git+https://github.com/Aidajafarbigloo/hermes@14fc040afd4b7f7268b937477dce56bd7695fbf3#egg=hermes + diff --git a/static/foundation/css/foundation.css b/static/foundation/css/foundation.css index 36d3f4f..b87027b 100644 --- a/static/foundation/css/foundation.css +++ b/static/foundation/css/foundation.css @@ -2,689 +2,686 @@ /******************** General ********************/ body { - height: 100%; - margin: 0; - padding: 0; - background: #fefefe; - font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; - font-weight: normal; - line-height: 2.5; -} - -div, -dl, -dt, -dd, -ul, -ol, -li, -h1, -h2, -h3, -h4, -h5, -h6, -pre, -form, -blockquote, -th, -td { - margin: 0; - padding: 0; -} - - -hr { - clear: both; - max-width: 75rem; - height: 0; - margin: 1.25rem auto; - border-top: 0; - border-right: 0; - border-bottom: 1px solid #cacaca; - border-left: 0; -} - -ul, -ol, -dl { - margin-bottom: 1rem; - list-style-position: outside; - line-height: 1.6; -} - -li { - font-size: inherit; -} - -ul { - margin-left: 1.25rem; - list-style-type: disc; -} - -ol { - margin-left: 1.25rem; -} - - ul ul, ol ul, ul ol, ol ol { - margin-left: 1.25rem; - margin-bottom: 0; - } - -[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], + overflow: hidden; +} + +[type="text"], +[type="password"], +[type="date"], +[type="datetime"], +[type="datetime-local"], +[type="month"], +[type="week"], +[type="email"], +[type="number"], +[type="search"], +[type="tel"], +[type="time"], +[type="url"], +[type="color"], textarea { - display: block; - box-sizing: border-box; - width: 100%; - height: 2.4375rem; - /* margin: 0 0 1rem; */ - padding: 0.5rem; - border: 1px solid #cacaca; - border-radius: 0; - background-color: #fefefe; - box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); - font-family: inherit; - font-size: 1rem; - font-weight: normal; - line-height: 1.5; - color: #0a0a0a; - transition: box-shadow 0.5s, border-color 0.25s ease-in-out; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + display: block; + box-sizing: border-box; + width: 100%; + height: 2.4375rem; + padding: 0.5rem; + border: 1px solid #cacaca; + border-radius: 0; + background-color: #fefefe; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); + font-family: inherit; + font-size: 1rem; + font-weight: normal; + line-height: 1.5; + color: #0a0a0a; + transition: box-shadow 0.5s, border-color 0.25s ease-in-out; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +/********************* SMECS navigation bar **********************/ + +#main-nav { + background-color: #055f82; +} + +#main-nav .nav-item { + padding: 5px; +} + +#main-nav .nav-link { + display: block; + color: white; + padding: 5px 10px; + text-decoration: none; +} + +#main-nav .nav-link:hover { + background-color: #4ba0af; + border-radius: 5px; +} + +#main-nav a.logo { + color: #fff; + font-size: 24px; + font-weight: bold; +} + +#main-nav a.logo:hover::after { + transition: all 0.35s; +} + +#main-nav .nav-link.active { + border-radius: 5px; + background-color: #4ba0af; + color: #fff; +} +.navbar .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +} +.navbar .navbar-toggler { + border-color: rgba(255, 255, 255, 0.5); } /******************** Initial Form of the software metadata Extractor (index.html) ********************/ .InitialFormContainer { - max-width: 60%; - margin: 0 auto; - padding: 20px; - border: 1px solid #ddd; - border-radius: 5px; - margin-top: 9rem; - display: flex; - flex-direction: column; - align-items: center; + padding: 20px; + border: 1px solid #ddd; + border-radius: 5px; + margin-top: 9rem; } .mainHeader { - text-align: center; - margin-bottom: 0; - font-size: 3rem; - font-weight: bold; + text-align: center; + margin-bottom: 0; + font-size: 3rem; + font-weight: bold; } #smecsSubtitle { - font-size: 1.3rem; + font-size: 1.3rem; } #form1 { - display: flex; - flex-direction: column; - justify-content: center; - margin: 3.5rem auto; - max-width: 600px; -} - - #form1 h6 { - font-size: 18px; - font-weight: bold; - text-align: left; - margin-top: 2rem; - } - - #form1 input[type=url], - #form1 input[type=text] { - width: 500px; - padding: 8px; - border-radius: 4px; - border: 1px solid #ccc; - box-sizing: border-box; - font-size: 16px; - } - -button.ExData, button.TrySMECS { - background-color: #055F82; - color: white; - padding: 1% 2%; - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 1rem; - margin: auto; - font-weight: bold; - margin-top: 3.5rem; + display: flex; + flex-direction: column; + justify-content: center; + margin: 3.5rem auto; + max-width: 600px; +} + +#form1 h6 { + font-size: 18px; + font-weight: bold; + text-align: left; + margin-top: 2rem; } - button.ExData:hover, button.TrySMECS:hover { - background-color: #4BA0AF; - cursor: pointer; - } +#form1 input[type="url"], +#form1 input[type="text"] { + padding: 8px; + border-radius: 4px; + border: 1px solid #ccc; + box-sizing: border-box; + font-size: 16px; +} + +button.ExData { + background-color: #055f82; + color: white; + padding: 5px; + border: #ccc; + border-radius: 4px; + cursor: pointer; + font-weight: bold; + margin-top: 3.5rem; +} + +button.TrySMECS { + background-color: #055f82; + color: white; + border: #ccc; + border-radius: 4px; + cursor: pointer; + font-weight: bold; +} + +button.ExData:hover, +button.TrySMECS:hover { + background-color: #4ba0af; + color: white; + cursor: pointer; +} button#new-url-extraction-page { - background-color: #4BA0AF; - border: 1px solid white; - color: white; - padding: 0.5% 0.8%; - border-radius: 4px; - cursor: pointer; - font-size: 72%; - margin: auto; - font-weight: bold; - margin-top: 1.5rem; - position: absolute; - left: 93.8%; - bottom: 94.5%; + background-color: #4ba0af; + border: 1px solid white; + color: white; + border-radius: 4px; + cursor: pointer; + font-weight: bold; } - button#new-url-extraction-page:hover { - background-color: #055F82; - cursor: pointer; - border: 1px solid #4BA0AF; - } +button#new-url-extraction-page:hover { + background-color: #055f82; + cursor: pointer; + border: 1px solid #4ba0af; +} /************ Tool Tip Styles ************/ .tooltip-container { - display: flex; - align-items: center; + display: flex; + align-items: center; } .tool-tip { - display: inline-block; - position: relative; - margin-left: 0.5em; - color: white; + display: inline-block; + position: relative; + margin-left: 0.5em; + color: white; +} + +.tool-tip .tool-tip__icon { + background: #3b4246; + border-radius: 10px; + cursor: pointer; + display: inline-block; + font-family: times new roman; + height: 20px; + line-height: 1.3em; + text-align: center; + width: 20px; } - .tool-tip .tool-tip__icon { - background: #3b4246; - border-radius: 10px; - cursor: pointer; - display: inline-block; - font-family: times new roman; - height: 20px; - line-height: 1.3em; - text-align: center; - width: 20px; - } - - .tool-tip .tool-tip__icon a { - text-decoration: none; - color: white; - } - - .tool-tip .tool-tip__info { - display: none; - background: #262626; - opacity: 90%; - border: 1px solid #e9f16c; - border-radius: 3px; - font-size: 0.875em; - padding: 1em; - position: absolute; - left: 30px; - top: -20px; - width: 250px; - z-index: 2; - border-radius: 6px; - } - - .tool-tip .tool-tip__info:before, - .tool-tip .tool-tip__info:after { - content: ""; - position: absolute; - left: -10px; - top: 7px; - border-style: solid; - border-width: 10px 10px 10px 0; - border-color: transparent #e9f16c; - } - - .tool-tip .tool-tip__info:after { - left: -10px; - border-right-color: #262626; - } - - .tool-tip .tool-tip__info .info { - display: block; - } - - .tool-tip:hover .tool-tip__info, - .tool-tip:focus .tool-tip__info { - display: inline-block; - } +.tool-tip .tool-tip__icon a { + text-decoration: none; + color: white; +} + +.tool-tip .tool-tip__info { + display: none; + background: #262626; + opacity: 90%; + border: 1px solid #e9f16c; + border-radius: 3px; + font-size: 0.875em; + padding: 1em; + position: absolute; + left: 30px; + top: -20px; + width: 250px; + z-index: 2; + border-radius: 6px; +} + +.tool-tip .tool-tip__info:before, +.tool-tip .tool-tip__info:after { + content: ""; + position: absolute; + left: -10px; + top: 7px; + border-style: solid; + border-width: 10px 10px 10px 0; + border-color: transparent #e9f16c; +} + +.tool-tip .tool-tip__info:after { + left: -10px; + border-right-color: #262626; +} + +.tool-tip .tool-tip__info .info { + display: block; +} + +.tool-tip:hover .tool-tip__info, +.tool-tip:focus .tool-tip__info { + display: inline-block; +} a:focus + .tool-tip .tool-tip__info { - display: inline-block; + display: inline-block; } -#form1 input[type=url].error { - margin-bottom: 0; +#form1 input[type="url"].error { + margin-bottom: 0; } span.error_message { - color: red; - margin-top: 5px; + color: red; + margin-top: 5px; } /******************** Style for showdata.html ********************/ /* Styles for the entered data section */ +.whole-extraction-page { + margin-top: 5rem; + height: 98%; +} #more-info { - font-size: 14px; - color: #333; - text-align: center; - padding: 10px; - background-color: #f5f5f5; - border: 1px solid #ddd; - border-radius: 5px; - margin: 0 auto 20px; - max-width: 500px; + font-size: 14px; + color: #333; + text-align: center; + padding: 10px; + background-color: #f5f5f5; + border: 1px solid #ddd; + border-radius: 5px; + margin: 0 auto 20px; + max-width: 500px; } #enteredData { - margin: 1%; -} - - #enteredData table { - margin: 0; - border-collapse: collapse; - width: 100%; - } - - #enteredData td:first-child { - background-color: #c9c7c7e8; - padding: 5px; - font-weight: bold; - border-radius: 4px; - width: 20%; - text-align: center; - } - - #enteredData td:last-child { - padding: 5px; - font-weight: normal; - border-radius: 4px; - border: 1px solid #ccc; - width: 80%; - } + margin: 1%; +} + +#enteredData table { + margin: 0; + border-collapse: collapse; + width: 100%; +} + +#enteredData td:first-child { + background-color: #c9c7c7e8; + padding: 5px; + font-weight: bold; + border-radius: 4px; + width: 20%; + text-align: center; +} + +#enteredData td:last-child { + padding: 5px; + font-weight: normal; + border-radius: 4px; + border: 1px solid #ccc; + width: 80%; +} /* Styles for the extracted metadata section */ .DataHeader { - margin-top: 1rem; - margin-left: 0.5rem; + margin-top: 1rem; + margin-left: 0.5rem; } -form.data-form2, form.data-form3 { - background-color: #f2f2f2; - padding: 10px; +form.data-form2, +form.data-form3 { + background-color: #f2f2f2; + padding: 10px; } form.data-form2 { - margin: 1%; - margin-top: 4%; - width: 98%; + margin: 1%; + margin-top: 4%; + width: 98%; } form.data-form3 { - overflow: auto; - height: 77.5%; - border-radius: 2px; - margin-top: 0; + overflow: auto; + height: 90%; + border-radius: 2px; + margin-top: 0; } .data-form3::after { - content: ""; - display: table; - clear: both; + content: ""; + display: table; + clear: both; } .tab .form-group { - width: 90%; - margin: 5% 0% 0% 5%; - text-align: left; - display: block; + width: 90%; + margin: 5% 0% 0% 5%; + text-align: left; + display: block; +} +#RelatedPersons .form-group { + margin: 5% 0% 0% 0%; } .tab-description { - background: #f5f7fa; - border-left: 4px solid #0078d4; - color: #222; - padding: 0em 0em; - margin-bottom: 0em; - border-radius: 4px; - font-size: 1.08em; - font-style: italic; - text-align: center; - width: 90%; - margin-left: 0; - margin-right: 0; - margin: 0 auto 0 auto; + background: #f5f7fa; + border-left: 4px solid #0078d4; + color: #222; + padding: 0em 0em; + margin-bottom: 0em; + border-radius: 4px; + font-size: 1.08em; + font-style: italic; + text-align: center; + width: 90%; + margin-left: 0; + margin-right: 0; + margin: 0 auto 0 auto; } .form-group label { - display: block; - font-weight: bold; + display: block; + font-weight: bold; } -.form-group .single_inputs input[type="text"], .single_inputs select { - width: 110%; - padding: 8px; - border-radius: 4px; - border: 1px solid #ccc; - transition: border-color 0.2s ease-in-out; +.form-group .single_inputs input[type="text"], +.single_inputs select { + width: 110%; + padding: 8px; + border-radius: 4px; + border: 1px solid #ccc; + transition: border-color 0.2s ease-in-out; } /* style for general single input elements */ .form-group .single_inputs { - width: 42%; - float: left; - margin-right: 8%; - margin-bottom: 0.1em; - box-sizing: border-box; + width: 40%; + float: left; + margin-right: 10%; + margin-bottom: 0.2%; + box-sizing: border-box; } -.form-group input[type="text"]:focus, select:focus { - outline: none; - border-color: #0088cc; +.form-group input[type="text"]:focus, +select:focus { + outline: none; + border-color: #0088cc; } /* style for general single input elements with longer values */ .form-group .long_field { - width: 100%; - margin-bottom: 0.1em; - float: left; - box-sizing: border-box; + width: 100%; + margin-bottom: 0.1em; + float: left; + box-sizing: border-box; } - .form-group .long_field input[type="text"], select { - width: 100%; - padding: 8px; - border-radius: 4px; - border: 1px solid #ccc; - transition: border-color 0.2s ease-in-out; - } - +.form-group .long_field input[type="text"], +select { + width: 100%; + padding: 8px; + border-radius: 4px; + border: 1px solid #ccc; + transition: border-color 0.2s ease-in-out; +} .form-group .big_field { - width: 100%; - margin-bottom: 0.1em; - margin-right: 10%; - float: left; - box-sizing: border-box; -} - - .form-group .big_field textarea { - width: 100%; - padding: 8px; - border-radius: 4px; - border: 1px solid #ccc; - transition: border-color 0.2s ease-in-out; - min-height: 5em; /* or rows="3" in HTML */ - resize: vertical; - font-size: 1em; - line-height: 1.5; - box-sizing: border-box; - white-space: pre-wrap; /* Allow line breaks */ - word-break: break-word; /* Break long words */ - } + width: 100%; + margin-bottom: 0.1em; + margin-right: 10%; + float: left; + box-sizing: border-box; +} + +.form-group .big_field textarea { + width: 100%; + padding: 8px; + border-radius: 4px; + border: 1px solid #ccc; + transition: border-color 0.2s ease-in-out; + min-height: 5em; /* or rows="3" in HTML */ + resize: vertical; + font-size: 1em; + line-height: 1.5; + box-sizing: border-box; + white-space: pre-wrap; /* Allow line breaks */ + word-break: break-word; /* Break long words */ +} .form-group legend { - font-size: 0.8em; - font-weight: bold; + font-size: 0.8em; + font-weight: bold; } .form-group fieldset { - margin: 0; - padding: 0; - border: 1px solid #ada8a8; - border-radius: 4px; + margin: 0; + padding: 0; + border: 1px solid #ada8a8; + border-radius: 4px; } - .form-group fieldset label, .data-form3 label { - display: inline; - float: left; - font-size: 98%; - } +.form-group fieldset.fieldset_content, +.form-group fieldset.copyrightHolder { + width: 40%; + float: right; + margin-right: 15px; + margin-left: 5px; + margin-top: 5px; + margin-bottom: 5px; +} + +.form-group fieldset label, +.data-form3 label { + display: inline; + float: left; + font-size: 98%; +} - .data-form3 label:first-letter { - text-transform: uppercase; - } +.data-form3 label:first-letter { + text-transform: uppercase; +} .wide-input { - height: 100px; + height: 100px; } .form-group fieldset input[type="text"] { - width: 97%; - padding: 8px; - border-radius: 4px; - border: 1px solid #ccc; - transition: border-color 0.2s ease-in-out; - margin-bottom: 0.1em; - margin-left: 4px; + width: 97%; + padding: 8px; + border-radius: 4px; + border: 1px solid #ccc; + transition: border-color 0.2s ease-in-out; + margin-bottom: 5px; + margin-left: 4px; } .form-group fieldset label { - margin-left: 4px; + margin-left: 4px; } .form-group fieldset input[type="text"]:focus { - outline: none; - border-color: #0088cc; + outline: none; + border-color: #0088cc; } /* Styles for the metadata display section */ -.form-container { - height: 60vh; - overflow: hidden; - justify-content: space-between; - width: 70%; - float: left; - height: 500px; - width: 200px; -} .metadata-container { - flex: 1; - margin-left: 20px; + flex: 1; + margin-left: 20px; } #metadata-json { - width: 100%; - height: 92%; - padding: 8px; - border-radius: 4px; - margin-bottom: 2px; + overflow: scroll; + width: 100%; + height: 92%; + padding: 8px; + border-radius: 4px; + margin-bottom: 2px; + font-size: medium; } - -input.invalid-required, textarea.invalid-required, select.invalid-required { - border: 2px solid #ff0000; - background-color: #ffd6d6; +.invalid { + border: 1px solid rgba(226, 7, 7, 0.535); + background-color: rgba(225, 94, 94, 0.377); } -input.invalid-recommended, textarea.invalid-recommended, select.invalid-recommended { - border: 2px solid #ffe066; - background-color: #fef6da; +input.invalid-required, +textarea.invalid-required, +select.invalid-required { + border: 2px solid #ff0000; + background-color: #ffd6d6; } +input.invalid-recommended, +textarea.invalid-recommended, +select.invalid-recommended { + border: 2px solid #ffe066; + background-color: #fef6da; +} button#new-url { - float: left; - margin: 0.5%; - margin-left: 1%; + float: left; + margin: 0.5%; + margin-left: 1%; } .main-container { - display: flex; - justify-content: space-between; - transition: all 0.3s ease; - margin: 0.4%; - height: 92%; + display: flex; + transition: all 0.3s ease; + height: 100%; } -.form-container { - width: 74%; - flex: 1; +/* Error page / connection time out */ +div.error-container { + background-color: #fff; + border: 1px solid #ddd; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin: 100px auto; + padding: 20px; + max-width: 400px; + text-align: center; } -.metadata-form-display { - float: right; - height: 500px; - width: 25%; +div.error-container h1 { + color: red; + font-size: 24px; + margin-bottom: 10px; } -/* Error page / connection time out */ -div.error-container { - background-color: #fff; - border: 1px solid #ddd; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - margin: 100px auto; - padding: 20px; - max-width: 400px; - text-align: center; -} - - div.error-container h1 { - color: red; - font-size: 24px; - margin-bottom: 10px; - } - - div.error-container p { - font-size: 16px; - margin-bottom: 15px; - } - - div.error-container a { - color: #007bff; - text-decoration: none; - } - - div.error-container a:hover { - text-decoration: underline; - } +div.error-container p { + font-size: 16px; + margin-bottom: 15px; +} + +div.error-container a { + color: #007bff; + text-decoration: none; +} + +div.error-container a:hover { + text-decoration: underline; +} /********************************* Style for auto table **********************************/ /* Flexible columns distribution */ -.auto-property-table { - margin-top: 8px; - width: 100%; /* Same as .long_field */ - min-width: 500px; /* Optional: for usability */ - table-layout: auto; - margin-bottom: 1rem; - border-collapse: collapse; - margin-left: auto; - margin-right: auto; -} - - /* Set properties of table head and table data for auto-property table */ - .auto-property-table th, - .auto-property-table td { - padding: 8px 12px; - width: auto; /* Let table-layout: fixed handle equal width */ - text-align: left; - padding: 8px; - border: 1px solid #ccc; - overflow: visible; - text-overflow: ellipsis; - white-space: nowrap; - min-width: 100px; - max-width: 300px; - } - - /* Set fixed width for first row */ - .auto-property-table th:first-child, - .auto-property-table td:first-child { - max-width: 200px; - min-width: 20px; - width: 15%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } +.auto-property { + margin-top: 8px; + width: 100%; /* Same as .long_field */ + min-width: 500px; /* Optional: for usability */ + table-layout: auto; + margin-bottom: 1rem; + border-collapse: collapse; + margin-left: auto; + margin-right: auto; +} + +.table { + --bs-table-bg: #f2f2f2 !important; +} + +/* Set properties of table head and table data for auto-property table */ +.auto-property th { + padding: 8px 12px; + width: auto; + text-align: left; + padding: 8px; + border: 1px solid #ccc; + overflow: visible; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 100px; + max-width: 300px; +} + +/* Set fixed width for first row */ +.auto-property th:first-child, +.auto-property-table td:first-child { + max-width: 200px; + min-width: 20px; + width: 15%; + overflow: visible; + text-overflow: ellipsis; + white-space: nowrap; +} /* for the add-row-control row (last row) */ tr.add-row-controls, tr.add-row-controls td { - display: table-row; - width: auto; - box-sizing: border-box; - padding: 0.5em; - vertical-align: middle; - background: #f9f9f9; /* Optional: subtle highlight */ + /* display: table-row; */ + width: auto; + box-sizing: border-box; + padding: 0.5em; + vertical-align: middle; + background: #f9f9f9; /* Optional: subtle highlight */ } - /* For the table elements in the add-row-control row*/ - tr.add-row-controls td { - /* Remove any display:block/flex if present */ - display: table-cell; - } +/* For the table elements in the add-row-control row*/ +tr.add-row-controls td { + /* Remove any display:block/flex if present */ + display: table-cell; +} /* Set the properties for the tags-table-container*/ .auto-property-table td .tags-table-container { - width: 100%; - max-width: 100%; - box-sizing: border-box; - padding: 0; -} - - /* Set properties for inputs of tags-table-container */ - .auto-property-table td .tags-table-container input[type="text"] { - width: 95% !important; - max-width: 100% !important; - box-sizing: border-box; - padding: 0; - } - - .auto-property-table td .tags-table-container input[type="text"], - .auto-property-table .add-row-tags-container input[type="text"] { - width: 95% !important; - max-width: 95% !important; - margin-left: 8px; - margin-right: 8px; - box-sizing: border-box; - min-width: 0; - padding: 4px 0; - font-size: 1em; - } + width: 100%; + max-width: 100%; + box-sizing: border-box; + padding: 0; +} + +/* Set properties for inputs of tags-table-container */ +.auto-property-table td .tags-table-container input[type="text"] { + width: 95% !important; + max-width: 100% !important; + box-sizing: border-box; + padding: 0; +} + +.auto-property-table td .tags-table-container input[type="text"], +.auto-property-table .add-row-tags-container input[type="text"] { + width: 95% !important; + max-width: 95% !important; + margin-left: 8px; + margin-right: 8px; + box-sizing: border-box; + min-width: 0; + padding: 4px 0; + font-size: 1em; +} /* Set properties for tags-list */ .auto-property-table td .tags-list { - width: auto !important; - display: flex; - flex-wrap: wrap; - gap: 4px; - align-items: center; - box-sizing: border-box; - padding: 0; + width: auto !important; + display: flex; + flex-wrap: wrap; + gap: 4px; + align-items: center; + box-sizing: border-box; + padding: 0; } .add-row-tags-container .tag { - display: inline-flex !important; - width: auto !important; - max-width: 100%; - min-width: 0; + display: inline-flex !important; + width: auto !important; + max-width: 100%; + min-width: 0; } .add-row-controls .tags-list { - display: flex; - flex-wrap: wrap; - gap: 4px; - align-items: center; - width: auto; + display: flex; + flex-wrap: wrap; + gap: 4px; + align-items: center; + width: auto; } /* Set colors for add-row-controls */ .add-row-controls.invalid-required, .add-row-controls.invalid-required td { - background-color: #ffd6d6; /* light red */ - border: 2px solid #ff0000; + background-color: #ffd6d6; /* light red */ + border: 2px solid #ff0000; } .add-row-controls.invalid-recommended, .add-row-controls.invalid-recommended td { - background-color: #fef6da; /* light yellow */ - border: 2px solid #ffe066; + background-color: #fef6da; /* light yellow */ + border: 2px solid #ffe066; } /* Set properties for classes in add-row-controls */ @@ -692,1309 +689,1182 @@ tr.add-row-controls td { .add-row-controls .add-row-input, .add-row-controls .add-row-tag-input, .add-row-controls .add-row-dropdown-select { - min-width: 60px; - max-width: 200px; - width: 100%; - max-width: 100% !important; - box-sizing: border-box; - height: 2.4375rem; - padding: 0.5rem; - border: 1px solid #cacaca; - background-color: #fefefe; - font-size: 1rem; -} - - .add-row-controls .add-row-btn { - padding: 4px 12px; - font-size: 0.95em; - height: 32px; - white-space: nowrap; - } + min-width: 60px; + max-width: 200px; + width: 100%; + max-width: 100% !important; + box-sizing: border-box; + height: 2.4375rem; + padding: 0.5rem; + border: 1px solid #cacaca; + background-color: #fefefe; + font-size: 1rem; +} + +.add-row-controls .add-row-btn { + padding: 4px 12px; + font-size: 0.95em; + height: 32px; + white-space: nowrap; +} .add-row-tags-container { - position: relative; + position: relative; } td.table-tagging-cell { - position: relative; + position: relative; } - td.table-tagging-cell input.tag-input, - td.table-tagging-cell select.table-dropdown-select { - width: 100%; - max-width: 100%; - box-sizing: border-box; - min-width: 0; - } +td.table-tagging-cell input.tag-input, +td.table-tagging-cell select.table-dropdown-select { + width: 100%; + max-width: 100%; + box-sizing: border-box; + min-width: 0; +} .tab.unique-tab { - width: 100%; - transform-origin: top center; /* Adjust origin as needed */ - text-align: center; /* Center the inner content horizontally */ - position: relative; + width: 100%; + transform-origin: top center; /* Adjust origin as needed */ + text-align: center; /* Center the inner content horizontally */ + position: relative; } - .tab.unique-tab .unique-tab-inner { - transform: scale(0.8); - transform-origin: top center; - display: inline-block; - } +.tab.unique-tab .unique-tab-inner { + transform: scale(0.8); + transform-origin: top center; + display: inline-block; +} /* Make the tags-list a flex container so tags wrap and only take as much space as needed */ .tags-list { - display: flex; - flex-wrap: wrap; - gap: 4px; /* Optional: space between tags */ - align-items: center; + display: flex; + flex-wrap: wrap; + gap: 4px; /* Optional: space between tags */ + align-items: center; } /* Make each tag inline-flex and auto-sized */ .tag { - display: inline-flex; - align-items: center; - background: #e0e0e0; - border-radius: 12px; - padding: 2px 8px; - font-size: 0.95em; - margin: 2px 0; - white-space: nowrap; - max-width: 100%; + display: inline-flex; + align-items: center; + background: #e0e0e0; + border-radius: 12px; + padding: 2px 8px; + font-size: 0.95em; + margin: 2px 0; + white-space: nowrap; + max-width: 100%; } .tag-suggestions { - position: absolute; - background: #fff; - border: 1px solid #ccc; - z-index: 10000; - box-shadow: 0 2px 8px rgba(0,0,0,0.15); - max-height: 200px; - overflow-y: auto; - font-size: 0.95em; - min-width: 180px; /* optional: ensures a minimum width */ - padding: 0; - margin: 0; + position: absolute; + background: #fff; + border: 1px solid #ccc; + z-index: 10000; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + max-height: 200px; + overflow-y: auto; + font-size: 0.95em; + min-width: 180px; /* optional: ensures a minimum width */ + padding: 0; + margin: 0; } .suggestion-item { - padding: 4px 8px; - cursor: pointer; + padding: 4px 8px; + cursor: pointer; } - .suggestion-item:hover { - background: #f0f0f0; - } +.suggestion-item:hover { + background: #f0f0f0; +} /********************************* Style for contributors table **********************************/ /* contributors table */ -.contributors-table, .authors-table { - margin: 0 auto; - margin-bottom: 4%; - width: 80%; - border-collapse: collapse; - border: 1px solid #ddd; -} - - /* table header cells */ - .contributors-table th, .authors-table th { - background-color: #f2f2f2; - padding: 3px; - font-size: 70%; - text-align: center; - font-weight: bold; - border: 1px solid #ddd; - } - - /* table data cells */ - .contributors-table td, .authors-table td { - padding: 10px; - border: 1px solid #ddd; - width: fit-content; - } - - /* Zebra-striping for table rows */ - .contributors-table tbody tr:nth-child(even) { - background-color: #f2f2f2; - } +.contributors-table, +.authors-table { + margin: 0 auto; + margin-bottom: 4%; + width: 80%; + border-collapse: collapse; + border: 1px solid #ddd; +} + +/* table header cells */ +.contributors-table th, +.authors-table th { + background-color: #f2f2f2; + padding: 3px; + font-size: 70%; + text-align: center; + font-weight: bold; + border: 1px solid #ddd; +} + +/* table data cells */ +.contributors-table td, +.authors-table td { + padding: 10px; + border: 1px solid #ddd; + width: fit-content; +} + +/* Zebra-striping for table rows */ +.contributors-table tbody tr:nth-child(even) { + background-color: #f2f2f2; +} button.contributorBTN, button.authorBTN { - background-color: #828983; - color: white; - padding: 10px 20px; - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 14px; - margin: auto; - font-weight: bold; - margin-top: 1.5rem; - width: auto; - transition: background-color 0.3s; + background-color: #828983; + color: white; + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 14px; + margin: auto; + font-weight: bold; + margin-top: 1.5rem; + width: auto; + transition: background-color 0.3s; } - button.contributorBTN:hover, button.authorBTN:hover { - background-color: #6c6f7e; - } +button.contributorBTN:hover, +button.authorBTN:hover { + background-color: #6c6f7e; +} #metadata-form input.valid { - background-color: black; + background-color: black; } /* input container */ div.input-container { - display: flex; - gap: 10px; - margin-bottom: 15px; + display: flex; + gap: 10px; + margin-bottom: 15px; } - /* each input */ - div.input-container input { - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - width: 200px; - font-size: 14px; - } - - /* placeholder text */ - div.input-container input::placeholder { - color: #999; - } +/* each input */ +div.input-container input { + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + width: 200px; + font-size: 14px; +} -/********************* SMECS navigation bar **********************/ -#main-nav { - background-color: #055F82; - overflow: hidden; - padding: 0; - margin: 0; -} - - #main-nav .nav-list { - list-style-type: none; - font-size: 15px; - display: inline; - float: left; - margin: 0 50px; - padding: 15px; - } - - #main-nav .nav-item { - float: left; - padding: 5px; - margin-right: 20px; - } - - #main-nav .nav-link { - display: block; - color: white; - text-align: center; - padding: 5px 20px; - text-decoration: none; - } - - #main-nav .nav-link:hover { - background-color: #4BA0AF; - ; - border-radius: 5px; - } - - #main-nav a.logo { - float: left; - color: #fff; - font-size: 24px; - font-weight: bold; - text-align: center; - padding: 14px 20px; - text-decoration: none; - transition: red 0.3s ease; - } - - #main-nav a.logo:hover::after { - transition: all 0.35s; - } - - #main-nav .nav-link.active { - border-radius: 5px; - background-color: #4BA0AF; - color: #fff; - } +/* placeholder text */ +div.input-container input::placeholder { + color: #999; +} /********************* SMECS Information page **********************/ .info-page { - max-width: 60%; - margin: 50px auto; - padding: 30px; - background-color: #fff; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - border-radius: 8px; - font-family: 'Roboto', Arial, sans-serif; - line-height: 1.6; - color: #333; -} - -.info-header h3 { - text-align: center; - font-size: 2em; - color: #333; - margin-bottom: 30px; -} - -.info-content p { - font-size: 1.1em; - text-align: justify; - margin-bottom: 20px; + padding: 30px; + background-color: #fff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 8px; + font-family: "Roboto", Arial, sans-serif; + line-height: 1.6; + color: #333; + display: flex; + flex-direction: column; + /* height: 100vh; */ + /* padding-bottom: 100px; */ + margin-top: 9rem; } .info-content a { - color: #007BFF; - text-decoration: none; -} - - .info-content a:hover { - text-decoration: underline; - } - -.info-content h4 { - font-size: 1.5em; - color: #333; - margin-top: 20px; - margin-bottom: 10px; -} - -.info-content ul, -.info-content ol { - margin: 20px 0; - padding-left: 20px; -} - - .info-content ul li, - .info-content ol li { - margin-bottom: 10px; - } - -button.TrySMECS { - margin: 20% auto; - padding: 1% 2%; -} - -@media (max-width: 992px) { - .info-page { - max-width: 80%; - } - - .info-header h3 { - font-size: 1.6em; - } - - .info-content p { - font-size: 0.95em; - } + color: #007bff; + text-decoration: none; } -@media (max-width: 768px) { - .info-page { - max-width: 90%; - } - - .info-header h3 { - font-size: 1.4em; - } - - .info-content p { - font-size: 0.9em; - } +.info-content a:hover { + text-decoration: underline; } -@media (max-width: 576px) { - .info-page { - max-width: 95%; - padding: 20px; - } - - .info-header h3 { - font-size: 1.2em; - } - - .info-content p { - font-size: 0.85em; - } - - button.TrySMECS { - font-size: 0.9em; - padding: 8px 16px; - } +.info-content h4 { + color: #333; } /********************* SMECS First page tool-tips **********************/ .custom-tooltip { - position: relative; - float: left; - display: inline; - cursor: pointer; + position: relative; + float: left; + display: inline; + cursor: pointer; } .custom-tooltip-metadata { - position: relative; - display: inline-block; - cursor: pointer; + position: relative; + display: inline-block; + cursor: pointer; } .label-content, label > .asterisk, label > .fa-info-circle { - display: inline-flex; - align-items: center; - gap: 0.25em; /* optional: space between elements */ + display: inline-flex; + align-items: center; + gap: 0.25em; /* optional: space between elements */ } .asterisk { - color: red; - font-size: 1em; /* match the label font size */ - font-weight: bold; - line-height: 1; - vertical-align: middle; + color: red; + font-size: 1em; /* match the label font size */ + font-weight: bold; + line-height: 1; + vertical-align: middle; } .fa-info-circle { - opacity: 0.5; - z-index: 1; - font-size: 1em; /* match the label font size */ - vertical-align: middle; - line-height: 1; + opacity: 0.5; + z-index: 1; + font-size: 1em; /* match the label font size */ + vertical-align: middle; + line-height: 1; } /* Ensure both the info icon and asterisk are aligned */ .fa-info-circle, .asterisk { - vertical-align: middle; - /* Optionally, adjust font-size or line-height if needed */ + vertical-align: middle; + /* Optionally, adjust font-size or line-height if needed */ } .tooltip-text-metadata { - visibility: hidden; - font-size: 70%; - min-width: 200px; - max-width: 260px; - width: auto; - background-color: #5e5b5b; - color: #fff; - text-align: left; - border-radius: 6px; - padding: 5px; - z-index: 1000; - /*top: 100%; - left: 50%; - position: absolute; - */ - position: fixed; - left: 0; /* Will be set dynamically */ - top: 0; /* Will be set dynamically */ - transition: opacity 0.3s; - pointer-events: none; - opacity: 0; - word-break: break-word; /* Allow long words to wrap */ - white-space: normal; /* Allow text to wrap */ - box-sizing: border-box; - overflow-wrap: break-word; /* Ensure wrapping for long words */ - display: none; + visibility: hidden; + font-size: 70%; + min-width: 200px; + max-width: 260px; + width: auto; + background-color: #5e5b5b; + color: #fff; + text-align: left; + border-radius: 6px; + padding: 5px; + z-index: 1000; + position: fixed; + left: 0; /* Will be set dynamically */ + top: 0; /* Will be set dynamically */ + transition: opacity 0.3s; + pointer-events: none; + opacity: 0; + word-break: break-word; /* Allow long words to wrap */ + white-space: normal; /* Allow text to wrap */ + box-sizing: border-box; + overflow-wrap: break-word; /* Ensure wrapping for long words */ + display: none; } .custom-tooltip-metadata:hover .tooltip-text-metadata { - visibility: visible; - opacity: 1; + visibility: visible; + opacity: 1; } .custom-tooltip .tooltip-text { - visibility: hidden; - font-size: 65%; - width: 25rem; - word-wrap: break-word; - background-color: #5e5b5b; - color: #fff; - text-align: left; - border-radius: 6px; - padding: 5px; - position: absolute; - z-index: 1; - left: 15%; - transform: translateX(10%); - transition: opacity 0.3s; - pointer-events: none; + visibility: hidden; + font-size: 65%; + width: 25rem; + word-wrap: break-word; + background-color: #5e5b5b; + color: #fff; + text-align: left; + border-radius: 6px; + padding: 5px; + position: absolute; + z-index: 1; + left: 15%; + transform: translateX(10%); + transition: opacity 0.3s; + pointer-events: none; } .custom-tooltip-metadata .tooltip-text-metadata { - visibility: hidden; - font-size: 70%; - width: 100%; - background-color: #5e5b5b; - color: #fff; - text-align: left; - border-radius: 6px; - padding: 3px; - position: absolute; - top: 0; - transition: opacity 0.3s; - pointer-events: none; -} - -.custom-tooltip:hover .tooltip-text, .custom-tooltip .tooltip-text:hover { - visibility: visible; - opacity: 1; - pointer-events: auto; + visibility: hidden; + font-size: 70%; + width: 100%; + background-color: #5e5b5b; + color: #fff; + text-align: left; + border-radius: 6px; + padding: 3px; + position: absolute; + top: 0; + transition: opacity 0.3s; + pointer-events: none; +} + +.custom-tooltip:hover .tooltip-text, +.custom-tooltip .tooltip-text:hover { + visibility: visible; + opacity: 1; + pointer-events: auto; } .custom-tooltip-metadata:hover .tooltip-text-metadata { - visibility: visible; - opacity: 1; + visibility: visible; + opacity: 1; } .custom-tooltip .tooltip-text a { - color: rgb(112, 155, 233); - text-decoration: none; - font-weight: bold; + color: rgb(112, 155, 233); + text-decoration: none; + font-weight: bold; } - .custom-tooltip .tooltip-text a:hover { - text-decoration: underline; - } +.custom-tooltip .tooltip-text a:hover { + text-decoration: underline; +} .custom-tooltip i { - margin-left: 5px; + margin-left: 5px; } /***********************************Icons**************************************/ .feedback { - display: none; - margin-left: 10px; - color: green; - font-size: 1em; + display: none; + margin-left: 10px; + color: green; + font-size: 1em; } -.fa-download, .fa-copy, .fa-trash-alt { - border: none; - float: right; - margin-bottom: 0.5%; - font-size: 1.2em; - color: #055F82; - transition: color 0.3s; - background-color: none; - margin-left: 2.5%; +.fa-download, +.fa-copy, +.fa-trash-alt { + border: none; + float: right; + margin-bottom: 0.5%; + font-size: 1.2em; + color: #055f82; + transition: color 0.3s; + background-color: none; + margin-left: 2.5%; } - .fa-download:hover, .fa-copy:hover, .fa-trash-alt:hover { - color: #4BA0AF; - cursor: pointer; - } +.fa-download:hover, +.fa-copy:hover, +.fa-trash-alt:hover { + color: #4ba0af; + cursor: pointer; +} /************************************navigation-buttons**************************************/ .navigation-buttons { - clear: both; - width: 100%; - margin-top: 1%; -} - - .navigation-buttons .backwardBtn, .navigation-buttons .forwardBtn { - width: 50px; - height: 50px; - border: none; - border-radius: 50%; - background-color: #055F82; - color: white; - font-size: 18px; - justify-content: center; - align-items: center; - cursor: pointer; - transition: background-color 0.3s; - } - - .navigation-buttons .backwardBtn { - margin-left: 5%; - display: block; - float: left; - margin-bottom: 3%; - } - - .navigation-buttons .forwardBtn { - margin-right: 5%; - float: right; - display: block; - margin-bottom: 3%; - } - - .navigation-buttons button.ExData { - float: right; - margin: 0; - margin-right: 3%; - } - - .navigation-buttons .backwardBtn:hover, .navigation-buttons .forwardBtn:hover { - background-color: #4BA0AF; - } + clear: both; + width: 100%; + margin-top: 1%; +} + +.navigation-buttons .backwardBtn, +.navigation-buttons .forwardBtn { + width: 50px; + height: 50px; + border: none; + border-radius: 50%; + background-color: #055f82; + color: white; + font-size: 18px; + justify-content: center; + align-items: center; + cursor: pointer; + transition: background-color 0.3s; +} + +.navigation-buttons .backwardBtn { + margin-left: 9%; + display: block; + float: left; + margin-bottom: 3%; +} + +.navigation-buttons .forwardBtn { + margin-right: 3%; + float: right; + display: block; + margin-bottom: 3%; +} + +.navigation-buttons button.ExData { + float: right; + margin: 0; + margin-right: 3%; +} + +.navigation-buttons .backwardBtn:hover, +.navigation-buttons .forwardBtn:hover { + background-color: #4ba0af; +} .backwardBtn::before { - content: '←'; - font-size: 24px; + content: "←"; + font-size: 24px; } .forwardBtn::before { - content: '→'; - font-size: 24px; + content: "→"; + font-size: 24px; } .single_inputs { - position: relative; + position: relative; } #suggestions { - position: absolute; - border: 1px solid #ccc; - background-color: #fff; - z-index: 1000; - width: 98%; - max-height: 200px; - overflow-y: auto; - display: none; - top: 100%; - left: 0; - box-sizing: border-box; + position: absolute; + border: 1px solid #ccc; + background-color: #fff; + z-index: 1000; + width: 98%; + max-height: 200px; + overflow-y: auto; + display: none; + top: 100%; + left: 0; + box-sizing: border-box; } .suggestion-item { - padding: 8px; - cursor: pointer; + padding: 8px; + cursor: pointer; } - .suggestion-item:hover { - background-color: #f0f0f0; - } +.suggestion-item:hover { + background-color: #f0f0f0; +} .input-container { - position: relative; + position: relative; } .added-element { - margin-top: 10px; + margin-top: 10px; } /************************************** JSON toggle **************************************/ -body, html { - overflow: hidden; /* Prevent page scrolling */ -} .toggle { - text-align: right; - height: 0.1%; + text-align: right; } -.form-container, .metadata-form-display { - padding: 0.4%; - border: 1px solid #ccc; - border-radius: 5px; - transition: all 0.3s ease; - height: 96%; - overflow: hidden; - margin: 2px; +.form-container, +.metadata-form-display { + padding: 0.4%; + border: 1px solid #ccc; + border-radius: 5px; + transition: all 0.3s ease; + overflow: hidden; + margin: 2px; + width: 100%; + height: 99%; } .full-width { - width: 100%; + width: 100%; } .half-width { - width: 48%; + width: 60%; } .metadata-form-display { - display: none; + display: none; } .toggle-switch { - position: relative; - display: inline-block; - width: 60px; - height: 34px; + position: relative; + display: inline-block; + width: 60px; + height: 34px; } - .toggle-switch input { - opacity: 0; - width: 0; - height: 0; - } +.toggle-switch input { + opacity: 0; + width: 0; + height: 0; +} .slider { - position: absolute; - cursor: pointer; - right: 31%; - top: 77%; - bottom: 10%; - background-color: #ccc; - transition: .4s; - border-radius: 34px; - display: flex; - align-items: center; - color: white; - font-weight: bold; - font-size: 75%; - padding: 0 10px; - width: 94%; - height: 50%; + position: absolute; + cursor: pointer; + right: 31%; + /* top: 77%; */ + bottom: 8px; + background-color: #ccc; + transition: 0.4s; + border-radius: 34px; + display: flex; + align-items: center; + color: white; + font-weight: bold; + font-size: 75%; + padding: 0 10px; + width: 94%; + height: 50%; +} + +.slider:before { + position: absolute; + content: ""; + height: 98%; + width: 28%; + border-radius: 50%; + background-color: white; + transition: 0.4s; + left: 2px; + bottom: 4px; + top: 0; } - .slider:before { - position: absolute; - content: ""; - height: 98%; - width: 28%; - border-radius: 50%; - background-color: white; - transition: .4s; - left: 2px; - bottom: 4px; - top: 0; - } - input:checked + .slider { - background-color: #055F82; + background-color: #055f82; } - input:checked + .slider:before { - transform: translateX(243%); - } +input:checked + .slider:before { + transform: translateX(243%); +} /************************************** tabs_ext **************************************/ .tabs_ext { - width: 100%; + width: 100%; } .tab-links_ext { - list-style-type: none; - display: flex; - justify-content: flex-start; - margin: 0 auto; - width: 80%; - justify-content: space-between; - font-size: x-large; - font-family: Arial, sans-serif; -} - - .tab-links_ext ul { - list-style-type: none; - padding: 0; - display: flex; - } - - .tab-links_ext li { - margin: 0; - } - - .tab-links_ext a { - display: block; - padding: 10px 20px; - text-decoration: none; - font-size: 55%; - color: #555; - border-radius: 4px 4px 0 0; - transition: background-color 0.3s, color 0.3s; - } - - .tab-links_ext a:hover { - background-color: #f0f0f0; - color: #000; - } - - .tab-links_ext li.active a { - background: #02103f; - color: #ccc; - border-bottom: 2px solid #02103f; - } + list-style-type: none; + display: flex; + justify-content: flex-start; + margin: 0 auto; + width: 80%; + justify-content: space-between; + font-size: x-large; + font-family: Arial, sans-serif; +} + +.tab-links_ext ul { + list-style-type: none; + padding: 0; + display: flex; +} + +.tab-links_ext li { + margin: 0; +} + +.tab-links_ext a { + display: block; + padding: 10px 20px; + text-decoration: none; + font-size: 55%; + color: #555; + border-radius: 4px 4px 0 0; + transition: background-color 0.3s, color 0.3s; +} + +.tab-links_ext a:hover { + background-color: #f0f0f0; + color: #000; +} + +.tab-links_ext li.active a { + background: #02103f; + color: #ccc; + border-bottom: 2px solid #02103f; +} .tab { - display: none; + display: none; } - .tab.active { - display: block; - } +.tab.active { + display: block; +} /************************************contributors'-explanation**************************************/ .person-info { - position: absolute; - height: auto; - width: 52%; - top: 21%; - margin: 0 auto; - padding: 0.5%; - border-radius: 5px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - text-align: left; - left: 15%; - font-size: large; - background-color: #ccc; + position: absolute; + height: auto; + width: 52%; + margin: 0 auto; + padding: 0.5%; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + text-align: left; + font-size: large; + background-color: #ccc; } - .person-info h5 { - font-size: 86%; - font-weight: bold; - } +.person-info h5 { + font-size: 86%; + font-weight: bold; +} - .person-info p { - margin: 0; - line-height: 1.5; - margin-bottom: 2%; - } +.person-info p { + margin: 0; + line-height: 1.5; + margin-bottom: 2%; +} /********************* Contributor table when more than 10 people **********************/ .scrollable-table { - max-height: 55%; - overflow-y: auto; - display: block; + max-height: 55%; + overflow-y: auto; + display: block; } /************************************popup**************************************/ .popup { - display: none; - position: fixed; - z-index: 1; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgb(0,0,0); - background-color: rgba(0,0,0,0.4); - background-color: rgb(0 0 0 / 58%); + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); + background-color: rgb(0 0 0 / 58%); } .popup-content { - background-color: #fefefe; - margin: 15% auto; - padding: 1%; - border: 1px solid #888; - width: 50%; - border: solid 3px; - border-radius: 19px; + background-color: #fefefe; + margin: 15% auto; + padding: 1%; + border: 1px solid #888; + width: 50%; + border: solid 3px; + border-radius: 19px; } .close-btn { - color: #aaa; - float: right; - font-size: 28px; - font-weight: bold; + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; } - .close-btn:hover, - .close-btn:focus { - color: black; - text-decoration: none; - cursor: pointer; - } +.close-btn:hover, +.close-btn:focus { + color: black; + text-decoration: none; + cursor: pointer; +} /************************************Color-code-info**************************************/ /* Create info strings to explain color and other codes */ .color-code-container { - /*align-items: center; - background-color: #ccc; - width: 99.9%; - background-color: #f2f2f2; - padding-top: 0.7%; - height: 14%;*/ - background-color: #f2f2f2; - margin: 0; - width: 100%; - padding: 0.5rem 0.5rem; - border-radius: 6px; -} - -.color-code-inner { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 0.7rem; - max-width: 600px; /* or your preferred max width */ - margin: 0 auto; - width: 100%; + background-color: #f2f2f2; + padding: 1% 3% 0%; } .color-code { - display: flex; - align-items: center; - margin-right: 5px; - min-width: 340px; /* Ensures a minimum width for longer text */ - width: 30%; - padding: 5px; - gap: 0.5rem; - box-sizing: border-box; + display: flex; + align-items: center; + padding: 5px; } - .color-code > span:first-child { - width: 15px; - height: 15px; - border-radius: 50%; - display: inline-block; - margin-right: 8px; - } - -.color-code-text { - font-size: 85%; +.color-code > span:first-child { + width: 15px; + height: 15px; + border-radius: 50%; + display: inline-block; + margin-right: 8px; } .red { - background-color: #e15e5e; - opacity: 0.3; - border: #e20707 solid 1px; + background-color: #e15e5e; + opacity: 0.3; + border: #e20707 solid 1px; } .yellow { - background-color: #fef6da; - border: yellow solid 1px; + background-color: #fef6da; + border: yellow solid 1px; } /* Create info string for the '*' symbol */ .color-code > span:first-child.symbol { - width: 15px; - height: 15px; - border-radius: 0; /* Remove the circle shape */ - display: flex; /* Use flexbox for centering */ - justify-content: center; /* Center horizontally */ - background-color: transparent; /* No background for the symbol */ - font-size: 18px; /* Match the size of the circle */ - color: #e15e5e; /* Match the color of the circle */ - font-weight: bold; /* Make the * bold */ - line-height: 1; /* Ensure proper vertical alignment */ -} - - .color-code > span:first-child.symbol::before { - content: "*"; /* Add the * symbol */ - } + width: 15px; + height: 15px; + border-radius: 0; /* Remove the circle shape */ + display: flex; /* Use flexbox for centering */ + justify-content: center; /* Center horizontally */ + background-color: transparent; /* No background for the symbol */ + font-size: 18px; /* Match the size of the circle */ + color: #e15e5e; /* Match the color of the circle */ + font-weight: bold; /* Make the * bold */ + line-height: 1; /* Ensure proper vertical alignment */ +} + +.color-code > span:first-child.symbol::before { + content: "*"; /* Add the * symbol */ +} /********************* Responsiveness **********************/ +@media (min-width: 300px) and (max-width: 990px) { + .form-container { + height: 50%; + } + .main-container { + /* display: list-item; */ + flex-wrap: wrap; + } + .metadata-form-display { + overflow: scroll; + } +} @media (min-width: 1024px) and (max-width: 1700px) { - .InitialFormContainer { - height: 73%; - margin-top: 3rem; - } - - button.ExData { - margin-top: 5%; - font-size: 73%; - font-weight: normal; - padding: 6px 12px; - } - - .custom-tooltip .tooltip-text { - width: 25rem; - left: 8%; - } - - .info-page { - max-width: 81%; - font-size: 85%; - } - - .tab-links_ext a { - font-size: 50%; - padding: 7px 7px; - } - - #form1 h6 { - font-size: 87%; - } - - .metadata-container { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px; - } - - .left { - flex-grow: 1; - justify-content: flex-start; - } - - .right { - display: flex; - justify-content: flex-end; - gap: 5px; - flex-grow: 2; - } - - button#updateFormBtn { - background-color: #055F82; - border: 1px solid white; - color: white; - padding: 5px 8px; - border-radius: 4px; - cursor: pointer; - font-size: 72%; - font-weight: bold; - } - - button#new-url-extraction-page { - background-color: #4BA0AF; - border: 1px solid white; - color: white; - padding: 0.5% 0.8%; - border-radius: 4px; - cursor: pointer; - font-size: 72%; - margin: auto; - font-weight: bold; - margin-top: 1.5rem; - position: absolute; - left: 93.8%; - bottom: 94.5%; - } - - .fa-copy:before, .fa-download:before { - font-size: 80%; - } - - #metadata-json { - font-size: 74%; - } - - #metadata-form-display h4 { - font-size: medium; - } - - .slider { - top: -16%; - right: 20%; - font-size: 71%; - width: 94%; - height: 48%; - } - - .metadata-container { - margin-left: 2%; - margin-top: 4%; - } - - .form-group fieldset.fieldset_content, .form-group fieldset.copyrightHolder { - width: 45%; - margin-right: 4%; - margin-top: 4%; - margin-bottom: 7%; - } - - .navigation-buttons .backwardBtn, .navigation-buttons .forwardBtn { - width: 2em; - height: 2em; - } - - button.contributorBTN, button.authorBTN { - font-size: 65%; - } - - .contributors-table, .authors-table { - font-size: 78%; - } - - .contributors-table th, .authors-table th { - font-size: 83%; - } - - .whole-extraction-page { - height: 98%; - } + .custom-tooltip .tooltip-text { + width: 25rem; + left: 8%; + } + + #form1 h6 { + font-size: 87%; + } + + .metadata-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + } + + .left { + flex-grow: 1; + justify-content: flex-start; + } + + .right { + display: flex; + justify-content: flex-end; + gap: 5px; + flex-grow: 2; + } + + button#updateFormBtn { + background-color: #055f82; + border: 1px solid white; + color: white; + padding: 5px 8px; + border-radius: 4px; + cursor: pointer; + font-size: 72%; + font-weight: bold; + } + + .fa-copy:before, + .fa-download:before { + font-size: 80%; + } + + #metadata-json { + font-size: 74%; + } + + #metadata-form-display h4 { + font-size: medium; + } + + .metadata-container { + margin-left: 2%; + margin-top: 4%; + } + + .form-group fieldset.fieldset_content, + .form-group fieldset.copyrightHolder { + width: 45%; + margin-right: 4%; + margin-top: 4%; + margin-bottom: 7%; + } + + .navigation-buttons .backwardBtn, + .navigation-buttons .forwardBtn { + width: 2em; + height: 2em; + } + + button.contributorBTN, + button.authorBTN { + font-size: 65%; + } + + .contributors-table, + .authors-table { + font-size: 78%; + } + + .contributors-table th, + .authors-table th { + font-size: 83%; + } } /* ******************************************** */ @media (min-width: 2320px) AND (max-width: 2560px) { - button#new-url-extraction-page { - font-size: 86%; - } - - .tab-links_ext a { - font-size: 58%; - } - - .color-code-container { - height: 12%; - } - - .contributors-table, .authors-table { - font-size: 60%; - } - - .navigation-buttons .backwardBtn, .navigation-buttons .forwardBtn { - width: 55px; - height: 55px; - } - - .backwardBtn::before, .forwardBtn::before { - font-size: 18px; - } - - button.contributorBTN, button.authorBTN { - padding: 7px 9px; - font-size: 15px; - } - - .contributors-table td, .authors-table td, .contributors-table th, .authors-table th { - padding: 8px; - font-size: 1.5em; - } - - .fa-trash-alt:before, .fa-trash-can:before, .fa-copy:before, .fa-download:before { - font-size: 110%; - } - - .form-group input[type="text"], select { - padding: 6px; - height: 6%; - font-size: 1em; - } - - #metadata-json { - font-size: 100%; - } - - form.data-form2, form.data-form3 { - padding: 0px; - } - - .navigation-buttons { - margin-bottom: 20px; - } - - .navigation-buttons button.ExData { - padding: 0.5%; - font-size: 80%; - } - - .fa-download, .fa-copy, .fa-trash-alt { - margin-bottom: 2.5%; - } - - .form-group legend { - font-size: 0.8em; - } - - .form-group fieldset.fieldset_content, .form-group fieldset.copyrightHolder { - margin-top: 22px; - } - - .suggestion-item { - padding: 1px; - font-size: 66%; - width: 100%; - } - - .scrollable-table { - max-height: 50%; - } - - .custom-tooltip .tooltip-text { - transform: translateY(-18%); - font-size: 77%; - width: 30em; - left: 15%; - } - - .InitialFormContainer { - max-width: 45%; - max-height: 77%; - overflow: hidden; - left: 15%; - font-size: 89%; - } - - button.ExData { - margin-top: 3.5rem; - } - - .color-code-text { - font-size: 79%; - } + button#new-url-extraction-page { + font-size: 86%; + } + + .tab-links_ext a { + font-size: 58%; + } + + .color-code-container { + height: 12%; + } + + .contributors-table, + .authors-table { + font-size: 60%; + } + + .navigation-buttons .backwardBtn, + .navigation-buttons .forwardBtn { + width: 55px; + height: 55px; + } + + .backwardBtn::before, + .forwardBtn::before { + font-size: 18px; + } + + button.contributorBTN, + button.authorBTN { + padding: 7px 9px; + font-size: 15px; + } + + .contributors-table td, + .authors-table td, + .contributors-table th, + .authors-table th { + padding: 8px; + font-size: 1.5em; + } + + .fa-trash-alt:before, + .fa-trash-can:before, + .fa-copy:before, + .fa-download:before { + font-size: 110%; + } + + .form-group input[type="text"], + select { + padding: 6px; + height: 6%; + font-size: 1em; + } + + #metadata-json { + font-size: 100%; + } + + form.data-form2, + form.data-form3 { + padding: 0px; + } + + .navigation-buttons { + margin-bottom: 20px; + } + + .navigation-buttons button.ExData { + padding: 0.5%; + font-size: 80%; + } + + .fa-download, + .fa-copy, + .fa-trash-alt { + margin-bottom: 2.5%; + } + + .form-group legend { + font-size: 0.8em; + } + + .form-group fieldset.fieldset_content, + .form-group fieldset.copyrightHolder { + margin-top: 22px; + } + + .suggestion-item { + padding: 1px; + font-size: 66%; + width: 100%; + } + + .scrollable-table { + max-height: 50%; + } + + .custom-tooltip .tooltip-text { + transform: translateY(-18%); + font-size: 77%; + width: 30em; + left: 15%; + } + + .InitialFormContainer { + max-width: 45%; + max-height: 77%; + overflow: hidden; + left: 15%; + font-size: 89%; + } + + button.ExData { + margin-top: 3.5rem; + } + + .color-code-text { + font-size: 79%; + } } /* *********************Fixed width when editing cells*********************** */ .table-cell { - white-space: nowrap; - overflow: visible; - text-overflow: ellipsis; + white-space: nowrap; + overflow: visible; + text-overflow: ellipsis; } .editable-input { - width: 100%; - height: 100%; - border: none; - padding: 0; - margin: 0; - box-sizing: border-box; + width: 100%; + height: 100%; + border: none; + padding: 0; + margin: 0; + box-sizing: border-box; } /* *********************Extracting Spinner*********************** */ .overlay { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: 1000; - justify-content: center; - align-items: center; - overflow: hidden; + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; + justify-content: center; + align-items: center; + overflow: hidden; } - .overlay.active { - display: flex; - } +.overlay.active { + display: flex; +} .loading-spinner { - text-align: center; - color: white; + text-align: center; + color: white; } - .loading-spinner .spinner { - width: 40px; - height: 40px; - border: 4px solid rgba(255, 255, 255, 0.3); - border-top-color: #333; - border-radius: 50%; - animation: spin 1s linear infinite; - } +.loading-spinner .spinner { + width: 40px; + height: 40px; + border: 4px solid rgba(255, 255, 255, 0.3); + border-top-color: #333; + border-radius: 50%; + animation: spin 1s linear infinite; +} @keyframes spin { - 0% { - transform: rotate(0deg); - } + 0% { + transform: rotate(0deg); + } - 100% { - transform: rotate(360deg); - } + 100% { + transform: rotate(360deg); + } } /* *********************Tags*********************** */ .form-group .tags-container { - width: 110%; - display: flex; - flex-wrap: wrap; - gap: 5px; - align-items: center; - padding: 5px; - box-sizing: border-box; + width: 110%; + display: flex; + flex-wrap: wrap; + gap: 5px; + align-items: center; + padding: 5px; + box-sizing: border-box; } .form-group .tag { - background-color: #dddddd; - color: rgb(34, 34, 34); - padding: 4px 8px; - border-radius: 6px; - display: flex; - align-items: center; - font-size: 13px; + background-color: #dddddd; + color: rgb(34, 34, 34); + padding: 4px 8px; + border-radius: 6px; + display: flex; + align-items: center; + font-size: 13px; } .form-group .remove-tag { - margin-left: 6px; - cursor: pointer; - font-weight: bold; + margin-left: 6px; + cursor: pointer; + font-weight: bold; } #languageInput { - border: none; - outline: none; - flex-grow: 1; - min-width: 120px; + border: none; + outline: none; + flex-grow: 1; + min-width: 120px; } #suggestions { - position: absolute; - background: white; - border: 1px solid #ccc; - max-height: 150px; - overflow-y: auto; - display: none; - z-index: 1000; + position: absolute; + background: white; + border: 1px solid #ccc; + max-height: 150px; + overflow-y: auto; + display: none; + z-index: 1000; } .suggestion-item { - padding: 5px 10px; - cursor: pointer; + padding: 5px 10px; + cursor: pointer; } - .suggestion-item:hover { - background-color: #f0f0f0; - } +.suggestion-item:hover { + background-color: #f0f0f0; +} .form-group .tags-container .input[type="text"] { - width: 110%; - outline: none; - flex-grow: 1; - min-width: 0px; - font-size: 1em; - padding: 4px 0; + width: 110%; + outline: none; + flex-grow: 1; + min-width: 0px; + font-size: 1em; + padding: 4px 0; } div div p#contributor-explanation { - width: 52%; + width: 52%; } .collapsible-content { - display: none; - margin-top: 10px; - z-index: 2000; + position: absolute; + top: 100%; /* Below the button */ + left: 0; + width: 100%; + margin-top: 10px; + z-index: 2000; +} +.relative-wrapper { + position: relative; + display: flex; } - .collapsible-button { - position: absolute; - top: 19%; - left: 14%; - width: fit-content; - cursor: pointer; - border: none; - padding: 10px; - font-size: 16px; - font-weight: bold; - text-align: left; + top: 19%; + left: 14%; + width: fit-content; + cursor: pointer; + border: none; + font-size: 16px; + font-weight: bold; + text-align: left; +} +.collapsible-button:focus { + background-color: #055f82; + color: white; + border-radius: 5px; + font-weight: normal; } .highlight-tag { - background-color: #fef6da; - padding: 5px 10px; - margin: 5px; - border-radius: 4px; - display: inline-block; - font-weight: bold; + background-color: #fef6da; + padding: 5px 10px; + margin: 5px; + border-radius: 4px; + display: inline-block; + font-weight: bold; } - .highlight-tag .acknowledge-tag { - margin-left: 10px; - color: #055F82; - cursor: pointer; - text-decoration: underline; - } - -.info-page { - display: flex; - flex-direction: column; - height: 100vh; - padding-bottom: 100px; - margin-top: 0; +.highlight-tag .acknowledge-tag { + margin-left: 10px; + color: #055f82; + cursor: pointer; + text-decoration: underline; } .info-header { - flex-shrink: 0; - margin-top: 0; + flex-shrink: 0; + margin-top: 0; } .info-content { - flex-grow: 1; - overflow-y: auto; - padding: 20px; - margin-top: 0; + flex-grow: 1; + overflow-y: auto; + padding: 20px; + margin-top: 0; } .unstyled-link { text-decoration: none; color: inherit; - cursor: pointer; + cursor: pointer; +} + +.suggestion-item.active { + background-color: #3d7eb3; + color: white; +} + +/* Enhanced dropdown styling for elements based on schema-enumerated options: Dynamically loads schema values into dropdowns using a DynamicDropdown class - Automatically initializes all select elements with data-dropdown-schema*/ - + Automatically initializes all select elements with data-dropdown-schema*/ + import { getSchema } from "./schema-utils.js"; -const JsonSchema = '/static/schema/codemeta_schema.json'; -const dropdownElements = document.querySelectorAll('select[data-dropdown-schema]'); +const JsonSchema = "/static/schema/codemeta_schema.json"; +const dropdownElements = document.querySelectorAll( + "select[data-dropdown-schema]" +); // Create a general dropdown class class DynamicDropdown { - constructor(dropdownId, jsonSchemaUrl, schemaProperty) { - this.dropdownId = dropdownId; // The ID of the dropdown element - this.jsonSchemaUrl = jsonSchemaUrl; // The URL of the JSON schema - this.schemaProperty = schemaProperty; // The property in the schema to use for options - } + constructor(dropdownId, jsonSchemaUrl, schemaProperty) { + this.dropdownId = dropdownId; // The ID of the dropdown element + this.jsonSchemaUrl = jsonSchemaUrl; // The URL of the JSON schema + this.schemaProperty = schemaProperty; // The property in the schema to use for options + } - populateDropdown() { - getSchema().then(schema => { - const enumValues = schema.properties?.[this.schemaProperty]?.enum || []; - const dropdown = document.getElementById(this.dropdownId); + populateDropdown() { + getSchema() + .then((schema) => { + const enumValues = schema.properties?.[this.schemaProperty]?.enum || []; + const dropdown = document.getElementById(this.dropdownId); - if (!dropdown) { - console.error(`Dropdown with ID "${this.dropdownId}" not found.`); - return; - } + if (!dropdown) { + console.error(`Dropdown with ID "${this.dropdownId}" not found.`); + return; + } - // Clear existing options - dropdown.innerHTML = ''; + // Clear existing options + dropdown.innerHTML = ""; - // Add default "Select" option - const defaultOption = document.createElement('option'); - defaultOption.value = ''; - defaultOption.textContent = 'Select an option'; - dropdown.appendChild(defaultOption); + // Add default "Select" option + const defaultOption = document.createElement("option"); + defaultOption.value = ""; + defaultOption.textContent = "Select an option"; + dropdown.appendChild(defaultOption); - // Populate dropdown with enum values - enumValues.forEach(value => { - const option = document.createElement('option'); - option.value = value; - option.textContent = value; - dropdown.appendChild(option); - }); - }) - .catch(error => { - console.error(`Failed to load schema or populate dropdown for "${this.dropdownId}":`, error); - }); - } + // Populate dropdown with enum values + enumValues.forEach((value) => { + const option = document.createElement("option"); + option.value = value; + option.textContent = value; + dropdown.appendChild(option); + }); + }) + .catch((error) => { + console.error( + `Failed to load schema or populate dropdown for "${this.dropdownId}":`, + error + ); + }); + } } // Automatically initialize all dropdowns with the data-dropdown-schema attribute export function initializeDynamicDropdowns() { - dropdownElements.forEach(dropdown => { - const schemaProperty = dropdown.getAttribute('data-dropdown-schema'); - const dropdownId = dropdown.id; + dropdownElements.forEach((dropdown) => { + const schemaProperty = dropdown.getAttribute("data-dropdown-schema"); + const dropdownId = dropdown.id; + + if (schemaProperty && dropdownId) { + // Create an instance of DynamicDropdown for each dropdown + const dynamicDropdown = new DynamicDropdown( + dropdownId, + JsonSchema, + schemaProperty + ); + dynamicDropdown.populateDropdown(); + } else { + console.error( + `Dropdown with ID "${dropdownId}" is missing required attributes.` + ); + } + }); - if (schemaProperty && dropdownId) { - // Create an instance of DynamicDropdown for each dropdown - const dynamicDropdown = new DynamicDropdown(dropdownId, JsonSchema, schemaProperty); - dynamicDropdown.populateDropdown(); - } else { - console.error(`Dropdown with ID "${dropdownId}" is missing required attributes.`); - } - }); } diff --git a/static/foundation/js/vendor/old_script_foundation.js b/static/foundation/js/vendor/old_script_foundation.js index 37bd9dc..f5719b3 100644 --- a/static/foundation/js/vendor/old_script_foundation.js +++ b/static/foundation/js/vendor/old_script_foundation.js @@ -2252,4 +2252,4 @@ document.addEventListener("DOMContentLoaded", function () { downloadFile(event); }); //------------------------------------ download end file------------------------// -}); +}); \ No newline at end of file diff --git a/static/foundation/js/vendor/table-utils.js b/static/foundation/js/vendor/table-utils.js index cfc49f9..9cb4f80 100644 --- a/static/foundation/js/vendor/table-utils.js +++ b/static/foundation/js/vendor/table-utils.js @@ -13,6 +13,7 @@ import { updateSuggestionsBoxPosition, setupTableTagAutocomplete, createSuggestionsBox, + enableEditableTagsInTable, } from "./tagging.js"; const metadataJson = document.getElementById("metadata-json"); @@ -169,36 +170,34 @@ export function extractCellValue(cell, coltype) { // Set up event listeners on all auto-property-tables export function setupTables() { - // Loop over all tables with the class 'auto-property-table' - document - .querySelectorAll("table.auto-property-table") - .forEach(function (table) { - // Extract the key from the table's id (assumes id is like 'copyrightHolderTable') - const tableId = table.id; - if (!tableId || !tableId.endsWith("Table")) return; - const key = tableId.replace(/Table$/, ""); - - // Attach a listener for cell edits (blur on any input or td) - table.addEventListener( - "blur", - function (e) { - if (e.target.tagName === "TD" || e.target.tagName === "INPUT") { - updateTableHiddenInput(key); - } - }, - true - ); - - table.addEventListener("change", function (e) { - if (e.target.classList.contains("checkbox-element")) { + // Loop over all tables with the class 'auto-property' + document.querySelectorAll("table.auto-property").forEach(function (table) { + // Extract the key from the table's id (assumes id is like 'copyrightHolderTable') + const tableId = table.id; + if (!tableId || !tableId.endsWith("Table")) return; + const key = tableId.replace(/Table$/, ""); + + // Attach a listener for cell edits (blur on any input or td) + table.addEventListener( + "blur", + function (e) { + if (e.target.tagName === "TD" || e.target.tagName === "INPUT") { updateTableHiddenInput(key); } - }); + }, + true + ); - // Optionally, update on row addition/removal or other events as needed - // For initial sync - updateTableHiddenInput(key); + table.addEventListener("change", function (e) { + if (e.target.classList.contains("checkbox-element")) { + updateTableHiddenInput(key); + } }); + + // Optionally, update on row addition/removal or other events as needed + // For initial sync + updateTableHiddenInput(key); + }); // Add Row functionality for all auto-property-tables document.querySelectorAll(".add-row-btn").forEach(function (btn) { btn.addEventListener("click", function () { @@ -217,7 +216,7 @@ export function setupTables() { const inputs = addRowControls.querySelectorAll( ".add-row-input, .add-row-tag-input, .add-row-dropdown-select" ); - console.log({ inputs }); + const values = Array.from(inputs).map((input) => input.value.trim()); // Prevent adding if all fields are empty @@ -248,7 +247,8 @@ export function setupTables() { const col = input ? input.getAttribute("data-col") : null; const dataType = table.getAttribute("data-at-type"); const td = document.createElement("td"); - console.log({ header, input, col, colType, dataType }); + td.classList.add("text-left"); + // td.className = "text-center"; if (colType === "element") { // Find the checkbox in the add-row-controls row console.log("Looking for checkbox with data-role:", col); @@ -262,17 +262,16 @@ export function setupTables() { checkbox.name = `checkbox-${col}`; console.log("Try to check for checkbox"); console.log({ checkboxInput }); + // Set checked state based on add-row-controls checkbox if (checkboxInput && checkboxInput.checked) { checkbox.checked = true; - console.log("Copyied checked state"); } td.setAttribute("data-col", col); td.setAttribute("data-coltype", "element"); td.setAttribute("data-type", dataType); td.appendChild(checkbox); } else if (colType === "dropdown") { - console.log("Got to dropdown"); td.className = "table-tagging-cell"; td.setAttribute("data-col", col); td.setAttribute("data-coltype", "dropdown"); @@ -280,7 +279,6 @@ export function setupTables() { // Show the selected value as plain text const value = input ? input.value : ""; - console.log("Selected value:", input.value); td.textContent = value; } else if ( colType === "tagging" || @@ -336,14 +334,24 @@ export function setupTables() { newRow.appendChild(td); } const deleteTd = document.createElement("td"); + + deleteTd.className = "d-flex justify-content-center align-items-center"; + deleteTd.style.height = "50px"; deleteTd.innerHTML = ''; newRow.appendChild(deleteTd); // Insert new row above add-row-controls addRowControls.parentNode.insertBefore(newRow, addRowControls); - + // Check if this td contains a checkbox + document.querySelectorAll("td").forEach((td) => { + if (td.querySelector('input[type="checkbox"]')) { + td.classList.remove("text-left"); // remove old alignment + td.classList.add("text-center"); // add new alignment + } + }); initializeTableTaggingCells(); + enableEditableTagsInTable(); // Clear input fields inputs.forEach((input) => { @@ -358,7 +366,10 @@ export function setupTables() { updateTableHiddenInput(key); // Remove color - addRowControls.classList.remove('invalid-required', 'invalid-recommended'); + addRowControls.classList.remove( + "invalid-required", + "invalid-recommended" + ); }); }); @@ -481,7 +492,7 @@ export function setupTables() { .join(""); // Replace the input with the select if (input) { - input.style.display = 'none'; + input.style.display = "none"; } container.appendChild(select); @@ -553,67 +564,65 @@ export function setupTables() { }); // functionanilties within all auto-property-tables - document - .querySelectorAll("table.auto-property-table") - .forEach(function (table) { - table.addEventListener("click", function (e) { - // Delete rows - if (e.target.classList.contains("delete-row-btn")) { - const row = e.target.closest("tr"); - if (row) { - row.remove(); - // Update the hidden input - const tableId = table.id; - if (tableId && tableId.endsWith("Table")) { - const key = tableId.replace(/Table$/, ""); - updateTableHiddenInput(key); - } - } - } - - // Update other fields - // Only allow editing on that is not the last column (delete icon) - const cell = e.target.closest("td"); - if (!cell) return; - if (cell.classList.contains("table-tagging-cell")) return; - if (cell.classList.contains("table-tagging-cell")) return; - const row = cell.parentElement; - const allCells = Array.from(row.children); - // Don't edit the last cell (delete icon) - if (allCells.indexOf(cell) === allCells.length - 1) return; - // Prevent multiple inputs - if (cell.querySelector("input")) return; - - const oldValue = cell.textContent; - cell.innerHTML = ""; - const input = document.createElement("input"); - input.type = "text"; - input.value = oldValue; - input.style.width = "100%"; - input.style.boxSizing = "border-box"; - cell.appendChild(input); - input.focus(); - - // Save on blur or Enter - function save() { - cell.textContent = input.value; - // Update the hidden input for this table + document.querySelectorAll("table.auto-property").forEach(function (table) { + table.addEventListener("click", function (e) { + // Delete rows + if (e.target.classList.contains("delete-row-btn")) { + const row = e.target.closest("tr"); + if (row) { + row.remove(); + // Update the hidden input const tableId = table.id; if (tableId && tableId.endsWith("Table")) { const key = tableId.replace(/Table$/, ""); updateTableHiddenInput(key); } } - input.addEventListener("blur", save); - input.addEventListener("keydown", function (evt) { - if (evt.key === "Enter") { - input.blur(); - } else if (evt.key === "Escape") { - cell.textContent = oldValue; - } - }); + } + + // Update other fields + // Only allow editing on that is not the last column (delete icon) + const cell = e.target.closest("td"); + if (!cell) return; + if (cell.classList.contains("table-tagging-cell")) return; + if (cell.classList.contains("table-tagging-cell")) return; + const row = cell.parentElement; + const allCells = Array.from(row.children); + // Don't edit the last cell (delete icon) + if (allCells.indexOf(cell) === allCells.length - 1) return; + // Prevent multiple inputs + if (cell.querySelector("input")) return; + + const oldValue = cell.textContent; + cell.innerHTML = ""; + const input = document.createElement("input"); + input.type = "text"; + input.value = oldValue; + input.style.width = "100%"; + input.style.boxSizing = "border-box"; + cell.appendChild(input); + input.focus(); + + // Save on blur or Enter + function save() { + cell.textContent = input.value; + // Update the hidden input for this table + const tableId = table.id; + if (tableId && tableId.endsWith("Table")) { + const key = tableId.replace(/Table$/, ""); + updateTableHiddenInput(key); + } + } + input.addEventListener("blur", save); + input.addEventListener("keydown", function (evt) { + if (evt.key === "Enter") { + input.blur(); + } else if (evt.key === "Escape") { + cell.textContent = oldValue; + } }); }); + }); initializeTableTaggingCells(); @@ -634,7 +643,7 @@ export function highlightEmptyAddRowControls() { const { required, recommended } = fetchRequiredAndRecommendedFields(schema); const allMandatory = [...required, ...recommended]; - document.querySelectorAll("table.auto-property-table").forEach((table) => { + document.querySelectorAll("table.auto-property").forEach((table) => { const tableId = table.id; if (!tableId || !tableId.endsWith("Table")) return; const key = tableId.replace(/Table$/, ""); @@ -645,18 +654,23 @@ export function highlightEmptyAddRowControls() { ); if (!addRowControls) return; - addRowControls.classList.remove('invalid-required', 'invalid-recommended'); + addRowControls.classList.remove( + "invalid-required", + "invalid-recommended" + ); - const tbody = table.querySelector('tbody'); - const dataRows = tbody - ? Array.from(tbody.querySelectorAll('tr')).filter(row => !row.classList.contains('add-row-controls')) - : []; + const tbody = table.querySelector("tbody"); + const dataRows = tbody + ? Array.from(tbody.querySelectorAll("tr")).filter( + (row) => !row.classList.contains("add-row-controls") + ) + : []; - if (required.includes(key) && dataRows.length === 0) { - addRowControls.classList.add('invalid-required'); - } else if (recommended.includes(key) && dataRows.length === 0) { - addRowControls.classList.add('invalid-recommended'); - } + if (required.includes(key) && dataRows.length === 0) { + addRowControls.classList.add("invalid-required"); + } else if (recommended.includes(key) && dataRows.length === 0) { + addRowControls.classList.add("invalid-recommended"); + } }); }); } diff --git a/static/foundation/js/vendor/tagging.js b/static/foundation/js/vendor/tagging.js index fc08042..9e34a27 100644 --- a/static/foundation/js/vendor/tagging.js +++ b/static/foundation/js/vendor/tagging.js @@ -5,465 +5,679 @@ Highlights suggested input Provides reusable autocomplete logic for table cells and forms*/ import { getSchema } from "./schema-utils.js"; -const SPDX_URL = 'https://raw.githubusercontent.com/spdx/license-list-data/master/json/licenses.json'; +import { validateInput } from "./ui.js"; +const SPDX_URL = + "https://raw.githubusercontent.com/spdx/license-list-data/master/json/licenses.json"; const metadataJson = document.getElementById("metadata-json"); +let enterHandledBySuggestion = false; // show highlighted tag for keywords // Tagging Logic export function setupTagging({ - containerId, - hiddenInputId, - inputId, - suggestionsId = null, - jsonKey, - useAutocomplete = false, - autocompleteSource = [] + containerId, + hiddenInputId, + inputId, + suggestionsId = null, + jsonKey, + useAutocomplete = false, + autocompleteSource = [], }) { - const container = document.getElementById(containerId); - const hiddenInput = document.getElementById(hiddenInputId); - const input = document.getElementById(inputId); - const suggestionsBox = suggestionsId ? document.getElementById(suggestionsId) : null; - - // Detect if this is an object-tagging field (e.g., referencePublication) - const label = document.querySelector(`.tagging-label[for="${inputId}"]`); - const taggingType = label ? label.getAttribute('data-tagging-type') : null; - // For tagging_object, get the constant type from data attribute (set in template) - const objectKey = label ? label.getAttribute('data-tagging-object-key') : null; - const constantType = label ? label.getAttribute('data-constant-type') : null; - - let selectedTags = []; - - // Parse initial value + const container = document.getElementById(containerId); + const hiddenInput = document.getElementById(hiddenInputId); + const input = document.getElementById(inputId); + const suggestionsBox = suggestionsId + ? document.getElementById(suggestionsId) + : null; + + // Detect if this is an object-tagging field (e.g., referencePublication) + const label = document.querySelector(`.tagging-label[for="${inputId}"]`); + const taggingType = label ? label.getAttribute("data-tagging-type") : null; + // For tagging_object, get the constant type from data attribute (set in template) + const objectKey = label + ? label.getAttribute("data-tagging-object-key") + : null; + const constantType = label ? label.getAttribute("data-constant-type") : null; + + let selectedTags = []; + let activeSuggestionIndex = -1; //for keyboard autocomplete navigation + // Parse initial value + if (taggingType === "tagging_object") { + try { + const parsed = JSON.parse(hiddenInput.value); + if (Array.isArray(parsed)) selectedTags = parsed; + } catch { + selectedTags = []; + } + } else { + // tagging (array of strings) + selectedTags = hiddenInput.value + .split(",") + .map((v) => v.trim()) + .filter(Boolean); + } + + // Render tags + function renderTags() { + container.querySelectorAll(".tag").forEach((tag) => tag.remove()); if (taggingType === "tagging_object") { - try { - const parsed = JSON.parse(hiddenInput.value); - if (Array.isArray(parsed)) selectedTags = parsed; - } catch { - selectedTags = []; - } + selectedTags.forEach((item) => { + const identifier = item.identifier || ""; + const type = item["@type"] || constantType || ""; + const tag = document.createElement("span"); + tag.classList.add("tag"); + tag.setAttribute("data-value", identifier); + tag.innerHTML = `${identifier}×`; + container.insertBefore(tag, input); + }); } else { - // tagging (array of strings) - selectedTags = hiddenInput.value - .split(",") - .map(v => v.trim()) - .filter(Boolean); + selectedTags.forEach((item) => { + const tag = document.createElement("span"); + tag.classList.add("tag"); + tag.setAttribute("data-value", item); + tag.innerHTML = `${item}×`; + container.insertBefore(tag, input); + }); } + } - // Render tags - function renderTags() { - container.querySelectorAll('.tag').forEach(tag => tag.remove()); - if (taggingType === "tagging_object") { - selectedTags.forEach(item => { - const identifier = item.identifier || ''; - const type = item['@type'] || constantType || ''; - const tag = document.createElement("span"); - tag.classList.add("tag"); - tag.setAttribute("data-value", identifier); - tag.innerHTML = `${identifier}×`; - container.insertBefore(tag, input); - }); - } else { - selectedTags.forEach(item => { - const tag = document.createElement("span"); - tag.classList.add("tag"); - tag.setAttribute("data-value", item); - tag.innerHTML = `${item}×`; - container.insertBefore(tag, input); - }); - } + // Add tag logic + function addTag(tagValue) { + if (!tagValue) return; + if (taggingType === "tagging_object") { + if (selectedTags.some((item) => item.identifier === tagValue)) return; + selectedTags.push({ + "@type": constantType || "ScholarlyArticle", + identifier: tagValue, + }); + } else { + if (selectedTags.includes(tagValue)) return; + selectedTags.push(tagValue); } + renderTags(); + updateHidden(); + input.value = ""; + if (suggestionsBox) suggestionsBox.style.display = "none"; + input.classList.remove( + "invalid", + "invalid-required", + "invalid-recommended" + ); // Remove invalid color immediately + validateInput(input); + input.blur(); + } + + // Show yellow tag once if any tag exists + if (selectedTags.length > 0) { + const highlightTag = document.createElement("span"); + highlightTag.classList.add("highlight-tag"); + highlightTag.innerHTML = `⚠️ Suggestion: Curate here Got it!`; + container.insertBefore(highlightTag, input); + } else if (!useAutocomplete) { + const highlightTag = document.createElement("span"); + highlightTag.classList.add("highlight-tag"); + highlightTag.innerHTML = `⚠️ Multiple entries supported: please press enter after typing each Got it!`; + container.insertBefore(highlightTag, input); + } + + if (useAutocomplete && suggestionsBox) { + input.addEventListener("input", () => { + const query = input.value.trim().toLowerCase(); + suggestionsBox.innerHTML = ""; + activeSuggestionIndex = -1; + if (!query) return (suggestionsBox.style.display = "none"); + + const filtered = autocompleteSource.filter( + (tag) => + tag.toLowerCase().startsWith(query) && + !(objectKey + ? selectedTags.some((item) => item[objectKey] === tag) + : selectedTags.includes(tag)) + ); + + if (filtered.length === 0) { + suggestionsBox.style.display = "none"; + return; + } + + filtered.forEach((tag) => { + const div = document.createElement("div"); + div.classList.add("suggestion-item"); + div.textContent = tag; + div.onclick = () => addTag(tag); + suggestionsBox.appendChild(div); + }); + + // --- Position the suggestion box using getBoundingClientRect --- + updateSuggestionsBoxPosition(input, suggestionsBox); + suggestionsBox.style.display = "block"; + }); + // 🔶 NEW: keyboard navigation for suggestions + input.addEventListener("keydown", (e) => { + const items = suggestionsBox.querySelectorAll(".suggestion-item"); + + if (e.key === "ArrowDown") { + e.preventDefault(); + if (items.length === 0) return; + activeSuggestionIndex = (activeSuggestionIndex + 1) % items.length; + updateHighlight(items); + } + + if (e.key === "ArrowUp") { + e.preventDefault(); + if (items.length === 0) return; + activeSuggestionIndex = + (activeSuggestionIndex - 1 + items.length) % items.length; + updateHighlight(items); + } + + if (e.key === "Enter" && activeSuggestionIndex !== -1) { + e.preventDefault(); + items[activeSuggestionIndex].click(); + enterHandledBySuggestion = true; + setTimeout(() => input.focus(), 200); + return; + } + + if (e.key === "Escape" || e.key === "Tab") { + suggestionsBox.style.display = "none"; + activeSuggestionIndex = -1; + input.blur(); + } + }); - // Add tag logic - function addTag(tagValue) { - if (!tagValue) return; - if (taggingType === "tagging_object") { - if (selectedTags.some(item => item.identifier === tagValue)) return; - selectedTags.push({ "@type": constantType || "ScholarlyArticle", "identifier": tagValue }); + function updateHighlight(items) { + items.forEach((item, index) => { + if (index === activeSuggestionIndex) { + item.classList.add("active"); + item.scrollIntoView({ block: "nearest" }); } else { - if (selectedTags.includes(tagValue)) return; - selectedTags.push(tagValue); + item.classList.remove("active"); } - renderTags(); - updateHidden(); - input.value = ""; - if (suggestionsBox) suggestionsBox.style.display = "none"; - input.classList.remove("invalid", "invalid-required", "invalid-recommended"); // Remove invalid color immediately - } - - // Show yellow tag once if any tag exists - if (selectedTags.length > 0) { - const highlightTag = document.createElement("span"); - highlightTag.classList.add("highlight-tag"); - highlightTag.innerHTML = `⚠️ Suggestion: Curate here Got it!`; - container.insertBefore(highlightTag, input); + }); } - else if (!useAutocomplete) { - const highlightTag = document.createElement("span"); - highlightTag.classList.add("highlight-tag"); - highlightTag.innerHTML = `⚠️ Multiple entries supported: please press enter after typing each Got it!`; - container.insertBefore(highlightTag, input); - } - - if (useAutocomplete && suggestionsBox) { - input.addEventListener("input", () => { - const query = input.value.trim().toLowerCase(); - suggestionsBox.innerHTML = ""; - - if (!query) return (suggestionsBox.style.display = "none"); - - const filtered = autocompleteSource.filter( - tag => tag.toLowerCase().startsWith(query) && - !(objectKey - ? selectedTags.some(item => item[objectKey] === tag) - : selectedTags.includes(tag)) - ); - if (filtered.length === 0) { - suggestionsBox.style.display = "none"; - return; - } - - filtered.forEach(tag => { - const div = document.createElement("div"); - div.classList.add("suggestion-item"); - div.textContent = tag; - div.onclick = () => addTag(tag); - suggestionsBox.appendChild(div); - }); + window.addEventListener( + "scroll", + () => updateSuggestionsBoxPosition(input, suggestionsBox), + true + ); + window.addEventListener("resize", () => + updateSuggestionsBoxPosition(input, suggestionsBox) + ); + + input.addEventListener("focus", () => { + // Show all suggestions if input is empty, or filtered if not + const query = input.value.trim().toLowerCase(); + suggestionsBox.innerHTML = ""; + + // Filter as in your input event + const filtered = autocompleteSource.filter( + (tag) => + !(objectKey + ? selectedTags.some((item) => item[objectKey] === tag) + : selectedTags.includes(tag)) && + (query === "" || tag.toLowerCase().startsWith(query)) + ); + + if (filtered.length === 0) { + suggestionsBox.style.display = "none"; + return; + } + + filtered.forEach((tag) => { + const div = document.createElement("div"); + div.classList.add("suggestion-item"); + div.textContent = tag; + div.onclick = () => addTag(tag); + suggestionsBox.appendChild(div); + div.addEventListener("mouseenter", () => { + // activeSuggestionIndex = -1; // reset keyboard tracking + const allItems = suggestionsBox.querySelectorAll(".suggestion-item"); + allItems.forEach((item) => item.classList.remove("active")); + div.classList.add("active"); + }); - // --- Position the suggestion box using getBoundingClientRect --- - updateSuggestionsBoxPosition(input, suggestionsBox) - suggestionsBox.style.display = "block"; + div.addEventListener("mouseleave", () => { + div.classList.remove("active"); }); - window.addEventListener('scroll', () => updateSuggestionsBoxPosition(input, suggestionsBox), true); - window.addEventListener('resize', () => updateSuggestionsBoxPosition(input, suggestionsBox)); - - input.addEventListener("focus", () => { - // Show all suggestions if input is empty, or filtered if not - const query = input.value.trim().toLowerCase(); - suggestionsBox.innerHTML = ""; - - // Filter as in your input event - const filtered = autocompleteSource.filter( - tag => !( - objectKey - ? selectedTags.some(item => item[objectKey] === tag) - : selectedTags.includes(tag) - ) && (query === "" || tag.toLowerCase().startsWith(query)) - ); + }); - if (filtered.length === 0) { - suggestionsBox.style.display = "none"; - return; - } - - filtered.forEach(tag => { - const div = document.createElement("div"); - div.classList.add("suggestion-item"); - div.textContent = tag; - div.onclick = () => addTag(tag); - suggestionsBox.appendChild(div); - }); + // Position the suggestion box + // const rect = input.getBoundingClientRect(); + updateSuggestionsBoxPosition(input, suggestionsBox); + suggestionsBox.style.display = "block"; + suggestionsBox.style.position = "fixed"; + }); - // Position the suggestion box - const rect = input.getBoundingClientRect(); - updateSuggestionsBoxPosition(input, suggestionsBox) - suggestionsBox.style.position = "fixed"; - }); + document.addEventListener("click", (e) => { + if (!suggestionsBox.contains(e.target) && e.target !== input) { + suggestionsBox.style.display = "none"; + } + }); + } + + // Remove tag logic + container.addEventListener("click", (e) => { + const isRemove = e.target.classList.contains("remove-tag"); + const isTag = e.target.classList.contains("tag"); + + // 🔴 Remove tag logic + if (isRemove) { + const value = e.target.dataset.value; + if (taggingType === "tagging_object") { + selectedTags = selectedTags.filter((item) => item.identifier !== value); + } else { + selectedTags = selectedTags.filter((tag) => tag !== value); + } + e.target.parentElement.remove(); + updateHidden(); + validateInput(input); + } - document.addEventListener("click", (e) => { - if (!suggestionsBox.contains(e.target) && e.target !== input) { - suggestionsBox.style.display = "none"; - } - }); + // 🟡 Edit tag logic + if (isTag) { + const value = e.target.dataset.value; + + // Remove from list + if (taggingType === "tagging_object") { + selectedTags = selectedTags.filter((item) => item.identifier !== value); + } else { + selectedTags = selectedTags.filter((tag) => tag !== value); + } + + updateHidden(); + renderTags(); + validateInput(input); + // Populate input for editing + input.value = value; + input.focus(); } + }); - // Remove tag logic - container.addEventListener("click", (e) => { - if (e.target.classList.contains("remove-tag")) { - const value = e.target.dataset.value; - if (taggingType === "tagging_object") { - selectedTags = selectedTags.filter(item => item.identifier !== value); - } else { - selectedTags = selectedTags.filter(tag => tag !== value); - } - e.target.parentElement.remove(); - updateHidden(); - } - if (e.target.classList.contains("acknowledge-tag")) { - e.target.parentElement.remove(); - } - }); + // Add tag on pressing Enter key + input.addEventListener("keydown", (e) => { + if (e.key === "Enter") { + if (enterHandledBySuggestion) { + enterHandledBySuggestion = false; - // Add tag on pressing Enter key - input.addEventListener("keydown", (e) => { - if (e.key === "Enter") { - e.preventDefault(); - const newTag = input.value.trim(); - if (useAutocomplete) { - if (autocompleteSource.includes(newTag)) { - addTag(newTag); - } else { - showInvalidTagMessage(container, input, "Please select a value from the list."); - input.classList.add("invalid"); - setTimeout(() => input.classList.remove("invalid"), 1000); - input.value = ""; - } - } else if (newTag) { - addTag(newTag); - } - } - }); + return; + } + + const newTag = input.value.trim(); - // Update hidden input and JSON - function updateHidden() { - if (taggingType === "tagging_object") { - hiddenInput.value = JSON.stringify(selectedTags); + if (useAutocomplete) { + if (autocompleteSource.includes(newTag)) { + e.preventDefault(); + addTag(newTag); } else { - hiddenInput.value = selectedTags.join(", "); + e.preventDefault(); + showInvalidTagMessage( + container, + input, + "Please select a value from the list." + ); + input.classList.add("invalid"); + setTimeout(() => input.classList.remove("invalid"), 1000); + input.value = ""; } - const jsonObject = JSON.parse(metadataJson.value); - jsonObject[jsonKey] = selectedTags; - metadataJson.value = JSON.stringify(jsonObject, null, 2); + } else if (newTag) { + e.preventDefault(); + addTag(newTag); + } + setTimeout(() => input.focus(), 0); } + }); + input.addEventListener("blur", () => { + const value = input.value.trim(); + if (value !== "") { + // Reuse Enter key handling + input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" })); + } + }); - // Initial render - renderTags(); + // Update hidden input and JSON + function updateHidden() { + if (taggingType === "tagging_object") { + hiddenInput.value = JSON.stringify(selectedTags); + } else { + hiddenInput.value = selectedTags.join(", "); + } + const jsonObject = JSON.parse(metadataJson.value); + jsonObject[jsonKey] = selectedTags; + metadataJson.value = JSON.stringify(jsonObject, null, 2); + validateInput(input); + } + + // Initial render + renderTags(); + enableEditableTagsInTable(); + setupAcknowledgeTags(); } export function initializeTaggingFields() { - // Initialize all taggings and taggings_autocomplete - document.querySelectorAll('.tagging-label[data-tagging]').forEach(label => { - const key = label.getAttribute('data-tagging'); - const taggingType = label.getAttribute('data-tagging-type'); // "tagging" or "tagging_autocomplete" - const containerId = key + 'Tags'; - const hiddenInputId = key + 'HiddenInput'; - const inputId = key + 'Input'; - const suggestionsId = key + 'Suggestions'; - - if (taggingType === "tagging_autocomplete") { - if (key === "license") { - fetch(SPDX_URL) - .then(response => response.json()) - .then(data => { - const spdxLicenses = data.licenses.map(license => license.licenseId); - setupTagging({ - containerId, - hiddenInputId, - inputId, - suggestionsId, - jsonKey: key, - useAutocomplete: true, - autocompleteSource: spdxLicenses - }); - }) - .catch(error => console.error('Error fetching SPDX licenses:', error)); - } else { - - getSchema().then(schema => { - const autocompleteSource = schema.properties?.[key]?.items?.enum || []; - setupTagging({ - containerId, - hiddenInputId, - inputId, - suggestionsId, - jsonKey: key, - useAutocomplete: true, - autocompleteSource - }); - }); - } - } else { + // Initialize all taggings and taggings_autocomplete + document.querySelectorAll(".tagging-label[data-tagging]").forEach((label) => { + const key = label.getAttribute("data-tagging"); + const taggingType = label.getAttribute("data-tagging-type"); // "tagging" or "tagging_autocomplete" + const containerId = key + "Tags"; + const hiddenInputId = key + "HiddenInput"; + const inputId = key + "Input"; + const suggestionsId = key + "Suggestions"; + + if (taggingType === "tagging_autocomplete") { + if (key === "license") { + fetch(SPDX_URL) + .then((response) => response.json()) + .then((data) => { + const spdxLicenses = data.licenses.map( + (license) => license.licenseId + ); setupTagging({ - containerId, - hiddenInputId, - inputId, - jsonKey: key, - useAutocomplete: false + containerId, + hiddenInputId, + inputId, + suggestionsId, + jsonKey: key, + useAutocomplete: true, + autocompleteSource: spdxLicenses, }); - } - }); - - document.querySelectorAll('.single-input-object-label[data-single-input-object]').forEach(label => { - const key = label.getAttribute('data-single-input-object'); - const containerId = key + 'Object'; - const hiddenInputId = key + 'HiddenInput'; - const inputId = key + 'Input'; - setupSingleInputObject({ + }) + .catch((error) => + console.error("Error fetching SPDX licenses:", error) + ); + } else { + getSchema().then((schema) => { + const autocompleteSource = + schema.properties?.[key]?.items?.enum || []; + setupTagging({ containerId, hiddenInputId, inputId, - jsonKey: key + suggestionsId, + jsonKey: key, + useAutocomplete: true, + autocompleteSource, + }); }); + } + } else { + setupTagging({ + containerId, + hiddenInputId, + inputId, + jsonKey: key, + useAutocomplete: false, + }); + } + }); + + document + .querySelectorAll(".single-input-object-label[data-single-input-object]") + .forEach((label) => { + const key = label.getAttribute("data-single-input-object"); + const containerId = key + "Object"; + const hiddenInputId = key + "HiddenInput"; + const inputId = key + "Input"; + setupSingleInputObject({ + containerId, + hiddenInputId, + inputId, + jsonKey: key, + }); }); } - // Create a function of a nested single input -export function setupSingleInputObject({containerId,hiddenInputId,inputId,jsonKey}) { - - const container = document.getElementById(containerId); - const hiddenInput = document.getElementById(hiddenInputId); - const input = document.getElementById(inputId); - - // Get the constant type from the label - const label = document.querySelector(`.single-input-object-label[for="${inputId}"]`); - const constantType = label ? label.getAttribute('data-single-input-object-type') : null; +// Create a function of a nested single input +export function setupSingleInputObject({ + containerId, + hiddenInputId, + inputId, + jsonKey, +}) { + const container = document.getElementById(containerId); + const hiddenInput = document.getElementById(hiddenInputId); + const input = document.getElementById(inputId); + + // Get the constant type from the label + const label = document.querySelector( + `.single-input-object-label[for="${inputId}"]` + ); + const constantType = label + ? label.getAttribute("data-single-input-object-type") + : null; + + // Parse initial value + let valueObj = {}; + try { + valueObj = JSON.parse(hiddenInput.value); + } catch { + valueObj = {}; + } + + // Set initial value + if (valueObj.identifier) { + input.value = valueObj.identifier; + } + + // Update hidden input and JSON on change + input.addEventListener("input", updateSingleInputObject); + input.addEventListener("change", updateSingleInputObject); + function updateSingleInputObject() { + const identifier = input.value.trim(); + const obj = { + "@type": constantType || "ScholarlyArticle", + identifier: identifier, + }; + hiddenInput.value = JSON.stringify(obj); + + // Update main JSON + const jsonObject = JSON.parse(metadataJson.value); + jsonObject[jsonKey] = obj; + metadataJson.value = JSON.stringify(jsonObject, null, 2); + } +} - // Parse initial value - let valueObj = {}; - try { - valueObj = JSON.parse(hiddenInput.value); - } catch { - valueObj = {}; - } +export function createSuggestionsBox() { + let suggestionsBox = document.querySelector(".tag-suggestions-global"); + if (!suggestionsBox) { + suggestionsBox = document.createElement("div"); + suggestionsBox.className = "tag-suggestions tag-suggestions-global"; + suggestionsBox.style.position = "absolute"; + suggestionsBox.style.background = "#fff"; + suggestionsBox.style.border = "1px solid #ccc"; + suggestionsBox.style.zIndex = 10000; + suggestionsBox.style.display = "none"; + document.body.appendChild(suggestionsBox); + } + return suggestionsBox; +} - // Set initial value - if (valueObj.identifier) { - input.value = valueObj.identifier; - } +export function showInvalidTagMessage(container, input, message) { + // Remove any existing invalid message + const existing = container.querySelector(".invalid-tag-message"); + if (existing) existing.remove(); + + const msg = document.createElement("span"); + msg.classList.add("highlight-tag", "invalid-tag-message"); + msg.innerHTML = `❌ ${message} Got it!`; + container.insertBefore(msg, input); + + msg.querySelector(".acknowledge-tag").onclick = () => msg.remove(); + setTimeout(() => { + if (msg.parentNode) msg.remove(); + }, 2500); +} - // Update hidden input and JSON on change - input.addEventListener("input", updateSingleInputObject); - input.addEventListener("change", updateSingleInputObject); - function updateSingleInputObject() { - const identifier = input.value.trim(); - const obj = { - "@type": constantType || "ScholarlyArticle", - "identifier": identifier - }; - hiddenInput.value = JSON.stringify(obj); - - // Update main JSON - const jsonObject = JSON.parse(metadataJson.value); - jsonObject[jsonKey] = obj; - metadataJson.value = JSON.stringify(jsonObject, null, 2); - } +export function updateSuggestionsBoxPosition(input, suggestionsBox) { + const rect = input.getBoundingClientRect(); + suggestionsBox.style.left = rect.left + "px"; + suggestionsBox.style.top = rect.bottom + "px"; + suggestionsBox.style.width = rect.width + "px"; } -export function createSuggestionsBox() { - let suggestionsBox = document.querySelector('.tag-suggestions-global'); - if (!suggestionsBox) { - suggestionsBox = document.createElement('div'); - suggestionsBox.className = 'tag-suggestions tag-suggestions-global'; - suggestionsBox.style.position = 'absolute'; - suggestionsBox.style.background = '#fff'; - suggestionsBox.style.border = '1px solid #ccc'; - suggestionsBox.style.zIndex = 10000; - suggestionsBox.style.display = 'none'; - document.body.appendChild(suggestionsBox); +// General autocomplete technique +export function setupTagAutocompleteInput({ + input, + selectedTagsProvider, + autocompleteSource, + onTagSelected, + container, +}) { + // Create or get suggestions box + let suggestionsBox = container.querySelector(".tag-suggestions-global"); + if (!suggestionsBox) { + suggestionsBox = createSuggestionsBox(container); + } + + input.addEventListener("input", function () { + const query = input.value.trim().toLowerCase(); + suggestionsBox.innerHTML = ""; + if (!query) { + suggestionsBox.style.display = "none"; + return; } - return suggestionsBox; + const selectedTags = selectedTagsProvider(); + const filtered = autocompleteSource.filter( + (tag) => + tag.toLowerCase().startsWith(query) && !selectedTags.includes(tag) + ); + if (filtered.length === 0) { + suggestionsBox.style.display = "none"; + return; + } + filtered.forEach((tag) => { + const div = document.createElement("div"); + div.className = "suggestion-item"; + div.textContent = tag; + div.style.cursor = "pointer"; + div.onclick = function () { + onTagSelected(tag); + suggestionsBox.style.display = "none"; + }; + suggestionsBox.appendChild(div); + }); + // Position suggestions below the input + updateSuggestionsBoxPosition(input, suggestionsBox); + suggestionsBox.style.display = "block"; + }); + + input.addEventListener("focus", function () { + suggestionsBox.innerHTML = ""; + const query = input.value.trim().toLowerCase(); + const selectedTags = selectedTagsProvider(); + // Show all suggestions if input is empty, or filtered if not + const filtered = autocompleteSource.filter( + (tag) => + !selectedTags.includes(tag) && + (query === "" || tag.toLowerCase().startsWith(query)) + ); + if (filtered.length === 0) { + suggestionsBox.style.display = "none"; + return; + } + filtered.forEach((tag) => { + const div = document.createElement("div"); + div.className = "suggestion-item"; + div.textContent = tag; + div.style.cursor = "pointer"; + div.onclick = function () { + onTagSelected(tag); + suggestionsBox.style.display = "none"; + input.focus(); + }; + suggestionsBox.appendChild(div); + }); + // Position suggestions below the input + updateSuggestionsBoxPosition(input, suggestionsBox); + suggestionsBox.style.display = "block"; + }); + + // Hide suggestions on blur/click outside + input.addEventListener("blur", function () { + setTimeout(() => { + suggestionsBox.style.display = "none"; + }, 200); + }); } -export function showInvalidTagMessage(container, input, message) { - // Remove any existing invalid message - const existing = container.querySelector('.invalid-tag-message'); - if (existing) existing.remove(); +// Enable tagging autocomplete +export function setupTableTagAutocomplete({ cell, autocompleteSource }) { + const input = cell.querySelector(".tag-input"); + if (!input) return; + const tagsList = cell.querySelector(".tags-list"); + setupTagAutocompleteInput({ + input, + selectedTagsProvider: () => + Array.from(tagsList.querySelectorAll(".tag")).map((t) => + t.textContent.trim().replace("×", "").trim() + ), + autocompleteSource, + onTagSelected: (tag) => { + input.value = tag; + input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" })); + }, + container: cell, + }); +} +export function enableEditableTagsInTable() { + document.querySelectorAll(".table-tagging-cell").forEach((cell) => { + const tagList = cell.querySelector(".tags-list"); + const input = cell.querySelector(".tag-input"); - const msg = document.createElement("span"); - msg.classList.add("highlight-tag", "invalid-tag-message"); - msg.innerHTML = `❌ ${message} Got it!`; - container.insertBefore(msg, input); + if (!tagList || !input) return; - msg.querySelector('.acknowledge-tag').onclick = () => msg.remove(); - setTimeout(() => { if (msg.parentNode) msg.remove(); }, 2500); -} + // ✅ Only add one listener (delegated) + if (!tagList.dataset.bound) { + tagList.addEventListener("click", (e) => { + if (e.target.closest(".highlight-tag")) return; -export function updateSuggestionsBoxPosition(input, suggestionsBox) { - const rect = input.getBoundingClientRect(); - suggestionsBox.style.left = rect.left + "px"; - suggestionsBox.style.top = rect.bottom + "px"; - suggestionsBox.style.width = rect.width + "px"; - } + const tagEl = e.target.closest(".tag"); + const removeEl = e.target.closest(".remove-tag"); - // General autocomplete technique -export function setupTagAutocompleteInput({ input, selectedTagsProvider, autocompleteSource, onTagSelected, container }) { - // Create or get suggestions box - let suggestionsBox = container.querySelector('.tag-suggestions-global'); - if (!suggestionsBox) { - suggestionsBox = createSuggestionsBox(container); - } + if (!tagEl || !tagList.contains(tagEl)) return; - input.addEventListener('input', function () { - const query = input.value.trim().toLowerCase(); - suggestionsBox.innerHTML = ''; - if (!query) { - suggestionsBox.style.display = 'none'; - return; - } - const selectedTags = selectedTagsProvider(); - const filtered = autocompleteSource.filter( - tag => tag.toLowerCase().startsWith(query) && !selectedTags.includes(tag) - ); - if (filtered.length === 0) { - suggestionsBox.style.display = 'none'; - return; + const tagValue = tagEl.dataset.tag; + + if (removeEl) { + tagEl.remove(); // delete tag + return; } - filtered.forEach(tag => { - const div = document.createElement('div'); - div.className = 'suggestion-item'; - div.textContent = tag; - div.style.cursor = 'pointer'; - div.onclick = function () { - onTagSelected(tag); - suggestionsBox.style.display = 'none'; - }; - suggestionsBox.appendChild(div); - }); - // Position suggestions below the input - updateSuggestionsBoxPosition(input, suggestionsBox); - suggestionsBox.style.display = 'block'; - }); + //First click both removes tag and enables input + e.preventDefault(); + e.stopPropagation(); + // Edit tag + tagEl.remove(); + input.style.display = "inline-block"; + input.value = tagValue; + input.focus(); + }); + + tagList.dataset.bound = "true"; // Prevent multiple bindings + } - input.addEventListener('focus', function () { - suggestionsBox.innerHTML = ''; - const query = input.value.trim().toLowerCase(); - const selectedTags = selectedTagsProvider(); - // Show all suggestions if input is empty, or filtered if not - const filtered = autocompleteSource.filter( - tag => !selectedTags.includes(tag) && (query === "" || tag.toLowerCase().startsWith(query)) - ); - if (filtered.length === 0) { - suggestionsBox.style.display = 'none'; - return; + // Hide input when empty and blurred + if (!input.dataset.bound) { + input.addEventListener("blur", () => { + const value = input.value.trim(); + if (value !== "") { + input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" })); } - filtered.forEach(tag => { - const div = document.createElement('div'); - div.className = 'suggestion-item'; - div.textContent = tag; - div.style.cursor = 'pointer'; - div.onclick = function () { - onTagSelected(tag); - suggestionsBox.style.display = 'none'; - }; - suggestionsBox.appendChild(div); - }); - // Position suggestions below the input - updateSuggestionsBoxPosition(input, suggestionsBox); - suggestionsBox.style.display = 'block'; - }); + input.style.display = "none"; + }); - // Hide suggestions on blur/click outside - input.addEventListener('blur', function () { - setTimeout(() => { suggestionsBox.style.display = 'none'; }, 200); - }); + input.dataset.bound = "true"; // ✅ Prevent rebinding blur + } + }); } - - // Enable tagging autocomplete - export function setupTableTagAutocomplete({ cell, autocompleteSource }) { - const input = cell.querySelector('.tag-input'); - if (!input) return; - const tagsList = cell.querySelector('.tags-list'); - setupTagAutocompleteInput({ - input, - selectedTagsProvider: () => Array.from(tagsList.querySelectorAll('.tag')).map(t => t.textContent.trim().replace('×', '').trim()), - autocompleteSource, - onTagSelected: (tag) => { - input.value = tag; - input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' })); - }, - container: cell +function setupAcknowledgeTags() { + document.querySelectorAll(".acknowledge-tag").forEach((el) => { + el.addEventListener("click", (e) => { + const wrapper = el.closest(".highlight-tag"); + if (wrapper) { + wrapper.style.display = "none"; + e.stopPropagation(); // prevent tag click logic from hijacking this + } }); + }); } - diff --git a/static/foundation/js/vendor/ui.js b/static/foundation/js/vendor/ui.js index efc512a..1314cf8 100644 --- a/static/foundation/js/vendor/ui.js +++ b/static/foundation/js/vendor/ui.js @@ -124,6 +124,7 @@ export function setupUI() { let top = 16; tooltip.style.left = left + "px"; tooltip.style.top = top + "px"; + }); element.addEventListener("mouseleave", function () { tooltip.style.display = "none"; @@ -134,13 +135,19 @@ export function setupUI() { // Initialize the state on page load window.onload = function () { + const toggleSwitch = document.getElementById("toggleSwitch"); + if (window.screen.width <= 990) { + toggleSwitch.checked = false; + } + toggleSection(); - document - .getElementById("toggleSwitch") - .addEventListener("change", toggleSection); + + toggleSwitch.addEventListener("change", toggleSection); + window.addEventListener("resize", toggleSection); }; //highlightsURLs highlightEditableUrls(urlInputs); + initAutoCloseCollapses(); } // pop-up message for Contributor and Author tabs @@ -166,18 +173,28 @@ function toggleSection() { var metadataFormDisplay = document.getElementById("metadataFormDisplay"); var toggleSwitch = document.getElementById("toggleSwitch"); var personInfoElements = document.querySelectorAll(".person-info"); // Select all elements with the class 'person-info' - + if (window.screen.width <= 990 && toggleSwitch.checked == false) { + formContainer.style.height = "100%"; + } else if (window.screen.width <= 990 && toggleSwitch.checked) { + formContainer.style.height = "50%"; + } else { + formContainer.style.height = "100%"; + } if (toggleSwitch.checked) { metadataFormDisplay.style.display = "block"; - formContainer.classList.remove("full-width"); - formContainer.classList.add("half-width"); + formContainer.classList.remove("col-lg-12"); + formContainer.classList.add("col-lg-9"); + metadataFormDisplay.classList.add("col-lg-3"); + personInfoElements.forEach(function (element) { // element.style.width = '57%'; }); } else { metadataFormDisplay.style.display = "none"; - formContainer.classList.remove("half-width"); - formContainer.classList.add("full-width"); + formContainer.classList.remove("col-lg-9"); + formContainer.classList.add("col-lg-12"); + metadataFormDisplay.classList.remove("col-lg-3"); + personInfoElements.forEach(function (element) { element.style.width = "70%"; }); @@ -243,12 +260,12 @@ export function validateInput(input) { // Always remove highlight classes before validation input.classList.remove("invalid", "invalid-required", "invalid-recommended"); + // Fetch schema and validate only if field is required or recommended getSchema() .then((schema) => { const { required, recommended } = fetchRequiredAndRecommendedFields(schema); - // --- Tagging support --- // If input is inside a tags-container, validate the hidden input instead const tagsContainer = input.closest(".tags-container"); @@ -264,6 +281,7 @@ export function validateInput(input) { : null; const key = getFieldKey(hiddenInput); + if (required.includes(key)) { if ( (taggingType === "tagging_object" && isTaggingObjectEmpty(tagsContainer)) || @@ -334,3 +352,33 @@ export function loadpage() { lodder("form1", "overlay"); } } +function initAutoCloseCollapses(collapseSelector = ".collapsible-content") { + document.querySelectorAll('[data-bs-toggle="collapse"]').forEach((button) => { + button.addEventListener("click", function () { + const targetId = this.getAttribute("data-bs-target"); + const targetCollapse = document.querySelector(targetId); + + document + .querySelectorAll(`${collapseSelector}.show`) + .forEach((openCollapse) => { + if (openCollapse !== targetCollapse) { + new bootstrap.Collapse(openCollapse, { toggle: false }).hide(); + } + }); + }); + }); + // Add click listener to close collapses when clicking outside + document.addEventListener("click", function (e) { + const isInsideToggle = e.target.closest('[data-bs-toggle="collapse"]'); + const isInsideCollapse = e.target.closest(collapseSelector); + + if (!isInsideToggle && !isInsideCollapse) { + document + .querySelectorAll(`${collapseSelector}.show`) + .forEach((openCollapse) => { + new bootstrap.Collapse(openCollapse, { toggle: false }).hide(); + }); + } + }); +} + diff --git a/templates/base.html b/templates/base.html index b6677a6..aa21926 100644 --- a/templates/base.html +++ b/templates/base.html @@ -6,16 +6,11 @@ {% block title %}SMECS{% endblock %} - - - + + + + + - - + + -
-
+
+ + {% block content %}{% endblock %} -
- + {% block scripts %}{% endblock %}