How to include external script?


  • Global Moderator

    So, I am having the hardest time trying to figure out how to include other scripts.

    Here is the directory setup:

    [nodebb-plugin-teamspeak]
      [public]
        [datetimepicker]
          jquery.datetimepicker.min.js          <-------    the two files
          jquery.datetimepicker.min.css         <-------    I am trying the include
        [images]
        [templates]
          [admin]
             ...
    

    The plugin.json:

    {
        "id": "nodebb-plugin-teamspeak",
        "name": "NodeBB Teamspeak plugin",
        "description": "This plugin allows for a widget to be created which shows the channels and clients   in a Teamspeak server. It also allows for web-based administration of the server.",
        "url": "https://github.com/pitaj/nodebb-plugin-teamspeak",
        "library": "./library.js",
        "staticDirs": {
            "public": "./public"
        },
        "hooks": [
            { "hook": "filter:widgets.getWidgets", "method": "defineWidget" },
            { "hook": "filter:widget.render:teamspeak", "method": "renderTSwidget" },
            { "hook": "filter:admin.header.build", "method": "addAdminNavigation"},
            { "hook": "static:app.load", "method": "init"}
        ],
        "css": [
        	"./public/style.css",
          "./public/datetimepicker/jquery.datetimepicker.css"
        ],
        "templates": "public/templates",
        "scripts": [
          "./public/datetimepicker/jquery.datetimepicker.js"
        ]
    }
    

    Any assistance is greatly appreciated.


  • Plugin & Theme Dev

    First it has to be plugin.json but I guess this is just a mistake in your post 😉
    You seem to try including .css and .js instead of .min.css and .min.js, I guess that may be the issue 😉


  • Global Moderator

    Edited that error

    @frissdiegurke said:

    First it has to be plugin.json but I guess this is just a mistake in your post 😉
    You seem to try including .css and .js instead of .min.css and .min.js, I guess that may be the issue 😉

    It's not. Both versions of the files are in that folder. I've tried it with both, neither work.


  • Plugin & Theme Dev

    another issue may be the "css": [...], NodeBB uses "less": [...] since quite a few versions.
    Maybe you've found this in an old post, I don't know if it's still supported. But since valid CSS is valid LESS you can simply change this.



  • @pitaj

    Try switching:

    "./public/style.css",
    "./public/datetimepicker/jquery.datetimepicker.css"

    to

    "public/style.css",
    "public/datetimepicker/jquery.datetimepicker.css"

    and

    "./public/datetimepicker/jquery.datetimepicker.js"

    to

    "public/datetimepicker/jquery.datetimepicker.js"


  • Global Moderator

    I probably should have told you this earlier, but I'm trying to get this to be included in the ACP. I just found out that it is working on normal pages, but not in the ACP.

    Must be some kind of permissions problem?



  • @pitaj Maybe use the 'filter:scripts.get' hook?


  • Plugin & Theme Dev

    I guess you're trying to include this in your plugins ACP page then...

    In this case you just need to include it via script/style-tag within your template.


  • Global Moderator

    I've tried that as well. Shouldn't the URL of the script be /plugins/nodebb-plugin-teamspeak/public/datetimepicker/jquery.datetimepicker.js


  • Global Moderator

    Well I figured out what I was doing wrong. Since I made the public directory public, I should have been putting
    /plugins/nodebb-plugin-teamspeak/public/datetimepicker/jquery.datetimepicker.min.js

    but I was leaving the public out /plugins/nodebb-plugin-teamspeak/datetimepicker/jquery.datetimepicker.min.js


  • Plugin & Theme Dev

    glad to hear 😄 and to make sure this works with each NodeBB configuration you'll have to use the client-side js-variable RELATIVE_PATH and prepend it to your path 😉


  • Global Moderator

    Why? What does that do? How would it help?



  • I thought only I did stuff like that 🙂


  • Plugin & Theme Dev

    Within the config.json of your NodeBB installation you can set up a relative path to prepend all NodeBB URLs, so this would result in your files beeing accessed in /relative/path/plugins/nodebb-plugin-teamspeak/public/datetimepicker/jquery.datetimepicker.min.js
    I don't have a installation to make sure now but as far I remember this is the way it works...


  • Global Moderator

    How would that help though? It seems like it's more complicated.


  • Plugin & Theme Dev

    In which way should it be more complicated?

    I've tested now. If you set "relative_path": "/board" you need to access /board/plugins/my-plugin/static/dir/path/file and the value of RELATIVE_PATH is "/board".

    So if the admin has set up correctly with the correct base_url and use_port, {relative_path}/plugins/nodebb-plugin-teamspeak/public/datetimepicker/jquery.datetimepicker.min.js should give you the correct URL.

    EDIT: use the template-variable {relative_path} rather than js-tag 😉


  • Global Moderator

    But I could just access plugins/my-plugin/static/dir/path/file without the extra /board and without configuring anything. What is the advantage of doing this? Freeing up url namespace?


  • Plugin & Theme Dev

    The advantage is that some admins don't want to have NodeBB at the root of their websites.
    So they can do this by changing the config and NodeBB takes care of it.

    But if your plugin doesn't take care of this it'll be broken (at least the datetimepicker) for those installations.


  • Global Moderator

    Okay I understand.


  • Global Moderator

    Thanks for your help @frissdiegurke


Log in to reply
 

Suggested Topics

| |