From 5fc22198b11e38fcd39c01507f460f00157ad45b Mon Sep 17 00:00:00 2001 From: "Bruno P. Kinoshita" Date: Mon, 30 May 2022 10:29:14 +1200 Subject: [PATCH 01/17] Replace qtip JS library by a pure CSS tooltip --- composer.json | 3 +- resource/css/styles.css | 176 +++++++++++++++++++++++++++++++--------- resource/js/docready.js | 2 - view/topbar.twig | 2 +- 4 files changed, 138 insertions(+), 45 deletions(-) diff --git a/composer.json b/composer.json index c097e3f37..1a5e41e68 100644 --- a/composer.json +++ b/composer.json @@ -65,8 +65,7 @@ "monolog/monolog": "1.23.*", "newerton/jquery-mousewheel": "dev-master", "pamelafox/lscache": "1.0.5", - "malihu/malihu-custom-scrollbar-plugin": "3.1.5", - "grimmlink/qtip2": "3.0.3" + "malihu/malihu-custom-scrollbar-plugin": "3.1.5" }, "require-dev": { "phpunit/phpunit": "9.5.*", diff --git a/resource/css/styles.css b/resource/css/styles.css index 323176cf8..d0deb32e5 100644 --- a/resource/css/styles.css +++ b/resource/css/styles.css @@ -103,9 +103,6 @@ h1, .prefLabel, .prefLabelLang, .notation { font-size: 16px; } -.multiselect span, .multiselect a, .dropdown-toggle, #search-all-button, .qtip-skosmos * { -} - .topbar a.navigation-font, .topbar span { color: var(--dark-color); } @@ -855,31 +852,10 @@ ul.dropdown-menu > li:last-child > input { width: 50px; } -.qtip-skosmos { - background-color: var(--tooltip-bg-color); - border-radius: 0; - border: 3px solid var(--tooltip-border-color); - margin-top: 12px; - margin-left: 9px; - min-width: 400px; -} - -.qtip-skosmos *, .reified-tooltip > p > span { - color: var(--white-color); - font-size: var(--font-size); - font-weight: 400; -} - -.qtip-skosmos a { - color: var(--tooltip-text-color) !important; - width: 100%; -} - .reified-tooltip { display: none; margin-top: 5px; width: 100%; - } .reified-property-value > img { @@ -2270,14 +2246,6 @@ body, .versal, h1, h2, h3, p, .versal-bold { display: none; } - .qtip-skosmos:not(#qtip-0) { - left: 0 !important; - } - - .qtip-skosmos:not(#qtip-0) canvas { - display: none !important; - } - .content { margin: 0 auto; } @@ -2324,14 +2292,6 @@ body, .versal, h1, h2, h3, p, .versal-bold { margin-left: 10px; margin-top: 20px; } - - .qtip-skosmos { - min-width: auto; - left: 0 !important; - } - .qtip-skosmos canvas { - display: none !important; - } } @media (max-width: 530px) { @@ -2758,3 +2718,139 @@ body, .versal, h1, h2, h3, p, .versal-bold { border: 2px dashed #62729f !important; } + +/* + * Skosmos tooltips. + * + * Created to replace https://github.com/qTip2/qTip2/ as that library is not maintained anymore, + * and creates issues when trying to update JQuery versions. + */ +.skosmos-tooltip-wrapper { + width: fit-content; +} + +.skosmos-tooltip { + position: relative; +} + +.skosmos-tooltip a { + color: var(--tooltip-text-color) !important; + width: 100%; +} + +.skosmos-tooltip::before { + position: absolute; + content: ' '; + background-color: var(--tooltip-border-color); + border: 3px solid var(--tooltip-border-color); + width: 15px; + height: 15px; + z-index: 500; + opacity: 0; + transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; + pointer-events: none; +} + +.skosmos-tooltip::after { + content: attr(data-title); + /* https://www.digitalocean.com/community/tutorials/css-line-break-content-property */ + white-space: pre-wrap; + max-width: 400px; + width: max-content; + display: inline-block; + border-radius: 0; + font-size: var(--font-size); + font-weight: 400; + color: var(--white-color); + background-color: var(--tooltip-bg-color); + border: 3px solid var(--tooltip-border-color); + position: absolute; + z-index: 555; + opacity: 0; + transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; + pointer-events: none; + margin: 12px 0 0 9px; + padding: 0.25rem 0.5rem; +} + +.skosmos-tooltip:hover::before, .skosmos-tooltip:hover::after { + opacity: 1; +} + +.skosmos-tooltip.t-top::before { + top: 0; + left: 50%; + transform: translate(-50%, 0) rotate(45deg); +} + +.skosmos-tooltip.t-top::after { + top: 0; + left: 50%; + transform: translate(-50%, 0); +} + +.skosmos-tooltip.t-top:hover::before { + transform: translate(-50%, calc(-100% - 5px)) rotate(45deg); +} + +.skosmos-tooltip.t-top:hover::after { + transform: translate(-50%, calc(-100% - 10px)); +} + +.skosmos-tooltip.t-left::before { + top: 25%; + left: 0; + transform: translate(0, 0%) rotate(45deg); +} + +.skosmos-tooltip.t-left::after { + top: 0; + left: 0; +} + +.skosmos-tooltip.t-left:hover::before { + transform: translate(calc(-100% - 5px)) rotate(45deg); +} + +.skosmos-tooltip.t-left:hover::after { + transform: translate(calc(-100% - 10px)); +} + +.skosmos-tooltip.t-right::before { + top: 25%; + right: 0; + transform: translate(0, 0%) rotate(45deg); +} + +.skosmos-tooltip.t-right::after { + top: 0; + right: 0; +} + +.skosmos-tooltip.t-right:hover::before { + transform: translate(calc(100% + 5px)) rotate(45deg); +} + +.skosmos-tooltip.t-right:hover::after { + transform: translate(calc(100% + 10px)); +} + +.skosmos-tooltip.t-bottom::before { + bottom: 0; + left: 50%; + transform: translate(-50%, 0) rotate(45deg); +} + +.skosmos-tooltip.t-bottom::after { + bottom: 0; + left: 50%; + transform: translate(-50%, 0); +} + +.skosmos-tooltip.t-bottom:hover::before { + transform: translate(-50%, calc(100% + 5px)) rotate(45deg); +} + +.skosmos-tooltip.t-bottom:hover::after { + transform: translate(-50%, calc(100% + 10px)); +} diff --git a/resource/js/docready.js b/resource/js/docready.js index 1188876b5..1fbf7540e 100644 --- a/resource/js/docready.js +++ b/resource/js/docready.js @@ -524,8 +524,6 @@ $(function() { // DOCUMENT READY style: { classes: 'qtip-tipsy qtip-skosmos' } }; - $('#navi4').qtip(qtip_skosmos); - $('.property-click').qtip(qtip_skosmos); $('.redirected-vocab-id').qtip(qtip_skosmos); diff --git a/view/topbar.twig b/view/topbar.twig index f3e62abbe..5c91630fc 100644 --- a/view/topbar.twig +++ b/view/topbar.twig @@ -49,7 +49,7 @@ {% trans "Feedback" %} -
{% trans "search_example_text" %}"> + {% trans "Help" %} From 79b8147e84bcefb240f8048bbf072091115d48b0 Mon Sep 17 00:00:00 2001 From: "Bruno P. Kinoshita" Date: Thu, 8 Sep 2022 21:39:04 +1200 Subject: [PATCH 02/17] Remove qtip from templates/views. --- view/light.twig | 1 - view/scripts.twig | 1 - 2 files changed, 2 deletions(-) diff --git a/view/light.twig b/view/light.twig index f38c53211..b3c94d871 100644 --- a/view/light.twig +++ b/view/light.twig @@ -9,7 +9,6 @@ - diff --git a/view/scripts.twig b/view/scripts.twig index 0c4dd7637..b1ed1e6dd 100644 --- a/view/scripts.twig +++ b/view/scripts.twig @@ -58,7 +58,6 @@ var pluginParameters = {{ plugin_params|raw }}; - From 835499945c0d105c5944a6d1911db1b5c02d4ce9 Mon Sep 17 00:00:00 2001 From: "Bruno P. Kinoshita" Date: Thu, 8 Sep 2022 21:43:20 +1200 Subject: [PATCH 03/17] Remove CSS animations from the CSS file (commented, can be modified later). --- resource/css/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resource/css/styles.css b/resource/css/styles.css index d0deb32e5..3a8932bfd 100644 --- a/resource/css/styles.css +++ b/resource/css/styles.css @@ -2747,7 +2747,7 @@ body, .versal, h1, h2, h3, p, .versal-bold { height: 15px; z-index: 500; opacity: 0; - transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; + /* transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; */ pointer-events: none; } @@ -2767,7 +2767,7 @@ body, .versal, h1, h2, h3, p, .versal-bold { position: absolute; z-index: 555; opacity: 0; - transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; + /* transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; */ pointer-events: none; margin: 12px 0 0 9px; padding: 0.25rem 0.5rem; From a4b62d603780642ade99abd5d7a71bbe8d956b39 Mon Sep 17 00:00:00 2001 From: "Bruno P. Kinoshita" Date: Sat, 10 Sep 2022 22:08:51 +1200 Subject: [PATCH 04/17] Adjust z-index of the tooltips. The clear-search icon has z-index 9001, so +1 to the tooltip --- resource/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resource/css/styles.css b/resource/css/styles.css index 3a8932bfd..a8702d7e9 100644 --- a/resource/css/styles.css +++ b/resource/css/styles.css @@ -2765,7 +2765,7 @@ body, .versal, h1, h2, h3, p, .versal-bold { background-color: var(--tooltip-bg-color); border: 3px solid var(--tooltip-border-color); position: absolute; - z-index: 555; + z-index: 9002; opacity: 0; /* transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; */ pointer-events: none; From 511b36ef09af64967d6674caee5b668191e328a2 Mon Sep 17 00:00:00 2001 From: "Bruno P. Kinoshita" Date: Sat, 10 Sep 2022 23:50:34 +1200 Subject: [PATCH 05/17] property-click tooltip --- resource/js/docready.js | 49 ++++++++++++++++++---------------------- view/concept-shared.twig | 10 ++++---- view/search-result.twig | 8 +++---- 3 files changed, 31 insertions(+), 36 deletions(-) diff --git a/resource/js/docready.js b/resource/js/docready.js index 1fbf7540e..e2fa65c9a 100644 --- a/resource/js/docready.js +++ b/resource/js/docready.js @@ -42,11 +42,7 @@ $(function() { // DOCUMENT READY * concept at vertical center of the container. Each concept needs 18px height. */ $(document).ajaxComplete(function(event, xhr, settings) { - $('.property-click').qtip({ - position: { my: 'bottom center', at: 'top center' }, - style: { classes: 'qtip-tipsy qtip-skosmos' } - }); - $('#hierarchy-disabled > #hier-trigger').qtip(qtip_skosmos_hierarchy); + // $('#hierarchy-disabled > #hier-trigger').qtip(qtip_skosmos_hierarchy); if (settings.url.indexOf('groups') !== -1 || settings.url.indexOf('index') !== -1) { $('.sidebar-grey').removeClass(function(index, classes) { var elementClasses = classes.split(' '); @@ -86,13 +82,13 @@ $(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 } - }); + // $(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'); @@ -128,7 +124,7 @@ $(function() { // DOCUMENT READY if (!$('#hierarchy').length) { $('#hierarchy-disabled').attr('id', 'hierarchy'); $('#hier-trigger').attr('title', ''); - $('#hier-trigger').qtip('disable'); + // $('#hier-trigger').qtip('disable'); } } @@ -524,24 +520,22 @@ $(function() { // DOCUMENT READY style: { classes: 'qtip-tipsy qtip-skosmos' } }; - $('.property-click').qtip(qtip_skosmos); - - $('.redirected-vocab-id').qtip(qtip_skosmos); + // $('.redirected-vocab-id').qtip(qtip_skosmos); $('.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 - } - }); + // $(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 + // } + // }); }); - $('#hierarchy-disabled > #hier-trigger').qtip(qtip_skosmos_hierarchy); + // $('#hierarchy-disabled > #hier-trigger').qtip(qtip_skosmos_hierarchy); // 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'); @@ -762,6 +756,7 @@ $(function() { // DOCUMENT READY if ($('.headerbar').length > 0) { var dark = ($('#search-field').val().length > 0) ? ' clear-search-dark' : ''; var clearButton = '×'; + console.log('ADDED CLEAR BTN!'); var $typeahead = $('#search-field').typeahead({hint: false, highlight: true, minLength: autocomplete_activation}, { diff --git a/view/concept-shared.twig b/view/concept-shared.twig index 2a5ec14af..877c10350 100644 --- a/view/concept-shared.twig +++ b/view/concept-shared.twig @@ -97,9 +97,9 @@

+ {%- if custom_labels[property.type]['description'][request.lang] -%}property-click skosmos-tooltip-wrapper skosmos-tooltip t-top" data-title="{{ custom_labels[property.type]['description'][request.lang] }} + {%- elseif property.description -%} property-click skosmos-tooltip-wrapper skosmos-tooltip t-top" data-title="{{ property.description }} + {%- endif -%}"> {% if custom_labels[property.type]['label'][request.lang] %} {{ custom_labels[property.type]['label'][request.lang] }} {% else %} @@ -171,7 +171,7 @@ {% set foreignLabels = concept.foreignLabels %} {% if foreignLabels %}
-

{{ 'foreign prefLabels'|trans }}

+

{{ 'foreign prefLabels'|trans }}

    @@ -252,7 +252,7 @@