Skip to content

Commit

Permalink
Reified properties tooltip (pending tests)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kinow
kinow committed Sep 14, 2022
1 parent 77c8ddd commit 7482287
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 44 deletions.
71 changes: 71 additions & 0 deletions resource/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2724,6 +2724,10 @@ body, .versal, h1, h2, h3, p, .versal-bold {
*
* Created to replace https://github.com/qTip2/qTip2/ as that library is not maintained anymore,
* and creates issues when trying to update JQuery versions.
*
* The .skosmos-tooltip{-wrapper} classes are derived from https://dev.to/r3zu3/pure-css-tooltip-1k3j.
*
* The .skosmos-tooltip-html* classes are from https://codepen.io/roydigerhund/pen/gPyzEa/.
*/
.skosmos-tooltip-wrapper {
width: fit-content;
Expand Down Expand Up @@ -2854,3 +2858,70 @@ body, .versal, h1, h2, h3, p, .versal-bold {
.skosmos-tooltip.t-bottom:hover::after {
transform: translate(-50%, calc(100% + 10px));
}

/* These classes were needed for the reified properties tooltips, as they displayed HTML elements.*/
/*
* Example use case:
*
* <div class="tooltip-html">
* <input type="button" value="Hover Me">
* <div class="tooltip-html-content">
* <p>First line</p>
* <p>Second <a href="#">line</a></p>
* </div>
* </div>
*/
/* NOTE: We only display this tooltip at the bottom of the element that triggered it, as the qtip
* as its settings for the reified properties were doing so.
*/
.tooltip-html {
position: relative;
display: inline-block;
cursor: pointer;
}

.tooltip-html:hover .tooltip-html-content, .tooltip-html:focus .tooltip-html-content {
visibility: visible;
opacity: 1;
}

.tooltip-html-content {
box-sizing: border-box;
position: absolute;
top: 26px;
left: 0;
display: block;
cursor: text;
width: 350px;
color: var(--white-color);
background-color: var(--tooltip-bg-color);
border: 3px solid var(--tooltip-border-color);
z-index: 9001;
visibility: hidden;
opacity: 0;
padding: 0.25rem 0.5rem;
}

.tooltip-html-content * {
color: var(--white-color);
}

/*
* The triangle that appears near the element that triggered it.
*/
.tooltip-html-content:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
top: -6px;
left: 0;
margin-left: 2px;
color: var(--white-color);
border-top: 6px solid var(--tooltip-border-color);
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid var(--tooltip-border-color);
z-index: 9002;
}
24 changes: 0 additions & 24 deletions resource/js/docready.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,16 +80,6 @@ $(function() { // DOCUMENT READY
$(".tt-dropdown-menu").mCustomScrollbar({ alwaysShowScrollbar: 1, scrollInertia: 0 });
}

$('.reified-property-value').each(function() {
// $(this).qtip({
// content: $(this).next('.reified-tooltip'),
// position: { my: 'top left', at: 'top left' },
// style: { classes: 'qtip-skosmos' },
// show: { delay: 100 },
// hide: { fixed: true, delay: 400 }
// });
});

var active_tab = $('a.active').parent().attr('id');
if (active_tab == 'groups') {
$('#sidebar > h4').remove();
Expand Down Expand Up @@ -502,19 +492,6 @@ $(function() { // DOCUMENT READY
});
});

$('.reified-property-value').each(function() {
// $(this).qtip({
// content: $(this).next('.reified-tooltip'),
// position: { my: 'top left', at: 'top left' },
// style: { classes: 'qtip-skosmos' },
// show: { delay: 100 },
// hide: {
// fixed: true,
// delay: 400
// }
// });
});

// Setting the language parameters according to the clang parameter or if that's not possible the cookie.
var search_lang = (content_lang !== '' && !getUrlParams().anylang && vocab !== '') ? content_lang : readCookie('SKOSMOS_SEARCH_LANG');

Expand Down Expand Up @@ -734,7 +711,6 @@ $(function() { // DOCUMENT READY
if ($('.headerbar').length > 0) {
var dark = ($('#search-field').val().length > 0) ? ' clear-search-dark' : '';
var clearButton = '<span class="versal clear-search' + dark + '">&#215;</span>';
console.log('ADDED CLEAR BTN!');

var $typeahead = $('#search-field').typeahead({hint: false, highlight: true, minLength: autocomplete_activation},
{
Expand Down
46 changes: 26 additions & 20 deletions view/concept-shared.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,16 +64,16 @@
{% apply spaceless %}
{% if concept.notation %}<span class="notation" id="notation">{{ concept.notation }}</span>{% endif %}
{% if concept.hasXlLabel %}
<span class="reified-property-value xl-pref-label">
<span class="reified-property-value xl-pref-label tooltip-html">
<img src="resource/pics/about.png">
<div class="reified-tooltip tooltip-html-content">
{% for key, val in concept.xlLabel.properties %}
<p>{{ key|trans }}:
<span class="versal">{{ val }}</span>
</p>
{% endfor %}
</div>
</span>
<div class="reified-tooltip">
{% for key, val in concept.xlLabel.properties %}
<p>{{ key|trans }}:
<span class="versal">{{ val }}</span>
</p>
{% endfor %}
</div>
<span class="prefLabel" id="pref-label">{{ concept.xlLabel }}</span>
{% else %}
<span class="prefLabel conceptlabel" id="pref-label">{{ concept.label }}</span>
Expand Down Expand Up @@ -125,8 +125,10 @@
<a href="{{ propval.uri | link_url(propval.exvocab, request.lang, 'page', request.contentLang) }}">{{ propval.label }}</a>{% if propval.exvocab %} ({{ propval.vocabname }}){% endif %}
{% else %}
{% if propval.isReified %} {# e.g. skos:definition's with resource values #}
<span class="versal reified-property-value"><img alt="{{ "Information" | trans }}" src="resource/pics/about.png">{% if propval.notation %}<span class="versal">{{ propval.notation }} </span>{% endif %} {{ propval.label(request.contentLang) }}</span>
<div class="reified-tooltip">{% for key, val in propval.reifiedPropertyValues %}<p>{{ key }}: <a href="{{ val.uri | link_url(val.exvocab, request.lang, 'page', request.contentLang) }}">{{ val.label(request.contentLang) }}</a></p>{% endfor %}</div>
<span class="versal reified-property-value tooltip-html">
<img alt="{{ "Information" | trans }}" src="resource/pics/about.png">{% if propval.notation %}<span class="versal">{{ propval.notation }} </span>{% endif %} {{ propval.label(request.contentLang) }}
<div class="reified-tooltip tooltip-html-content">{% for key, val in propval.reifiedPropertyValues %}<p>{{ key }}: <a href="{{ val.uri | link_url(val.exvocab, request.lang, 'page', request.contentLang) }}">{{ val.label(request.contentLang) }}</a></p>{% endfor %}</div>
</span>
{% else %}
<a href="{{ propval.uri | link_url(propval.vocab, request.lang, 'page', request.contentLang) }}">{% if propval.notation %}<span class="versal">{{ propval.notation }} </span>{% endif %} {{ propval.label(request.contentLang) }}</a>
{% endif %}
Expand All @@ -145,14 +147,16 @@
{% else %} {# Literals (no URI), eg. alternative labels as properties #}
{% if propval.lang == request.contentLang or propval.lang == null or not request.contentLang and propval.lang == request.lang %}
{% if propval.hasXlProperties %}
<span class="reified-property-value xl-label"><img alt="{{ "Information" | trans }}" src="resource/pics/about.png"></span>
<div class="reified-tooltip">
<span class="reified-property-value xl-label tooltip-html">
<img alt="{{ "Information" | trans }}" src="resource/pics/about.png">
<div class="reified-tooltip tooltip-html-content">
{% for key, val in propval.xlLabel.properties %}
<p>{{ key|trans }}:
<span class="versal">{{ val }}</span>
</p>
{% endfor %}
</div>
</span>
{% endif %}
<span{% if property.type == 'skos:altLabel' %} class="replaced"{% endif %}>
{%- if propval.containsHtml %}{{ propval.label|raw }}{% else %}{{ propval.label }}{% endif %}
Expand Down Expand Up @@ -180,16 +184,18 @@
<li class="row other-languages{% if loop.first %} first-of-language{% endif %}">
<div class="col-6 versal{% if value.type == "skos:altLabel" %} replaced{%else %} versal-pref{% endif %}">
{% if value.hasXlProperties %}
<span class="reified-property-value xl-label"><img alt="{{ "Information" | trans }}" src="resource/pics/about.png"></span>
<div class="reified-tooltip">
<span class="reified-property-value xl-label tooltip-html">
<img alt="{{ "Information" | trans }}" src="resource/pics/about.png">
<div class="reified-tooltip tooltip-html-content">
{% for key, val in value.xlLabel.properties %}
{% if key != 'rdf:type' and key != 'skosxl:literalForm' %}
<p>{{ key|trans }}:
<span class="versal">{{ val }}</span>
</p>
{% endif %}
{% if key != 'rdf:type' and key != 'skosxl:literalForm' %}
<p>{{ key|trans }}:
<span class="versal">{{ val }}</span>
</p>
{% endif %}
{% endfor %}
</div>
</div>
</span>
{% endif %}
{% if value.type == "skos:prefLabel" and value.lang in request.vocab.config.languages %}
<a href='{{ concept.uri|link_url(request.vocabid,request.lang, 'page', value.lang) }}' hreflang='{{ value.lang }}'>{{ value.label }}</a>
Expand Down

0 comments on commit 7482287

Please sign in to comment.