How to use Third-Party libraries?

Solved Plugin Development
  • Whats the right way to use third party libraries?

    I tried to do it descriped in the docs:
    https://docs.nodebb.org/development/plugins/libraries/

    But it doenst work.

    I want to use Swiper in my Theme:
    https://swiperjs.com/get-started/

    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/[email protected]/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', {
          ...
          ...
          ...
       })
    }
    

Suggested Topics


  • 0 Votes
    1 Posts
    83 Views

    Hi Team NodeBB,

    I am trying to create plugin to add one set image/icon field in the user setting page (user/username/settings) and this value display after user name in topic list page.

    var Plugin = {}; console.log('outside - called properly'); Plugin.addCustomFields = function(hookData, callback) { console.log('Custom Field function is called properly'); // Add your custom fields to the `fields` object here hookData.custom_field_1 = { type: 'text', required: true, title: 'Custom Field 1' }; }; module.exports = Plugin;

    could you please guide me which method i need to use and for image/icon field how to write filed attribute?

  • 0 Votes
    5 Posts
    2k Views

    So I'n my opinion it is bug that it ignores categories for some people. How to delete those entries in MongoDB?

  • Which hook should I use?

    Solved Plugin Development
    3
    0 Votes
    3 Posts
    2k Views

    Thank you @baris! I totally forgot about this. I've included my code for future reference.

    $(document).on('click', '.my-class', function() { // do stuff });
  • 0 Votes
    3 Posts
    2k Views

    @baris thanks. I realised there's some issues with redactor munging the data.
    When code is insered inside a <pre/> block, switching between HTML and WYSIWYG views will munge the content to HTML entitites.
    You can recreate this issue on this page:
    http://imperavi.com/redactor/examples/typography/

    Switch to code view and add some HTML inside the <pre/> block. I entered:
    <p>test</p>
    Switch to WYSIWYG and back to code and it has been replaced by:

    &lt;p&gt;test&lt;/p&gt;

    This breaks the ability to parse that code later with syntax highlighters.

    I've raised it with Imperavi.

  • 0 Votes
    3 Posts
    2k Views

    Those errors usually mean websockets are not proxied correctly, make sure your nginx setup is correct. If you are using cloudflare you need to disable acceleration. They don't support websockets on smaller plans.