Repository navigation
Broad modernization of JS - #901
JoeGermuska merged 7 commits into
Conversation
This is a comprehensive modernization of the TimelineJS3 codebase to use modern JavaScript patterns and APIs while maintaining backward compatibility with the existing data model. ## Major Changes ### Event System - Replace custom Events class with native EventTarget - All classes now extend EventTarget for standard browser event handling - Maintains backward-compatible API (on/off/fire methods) ### Class Inheritance - Remove custom TLClass.extend() pattern - Convert all classes to ES6 class syntax with native extends - Remove classMixin() pattern in favor of proper inheritance chain - Create clear inheritance: EventTarget → Events → I18NMixins → DOMMixins ### Animation System - Replace legacy Morpheus-based animation (420+ lines) with modern implementation - Use Web Animations API with CSS transitions fallback - Simpler, more performant, and standards-compliant - Maintains same API for backward compatibility ### Browser Support - Remove all IE-specific detection and workarounds - Remove obsolete browser checks (IE9, Opera, etc.) - Use modern browser APIs exclusively - Simplified Browser.js from 68 to 44 lines ### DOM Utilities - Modernize DOM.js to use current browser APIs - Use getBoundingClientRect() for positioning - Simplify transform handling with modern CSS - Better JSDoc documentation ### Async Patterns - Convert callback-based makeConfig() to return Promises - Maintain backward compatibility with deprecated callback support - Use async/await throughout for cleaner async code - Replace ajax() calls with modern fetch() ### Date Classes - Convert TLDate, BigDate, BigYear from TLClass.extend to ES6 classes - Use const/let instead of var - Maintain all functionality and data model compatibility ## Files Modified (25 files) - Core: Events.js, Browser.js, ConfigFactory.js, Util.js (removed TLClass.js) - DOM: DOM.js, DOMMixins.js - Animation: Animate.js - Date: TLDate.js - Language: I18NMixins.js - UI: Draggable.js, MenuBar.js, Message.js, Swipable.js - Timeline: Timeline.js - TimeNav: TimeAxis.js, TimeEra.js, TimeGroup.js, TimeMarker.js, TimeNav.js - Slider: Slide.js, SlideNav.js, StorySlider.js - Media: Media.js, types/Text.js ## Backward Compatibility - Public Timeline API unchanged - Data model completely unchanged - Legacy callback support maintained with deprecation warnings - All existing timelines will continue to work ## Benefits - Modern, maintainable codebase - Better IDE support and autocomplete - Smaller bundle size (removed 400+ lines of legacy code) - Standards-compliant with native browser APIs - Easier to contribute to and understand
Modern browsers no longer need IE-specific handling for PDFs. Simplified logic to only use Google Docs viewer for Dropbox URLs which need special handling.
|
Have been waiting for this for some time now and will be following this closely so I can bring things up to date in code :) Thankyou @JoeGermuska ! Can confirm that this PR works prefectly in place in existing code, and nice not to have all the warnings and manual fixes |
|
Could this Broad modernization of JS become a seperate fork? |
honestly I'd rather just merge it in, at least insofar as the changes are purely internal. I am just not really clear on how to suitably test for regressions given that there are very few unit tests in TimelineJS3 and most of where things might go wrong are probably more like integration testing. Open to ideas about how to improve the testing, and given renewed interest in this, I will probably err on the side of merging it in sooner than later -- but more reports would be welcomed |
Resolve TLDate.js conflict: keep BigDate as an ES6 class and port master's human-scale getDisplayDate override to method syntax. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Events: listeners were tracked by a string key built from the callback and context, so every bound function (and every context object) collided. A second bound handler for the same event was silently dropped, and a shared handler registered with two contexts only ran with the first. Track listeners by identity instead, restoring the old semantics: off() without a context matches any context. Also restore hasEventListeners(), which StorySlider still calls. Animate: Web Animations ran with fill: 'forwards' and were never removed, so a finished animation kept overriding later inline style writes. After any slide change the timenav slider ignored mouse-wheel scrolling and dragging. On finish, commit styles and cancel the animation, and call the complete callback (previously never called). stop() now commits the current position before cancelling, so the element stays put instead of snapping back to where the animation started. ConfigFactory: log errors embedded in JSON loaded from a plain JSON URL, as the pre-modernization code did. Add tests for Events and Animate, restore an I18NMixins subclass test, and cover makeConfig's JSON path. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
I used some Claude Code credits to modernize the code base. The goal is to not have any visible changes. So far it seems to work, but since it's not urgent, i'll wait to merge until some more testing can happen.