Closed Simone4e closed 1 year ago
@nolimits4web is it possible to improve the function to create a popup of those values? Because obviously with multiple values they don't fit the layout well
For now I've created my own version which could be an interesting feature:
$f7.smartSelect.create({
openIn: 'popup',
formatValueText: function(values) {
return (values.length === 0) ? '' :
`<a href="#" class="button button-round button-outline button-small tooltip-init" data-popup>Preview values</a>
<div class="popup my-popup">
<div class="view">
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Popup</div>
<div class="right">
<a class="link popup-close">Chiudi</a>
</div>
</div>
</div>
<div class="page-content">
<div class="list simple-list">
<ul>
${values.map(el => `<li>${el}</li>`).join('')}
</ul>
</div>
</div>
</div>
</div>
</div>`;
},
on: {
closed: function(select) {
//create popup instance
const popup = $f7.popup.create({
el: '.my-popup'
});
//Create event for prevent to open select instead of popup preview
select.valueEl.querySelector('[data-popup]').addEventListener('click', (e) => {
e.stopPropagation();
popup.open();
});
}
}
});
As you can see from the example above, a link + popup is created automatically whenever there is a minimum of 1 value, at this point an instance of the popup is created and an event is assigned to the button which will prevent it from opening del select if the link is clicked. This feature allows not only to keep the layout clean, but to have all the selected options always visible especially for complex structures.
edit 2:
For prevent error with multiple smartSelect just use const uniqueId = 'popup-preview-${f7.utils.id()}';
as class + data-popup.
It would be nice to have a method for returning HTML instead of plain text into
<div class="item-title">
:Example:
In my specific case having
optgroup
I'd like to group them byoptgroup
name with apopup
/tooltip
to show all the values.Example of solution:
Or a simple preview button with open popup.