fix: add location property to confetti (#18)

Author: Arukuen

src/action-types/class-action-type-confetti.php

@@ -27,7 +27,22 @@ public function initialize() {
 
 			$this->keywords = [];
 
-			$this->properties = [];
+			$this->properties = [ 'location' => [
+					'name' => __( 'Location', 'interactions' ),
+					'type' => 'select',
+					'options' => [
+						[ 'label' => __( 'Center', 'interactions' ), 'value' => 'center' ],
+						[ 'label' => __( 'Top', 'interactions' ), 'value' => 'top' ],
+						[ 'label' => __( 'Right', 'interactions' ), 'value' => 'right' ],
+						[ 'label' => __( 'Bottom', 'interactions' ), 'value' => 'bottom' ],
+						[ 'label' => __( 'Left', 'interactions' ), 'value' => 'left' ],
+						[ 'label' => __( 'Top Left', 'interactions' ), 'value' => 'top-left' ],
+						[ 'label' => __( 'Top Right', 'interactions' ), 'value' => 'top-right' ],
+						[ 'label' => __( 'Bottom Left', 'interactions' ), 'value' => 'bottom-left' ],
+						[ 'label' => __( 'Bottom Right', 'interactions' ), 'value' => 'bottom-right' ],
+					],
+					'default' => 'center',
+				] ];
 
 			$this->targets = [
 				[ 'value' => 'trigger' ],

src/action-types/frontend/confetti.js

@@ -1,11 +1,24 @@
 /**
  * This is the frontend script loaded in the frontend if the action is used.
  */
+
+const LOCATION_MAP = {
+	center: { x: 0.5, y: 0.60 },
+	top: { x: 0.5, y: 0.10 },
+	bottom: { x: 0.5, y: 0.90 },
+	left: { x: 0.10, y: 0.5 },
+	right: { x: 0.90, y: 0.5 },
+	'top-left': { x: 0.10, y: 0.10 },
+	'top-right': { x: 0.90, y: 0.10 },
+	'bottom-left': { x: 0.10, y: 0.90 },
+	'bottom-right': { x: 0.90, y: 0.90 },
+}
+
 InteractRunner.addActionConfig( {
 	confetti: {
 		initAction: action => {
 			action.initActionFunction( () => {
-				const origin = { x: 0.5, y: 0.65 }
+				const location = action.getValue( 'location' ) || 'center'
 
 				const targets = action.getTargets()
 				let targetEl = targets.length ? targets[ 0 ] : window
@@ -15,11 +28,16 @@ InteractRunner.addActionConfig( {
 					targetEl = window
 				}
 
+				let origin = { x: 0.5, y: 0.60 }
+				const pos = LOCATION_MAP[ location ] || LOCATION_MAP.center
+
 				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 / 2 ) ) / window.innerWidth
-					origin.y = ( rect.top + ( rect.height / 2 ) + 20 ) / window.innerHeight
+					origin.x = ( rect.left + ( rect.width * pos.x ) ) / window.innerWidth
+					origin.y = ( rect.top + ( rect.height * pos.y ) ) / window.innerHeight
+				} else {
+					origin = pos
 				}
 
 				window.interactions.confetti( origin )