observe event not always working when declared inside components - proposal for @observe for syntax clarity

bob2517 commented 2 years ago

Workaround until fixed is to move the observe outside of the component. That workaround will work for document scoped components only.

Investigating...

dragontheory commented 2 years ago

No.

dragontheory commented 2 years ago

Would need to be @observe or on :click.

dragontheory commented 2 years ago

Something like this?

--grid-column-01: 250px 0 1fr 5px 300px 0; [default]
--grid-column-02: 250px 0 1fr 5px 300px 200px;

dragontheory commented 2 years ago

Something like this?

--grid-column-01: 250px 0 1fr 5px 300px 0; [default]
--grid-column-02: 250px 0 1fr 5px 300px 200px;

I didn't even think of using CSS variables... I'm sure I have not thought through this well enough...

dragontheory commented 2 years ago

The term 'grid' is used a lot with tables. This is not a table. This is for layout. Just in case. I've had entire conversations with DEVs talking about two different things.... lol

dragontheory commented 2 years ago

I don't want ACSS to add a class to the <body> because I already have the layout system in place to do that. Trying to expand on existing systems in place.

bob2517 commented 2 years ago

Probably, yeah :) You know more about it I do...

You've got several options I think, all of them using JS, unless you can think of an ACSS way to do it.

At any point during any action command, you can use the curly equals syntax to run JS.

eg.

render: "{= 1 + 1 + 1 =} is the magic number";

I dunno if that would help. If you need to get something by using a JavaScript expression, you could do that.

If you need to do more than that, I would set up a custom command, which is quite an exciting thing to do. It's a bit like using run, except you create your own ACSS command.

dragontheory commented 2 years ago

At any point during any action command, you can use the curly equals syntax to run JS.

eg.
render: "{= 1 + 1 + 1 =} is the magic number";

OK, that's awesome...

I see that now in the ACSS component splitter code...

bob2517 commented 2 years ago

You can do a lot with that - but you only get an expression, which doesn't give you a lot of code to write with.

Here's an example of a custom command I wrote to use the mprogress plugin, which is an animation used as a progress indicator. I've used this before and after ajax calls to give something like the Google wait indicator between loading bits:

@command mprogress {=
    // Note: The setTimeouts are needed as otherwise we get a race condition with mProgress as it can barf out while trying to start and stop at the same time.
    vars loadingProgress, loadingProgressCo;
    switch (o.actVal) {
        case 'init':
            loadingProgress = new Mprogress({
                speed: 0,
                template: 3
            });
            loadingProgressCo = 0;
            break;

        case 'start':
            loadingProgressCo++;
            setTimeout(() => {
                if (loadingProgressCo == 1) {
                    loadingProgress.start();
                }
            }, 0);
            break;

        case 'stop':
            loadingProgressCo--;
            setTimeout(() => {
                if (loadingProgressCo == 0) {
                    loadingProgress.end();
                }
            }, 0);
            break;
    }
=}

You use that in ACSS, like to initialise in body:init:

mprogress: init;

Then when you need it you use:

mprogress: start;

and to stop it you use:

mprogress: stop;

bob2517 commented 2 years ago

That's all you have to do to create your own ACSS commands.

Brief instructions:

To use ACSS variable inside a custom command, you need to declare them with "vars" in the JavaScript. This is the only non-JavaScript code in there. It just lets ACSS put the ACSS variables into the scope for the command.

vars myVar, myOtherVar;

dragontheory commented 2 years ago

Looks like the splitter DEV has a method to get the CSS styles... https://github.com/nathancahill/split/tree/master/packages/split-grid#gridtemplatecolumns-gridtemplaterows

That's all you have to do to create your own ACSS commands.

Brief instructions:

To use ACSS variable inside a custom command, you need to declare them with "vars" in the JavaScript. This is the only non-JavaScript code in there. It just lets ACSS put the ACSS variables into the scope for the command.
vars myVar, myOtherVar;

Shouldn't I use the &:componentOpen command?

bob2517 commented 2 years ago

A component isn't the same as a custom command. With a custom command you a CREATING AN ACSS COMMAND.

It's the ultimate in mega-powerful awesomeness.

bob2517 commented 2 years ago

Like you could re-create your own add-class command, that only ever added the class "Dave" to an element, regardless of what you typed.

bob2517 commented 2 years ago

You could call it "add-dave".

bob2517 commented 2 years ago

ACSS is fully extensible, except no one has gone that far yet with it, except me.

bob2517 commented 2 years ago

You can prototype CSS commands with it. Just create the custom command using Houdini or whatever and away you go.

dragontheory commented 2 years ago

You could call it "add-dave".

I'm sorry Dave. I'm afraid I can't do that.

bob2517 commented 2 years ago

Introducing the brand new "add-dave" command!

@command add-dave {=
    targetSelector.classList.add("dave");
=}

(Available variables can be found here - above I use targetSelector which contains the target selector that will run the command. http://causejs.net/manual/create-command.html )

To use:

button:click {
    add-dave: .test;
}

But it won't matter what class you add, "dave" is the only one that will be added. Ever.

Copy that and use it! It's probably the most basic ACSS command you could have.

Making ACSS commands is a lot of fun... I actually prefer to write them rather than using the run command.

bob2517 commented 2 years ago

I'm sorry Dave. I'm afraid I can't do that.

Lol. Yes.

dragontheory commented 2 years ago

Introducing the brand new "add-dave" command!
@command add-dave {=
  targetSelector.classList.add("dave");
=}
(Available variables can be found here - above I use targetSelector which contains the target selector that will run the command.)

To use:
button:click {
    add-dave: .test;
}
But it won't matter what class you add, "dave" is the only one that will be added. Ever.

Wait, what?

Your example clears things up. I can make my own commands?

bob2517 commented 2 years ago

Yes!

dragontheory commented 2 years ago

And all it is is vanilla JS?

bob2517 commented 2 years ago

Yup.

dragontheory commented 2 years ago

Oh my goodness...

bob2517 commented 2 years ago

Indeed.

bob2517 commented 2 years ago

For meatier things that ACSS can't handle, you can write your own commands. It doesn't come up often, but it does come up sometimes, like in probably this case.

With this you can use JS to get the CSS property value and do whatever you need.

Or you could use the run command, or even just call a JS func with the func command.

So you've got some options.

bob2517 commented 2 years ago

Someone could even convert a whole JavaScript API into ACSS commands. Like the old navigator API.

There's loads of commands that I could have written, but I haven't - mainly because I haven't wanted to make the core too massive.

dragontheory commented 2 years ago

Wow. I got to think about this...

dragontheory commented 2 years ago

So in essence, these custom commands are extending ACSS?

bob2517 commented 2 years ago

That is exactly what it is.

dragontheory commented 2 years ago

Wonder if I could put Angular in there... (evil snicker)

bob2517 commented 2 years ago

Hmmm.... only if you can do it in native JS. It's not magic JS.

dragontheory commented 2 years ago

Already have a resize command?

bob2517 commented 2 years ago

Which resizes what?

dragontheory commented 2 years ago

A element resizer... like the one in my example. You said you use it in your documentation?

bob2517 commented 2 years ago

With the drag handles? No, there isn't one currently.

But yeah, one could be proposed. Like anything, it needs a proper spec which covers enough general cases to be worth doing.

bob2517 commented 2 years ago

One off things that are rarely used won't get in the core.

At the very beginning, I wrote a picture carousel command, but that was too niche so I removed it. It's got to have a general use and be very flexible.

Like slide-up and slide-down commands :) That would be useful.

dragontheory commented 2 years ago

With the drag handles? No, there isn't one currently.

But yeah, one could be proposed. Like anything, it needs a proper spec which covers enough general cases to be worth doing.

Any web app, even email have resizers. But virtually NONE of them use modern more efficient CSS values.

bob2517 commented 2 years ago

True. Ok - I guess you are proposing it. You can start an issue on it if you like.

The command will need to be designed. The command design alone is half the battle of getting something like that coded.

dragontheory commented 2 years ago

You can start an issue on it if you like.

Yes sir! Will do that now...

Sweet!

I can help out with the CSS efficiency side and even try the command side if you like.

bob2517 commented 2 years ago

Yes, that would be great - I've got to try and get some outstanding things finished and not get diverted onto anything more interesting.

But if you get stuck, just gimme a yell.

Does this take you away from your grid issue though?

dragontheory commented 2 years ago

Does this take you away from your grid issue though?

Still need to come up with a more immediate solution, yes. But you have given me much to ponder. Gracias senior!

bob2517 commented 2 years ago

Ok great. I'm off for the evening then. G'night!

Active-CSS / active-css

observe event not always working when declared inside components - proposal for @observe for syntax clarity #239