Re: Execute Custom JS on Infinite Scroll

A little while ago I read this thread - today that strange white gave me an idea. How cool would it be to have an STL viewer right in the forum?

So I got down to work and programmed a small snippet quick & dirty. Everything can be reached via custom codes in the ACP. No plugin required.

Preview nodebb stl viewer preview How does it work?

Your liked files will be automatically converted:

[My Model](https://example.com/assets/model.stl)

turns out with a little 3d cube attached. A click on this cube toggles the STL-Model preview.

Bildschirmfoto 2021-03-06 um 14.22.23.png

As showed in the preview video, the STL-Viewer is also available in the composer preview.

Bildschirmfoto 2021-03-06 um 14.24.18.png

Compatibility

This little snippet is also mobile responsive 😵 You can view the 3d models on mobile devices like a boss. Full responsive. 💪

Code

Just at these snippets to custom HTML / CSS / Javascript via the ACP.

style.css

iframe.stl-model-viewer{ min-width: 200px; max-width: 600px; width: 100%; min-height: 300px; max-height: 500px; height: 100%; border: 1px solid lightgray; border-radius: 10px; display: block; margin-bottom: 25px; margin-left: auto; margin-right: auto; -webkit-box-shadow: 0px 13px 29px -15px rgba(0,0,0,0.75); -moz-box-shadow: 0px 13px 29px -15px rgba(0,0,0,0.75); box-shadow: 0px 13px 29px -15px rgba(0,0,0,0.75); }

javascript.js

var re = /(?:\.([^.]+))?$/; // NO BACKSLASH AT THE END! var base_url = "https://your-nodebb-url.com"; $(window).on('action:posts.loaded action:ajaxify.end action:composer.preview', function(data) { $('a').each(function(){ var href = $(this).attr("href"); var ext = re.exec(href)[1]; if(ext == "stl"){ var indicator = Math.floor(Math.random() * 1000000) + 1 var currentModelUrl = $(this); if (href.substring(0, 8) !== 'https://'){ href = base_url + href; } var alreadyLinked = $(this).closest('p').find('a#open-stl-model').attr('data-url'); if(!alreadyLinked){ $(' <a style="margin-left: 5px; cursor: pointer;" title="3D-Modell anzeigen" id="open-stl-model" data-url="' + href + '" related="' + indicator + '"><i class="fa fa-cube"></i></a>').insertAfter(currentModelUrl); $(' <div id="' + indicator + '" style="display: none;" data-url="' + href + '"><iframe class="stl-model-viewer" src="https://www.viewstl.com/?embedded&url=' + href + '&color=white&bgcolor=transparent&shading=flat&rotation=yes&clean=yes&noborder=yes&orientation=top&edges=no"></iframe></div>').insertAfter( $(this).closest("p") ); } } }); }); $(window).on('action:ajaxify.end action:composer.preview', function(data) { $('a#open-stl-model').click(function(){ var thisLink = $(this); var related = thisLink.attr("related"); $('div#' + related).slideToggle(); }) })

Before running:

Change the base url to fit your nodebb path:

// NO BACKSLASH AT THE END! var base_url = "https://your-nodebb-url.com";

In case of https://community.nodebb.org/ it would be:

// NO BACKSLASH AT THE END! var base_url = "https://community.nodebb.org";

It is used to convert local links e.g /assets/uploads/top_pla_3_holes.stl to public links: https://community.nodebb.org/assets/uploads/top_pla_3_holes.stl

Adjustments

You can take a look at viewstl.com/embed to adjust your model viewer inside of javascript.js.

$(' <div id="' + indicator + '" style="display: none;" data-url="' + href + '"><iframe class="stl-model-viewer" src="https://www.viewstl.com/?embedded&url=' + href + '&color=white&bgcolor=transparent&shading=flat&rotation=yes&clean=yes&noborder=yes&orientation=top&edges=no"></iframe></div>').insertAfter( $(this).closest("p") );

There are thinks like:

Shading Rotation Orientation Model Color Background Color Limitations

The files which are linked in the topic have to be accessible by viewstl.com so private files wont work here I think. 🤔
Maybe you do have to enable cross site origin for viewstl.com as well.

This should be just a little playaround with some nodebb given features. As mentioned: it's a quick & dirty plugin which uses third party services. But there is also a standalone javascript plugin available: https://www.viewstl.com/plugin/ which you could use in a nodebb plugin.

See this topic more as a simple feature and as well as an inspiration for other plugins in this direction you could make.

Maybe its interesting for @Aleksei or someone else. 🙂

Thanks for reading. 👋

@dogs this is great! 👍 thanks

@dogs thanks for reporting, it will redirect to login now.

@kadmy , sure: upload the file controls.png from the plugin folder \node_modules\bxslider\dist into NodeBB assets. The file looks like the bitmap below.

controls.png
Then change the LESS to

.my-wrapper { box-shadow: none; border: none; .bx-prev { background: url(/assets/uploads/controls.png) no-repeat 0px -32px; } .bx-next { background: url(/assets/uploads/controls.png) no-repeat -43px -32px; } }

This file contains the standard bxSlider. But you can use any other icon. Just upload it or point to the url of your preference.

Please update to v0.1.2 for more fixes.

@baris thank you for all the details.  i'll try to "fix" it by myself.

As @PitaJ mentioned header.tpl doesn't have access to the page data, but it is possible to give it access via plugins.

The hook you need to use is filter:middleware.renderHeader. Here is a sample on how to make thumbs available to header.tpl

myPlugin.filterMiddlewareRenderHeader = async function (hookData) { if (hookData.templateValues.template.name === 'topic') { hookData.templateValues.thumbs = hookData.data.thumbs; } return hookData; };

The hook looks like this

const hookReturn = await plugins.hooks.fire('filter:middleware.renderHeader', { req: req, res: res, templateValues: templateValues, data: data, }); return await req.app.renderAsync('header', hookReturn.templateValues);

templateValues is used to render the header and data is the data used to render the page.

This only works for cold loads though since when you ajaxify on the client side the header is not re-rendered so you need to handle client side ajaxify and update the header too.

$(window).on('action:ajaxify.end', function (ev, data) { if (ajaxify.data.template.name === 'topic') { // code to update header using ajaxify.data.thumbs } }};

Hope this helps.

It finally showed up - but that definitely took a quite a while. Maybe I was fooled by cached content?

@mana Thank you

Is there some way to hide all topics within a category from all feeds (recent, popular, new, the digest)?

I need the topics to be accessible (and usable) to all users directly, but not searchable or showing up at random.

@pitaj Many thanks for your effort 🙏

Okay so I just npm link'ed my plugin again so I thought some file will be updated. But they weren't.

Here is my full source code of libary.js:

'use strict'; /* NodeBB Basic Plugin Libraries */ const controllers = require('./lib/controllers'); const plugin = {}; /* Third Party Libraries */ const Discord = require("discord.js"); const fs = require("fs"); // Nodebb Discord Bot const config = JSON.parse(fs.readFileSync("./utils/config.json", "utf-8")); var client = new Discord.Client(); let debug = true; plugin.init = function (params, callback, client) { myDebug("nodebb-discord-bot-started"); callback(); }; function myDebug(msg){ if(debug){ console.log(msg); } } module.exports = plugin; 2021-01-12T10:46:19.318Z [4567/4689] - error: Error: ENOENT: no such file or directory, open './utils/config.json' at Object.openSync (fs.js:462:3) at Object.readFileSync (fs.js:364:35) at Object.<anonymous> (/home/ubuntu/nodebb-linked-modules/nodebb-plugin-makesmart-discord-bot/library.js:15:30) at Module._compile (internal/modules/cjs/loader.js:999:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.Plugins.requireLibrary (/home/ubuntu/nodebb/src/plugins/index.js:70:39)

I tried it with path again:

// Nodebb Discord Bot var configpath = path.join(__dirname, 'utils', 'config.json'); const config = JSON.parse(fs.readFileSync(configpath, "utf-8")); var client = new Discord.Client();

an suddenly ... it worked! o.O

2021-01-12T10:51:15.711Z [4567/4765] - info: [api] Adding 2 route(s) to `api/v3/plugins` 2021-01-12T10:51:15.889Z [4567/4765] - info: Routes added 2021-01-12T10:51:15.933Z [4567/4765] - info: NodeBB Ready 2021-01-12T10:51:15.943Z [4567/4765] - info: Enabling 'trust proxy' 2021-01-12T10:51:15.972Z [4567/4765] - info: NodeBB is now listening on: 0.0.0.0:4567

I think it was really because I ran npm link again. Funny.* I'm sorry. Most of the time, the problem is in front of the computer. 🙄

But still a strange behavior in my opinion. Well ... Good to know for the future. @PitaJ as mentioned thank you for you effort. 🙏

For any others having the same issue:

Read the Stackoverflow Solution posted by @PitaJ right here If it still not work use npm link in ./nodebb again to refresh something in the plugin folder ...I dont know tbh ... 😄

Whats the right way to use third party libraries?

I tried to do it descriped in the docs:

Using Third-Party Libraries - NodeBB Documentation

But it doenst work.

I want to use Swiper in my Theme:

I tried it with

"modules": { "swiper.js": "node_modules/swiper/swiper-bundle.min.js" }

in client.js i used:

require(['swiper'], function (Swiper) { var mySwiper = new Swiper('.swiper-container', { // Optional parameters direction: 'vertical', loop: true, // If we need pagination pagination: { el: '.swiper-pagination', }, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // And if we need scrollbar scrollbar: { el: '.swiper-scrollbar', }, }) });

The Javascript from Swiper does not load.

Can you help me?

I also treid to import it directly via html

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

and I also copied the contents of:
https://unpkg.com/swiper@6.4.5/swiper-bundle.js

and createt a file unter /lib/swiper-bundle.min.js. Nothing worked for me. The JS is still not loading...

Looking forward to your answers! 🙂

I fixed it.

I am sorry. In my development I use grunt. But it seems that I doesnt load new libraries if installen. So I determinated the process Ctrl+C and restarted it using grunt. The librariers are loaded and the third party library works well now using:

"modules": { "swiper.js": "node_modules/swiper/swiper-bundle.min.js" } require(['swiper'], function (Swiper) { var mySwiper = new Swiper('.swiper-container', { ... ... ... }) }

Hey!

Is it possible to post as Guest via the write API?

I tried to reply to a topic via:

const bodyParameters = { _uid: 0, content: "It works!" };

But it does not work. Is it possible to post as a Guest and set a username with the request or is it only possible to use the write api with a existing uid?

Looking forward to your answers.

I still have a question. Everything works fine at the moment. Send data from the client to the server isn't a problem now.

But how can I emit a event to all connected clients serverside?

Something e.g

myPlugin.emit('plugins.publishMessage', {data: "Some data"}, function(err, result) { console.log(result); });

After one hour spending searching different topics and some code I found the solution.

Besides the custom clientside Sockets

const myPluginSockets = require.main.require('./src/socket.io/plugins');

you have to define the Server Sockets too

const myPluginSockets = require.main.require('./src/socket.io/plugins'); const serverSockets = require.main.require('./src/socket.io');

Now you can emit events from server side to the clients:

serverSockets.server.sockets.emit('messageReceive', data);

to receive the event clientside, you can use following in ur main.js file:

socket.on('messageReceive', function(data){ console.log(data); });

Client console output:
{msg: "my message"}

Maybe I'll write a little Tutorial on this because I am probably not the only one who does not understand it so easily.

Hi @avan-sardar, welcome!

find a topic based on uid and a custom session ID

Is this a requirement? If your plugin is listening for something like action:post.save, then you can process the stripe payment.

The action hook itself also sends the post data, which contains the pid and tid. Without more context, I am afraid I will not be able to help further.

Please report this issue on Github.

req.params.tag will give you the parameter.

@julian not directly after enabling. I have now tried ./nodebb build. Still returns script error in Google Chrome 😕

I think I installed the plugin correctly.

a0d73f88-e0f2-4fa5-a298-1e2f5fcf273b-image.png

f19252e0-cda1-40e0-91d5-5e38802d9907-image.png

@PitaJ I want to display it on a existing page e.g on users profile page.

What do I have to to, to add it to an existing route? E.g /user/pasib

Could you give me some links, or a little example how I cant add a simple backend variable to the frontend. 🙂

Thank you

@pasib when you concatenated the object, it got stringified.

Try console.log('test', postData); 🙂

@Onur-Baran Should be 🔜 not much left on 1.15.0 milestone. https://github.com/NodeBB/NodeBB/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.15.0