Outsource initialization of Bootstrap popovers (Fix "New comment" but…

…ton) (#534) * Fix bug which causes the "new comment" button on the show_comment page to have no effect, if pressed multiple times. The reason for this is that the variables popoverTriggerList and popoverList (in the file that is being changed for this commit) are declared as constants. Clicking the button a second time causes the script to run again such that the variables will be defined a second time. * Decaffeinate modal fix & outsource popover handling * Remove popover handling from new comment handler * Rename bootstrap popover initialization function Also removed unnecessary console log * Outsource bootstrap popover initialization * Add initialization of popovers back to new comments * Remove superfluous coffeescript comment * Add missing popover initializations * Fix unwanted search/replace --------- Co-authored-by: Splines <[email protected]>
MaMpf-HD · Aug 28, 2023 · 7daf91a · 7daf91a
1 parent 5a2ba2f
commit 7daf91a
Show file tree

Hide file tree

Showing 37 changed files with 71 additions and 81 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -24,6 +24,7 @@
 //= require announcements
 //= require answers
 //= require bootstrap_modal_turbolinks_fix
+//= require bootstrap_popovers
 //= require chapters
 //= require clickers
 //= require courses

diff --git a/app/assets/javascripts/bootstrap_modal_turbolinks_fix.coffee b/app/assets/javascripts/bootstrap_modal_turbolinks_fix.coffee
diff --git a/app/assets/javascripts/bootstrap_modal_turbolinks_fix.js b/app/assets/javascripts/bootstrap_modal_turbolinks_fix.js
@@ -0,0 +1,16 @@
+$(document).on('turbolinks:load', function () {
+	// show all active modals
+	$('.activeModal').modal('show');
+	// remove active status (this needs to be reestablished before caching)
+	$('.activeModal').removeClass('activeModal');
+});
+
+$(document).on('turbolinks:before-cache', function () {
+	// if some modal is open
+	if ($('body').hasClass('modal-open')) {
+		$('.modal.show').addClass('activeModal');
+		$('.modal.show').modal('hide');
+		// remove the greyed out background
+		$('.modal-backdrop').remove();
+	}
+});
diff --git a/app/assets/javascripts/bootstrap_popovers.js b/app/assets/javascripts/bootstrap_popovers.js
@@ -0,0 +1,18 @@
+$(document).on('turbolinks:load', function () {
+    initBootstrapPopovers();
+});
+
+/**
+ * Initializes all Bootstrap popovers on the page.
+ * 
+ * This function might be used for the first initialization of popovers as well
+ * as for reinitialization on page changes.
+ *
+ * See: https://getbootstrap.com/docs/5.3/components/popovers/#enable-popovers
+ */
+function initBootstrapPopovers() {
+    const popoverHtmlElements = document.querySelectorAll('[data-bs-toggle="popover"]');
+    for (const element of popoverHtmlElements) {
+        new bootstrap.Popover(element);
+    }
+}
diff --git a/app/assets/javascripts/lectures.coffee b/app/assets/javascripts/lectures.coffee
@@ -10,10 +10,7 @@ disableExceptOrganizational = ->
   return
 
 $(document).on 'turbolinks:load', ->
-
-  # activate all popovers
-  $('[data-bs-toggle="popover"]').popover()
-
+  initBootstrapPopovers()
   # if any input is given to the lecture form (for people in lecture),
   # disable other input
   $('#lecture-form :input').on 'change', ->

diff --git a/app/assets/javascripts/upload.coffee b/app/assets/javascripts/upload.coffee
@@ -339,8 +339,7 @@ directUpload provides an interface to upload (multiple) files to an endpoint
   hiddenInputElement
   single
   ) ->
-    # update helpdesk
-    $('[data-bs-toggle="popover"]').popover()
+    initBootstrapPopovers()
     hiddenInput = document.getElementById(hiddenInputElement)
     hiddenInput2 = document.getElementById('upload-userManuscript-hidden2')
     fileInput =document.getElementById(fileInputElement)
@@ -439,8 +438,7 @@ directUpload provides an interface to upload (multiple) files to an endpoint
 ###
 @result = undefined
 @userManuscriptUpload = (fileInput) ->
-  # update helpdesk
-  $('[data-bs-toggle="popover"]').popover()
+  initBootstrapPopovers()
   hiddenInput = document.getElementById('upload-userManuscript-hidden')
   hiddenInput2 = document.getElementById('upload-userManuscript-hidden2')
   fileInput.style.display = 'none'

diff --git a/app/views/announcements/new.coffee b/app/views/announcements/new.coffee
@@ -3,7 +3,5 @@ $('#new-announcement-modal-content').empty()
   .append('<%= j render partial: "announcements/form",
                         locals: { announcement: @announcement,
                                   lecture: @lecture } %>')
-
-# activate popovers and show modal
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 $('#newAnnouncementModal').modal('show')
diff --git a/app/views/chapters/_edit.coffee b/app/views/chapters/_edit.coffee
@@ -8,5 +8,5 @@ $('#chapter-modal-content').empty()
 $('#chapterModalLabel').empty()
   .append('<%= t("admin.chapter.edit",
                  chapter: @chapter.to_label) %>')
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 $('#chapterModal').modal('show')
diff --git a/app/views/chapters/new.coffee b/app/views/chapters/new.coffee
@@ -4,4 +4,4 @@ $('#chapter-modal-content').empty()
                         locals: { lecture: @lecture,
                                   chapter: @chapter} %>').show()
 $('#chapterModal').modal('show')
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
diff --git a/app/views/clickers/new.coffee b/app/views/clickers/new.coffee
@@ -3,7 +3,7 @@
 $('#new-clicker-area').empty()
   .append('<%= j render partial: "clickers/new",
                         locals: { clicker: @clicker } %>').show()
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 
 # hide all other buttons on admin index page
 $('.admin-index-button').hide()

diff --git a/app/views/commontator/comments/new.js.erb b/app/views/commontator/comments/new.js.erb
@@ -8,13 +8,9 @@ var commontatorForm = $("#<%= id %>").html("<%= escape_javascript(
 ) %>").hide().fadeIn();
 $('html, body').animate({ scrollTop: commontatorForm.offset().top - window.innerHeight/2 }, 'fast');
 
-<%# Initialize preview comment helpdesk popover %>
-<%# See https://getbootstrap.com/docs/5.3/components/popovers/#enable-popovers %>
-const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
-const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
+initBootstrapPopovers()
 
 $("#<%= id %>-link").hide();
-
 $('#<%= id %>-body').focus();
 
 <%= javascript_proc %>
diff --git a/app/views/courses/search.coffee b/app/views/courses/search.coffee
@@ -3,4 +3,4 @@ searchResults = document.getElementById('course-search-results')
 searchResults.innerHTML = '<%= j render partial: "courses/search/results",
                                  locals: { courses: @courses,
                                            total: @total } %>'
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
diff --git a/app/views/items/display.coffee b/app/views/items/display.coffee
@@ -48,5 +48,4 @@ $('#link_reappearance_link').show()
 $('#link_details').show()
 <% end %>
 
-# activate popovers
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
diff --git a/app/views/items/edit.coffee b/app/views/items/edit.coffee
@@ -18,7 +18,7 @@ $('#item_number_field').hide()
 # activate selectize and popovers
 $('.selectize').each ->
   new TomSelect("#"+this.id,{ plugins: ['remove_button'] })
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 
 # workaround for a selectize bug whwere the width of
 # the text area for the input prompt is miscalculated

diff --git a/app/views/lectures/edit_structures.coffee b/app/views/lectures/edit_structures.coffee
@@ -30,4 +30,4 @@ renderMathInElement structuresBody,
   ]
   throwOnError: false
 
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
diff --git a/app/views/lectures/new.coffee b/app/views/lectures/new.coffee
@@ -6,7 +6,7 @@ $('#new-lecture-area').empty()
                                   from: @from,
                                   modal: @from == "course" } %>').show()
 fillOptionsByAjax($('#new-lecture-area .selectize'))
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 
 # hide all other buttons on admin index page
 $('.admin-index-button').hide()

diff --git a/app/views/lectures/search.coffee b/app/views/lectures/search.coffee
@@ -3,4 +3,4 @@ searchResults = document.getElementById('lecture-search-results')
 searchResults.innerHTML = '<%= j render partial: "lectures/search/results",
                                  locals: { lectures: @lectures,
                                            total: @total } %>'
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
diff --git a/app/views/lessons/new.coffee b/app/views/lessons/new.coffee
@@ -4,8 +4,5 @@ $('#lesson-modal-content').empty()
                         locals: { lesson: @lesson } %>').show()
 $('#lesson-modal-content .selectize').each ->
   new TomSelect("#"+this.id,{ plugins: ['remove_button'] })
-
-# activate popovers
-$('[data-bs-toggle="popover"]').popover()
-
-$('#lessonModal').modal('show')
+$('#lessonModal').modal('show')
+initBootstrapPopovers()
diff --git a/app/views/media/add_item.coffee b/app/views/media/add_item.coffee
@@ -7,6 +7,6 @@ $('#action-container').empty()
 # activate selectize and popovers
 $('.selectize').each ->
   new TomSelect("#"+this.id,{ plugins: ['remove_button'] })
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 # bugfix for selectize (which sometimes renders the prompt with a zero width)
 $('input[id$="-selectized"]').css('width', '100%')
diff --git a/app/views/media/add_reference.coffee b/app/views/media/add_reference.coffee
@@ -9,6 +9,6 @@ $('#action-container').empty()
 # activate selectize and popovers
 $('.selectize').each ->
   new TomSelect("#"+this.id,{ plugins: ['remove_button'] })
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 # bugfix for selectize (which sometimes renders the prompt with a zero width)
 $('input[id$="-selectized"]').css('width', '100%')
diff --git a/app/views/media/get_statistics.coffee b/app/views/media/get_statistics.coffee
@@ -12,9 +12,7 @@ $('#calls-stats').empty()
                                   question_count: @question_count,
                                   local_success: @local_success } %>')
   .show().removeAttr('style')
-
-# activate popovers
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 
 <% if @medium.sort == 'Quiz' %>
 

diff --git a/app/views/media/new.coffee b/app/views/media/new.coffee
@@ -3,5 +3,4 @@ $('#medium-modal-content').empty()
   .append('<%= j render partial: "media/new",
                         locals: { medium: @medium } %>').show()
 $('#mediumModal').modal('show')
- # activate popovers
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
diff --git a/app/views/quiz_certificates/claim.coffee b/app/views/quiz_certificates/claim.coffee
@@ -1,4 +1,4 @@
 $('#quizCertificateArea').empty()
   .append('<%= j render partial: "quiz_certificates/claim",
                         locals: { certificate: @certificate } %>')
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
diff --git a/app/views/quizzes/proceed.coffee b/app/views/quizzes/proceed.coffee
@@ -24,7 +24,7 @@ changeBackground = ->
 
 renderFinale = (finale) ->
   $('#<%= quiz_id%>').append finale
-  $('[data-bs-toggle="popover"]').popover()
+  initBootstrapPopovers()
   $('#finale').delay(1000).slideDown 'slow'
   $('html, body').delay(500)
     .animate { scrollTop: document.body.scrollHeight }, 2000
@@ -79,7 +79,7 @@ displayNext = ->
   <% else %>
   renderNext('<%= j render partial: "quizzes/quiz_round",
                            locals: { hidden: true } %>')
-  $('[data-bs-toggle="popover"]').popover()
+  initBootstrapPopovers()
   <% end %>
   return
 

diff --git a/app/views/referrals/edit.coffee b/app/views/referrals/edit.coffee
@@ -9,4 +9,4 @@ $('#action-container').empty()
 # activate selectize and popovers
 $('.selectize').each ->
   new TomSelect("#"+this.id,{ plugins: ['remove_button'] })
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
diff --git a/app/views/sections/new.coffee b/app/views/sections/new.coffee
@@ -5,5 +5,4 @@ $('#section-modal-content').empty()
                                   chapter: @chapter } %>').show()
 
 $('#sectionModal').modal('show')
- # activate popovers
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
diff --git a/app/views/submissions/cancel_edit.coffee b/app/views/submissions/cancel_edit.coffee
@@ -6,5 +6,4 @@ $('.submissionFooter .btn').prop('disabled', false)
   .removeClass('btn-outline-secondary')
 $('.submissionFooter .btn').each ->
   $(this).addClass($(this).data('color'))
-$('[data-bs-toggle="popover"]').popover()
-
+initBootstrapPopovers()
diff --git a/app/views/submissions/cancel_new.coffee b/app/views/submissions/cancel_new.coffee
@@ -6,4 +6,4 @@ $('.submissionFooter .btn').prop('disabled', false)
   .removeClass('btn-outline-secondary')
 $('.submissionFooter .btn').each ->
   $(this).addClass($(this).data('color'))
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
diff --git a/app/views/submissions/create.coffee b/app/views/submissions/create.coffee
@@ -22,7 +22,7 @@ $('.submissionFooter .btn').prop('disabled', false)
   .removeClass('btn-outline-secondary')
 $('.submissionFooter .btn').each ->
   $(this).addClass($(this).data('color'))
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 <% end %>
 <% else %>
 alert('<%= t("submission.too_late_no_saving") %>')

diff --git a/app/views/submissions/destroy.coffee b/app/views/submissions/destroy.coffee
@@ -3,7 +3,7 @@ $('.submissionArea[data-id="<%= @assignment.id %>"]').empty()
   .append('<%= j render partial: "submissions/card",
                         locals: { assignment: @assignment,
                                   submission: nil } %>')
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 <% else %>
 alert('<%= t("submission.too_late_no_destroying") %>')
 <% end %>
diff --git a/app/views/submissions/join.coffee b/app/views/submissions/join.coffee
@@ -7,7 +7,7 @@ $('.submissionFooter .btn').prop('disabled', false)
   .removeClass('btn-outline-secondary')
 $('.submissionFooter .btn').each ->
   $(this).addClass($(this).data('color'))
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 <% else %>
 $('#join_code').addClass('is-invalid')
 $('#submission-code-error').empty().append('<%= @error %>').show()

diff --git a/app/views/submissions/leave.coffee b/app/views/submissions/leave.coffee
@@ -3,7 +3,7 @@ $('.submissionArea[data-id="<%= @assignment.id %>"]').empty()
   .append('<%= j render partial: "submissions/card",
                         locals: { assignment: @assignment,
                                   submission: nil } %>')
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 <% else %>
 alert('<%= t("submission.too_late_no_saving") %>')
 <% end %>
diff --git a/app/views/submissions/update.coffee b/app/views/submissions/update.coffee
@@ -19,7 +19,7 @@ $('.submissionFooter .btn').prop('disabled', false)
   .removeClass('btn-outline-secondary')
 $('.submissionFooter .btn').each ->
   $(this).addClass($(this).data('color'))
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 <% end %>
 <% else %>
 alert('<%= t("submission.too_late_no_saving") %>')

diff --git a/app/views/tags/modal.coffee b/app/views/tags/modal.coffee
@@ -7,7 +7,7 @@ $('#new-tag-modal-content').empty()
                                   from: @from }%>')
 
 # activate popovers and selectize
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 fillOptionsByAjax($('#new-tag-modal-content .selectize'))
 
 # store from where the modal was called

diff --git a/app/views/talks/new.coffee b/app/views/talks/new.coffee
@@ -9,4 +9,4 @@ trixElement = document.querySelector('#talk-details-trix')
 trixTalkPreview(trixElement)
 
 $('#talkModal').modal('show')
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
diff --git a/app/views/tutorials/bulk_upload.coffee b/app/views/tutorials/bulk_upload.coffee
@@ -11,8 +11,7 @@ $('#tutorial-table').empty()
 	.append('<%= j render partial: "tutorials/table",
 												locals: { assignment: @assignment,
 																	tutorial: @tutorial,
-																	stack: @stack } %>')
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()																	stack: @stack } %>')
 <% end %>
 <% else %>
 location.reload(true)

diff --git a/app/views/tutorials/validate_certificate.coffee b/app/views/tutorials/validate_certificate.coffee
@@ -1,4 +1,4 @@
 $('#validateCertificate-modal-content').empty()
   .append('<%= j render partial: "quiz_certificates/form" %>')
-$('[data-bs-toggle="popover"]').popover()
+initBootstrapPopovers()
 $('#validateCertificateModal').modal('show')