Putting Sabaki in a div box and resizing it

[ghost]

Hi,

I want to integrate Sabaki as part of a website. It works fine, but no matter how I resize the div box I am putting the interface in, the website always shows the Sabaki interface in the whole window. I would like to be able to put the interface in a div box, resize it and finally place it somewhere on a particular website.

At the moment it seems the interface fills up the whole and ignores div boxes.

I already played around with css files, but I wasn't able to fix that.

Thanks,
Any help is greatly appreciated

[yishn]

Have you tried assigning your container div the position: relative; style? A cursory search on the code base reveals that some elements (Busy overlay, drawers, ...) have fixed positioning, which is not optimal for including Sabaki in a container div. I think we can change those to absolute positioning without any complications.

[ghost]

I just tried it out, but still the same issue. I see. OK thanks for the help!

[yishn]

Sabaki uses Preact, a view framework. Currently, Preact will inject all the elements into document.body here in App.js, so that has to be changed to your div container... Let me know if this helped!

[ghost]

Ok, I changed it to the div container but still no different result it seems.

[climu]

Hi,

Changing document.body to document.getElementById("sabaki") in App.js indeed loads sabaki inside the <div id="sabaki">.

Then it's just css. I fear there will be quite some css tweaks to have it work properly but that's doable. I ll dig into that later.

Context: I am working with czabo to integrate sabaki into OSR website.

[yishn]

@climu Sounds great! I would greatly appreciate it if you would share your findings with us here. Maybe these CSS tweaks can be incorporated into Sabaki itself.

[climu]

Sure thing. At some point, I ll fork so you can follow what we are doing and we can discuss PR.

[climu]

Allright, I pushed a first draft in this commit.

Issues so far:

• The #input-box > .inner element is wrongly placed (top black rectangle on printscreen). I failed to understand what this element does so I don't know where to place it.

• The menu toggle icon behaviour is wrong now:

  • click a on the menu icon once open it.
  • click again will open another menu on top of the other instead of closing it.

Do you have any idea how I could have mess with the menu behaviour?

I will try to go toward this global behaviour: Sabaki doesn't load on pageload but we need to call a method such as sabaki_load('id_of_the_div') to load sabaki inside a div. Then other optional arguments to load a specific sgf, maybe the move-number. I think if we have this it can easily be used inside any website as an alternative to wgo.

[yishn]

The input box and drawers are visible because Sabaki does not hide them explicitly, it just moves them out of the viewport, in this case #sabaki. Maybe add overflow: hidden; to #sabaki?

As for the menu, Sabaki creates a #popupmenu-overlay element which covers the entire UI when the menu opens. It will intercept any clicks from outside the menu itself so Sabaki can close the menu. Maybe it's somehow positioned wrongly? The styles for the menus in the web versions are located here.

[climu]

Thanks. overflow: hidden; on '#sabaki' worked fine.

There is still quite some issues with elements being wrongly positioned and sized. I ll keep digging

[climu]

@yishn : Are the elements size calculated by some js function? Would such calculation be relative to the viewport size?

If no it's only css. If yes, we might need to change this resize js function.

Thanks for your help!

[yishn]

@climu I've fixed the bugs in the most recent version of Sabaki Web. Can you try and see if the menu is working on your end now?

I think size calculations are always relative to the viewport size, but I'm not entirely sure.

[yishn]

I've slept on this and I think in general, the easiest and correct way to include Sabaki into a web page is via an <iframe>. There are several issues when including Sabaki in a div:

• Styles: Sabaki's styles are not isolated; they can interfere with the parent web site and vice versa
• Sabaki uses id on HTML elements, which can interfere with the parent web site. This also prevents one from having multiple instances of Sabaki on a web site.

[climu]

Makes sense. I guess we will go this way.

Thanks for your work.

[climu]

For the record we never added sabaki using iframe.

I think the proper way would be to use your work to create a sgf viewer that would load inside a html element of a website as wgo does. It could be usefull for website who wants to show a sgf viewer easily.

One could create that using your libraries (shudan, go-board, sgf) with inspiration from sabaki.

I fear it's a bit over my head so I will pass on that. Just sharing thoughts in case anyone comes here.

[climu]

Here is an attempt.