REP-1057 migrates tooltips and filter check boxes

Author: TiloNN

mir-layout/src/main/resources/META-INF/resources/mir-layout/scss/common/base.scss

@@ -64,6 +64,12 @@
     letter-spacing: 0.4em;
     padding-left: 12px
   }
+
+  // all the elements that should have no underline by default
+  .hit_title,
+  .hit_author,
+  .hit_source,
+  .single_hit_option,
   .internal_links,
   .social_links {
     a {

mir-layout/src/main/resources/META-INF/resources/mir-layout/scss/common/mir_results.scss

@@ -103,11 +103,8 @@ $hover_darken: 20%;
       .filter {
         li {
           cursor: pointer;
-          &:hover * {
-            background-color: transparent;
-          }
           &:hover {
-            .custom-checkbox {
+            .form-check {
               label {
                 .title {
                   color: shade-color($filter, $hover_darken);
@@ -118,16 +115,16 @@ $hover_darken: 20%;
               }
             }
           }
-          .custom-checkbox {
-            margin-top: 0px;
-            margin-bottom: 0px;
+          .form-check {
             label {
               cursor: pointer;
-              vertical-align: middle;
               .hits {
                 color: $filter_hits;
               }
             }
+            input {
+              cursor: pointer;
+            }
           }
         }
       }

mir-module/src/main/resources/META-INF/resources/js/epusta.js

@@ -42,7 +42,7 @@ EPuStaInline.prototype= {
   ,render() {
     switch(this.state) {
       case "error":
-        this.$element.html("<i class='fas fa-exclamation-triangle' data-toggle='tooltip' title='"+this.errortext+"'></i>");
+        this.$element.html("<i class='fas fa-exclamation-triangle' data-bs-toggle='tooltip' title='"+this.errortext+"'></i>");
         break;
       case "waiting":
         this.$element.html("<i class='fas fa-spinner fa-pulse'></i>");
@@ -124,7 +124,7 @@ EPuStaGraph.prototype= {
     switch(this.state) {
       case "error":
         var html='<div style="with:100%;text-align:center;">';
-        html+="<i class='fas fa-exclamation-triangle' data-toggle='tooltip' title='"+this.errortext+"'/>";
+        html+="<i class='fas fa-exclamation-triangle' data-bs-toggle='tooltip' title='"+this.errortext+"'/>";
         html+=this.errortext;
         html+="</div>";
         this.$element.html(html);

mir-module/src/main/resources/META-INF/resources/js/jquery.search-entity.js

@@ -575,7 +575,7 @@
 
       var $typeBtn = this.$typeBtn = $(document.createElement("button"));
       $typeBtn.addClass(options.buttonClass).addClass("dropdown-toggle");
-      $typeBtn.attr("data-toggle", "dropdown");
+      $typeBtn.attr("data-bs-toggle", "dropdown");
       $typeBtn.html("<span class=\"caret\"></span><span class=\"sr-only\">Toggle Dropdown</span>");
 
       $actions.append($typeBtn);

mir-module/src/main/resources/META-INF/resources/js/mir/base.js

@@ -369,7 +369,7 @@
     			const i18nKey = ($(currentMd5Elements.get(0)).hasClass('hidden'))
         	  		? ('component.mods.metaData.options.MD5.show')
         	  		: ('component.mods.metaData.options.MD5.hide');
-          
+
           // Get a current toggle element
           const currentToggleMD5LinkElement = $(currentDerivateIdParentElements.get(0)).find(toggleMD5LinkElement);
 
@@ -689,10 +689,10 @@
     return true;
   };
 
-  $(document).tooltip({
-    selector : "[data-toggle=tooltip]",
-    container : "body"
-  });
+  // initiate bs tooltips
+  // https://getbootstrap.com/docs/5.3/components/tooltips/#enable-tooltips
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
 
   /* =================
   /   go back to top

mir-module/src/main/resources/META-INF/resources/js/mir/xeditor-form.js

@@ -314,7 +314,7 @@ $(document).ready(function() {
     });
 
     $(document).popover({
-        selector: "[data-toggle=popover]",
+        selector: "[data-bs-toggle=popover]",
         container: "body",
         html: true,
         trigger: "focus"

mir-module/src/main/resources/xsl/editor/mir2xeditor.xsl

@@ -18,7 +18,7 @@
   </xsl:variable>
 
   <xsl:template name="mir-helpbutton">
-    <a tabindex="0" class="btn btn-secondary info-button" role="button" data-toggle="popover" data-placement="right" data-content="{@help-text}">
+    <a tabindex="0" class="btn btn-secondary info-button" role="button" data-bs-toggle="popover" data-placement="right" data-content="{@help-text}">
       <i class="fas fa-info"></i>
     </a>
   </xsl:template>

mir-module/src/main/resources/xsl/response-facets.xsl

@@ -26,9 +26,9 @@
         <xsl:value-of select="$facetProperties/properties/entry[@key=concat('MIR.Response.Facet.', $facet_name, '.Roles')]"/>
       </xsl:variable>
       <xsl:variable name="hasRole" select="string-length($rolesProperty)=0 or count(str:tokenize($rolesProperty,',')[mcrxsl:isCurrentUserInRole(.)])!=0"/>
-      
+
       <xsl:if test="$isEnabled and $hasRole and self::node()[@name=$facet_name]/int">
-        
+
         <xsl:variable name="classIdProperty">
           <xsl:value-of select="$facetProperties/properties/entry[@key=concat('MIR.Response.Facet.', $facet_name, '.ClassId')]"/>
         </xsl:variable>
@@ -174,16 +174,16 @@
       </xsl:variable>
 
       <li data-fq="{$fqResponseValue}">
-        <div class="custom-control custom-checkbox" onclick="location.href='{$queryURL}';">
-          <input type="checkbox" class="custom-control-input">
+        <div class="form-check" onclick="location.href='{$queryURL}';">
+          <input type="checkbox" class="form-check-input">
             <xsl:if test="
               /response/lst[@name='responseHeader']/lst[@name='params']/str[@name='fq' and text() = $fqResponseValue] |
               /response/lst[@name='responseHeader']/lst[@name='params']/arr[@name='fq']/str[text() = $fqResponseValue]">
               <xsl:attribute name="checked">true</xsl:attribute>
             </xsl:if>
           </input>
 
-          <label class="custom-control-label">
+          <label class="form-check-label">
             <span class="title">
               <xsl:choose>
                 <xsl:when

mir-module/src/main/resources/xsl/xeditor-mir-templates.xsl

@@ -367,15 +367,15 @@
             </xsl:if>
           </xsl:attribute>
 
-          <input class="custom-control-input" type="{$inputType}" value="{@value}" id="{$gId}">
+          <input class="form-check-input" type="{$inputType}" value="{@value}" id="{$gId}">
             <xsl:if test="@disabled = 'true'">
               <xsl:attribute name="disabled">
               <xsl:text>disabled</xsl:text>
             </xsl:attribute>
             </xsl:if>
             <xsl:apply-templates select="." mode="inputOptions" />
           </input>
-          <label class="custom-control-label" for="{$gId}">
+          <label class="form-check-label" for="{$gId}">
             <xsl:if test="string-length(@i18n) &gt; 0">
               <xed:output i18n="{@i18n}" />
             </xsl:if>