6410 jQuery Deprecations

[rfultz]

Summary

• Resolves jQuery Deprecations #6410

Required reviewers

• front-end
• UX?

Impacted areas of the application

A chunk of the front-end interactivity where jQuery is involved, especially the deprecated parts of it. Specifically:

• .bind() → .on()
• .blur() → .trigger('blur')
• .change() → .trigger('change')
• .change(𝑓) → .on('change', 𝑓)
• .click() → .trigger('click)
• .click(𝑓) → .on('click', 𝑓)
• :first → .first()
• .focus() → .trigger('focus')
• .hover(𝑓, 𝑓) → .on('mouseenter', 𝑓).on('mouseleave', 𝑓)
• .keyCode → .which
• :last → .last()
• .trim() → native String .trim()
• .unbind() → .off()
• .unique() → .sortUnique()

Screenshots

No visible changes

Related PRs

None

How to test

• Pull the branch
• npm i
• npm run build
• ./manage.py runserver
• Legal
  • legal page
    • submit button
  • Citation filter
    • down arrow or tab
    • up arrow
    • enter
  • Text filter
    • enter
• Audit Category Sub Category
  • change listener
• Audit Tags
  • primary category change listener
  • secondary category change listener
  • close_sub click handler
  • close_primary click handler
• Calendar
  • .fc-event, .fc-more, .fc-close (simulateClick on enter)
  • .fc-more (click, placing focus)
  • Tooltip
    • trigger focus on close (though I don't know why)
      URL: http://127.0.0.1:8000/calendar/
      TEST: switch to grid view, click an event to trigger its "tooltip," click the ❌
• Download
  • focus on button if needed (like with datatables' "export this data");
• Dropdowns
  • .show() (set focus on first checkbox)
  • esc button (put focus back on the button)
  • input[type="checkbox"]
    • enter - trigger change event
    • set focus on next/prev items
  • .dropdown__item--selected
    • click
• Election Map
  • while drawing districts, unique sort during drawBackgroundDistricts()
• Election Search
  • trigger 'change' event on ZIP code change
• Date Filters
  • fromQuery - setValue() should trigger 'change' for $minDate and $maxDate
  • handleModifyEvent - minDate, maxDate change trigger
  • handleMinDateSelect - grid li - mouseenter/mouseleave (hover states)
  • handleMaxDateSelect - grid li - mouseenter/mouseleave (hover states)
  • handleGridItemSelect - removing mouseenter and mouseleave listeners
• Election filters
  • fromQuery- trigger change
  • handleElectionChange - trigger change
  • handleCycleChange - cycle trigger change, full trigger change
• Filter base
  • input set value, then trigger change
• Filter panel
  • .show() should set focus into first input, select, button
• Filter set
  • handleTagRemoved - trigger click
• Filter typeahead
  • handleKeypress - "enter" to submit
  • handleSubmit - field trigger change
  • appendCheckbox - checkbox.trigger change
• Filter select
  • fromQuery - input trigger change
• Text filter
  • handleChange - settimeout, button trigger focus
• Toggle filter
  • fromQuery - elm input trigger change
• Validate date filters
  • fromQuery - minDate & maxDate trigger change
• Form Nav
  • clearNamesIfNull - form trigger submit
• helpers.js
  • getCookie REMOVED (does this look broken anywhere?)
• Maps
  • appendStateMap - trigger change on the select inside the last .state-map.last()
• search.js
  • Focus the search field on typing /
    NOTE: I DON'T THINK IS BEING USED ANYWHERE. REMOVE $('.js-search').each(function() { FROM data-init.js?
• Skipnav
  • findTarget - on click, focus on first non-nav content on page
  • findTarget - on Enter, focus on first non-nav content on page
    HOW: load any page, press tab button, click and Enter the skipnav element in the upper left
• Tables
  • modalRenderFactory - focus the close button
  • hidePanel - focus on panel button
  • checkFromQuery (works on all but Filings/Reports, fixed by PR 6481
    - [ ] trigger 'change' on :checked)
• TopEntities
  • updateElectionYearOptions - trigger change
    HOW: homepage on local only, change the election year
• Typeahead
  • searchSite - trigger submit
• Contact form
  • initTypeahead - #id_u_contact_title trigger focus then trigger blur
• datatable-audit
  • add event listeners for #sub_category_id.ready and #sub_category_id.ajaxComplete
• Election reporting dates tables
  • mediaQueryResponse - close.trigger focus
• Reporting dates tables
  • mediaQueryResponse - close.trigger focus
• 404
  • open feedback window
• 500
  • open feedback window

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 80.34%. Comparing base (b0a6c41) to head (a719175).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #6411   +/-   ##
========================================
  Coverage    80.34%   80.34%           
========================================
  Files          235      235           
  Lines         5113     5113           
========================================
  Hits          4108     4108           
  Misses        1005     1005           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.