Fix data attributes for functionality in Bootstrap 5

app/helpers/bootstrap_helper.rb

@@ -56,7 +56,7 @@ module BootstrapHelper
   end
 
   def tooltip(body, tooltip_content, placement = "bottom")
-    content_tag(:span, body, {title: tooltip_content, "data-toggle" => "tooltip", "data-placement" => placement} )
+    content_tag(:span, body, {title: tooltip_content, "data-bs-toggle" => "tooltip", "data-bs-placement" => placement} )
   end
 
   def time_tooltip(subject, placement = "bottom")

app/views/actions/_comment.html.haml

@@ -1,5 +1,5 @@
 .dropdown-menu.dropdown-menu-right{ role: :menu }
-  %a.dropdown-item{ href: "#", data: { target: "#modal-view-comment#{comment.id}-smiles", toggle: :modal } }
+  %a.dropdown-item{ href: "#", data: { bs_target: "#modal-view-comment#{comment.id}-smiles", bs_toggle: :modal } }
     %i.fa.fa-fw.fa-smile-o
     = t(".view_smiles")
   - if privileged?(comment.user) || privileged?(answer.user)

app/views/answerbox/_actions.html.haml

@@ -6,11 +6,11 @@
     %i.fa.fa-fw.fa-comments
     %span{ id: "ab-comment-count-#{a.id}" }= a.comment_count
 .btn-group
-  %button.btn.btn-link.answerbox__action{ data: { toggle: :dropdown }, aria: { expanded: false } }
+  %button.btn.btn-link.answerbox__action{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
     %i.fa.fa-fw.fa-share-alt{ title: t(".share.title") }
   = render "actions/share", answer: a
 - if user_signed_in?
   .btn-group
-    %button.btn.btn-default.btn-sm.dropdown-toggle{ data: { toggle: :dropdown }, aria: { expanded: false } }
+    %button.btn.btn-default.btn-sm.dropdown-toggle{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
       %span.caret
     = render "actions/answer", answer: a

app/views/answerbox/_comments.html.haml

@@ -12,7 +12,7 @@
           .media-body
             %h6.media-heading.comment__user
               = user_screen_name comment.user
-              %span.text-muted{ title: comment.created_at, data: { toggle: :tooltip, placement: :right } }
+              %span.text-muted{ title: comment.created_at, data: { bs_toggle: :tooltip, bs_placement: :right } }
                 = t("time.distance_ago", time: time_ago_in_words(comment.created_at))
             .comment__content
               = markdown comment.content
@@ -21,7 +21,7 @@
               %i.fa.fa-fw.fa-smile-o
               %span{ id: "ab-comment-smile-count-#{comment.id}" }= comment.smile_count
             .btn-group
-              %button.btn.btn-link.btn-sm.dropdown-toggle{ data: { toggle: :dropdown }, aria: { expanded: false } }
+              %button.btn.btn-link.btn-sm.dropdown-toggle{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
                 %span.caret
               = render "actions/comment", comment: comment, answer: a
 - if user_signed_in?

app/views/answerbox/_header.html.haml

@@ -7,7 +7,7 @@
       - if user_signed_in?
         .pull-right
           .btn-group
-            %button.btn.btn-link.btn-sm.dropdown-toggle{ data: { toggle: :dropdown }, aria: { expanded: false } }
+            %button.btn.btn-link.btn-sm.dropdown-toggle{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
               %span.caret
             = render "actions/question", question: a.question
       %h6.text-muted.media-heading.answerbox__question-user

app/views/answerbox/_smiles.html.haml

@@ -8,5 +8,5 @@
       - a.smiles.all.each do |smile|
         %a{ href: user_path(smile.user),
           title: user_screen_name(smile.user, url: false),
-          data: { toggle: :tooltip, placement: :top, smile_id: smile.id } }
+          data: { bs_toggle: :tooltip, bs_placement: :top, smile_id: smile.id } }
           %img.avatar-xs{ src: smile.user.profile_picture.url(:small), loading: :lazy }

app/views/discover/index.html.haml

@@ -12,11 +12,11 @@
       %div{ role: :tabpanel }
         %ul.nav.nav-tabs{ role: :tablist }
           %li.nav-item{ role: "presentation" }
-            %a.nav-link.active{ href: "#answers", role: :tab, aria: { controls: "answers" }, data: { toggle: :tab } }= t(".content.tab.answers")
+            %a.nav-link.active{ href: "#answers", role: :tab, aria: { controls: "answers" }, data: { bs_toggle: :tab } }= t(".content.tab.answers")
           %li.nav-item{ role: "presentation" }
-            %a.nav-link{ href: "#questions", role: :tab, aria: { controls: "questions" }, data: { toggle: :tab } }= t(".content.tab.questions")
+            %a.nav-link{ href: "#questions", role: :tab, aria: { controls: "questions" }, data: { bs_toggle: :tab } }= t(".content.tab.questions")
           %li.nav-item{ role: "presentation" }
-            %a.nav-link{ href: "#comments", role: :tab, aria: { controls: "comments" }, data: { toggle: :tab } }= t(".content.tab.comments")
+            %a.nav-link{ href: "#comments", role: :tab, aria: { controls: "comments" }, data: { bs_toggle: :tab } }= t(".content.tab.comments")
         .tab-content.mt-3
           = render "discover/tab/answers", answers: @popular_answers
           = render "discover/tab/questions", questions: @popular_questions
@@ -27,11 +27,11 @@
       %div{ role: :tabpanel }
         %ul.nav.nav-tabs{ role: :tablist }
           %li.nav-item{ role: "presentation" }
-            %a.nav-link.active{ href: "#new", role: :tab, aria: { controls: "new" }, data: { toggle: :tab } }= t(".people.tab.new")
+            %a.nav-link.active{ href: "#new", role: :tab, aria: { controls: "new" }, data: { bs_toggle: :tab } }= t(".people.tab.new")
           %li.nav-item{ role: "presentation" }
-            %a.nav-link{ href: "#asked", role: :tab, aria: { controls: "asked" }, data: { toggle: :tab } }= t(".people.tab.questions")
+            %a.nav-link{ href: "#asked", role: :tab, aria: { controls: "asked" }, data: { bs_toggle: :tab } }= t(".people.tab.questions")
           %li.nav-item{ role: "presentation" }
-            %a.nav-link{ href: "#answered", role: :tab, aria: { controls: "answered" }, data: { toggle: :tab } }= t(".people.tab.answers")
+            %a.nav-link{ href: "#answered", role: :tab, aria: { controls: "answered" }, data: { bs_toggle: :tab } }= t(".people.tab.answers")
         .tab-content.mt-3
           = render "discover/tab/new", new: @new_users
           = render "discover/tab/asked", asked: @users_with_most_questions

app/views/inbox/_actions.html.haml

@@ -8,7 +8,7 @@
         = button_to inbox_create_path, class: "btn btn-info me-auto" do
           = t(".questions.button")
         .button-group.ms-1
-          %button.btn.btn-default{ title: t(".share.heading"), data: { toggle: :dropdown }, aria: { expanded: false } }
+          %button.btn.btn-default{ title: t(".share.heading"), data: { bs_toggle: :dropdown }, aria: { expanded: false } }
             %i.fa.fa-fw.fa-share-alt
             %span.visually-hidden= t(".share.heading")
           .dropdown-menu.dropdown-menu-right{ role: :menu }

app/views/inbox/_entry.html.haml

@@ -17,7 +17,7 @@
       - if i.question.user_id != current_user.id || current_user.has_cached_role?(:administrator)
         .pull-right
           .btn-group
-            %button.btn.btn-default.btn-sm.dropdown-toggle{ data: { toggle: :dropdown }, aria: { expanded: false } }
+            %button.btn.btn-default.btn-sm.dropdown-toggle{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
               %span.caret
             = render "actions/question", question: i.question
   - if current_user == i.user

app/views/modal/_ban.html.haml

@@ -14,10 +14,10 @@
           %div{ role: :tabpanel }
             %ul.nav.nav-tabs.mt-1{ role: :tablist }
               %li.nav-item{ role: 'presentation' }
-                %a.nav-link.active{ href: '#ban-controls-tab', aria: { controls: 'ban-controls-tab' }, data: { toggle: :tab }, role: :tab }
+                %a.nav-link.active{ href: '#ban-controls-tab', aria: { controls: 'ban-controls-tab' }, data: { bs_toggle: :tab }, role: :tab }
                   = t '.tabs.controls'
               %li.nav-item{ role: 'presentation' }
-                %a.nav-link{ href: '#ban-history', aria: { controls: 'ban-history' }, data: { toggle: :tab }, role: :tab }
+                %a.nav-link{ href: '#ban-history', aria: { controls: 'ban-history' }, data: { bs_toggle: :tab }, role: :tab }
                   = t '.tabs.history'
           .tab-content
             .tab-pane.active{ role: :tabpanel, id: 'ban-controls-tab' }

app/views/modal/_list.html.haml

@@ -9,10 +9,10 @@
       %div{ role: :tabpanel }
         %ul.nav.nav-tabs.mt-1{ role: :tablist }
           %li.nav-item{ role: "presentation" }
-            %a.nav-link.active{ href: "#lists-list", aria: { controls: "lists-list" }, data: { toggle: :tab }, role: :tab }
+            %a.nav-link.active{ href: "#lists-list", aria: { controls: "lists-list" }, data: { bs_toggle: :tab }, role: :tab }
               = t(".tab.list.title")
           %li.nav-item{ role: "presentation" }
-            %a.nav-link{ href: "#create", aria: { controls: "create" }, data: { toggle: :tab }, role: :tab }
+            %a.nav-link{ href: "#create", aria: { controls: "create" }, data: { bs_toggle: :tab }, role: :tab }
               = t(".tab.create.title")
 
         .tab-content

app/views/navigation/_desktop.html.haml

@@ -12,13 +12,13 @@
         = nav_entry t("navigation.discover"), discover_path, icon: 'compass'
     %ul.nav.navbar-nav
       - if @user.present? && @user != current_user
-        %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t(".list") }
-          %a.nav-link{ href: '#', data: { target: '#modal-list-memberships', toggle: :modal } }
+        %li.nav-item.d-none.d-sm-block{ data: { bs_toggle: 'tooltip', bs_placement: 'bottom' }, title: t(".list") }
+          %a.nav-link{ href: '#', data: { bs_target: '#modal-list-memberships', bs_toggle: :modal } }
             %i.fa.fa-list.hidden-xs
             %span.d-none.d-sm-inline.d-md-none= t(".list")
       = nav_entry t("navigation.notifications"), notifications_path, badge: notification_count, class: 'd-block d-sm-none'
       %li.nav-item.dropdown.d-none.d-sm-block
-        %a.nav-link.dropdown-toggle{ href: '#', data: { toggle: :dropdown } }
+        %a.nav-link.dropdown-toggle{ href: '#', data: { bs_toggle: :dropdown } }
           - if notification_count.nil?
             %i.fa.fa-bell-o
           - else
@@ -26,11 +26,11 @@
           %span.visually-hidden= t("navigation.notifications")
           %span.badge= notification_count
         = render 'navigation/dropdown/notifications', notifications: notifications, size: "desktop"
-      %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('.ask_question') }
-        %a.nav-link{ href: '#', name: 'toggle-all-ask', data: { target: '#modal-ask-followers', toggle: :modal } }
+      %li.nav-item.d-none.d-sm-block{ data: { bs_toggle: 'tooltip', bs_placement: 'bottom' }, title: t('.ask_question') }
+        %a.nav-link{ href: '#', name: 'toggle-all-ask', data: { bs_target: '#modal-ask-followers', bs_toggle: :modal } }
           %i.fa.fa-pencil-square-o
       %li.nav-item.dropdown.profile--image-dropdown
-        %a.nav-link.dropdown-toggle.p-sm-0{ href: "#", data: { toggle: :dropdown } }
+        %a.nav-link.dropdown-toggle.p-sm-0{ href: "#", data: { bs_toggle: :dropdown } }
           %img.avatar-md.d-none.d-sm-inline{ src: current_user.profile_picture.url(:small) }
           %span.d-inline.d-sm-none
             = current_user.screen_name

app/views/navigation/_guest.html.haml

@@ -5,7 +5,7 @@
         = render inline: Rails.application.config.justask_svg_logo
       - else
         = APP_CONFIG["site_name"]
-    %button.navbar-toggler{ data: { target: '#j2-main-navbar-collapse', toggle: :collapse }, type: :button }
+    %button.navbar-toggler{ data: { bs_target: '#j2-main-navbar-collapse', bs_toggle: :collapse }, type: :button }
       %span.visually-hidden= t("navigation.toggle")
       %span.navbar-toggler-icon
     .collapse.navbar-collapse#j2-main-navbar-collapse

app/views/navigation/_main.html.haml

@@ -3,5 +3,5 @@
 = render 'navigation/mobile', notifications: notifications
 
 = render 'modal/ask'
-%button.btn.btn-primary.btn-fab.d-block.d-lg-none{ data: { target: '#modal-ask-followers', toggle: :modal }, type: 'button' }
+%button.btn.btn-primary.btn-fab.d-block.d-lg-none{ data: { bs_target: '#modal-ask-followers', bs_toggle: :modal }, type: 'button' }
   %i.fa.fa-pencil-square-o

app/views/navigation/_mobile.html.haml

@@ -11,10 +11,10 @@
       - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
         = nav_entry t("navigation.discover"), discover_path, icon: 'compass', icon_only: true
       %li.nav-item
-        %a.nav-link{ href: '#', data: { toggle: 'dropdown', target: '#rs-mobile-nav-notifications' }, aria: { controls: 'rs-mobile-nav-notifications', expanded: 'false' } }
+        %a.nav-link{ href: '#', data: { bs_toggle: 'dropdown', bs_target: '#rs-mobile-nav-notifications' }, aria: { controls: 'rs-mobile-nav-notifications', expanded: 'false' } }
           %i.fa{ class: "fa-#{notifications_icon}" }
           %span.visually-hidden= t("navigation.notifications")
           %span.badge.badge-pill.badge-primary= notification_count
       %li.nav-item.profile--image-dropdown
-        %a.nav-link{ href: '#', data: { toggle: 'dropdown', target: '#rs-mobile-nav-profile' }, aria: { controls: 'rs-mobile-nav-profile', expanded: 'false' } }
+        %a.nav-link{ href: '#', data: { bs_toggle: 'dropdown', bs_target: '#rs-mobile-nav-profile' }, aria: { controls: 'rs-mobile-nav-profile', expanded: 'false' } }
           %img.avatar-md.d-inline{ src: current_user.profile_picture.url(:small) }

app/views/question/_question.html.haml

@@ -9,7 +9,7 @@
           - if user_signed_in?
             .pull-right
               .btn-group
-                %button.btn.btn-link.btn-sm.dropdown-toggle{ data: { toggle: :dropdown }, aria: { expanded: false } }
+                %button.btn.btn-link.btn-sm.dropdown-toggle{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
                   %span.caret
                 - unless hidden
                   = render "actions/question", question: question

app/views/settings/_account.html.haml

@@ -13,7 +13,7 @@
       = f.password_field :password, autocomplete: "new-password", help: t(".help.password")
       = f.password_field :password_confirmation, autocomplete: "new-password"
 
-      %button.btn.btn-primary{ data: { target: "#modal-passwd", toggle: :modal, type: :button } }
+      %button.btn.btn-primary{ data: { bs_target: "#modal-passwd", bs_toggle: :modal, type: :button } }
         = t("voc.save")
 
       %hr/

app/views/shared/_question.html.haml

@@ -10,7 +10,7 @@
         - if user_signed_in?
           .pull-right
             .btn-group
-              %button.btn.btn-link.btn-sm.dropdown-toggle{ data: { toggle: :dropdown }, aria: { expanded: false } }
+              %button.btn.btn-link.btn-sm.dropdown-toggle{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
                 %span.caret
               = render "actions/question", question: q
         %h6.media-heading.text-muted.answerbox__question-user

app/views/tabs/_feed.html.haml

@@ -4,7 +4,7 @@
     - if APP_CONFIG.dig(:features, :public, :enabled)
       = list_group_item t(".public"), public_timeline_path
     %a.list-group-item.list-group-item-action.dropdown.dropdown-toggle{ class: list ? "active" : "",
-      type: :button, data: { toggle: :dropdown }, aria: { haspopup: true, expanded: false } }
+      type: :button, data: { bs_toggle: :dropdown }, aria: { haspopup: true, expanded: false } }
       - if list
         = list.display_name
       - else
@@ -17,7 +17,7 @@
         - else
           %p.px-4.pb-2
             - list.members.each do |member|
-              %a{ href: user_path(member.user), title: member.user.screen_name, data: { toggle: :tooltip, placement: :top } }
+              %a{ href: user_path(member.user), title: member.user.screen_name, data: { bs_toggle: :tooltip, bs_placement: :top } }
                 %img.avatar-xs{ src: member.user.profile_picture.url(:small), loading: :lazy }
       - if !list && lists.empty?
         .p-3= t(".lists.notice_html")

app/views/user/_actions.html.haml

@@ -10,11 +10,11 @@
       %button.btn.btn-primary.btn-block{ type: :button, name: 'user-action', data: { action: :follow, type: type, target: user.screen_name } }
         = t("voc.follow")
     .btn-group.btn-block
-      %button.btn.btn-light.btn-block.btn-sm.dropdown-toggle{ data: { toggle: :dropdown }, aria: { expanded: false } }
+      %button.btn.btn-light.btn-block.btn-sm.dropdown-toggle{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
         = t(".title")
         %span.caret
       .dropdown-menu
-        %a.dropdown-item.d-block.d-sm-none{ href: '#', data: { target: '#modal-list-memberships', toggle: :modal } }
+        %a.dropdown-item.d-block.d-sm-none{ href: '#', data: { bs_target: '#modal-list-memberships', bs_toggle: :modal } }
           %i.fa.fa-list.fa-fw
           = t(".list")
         - if current_user.blocking?(user)
@@ -37,11 +37,11 @@
           %i.fa.fa-exclamation-triangle.fa-fw
           = t("voc.report")
         - if current_user.mod?
-          %a.dropdown-item{ href: '#', data: { target: '#modal-privileges', toggle: :modal } }
+          %a.dropdown-item{ href: '#', data: { bs_target: '#modal-privileges', bs_toggle: :modal } }
             %i.fa.fa-wrench.fa-fw
             = raw t(".privilege", user: user.screen_name)
           - unless user.has_cached_role?(:administrator)
-            %a.dropdown-item{ href: '#', data: { target: '#modal-ban', toggle: :modal } }
+            %a.dropdown-item{ href: '#', data: { bs_target: '#modal-ban', bs_toggle: :modal } }
               %i.fa.fa-ban.fa-fw
               = t(".ban")
         - if current_user.mod? && user != current_user