Skip to content
This repository was archived by the owner on Aug 14, 2025. It is now read-only.
This repository was archived by the owner on Aug 14, 2025. It is now read-only.

Using JSServe.jsrender #3

@SimonDanisch

Description

@SimonDanisch

Awesome package :) Looking forward to see it being used & registered.
One thing that should be changed though is this:

    landing2 = App() do session::Session
        CssMakieLayout.CurrentSession = session
        ...
    end

This is pretty hacky, since Session isn't something that's easily globally shared.
Also, it's somewhat unnecessary for any user to set it, if you properly overload JSServe.jsrender(s::Session, my_object).
I haven't looked into this in detail, but I'd propose something like this:
All the functions like zstack should define a small custom struct, like this:

struct ZStack 
    items::Vector{Any}
    attributes::Dict{Symbol, Any}
end
# properly add attributes like: activeidx::Observable=nothing class="", anim=[:default], style="", md=false
zstack(items...; kw...)  = ZStack(Any[items...], Dict{Symbol, Any}(kw))

function JSServe.jsrender(session::Session, zstack::ZStack)
       .....
        # add on(activeidx) event
        onjs(session, activeidx, js"""function on_update(new_value) {
            const activefig_stack = $(item_div)
            for(i = 1; i <= $(height); ++i) {
                const element = activefig_stack.querySelector(":nth-child(" + i +")")
                element.classList.remove("CssMakieLayout_active");
                if(i == new_value) {
                    element.classList.add("CssMakieLayout_active");
                }
            }
        }
        """)
    end
    return item_div
end

Anything else will be pretty hacky, but this should pretty nicely integrate with JSServe, so one can return any CssMakieLayout struct in an App.
Also, I'd put formatstyle into a css file and insert it in all jsrender calls as an asset: DOM.div(Asset("path/to/formatstyle.css")).
JSServe will make sure, that it will get included only one time, so don't worry about putting it in every jsrender.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions