Vendor TomSelect 2.4.3 — drop CDN dependency for CSP

app/assets/javascripts/admin/tom-select-init.js

@@ -0,0 +1,100 @@
+// TomSelect for admin member lookup
+// jQuery 1.12.4 ready promise silently drops callbacks registered after resolution
+// (https://github.com/jquery/jquery/issues/2473). Use native DOMContentLoaded instead.
+(function() {
+  function init() {
+    if ($('#member_lookup_id').length) {
+      new TomSelect('#member_lookup_id', {
+        placeholder: 'Type to search members...',
+        valueField: 'id',
+        labelField: 'full_name',
+        searchField: ['full_name', 'email'],
+        create: false,
+        loadThrottle: 300,
+        shouldLoad: function(query) {
+          return query.length >= 3;
+        },
+        load: function(query, callback) {
+          fetch('/admin/members/search?q=' + encodeURIComponent(query))
+            .then(response => response.json())
+            .then(json => callback(json))
+            .catch(function() { callback(); });
+        },
+        render: {
+          option: function(item, escape) {
+            return '<div>' + escape(item.full_name) + ' <small class="text-muted">' + escape(item.email) + '</small></div>';
+          }
+        }
+      });
+
+      $('#member_lookup_id').on('change', function() {
+        $('#view_profile').attr('href', '/admin/members/' + $(this).val());
+      });
+    }
+
+    // TomSelect for meeting invitation member lookup
+    if ($('#meeting_invitations_member').length) {
+      new TomSelect('#meeting_invitations_member', {
+        placeholder: 'Type to search members...',
+        valueField: 'id',
+        labelField: 'full_name',
+        searchField: ['full_name', 'email'],
+        create: false,
+        loadThrottle: 300,
+        shouldLoad: function(query) {
+          return query.length >= 3;
+        },
+        load: function(query, callback) {
+          fetch('/admin/members/search?q=' + encodeURIComponent(query))
+            .then(response => response.json())
+            .then(json => callback(json))
+            .catch(function() { callback(); });
+        },
+        render: {
+          option: function(item, escape) {
+            return '<div>' + escape(item.full_name) + ' <small class="text-muted">' + escape(item.email) + '</small></div>';
+          },
+          no_results: function() {
+            return '<div class="no-results">No members found</div>';
+          }
+        }
+      });
+    }
+
+    // TomSelect for meeting organisers (multi-select)
+    if ($('#meeting_organisers').length) {
+      new TomSelect('#meeting_organisers', {
+        plugins: ['remove_button'],
+        placeholder: 'Type to search members...',
+        valueField: 'id',
+        labelField: 'full_name',
+        searchField: ['full_name', 'email'],
+        create: false,
+        loadThrottle: 300,
+        shouldLoad: function(query) {
+          return query.length >= 3;
+        },
+        load: function(query, callback) {
+          fetch('/admin/members/search?q=' + encodeURIComponent(query))
+            .then(response => response.json())
+            .then(json => callback(json))
+            .catch(function() { callback(); });
+        },
+        render: {
+          option: function(item, escape) {
+            return '<div>' + escape(item.full_name) + ' <small class="text-muted">' + escape(item.email) + '</small></div>';
+          },
+          no_results: function() {
+            return '<div class="no-results">No members found</div>';
+          }
+        }
+      });
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

app/assets/javascripts/application.js

@@ -40,95 +40,6 @@ $(function() {
     format: "HH:i",
   });
 
-  // TomSelect for admin member lookup
-  if ($('#member_lookup_id').length) {
-    new TomSelect('#member_lookup_id', {
-      placeholder: 'Type to search members...',
-      valueField: 'id',
-      labelField: 'full_name',
-      searchField: ['full_name', 'email'],
-      create: false,
-      loadThrottle: 300,
-      shouldLoad: function(query) {
-        return query.length >= 3;
-      },
-      load: function(query, callback) {
-        fetch('/admin/members/search?q=' + encodeURIComponent(query))
-          .then(response => response.json())
-          .then(json => callback(json))
-          .catch(() => callback());
-      },
-      render: {
-        option: function(item, escape) {
-          return '<div>' + escape(item.full_name) + ' <small class="text-muted">' + escape(item.email) + '</small></div>';
-        }
-      }
-    });
-
-    $('#member_lookup_id').on('change', function() {
-      $('#view_profile').attr('href', '/admin/members/' + $(this).val());
-    });
-  }
-
-  // TomSelect for meeting invitation member lookup
-  if ($('#meeting_invitations_member').length) {
-    new TomSelect('#meeting_invitations_member', {
-      placeholder: 'Type to search members...',
-      valueField: 'id',
-      labelField: 'full_name',
-      searchField: ['full_name', 'email'],
-      create: false,
-      loadThrottle: 300,
-      shouldLoad: function(query) {
-        return query.length >= 3;
-      },
-      load: function(query, callback) {
-        fetch('/admin/members/search?q=' + encodeURIComponent(query))
-          .then(response => response.json())
-          .then(json => callback(json))
-          .catch(() => callback());
-      },
-      render: {
-        option: function(item, escape) {
-          return '<div>' + escape(item.full_name) + ' <small class="text-muted">' + escape(item.email) + '</small></div>';
-        },
-        no_results: function(data, escape) {
-          return '<div class="no-results">No members found</div>';
-        }
-      }
-    });
-  }
-
-  // TomSelect for meeting organisers (multi-select)
-  if ($('#meeting_organisers').length) {
-    new TomSelect('#meeting_organisers', {
-      plugins: ['remove_button'],
-      placeholder: 'Type to search members...',
-      valueField: 'id',
-      labelField: 'full_name',
-      searchField: ['full_name', 'email'],
-      create: false,
-      loadThrottle: 300,
-      shouldLoad: function(query) {
-        return query.length >= 3;
-      },
-      load: function(query, callback) {
-        fetch('/admin/members/search?q=' + encodeURIComponent(query))
-          .then(response => response.json())
-          .then(json => callback(json))
-          .catch(() => callback());
-      },
-      render: {
-        option: function(item, escape) {
-          return '<div>' + escape(item.full_name) + ' <small class="text-muted">' + escape(item.email) + '</small></div>';
-        },
-        no_results: function(data, escape) {
-          return '<div class="no-results">No members found</div>';
-        }
-      }
-    });
-  }
-
   // Chosen for all other selects (exclude TomSelect fields)
   // Chosen hides inputs and selects, which becomes problematic when they are
   // required: browser validation doesn't get shown to the user.

app/views/admin/groups/show.html.haml

@@ -1,6 +1,7 @@
 - content_for :head do
-  %link{ href: 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css', rel: 'stylesheet', type: 'text/css' }
-  %script{ src: 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js' }
+  %link{ href: '/tom-select/tom-select.bootstrap5.min.css', rel: 'stylesheet', type: 'text/css' }
+  %script{ src: '/tom-select/tom-select.complete.min.js' }
+  = javascript_include_tag 'admin/tom-select-init'
 
 .container.py-4.py-lg-5
   .row.mb-4

app/views/admin/meetings/_form.html.haml

@@ -1,6 +1,7 @@
 - content_for :head do
-  %link{ href: 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css', rel: 'stylesheet', type: 'text/css' }
-  %script{ src: 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js' }
+  %link{ href: '/tom-select/tom-select.bootstrap5.min.css', rel: 'stylesheet', type: 'text/css' }
+  %script{ src: '/tom-select/tom-select.complete.min.js' }
+  = javascript_include_tag 'admin/tom-select-init'
 
 = simple_form_for [:admin, @meeting] do |f|
   .row

app/views/admin/meetings/show.html.haml

@@ -55,8 +55,9 @@
 
 - if @invitations.any?
   - content_for :head do
-    %link{ href: 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css', rel: 'stylesheet', type: 'text/css' }
-    %script{ src: 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js' }
+    %link{ href: '/tom-select/tom-select.bootstrap5.min.css', rel: 'stylesheet', type: 'text/css' }
+    %script{ src: '/tom-select/tom-select.complete.min.js' }
+    = javascript_include_tag 'admin/tom-select-init'
   .py-4.py-lg-5.bg-light
     .container#invitations
       = render partial: 'invitation_management'

app/views/admin/members/index.html.haml

@@ -1,6 +1,7 @@
 - content_for :head do
-  %link{ href: 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css', rel: 'stylesheet', type: 'text/css' }
-  %script{ src: 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js' }
+  %link{ href: '/tom-select/tom-select.bootstrap5.min.css', rel: 'stylesheet', type: 'text/css' }
+  %script{ src: '/tom-select/tom-select.complete.min.js' }
+  = javascript_include_tag 'admin/tom-select-init'
 
 .container.py-4.py-lg-5
   .row.mb-4

config/initializers/assets.rb

@@ -5,4 +5,7 @@
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
-Rails.application.config.assets.precompile += %w(payments.js)
+Rails.application.config.assets.precompile += %w(
+  payments.js
+  admin/tom-select-init.js
+)