Fix: make admission tooltop optional [WEB-2658]

app/Http/Requests/Admin/FeeCategoryRequest.php

@@ -10,15 +10,13 @@ public function rulesForCreate()
     {
         return [
             'title' => 'required',
-            'tooltip' => 'required'
         ];
     }
 
     public function rulesForUpdate()
     {
         return [
             'title' => 'required',
-            'tooltip' => 'required',
         ];
     }
 }

frontend/js/behaviors/core/showAdmissionTooltip.js

@@ -1,60 +1,80 @@
 const showAdmissionTooltip = function(container) {
 
-    let tooltipSized = false;
-
-    let targetAttribute = container.getAttribute('data-tooltip-target');
-    let targetTooltip = document.getElementById(targetAttribute);
-
-    container.addEventListener('click', function() {
-        toggleTooltip.call(this);
-    });
-
     function toggleTooltip() {
         hideTooltips();
-        showTooltip(targetTooltip);
-        sizeToolTips();
+        showTooltip();
     }
 
     function hideTooltips() {
         const tooltips = document.querySelectorAll('.admission-info-button-info');
         tooltips.forEach(element => {
-            element.setAttribute('style', 'display: none');
+            element.style.display = 'none';
             element.setAttribute('aria-expanded','false');
             element.setAttribute('aria-hidden','true');
             element.classList.remove('admission-info-visible')
         })
     }
 
-    function showTooltip(targetTooltip) {
+    function showTooltip() {
+        let targetTooltip = document.getElementById(container.dataset.tooltipTarget);
+
         if (targetTooltip) {
             targetTooltip.setAttribute('aria-expanded','true');
             targetTooltip.setAttribute('aria-hidden','false');
-            targetTooltip.setAttribute('style', 'display: block');
+            targetTooltip.style.display = 'block';
             targetTooltip.classList.add('admission-info-visible');
         }
     }
 
     function sizeToolTips() {
-        if (!tooltipSized){
-            tooltipSized = true;
+        const posTooltips = document.querySelectorAll('.admission-info-button-info');
 
-            const posTooltips = document.querySelectorAll('.admission-info-button-info');
-
-            posTooltips.forEach(element => {
+        posTooltips.forEach(element => {
             if (element.clientHeight !== undefined) {
                 const newTopValue = -1 * (element.clientHeight) + 'px';
                 element.setAttribute('style', 'top: ' + newTopValue);
             }
-            });
-        }
+        });
+    }
+
+    function _clicksOutside(event) {
+        hideTooltips();
+    }
+
+    function _handleClicks(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      toggleTooltip();
+      container.blur();
+    }
+
+    function _escape(event) {
+      let isInput = (event.target.tagName === 'INPUT');
+      if (event.keyCode === 27 && !isInput) {
+        hideTooltips();
       }
+    }
 
     function _init() {
         hideTooltips();
-        document.addEventListener('click', hideTooltips, false);
+        sizeToolTips();
+        container.addEventListener('click', _handleClicks, false);
+        document.addEventListener('click', _clicksOutside, false);
         window.addEventListener('resize', sizeToolTips, false);
+        window.addEventListener('keyup', _escape, false);
     }
 
+    this.destroy = function() {
+      // Remove specific event handlers
+      container.removeEventListener('click', _handleClicks);
+      document.removeEventListener('click', _clicksOutside);
+      window.removeEventListener('resize', sizeToolTips);
+      window.removeEventListener('keyup', _escape);
+
+      // Remove properties of this behavior
+      A17.Helpers.purgeProperties(this);
+    };
+
     this.init = function() {
         _init();
     };

frontend/js/behaviors/core/toggleFee.js

@@ -1,16 +1,5 @@
 const toggleFee = function(container) {
 
-  if (container.tagName === 'SELECT') {
-    container.addEventListener('change', function() {
-      showFee.call(this);
-    });
-  } else {
-    container.addEventListener('click', function() {
-      showFee.call(this);
-      selectCategoryButton.call(this);
-  });
-  }
-
   function showFee() {
 
     let targetAttribute;
@@ -26,7 +15,7 @@ const toggleFee = function(container) {
     feeAges.forEach(element => {
       element.classList.remove('selected');
     });
-      
+
     // Find the element with the matching ID and add the "selected" class
     const targetElements = document.querySelectorAll('[id="'+targetAttribute+'"]');
     if (targetElements) {
@@ -35,16 +24,29 @@ const toggleFee = function(container) {
       })
     }
   }
-    
+
   function selectCategoryButton() {
     const categories = document.querySelectorAll('[data-behavior="toggleFee"]');
-        
+
     categories.forEach(element => {
       element.classList.remove('selected');
     });
-    
+
     container.classList.add('selected');
   }
+
+  function _init() {
+    if (container.tagName === 'SELECT') {
+      container.addEventListener('change', showFee, false);
+    } else {
+      container.addEventListener('click', showFee, false);
+      container.addEventListener('click', selectCategoryButton, false);
+    }
+  }
+
+  this.init = function() {
+      _init();
+  };
 }
 
-export default toggleFee;
+export default toggleFee;

frontend/scss/pages/_p-landingpage-show.scss

@@ -46,7 +46,6 @@
 
   .admission-info-button-info {
       left: 20px;
-      opacity: 0;
       z-index: 10;
       position: absolute;
       width: 200px;
@@ -55,6 +54,7 @@
       box-shadow: $shadow;
       white-space: initial;
       transition: opacity .25s;
+      display: none;
 
       @include breakpoint('small+') {
         width: 250px;
@@ -65,10 +65,6 @@
     @include tucked-align-top($f-caption);
   }
 
-  .admission-info-visible {
-    opacity: 1 !important;
-  }
-
   .m-title-bar {
     margin-top: 50px;
   }

resources/views/site/landingPage/_header----visit.blade.php

@@ -125,24 +125,24 @@
                         {{-- get first index and add selected class to it --}}
                         @if (!empty($admission))
                             @foreach ($admission['titles'] as $category)
-                                @if ($loop->first)
-                                    <tr id='b-{!! $category['id'] !!}' data-target='{!! array_search($category, $admission['titles']) !!}' class="selected" data-behavior="toggleFee">
-                                @else
+                                @if (!$loop->first)
                                     </tr>
-                                    <tr id='b-{!! $category['id'] !!}' data-target='{!! array_search($category, $admission['titles']) !!}' data-behavior="toggleFee">
                                 @endif
+                                <tr id='b-{!! $category['id'] !!}' data-target='{!! array_search($category, $admission['titles']) !!}' {{ $loop->first ? 'class="selected"' : '' }} data-behavior="toggleFee">
                                     <td>
                                         <span class="f-module-title-1">{{$category['title']}}</span>
-                                        <span class="admission-info-button-container" data-behavior="showAdmissionTooltip">
-                                            <button data-tooltip-target='t-{!! $category['id'] !!}' class="admission-info-button-trigger" data-behavior="showAdmissionTooltip" aria-label="Info" aria-expanded="false">
-                                                <svg class="icon--info"><use xlink:href="#icon--info" /></svg>
-                                            </button>
-                                            <span class="admission-info-button-info" id='t-{!! $category['id'] !!}' data-behavior="showAdmissionTooltip">
-                                                <span class="f-caption">
-                                                    {{ $category['tooltip'] }}
-                                                </span>
+                                        @if ($category['tooltip'])
+                                            <span class="admission-info-button-container">
+                                                <button data-tooltip-target='t-{!! $category['id'] !!}' class="admission-info-button-trigger" data-behavior="showAdmissionTooltip" aria-label="Info" aria-expanded="false">
+                                                    <svg class="icon--info"><use xlink:href="#icon--info" /></svg>
+                                                </button>
+                                                <div class="admission-info-button-info" id='t-{!! $category['id'] !!}'>
+                                                    <div class="f-caption">
+                                                        {{ $category['tooltip'] }}
+                                                    </div>
+                                                </div>
                                             </span>
-                                        </span>
+                                        @endif
                                     </td>
                                 </tr>
                             @endforeach