Disable touch events on most tooltips

diff --git a/galette/templates/default/elements/js/modal_action.js.twig b/galette/templates/default/elements/js/modal_action.js.twig
index cef0b288c37230b5eec32c90d368f362757d5036..97ef6e8e2eb8fd0b9dcd452e4403f355de2f2bea 100644 (file)
--- a/galette/templates/default/elements/js/modal_action.js.twig
+++ b/galette/templates/default/elements/js/modal_action.js.twig
@@ -122,8 +122,9 @@
     var _actionAjaxMapper = function(){
         $('.modal-form .ui.dropdown, .modal-form select:not(.nochosen)').dropdown();
         $('.modal-form .ui.checkbox, .modal-form .ui.radio.checkbox').checkbox();
-        $('.no-touch .modal-form a[title], .no-touch .modal-form .tooltip').popup({
+        $('.modal-form a[title], .modal-form .tooltip').popup({
             variation: 'inverted',
-            inline: false
+            inline: false,
+            addTouchEvents: false,
         });
     }

diff --git a/galette/templates/default/elements/logged_user.html.twig b/galette/templates/default/elements/logged_user.html.twig
index 3ff71dfc59288eedd1dafd0aeb2fef5735c753ce..723f5cfb342904fd0a62405e85b3000bb72f4430 100644 (file)
--- a/galette/templates/default/elements/logged_user.html.twig
+++ b/galette/templates/default/elements/logged_user.html.twig
@@ -61,7 +61,7 @@
         {% else %}
             {% set component_classes = "ui vertical centered tiny icon fluid menu" %}
             <nav id="logoutmenu" class="{{ component_classes }}" aria-label="{{ _T('User menu') }}">
-                <div class="ui dropdown navigation item no-touch tooltip" data-html="{{ login.loggedInAs()|raw }}" data-position="right center">
+                <div class="ui dropdown navigation item tooltip" data-html="{{ login.loggedInAs()|raw }}" data-position="right center">
                     <i class="user circle icon" aria-hidden="true"></i>
                     <span class="visually-hidden">{{ login.loggedInAs()|raw }}</span>
                     <i class="dropdown icon" aria-hidden="true"></i>

diff --git a/galette/templates/default/elements/member_card.html.twig b/galette/templates/default/elements/member_card.html.twig
index 09bad878750d924152eadd1951a6275eb5ba6d4d..5e4efff9e424b25bdfc6cb33ca3f2fda8854ebfe 100644 (file)
--- a/galette/templates/default/elements/member_card.html.twig
+++ b/galette/templates/default/elements/member_card.html.twig
@@ -7,7 +7,7 @@
                 width="{{ member.picture.getOptimalWidth() }}"
                 height="{{ member.picture.getOptimalHeight() }}"
                 alt="{{ _T("Picture") }}"
-                class="green no-touch tooltip"
+                class="green tooltip"
         {# Drag'n drop is disabled on member form #}
         {% if (hidden_elements is not defined) %}
                 data-html="{{ _T("Drag and drop an image file to change the picture") }}">

diff --git a/galette/templates/default/elements/navigation/navigation_aside.html.twig b/galette/templates/default/elements/navigation/navigation_aside.html.twig
index 53dbf0b0bbe25122a3cd4a78913ea7bece40b323..fee09dcea6d56225057d56a777f2a51cf647a00a 100644 (file)
--- a/galette/templates/default/elements/navigation/navigation_aside.html.twig
+++ b/galette/templates/default/elements/navigation/navigation_aside.html.twig
@@ -23,7 +23,7 @@
     <div class="ui basic fitted segment">
         <div class="ui toggle mini checkbox">
             <input type="checkbox" name="compactmenu" id="compactmenu" class="hidden"{% if login.getCompactMenu() %} checked="checked"{% endif %}>
-            <label for="compactmenu"{% if login.getCompactMenu() %} class="no-touch tooltip" data-html="{{ _T("Compact menu") }}"{% endif %}>
+            <label for="compactmenu"{% if login.getCompactMenu() %} class="tooltip" data-html="{{ _T("Compact menu") }}"{% endif %}>
                 {% if not login.getCompactMenu() %}{{ _T("Compact menu") }}{% endif %}
             </label>
         </div>

diff --git a/galette/templates/default/elements/navigation/navigation_items.html.twig b/galette/templates/default/elements/navigation/navigation_items.html.twig
index 3eebec78208441ec77d7d6b154a2a675a8b2ae09..c8546340cd0cb1a643de12db012378264d447294 100644 (file)
--- a/galette/templates/default/elements/navigation/navigation_items.html.twig
+++ b/galette/templates/default/elements/navigation/navigation_items.html.twig
@@ -9,7 +9,7 @@
             data-position="right center"
         >
         {% if mode != "compact" %}
-            <div class="image header title{% if mode == "compact" %} no-touch tooltip" data-html="{{ _T("Dashboard") }}"{% else %}"{% endif %}>
+            <div class="image header title{% if mode == "compact" %} tooltip" data-html="{{ _T("Dashboard") }}"{% else %}"{% endif %}>
         {% endif %}
                 <i class="compass icon" aria-hidden="true"></i>
         {% if mode != "compact" %}

diff --git a/galette/templates/default/macros.twig b/galette/templates/default/macros.twig
index bc09f47787e24f2ff77997ad85f5607c887b13bf..8f92ad5b5638a4a936f12c6bf4d68219d39e6024 100644 (file)
--- a/galette/templates/default/macros.twig
+++ b/galette/templates/default/macros.twig
@@ -4,7 +4,7 @@
         {% set my_routes = my_routes|merge([item.route.name])|merge(item.route.aliases ?? []) %}
     {% endfor %}
     {% if mode == "compact" %}
-        <div class="ui{% if cur_route in my_routes %} active-menu{% endif %} dropdown navigation item no-touch tooltip" data-html="{{ title }}" data-position="right center">
+        <div class="ui{% if cur_route in my_routes %} active-menu{% endif %} dropdown navigation item tooltip" data-html="{{ title }}" data-position="right center">
             <i class="{{ icon }} icon" aria-hidden="true"></i>
             <span class="visually-hidden">{{ title }}</span>
             <i class="dropdown icon" aria-hidden="true"></i>

diff --git a/galette/templates/default/pages/configuration_dynamic_fields.html.twig b/galette/templates/default/pages/configuration_dynamic_fields.html.twig
index 7631a2e6a3e4d918c54046f5409e3d08c13f6bd9..bcc2b9aef8de3a151e7f377448a022544d74d51a 100644 (file)
--- a/galette/templates/default/pages/configuration_dynamic_fields.html.twig
+++ b/galette/templates/default/pages/configuration_dynamic_fields.html.twig
@@ -78,9 +78,10 @@
             var _addDynFieldAjaxMapper = function(){
                 $('.modal-form .ui.dropdown, .modal-form select:not(.nochosen)').dropdown();
                 $('.modal-form .ui.checkbox, .modal-form .ui.radio.checkbox').checkbox();
-                $('.no-touch .modal-form a[title], .no-touch .modal-form .tooltip').popup({
+                $('.modal-form a[title], .modal-form .tooltip').popup({
                     variation: 'inverted',
-                    inline: false
+                    inline: false,
+                    addTouchEvents: false,
                 });
             }
 

diff --git a/galette/templates/default/pages/members_list.html.twig b/galette/templates/default/pages/members_list.html.twig
index 8bbe596b592dd02a563d2d22e8d250492d3700d5..9a12fabf40ecc46ca4948e0302c26d7e83878784 100644 (file)
--- a/galette/templates/default/pages/members_list.html.twig
+++ b/galette/templates/default/pages/members_list.html.twig
@@ -797,9 +797,10 @@
         var _batchAjaxMapper = function(){
             $('.modal-form .ui.dropdown, .modal-form select:not(.nochosen)').dropdown();
             $('.modal-form .ui.checkbox, .modal-form .ui.radio.checkbox').checkbox();
-            $('.no-touch .modal-form a[title], .no-touch .modal-form .tooltip').popup({
+            $('.modal-form a[title], .modal-form .tooltip').popup({
                 variation: 'inverted',
-                inline: false
+                inline: false,
+                addTouchEvents: false,
             });
             {% include 'elements/js/calendar.js.twig' with {
                 selector: ".modal-form [id$='rangestart'], .modal-form [id$='rangeend']"

diff --git a/ui/js/common.js b/ui/js/common.js
index 05e75d9fd60431b8bd141b27ba0f029d96f480e4..d2ce3cadd94d757c26ef81d606f8a45ab3fff354 100644 (file)
--- a/ui/js/common.js
+++ b/ui/js/common.js
@@ -28,10 +28,6 @@
 
 /* Fomantic UI components */
 var _bindFomanticComponents = function() {
-    if (!("ontouchstart" in document.documentElement) || !("no-touch" in document.documentElement.classList)) {
-        document.documentElement.classList.add("no-touch");
-    }
-
     var
         $sidebar         = $('.ui.sidebar'),
         $dropdown        = $('.ui.dropdown:not(.navigation, .autosubmit), select:not(.nochosen)'),
@@ -39,10 +35,11 @@ var _bindFomanticComponents = function() {
         $accordion       = $('.ui.accordion'),
         $checkbox        = $('.ui.checkbox, .ui.radio.checkbox'),
         $tabulation      = $('.ui.tabbed .item'),
-        $popup           = $('.no-touch a[title], .no-touch .tooltip'),
-        $menuPopupRight  = $('.no-touch .ui.vertical.accordion.menu a[title]'),
-        $menuPopupBottom = $('.no-touch .ui.top.fixed.menu a.item[title]'),
-        $menuPopupLeft   = $('.no-touch .ui.dropdown.right-aligned a[title]')
+        $popup           = $('a[title], .tooltip'),
+        $infoPopup       = $('i.circular.primary.icon.info.tooltip'),
+        $menuPopupRight  = $('.ui.vertical.accordion.menu a[title]'),
+        $menuPopupBottom = $('.ui.top.fixed.menu a.item[title]'),
+        $menuPopupLeft   = $('.ui.dropdown.right-aligned a[title]')
     ;
 
     $sidebar.sidebar('attach events', '.toc.item');
@@ -85,7 +82,17 @@ var _bindFomanticComponents = function() {
     $popup
         .popup({
             variation: 'inverted',
-            inline: false
+            inline: false,
+            addTouchEvents: false,
+        })
+    ;
+    /* Touch events are allowed on info icons popups.
+     */
+    $infoPopup
+        .popup({
+            variation: 'inverted',
+            inline: false,
+            addTouchEvents: true,
         })
     ;
     /* Position right on the main accordion menu.
@@ -96,7 +103,8 @@ var _bindFomanticComponents = function() {
             variation: 'inverted',
             delay: {
                 show: 300
-            }
+            },
+            addTouchEvents: false,
         })
     ;
     /* Position bottom on the top fixed menu.
@@ -104,7 +112,8 @@ var _bindFomanticComponents = function() {
     $menuPopupBottom
         .popup({
             position: 'center bottom',
-            variation: 'inverted'
+            variation: 'inverted',
+            addTouchEvents: false,
         })
     ;
     /* Position left on the top right language dropdown menu.
@@ -115,7 +124,8 @@ var _bindFomanticComponents = function() {
             variation: 'inverted',
             delay: {
                 show: 300
-            }
+            },
+            addTouchEvents: false,
         })
     ;
 }