add/remove "disabled" for controls (or any attribute)

[WebMechanic]

Hello,

how can I add/remove the disabled attribute for a <button> (or any empty/boolean HTML attribute) based on some expression result?

I loop over a list of pantry items and create a set of unique buttons from it. (here's an early Codepen)

Each button has an action to add "its item" to a group bill like so:

add( group(key:sku, quantity:1, label:replace(label,'|',' '), price:price, subtotal:price), bill)

// eventually results in several
{
  "key": "frites",
  "quantity": 1,
  "label": "🍟 Pommes Frites",
  "price": 2.5,
  "subtotal": 2.5
}

bill is rendered in a table where each added pantry item becomes one tr that also features +/- buttons for the quantity and a remove button.

I can find the information if a particular pantry itemis alreday billed by using [count(bill where key=sku)] but I can't use this as the value for a button's disabled state. I was hoping for some mv- attribute like "if (count(bill where key=sku) > 0) insert 'disabled' attribute" else do nothing.

Thank you.

---

I often use "boolean" data attributes w/o a value in my CSS selectors [data-foo] instead of [data-foo="true"] and [data-foo="false"]. Just like the disabled attribute I'd like to add or remove them.

---

I have further questions about dealing with the contents of bill and moving it around in the (local) mv-storage, but I'll keep that for another day :D

[DmitrySharabin]

Hey there, 👋🏻

Since Mavo is already aware of some boolean attributes (like hidden; disabled on form elements; autoplay, buffered, and loop on <audio> and <video>, etc.), any expression that is resolved to true will add this attribute. If the expression is resolved to false, the attribute will be removed by Mavo automatically.

That's why something like this works out of the box:

<button disabled="[5 > 3]">Disabled</button>
<button disabled="[5 > 10]">Enabled</button>

However, to make other attributes boolean, we need an extra step — we must tell Mavo that they are boolean, i.e., we need to register those attributes. Mavo API is for the rescue (sorry, I don't know another way to do it without custom JS):

Mavo.Elements.register({
  "@attribute": {
    datatype: "boolean"
  }
});

For example, to make data-foo boolean, we should write:

Mavo.Elements.register({
  "@data-foo": {
    datatype: "boolean"
  }
});

To see it in action, see this pen.

Hope it helps!

P.S. I'm eager to see what you'll get in the end. Your pen looks awesome (to my taste 😉).

[WebMechanic]

Thank you!

I now know what I did wrong!

Blyme! After I found the expression to tell me if a pantry item is already placed, I tried using an if() expression inside the disabled attribute -- which of course rendered the attrib no matter what.

This one now works thanks to your examples!

<button disabled="[count(bill where key=sku) > 0]">

So brilliant! Somehow I didn't this this implication when I looked at the operator examples 😵. Just too obvious 😁 The simplicity of just using a boolean expression inside squared brackets will help me a lot in other places!
I franky don't really understand Mavo's way of dealing with and naming data structures (list, group, collection). I know arrays and objects and node lists... The old dog and new tricks dilemma, you know.
I often just don't know which (Mavo) type applies, when and why and where things exist (or not) or are available as properties or become properties or part of "my" data etc.
I then read the docs, but can't get my head around it :) It's also a bit of a "forest for a tree" thing.

Mavo is already aware of some boolean attributes

must have missed this part in the docs.
I actually wouldn't mind writing some JS to teach Mavo about some other boolean (data) attributes. Thanks for that tip, too!

I'm eager to see what you'll get in the end.

So am I !! 😁
... especially when it comes to managing the different(?) input and output data stores and mixing and moving their contents.

Your pen looks awesome

That's kind! Thank you very much!
It's just a funny little GUI aimed to be used on phones or tablets. I'm still working on the CSS tho 🙄

---

If things go well that pen might as well become the little cute sister of a much more complex app we're building. Maybe with fewer emojis ...

As I mentioned elsewhere I'm essentially playing with Mavo to test prototypes and bare-bone workflow designs for said app we began implementing in Vue.js, but the constant massive Node setup required to even get a simple dumb HTML page done is so utterly annoying.

I was looking for something smaller and "self contained". Although I heard of Mavo "a long time ago", only now did I have a very good usecase to finally get my hands on it.