Skip to content

Fix $tw.utils.pulseElement()#9741

Open
pmario wants to merge 1 commit intoTiddlyWiki:masterfrom
pmario:fix/6835-restore-pulse-element
Open

Fix $tw.utils.pulseElement()#9741
pmario wants to merge 1 commit intoTiddlyWiki:masterfrom
pmario:fix/6835-restore-pulse-element

Conversation

@pmario
Copy link
Copy Markdown
Member

@pmario pmario commented Mar 16, 2026

Fix $tw.utils.pulseElement() — replace missing $tw.browser.animationEnd

Problem

$tw.utils.pulseElement() has been broken because it references $tw.browser.animationEnd, which was removed from the core and is undefined. The function silently fails — the event listener never fires, so the pulse CSS class is never cleaned up. Additionally, no .pulse CSS class was defined in the vanilla theme.

Fixes #6835

Changes

  1. core/modules/utils/dom/dom.js — Replace $tw.browser.animationEnd with $tw.utils.convertEventName("animationEnd"), which already exists in the core and correctly resolves browser-specific animation end event names.

  2. themes/tiddlywiki/vanilla/base.tid — Add .pulse CSS class and @keyframes pulse animation (lightgreen background flash, opacity 0.3→1 over 0.8s).

How to use

$tw.utils.pulseElement() is a debugging utility. It briefly highlights a DOM element with a green flash to help visualise which nodes are being rendered or refreshed.

Browser console:

// Pulse a specific tiddler frame
$tw.utils.pulseElement(document.querySelector(".tc-tiddler-frame"));

// Pulse the sidebar
$tw.utils.pulseElement(document.querySelector(".tc-sidebar-scrollable"));

From widget code (e.g. in a render or refresh method):

$tw.utils.pulseElement(this.domNodes[0]);

This is particularly useful when debugging widget refresh behaviour — add $tw.utils.pulseElement(this.domNodes[0]) to a widget's refresh() method to see exactly when and which elements get refreshed.

🤖 Generated with Claude Code

…onEnd

Use $tw.utils.convertEventName("animationEnd") and add pulse CSS animation

Fixes TiddlyWiki#6835

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 16, 2026

Deploy Preview for tiddlywiki-previews ready!

Name Link
🔨 Latest commit 2248512
🔍 Latest deploy log https://app.netlify.com/projects/tiddlywiki-previews/deploys/69b75788ce662f000836383a
😎 Deploy Preview https://deploy-preview-9741--tiddlywiki-previews.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link
Copy Markdown

Confirmed: pmario has already signed the Contributor License Agreement (see contributing.md)

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 16, 2026

📊 Build Size Comparison: empty.html

Branch Size
Base (master) 2487.2 KB
PR 2487.4 KB

Diff: ⬆️ Increase: +0.2 KB


⚠️ Change Note Status

This PR appears to contain code changes but doesn't include a change note.

Please add a change note by creating a .tid file in editions/tw5.com/tiddlers/releasenotes/<version>/

📚 Documentation: Release Notes and Changes

💡 Note: If this is a documentation-only change, you can ignore this message.

@pmario
Copy link
Copy Markdown
Member Author

pmario commented Mar 16, 2026

@Jermolene ... I did manually test the function and it works for me. Then I did instruct Claude to create a new branch. Make a commit with a commit message. Push and create a new PR with the OP text.

@pmario pmario changed the title Fix $tw.utils.pulseElement() — replace missing $tw.browser.animationEnd Fix $tw.utils.pulseElement() Mar 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] $tw.utils exports .pulseElement(element), which doesn't work since $tw.browser.animationEnd doesn't exist

1 participant