Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tech-debt: Remove reporting-dates-tables.js by converting legacy tables to use new template and JS #6491

Closed
57 tasks done
johnnyporkchops opened this issue Sep 27, 2024 · 0 comments · Fixed by #6512
Closed
57 tasks done

Tech-debt: Remove reporting-dates-tables.js by converting legacy tables to use new template and JS #6491

johnnyporkchops opened this issue Sep 27, 2024 · 0 comments · Fixed by #6512
Assignees
@johnnyporkchops
Labels
Needs prioritization Technical debt Work: Front-end
Milestone
27.3

Comments

@johnnyporkchops
Copy link
Contributor

johnnyporkchops commented Sep 27, 2024 •
edited
Loading

Summary

PR: #6512

What we're after:
Convert legacy Reporting dates tables to new template so we can remove redundant JS

  • Legacy reporting dates tables use full_width_page.html template and reporting-dates-tables.js
  • New tables starting around 2024 use reporting_dates_table.html and election-reporting-dates-tables.js (renamed to reporting-dates-tables.js)
  • Inventory pages that use legacy reporting-dates-tables.js (full_width_page.html) in consultation with @djgarr
  • Convert the legacy tables where necessary (if they have multiple footnotes) to use the new template/JS and delete legacy JS.
  • Delete reporting-dates-tables.js and rename election-reporting-dates-tables.js to that name so that the template and the JS file have the same name.

inventory of all pages using FullWidth page template:

Wagtail explorer list: https://www.fec.gov/admin/pages/usage/home/fullwidthpage/

Pages using FullWidth Template checklist:

  • *Inline JS: Here is the JS to preserve zebra-striping in some of the legacy pages above that say "STAYS IN FullWidthPage TEMPLATE (AS-IS)". Only the ones that have multiple state election rows needed this.

Put this in html block below the table.

 <script>
 const dates_table = document.getElementsByClassName('election-dates-table')[0];

 const bg = 'rgba(241,241,241,.5)';
 const state_rows = dates_table.getElementsByTagName('tr');
 let state_class = [];
 for (const tr of state_rows) {
   state_class.push(tr.classList.item(0));
 }
 let unique = [...new Set(state_class)];
 for (let x = 0; x < unique.length; x += 2) {
   const unique_row =dates_table.getElementsByClassName(unique[x]);
   for (const un of unique_row) {
     un.style.backgroundColor = bg;
   }
 }
</script>

Related issues/PRs

Issues:
#5153

PRs:
New:
#5786
#5798
Legacy: #3227
Removal:
#6512

Completion criteria

  • Legacy reporting dates tables that use full_width_page.html template and reporting-dates-tables.js are converted to use reporting_dates_table.html and election-reporting-dates-tables.js (where necessary...when they have multiple footnotes and need JS)
  • Use the info tab of the page editor to see where that page is referenced (linked to) and make sure links work. Not sure, but may have to change links to external link with full url, or convert to html link with the same slug.
  • Add inline JS in html block to the three pages indicated in the. list above with "TODO" for zebra striping by state.
  • Remove reference to reporting-dates-tables.js in full_width_page.html and Delete reporting-dates-tables.js from filesystem (PR)
  • ? Do we still need to reference data-init.js in FullWidth template ? ( this was resolved by Add a11y modal dialog to global.js #6496)
  • Keep full_width_page.html as legacy reporting dates pages that do not need JS other non reporting dates pages will continue to use it.

Tech steps or considerations (optional)

  • make sure any pages using full_width_page.html template do not need the reporting-dates-tables.js that is hardcoded into it

Future work

Other future work that may be needed following this issue's completion.
@johnnyporkchops johnnyporkchops added this to the 26.4 milestone Oct 10, 2024
This was referenced Oct 11, 2024
Closed
Merged
@johnnyporkchops johnnyporkchops modified the milestones: 26.4, 26.5 Oct 17, 2024
@johnnyporkchops johnnyporkchops self-assigned this Oct 24, 2024
@tmpayton tmpayton modified the milestones: 26.5, 26.6 Nov 5, 2024
@johnnyporkchops johnnyporkchops modified the milestones: 26.6, 26.i Nov 19, 2024
@rfultz rfultz modified the milestones: 26.i, 27.1 Dec 11, 2024
@rfultz rfultz modified the milestones: 27.1, 27.2 Dec 23, 2024
@rfultz rfultz modified the milestones: 27.2, 27.3 Jan 7, 2025
@github-project-automation github-project-automation bot moved this from 📥 Assigned to ✅ Done in Website project Jan 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@johnnyporkchops johnnyporkchops

Labels
Needs prioritization Technical debt Work: Front-end
Projects
Website project
Status: ✅ Done
Milestone
27.3
Development

Successfully merging a pull request may close this issue.

Remove legacy reporting dates JS fecgov/fec-cms
3 participants
@johnnyporkchops @rfultz @tmpayton