fix: add location property to confetti

[Arukuen]

fixes #17

Summary by CodeRabbit

• New Features
  • Confetti animations now support configurable origin locations. Users can choose from nine positions: center (default), edges (top, right, bottom, left), and corners (top-left, top-right, bottom-left, bottom-right).

[coderabbitai]

📝 Walkthrough

Walkthrough

A location selection feature is added to the confetti action type. The backend introduces a location property with nine directional options (center, top, right, bottom, left, top-left, top-right, bottom-left, bottom-right). The frontend dynamically calculates confetti origin coordinates based on the selected location and target element.

Changes

Cohort / File(s)	Summary
Backend Configuration src/action-types/class-action-type-confetti.php	Adds a location select property with nine positional options and center as default value.
Frontend Position Logic src/action-types/frontend/confetti.js	Introduces LOCATION_MAP for position-to-coordinate mapping. Retrieves location value and calculates dynamic origin based on target element's bounding rect or mapped position.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🎉 A rabbit hops with confetti cheer,
Positions nine, both far and near,
From center dancing, corners too,
Each location gets its cosmic view!
The confetti now knows where to play,
A delightful burst in every way! 🐰

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: add location property to confetti' accurately and concisely summarizes the main change of adding a location property to the confetti action type.
Linked Issues check	✅ Passed	The PR implements all objectives from issue #17: adds a location dropdown to the confetti action [#17], defaults to 'center' [#17], and includes positional options like top-left, top-center, etc. [#17].
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the location property feature for confetti as specified in issue #17; no out-of-scope modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/17-confetti-location

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🤖 Pull request artifacts

file	commit
pr18-interactions-18-merge.zip	f3d1695

[coderabbitai]

🧹 Nitpick comments (1)

src/action-types/frontend/confetti.js (1)

34-41: Consider clamping origin values for off-screen elements.

When the target element is partially or fully outside the viewport, rect.left or rect.top can be negative (or larger than viewport), potentially producing origin values outside the [0, 1] range. Depending on how the confetti library handles out-of-bounds origins, this could cause unexpected behavior.

🛡️ Optional defensive fix

 if ( targetEl !== window && targetEl !== document ) {
   // Get the percentage of the center of the target element to the screen width
   const rect = targetEl.getBoundingClientRect()
-  origin.x = ( rect.left + ( rect.width * pos.x ) ) / window.innerWidth
-  origin.y = ( rect.top + ( rect.height * pos.y ) ) / window.innerHeight
+  origin.x = Math.max( 0, Math.min( 1, ( rect.left + ( rect.width * pos.x ) ) / window.innerWidth ) )
+  origin.y = Math.max( 0, Math.min( 1, ( rect.top + ( rect.height * pos.y ) ) / window.innerHeight ) )
 } else {
   origin = pos
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/action-types/frontend/confetti.js` around lines 34 - 41, The origin
calculation can yield values outside [0,1] for off-screen targets; after
computing origin.x and origin.y in the block that uses
targetEl.getBoundingClientRect() (using rect, pos, origin), clamp each with
Math.max(0, Math.min(1, value)) so origin.x = Math.max(0, Math.min(1, (rect.left
+ rect.width * pos.x) / window.innerWidth)) and similarly for origin.y; keep the
fallback else branch (origin = pos) as-is or also clamp pos if desired.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/action-types/frontend/confetti.js`:
- Around line 34-41: The origin calculation can yield values outside [0,1] for
off-screen targets; after computing origin.x and origin.y in the block that uses
targetEl.getBoundingClientRect() (using rect, pos, origin), clamp each with
Math.max(0, Math.min(1, value)) so origin.x = Math.max(0, Math.min(1, (rect.left
+ rect.width * pos.x) / window.innerWidth)) and similarly for origin.y; keep the
fallback else branch (origin = pos) as-is or also clamp pos if desired.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b429a79b-a07e-4b78-952a-09bec61de478

📥 Commits

Reviewing files that changed from the base of the PR and between cec35db and f3d1695.

📒 Files selected for processing (2)

• src/action-types/class-action-type-confetti.php
• src/action-types/frontend/confetti.js