Active-CSS / active-css

The epic event-driven browser language for UI with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?
https://activecss.org
Other
42 stars 7 forks source link

New toggle-attribute command. #249

Closed bob2517 closed 2 years ago

bob2517 commented 2 years ago

This is a quick one for the core, so I'm adding this in for 2.10.0. Just need to write up the docs for it.

Follows spec: https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

ACSS syntax:

button:click {
  input {
    toggle-attribute: disabled;
  }
}

Equivalent JS Syntax (without including code for additional ACSS features such as event persistence):

var button = document.querySelector("button");
var input = document.querySelector("input");

if (button && input) {
  button.addEventListener("click", function() {
    input.toggleAttribute("disabled");
  }
});
bob2517 commented 2 years ago

Includes the optional force option per the JS spec.

bob2517 commented 2 years ago

Now on the 2.10.0 branch.