Widgets with a context

[NicolasSiver]

Hello, guys.

I'm exploring the idea to use widgets to inject plugin data.

Today, I'm asking plugin users to change their theme and include templates:

https://github.com/NicolasSiver/nodebb-plugin-ns-awards/tree/ea9491fd50b80fe28131c09544da1ee5a511827d#profile-template

Would be great, if we can use widgets for that (or a new entity). But it's not possible since widgets do not provide a context. For example, we could inject extra data in every post in the topic view, to accomplish it, the widget should capture post context.

If it will work with widgets, theme developers could start to provide a widget placeholders for posts, account/profile, etc.

[pitaj]

I'm not sure what you're asking. Are you asking for widget templates to have have access to the general surrounding page template data?

[NicolasSiver]

I'm asking for the context when widget data is requested. Or it could be a different abstraction if feature-request does not align well with a widget design.

For example, if widget is defined in the post template, it will provide post context with every request for render.

[barisusakli]

This might be possible by passing ajaxify.data to https://github.com/NodeBB/NodeBB/blob/master/public/src/widgets.js#L45. Give that a shot and see if you can use the page data in your widget.

[NicolasSiver]

If widgets implemented in a way, that all DOM elements are scanned on the page, then it's possible to accomplish, but it will require some convention.

Just an example for post.tpl

<div class="post-user">
        <div class="icon">
            <a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
                <!-- IF posts.user.picture -->
                <img component="user/picture" data-uid="{posts.user.uid}" src="{posts.user.picture}" align="left" itemprop="image" />
                <!-- ELSE -->
                <div component="user/picture" data-uid="{posts.user.uid}" class="user-icon" style="background-color: {posts.user.icon:bgColor};">{posts.user.icon:text}</div>
                <!-- ENDIF posts.user.picture -->
		    </a>
            <div class="status-badge {posts.user.status}" component="user/status"  title="[[global:{posts.user.status}]]"></div>
            <div class="points-badge" component="post/points" data-points="{posts.points}" data-pid="{posts.pid}"></div>
        </div>

        <div class="group-label-container">
            <div class="widgets" widget-area="post-user-card" widget-context="pid"></div>
            <!-- IMPORT partials/topic/badge.tpl -->
        </div>

where pid will require extracting data-pid value from the closest parent component to the widget definition. So the hook for the widget will have also:

{
    context: {
        pid: "80800"
    }
}

[NicolasSiver]

Multiple will look like this:

<div class="widgets" widget-area="post-user-card" widget-context="pid,uid"></div>

[psychobunny]

This might be possible by passing ajaxify.data to https://github.com/NodeBB/NodeBB/blob/master/public/src/widgets.js#L45. Give that a shot and see if you can use the page data in your widget.

I prefer this, seems to make sense. Any objection of using this instead @NicolasSiver ?

[NicolasSiver]

I'm not sure ajaxify can help here.

Here is an example. Let say there is a widget area in the post.
How will such widget know, what is Author ID or Post ID?

For example, filter for posts provides a context. If widgets will have same capabilities, it will be possible to make plugins without the requirement to edit templates. It will open brand new capabilities with theme creators.

[pitaj]

I don't think it's possible to do that at the moment. This relates closely to #4728 though.

[NicolasSiver]

It's a feature request. ;)
Maybe you have a better idea how to achieve it.