Allow JavaScript object functions for ACSS variables in expressions

[bob2517]

Things like {myArray}.includes("toast") were not able to be done in @if statements, var commands, etc.

I've been meaning to do this for a while, and it's partially done offline. Need to allow functions on other variable types as I've only so far implemented it on objects.

Note to self - only allow that on the statements and the var command and not in renders. It already works when used with vars in the JavaScript blocks.

[dragontheory]

New question.

Was looking at these pages in the documentation... https://activecss.org/manual/if-completely-visible.html https://activecss.org/manual/scroll-into-view.html

Is it possible to check if to check on click if another elements is NOT completely visible, then scroll it into view?

Something like this that on click checks if <dataset-list><list-item> element is not completely visible and if not, scroll said element into view?

app-list list-item:click {
  dataset-list list-item.selected:not:if-completely-visible {
    dataset-list list-item.selected {
      scroll-into-view: true;
    }
  }
}

[bob2517]

Yes.

You can either put it in an if statement, wrapping around a target selector like this:

app-list list-item:click {
  @if not-if-completely-visible(dataset-list list-item.selected) {
    dataset-list list-item.selected {
      scroll-into-view: true;
    }
  }
}

Or in the event selector, like this:

app-list list-item:not-if-completely-visible(dataset-list list-item.selected):click {
    dataset-list list-item.selected {
      scroll-into-view: true;
    }
}

Or you could do this, by wrapping the if statement around the action command:

app-list list-item:click {
  dataset-list list-item.selected {
    @if not-if-completely-visible(dataset-list list-item.selected) {
      scroll-into-view: true;
    }
  }
}

[bob2517]

All the conditionals have the "not" equivalent built-in to the syntax.

So if-completely-visible becomes not-if-completely-visible, if-inner-text becomes not-if-inner-text, etc.

[bob2517]

There is no not() function in ACSS - currently not() only works in CSS. I am thinking about adding it for ACSS conditionals though, like not(if-completely-visible(dataset-list list-item.selected)), but it's not supported yet. You don't need it but it would be nice to have, to get the conditionals more aligning to CSS syntax.

[dragontheory]

Perfecamundo! I will check out each when I get to work.

[bob2517]

Ayyyy....... lol :)

[bob2517]

Committing what I've done on this so far. Prototype functions are only currently working on arrays and object. I need to consolidate the existing syntax for variables before doing any more on this otherwise it's going to get messy in the core.

[bob2517]

Leaving this for now. Options so far:

1) Leave it as it is and add a new syntax, maybe triple-curlies for evaluation. Can probably already do this with {= =} but it's not as flexible and adds complexity, which is the wrong direction for ACSS.

2) Rewrite the whole variable system use dollar prefixes for all variables and have the variable type hidden but declared as context when used, eg. use a simple function to make a variable reactive (which would allow the possibility of reactive combinations in a single text-node). Use double-curlies before all variables and for manipulation use JS syntax. This would be massively simpler in the long-term for developers to remember and make it easier to implement in the core. Blade templates from Laravel would be a similar concept. If I did do that, ACSS would go to version 3. I need to go over all the possible scenarios to make sure it's the right move before doing this, as it would break everything.

[bob2517]

This issue will get handled by https://github.com/Active-CSS/active-css/issues/269, and can be closed off when that is done.

[bob2517]

Handled by new dollar variable syntax, eg. $myArray.includes("toast").

Marking as done.

[bob2517]

Closing in preparation for release.