October: List of Updated Javascript Packages in October for Future Reference

Created on 15 Oct 2018  路  39Comments  路  Source: octobercms/october

This is a question, but why are so many packages in October so out of date and there seems to be so many of them in this state. The more I check the more worrying it makes me feel.

I am referring to all the Javascript packages mostly, although the CSS is very old as well.

With regards to the Javascript packages most are using jQuery V1 still and alot say their dated from as far back as 2006. Surely they must be very buggy and have lots of secury holes in them?

As for the CSS it contains lots of floats and no CSS Flexbox or CSS grids.

I just wondered is there a plan to update everything? Or is it being swept under the carpet as it seems like quite a big issue.

Honestly, it really does seem every Javascript package is years out of date. This is why lots of them are using Eval and causing that issue.

Archived Maintenance Question

Most helpful comment

List of Update Information for Future Ref / Updating

Core Files

| JS Library Name | URI Location | Update Location | Version Number | Last Update Date |
|---|---|---|---|---|
| jQuery | See Github PR: https://github.com/octobercms/october/pull/4461 | https://github.com/jquery/jquery/releases | 3.4.1 | May 1, 2019 |
| jQuery October CMS Doc's | See Github PR: https://github.com/octobercms/docs/pull/390 |
| jQuery Migrate | See Github PR: https://github.com/octobercms/october/pull/4461 | https://github.com/jquery/jquery-migrate/releases | 3.1.0 | June 8, 2019 |

When updating the jQuery, you need to update the doc's version number as well, see here: https://octobercms.com/docs/markup/filter-theme#combiner-aliases

Reference to the jQuery library (v3.4.0) used in the back-end. (JavaScript)

Library Files

| JS Library Name | URI Location | Version Number | Update Location | Last Update Date |
|---|---|---|---|---|
| Modernizr | https://github.com/octobercms/october/tree/develop/modules/system/assets/ui/vendor/modernizr | 3.7.1 | https://github.com/Modernizr/Modernizr/releases | Mar 14 2019 |
| moment.js | https://github.com/octobercms/october/tree/develop/modules/system/assets/ui/vendor/moment | 2.22.2 | https://github.com/moment/moment/releases | Nov 2018 |
| moment-timezone | https://github.com/octobercms/october/tree/develop/modules/system/assets/ui/vendor/moment | 0.5.23 | https://github.com/moment/moment-timezone/releases | Nov 2018 |
| Rapha毛l | https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/raphael/raphael.js | 2.2.7 | https://github.com/DmitryBaranovskiy/raphael/releases | Nov 12, 2016 |
| Eve | https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/raphael/raphael.js | 0.5.4 | https://github.com/adobe-webplatform/eve/releases | Nov 12, 2016 |
| Ace Editor | https://github.com/octobercms/october/tree/develop/modules/backend/formwidgets/codeeditor/assets/vendor/ace | 1.4.5 | https://github.com/ajaxorg/ace-builds/releases | Jun 17, 2019 |
| Isotope | https://github.com/octobercms/october/tree/develop/modules/backend/widgets/reportcontainer/assets/vendor/isotope | 3.0.6 | https://github.com/metafizzy/isotope/releases | Apr 6, 2018 |
| emmet.js | https://github.com/octobercms/october/blob/master/modules/backend/formwidgets/codeeditor/assets/vendor/emmet | * see below | https://github.com/emmetio/emmet/releases | After 2017 |
| dropzone.js | https://github.com/octobercms/october/blob/master/modules/backend/assets/vendor/dropzone | 5.5.1 | * see below | Latest as of 2019 |
| jCrop | https://github.com/octobercms/october/tree/develop/modules/backend/assets/vendor/jcrop | 0.9.15 | https://github.com/tapmodo/Jcrop/releases | Aug 20, 2018 |
| Froala | https://github.com/octobercms/october/tree/develop/modules/backend/formwidgets/richeditor/assets/vendor | 2.9.3 | https://www.froala.com/wysiwyg-editor | Feb 13, 2019 |
| Split.js | https://github.com/octobercms/october/blob/80775e250451ad29eb7039fea35de3811a5a6a88/modules/backend/assets/js/october.dragbar.js | 1.5.11 | https://cdnjs.com/libraries/split.js | Aug 1, 2019 |
| Spectrum | https://github.com/octobercms/october/blob/develop/modules/backend/formwidgets/colorpicker/assets/vendor/spectrum/spectrum.js | 1.8.0 | https://github.com/bgrins/spectrum/releases | Aug 22, 2016 |
| jQuery Mouse Wheel Plugin | https://github.com/octobercms/october/blob/develop/modules/system/assets/ui/vendor/mousewheel/mousewheel.js | 3.2.0 | https://github.com/jquery/jquery-mousewheel/releases | Aug 22, 2019 |

Notes

Use the correct Branch to Check Updates

Please note the developer branch may have newer updates than the master branch when checking the current version numbers of the vendor files.

jQuery Migrate

Please see here for any jQuery Migrate warnings and code updates: https://github.com/jquery/jquery-migrate/blob/master/warnings.md

Ace Editor and emmet.js

  1. October CMS has a custom file in the snippets folder called php-inline.js and can be found here:
https://github.com/octobercms/october/blob/master/modules/backend/formwidgets/codeeditor/assets/vendor/ace/snippets/php-inline.js

This file was copied into the newbuild.

  1. Emmet.js a build version can be found here:

https://github.com/ajaxorg/ace/blob/c3403f1fbdf22cfff2cb1dda584b8e04467cd372/demo/kitchen-sink/demo.js#L540

https://cloud9ide.github.io/emmet-core/emmet.js
  1. Ace Editor builds can be found here:
https://github.com/ajaxorg/ace-builds/
https://www.jsdelivr.com/package/npm/ace-builds

We do not use require.js so we use this build version:

  • src-noconflict uses ace.require instead of require.

Moments.js

Note: moment.js if I remember correctly there was an issue with the ar lang pack and we switched it over to ar-ly.js as per issue: https://github.com/octobercms/october/issues/3808

Also moments we use TimeZone as well as per: https://github.com/octobercms/october/pull/3960

Rapha毛l

From V2.2.8 onwards they changed the structure of Rapha毛l and Eve as the following:

  • raphael.min.js (includes eve and it's minified)
  • raphael.js (includes eve and it's not minified)
  • raphael.no-deps.js (doesn't include eve it's not minified)
  • raphael.no-deps.min.js (doesn't include eve it's minified)

We have decided to stay with V2.2.7 due to the build being unreadable because of webpack to run some Compatibility with October CMS. See here: https://github.com/octobercms/october/pull/4263

Moderizr

We are using the custom URI for builds:

https://modernizr.com/download?-applicationcache-audio-audioloop-backgroundsize-bgsizecover-borderimage-borderradius-boxshadow-boxsizing-canvas-canvastext-cssanimations-csscalc-csscolumns-cssgradients-cssgrid_cssgridlegacy-cssreflections-csstransforms-csstransforms3d-csstransformslevel2-csstransitions-cssvhunit-cssvmaxunit-cssvminunit-cssvwunit-flexbox-flexboxlegacy-flexboxtweener-flexwrap-fontdisplay-fontface-forcetouch-generatedcontent-geolocation-hashchange-history-hsla-indexeddb-indexeddbblob-inlinesvg-input-inputformaction-inputformenctype-inputformmethod-inputformnovalidate-inputformtarget-inputsearchevent-inputtypes-localstorage-multiplebgs-opacity-postmessage-preserve3d-rgba-sessionstorage-smil-srcset-svg-svgasimg-svgclippaths-svgfilters-svgforeignobject-textshadow-touchevents-video-videocrossorigin-videoloop-videopreload-webaudio-webgl-webglextensions-websockets-websocketsbinary-websqldatabase-webworkers-domprefixes-hasevent-mq-prefixes-printshiv-setclasses-testallprops-testprop-teststyles-dontmin

DropZone

Can't find a direct github Release list for dropzone.js instead the following web pages have the download files:

jCrop

V0.9.15 onwards requires jquery.color.js to make things easier I have combined jquery.color.js and jcrop into a single file. The CSS min file is the non-minified version for testing.

Polyfills

Polyfill for :focus-visible

| Installed Version Number | Github Release Page |
|---|---|
| V5.0.0 | https://github.com/WICG/focus-visible/releases |

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

Polyfill Location: https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/focus-visible/focus-visible.js

Github Repo: https://github.com/WICG/focus-visible

Polyfill for keyboardevent.key

| Installed Version Number | Github Release Page |
|---|---|
| V1.1.0 | https://github.com/cvan/keyboardevent-key-polyfill/releases |

Most major browsers now support event.key, however Edge has a bug issue here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11509049/ and IE11 doesn't support event.key. This polyfill fixes the Edge bug and also allows Browsers that do not support evcent.key to work properly.

Polyfill Location: https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/keyboardevent-key-polyfill/index.js

Github Repo: https://github.com/cvan/keyboardevent-key-polyfill

Deprecated code warnings in October CMS

Doing some research I have come to a small conclusion of the following results:

  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 you 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

All 39 comments

@ayumihamsaki simply put, because no one has bothered to update them. Feel free to submit PRs as desired, testing thoroughly for backwards compatibility.

@LukeTowers Will try my best and will periodically create PR's and link them to this issue, will take time due to backwards compatibility and conflicts, if other people could also try and HELP that would be great. I think there are well over 100 out of date JS files on a quick search through the master of this github.

If you want to make a plan for this let me know otherwise will just update things slowly ...

These paths:

https://github.com/octobercms/october/tree/master/modules/backend/assets/js
https://github.com/octobercms/october/tree/master/modules/backend/assets/vendor
https://github.com/octobercms/october/tree/master/modules/cms/assets/js
https://github.com/octobercms/october/tree/master/modules/cms/assets/vendor/jsdiff
https://github.com/octobercms/october/tree/master/modules/system/assets/js
https://github.com/octobercms/october/tree/master/modules/system/assets/vendor
https://github.com/octobercms/october/tree/master/modules/system/assets/ui/js
https://github.com/octobercms/october/tree/master/modules/system/assets/ui/vendor
https://github.com/octobercms/october/tree/master/modules/backend/formwidgets/codeeditor/assets
https://github.com/octobercms/october/tree/master/modules/backend/formwidgets/codeeditor/assets/js

...and any other Javascript file inside a vendor or assets folder.

@w20k is this something you're interested in helping with?

If @ayumihamsaki have time to make all those updates, I would help with testing or help with updates ;)

A was thinking to start making UI tests. Smoke Test Suite - to check default functionality, UI layout and more, with all RainLab plugins installed. But, yeah, It will take time :)

Issue: Sweet Alert last updated 2015, by Daftpunk. There is no Version Number on anything found in this folder: https://github.com/octobercms/october/tree/master/modules/backend/assets/vendor/sweet-alert

The Newest Version was last dated 2017, so it must be out of date. Plus there is now a polyfill for the new features so the polyfill would need to be added to the October Core Loader as well I think. Plus the like for like files are not there so will need to be compiled.

Ref: https://github.com/t4t5/sweetalert/releases

XRegExp is flagging up in my system as version 1.5.0 and the latest version is 4.2.0 cant find location however?

SyntaxHighlighter still using the (2013 version) 3.0.83

Modern Version is v4 at v4.0.1

Problem is now using npm and sass.

@ayumihamsaki are you able to split all these upgrades up into separate pull requests (based on which items are dependent on each other, so if depA has no other interactions in October then it can be by itself, but if depB and depC interact with each other then they should be together in a PR).

Yes will do that, no problem

I'm ready @ayumihamsaki 馃槃

@ayumihamsaki found a small bug with moment-timezone.js. We need to use moment-timezone with Zone data but the merged version doesn't contain those values.
Could you make a PR to fix it or I'll do it? 馃槈

@w20k better if you create the extra PR you know exactly what extra things are needed.

Do jQuery Cookie next as there are some security issues that may need to be patched:

location: https://github.com/octobercms/october/blob/master/modules/backend/assets/js/vendor/jquery.cookie.js

update: https://github.com/js-cookie/js-cookie/releases

v1.4.1 to v2.2.0

RFC 6265 compliance

js-cookie respects the RFC 6265 proposed standard, which was proposed in April 2011 and specifies how all modern browsers currently interpret cookie handling.

Breaking changes

js-cookie v2 is not backwards compatible with jquery-cookie or js-cookie v1.

Below is the list of everything that was changed, along with the new equivalent feature (if applicable).

  • See Spec.

New versions available:

  • Modernizr v3.7.1 (https://github.com/Modernizr/Modernizr/releases)
  • moment.js v2.24.0 (https://github.com/moment/moment/releases)
  • Rapha毛l JS v2.2.8 (https://github.com/DmitryBaranovskiy/raphael/releases)

Thanks will create some PR's for them

Note: moment.js if I remember correctly there was an issue with the ar lang pack and we switched it over to ar-ly.js as per issue: https://github.com/octobercms/october/issues/3808

Also moments we use TimeZone as well as per: https://github.com/octobercms/october/pull/3960

@ayumihamsaki could you review https://github.com/octobercms/october/pull/3616 or submit a new one updating Dropzone?

@LukeTowers No problem I will work on that tomorrow, please can you close that pr and I will create a new one for you.

I will also link the new pr I create from that one.

@ayumihamsaki would be awesome if we could merge it somehow (sweet alert). Probably needs a few fixes from our side.

@w20k If you could invest it and let me know will create a pr. I had a quick look and looks very different the complied versions.

@ayumihamsaki will do, after a few more major updates ;)

@LukeTowers @w20k I was thinking is it possible to add a label to this repo and mark up issues that fix or modify any external vendor files. For example a github issue complains about a javascript vendor file with a bug and creates a fix by editing that js file. It then makes it harder to update the javascript vendor files, because we need to search through all the issues on this repo to find any issues and pr's that have modified that vendor file. I think adding a few extra labels may help organize things a bit better.

@ayumihamsaki I would say ignore sweet alert. It works fine as it is right now as a tool used by the core. I don't believe anyone interacts with it directly so I don't see a reason to update it.

Custom Build Code for Modernizr for October CMS Backend:

https://github.com/octobercms/october/wiki/Modernizr-Custom-Build-Code

FYI: @ayumihamsaki will be doing a major Testing/Merging on weekends!

List of Update Information for Future Ref / Updating

Core Files

| JS Library Name | URI Location | Update Location | Version Number | Last Update Date |
|---|---|---|---|---|
| jQuery | See Github PR: https://github.com/octobercms/october/pull/4461 | https://github.com/jquery/jquery/releases | 3.4.1 | May 1, 2019 |
| jQuery October CMS Doc's | See Github PR: https://github.com/octobercms/docs/pull/390 |
| jQuery Migrate | See Github PR: https://github.com/octobercms/october/pull/4461 | https://github.com/jquery/jquery-migrate/releases | 3.1.0 | June 8, 2019 |

When updating the jQuery, you need to update the doc's version number as well, see here: https://octobercms.com/docs/markup/filter-theme#combiner-aliases

Reference to the jQuery library (v3.4.0) used in the back-end. (JavaScript)

Library Files

| JS Library Name | URI Location | Version Number | Update Location | Last Update Date |
|---|---|---|---|---|
| Modernizr | https://github.com/octobercms/october/tree/develop/modules/system/assets/ui/vendor/modernizr | 3.7.1 | https://github.com/Modernizr/Modernizr/releases | Mar 14 2019 |
| moment.js | https://github.com/octobercms/october/tree/develop/modules/system/assets/ui/vendor/moment | 2.22.2 | https://github.com/moment/moment/releases | Nov 2018 |
| moment-timezone | https://github.com/octobercms/october/tree/develop/modules/system/assets/ui/vendor/moment | 0.5.23 | https://github.com/moment/moment-timezone/releases | Nov 2018 |
| Rapha毛l | https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/raphael/raphael.js | 2.2.7 | https://github.com/DmitryBaranovskiy/raphael/releases | Nov 12, 2016 |
| Eve | https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/raphael/raphael.js | 0.5.4 | https://github.com/adobe-webplatform/eve/releases | Nov 12, 2016 |
| Ace Editor | https://github.com/octobercms/october/tree/develop/modules/backend/formwidgets/codeeditor/assets/vendor/ace | 1.4.5 | https://github.com/ajaxorg/ace-builds/releases | Jun 17, 2019 |
| Isotope | https://github.com/octobercms/october/tree/develop/modules/backend/widgets/reportcontainer/assets/vendor/isotope | 3.0.6 | https://github.com/metafizzy/isotope/releases | Apr 6, 2018 |
| emmet.js | https://github.com/octobercms/october/blob/master/modules/backend/formwidgets/codeeditor/assets/vendor/emmet | * see below | https://github.com/emmetio/emmet/releases | After 2017 |
| dropzone.js | https://github.com/octobercms/october/blob/master/modules/backend/assets/vendor/dropzone | 5.5.1 | * see below | Latest as of 2019 |
| jCrop | https://github.com/octobercms/october/tree/develop/modules/backend/assets/vendor/jcrop | 0.9.15 | https://github.com/tapmodo/Jcrop/releases | Aug 20, 2018 |
| Froala | https://github.com/octobercms/october/tree/develop/modules/backend/formwidgets/richeditor/assets/vendor | 2.9.3 | https://www.froala.com/wysiwyg-editor | Feb 13, 2019 |
| Split.js | https://github.com/octobercms/october/blob/80775e250451ad29eb7039fea35de3811a5a6a88/modules/backend/assets/js/october.dragbar.js | 1.5.11 | https://cdnjs.com/libraries/split.js | Aug 1, 2019 |
| Spectrum | https://github.com/octobercms/october/blob/develop/modules/backend/formwidgets/colorpicker/assets/vendor/spectrum/spectrum.js | 1.8.0 | https://github.com/bgrins/spectrum/releases | Aug 22, 2016 |
| jQuery Mouse Wheel Plugin | https://github.com/octobercms/october/blob/develop/modules/system/assets/ui/vendor/mousewheel/mousewheel.js | 3.2.0 | https://github.com/jquery/jquery-mousewheel/releases | Aug 22, 2019 |

Notes

Use the correct Branch to Check Updates

Please note the developer branch may have newer updates than the master branch when checking the current version numbers of the vendor files.

jQuery Migrate

Please see here for any jQuery Migrate warnings and code updates: https://github.com/jquery/jquery-migrate/blob/master/warnings.md

Ace Editor and emmet.js

  1. October CMS has a custom file in the snippets folder called php-inline.js and can be found here:
https://github.com/octobercms/october/blob/master/modules/backend/formwidgets/codeeditor/assets/vendor/ace/snippets/php-inline.js

This file was copied into the newbuild.

  1. Emmet.js a build version can be found here:

https://github.com/ajaxorg/ace/blob/c3403f1fbdf22cfff2cb1dda584b8e04467cd372/demo/kitchen-sink/demo.js#L540

https://cloud9ide.github.io/emmet-core/emmet.js
  1. Ace Editor builds can be found here:
https://github.com/ajaxorg/ace-builds/
https://www.jsdelivr.com/package/npm/ace-builds

We do not use require.js so we use this build version:

  • src-noconflict uses ace.require instead of require.

Moments.js

Note: moment.js if I remember correctly there was an issue with the ar lang pack and we switched it over to ar-ly.js as per issue: https://github.com/octobercms/october/issues/3808

Also moments we use TimeZone as well as per: https://github.com/octobercms/october/pull/3960

Rapha毛l

From V2.2.8 onwards they changed the structure of Rapha毛l and Eve as the following:

  • raphael.min.js (includes eve and it's minified)
  • raphael.js (includes eve and it's not minified)
  • raphael.no-deps.js (doesn't include eve it's not minified)
  • raphael.no-deps.min.js (doesn't include eve it's minified)

We have decided to stay with V2.2.7 due to the build being unreadable because of webpack to run some Compatibility with October CMS. See here: https://github.com/octobercms/october/pull/4263

Moderizr

We are using the custom URI for builds:

https://modernizr.com/download?-applicationcache-audio-audioloop-backgroundsize-bgsizecover-borderimage-borderradius-boxshadow-boxsizing-canvas-canvastext-cssanimations-csscalc-csscolumns-cssgradients-cssgrid_cssgridlegacy-cssreflections-csstransforms-csstransforms3d-csstransformslevel2-csstransitions-cssvhunit-cssvmaxunit-cssvminunit-cssvwunit-flexbox-flexboxlegacy-flexboxtweener-flexwrap-fontdisplay-fontface-forcetouch-generatedcontent-geolocation-hashchange-history-hsla-indexeddb-indexeddbblob-inlinesvg-input-inputformaction-inputformenctype-inputformmethod-inputformnovalidate-inputformtarget-inputsearchevent-inputtypes-localstorage-multiplebgs-opacity-postmessage-preserve3d-rgba-sessionstorage-smil-srcset-svg-svgasimg-svgclippaths-svgfilters-svgforeignobject-textshadow-touchevents-video-videocrossorigin-videoloop-videopreload-webaudio-webgl-webglextensions-websockets-websocketsbinary-websqldatabase-webworkers-domprefixes-hasevent-mq-prefixes-printshiv-setclasses-testallprops-testprop-teststyles-dontmin

DropZone

Can't find a direct github Release list for dropzone.js instead the following web pages have the download files:

jCrop

V0.9.15 onwards requires jquery.color.js to make things easier I have combined jquery.color.js and jcrop into a single file. The CSS min file is the non-minified version for testing.

Polyfills

Polyfill for :focus-visible

| Installed Version Number | Github Release Page |
|---|---|
| V5.0.0 | https://github.com/WICG/focus-visible/releases |

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

Polyfill Location: https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/focus-visible/focus-visible.js

Github Repo: https://github.com/WICG/focus-visible

Polyfill for keyboardevent.key

| Installed Version Number | Github Release Page |
|---|---|
| V1.1.0 | https://github.com/cvan/keyboardevent-key-polyfill/releases |

Most major browsers now support event.key, however Edge has a bug issue here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11509049/ and IE11 doesn't support event.key. This polyfill fixes the Edge bug and also allows Browsers that do not support evcent.key to work properly.

Polyfill Location: https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/keyboardevent-key-polyfill/index.js

Github Repo: https://github.com/cvan/keyboardevent-key-polyfill

Deprecated code warnings in October CMS

Doing some research I have come to a small conclusion of the following results:

  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 you 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

Not worth updating jQuery.flot, see below.

@ayumihamsaki do we really need to upgrade it? If we're not using any of the new features and there's no issues with the current version I don't see any reason to upgrade it.

@LukeTowers It's up to you, please read their changelog and see all the bug fixes they made, it seems a lot of bug fixes, but yah it would be a pain to update, https://github.com/flot/flot/blob/master/CHANGELOG.md

@ayumihamsaki Meh, not worth it in my opinion unless someone reports an issue where they actually need it upgraded for some reason, which I can't really see happening.

Done a fresh PR to try and update the Ace Editor - the last time we tried to test an update we found issues with the _themes_.

This PR is highly needed to fix many bugs and allow me to finish off several other PR's.

Hopefully this time it will play nice in testing.

This issue will be closed and archived in 3 days, as there has been no activity in the last 30 days. If this issue is still relevant or you would like to see action on it, please respond and we will get the ball rolling.

Added jquery cookie


List of Update Information for Future Ref / Updating

Core Files

| JS Library Name | URI Location | Update Location | Version Number | Last Update Date |
|---|---|---|---|---|
| jQuery | See Github PR: https://github.com/octobercms/october/pull/4461 | https://github.com/jquery/jquery/releases | 3.4.1 | May 1, 2019 |
| jQuery October CMS Doc's | See Github PR: https://github.com/octobercms/docs/pull/390 |
| jQuery Migrate | See Github PR: https://github.com/octobercms/october/pull/4461 | https://github.com/jquery/jquery-migrate/releases | 3.1.0 | June 8, 2019 |

When updating the jQuery, you need to update the doc's version number as well, see here: https://octobercms.com/docs/markup/filter-theme#combiner-aliases

Reference to the jQuery library (v3.4.0) used in the back-end. (JavaScript)

Library Files

| JS Library Name | URI Location | Version Number | Update Location | Last Update Date |
|---|---|---|---|---|
| Modernizr | https://github.com/octobercms/october/tree/develop/modules/system/assets/ui/vendor/modernizr | 3.7.1 | https://github.com/Modernizr/Modernizr/releases | Mar 14 2019 |
| moment.js | https://github.com/octobercms/october/tree/develop/modules/system/assets/ui/vendor/moment | 2.22.2 | https://github.com/moment/moment/releases | Nov 2018 |
| moment-timezone | https://github.com/octobercms/october/tree/develop/modules/system/assets/ui/vendor/moment | 0.5.23 | https://github.com/moment/moment-timezone/releases | Nov 2018 |
| Rapha毛l | https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/raphael/raphael.js | 2.2.7 | https://github.com/DmitryBaranovskiy/raphael/releases | Nov 12, 2016 |
| Eve | https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/raphael/raphael.js | 0.5.4 | https://github.com/adobe-webplatform/eve/releases | Nov 12, 2016 |
| Ace Editor | https://github.com/octobercms/october/tree/develop/modules/backend/formwidgets/codeeditor/assets/vendor/ace | 1.4.5 | https://github.com/ajaxorg/ace-builds/releases | Jun 17, 2019 |
| Isotope | https://github.com/octobercms/october/tree/develop/modules/backend/widgets/reportcontainer/assets/vendor/isotope | 3.0.6 | https://github.com/metafizzy/isotope/releases | Apr 6, 2018 |
| emmet.js | https://github.com/octobercms/october/blob/master/modules/backend/formwidgets/codeeditor/assets/vendor/emmet | * see below | https://github.com/emmetio/emmet/releases | After 2017 |
| dropzone.js | https://github.com/octobercms/october/blob/master/modules/backend/assets/vendor/dropzone | 5.5.1 | * see below | Latest as of 2019 |
| jCrop | https://github.com/octobercms/october/tree/develop/modules/backend/assets/vendor/jcrop | 0.9.15 | https://github.com/tapmodo/Jcrop/releases | Aug 20, 2018 |
| Froala | https://github.com/octobercms/october/tree/develop/modules/backend/formwidgets/richeditor/assets/vendor | 2.9.3 | https://www.froala.com/wysiwyg-editor | Feb 13, 2019 |
| Split.js | https://github.com/octobercms/october/blob/80775e250451ad29eb7039fea35de3811a5a6a88/modules/backend/assets/js/october.dragbar.js | 1.5.11 | https://cdnjs.com/libraries/split.js | Aug 1, 2019 |
| Spectrum | https://github.com/octobercms/october/blob/develop/modules/backend/formwidgets/colorpicker/assets/vendor/spectrum/spectrum.js | 1.8.0 | https://github.com/bgrins/spectrum/releases | Aug 22, 2016 |
| jQuery Mouse Wheel Plugin | https://github.com/octobercms/october/blob/develop/modules/system/assets/ui/vendor/mousewheel/mousewheel.js | 3.2.0 | https://github.com/jquery/jquery-mousewheel/releases | Aug 22, 2019 |
| jQuery Cookie Plugin | https://github.com/octobercms/october/blob/develop/modules/backend/assets/js/vendor/jquery.cookie.js | 3.0.0 beta | https://github.com/js-cookie/js-cookie/releases | Oct 5, 2019 |

Notes

Use the correct Branch to Check Updates

Please note the developer branch may have newer updates than the master branch when checking the current version numbers of the vendor files.

jQuery Migrate

Please see here for any jQuery Migrate warnings and code updates: https://github.com/jquery/jquery-migrate/blob/master/warnings.md

Ace Editor and emmet.js

  1. October CMS has a custom file in the snippets folder called php-inline.js and can be found here:
https://github.com/octobercms/october/blob/master/modules/backend/formwidgets/codeeditor/assets/vendor/ace/snippets/php-inline.js

This file was copied into the newbuild.

  1. Emmet.js a build version can be found here:

https://github.com/ajaxorg/ace/blob/c3403f1fbdf22cfff2cb1dda584b8e04467cd372/demo/kitchen-sink/demo.js#L540

https://cloud9ide.github.io/emmet-core/emmet.js
  1. Ace Editor builds can be found here:
https://github.com/ajaxorg/ace-builds/
https://www.jsdelivr.com/package/npm/ace-builds

We do not use require.js so we use this build version:

  • src-noconflict uses ace.require instead of require.

Moments.js

Note: moment.js if I remember correctly there was an issue with the ar lang pack and we switched it over to ar-ly.js as per issue: https://github.com/octobercms/october/issues/3808

Also moments we use TimeZone as well as per: https://github.com/octobercms/october/pull/3960

Rapha毛l

From V2.2.8 onwards they changed the structure of Rapha毛l and Eve as the following:

  • raphael.min.js (includes eve and it's minified)
  • raphael.js (includes eve and it's not minified)
  • raphael.no-deps.js (doesn't include eve it's not minified)
  • raphael.no-deps.min.js (doesn't include eve it's minified)

We have decided to stay with V2.2.7 due to the build being unreadable because of webpack to run some Compatibility with October CMS. See here: https://github.com/octobercms/october/pull/4263

Moderizr

We are using the custom URI for builds:

https://modernizr.com/download?-applicationcache-audio-audioloop-backgroundsize-bgsizecover-borderimage-borderradius-boxshadow-boxsizing-canvas-canvastext-cssanimations-csscalc-csscolumns-cssgradients-cssgrid_cssgridlegacy-cssreflections-csstransforms-csstransforms3d-csstransformslevel2-csstransitions-cssvhunit-cssvmaxunit-cssvminunit-cssvwunit-flexbox-flexboxlegacy-flexboxtweener-flexwrap-fontdisplay-fontface-forcetouch-generatedcontent-geolocation-hashchange-history-hsla-indexeddb-indexeddbblob-inlinesvg-input-inputformaction-inputformenctype-inputformmethod-inputformnovalidate-inputformtarget-inputsearchevent-inputtypes-localstorage-multiplebgs-opacity-postmessage-preserve3d-rgba-sessionstorage-smil-srcset-svg-svgasimg-svgclippaths-svgfilters-svgforeignobject-textshadow-touchevents-video-videocrossorigin-videoloop-videopreload-webaudio-webgl-webglextensions-websockets-websocketsbinary-websqldatabase-webworkers-domprefixes-hasevent-mq-prefixes-printshiv-setclasses-testallprops-testprop-teststyles-dontmin

DropZone

Can't find a direct github Release list for dropzone.js instead the following web pages have the download files:

jCrop

V0.9.15 onwards requires jquery.color.js to make things easier I have combined jquery.color.js and jcrop into a single file. The CSS min file is the non-minified version for testing.

Polyfills

Polyfill for :focus-visible

| Installed Version Number | Github Release Page |
|---|---|
| V5.0.0 | https://github.com/WICG/focus-visible/releases |

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

Polyfill Location: https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/focus-visible/focus-visible.js

Github Repo: https://github.com/WICG/focus-visible

Polyfill for keyboardevent.key

| Installed Version Number | Github Release Page |
|---|---|
| V1.1.0 | https://github.com/cvan/keyboardevent-key-polyfill/releases |

Most major browsers now support event.key, however Edge has a bug issue here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11509049/ and IE11 doesn't support event.key. This polyfill fixes the Edge bug and also allows Browsers that do not support evcent.key to work properly.

Polyfill Location: https://github.com/octobercms/october/blob/master/modules/system/assets/ui/vendor/keyboardevent-key-polyfill/index.js

Github Repo: https://github.com/cvan/keyboardevent-key-polyfill

Deprecated code warnings in October CMS

Doing some research I have come to a small conclusion of the following results:

  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 you 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

Update Modernizr from V3.6.0 to 3.8.0

https://github.com/octobercms/october/pull/4923

Was this page helpful?
0 / 5 - 0 ratings