rabbibotton / clog

CLOG - The Common Lisp Omnificent GUI
Other
1.49k stars 102 forks source link

CLOG-TOOLS:CLOG-BUILDER `New Bootstrap Page` and `test` #181

Closed johndebord closed 2 years ago

johndebord commented 2 years ago

Not sure if I'm doing something wrong. But when I click test in the Clog Builder to test my Custom HTML [Block] it doesn't seem to be working. For example, with this HTML snippet:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

The dropdown menu works when on the editable page (e.g., in my case: http://127.0.0.1:8080/builder-custom?bid=3867284996&curl=%2Fbootstrap.html) (and when the proper parent controls are frozen (e.g., custom-2 and dropdownMenuButton1)).

But when I click test in the Clog Builder to test it all out I'm (expectedly) redirected to the page http://127.0.0.1:8080/test, and the dropdown menu doesn't work.

rabbibotton commented 2 years ago

I have not worked much with bootstrap (no not as well tested), but I'll take a look soon.

rabbibotton commented 2 years ago

First comment, don't use ids, CLOG will assign ids under the covers. You can keep the ids and clog will assign the their names in clog based on the id but then you have insure you never duplicate that html on the same browser window. If you need access in JavaScript to a specific element not going through Lisp you can use for example $('[data-clog-name="button-1"]')

rabbibotton commented 2 years ago

So if you drop your html in to a custom html block and then double clicking the control (double clicking "freezes" it and so you actually then interact with the html and not the "placer" it is working, strangely you need to double click twice (as if another placer was placed there), but as you point out, it does not work out when executed with the test button.

rabbibotton commented 2 years ago

The latest git has this working now.

johndebord commented 2 years ago

Custom HTML Block now works when executed with the test button, but I tested it with Custom HTML, and it doesn't work. I can try to make a PR later if I get around to it. I'm assuming that the changes involving Custom HTML Block just have to be ported over to Custom HTML.

rabbibotton commented 2 years ago

Try using the convert to div button after creating a working custom html block and save and reload the panel. Let me know if after doing that if works or not.

rabbibotton commented 2 years ago

It doesn't look the bootstrap drop down is going to work when made it to separate controls, ie not as the custom html block. Part of the issue is the extra attributes added the html. data-bs-* that are stripped out by builder on import. They remain when protected as a custom block.

I plan on a clog-bootsrap plugin for the builder and will be able to handle it as part of that. If the custom block doesn't work for your immediate needs let me know. I assume no issues with other bootstrap controls.