diff --git a/src/action-types/class-action-type-confetti.php b/src/action-types/class-action-type-confetti.php index c00779d..577c160 100644 --- a/src/action-types/class-action-type-confetti.php +++ b/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' ], diff --git a/src/action-types/frontend/confetti.js b/src/action-types/frontend/confetti.js index b9d55e1..50fa024 100644 --- a/src/action-types/frontend/confetti.js +++ b/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 )