About How it works page Redesign . Basic outline.
(cherry picked from commit e26c700cd3)
This commit is contained in:
parent
51228df7d5
commit
1528b91736
|
|
@ -66,7 +66,7 @@
|
|||
<div class="page-title">About</div>
|
||||
</div>
|
||||
<div class="col pt-5 pb-3">
|
||||
<div class="row title-4">How it works</div>
|
||||
<div class="row title-4">What it is</div>
|
||||
</div>
|
||||
<p class="pt-3">
|
||||
ARGOS is the joint effort of OpenAIRE and EUDAT to deliver an open platform for Data Management Planning
|
||||
|
|
@ -102,6 +102,309 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col pt-0 pb-3">
|
||||
<div class="row title-4">How it works</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="pt-3">
|
||||
Research Data Management (RDM) is a vital part of Open Science that lies at the heart of European
|
||||
research for it increases the quality of produced data and ensures integrity and preservation of
|
||||
research outputs. RDM refers to activities undertaken throughout a research lifecycle, spanning from
|
||||
data collection to data process and analysis. Open Access and FAIR principles govern data activities
|
||||
today to foster data discovery, distribution and exploitation, thus accelerating scientific breakthroughs.
|
||||
Coronavirus vaccine is the ultimate example of what can be achieved in a short amount of time when
|
||||
data are openly shared across the global scientific community. RDM urges scientific practices to be
|
||||
adjusted in ways that enable data understandability and re-usability from both humans and machines;
|
||||
services and tools are realised or re-designed to support the shift towards Open and FAIR research outputs.
|
||||
</p>
|
||||
|
||||
<p class="pt-2">
|
||||
Argos is a service for creating and publishing plans that describe data management activities,
|
||||
commonly known as Data Management Plans (DMPs). The plans are produced as machine-actionable
|
||||
outputs (ma-DMPs), in the form of rich text documents, following Open and FAIR practices and are
|
||||
published in Zenodo. Argos supports RDM at the beginning of research for planning data activities to
|
||||
be performed, as well as throughout and at the end of research for documenting the steps and
|
||||
processes followed according to institutional or funder RDM requirements.
|
||||
</p>
|
||||
|
||||
<div class="col pt-5 pb-3">
|
||||
<div class="row title-5">Dmp Lifecycle</div>
|
||||
</div>
|
||||
|
||||
<p class="pt-2">
|
||||
Argos follows a full DMP publication lifecycle. Users create their DMPs and add descriptions for their
|
||||
datasets. DMPs and Datasets are by default created in private mode and can be shared with
|
||||
colleagues to facilitate the writing process. Datasets are added in DMPs per type and / or per scientific
|
||||
discipline that they concern. That way information is well-organized and it is easier to distinguish
|
||||
relevant information from a pool of data activities detailed in a single DMP record. Once created, DMPs
|
||||
and their Datasets are in draft status and are treated as living documents in the Argos environment,
|
||||
meaning that they can be versioned and updated at any time. When ready, users can validate and
|
||||
finalize their DMPs, including corresponding Datasets, and change their visibility status from private to
|
||||
open. Open DMPs in Argos are available and accessible to all from the Public Dashboards. To close the
|
||||
DMP lifecycle, Argos integrates Zenodo, so users are able to publish their DMPs directly from its environment.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="container">
|
||||
|
||||
<div class="col-12" style="margin-top: 121px; ">
|
||||
|
||||
<div style="position: relative;" id="lifecycle-img-container">
|
||||
<img id="img-coloured" class="image-coloured" src="../assets/img/lifecycle_full_color.png" style="width: 100%; height: auto; display: block;" alt="">
|
||||
<img class="image-grey" src="../assets/img/lifecycle_full_color.png" style="width: 100%; height: auto; display: block;" alt="">
|
||||
|
||||
<img class="preface-img" src="../assets/img/lifecycle_full_color.png" alt="">
|
||||
|
||||
<!-- EDITORS-DRAFT -->
|
||||
<div class="red-dot" data-clip-mode="clip-draft" style="top:24.7%; left: 23.5%; cursor: pointer;">
|
||||
<div class="inner-red-dot"></div>
|
||||
</div>
|
||||
<!-- VALIDATED -->
|
||||
<div class="red-dot" data-clip-mode="clip-validated" style="top:19%; left: 56.5% ; cursor: pointer;">
|
||||
<div class="inner-red-dot"></div>
|
||||
</div>
|
||||
<!-- FINALIZED -->
|
||||
<div class="red-dot" data-clip-mode="clip-finalized" style="top:39%; right: 19.7%; cursor: pointer;">
|
||||
<div class="inner-red-dot"></div>
|
||||
</div>
|
||||
<!-- DMP -->
|
||||
<div class="red-dot" data-clip-mode="clip-dmp" style="top:67%; right: -0.3%; cursor: pointer;">
|
||||
<div class="inner-red-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-12" style="margin-top: 121px; ">
|
||||
<div class="options-menu">
|
||||
|
||||
<div class="row">
|
||||
<!-- tab naviggation -->
|
||||
<div class="col-7">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-toggle="tab" id="multiple-navigation-1" data-img-fragment href="#create_and_add">Create & Add</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" data-img-fragment="img-fragment-validated-is" href="#validate">Validate</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" data-img-fragment="img-fragment-finalized-is" href="#finalize">Finalize</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" data-img-fragment="img-fragment-dmp-out" href="#dmp">Ma-Dmp Outputs</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane show active" id="create_and_add">
|
||||
<small>
|
||||
Argos consists of two main editors: the DMP editor and the Dataset editor.
|
||||
Both editors integrate OpenAIRE and ESOC APIs to ease the writing process and
|
||||
help create links with other outputs. Also, the editors incorporate a mechanism
|
||||
to enable compliance with the RDA DMP Common Standard.
|
||||
</small>
|
||||
<!-- nested naviation -->
|
||||
<ul class="nav nav-pills" style="padding-top: 2em;">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link sub-navigation-button active" data-toggle="tab" data-img-fragment="img-fragment-dmp-editor" href="#dmp_editor_pane">DMP Editor</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link sub-navigation-button" data-toggle="tab" data-img-fragment="img-fragment-dataset-editor" href="#dataset_editor_pane">Dataset Editor</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane show active" id="dmp_editor_pane">
|
||||
<small>
|
||||
The DMP editor embeds the Dataset editor to provide a holistic view of a project's
|
||||
scope, beneficiaries and data activities. Therefore, it guides users step-by-step
|
||||
into adding appropriate administrative information, selecting templates that
|
||||
correspond to research needs and requirements, and describing data activities.
|
||||
</small>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane fade" id="dataset_editor_pane">
|
||||
<small>
|
||||
The Dataset editor concers information that is solely for datasets, such as how Open
|
||||
and FAIR principles have been applied to them throughout data management activities.
|
||||
It is the place to select RDM templates and start answering data questions. Moreover,
|
||||
the Dataset editor can be used independently at any time when new data are produced
|
||||
throughout a project lifetime. That allows users to quickly describe their new data and
|
||||
link them to existing DMPs in their dashboard.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane fade" id="validate">
|
||||
<small>
|
||||
Information contained in DMPs should be validated before being published.
|
||||
Validation at this stage checks for mandatory fields in the DMP and reports back
|
||||
when necessary information has not been provided by the user. Once the user
|
||||
add all necessary information, validation is successful.
|
||||
</small>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane fade" id="finalize">
|
||||
<small>
|
||||
DMPs finalization is the process of locking working drafts of DMPs and publishing
|
||||
them, either just on the Argos platform or on Zenodo where they alse get DOI.
|
||||
It is possible for datasets contained in DMPs to be finalized independently. That
|
||||
is important especially for datasets that can not be shared openly, such as those
|
||||
of sensitive content. Before publishing DMPs, sensitive datasets can be detached
|
||||
from its core. That way data descriptions are equally protected form being openly
|
||||
shared along with the DMP content.
|
||||
</small>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane fade " id="dmp">
|
||||
<small>
|
||||
Argos ma-DMP outputs carry rich information that exceeds metadata provided in
|
||||
DMPs whey they are created and deposited as plain texts. Argos applies the RDA
|
||||
DMP Common Standard to comply with global practices on the machine-actinability.
|
||||
This is important for two reasons:
|
||||
</small>
|
||||
|
||||
<ol style="list-style-type: lower-roman;">
|
||||
<li>It enables researchers to switch platforms at anytime and seamlessly work</li>
|
||||
<li>Adds to the Scholarly Communication ecology and pushes for best practices
|
||||
in neighbour areas to keep up pace, e.g. deposit in repositories and
|
||||
classification of DMPs as data management plans and not as publications,
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Images -->
|
||||
<div class="col">
|
||||
<img src="../assets/img/dmp_out.png" class="img-fragment-step" id="img-fragment-dmp-out" alt="">
|
||||
<img src="../assets/img/3_dmp_editor.png" class="img-fragment-step opacity-1" id="img-fragment-dmp-editor" alt="">
|
||||
<img src="../assets/img/4_dataset_editor.png" class="img-fragment-step" id="img-fragment-dataset-editor" alt="">
|
||||
<img src="../assets/img/6_validated_is.png" class="img-fragment-step" id="img-fragment-validated-is" alt="">
|
||||
<img src="../assets/img/8_finalized_is.png" class="img-fragment-step" id="img-fragment-finalized-is" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-small">
|
||||
|
||||
<div class="col pt-5 pb-3">
|
||||
<div class="row title-5">Argos in the OpenAIRE ecosystem</div>
|
||||
</div>
|
||||
|
||||
<p class="pt-2">
|
||||
Argos is hooked on the OpenAIRE ecosystem comprising a diverse set of services and tools for Open
|
||||
Science and Scholarly Communication, from technical to educational and consultative in nature.
|
||||
OpenAIRE services and tools are provided for immediate consumption by end-users, i.e. researchers,
|
||||
research communities, research performing or funding organizations and policymakers. Moreover,
|
||||
OpenAIRE services are exploitable by software engineers. Argos integrates other OpenAIRE services to
|
||||
maximise efficiency of operations in Open and FAIR ecosystems and to make connections that add
|
||||
value in Open Science at global scale. OpenAIRE services that Argos connects to are:
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="col" style="margin-top: 121px; position: relative;">
|
||||
<img src="../assets/img/openaire_ecosystem.png" style="width: 100%; height: auto;" alt="">
|
||||
|
||||
<!-- apis -->
|
||||
<div class="red-dot" style="top:8%; left: 22%"
|
||||
data-toggle="tooltip" data-placement="bottom"
|
||||
title='<h2>APIs</h2>
|
||||
Utilises OpenAIRE pool of resources
|
||||
and APIs to provide quick input to
|
||||
users (e.g. CORDIS, Datacite, re3data,
|
||||
ORCID, etc).'
|
||||
><div class="inner-red-dot"></div>
|
||||
</div>
|
||||
<!-- zenodo -->
|
||||
<div class="red-dot" style="top:10%; left: 54%"
|
||||
data-toggle="tooltip" data-placement="bottom"
|
||||
title='<h2>Zenodo</h2>
|
||||
Closes the DMP lifecycle by offering a
|
||||
DMP platform to expose DMP for
|
||||
their immediate publication in an
|
||||
open and FAIR manner (DMPs are
|
||||
assigned DOIs, get licenses, follow
|
||||
versioning mechanism etc).'
|
||||
><div class="inner-red-dot"></div>
|
||||
</div>
|
||||
<!-- provide -->
|
||||
<div class="red-dot" style="top:48.2%; left: 2.5%"
|
||||
data-toggle="tooltip" data-placement="bottom"
|
||||
title='<h2>Provide</h2>
|
||||
Sends notifications to repository
|
||||
managers of the OpenAIRE network
|
||||
when datasets described in Argos
|
||||
ma-DMPs are claimed to be
|
||||
deposited in their repositories.'
|
||||
><div class="inner-red-dot"></div>
|
||||
</div>
|
||||
<!-- monitor -->
|
||||
<div class="red-dot" style="top:60.2%; right: 2.5%"
|
||||
data-toggle="tooltip" data-placement="bottom"
|
||||
title="<h2>Monitor</h2>
|
||||
Collects contextualised information
|
||||
about ma-DMPs to understand how
|
||||
RDM and DMPs evolve in time and
|
||||
support decision making of funders
|
||||
and policymakers."
|
||||
>
|
||||
<div class="inner-red-dot"></div>
|
||||
</div>
|
||||
<!-- graph -->
|
||||
<div class="red-dot" style="bottom:14.2%; left: 40.5%"
|
||||
data-toggle="tooltip" data-placement="bottom"
|
||||
title='<h2>Research Graph</h2>
|
||||
Enriches the ma-DMP entity in the
|
||||
OpenAIRE knowledge graph for open
|
||||
scholarly communication information
|
||||
and creates relationships with other
|
||||
research outputs and links, adding in
|
||||
the OpenAIRE LOD ecology.'
|
||||
>
|
||||
<div class="inner-red-dot"></div>
|
||||
</div>
|
||||
<!-- explore -->
|
||||
<div class="red-dot" style="bottom:1%; left: 56%" data-toggle="tooltip" data-placement="bottom"
|
||||
title='
|
||||
<h2>Explore</h2>
|
||||
Adds ma-DMPs in the OpenAIRE
|
||||
search engine and makes them
|
||||
findable under a dedicated resource
|
||||
type category "data managment
|
||||
plan".'>
|
||||
<div class="inner-red-dot"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-small">
|
||||
|
||||
<p class="mt-3 pt-4"><b>Useful Resources</b></p>
|
||||
<p>
|
||||
<ul style="padding-bottom: 4em;">
|
||||
<li>
|
||||
Argos RDA output adoption:
|
||||
<br>
|
||||
<a href="https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps">
|
||||
https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Webinar:
|
||||
<br>
|
||||
<a href="https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps">
|
||||
https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps
|
||||
</a>
|
||||
(starts at 30:15)
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p class="pt-2">
|
||||
More details on ARGOS as registered in the OpenAIRE services catalogue is available here:
|
||||
<a href="http://catalogue.openaire.eu/service/openaire.argos"><u>http://catalogue.openaire.eu/service/openaire.argos</u></a>.
|
||||
|
|
@ -168,6 +471,8 @@
|
|||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
|
||||
<!-- Js for this file -->
|
||||
<script src="../js/how-it-works.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 789 KiB |
|
|
@ -150,11 +150,15 @@ p a {
|
|||
color: #212121;
|
||||
}
|
||||
|
||||
.title-1, .title-2, .title-3, .title-4 {
|
||||
.title-1, .title-2, .title-3, .title-4, .title-5 {
|
||||
text-align: left;
|
||||
font-size: 2.37rem;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
.title-5{
|
||||
color: #129D99;
|
||||
font: normal normal 300 27px/35px Roboto;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
text-align: center;
|
||||
|
|
@ -379,3 +383,182 @@ hr {
|
|||
.ext-link-icon {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
|
||||
|
||||
/* ABOUT HOW IT WORKDS PAGE REDESIGN */
|
||||
|
||||
.red-dot{
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
z-index: 20;
|
||||
border: 3px solid #ee254091;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.inner-red-dot{
|
||||
background-color: #EE2540;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* .tooltip{
|
||||
background-color: red;
|
||||
} */
|
||||
.tooltip >.tooltip-inner {
|
||||
padding: 2em;
|
||||
background-color: #FFF;
|
||||
color: black;
|
||||
box-shadow: 0px 3px 6px #0000001A;
|
||||
text-align: start;
|
||||
max-width: 25em;
|
||||
}
|
||||
.tooltip .show{
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.tooltip h2{
|
||||
color: #23BCBA;
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-top .arrow:before {
|
||||
border-top-color: #fff
|
||||
}
|
||||
.tooltip.bs-tooltip-right .arrow:before {
|
||||
border-right-color: #fff;
|
||||
}
|
||||
.tooltip.bs-tooltip-left .arrow:before {
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.tooltip.bs-tooltip-bottom .arrow:before {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.tooltip.show {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.image-coloured {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
/* position: absolute; */
|
||||
clip-path: polygon(0% 0%);
|
||||
}
|
||||
|
||||
.image-grey {
|
||||
z-index: 0;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.clip-draft{
|
||||
clip-path:polygon(41.84% 0.0%, 40.13% 46.41%, 40.90% 100%, 0.0% 100.0%, 0.0% 0.0%);
|
||||
}
|
||||
.clip-validated{
|
||||
clip-path: polygon(41.84% 0%, 40.13% 46.41%, 40.9% 100%, 68.32% 100.0%, 68.32% 0%);
|
||||
}
|
||||
.clip-finalized{
|
||||
clip-path: polygon(58.86% 0.0%, 58.74% 100.0%, 88.65% 100.0%, 88.65% 0.0%);
|
||||
}
|
||||
.clip-dmp{
|
||||
clip-path: polygon(80.26% 0.0%, 80.13% 100.0%, 100.00% 100.0%, 100.0% 0.0%);
|
||||
}
|
||||
|
||||
.preface-img{
|
||||
width: 100%; height: auto; display: block; z-index: 2;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
filter: grayscale(100%);
|
||||
|
||||
transition-property: opacity;
|
||||
transition-duration: 300ms;
|
||||
transition-delay: 50ms;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.options-menu{
|
||||
box-shadow: 0px 6px 15px #0000001A;
|
||||
border-radius: 36px;
|
||||
padding: 3.2em 4.1em !important;
|
||||
min-height: 30em;
|
||||
}
|
||||
/* First level of tabs */
|
||||
.options-menu .nav-tabs{
|
||||
border-color: transparent !important;
|
||||
color: #212121;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
.options-menu .nav-tabs .nav-item .nav-link{
|
||||
border-radius: 0px !important;
|
||||
padding: 0.2rem 0rem !important;
|
||||
}
|
||||
.options-menu .nav-tabs .nav-item:first-child .nav-link{
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.options-menu .nav-tabs .nav-link.active{
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
}
|
||||
|
||||
.options-menu .nav-tabs .nav-link:hover:not(.active){
|
||||
border-color: transparent !important;
|
||||
}
|
||||
.options-menu .nav-tabs .nav-link{
|
||||
opacity: 0.5;
|
||||
transition: opacity 200ms 50ms ease-out;
|
||||
}
|
||||
.options-menu .nav-tabs .nav-link:hover{
|
||||
color: #212121;
|
||||
}
|
||||
.options-menu .nav-tabs .nav-link.active{
|
||||
border-bottom: 3px solid black !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* nested tabs */
|
||||
.options-menu .nav-pills{
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.options-menu .nav-pills .nav-link{
|
||||
border-radius: 40px;
|
||||
border: 1px solid #1A1A1A;
|
||||
color: #1A1A1A;
|
||||
opacity: 0.5;
|
||||
/* transition: opacity 200ms 50ms ease-out; */
|
||||
}
|
||||
.options-menu .nav-pills .nav-link.active{
|
||||
background-color: #129D99;
|
||||
color: #F9FBFC;
|
||||
border: 1px solid transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
.options-menu .nav-pills .nav-item:first-child .nav-link{
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.img-fragment-step{
|
||||
width: auto; max-height:23em;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms 50ms ease-out;
|
||||
}
|
||||
|
||||
.opacity-0{
|
||||
opacity: 0;
|
||||
}
|
||||
.opacity-1{
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
|
||||
jQuery(function(){
|
||||
const $img_coloured = $('#img-coloured');
|
||||
const $img_preface = $('.preface-img');
|
||||
const $action_dots = $('[data-clip-mode]');
|
||||
const $lifecycle_img_container = $('#lifecycle-img-container');
|
||||
let current_mode = null;
|
||||
|
||||
const mutationObserver = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(mutation=>{
|
||||
if(mutation.attributeName === 'class'){//class changed
|
||||
// console.log(mutation);
|
||||
const isActive = mutation.target.className.includes('active');
|
||||
const target_image_id = mutation.target.attributes['data-img-fragment'].value;
|
||||
|
||||
if(target_image_id && target_image_id.length){
|
||||
|
||||
|
||||
//dummy fix clean all opacities
|
||||
$('.img-fragment-step').each(function(){
|
||||
$(this).removeClass('opacity-1');
|
||||
});
|
||||
|
||||
|
||||
if(isActive){
|
||||
$("#"+target_image_id).addClass('opacity-1');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(mutation.target.id == 'multiple-navigation-1' && isActive){ //search children
|
||||
|
||||
const $target_nav_links = $('.sub-navigation-button');
|
||||
$target_nav_links.removeClass('active');
|
||||
$target_nav_links.first().addClass('active');
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip({html:true})
|
||||
})
|
||||
|
||||
$action_dots.on('mouseenter', function(){
|
||||
const mode = $(this).attr('data-clip-mode');
|
||||
current_mode = mode;
|
||||
|
||||
$img_coloured.addClass(mode);
|
||||
$img_preface.addClass('opacity-0');
|
||||
|
||||
$action_dots.each(function(){
|
||||
if($(this).attr('data-clip-mode') != mode){
|
||||
$(this).addClass('d-none');
|
||||
};
|
||||
});
|
||||
});
|
||||
$action_dots.on('mouseleave', function(){
|
||||
|
||||
});
|
||||
|
||||
|
||||
$lifecycle_img_container.on('mouseleave', function(){
|
||||
if(current_mode){
|
||||
const mode = current_mode;
|
||||
$img_coloured.removeClass(mode);
|
||||
$img_preface.removeClass('opacity-0');
|
||||
|
||||
$action_dots.each(function(){
|
||||
$(this).removeClass('d-none');
|
||||
});
|
||||
}
|
||||
|
||||
current_mode = null;
|
||||
});
|
||||
|
||||
// $('[data-img-fragment]').each(function(){
|
||||
// console.log($(this).attr('data-img-fragment'));
|
||||
// })
|
||||
|
||||
$("[data-img-fragment]").each(function(){
|
||||
const nodeElement = $(this)[0];
|
||||
|
||||
mutationObserver.observe(nodeElement ,{attributes:true});
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
// mutationObserver.observe($("[data-img-fragment]")[1] ,{attributes:true});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue