Application interactjs in weweb

Ask us anything How do I?
1

I got the NPM application inserted thanks to your help.
Since I am a complete beginner I have no clue how to use it. Am just a bit at a loss. Since I also find on the site interactjs no useful documentation for me as a beginner.

Can someone help me here.
I have understood that I insert an element on the screen.
this should work afterwards with the resizing (https://interactjs.io/) so like here I can move the window bigger and smaller and on the screen incl. the reset. So exactly what I am actually looking for. But how and where do I have to insert this in the weWeb. So the codes and where. Is currently mysterious to me. Maybe someone can tell me where I can find a document or video here for beginners, or maybe someone can help me. Would be dear.

2

Hi @Raab112 :wave:

The npm plugin is currently in beta with some limitations so the first things to say is I’m not 100% sure the library you’re trying to use will work in WeWeb.

That said, could you share a bit more information about:

  • what you’re trying to achieve (maybe with an example from another website?),
  • what you already have set up in your project, and
  • where you’re stuck?

This will give us a good starting point to figure this out together.

Or if you’d rather work with someone side-by-side to help you, you might want to consider @raydeck’s State Change office hours. I haven’t tried them myself but heard many good things from other WeWeb community members :slight_smile:

1 Like
3

Hallo Joyce
Basically I just need the function as seen on the page under resizing. I want to be able to move the windows freely and change the size as well as the reset so that the windows are back at the start position. I managed to insert the application via NPM, but how do I get it to work in Weweb? No idea. Where to insert the JS, Css and HTML code. Is this enough for the function. I can’t find anything where it is described. And as a beginner, it is really difficult to understand.

4

Yeah I completely understand! I don’t have a lot of experience working with external libraries so can’t be of much help but I’ll ask someone on the team to have a look.

5

Hey @Raab112 :wave:

I’m struggling to understand what you’re trying to do.

This JS library is made to resize a specific element (like a div), but you’re saying that you want to resize the whole window? Is that right?

If that’s so, it’s impossible with this library.

6

Hello Quentin,

my plan is to have many of these windows after. In which are different data. in one of these windows should be e.g. a calendar. In another should be for example a kind of document storage and so on. But the user should move the windows himself to the place he wants to have and also adjust the size so that he can work well with it. Basically like a kind of pinboard where you attach notes and place them as you want or need it. The window resizing would exactly fulfill my requirement as I imagine it.

7

Hi! I checked this package on unpkg and it looks like it installs via UMD. So the technical ingredients are here. The challenge is going to be in the cooking.

Using the npm plugin in weweb is a pretty advanced technique any day of the week. Using interactjs will involve being in javascript a lot. I bet 9 out of 10 weweb users would find this pretty challenging. So I recommend patience with yourself to learn it, and not the expectation that it works out of the box.

But while this is not beginner territory, it’s just a matter of time and work to wrangle this kind of low-code tech. I also recommend you to chatGPT for trying out some javascript - it’s been a wonderful accelerant for State Change members.

5 Likes
8

Hi,

I was kind of able to get this working today but there is still one strange quirk that I wasn’t able to resolve. The issue is that interactjs requires you to add a class to the element you want to interact with. It seems that when WeWeb builds the element, it places the class on a child element. This means that when you try and move the element the element you can see stays in place and an unstyled (invisible element moves). We can add CSS (in the browser) to the invisible element to see the interactions more clearly.

As a workaround, I tried wrapping the element I wanted to move in another div and placed the class on the outer div. This worked and the child element was interactable and stylable in the editor.

Perhaps the WeWeb team will be able to explain the unexpected behavior around adding class names.

Here’s the JS that makes the elements moveable and resizeable. It’s copied out of the interact docs and isn’t perfect. The items jolt when you have more than one. The .magic class is the class I added to the parent of the element I actually wanted to move.

const position = { x: 0, y: 0 }

interact('.magic')
.draggable({
  listeners: {
    start (event) {
      console.log(event.type, event.target)
    },
    move (event) {
      position.x += event.dx
      position.y += event.dy

      event.target.style.transform =
        `translate(${position.x}px, ${position.y}px)`
    },
  }
})
.resizable({
    edges: { top: true, left: true, bottom: true, right: true },
    listeners: {
      move: function (event) {
        let { x, y } = event.target.dataset

        x = (parseFloat(x) || 0) + event.deltaRect.left
        y = (parseFloat(y) || 0) + event.deltaRect.top

        Object.assign(event.target.style, {
          width: `${event.rect.width}px`,
          height: `${event.rect.height}px`,
          transform: `translate(${x}px, ${y}px)`
        })

        Object.assign(event.target.dataset, { x, y })
      }
    }
  })

I placed that code in an on-page load workflow. I was not able to make the interactions work in the editor. I had to publish the app to staging to test.

4 Likes