From a3c0c6cb8208f2bae1d4ddbd15d0030ec2697368 Mon Sep 17 00:00:00 2001 From: Jonathan Rochkind Date: Thu, 13 Oct 2022 14:22:38 -0400 Subject: [PATCH] move admin pack from webpacker to vite --- .../packs => frontend/entrypoints}/admin.js | 12 +++---- .../javascript}/admin/README.md | 0 .../javascript}/admin/member_sortable.js | 0 .../javascript}/admin/qa_autocomplete.js | 0 .../javascript}/admin/queue_status_submit.js | 0 .../admin/simple_uppy_file_input.js | 0 .../javascript}/admin/tom_select.js | 0 .../javascript}/admin/uppy_dashboard.js | 0 app/frontend/javascript/lib/delegate_event.js | 35 +++++++++++++++++++ app/views/layouts/admin.html.erb | 8 +++-- 10 files changed, 46 insertions(+), 9 deletions(-) rename app/{javascript/packs => frontend/entrypoints}/admin.js (58%) rename app/{javascript/src/js => frontend/javascript}/admin/README.md (100%) rename app/{javascript/src/js => frontend/javascript}/admin/member_sortable.js (100%) rename app/{javascript/src/js => frontend/javascript}/admin/qa_autocomplete.js (100%) rename app/{javascript/src/js => frontend/javascript}/admin/queue_status_submit.js (100%) rename app/{javascript/src/js => frontend/javascript}/admin/simple_uppy_file_input.js (100%) rename app/{javascript/src/js => frontend/javascript}/admin/tom_select.js (100%) rename app/{javascript/src/js => frontend/javascript}/admin/uppy_dashboard.js (100%) create mode 100644 app/frontend/javascript/lib/delegate_event.js diff --git a/app/javascript/packs/admin.js b/app/frontend/entrypoints/admin.js similarity index 58% rename from app/javascript/packs/admin.js rename to app/frontend/entrypoints/admin.js index d4b0b98fe..e177bcc91 100644 --- a/app/javascript/packs/admin.js +++ b/app/frontend/entrypoints/admin.js @@ -6,10 +6,10 @@ // includes things not compatible with IE11 -- we consider // it okay at present that management UI doesn't work on IE11, but we need public UI to. -import '../src/js/admin/member_sortable'; -import '../src/js/admin/simple_uppy_file_input'; -import '../src/js/admin/uppy_dashboard.js'; -import '../src/js/admin/qa_autocomplete.js'; -import '../src/js/admin/queue_status_submit.js'; +import '../javascript/admin/member_sortable'; +import '../javascript/admin/simple_uppy_file_input'; +import '../javascript/admin/uppy_dashboard.js'; +import '../javascript/admin/qa_autocomplete.js'; +import '../javascript/admin/queue_status_submit.js'; -import '../src/js/admin/tom_select.js' // has CSS +import '../javascript/admin/tom_select.js' // has CSS diff --git a/app/javascript/src/js/admin/README.md b/app/frontend/javascript/admin/README.md similarity index 100% rename from app/javascript/src/js/admin/README.md rename to app/frontend/javascript/admin/README.md diff --git a/app/javascript/src/js/admin/member_sortable.js b/app/frontend/javascript/admin/member_sortable.js similarity index 100% rename from app/javascript/src/js/admin/member_sortable.js rename to app/frontend/javascript/admin/member_sortable.js diff --git a/app/javascript/src/js/admin/qa_autocomplete.js b/app/frontend/javascript/admin/qa_autocomplete.js similarity index 100% rename from app/javascript/src/js/admin/qa_autocomplete.js rename to app/frontend/javascript/admin/qa_autocomplete.js diff --git a/app/javascript/src/js/admin/queue_status_submit.js b/app/frontend/javascript/admin/queue_status_submit.js similarity index 100% rename from app/javascript/src/js/admin/queue_status_submit.js rename to app/frontend/javascript/admin/queue_status_submit.js diff --git a/app/javascript/src/js/admin/simple_uppy_file_input.js b/app/frontend/javascript/admin/simple_uppy_file_input.js similarity index 100% rename from app/javascript/src/js/admin/simple_uppy_file_input.js rename to app/frontend/javascript/admin/simple_uppy_file_input.js diff --git a/app/javascript/src/js/admin/tom_select.js b/app/frontend/javascript/admin/tom_select.js similarity index 100% rename from app/javascript/src/js/admin/tom_select.js rename to app/frontend/javascript/admin/tom_select.js diff --git a/app/javascript/src/js/admin/uppy_dashboard.js b/app/frontend/javascript/admin/uppy_dashboard.js similarity index 100% rename from app/javascript/src/js/admin/uppy_dashboard.js rename to app/frontend/javascript/admin/uppy_dashboard.js diff --git a/app/frontend/javascript/lib/delegate_event.js b/app/frontend/javascript/lib/delegate_event.js new file mode 100644 index 000000000..34a5b1b8c --- /dev/null +++ b/app/frontend/javascript/lib/delegate_event.js @@ -0,0 +1,35 @@ +/* + + We want something like JQuery 'on', but without JQuery: + https://api.jquery.com/on/ + + This is a bit tricky to get right. We cribbed this implementation from: + + https://stackoverflow.com/a/25248515/ + + + If in JQuery you'd do: + + $(document).on("click", , handler) + + Now do something like: + + import delegateEvent from './lib/delegate_event.js'; + + delegateEvent(document, "click", , handler); + +ALL ARGS ARE REQUIRED for now. + +*/ + +export default function delegateEvent(container, event, selectorStr, handler) { + container.addEventListener(event, function(e) { + for (var target=e.target; target && target!=container; target=target.parentNode) { + // loop parent nodes from the target to the delegation node + if (target.matches(selectorStr)) { + handler.call(target, e); + break; + } + } + }, false); +}; diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb index ba1b40277..e7f85dd48 100644 --- a/app/views/layouts/admin.html.erb +++ b/app/views/layouts/admin.html.erb @@ -37,10 +37,12 @@ <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application', defer: true %> - <%# webpacker 'application' js, and 'admin' js and css %> + <%# webpacker 'application' js %> <%= javascript_pack_tag 'application', defer: true %> - <%= javascript_pack_tag 'admin', defer: true %> - <%= stylesheet_pack_tag "admin" %> + + <%# vite 'admin' js, will also include css if needed automatically %> + <%= vite_javascript_tag 'admin', defer: true %> + <%# stylesheet_pack_tag "admin" %>