Bootstrap5

Gemfile

@@ -8,7 +8,7 @@ gem "rails", "~> 7.0.4.3"
 # Use dalli for caching to memcached in production
 gem "dalli", ">= 2.7"
 # Ruby wrapper for UglifyJS JavaScript compressor
-gem "uglifier"
+gem "terser"
 # Use nulldb adapter for assets precompilation in production
 gem "activerecord-nulldb-adapter"
 # Use sqlite3 as the database for Active Record
@@ -60,7 +60,7 @@ gem "cancancan"
 gem "jquery-rails"
 gem "jquery-ui-rails"
 gem "js-routes", '1.4.9'
-gem "bootstrap", "~>4"
+gem "bootstrap", "~>5"
 gem "bootstrap_form"
 gem "devise-bootstrap-views"
 gem "fuzzy-string-match"

Gemfile.lock

@@ -152,9 +152,9 @@ GEM
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
-    bootstrap (4.6.2)
+    bootstrap (5.2.1)
       autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.16.1, < 2)
+      popper_js (>= 2.11.6, < 3)
       sassc-rails (>= 2.0.0)
     bootstrap_form (5.1.0)
       actionpack (>= 5.2)
@@ -389,7 +389,7 @@ GEM
       ttfunk
     pg (1.4.6)
     pgreset (0.3)
-    popper_js (1.16.1)
+    popper_js (2.11.6)
     pr_geohash (1.0.0)
     premailer (1.21.0)
       addressable
@@ -591,6 +591,8 @@ GEM
     sync (0.5.0)
     term-ansicolor (1.7.1)
       tins (~> 1.0)
+    terser (1.1.14)
+      execjs (>= 0.3.0, < 3)
     thor (1.2.1)
     thredded (1.1.0)
       active_record_union (>= 1.3.0)
@@ -626,8 +628,6 @@ GEM
     turbolinks-source (5.2.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    uglifier (4.2.0)
-      execjs (>= 0.3.0, < 3)
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.8.2)
@@ -668,7 +668,7 @@ DEPENDENCIES
   acts_as_votable
   barby
   bootsnap (>= 1.4.2)
-  bootstrap (~> 4)
+  bootstrap (~> 5)
   bootstrap_form
   byebug
   cancancan
@@ -739,11 +739,11 @@ DEPENDENCIES
   streamio-ffmpeg
   sunspot_rails!
   sunspot_solr
-  thredded
+  terser
+  thredded!
   thredded-markdown_katex!
   trix-rails
   turbolinks (~> 5)
-  uglifier
   web-console (>= 3.3.0)
   webdrivers
   webpacker (~> 5.x)

app/assets/javascripts/_selectize_turbolinks_fix.js

@@ -84,28 +84,6 @@ this.fillOptionsByAjax = function($selectizedSelection) {
         maxOptions: null,
         placeholder: placeholder,
         closeAfterSelect: true,
-        dropdownParent: parent,
-        onInitialize:function(){
-          this.popper = Popper.createPopper(this.control,this.dropdown, {
-          placement: "bottom-start",
-          modifiers: [
-            {
-              name: "sameWidth",
-              enabled: true,
-              fn: ({ state }) => {
-                state.styles.popper.width = `${state.rects.reference.width}px`;
-            },
-            phase: "beforeWrite",
-            requires: ["computeStyles"],
-            }
-          ]
-
-        });
-
-        },
-        onDropdownOpen:function(){
-          this.popper.update();
-        },
         load: function(query, callback) {
           var url;
           if (send_data || !loaded) {

app/assets/javascripts/bootstrap_modal_turbolinks_fix.coffee

@@ -7,6 +7,11 @@ $(document).on 'turbolinks:load', ->
 	$('.activeModal').modal('show')
 	# remove active status (this needs to be reestablished before caching)
 	$('.activeModal').removeClass('activeModal')
+
+	popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+	popoverList = popoverTriggerList.map (popoverTriggerEl) ->
+		return new bootstrap.Popover(popoverTriggerEl)
+
 	return
 
 $(document).on 'turbolinks:before-cache', ->

app/assets/javascripts/lectures.coffee

@@ -6,43 +6,43 @@ disableExceptOrganizational = ->
   $('#lecture-organizational-warning').show()
   $('.fa-edit').hide()
   $('.new-in-lecture').hide()
-  $('[data-toggle="collapse"]').prop('disabled', true).removeClass('clickable')
+  $('[data-bs-toggle="collapse"]').prop('disabled', true).removeClass('clickable')
   return
 
 $(document).on 'turbolinks:load', ->
 
   # activate all popovers
-  $('[data-toggle="popover"]').popover()
+  $('[data-bs-toggle="popover"]').popover()
 
   # if any input is given to the lecture form (for people in lecture),
   # disable other input
   $('#lecture-form :input').on 'change', ->
     $('#lecture-basics-warning').show()
     $('.fa-edit:not(#update-teacher-button,#update-editors-button)').hide()
     $('.new-in-lecture').hide()
-    $('[data-toggle="collapse"]').prop('disabled', true).removeClass('clickable')
+    $('[data-bs-toggle="collapse"]').prop('disabled', true).removeClass('clickable')
     return
 
   # if any input is given to the preferences form, disable other input
   $('#lecture-preferences-form :input').on 'change', ->
     $('#lecture-preferences-warning').show()
-    $('[data-toggle="collapse"]').prop('disabled', true).removeClass('clickable')
+    $('[data-bs-toggle="collapse"]').prop('disabled', true).removeClass('clickable')
     $('.fa-edit').hide()
     $('.new-in-lecture').hide()
     return
 
   # if any input is given to the comments form, disable other input
   $('#lecture-comments-form :input').on 'change', ->
     $('#lecture-comments-warning').show()
-    $('[data-toggle="collapse"]').prop('disabled', true).removeClass('clickable')
+    $('[data-bs-toggle="collapse"]').prop('disabled', true).removeClass('clickable')
     $('.fa-edit').hide()
     $('.new-in-lecture').hide()
     return
 
   # if any input is given to the assignments form, disable other input
   $('#lecture-assignments-form :input').on 'change', ->
     $('#lecture-assignments-warning').show()
-    $('[data-toggle="collapse"]').prop('disabled', true).removeClass('clickable')
+    $('[data-bs-toggle="collapse"]').prop('disabled', true).removeClass('clickable')
     $('.new-in-lecture').hide()
     return
 
@@ -90,7 +90,7 @@ $(document).on 'turbolinks:load', ->
   # restore assignments form if lecture assignments editing is cancelled
   $('#cancel-lecture-assignments').on 'click', ->
     $('#lecture-assignments-warning').hide()
-    $('[data-toggle="collapse"]').prop('disabled', false).addClass('clickable')
+    $('[data-bs-toggle="collapse"]').prop('disabled', false).addClass('clickable')
     $('.new-in-lecture').show()
     maxSize = $('#lecture_submission_max_team_size').data('value')
     $('#lecture_submission_max_team_size').val(maxSize)
@@ -117,59 +117,57 @@ $(document).on 'turbolinks:load', ->
     if this.dataset.type == 'Lesson'
       lessonId = this.dataset.id
       $('.lecture-lesson[data-id="'+lessonId+'"]')
-        .removeClass('badge-secondary')
-        .addClass('badge-info')
+        .removeClass('bg-secondary')
+        .addClass('bg-info')
     tags = $(this).data('tags')
     for t in tags
-      $('.lecture-tag[data-id="'+t+'"]').removeClass('badge-light')
-        .addClass('badge-warning')
+      $('.lecture-tag[data-id="'+t+'"]').removeClass('bg-light')
+        .addClass('bg-warning')
     return
 
   # mouseleave over lesson -> restore original color of lessons and tags
   $('[id^="lecture-medium_"]').on 'mouseleave', ->
     if this.dataset.type == 'Lesson'
       lessonId = this.dataset.id
-      $('.lecture-lesson[data-id="'+lessonId+'"]').removeClass('badge-info')
-        .addClass('badge-secondary')
+      $('.lecture-lesson[data-id="'+lessonId+'"]').removeClass('bg-info')
+        .addClass('bg-secondary')
     tags = $(this).data('tags')
     for t in tags
-      $('.lecture-tag[data-id="'+t+'"]').removeClass('badge-warning')
-        .addClass('badge-light')
+      $('.lecture-tag[data-id="'+t+'"]').removeClass('bg-warning')
+        .addClass('bg-light')
     return
 
   # mouseenter over lesson -> colorize tags
   $('[id^="lecture-lesson_"]').on 'mouseenter', ->
     tags = $(this).data('tags')
     for t in tags
-      $('.lecture-tag[data-id="'+t+'"]').removeClass('badge-light')
-        .addClass('badge-warning')
+      $('.lecture-tag[data-id="'+t+'"]').addClass('bg-warning')
     return
 
   # mouseleave over lesson -> restore original color of tags
   $('[id^="lecture-lesson_"]').on 'mouseleave', ->
     tags = $(this).data('tags')
     for t in tags
-      $('.lecture-tag[data-id="'+t+'"]').removeClass('badge-warning')
-        .addClass('badge-light')
+      $('.lecture-tag[data-id="'+t+'"]').removeClass('bg-warning')
     return
 
   # mouseenter over tag -> colorize lessons
   $('[id^="lecture-tag_"]').on 'mouseenter', ->
     lessons = $(this).data('lessons')
     for l in lessons
-      $('.lecture-lesson[data-id="'+l+'"]').removeClass('badge-secondary')
-        .addClass('badge-info')
+      $('.lecture-lesson[data-id="'+l+'"]').removeClass('bg-secondary')
+        .addClass('bg-info')
     return
 
   # mouseleave over tag -> restore original color of lessons
   $('[id^="lecture-tag_"]').on 'mouseleave', ->
     lessons = $(this).data('lessons')
     for l in lessons
-      $('.lecture-lesson[data-id="'+l+'"]').removeClass('badge-info')
-        .addClass('badge-secondary')
+      $('.lecture-lesson[data-id="'+l+'"]').removeClass('bg-info')
+        .addClass('bg-secondary')
     return
 
-  $('#edited-media-tab a[data-toggle="tab"]').on 'shown.bs.tab', (e) ->
+  $('#edited-media-tab a[data-bs-toggle="tab"]').on 'shown.bs.tab', (e) ->
     sort = e.target.dataset.sort # newly activated tab
     path = $('#create-new-medium').prop('href')
     if path
@@ -345,7 +343,7 @@ $(document).on 'turbolinks:load', ->
 
 # clean up everything before turbolinks caches
 $(document).on 'turbolinks:before-cache', ->
-  $('.lecture-tag').removeClass('badge-warning').addClass('badge-light')
-  $('.lecture-lesson').removeClass('badge-info').addClass('badge-secondary')
+  $('.lecture-tag').removeClass('bg-warning')
+  $('.lecture-lesson').removeClass('bg-info').addClass('bg-secondary')
   $(document).off 'change', '#lecture_course_id'
   return

app/assets/javascripts/lessons.coffee

@@ -16,7 +16,7 @@ $(document).on 'turbolinks:load', ->
     $('#new-lesson-area').empty().hide()
     $('.fa-edit').show()
     $('.new-in-lecture').show()
-    $('[data-toggle="collapse"]').removeClass('disabled')
+    $('[data-bs-toggle="collapse"]').removeClass('disabled')
     return
 
   $(document).on 'click', '.cancel-lesson-edit', ->

app/assets/javascripts/media.coffee

@@ -18,6 +18,12 @@ fancyTimeFormat = (time) ->
 
 $(document).on 'turbolinks:load', ->
 
+  # init datetimepicker
+  $('#release_date').datetimepicker
+      format: 'd.m.Y H:i'
+      inline: false
+      lang: 'en'
+
   # disable/enable search field on the media search page, depending on
   # whether 'all tags'/'all editors'/... are selected
   $('[id^="search_all_"]').on 'change', ->
@@ -389,11 +395,9 @@ $(document).on 'turbolinks:load', ->
     return
 
   $('#release_date').on 'focus', ->
+    console.log('focussss')
     $('#medium_release_now_0').prop('checked', true)
-    $('#release_date').datetimepicker
-      format: 'd.m.Y H:i'
-      inline: false
-      lang: 'en'
+    $('#release_date').datetimepicker('toggle')
     return
 
   $('#medium_assignment_deadline').on 'focus', ->

app/assets/javascripts/sections.coffee

@@ -30,7 +30,7 @@ $(document).on 'turbolinks:load', ->
     $('#new-section-area-' + chapterId).empty().hide()
     $('.fa-edit').show()
     $('.new-in-lecture').show()
-    $('[data-toggle="collapse"]').removeClass('disabled')
+    $('[data-bs-toggle="collapse"]').removeClass('disabled')
     return
 
   # reload page if editing of section is cancelled

app/assets/javascripts/talks.coffee

@@ -64,7 +64,7 @@ $(document).on 'turbolinks:load', ->
   $(document).on 'click', '#new-talk-date-button', ->
     count = $(this).data('count')
     $('#talk-date-picker')
-      .append('<div class="mt-2" id="talk_dates_'+count+'"><input type="date" name="talk[dates['+count+']]"><a class="fas fa-trash-alt clickable text-dark ml-2 remove-talk-date" data-count="'+count+'"></a></div>')
+      .append('<div class="mt-2" id="talk_dates_'+count+'"><input type="date" name="talk[dates['+count+']]"><a class="fas fa-trash-alt clickable text-dark ms-2 remove-talk-date" data-count="'+count+'"></a></div>')
     $(this).data('count', count + 1)
     $('#talk-basics-warning').show()
     return

app/assets/javascripts/upload.coffee

@@ -340,7 +340,7 @@ directUpload provides an interface to upload (multiple) files to an endpoint
   single
   ) ->
     # update helpdesk
-    $('[data-toggle="popover"]').popover()
+    $('[data-bs-toggle="popover"]').popover()
     hiddenInput = document.getElementById(hiddenInputElement)
     hiddenInput2 = document.getElementById('upload-userManuscript-hidden2')
     fileInput =document.getElementById(fileInputElement)
@@ -440,7 +440,7 @@ directUpload provides an interface to upload (multiple) files to an endpoint
 @result = undefined
 @userManuscriptUpload = (fileInput) ->
   # update helpdesk
-  $('[data-toggle="popover"]').popover()
+  $('[data-bs-toggle="popover"]').popover()
   hiddenInput = document.getElementById('upload-userManuscript-hidden')
   hiddenInput2 = document.getElementById('upload-userManuscript-hidden2')
   fileInput.style.display = 'none'