I am facing a scenario where the following events take place:
- I have an avatar with three possible coding challenges
- a) clicking on the avatar's face opens a debug console
- b) clicking on a speaker or mic icon toggles them on/off
- c) clicking between the icons allows moving the avatar
ISSUE:
The handle-click event for each item (a, b, and c) is conflicting with each other. I resolved this by adding the following code:
FOR THE MOVEABLEAVATAR:
if (event.target.id !== "moveableavatar") {
return;
} else {
console.log("Event SHOW DEBUG: ", event);
... action taken here... no concerns
}
FOR THE DRAG AVATAR EVENT:
public avatarMoveClick(event: any) {
if (event.target.id !== "iconscont") {
return;
} else {
console.log("AvatarMoveCLICK EVENT: ", event);
//Capture move event
... action taken here... no concerns
}
}
FOR CLICKING ON THE ICONS (MIC or SPEAKER)
if (event.target.id !== "mic" && event.target.id !== "spkr") {
return;
} else {
console.log("AvatarMoveCLICK EVENT: ", event);
//Capture move event
... action taken here... no concerns
}
This scenario occurs when you click on MIC, SPEAKER, or the FACE of the avatar. The dragging only works when the mouse is placed "BETWEEN" the MIC and SPEAKER, which is functional but not ideal.
I'm using Angular 5 along with ngDraggable, which works great!
<div class="moveableavatar">
<img src="avatarimg.png" alt="" />
</div>
Next to it is the chat window... utilizing voice commands...
<div class="moveablechatwindow">
<i src="avatarimg.png" alt=""></i>
<div class="userspeaks">Applications</div>
<i src="avatarimg.png" alt=""></i>
<div class="avatarresponds"></div>
</div>
Dumbed down version of the above HTML can be seen here.
All the code mentioned above (HTML) is wrapped in
<app-avatar></app-avatar>Goal:
I aim to allow users to freely click and drag anywhere without interfering with the MIC and SPEAKER handle-click events triggered by:
(click)="handleClick($event,'mic')"
and
(click)="handleClick($event,'speaker')"
which control the microphone and speaker functionality respectively.
In addition, I want to prevent the DEBUG CONSOLE from opening when clicking and dragging the avatar's face, which has been addressed with the initial code provided.
When moving the avatar, I intend for the chatbox to move along with it, just like shown in the image. However, the chatbox fades after 5 seconds but does not disappear completely.
Here is my attempt at handling the synchronized movement of both: [code snippet shared]
The issue arises when the transformation value for
this.css.moveablechatwindow.transformthis.css object structure:
css = {
moveableWrapper: {
transform: {
newxy: "",
orgxy: ""
}
}
I acknowledge that there may be imperfections in the current setup, but I plan on refining it later.
If there are any errors or omissions in the details provided, please accept my apologies.