Hi!
i have created a widget with popup but i don’t understand how i can close the popup manually…
this is the widget with poup:
for now i helped myself with swipeToClose: true but there must be a better way to close the popup.
i don’t want to spam in the beautifull main ui examples thread so i hope it’s ok to open a new thread…
oh-link and oh-button both have a complimentary popupClose property as well. Just include a link or a button on the popup itself and set popupClose to the same popup class .myPopupOpenDI (you don’t even need the popup action):
- component: oh-link
config:
text: Close this popup
popupClose: .myPopupOpenDI
oh man, i thought the issue was resolved but now i found another (big?) problem:
when i put multiple widgets with the .myPopupOpenDI on the same page only one works as expected, but all the others open the same popup with the same item…
both widgets open the Dimmer Widget with “Licht Wohnzimmer” als Item.
When i remove the second widget the first widget works correctly with “Licht_Esstisch”.
so i suppose the popupOpen parameter must be unique?
looks like it works with this workaround (popUp parameter = itemname + “popUp”):
Sure. As it appears that each instance on the page has a different item associated with it, you already have a unique identifier that can be accessed throughout the widget which is fully compatible with a css class name: props.item.
All you need to do is incorporate the props.item string into the class name of the popup in the widget. For example:
popupOpen: ='.myPopupOpenDI' + props.item
The only trick to this is that in the popup itself
class:
- '.myPopupOpenDI' + props.item
won’t work because of the way the array elements are processed. However, as long as this is the only class that you are assigning to the popup up you can just use
class: ='.myPopupOpenDI' + props.item
just like in the open and close calls. If you need multiple classes, then it gets only a little more difficult because you need to build the array as a string.
thanks for the fast reply! after some thinking (obviously this couldn’t come to my mind before posting…) i was able to incorporate the props.item into the class name of the popup (see edit of my last post)
is my approach on closing the popup with passing the class name of the popup in the widget to the widget:popup itself wrong?
i have this in the popupwidget:
and it looks like it’s working. i must confess, i don’t really understand the 2nd part of your post ( the “class” part)… if that approach is better (less wrong?) i’ll try to figure it out, but if it’s all the same i think i’ll stick with my actual code
It’s not wrong. It works just as well. The only real downside is that it makes an additional configuration point for the widget which isn’t really necessary because the props.item is already configured. That’s not really a huge downside.
It’s quite possible to conceive of a widget where this approach is actually preferable because the widget is sufficiently generalized that there is more than one copy of the widget for the same item in which case the props.item trick would be insufficient and a props.popup class name or at least suffix would be required.
Multiple css classes can be applied to an object. To handle this in the yaml widget definitions, the easiest option often is to represent this list of classes as an array. You are already familiar with this syntax, it’s all you’re doing every time you put several components in the same space and start each component definition with -.
some slot:
- component 1
config etc.
- component 2
config etc.
- component 3
config etc.
That’s an array of three components in one slot.
So if you needed to add multiple classes to a component you just use that array syntax:
The only point I was making is that when you are building the array like that you cannot have dynamic strings (that is strings that are built out of other pieces and variables), those expressions just aren’t processed at the moment. So, if you tried:
class: ='popup_'+props.item
and
class:
- 'popup_'+props.item
you would get different results. The first comes out as you would expect and the class is popup_some_oh_item_name but the second doesn’t calculate anything and the class winds up just being 'popup'+props.item. There are workarounds for this if you run into the problem, but it’s only a problem if: 1) you are trying to add more than one class to your component and 2) some of those classes need to be dynamically defined.