implement bootstrap tooltips

Author: JohnRDOrazio

admin.php

@@ -137,7 +137,7 @@
     if (curl_errno($ch)) {
         die('Could not fetch data from ' . $eventsEndpoint);
     }
-    [ "litcal_events" => $LitCalAllFestivities ] = json_decode(
+    [ "litcal_events" => $LitCalAllLitEvents ] = json_decode(
         $eventsRaw,
         true
     );
@@ -182,7 +182,7 @@ class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16"
 </div>
 <?php
 $testsIndex = json_encode($LitCalTests);
-$litcal_events = json_encode($LitCalAllFestivities);
+$litcal_events = json_encode($LitCalAllLitEvents);
 echo "<script>const LitCalTests = Object.freeze($testsIndex); const LitcalEvents = Object.freeze($litcal_events);</script>";
 include_once 'layout/footer.php';
 ?>

assets/css/index.css

@@ -27,3 +27,21 @@ body {
     width: 4rem;
     height: 4rem;
 }
+
+.wide-tooltip .tooltip-inner {
+    max-width: 800px;
+    white-space: pre;
+    text-align: left;
+    font-size: 0.8rem;
+    overflow-x: auto;
+}
+
+.wide-tooltip .tooltip-inner a {
+    color: #9ab8de;
+    transition: color 300ms 100ms;
+}
+
+.wide-tooltip .tooltip-inner a:hover {
+    color: #e8d2d2;
+    transition: color 300ms 100ms;
+}

assets/js/admin.js

@@ -259,7 +259,7 @@ const setEndpoints = (ev = null) => {
         case 'v3':
             ENDPOINTS.METADATA   = `https://litcal.johnromanodorazio.com/api/v3/LitCalMetadata.php`;
             ENDPOINTS.TESTSINDEX = `https://litcal.johnromanodorazio.com/api/v3/LitCalTestsIndex.php`;
-            ENDPOINTS.EVENTS     = `https://litcal.johnromanodorazio.com/api/v4/LitCalAllFestivities.php/`;
+            ENDPOINTS.EVENTS     = `https://litcal.johnromanodorazio.com/api/v4/LitCalAllLitEvents.php/`;
         break;
     }
 }
@@ -477,15 +477,15 @@ const API = {
 
 /**
  * Rebuilds the options for the select element containing the list of existing
- * festivities for the currently selected API calendar.
+ * liturgical events for the currently selected API calendar.
  *
  * @param {HTMLSelectElement} element - The select element containing the list of
- * existing festivities.
+ * existing liturgical events.
  * @async
  * @returns {Promise<void>}
  */
-const rebuildFestivitiesOptions = async (element) => {
-    console.log(`rebuildFestivitiesOptions: ${element.value}`);
+const rebuildLitEventsOptions = async (element) => {
+    console.log(`rebuildLitEventsOptions: ${element.value}`);
     const selectedOption = $(element).find('option[value="' + element.value + '"]')[0];
     console.log(selectedOption);
     const calendarType = selectedOption.dataset.calendartype;
@@ -512,7 +512,7 @@ const rebuildFestivitiesOptions = async (element) => {
         }
         htmlStr += `<option value="${el.event_key}"${dataMonth}${dataDay}${dataGrade}>${el.name} (${el.grade_lcl})</option>`;
     }
-    document.querySelector( '#existingFestivitiesList' ).innerHTML = htmlStr;
+    document.querySelector( '#existingLitEventsList' ).innerHTML = htmlStr;
 }
 
 /**
@@ -556,9 +556,9 @@ $(document).on('change', '#litCalTestsSelect', async (ev) => {
         if( proxiedTest.hasOwnProperty('applies_to') ) {
             const calendarType = Object.keys(proxiedTest.applies_to)[0];
             document.querySelector('#APICalendarSelect').value = proxiedTest.applies_to[calendarType];
-            await rebuildFestivitiesOptions(document.querySelector('#APICalendarSelect'));
-            document.querySelector('#existingFestivityName').value = proxiedTest.event_key;
-            console.log(`keys of litcal_events after rebuildFestivitiesOptions:`);
+            await rebuildLitEventsOptions(document.querySelector('#APICalendarSelect'));
+            document.querySelector('#existingLitEventName').value = proxiedTest.event_key;
+            console.log(`keys of litcal_events after rebuildLitEventsOptions:`);
             console.log(litcal_events_keys.sort());
             AssertionsBuilder.test = litcal_events.filter(el => el.event_key === proxiedTest.event_key)[0] ?? null;
             AssertionsBuilder.appliesTo = proxiedTest.applies_to[calendarType];
@@ -577,7 +577,7 @@ $(document).on('change', '#litCalTestsSelect', async (ev) => {
 });
 
 $(document).on('change', '#APICalendarSelect', async (ev) => {
-    await rebuildFestivitiesOptions( ev.currentTarget );
+    await rebuildLitEventsOptions( ev.currentTarget );
 });
 
 $(document).on('click', '.editDate', ev => {
@@ -756,8 +756,8 @@ $(document).on('show.bs.modal', '#modalDefineTest', ev => {
     let lightClass = '';
     if( 'edittest' in ev.relatedTarget.dataset ) {
         document.querySelector('#newUnitTestDescription').value = proxiedTest.description;
-        document.querySelector('#existingFestivityName').value = proxiedTest.event_key;
-        $existingOption = $(document.querySelector('#existingFestivityName').list).find('option[value="' + proxiedTest.event_key + '"]');
+        document.querySelector('#existingLitEventName').value = proxiedTest.event_key;
+        $existingOption = $(document.querySelector('#existingLitEventName').list).find('option[value="' + proxiedTest.event_key + '"]');
         console.log($existingOption);
         years = Array.from(document.querySelectorAll('#assertionsContainer .testYear')).map(el => Number(el.textContent));
         minYear = Math.min(...years);
@@ -824,8 +824,8 @@ $(document).on('slid.bs.carousel', ev => {
     if( ev.to === 2 ) {
         let firstYear = document.querySelector('#lowerRange').value;
         let monthDay = '-01-01';
-        const selectedEventVal = document.querySelector('#existingFestivityName').value;
-        const $selectedOption = $('#existingFestivitiesList').find('option[value="' + selectedEventVal + '"]');
+        const selectedEventVal = document.querySelector('#existingLitEventName').value;
+        const $selectedOption = $('#existingLitEventsList').find('option[value="' + selectedEventVal + '"]');
         if( $selectedOption.length && $selectedOption[0].dataset.month && $selectedOption[0].dataset.month !== '' && $selectedOption[0].dataset.day && $selectedOption[0].dataset.day !== '' ) {
             const month = $selectedOption[0].dataset.month.padStart(2, '0');
             const day = $selectedOption[0].dataset.day.padStart(2, '0');
@@ -839,7 +839,7 @@ $(document).on('slid.bs.carousel', ev => {
 
 /** SLIDER 1 INTERACTIONS */
 
-$(document).on('change', '#existingFestivityName', ev => {
+$(document).on('change', '#existingLitEventName', ev => {
     const currentVal = ev.currentTarget.value;
     console.log(currentVal);
     // Determine whether an option exists with the current value of the input.
@@ -895,8 +895,8 @@ $(document).on('change', '#yearsToTestRangeSlider [type=range]', ev => {
     let htmlStr = '';
     let titleAttr = '';
     let lightClass = '';
-    const currentEventKey = document.querySelector('#existingFestivityName').value;
-    $existingOption = $(document.querySelector('#existingFestivityName').list).find('option[value="' + currentEventKey + '"]');
+    const currentEventKey = document.querySelector('#existingLitEventName').value;
+    $existingOption = $(document.querySelector('#existingLitEventName').list).find('option[value="' + currentEventKey + '"]');
     for( let year = minYear; year <= maxYear; year++ ) {
         eventDate = new Date(Date.UTC(year, Number($existingOption[0].dataset.month)-1, Number($existingOption[0].dataset.day), 0, 0, 0));
         if( eventDate.getUTCDay() === 0 ) {
@@ -965,8 +965,8 @@ $(document).on('click', '#btnCreateTest', () => {
     } else {
         //let's build our new Unit Test
         proxiedTest = new Proxy({}, sanitizeOnSetValue);
-        proxiedTest.event_key = document.querySelector('#existingFestivityName').value;
-        console.log(document.querySelector('#existingFestivityName').value);
+        proxiedTest.event_key = document.querySelector('#existingLitEventName').value;
+        console.log(document.querySelector('#existingLitEventName').value);
         console.log(proxiedTest.name);
         proxiedTest.test_type = currentTestType;
         proxiedTest.description = document.querySelector('#newUnitTestDescription').value;

assets/js/index.js

@@ -303,16 +303,16 @@ const sourceDataCheckTemplate = ( item, idx ) => {
     let categoryStr;
     switch(item.category){
         case 'nationalcalendar':
-            categoryStr = 'National Calendar definition: defines any actions that need to be taken on the festivities already defined in the Universal Calendar, to adapt them to this specific National Calendar';
+            categoryStr = 'National Calendar definition: defines any actions that need to be taken on the liturgical events already defined in the Universal Calendar, to adapt them to this specific National Calendar';
             break;
         case 'widerregioncalendar':
-            categoryStr = 'Wider Region definition: contains any festivities that apply not only to a particular nation, but to a group of nations that belong to the wider region. There will also be translation files associated with this data';
+            categoryStr = 'Wider Region definition: contains any liturgical events that apply not only to a particular nation, but to a group of nations that belong to the wider region. There will also be translation files associated with this data';
             break;
         case 'propriumdesanctis':
-            categoryStr = 'Proprium de Sanctis data: contains any festivities defined in the Missal printed for the given nation, that are not already defined in the Universal Calendar';
+            categoryStr = 'Proprium de Sanctis data: contains any liturgical events defined in the Missal printed for the given nation, that are not already defined in the Universal Calendar';
             break;
         case 'diocesancalendar':
-            categoryStr = 'Diocesan Calendar definition: contains any festivities that are proper to the given diocese. This data will not overwrite national or universal calendar data, it will be simply appended to the calendar';
+            categoryStr = 'Diocesan Calendar definition: contains any liturgical events that are proper to the given diocese. This data will not overwrite national or universal calendar data, it will be simply appended to the calendar';
             break;
     }
     return `<div class="col-1${idx === 0 || idx % 11 === 0 ? ' offset-1' : ''}">
@@ -363,6 +363,14 @@ const HTMLEncode = (str) => {
     return aRet.join('');
 }
 
+const escapeQuotesAndLinkifyUrls = (str) => {
+    str = str.replaceAll(
+        /(https?:\/\/.+?)(?=\s|$)/g,
+        (url) => `<a href="${url}" target="_blank">${url}</a>`
+    );
+    return str.replaceAll('"', '&quot;');
+}
+
 /**
  * The options used to format the date in the assertions.
  * @constant
@@ -620,7 +628,7 @@ const connectWebSocket = () => {
         else if ( responseData.type === "error" ) {
             $( responseData.classes ).removeClass( 'bg-info' ).addClass( 'bg-danger' );
             $( responseData.classes ).find( '.fa-circle-question' ).removeClass( 'fa-circle-question' ).addClass( 'fa-circle-xmark' );
-            $( responseData.classes ).find('.card-text').append(`<span title="${HTMLEncode( responseData.text )}" role="button" class="float-right"><i class="fas fa-message-exclamation"></i></span>`);
+            $( responseData.classes ).find('.card-text').append(`<span role="button" class="float-end error-tooltip" data-bs-toggle="tooltip" data-bs-title="${escapeQuotesAndLinkifyUrls( responseData.text )}"><i class="fas fa-message-exclamation"></i></span>`);
             $( '#failedCount' ).text( ++failedTests );
             switch( currentState ) {
                 case TestState.ExecutingValidations:
@@ -928,6 +936,7 @@ const setupPage = () => {
         if(startTestRunnerBtnLbl === '') {
             startTestRunnerBtnLbl = document.querySelector('#startTestRunnerBtnLbl').textContent;
         }
+
         if( $('#APICalendarSelect').children().length === 1 ) {
             nations.forEach( item => {
                 if ( false === CalendarNations.includes( item ) && item !== "VA" ) {
@@ -1008,6 +1017,8 @@ const setupPage = () => {
                 $( '.calendardata-tests' ).find( `.year-${Years[ idx ]}` ).after( NationalCalendarTemplates.join( '' ) );
                 $( '.calendardata-tests' ).find( `.year-${Years[ idx ]}` ).siblings( '.file-exists,.json-valid,.schema-valid' ).addClass( `year-${Years[ idx ]}` );
             }
+        } else {
+            document.querySelectorAll('.error-tooltip').forEach(el => el.remove());
         }
 
         $('#specificUnitTestsAccordion').empty();
@@ -1105,7 +1116,7 @@ $( document ).on( 'click', '#startTestRunnerBtn', () => {
         messageCounter = 0;
         successfulTests = 0;
         failedTests = 0;
-        currentState = conn.readyState !== WebSocket.CLOSED && conn.ReadyState !== WebSocket.CLOSING ? TestState.ReadyState : TestState.JobsFinished;
+        currentState = ( conn.readyState !== WebSocket.CLOSED && conn.ReadyState !== WebSocket.CLOSING ) ? TestState.ReadyState : TestState.JobsFinished;
         if ( conn.readyState !== WebSocket.OPEN ) {
             console.warn( 'cannot run tests: websocket connection is not ready' );
             console.warn( conn.readyState.toString );
@@ -1122,6 +1133,51 @@ $( document ).on( 'click', '#startTestRunnerBtn', () => {
     }
 });
 
+// Store tooltips so we can hide them later
+const tooltipMap = new Map();
+
+// Show tooltip on click
+document.body.addEventListener('click', function (event) {
+  const target = event.target.closest('[data-bs-toggle="tooltip"]');
+  if (!target) {
+    // Clicked elsewhere: hide all tooltips
+    tooltipMap.forEach(t => t.hide());
+    tooltipMap.clear();
+    return;
+  }
+
+  event.stopPropagation(); // Prevent document click from immediately hiding it
+
+  // If tooltip already exists, show it
+  let tooltip = tooltipMap.get(target);
+  if (!tooltip) {
+    tooltip = new bootstrap.Tooltip(target, {
+      trigger: 'manual',
+      html: true,
+      customClass: 'wide-tooltip'
+    });
+    tooltipMap.set(target, tooltip);
+  }
+
+  tooltip.show();
+});
+
+// Optional: Hide tooltip on ESC key
+document.addEventListener('keydown', function (event) {
+  if (event.key === 'Escape') {
+    tooltipMap.forEach(t => t.hide());
+    tooltipMap.clear();
+  }
+});
+
+/*
+const tooltip = new bootstrap.Tooltip(document.body, {
+  selector: '[data-bs-toggle="tooltip"]',
+  html: true,
+  customClass: 'wide-tooltip',
+  trigger: 'hover focus'
+});
+*/
 setEndpoints();
 fetchMetadataAndTests();
 connectWebSocket();

components/NewTestModal.php

@@ -18,9 +18,9 @@ class="active" aria-current="true" aria-label="Slide 1"></button>
                         <form class="row justify-content-left needs-validation" novalidate>
                             <div class="carousel-item active" data-item='0'>
                                 <div class="form-group">
-                                    <label for="existingFestivityName" class="fw-bold"><?php echo _("Choose the liturgical event for which you would like to create a test"); ?>:</label>
-                                    <input list="existingFestivitiesList" class="form-control existingFestivityName" id="existingFestivityName" required>
-                                    <div class="invalid-feedback"><?php echo _("This festivity does not seem to exist? Please choose from a value in the list."); ?></div>
+                                    <label for="existingLitEventName" class="fw-bold"><?php echo _("Choose the liturgical event for which you would like to create a test"); ?>:</label>
+                                    <input list="existingLitEventsList" class="form-control existingLitEventName" id="existingLitEventName" required>
+                                    <div class="invalid-feedback"><?php echo _("This liturgical event does not seem to exist? Please choose from a value in the list."); ?></div>
                                 </div>
                                 <div class="form-group mt-5">
                                     <label for="newUnitTestDescription"><?php echo _('Description') ?></label>
@@ -92,22 +92,22 @@ class="active" aria-current="true" aria-label="Slide 1"></button>
     </div>
 </div>
 
-<datalist id="existingFestivitiesList">
+<datalist id="existingLitEventsList">
 <?php
-foreach ($LitCalAllFestivities as $key => $festivity) {
+foreach ($LitCalAllLitEvents as $key => $litEvent) {
     $dataMonth = '';
     $dataDay = '';
     $dataGrade = '';
-    if (isset($festivity["MONTH"])) {
-        $dataMonth = " data-month=\"{$festivity["MONTH"]}\"";
+    if (isset($litEvent["MONTH"])) {
+        $dataMonth = " data-month=\"{$litEvent["MONTH"]}\"";
     }
-    if (isset($festivity["DAY"])) {
-        $dataDay = " data-day=\"{$festivity["DAY"]}\"";
+    if (isset($litEvent["DAY"])) {
+        $dataDay = " data-day=\"{$litEvent["DAY"]}\"";
     }
-    if (isset($festivity["GRADE"])) {
-        $dataGrade = " data-grade=\"{$festivity["GRADE"]}\"";
+    if (isset($litEvent["GRADE"])) {
+        $dataGrade = " data-grade=\"{$litEvent["GRADE"]}\"";
     }
-    echo "<option value=\"{$key}\"{$dataMonth}{$dataDay}{$dataGrade}>{$festivity["NAME"]} ({$festivity["GRADE_LCL"]})</option>";
+    echo "<option value=\"{$key}\"{$dataMonth}{$dataDay}{$dataGrade}>{$litEvent["NAME"]} ({$litEvent["GRADE_LCL"]})</option>";
 }
 ?>
 </datalist>

composer.json

@@ -2,5 +2,8 @@
     "require": {
         "liturgical-calendar/components": "^3.1",
         "vlucas/phpdotenv": "^5.6"
+    },
+    "require-dev": {
+        "squizlabs/php_codesniffer": "*"
     }
 }