Lazy Day, Blockers, Bleh - Day (3&4) of Coding

Yesterday

I'm feeling pretty under the weather today (right only on day 3 lol), so thought I'd relax and take things a little easy today.

Done!

• played around with the styling more
• went through more svelte tutorials

Today

I felt reinvigorated (if not a bit guilty) starting fresh, with lots of new features to work on.

One of my main goals today was to implement context menus to make certain actions more available. The plan is to put "edit", "delete", and "create" button into these. Sadly, the solution was not as easy as a prepackaged library, and I'm still facing some blockers.

I wanted to do this as simply as possible, so I'm just doing:

<div on:contextmenu={setPosition}
 Aida
</div>

<div class="context-menu" style="top: pos.x; left: pos.y">
  <button>Edit</button>
</div

This succeeds in making the context menu come up, but has an issue. The context menu needs to close whenever another one opens so the logic can't be contained in just one Friend component. This means I'll need to lift up the context menu state to track which one is open. It will also be a challenge if they select a place from the page outside or regular click somewhere else.

Also because I was planning on having clicking on a empty space be the "Create" context menu, I'll need to have two different context menu trackers going.

For now, I'm happy with my basic buggy lil context menu, but will work on it this next week.

Comments

[Zoppatorsk]

For the context menu I think making it into a svelte-action would make sense.
Here is a video series about it..
I never used actions myself, but I did go through that video series before to learn what it is about.

If not using an action, what i wld probably do is just have one component on App level. And do all the needed code there, so detect witch node was clicked and act accordingly, but yeah, maybe that is not the best way to do it.

But yeah, there is so many ways to do things to accomplish the same goal..
For me I noticed I often forget about some nice Svelte features and just write regular Javascript.. but yeah, I think it's also an advantage with Svelte, u have the choice.

[Aida El Kouri]

Ah thanks for the recommendation, haven't gotten deep enough in svelte yet to play with the actions feature. Seems like they are the equivalent of React hooks but more DOM-y?

Yeah, second options seems like what I was considering initially. Only issue is detecting when an area outside of there is clicked to hide the window? So I guess dead space, but actions might be useful for that if the action exists on all nodes.

No clue yet lol, I decided to take a pause on it to get my energy up so I can tackle it with confidence instead of throwing spaghetti at the wall (which is way funner)

[Zoppatorsk]

Yeah, me neither, just know the basics but never really had a need to implement actions.

What I usually do is just google what I want to do, usually there is some REPL or something that shows something similar. I try to understand how it works and then make my own implementation with the bits I need.

here is an example how to detect click outside an element.
REPL

The interesting thing is the part that actually do the detection

function onClick(event) {
            if (!element.contains(event.target)) {
                callbackFunction();
            }
        }

This is very similar to how I have done in the past with regular javascript, using .contains(event.target) and maybe some other check to see if target is valid and take actions accordingly