October: Update Deprecated code in October (event.key) Updates and Testing

[ghost]

To make things easier I have created this github issue and then will create a bunch of Pr's and connect them to this issue. Probably will take quite long to test each file etc.

Update File List

October CMS Files

event.keyCode (deprecated)

• [x] 12 lines - https://github.com/octobercms/october/blob/master/modules/backend/widgets/table/assets/js/table.processor.dropdown.js

• [x] 2 lines - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/js/checkbox.js

• [x] 5 lines - https://github.com/octobercms/october/blob/master/modules/backend/widgets/table/assets/js/table.helper.navigation.js

• [x] 3 lines - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/js/autocomplete.js

• [x] 21 lines - https://github.com/octobercms/october/blob/master/modules/backend/widgets/table/assets/js/build-min.js

• [x] 1 line - https://github.com/octobercms/october/blob/master/modules/backend/widgets/table/assets/js/table.helper.search.js

• [x] 1 line - https://github.com/octobercms/october/blob/master/modules/backend/widgets/table/assets/js/table.processor.checkbox.js

• [x] 2 lines - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/js/inspector.editor.dictionary.js

• [x] 2 lines - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/js/inspector.editor.stringlistautocomplete.js

• [x] 1 line - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/js/inspector.wrapper.popup.js

• [x] 1 line - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/js/popover.js

• [x] 1 line - https://github.com/octobercms/october/blob/master/modules/system/assets/js/framework-min.js

• [x] 2 lines - https://github.com/octobercms/october/blob/master/modules/backend/widgets/table/assets/js/table.js

• [x] 1 line - https://github.com/octobercms/october/blob/master/modules/system/assets/js/framework.combined-min.js

• [x] 1 line - https://github.com/octobercms/october/blob/master/modules/system/assets/js/framework.js

event.which (deprecated)

• [x] 11 lines - https://github.com/octobercms/october/blob/master/modules/backend/formwidgets/richeditor/assets/js/plugins/figures.js

• [x] 11 lines - https://github.com/octobercms/october/blob/master/modules/backend/formwidgets/richeditor/assets/js/build-plugins-min.js

• [x] 1 line - https://github.com/octobercms/october/blob/master/modules/backend/assets/js/october.flyout.js

• [x] 1 line - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/js/input.hotkey.js

• [x] 1 line - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/js/tab.js

• [x] 1 line - https://github.com/octobercms/october/blob/master/modules/backend/widgets/mediamanager/assets/js/mediamanager.js

• [x] 1 line - https://github.com/octobercms/october/blob/master/modules/backend/widgets/mediamanager/assets/js/mediamanager-browser-min.js

Third-party (Vendor) Files

event.keyCode (deprecated)

• [ ] 4 lines - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/bootstrap/js/dropdown.js

• [ ] 7 lines - https://github.com/octobercms/october/blob/master/modules/backend/assets/vendor/sweet-alert/sweet-alert.js

• [ ] 1 line - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/clockpicker/js/jquery-clockpicker.js

• [ ] 1 line - https://github.com/octobercms/october/blob/master/modules/backend/assets/vendor/jcrop/js/jquery.Jcrop.js

• [ ] 2 lines - https://github.com/octobercms/october/blob/master/modules/backend/formwidgets/colorpicker/assets/vendor/spectrum/spectrum.js

• [ ] 3 lines - https://github.com/octobercms/october/blob/master/modules/backend/formwidgets/codeeditor/assets/vendor/ace/ext-searchbox.js

event.which (deprecated)

• [ ] 7 lines - https://github.com/octobercms/october/blob/master/themes/demo/assets/vendor/bootstrap/js/dropdown.js

• [ ] 1 line - https://github.com/octobercms/october/blob/master/modules/backend/assets/vendor/sweet-alert/sweet-alert.js

• [ ] 2 lines - https://github.com/octobercms/october/blob/master/modules/backend/formwidgets/colorpicker/assets/vendor/spectrum/spectrum.js

• [ ] 1 line - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/bootstrap/js/dropdown.js

• [ ] 1 line - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/bootstrap/js/modal.js

• [ ] 1 line - https://github.com/octobercms/october/blob/master/themes/demo/assets/vendor/bootstrap/js/carousel.js

• [ ] 7 lines - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/select2/js/select2.full.js

• [ ] 1 line - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/sortable/jquery-sortable.js

• [ ] 1 line - https://github.com/octobercms/october/blob/master/themes/demo/assets/vendor/bootstrap/js/modal.js

• [ ] 1 line - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/flot/jquery.flot.selection.js

• [ ] 5 lines - https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/flot/jquery.flot.navigate.js

---

event.charCode (deprecated)

Already 100% removed from October CMS.

Reason for updating

1. Vanilla Javascript event.keyCode is deprecated, see here: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keycode

2. jQuery event.keyCode is deprecated, see here: https://github.com/jquery/jquery/issues/2667

3. Vanilla Javascript event.charCode is deprecated, see here: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode

4. jQuery event.charCode is deprecated, see here: https://github.com/jquery/jquery/issues/2667

5. Vanilla Javascript event.which is deprecated, see here: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

6. jQuery event.which is deprecated, see here: https://github.com/jquery/api.jquery.com/issues/821

Therefore we should switch to using: KeyboardEvent.key

Browser Support: https://caniuse.com/#feat=keyboardevent-key

W3c Spec: https://www.w3.org/TR/uievents/#dom-keyboardevent-key

Have tested it and works on most new browsers.

There is an issue with Edge and IE11, see here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11509049/

Polyfill

Most web browsers now accept event.key, the only problem browsers are old Safari, Edge and IE11. I have already added a Polyfill which fixes those browsers and gives 100% support. The file can be found here: https://github.com/octobercms/october/blob/628551ec53a6d9fec1315dc437f7e83db4abad6a/modules/system/assets/ui/vendor/keyboardevent-key-polyfill/index.js

The Polyfill is also Initialize in that file location so you don't need to do anything, October CMS will take care of backwards compatibility issues.

Third-Party Vendors

When updating third-party vendor files, please also send a pr to their repo. We will have to make a note of these files, to prevent any issues when updating third-party files in the future.

Useful Tools when updating the Code

• https://github.com/ayumihamsaki/keycodes

• https://keycode.info/

• https://cvan.io/keyboardevent-key-polyfill/

Please note also that: event.key === 'a' is not the same as event.key === 'A'

Testing and Help

As there are so many files, it will require a lot of time testing and updating - request help! You use October CMS and probably want the CMS to work properly for you, now is the time to help out.

Thanks.

[bennothommo]

@ayumihamsaki Is the syntax for event.key the same as event.keyCode? Quite a few of the listed files are from third-party vendors (such as Select2, Bootstrap, SweetAlert, etc.), and I'm not sure we should be changing those when a) we don't know what effects it will have on those libraries and b) if we upgrade them in the future, we'd have to make the same change(s) again if they have not yet done so on their end.

[w20k]

I agree with @bennothommo, @ayumihamsaki could you remove from your list vendor specific files.

[LukeTowers]

@ayumihamsaki please don't make separate PRs for each file, just make them all under one.

[ghost]

How to keep everyone happy here, what I can do is create a single pr to fix all the non-third party vendors files and then fix them at a later date and keep this issue open.

Useful Link: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

[ghost]

• Space bar is a bit of a headache, I did some research on it 2 days ago and came to the conclusion you need three fields. This is what I found out:

Future propsoal - (Space character)
Current proposal -
Passed propsal (older browsers e.g. IE11) - Spacebar

[LukeTowers]

Merged in https://github.com/octobercms/october/commit/3291e07191832c57a8a9f526f4427b052d80261b